/* Ahlulbayt Quiz Arena — v2 */
:root{
  --bg:#F6F3EC; --bg-2:#EFEBE1; --card:#FFFFFF; --ink:#141412; --ink-2:#4A4944; --mute:#7A776E;
  --line:#E3DDD0; --line-2:#D3CBBA;
  --green:#0F5C4D; --green-2:#147A66; --green-ink:#0B4338;
  --lime:#C8F169; --orange:#FF6B2C; --sky:#BFD9FF; --rose:#FFD3C4; --sand:#F3E2B8; --lilac:#DDD3FF; --mint:#CDEFD8;
  --head:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"DM Sans", "Segoe UI", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"JetBrains Mono", Consolas, monospace;
  --r:22px; --r-sm:14px;
  --shadow:0 1px 0 rgba(20,20,18,.04), 0 12px 32px -18px rgba(20,20,18,.25);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F110F; --bg-2:#161916; --card:#1A1D1A; --ink:#F2EFE7; --ink-2:#C6C2B7; --mute:#8F8C83;
  --line:#2A2E2A; --line-2:#383D38; --green:#1F8A73; --green-2:#27A288; --green-ink:#C8F169;
  --sky:#1E2B40; --rose:#3A2621; --sand:#3A3220; --lilac:#29243F; --mint:#1C3326;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--lime);color:#141412}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0 0 .4em}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}body{font-size:16.5px}}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hl{background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);padding:0 .08em}
.tag{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--green-2);display:inline-block;box-shadow:0 0 0 4px rgba(20,122,102,.15)}

/* Header */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{width:38px;height:38px}
.logo span{font:800 18px/1 var(--head);letter-spacing:-.03em}
.logo span em{font:400 italic 19px/1 var(--serif);color:var(--mute);letter-spacing:0;margin-left:2px}
.links{display:flex;gap:4px;align-items:center}
.links a{font:500 15px/1 var(--body);text-decoration:none;color:var(--ink-2);padding:10px 14px;border-radius:999px;transition:background .15s,color .15s}
.links a:hover{background:var(--bg-2);color:var(--ink)}
.links a[aria-current=page]{color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15.5px/1 var(--body);padding:15px 22px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);text-decoration:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(20,20,18,.5)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.green{background:var(--green);color:#fff}
.btn.sm{padding:11px 16px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink)}
@media (max-width:960px){
  .links{position:fixed;inset:72px 0 auto 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 16px 20px;border-bottom:1px solid var(--line);display:none}
  .links.open{display:flex}
  .links a{padding:15px 12px;font-size:17px;border-radius:12px}
  .burger{display:grid;place-items:center}
  .hdr .btn.sm{display:none}
}

/* Hero */
section.hero{padding:56px 0 40px}
section.hero>.wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
section.hero h1{font-size:clamp(44px,6.6vw,84px);margin:22px 0 22px}
section.hero h1 .it{font-size:1.08em}
section.hero p.sub{font-size:clamp(18px,1.6vw,20px);color:var(--ink-2);max-width:31em;margin-bottom:30px}
section.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:14px;margin-top:34px;color:var(--mute);font-size:14.5px}
.trust b{color:var(--ink);font-weight:600}
.dots{display:flex}
.dots span{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;display:grid;place-items:center;font:700 11px/1 var(--head);color:#141412}
.dots span:first-child{margin-left:0}
@media (max-width:960px){section.hero>.wrap{grid-template-columns:1fr;gap:40px}.hero{padding:32px 0 24px}}

/* Demo lesson card in the hero */
.demo{position:relative}
.demo .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;position:relative;z-index:2}
.demo .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.demo .head b{font:700 14px/1 var(--head)}
.demo .head span{font:600 12.5px/1 var(--body);color:var(--mute)}
.demo .prog,.lbar .prog{height:6px;border-radius:9px;background:var(--bg-2);overflow:hidden;margin-bottom:18px}
.demo .prog i,.lbar .prog i{display:block;height:100%;width:40%;background:var(--green-2);border-radius:9px;transition:width .5s ease}
.phone{background:#E5DDD5;border-radius:16px;padding:14px;margin-bottom:16px;background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);background-size:12px 12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{background-color:#0B141A;background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px)}}
.bubble{background:#fff;color:#111;border-radius:4px 14px 14px 14px;padding:10px 12px 8px;max-width:88%;font:400 14.5px/1.45 var(--body);box-shadow:0 1px 1px rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bubble{background:#202C33;color:#E9EDEF}}
.bubble small{display:block;text-align:right;color:#8696A0;font-size:11px;margin-top:2px}
.bubble .from{font:600 12.5px/1 var(--body);color:#C2410C;margin-bottom:5px;display:block}
.q{font:600 17px/1.35 var(--head);letter-spacing:-.01em;margin:0 0 12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{font:600 15px/1.2 var(--body);padding:14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s, background .15s, transform .1s}
.opt:hover{border-color:var(--ink)}
.opt:active{transform:scale(.98)}
.opt.ok{border-color:#16A34A;background:#ECFDF3;color:#14532D}
.opt.no{border-color:#DC2626;background:#FEF2F2;color:#7F1D1D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .opt.ok{background:#0F2A1B;color:#BBF7D0}:root:not([data-theme="light"]) .opt.no{background:#2A1212;color:#FECACA}}
.explain{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink-2);background:var(--bg);border-radius:14px;padding:12px 14px;display:none}
.explain.show{display:block;animation:rise .3s ease}
.explain b{color:var(--ink)}
.float{position:absolute;z-index:3;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;font:600 13.5px/1.2 var(--body);display:flex;align-items:center;gap:10px}
.float.xp{right:-14px;top:-30px;transform:rotate(3deg)}
.float.xp b{background:var(--lime);color:#141412;border-radius:8px;padding:5px 8px;font:800 13px/1 var(--head)}
.float.streak{left:-18px;bottom:-20px;transform:rotate(-3deg)}
.float.streak b{font:800 20px/1 var(--head);color:var(--orange)}
.blob{position:absolute;inset:8% -4% -6% 10%;background:var(--mint);border-radius:40px;z-index:1;transform:rotate(-4deg)}
@media (max-width:640px){.float.xp{right:6px}.float.streak{left:6px}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:18px 0;background:var(--card)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:slide 38s linear infinite}
.marquee span{font:700 22px/1 var(--head);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:48px;color:var(--ink)}
.marquee span:after{content:"";width:10px;height:10px;background:var(--orange);transform:rotate(45deg);display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* Sections */
section.s{padding:96px 0}
.s-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.s-head h2{font-size:clamp(34px,4.6vw,56px);margin:14px 0 0;max-width:14em}
.s-head p{max-width:26em;color:var(--ink-2);margin:0}
.eyebrow{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}
@media (max-width:640px){section.s{padding:64px 0}}

/* Bento courses */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;min-height:300px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.tile.w6{grid-column:span 6}.tile.w8{grid-column:span 8}
.tile .top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.tile .num{font:600 13px/1 var(--mono);color:var(--mute)}
.tile .lvl{font:600 12px/1 var(--body);padding:6px 10px;border-radius:999px;background:var(--bg-2);color:var(--ink-2)}
.tile h3{font-size:28px;margin-bottom:8px}
.tile p{color:var(--ink-2);font-size:15.5px;margin-bottom:18px;max-width:30em}
.tile .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font:500 14px/1 var(--body);color:var(--mute)}
.tile .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--ink);transition:background .2s, color .2s, transform .2s}
.tile:hover .go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
.art{border-radius:16px;margin:-4px 0 18px;height:118px;position:relative;overflow:hidden}
@media (max-width:1020px){.tile,.tile.w6,.tile.w8{grid-column:span 6}}
@media (max-width:660px){.tile,.tile.w6,.tile.w8{grid-column:span 12;min-height:0}}

/* course art */
.a-term{background:#101412;color:#9BE89B;font:500 12.5px/1.55 var(--mono);padding:14px 16px}
.a-term .p{color:#C8F169}.a-term .d{color:#6B7A72}
.a-ai{background:var(--lilac);display:grid;place-items:center;z-index:0}
.a-ai .chip{width:64px;height:64px;border-radius:14px;background:#141412;position:relative;display:grid;place-items:center;color:var(--lime);font:800 18px/1 var(--head)}
.a-ai .chip:before,.a-ai .chip:after{content:"";position:absolute;left:-14px;right:-14px;top:12px;bottom:12px;background:repeating-linear-gradient(180deg,#141412 0 3px,transparent 3px 9px);z-index:-1}
.a-ai .chip:after{left:12px;right:12px;top:-14px;bottom:-14px;background:repeating-linear-gradient(90deg,#141412 0 3px,transparent 3px 9px)}
.a-mkt{background:var(--sand);display:flex;align-items:flex-end;gap:10px;padding:18px 20px}
.a-mkt i{flex:1;background:#141412;border-radius:6px 6px 0 0}
.a-mkt i:last-child{background:var(--orange)}
.a-cc{background:var(--rose);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 20px}
.a-cc i{width:5px;border-radius:9px;background:#141412}
.a-en{background:var(--sky);padding:16px;display:flex;flex-direction:column;gap:8px}
.a-en span{align-self:flex-start;background:#fff;color:#141412;border-radius:14px 14px 14px 4px;padding:7px 12px;font:500 13.5px/1.2 var(--body)}
.a-en span:nth-child(2){align-self:flex-end;background:#141412;color:#fff;border-radius:14px 14px 4px 14px}
.a-cv{background:var(--mint);display:grid;place-items:center}
.a-cv .doc{width:120px;height:150px;background:#fff;border-radius:6px;transform:translateY(26px) rotate(-4deg);box-shadow:0 10px 20px -10px rgba(0,0,0,.3);padding:12px}
.a-cv .doc b{display:block;height:8px;width:60%;background:#141412;border-radius:3px;margin-bottom:8px}
.a-cv .doc i{display:block;height:5px;background:#E3DDD0;border-radius:3px;margin-bottom:6px}
.a-biz{background:#141412;color:#fff;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.a-biz .big{font:800 34px/1 var(--head);letter-spacing:-.03em;color:var(--lime)}
.a-biz small{font:500 12.5px/1.3 var(--body);color:#B5B5AE}
.a-tech{background:var(--bg-2);display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:16px}
.a-tech i{border-radius:8px;background:var(--card);border:1px solid var(--line)}
.a-tech i:nth-child(3n){background:var(--green-2);border-color:transparent}
.a-deen{background:var(--green);display:grid;place-items:center;color:#F6F3EC}
.a-deen .ar{font:700 34px/1.2 "Amiri",serif}

/* How we teach */
.s .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s .steps .step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.s .steps .step .n{width:36px;height:36px;border-radius:12px;background:var(--lime);color:#141412;display:grid;place-items:center;font:800 16px/1 var(--head);margin-bottom:18px}
.s .steps .step h3{font-size:23px}
.s .steps .step p{color:var(--ink-2);margin:0}
@media (max-width:900px){.s .steps{grid-template-columns:1fr}}

/* CV band */
.band{background:var(--green);color:#EAF4F0;border-radius:32px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;overflow:hidden;position:relative}
.band h2{color:#fff;font-size:clamp(34px,4.4vw,52px)}
.band p{color:#C9E3DA;font-size:18px}
.band ul{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:12px}
.band li{display:flex;gap:12px;align-items:flex-start}
.band li:before{content:"";width:20px;height:20px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23141412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;flex:0 0 auto;margin-top:2px}
.band .btn{background:var(--lime);color:#141412}
.paper{background:#fff;color:#1B1B19;border-radius:10px;padding:30px 30px 34px;font:400 10.5px/1.5 var(--body);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transform:rotate(2deg)}
.paper .n{font:700 22px/1 var(--head);letter-spacing:-.02em;color:#111}
.paper .r{font:600 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#0F5C4D;margin:6px 0 8px}
.paper .c{color:#666;border-bottom:1.5px solid #111;padding-bottom:10px}
.paper h5{font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 6px;color:#111}
.paper .row{display:flex;justify-content:space-between;font-weight:600}
.paper .row span{font-weight:400;color:#777}
.paper ul{margin:4px 0 0;padding-left:14px;color:#444}
@media (max-width:900px){.band{grid-template-columns:1fr;padding:36px 22px;border-radius:24px}.paper{transform:none}}

/* Deen corner */
.deen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deen a{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;color:var(--ink);transition:transform .2s, box-shadow .2s}
.deen a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.deen .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:var(--bg-2)}
.deen .ic svg{width:22px;height:22px;stroke:var(--green-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.deen h3{font-size:20px;margin-bottom:4px}
.deen p{font-size:14.5px;color:var(--ink-2);margin:0}
@media (max-width:900px){.deen{grid-template-columns:1fr 1fr}}

/* Founder note */
.note-card{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px}
.note-card img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.note-card blockquote{margin:0;font:400 clamp(22px,2.6vw,30px)/1.3 var(--serif);letter-spacing:-.01em}
.note-card cite{display:block;margin-top:12px;font:600 14px/1 var(--body);font-style:normal;color:var(--mute)}
@media (max-width:640px){.note-card{grid-template-columns:1fr;padding:24px}}

/* Footer */
.ft{padding:72px 0 32px;border-top:1px solid var(--line);margin-top:96px}
.ft .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.ft h4{font:700 14px/1 var(--body);letter-spacing:.02em;margin:0 0 16px;color:var(--mute)}
.ft a{display:block;text-decoration:none;color:var(--ink-2);padding:5px 0;font-size:15.5px}
.ft a:hover{color:var(--ink)}
.ft .big{font:800 clamp(48px,9vw,128px)/.9 var(--head);letter-spacing:-.05em;margin-top:64px;color:var(--ink);opacity:.08;white-space:nowrap;overflow:hidden}
.ft .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:14px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
@media (max-width:860px){.ft .grid{grid-template-columns:1fr 1fr}}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ===== Lesson page ===== */
.lbar{position:sticky;top:72px;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.lbar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.lbar .t{font:600 14.5px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar .prog{flex:1;margin:0;height:8px}
.lbar .xp{font:800 13px/1 var(--head);background:var(--lime);color:#141412;padding:7px 10px;border-radius:9px;white-space:nowrap}
.lesson-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;padding:40px 0 40px}
.side{position:sticky;top:150px;align-self:start}
.side h4{font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.side ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side li a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.3}
.side li a:hover{background:var(--bg-2);color:var(--ink)}
.side li a.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.side li a i{width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font:700 12px/1 var(--mono);background:var(--bg-2);font-style:normal;color:var(--mute)}
.side li a.on i{background:var(--ink);color:var(--bg)}
.side li a.lock{opacity:.55}
@media (max-width:980px){.lesson-wrap{grid-template-columns:1fr;gap:20px}.side{display:none}}
.reading{max-width:680px}
.reading .kick{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.reading h1{font-size:clamp(36px,5vw,56px);margin-bottom:16px}
.reading .intro{font-size:20px;color:var(--ink-2);line-height:1.55}
.reading h2{font-size:30px;margin:56px 0 14px}
.reading p,.reading li{font-size:18px;line-height:1.7}
.reading ul{padding-left:20px}
.reading li{margin-bottom:8px}
.reading strong{font-weight:700}
.say{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:24px 0}
.say .av{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:800 15px/1 var(--head);flex:0 0 auto}
.say p{margin:0;font-size:17px}
.say b.who{display:block;font:700 13px/1 var(--body);color:var(--mute);margin-bottom:6px}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
.triad div{border-radius:18px;padding:18px;border:1px solid var(--line);background:var(--card)}
.triad b{display:block;font:800 22px/1.1 var(--head);letter-spacing:-.02em;margin:10px 0 6px}
.triad span.l{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;font:800 18px/1 var(--head);color:#141412}
.triad p{font-size:15.5px !important;line-height:1.5 !important;margin:0;color:var(--ink-2)}
@media (max-width:640px){.triad{grid-template-columns:1fr}}
.flip{perspective:1000px;margin:24px 0}
.flips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fc{height:150px;cursor:pointer;position:relative;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left}
.fc .in{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fc.on .in{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;border-radius:18px;padding:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.fc .f{background:var(--ink);color:var(--bg)}
.fc .f b{font:800 24px/1.1 var(--head);letter-spacing:-.02em}
.fc .f small{font:500 13px/1 var(--body);opacity:.6}
.fc .b{background:var(--lime);color:#141412;transform:rotateY(180deg);font:500 15px/1.45 var(--body);display:block}
@media (max-width:640px){.flips{grid-template-columns:1fr}}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:28px 0}
.quiz .lbl{font:700 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--green-2);margin-bottom:12px;display:flex;justify-content:space-between}
.quiz .opts{grid-template-columns:1fr}
.spot{display:grid;gap:14px;margin:24px 0}
.spot .msg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.spot .msg .phone{margin-bottom:12px}
.spot .btns{display:flex;gap:10px}
.spot .btns .opt{flex:1;text-align:center}
.task{border-radius:var(--r);padding:24px;background:var(--sand);color:#141412;margin:32px 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .task{background:#2E2818;color:var(--ink)}}
.task h3{font-size:22px;margin-bottom:8px}
.task p{font-size:17px !important;margin:0}
.done{text-align:center;padding:40px 24px;border-radius:28px;background:var(--ink);color:var(--bg);margin:48px 0 24px}
.done h2{color:var(--bg);margin:0 0 8px !important}
.done p{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.done .btn{background:var(--lime);color:#141412}


/* ===== Course overview ===== */
.c-hero{padding:40px 0 56px}
.c-hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.crumb{font:500 14px/1 var(--body);color:var(--mute);margin-bottom:22px}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.c-hero h1{font-size:clamp(42px,6vw,76px);margin:16px 0 18px}
.c-hero .intro{font-size:19px;color:var(--ink-2);max-width:36em}
.c-art{border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.c-art .art{height:170px;margin:0;border-radius:0}
.c-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.c-box dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:12px 16px;font-size:15px}
.c-box dt{color:var(--mute)}
.c-box dd{margin:0;text-align:right;font-weight:600}
.c-box .btn{width:100%;justify-content:center}
.c-box .pbar{height:8px;border-radius:9px;background:var(--bg-2);overflow:hidden;margin:4px 0 8px}
.c-box .pbar i{display:block;height:100%;background:var(--green-2);width:0}
.c-box small{color:var(--mute);font-size:13.5px}
@media (max-width:900px){.c-hero .wrap{grid-template-columns:1fr;gap:28px}}
.learn-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.learn-list li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:15.5px}
.learn-list li:before{content:"";width:20px;height:20px;border-radius:50%;flex:0 0 auto;margin-top:2px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23141412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:640px){.learn-list{grid-template-columns:1fr}}
.mods{display:grid;gap:16px}
.mod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mod-h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.mod-h h3{font-size:22px;margin:0}
.mod-h span{font:600 13px/1 var(--body);color:var(--mute);white-space:nowrap}
.mod ol{list-style:none;margin:0;padding:6px}
.mod li a,.mod li span.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;text-decoration:none;color:var(--ink)}
.mod li a:hover{background:var(--bg-2)}
.mod li i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:var(--bg-2);font:700 13px/1 var(--mono);font-style:normal;color:var(--ink-2)}
.mod li a.done i{background:var(--green-2);color:#fff}
.mod li .ttl{flex:1;font-weight:500}
.mod li .st{font:600 12.5px/1 var(--body);padding:6px 10px;border-radius:999px;background:var(--lime);color:#141412;white-space:nowrap}
.mod li span.row{color:var(--mute)}
.mod li span.row .st{background:var(--bg-2);color:var(--mute)}
.soon-note{background:var(--card);border:1px dashed var(--line-2);border-radius:var(--r);padding:20px 22px;color:var(--ink-2);font-size:15.5px;margin-top:20px}

/* ===== Catalogue page ===== */
.page-hero{padding:48px 0 24px}
.page-hero h1{font-size:clamp(44px,6.4vw,80px);margin:16px 0 14px}
.page-hero p{font-size:19px;color:var(--ink-2);max-width:34em}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 28px}
.filters button{font:600 14.5px/1 var(--body);padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ===== Lesson extras ===== */
.reading .lede-img{border-radius:var(--r);overflow:hidden;margin:8px 0 24px}
.reading table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.reading th,.reading td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.reading th{font:700 12.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--bg-2)}
.reading pre{background:#101412;color:#C8E6C9;border-radius:16px;padding:16px 18px;overflow:auto;font:500 14px/1.6 var(--mono)}
.reading code{font:500 .92em var(--mono);background:var(--bg-2);padding:2px 6px;border-radius:6px}
.reading pre code{background:none;padding:0}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin:8px 0 0;flex-wrap:wrap}

/* ===== Legacy pages, re-skinned ===== */
:root{
  --lapis:var(--bg); --lapis-2:var(--card); --lapis-3:var(--bg-2); --ivory:var(--ink); --muted:var(--mute);
  --brass:var(--green-2); --brass-hi:var(--green); --tile:var(--green-2);
  --line:#E3DDD0; --line-2:#D3CBBA; --ink2:var(--ink-2); --gold:var(--green-2); --goldd:var(--green);
  --teal:var(--green); --blush:#FBE5DD;
  --f-display:var(--head); --f-body:var(--body);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--line:#2A2E2A;--line-2:#383D38;--blush:#3A2621}}
body.legacy{background:var(--bg) !important;background-image:none !important;color:var(--ink);font-family:var(--body)}
body.legacy:before,body.legacy:after,body.legacy main:before,body.legacy main:after{display:none !important}
body.legacy main{position:relative;z-index:1}
body.legacy .page{padding-top:28px}
body.legacy .page-head{border:0;padding-bottom:8px;margin-bottom:18px}
body.legacy .page-head:after,body.legacy .page-head:before{display:none !important}
body.legacy .page-head h1{font-family:var(--head);font-weight:800;letter-spacing:-.03em;font-size:clamp(38px,5.4vw,64px);line-height:1.02;color:var(--ink)}
body.legacy h2,body.legacy h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
body.legacy .eyebrow{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}
body.legacy .eyebrow:before{display:none}
body.legacy .standfirst{font-size:19px;color:var(--ink-2)}
body.legacy .box,body.legacy .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
body.legacy .btn{background:var(--ink);color:var(--bg);border:0;border-radius:999px;font:600 15px/1 var(--body);padding:14px 20px;box-shadow:none;text-shadow:none;background-image:none}
body.legacy .btn:hover{transform:translateY(-1px)}
body.legacy .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
body.legacy .pill{border-radius:999px}
body.legacy .ayah{border-radius:var(--r)}
body.legacy footer:not(.ft){display:none}
body.legacy .tabbar,body.legacy .tsheet{display:none !important}

/* stronger overrides for old gold gradients */
.hdr .btn,body.legacy .btn,body.legacy button.btn,body.legacy a.btn{background:var(--ink) !important;background-image:none !important;color:var(--bg) !important;box-shadow:none !important;text-shadow:none !important;border:0 !important}
body.legacy .btn.ghost,body.legacy a.btn.ghost{background:transparent !important;color:var(--ink) !important;box-shadow:inset 0 0 0 1.5px var(--line-2) !important}
body.legacy h1 em,body.legacy h2 em{background:none !important;-webkit-text-fill-color:currentColor !important;color:var(--ink) !important;font-family:var(--serif) !important;font-style:italic !important;font-weight:400 !important;letter-spacing:-.01em}
body.legacy input,body.legacy textarea,body.legacy select{font-family:var(--body)}
html,body{overflow-x:clip}
@media (max-width:960px){.blob{inset:8% 0 -6% 6%}.float.xp{right:0}}

.lesson-wrap>*{min-width:0}.reading{min-width:0;overflow-wrap:anywhere}.reading pre{max-width:100%}
@media (max-width:980px){.lesson-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.reading table{display:block;overflow-x:auto;white-space:normal}.reading th,.reading td{min-width:120px}}