/* ============================================================
   Misbaar — shared course-landing styles (unified template).
   Used by course.html, ai-course.html, foundations.html.
   Per-course accent set at runtime via --acc/--acc-soft/--acc-text
   (see assets/js/course-render.js + assets/js/courses-data.js).
   ============================================================ */
:root{--acc:#22d3ee;--acc-soft:rgba(34,211,238,.12);--acc-text:#67E8F9}
body{background:var(--color-bg);color:var(--color-text)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.sec{padding:56px 0}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:6px 14px;background:rgba(124,58,237,.14);color:#C4B5FD;border:1px solid rgba(168,85,247,.3)}
.eyebrow.acc{background:var(--acc-soft);color:var(--acc-text);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
h1.hero{font-size:clamp(30px,6vw,52px);font-weight:900;line-height:1.28;margin:20px 0 0;letter-spacing:-.01em}
.grad{background:linear-gradient(100deg,var(--grad-from,#A855F7),var(--grad-to,#22D3EE));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(15px,2.4vw,18px);color:var(--color-text-muted);line-height:2;max-width:640px;margin:20px auto 0}
.lede b{color:var(--color-text)}
.start-note{font-size:12.5px;color:var(--color-text-faint);margin-top:8px}
/* principle animation */
.principle{margin:34px auto 0;max-width:560px;border:1px solid var(--color-border);border-radius:20px;background:var(--color-card);padding:24px 22px;position:relative;overflow:hidden}
.pr-line{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-weight:900;font-size:clamp(17px,3.2vw,22px)}
.pr-ai{color:var(--acc)}.pr-h{color:#A855F7}
.pr-arrow{position:relative;width:52px;height:2px;background:linear-gradient(90deg,var(--acc),#A855F7);border-radius:2px}
.pr-arrow::after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #A855F7;transform:translateY(-50%);animation:flow 2.6s ease-in-out infinite}
@keyframes flow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.pr-sub{margin:13px 0 0;font-size:13px;color:var(--color-text-faint);text-align:center}
.refbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:28px auto 0;max-width:560px}
.refchip{font-size:12px;font-weight:800;color:var(--acc-text);background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:999px;padding:5px 13px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.tamara-note{font-size:12px;color:var(--color-text-faint);margin-top:10px}
/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:0 auto}
.tbadge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-text-muted);background:var(--color-card);border:1px solid var(--color-border);border-radius:999px;padding:9px 16px}
.tbadge b{color:var(--acc-text)}
/* spine */
.spine{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-top:14px}
.step{position:relative;padding:22px 16px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-card);margin:7px;transition:border-color .2s,transform .2s}
.step:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--color-border));transform:translateY(-2px)}
.step .n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:14px;background:rgba(168,85,247,.16);color:#C4B5FD;margin-bottom:11px}
.step h4{font-size:14.5px;font-weight:900;margin:0 0 5px}
.step p{font-size:12.5px;color:var(--color-text-muted);line-height:1.75;margin:0}
.step .ai{display:inline-block;margin-top:9px;font-size:11px;font-weight:800;color:var(--acc-text);background:var(--acc-soft);border-radius:7px;padding:3px 8px}
/* judgment / why cards */
.jcard{border:1px solid rgba(234,179,8,.35);background:linear-gradient(160deg,rgba(234,179,8,.08),var(--color-card));border-radius:18px;padding:22px;margin-top:14px}
.jcard.acc{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:linear-gradient(160deg,var(--acc-soft),var(--color-card))}
.jcard.purple{border-color:rgba(168,85,247,.4);background:linear-gradient(160deg,rgba(124,58,237,.1),var(--color-card))}
.jcard .lbl{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:13px;color:#FCD34D;margin-bottom:8px}
.jcard.purple .lbl{color:#C4B5FD}
.jbody{font-size:14.5px;line-height:1.95;color:var(--color-text-muted);margin:0}
.jbody b{color:var(--color-text)}.jbody b.accent{color:var(--acc-text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.yn{border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.8}
.yn.ok{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.28)}
.yn.no{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.26)}
.yn b{display:block;margin-bottom:5px;font-size:13px}
.yn.ok b{color:#86EFAC}.yn.no b{color:#FCA5A5}
/* mini cards / grids */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.mini{border:1px solid var(--color-border);border-radius:16px;background:var(--color-card);padding:20px}
.mini h4{font-size:15px;font-weight:900;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.mini p{font-size:13px;color:var(--color-text-muted);line-height:1.8;margin:0}
.mini p b{color:var(--color-text)}
.marketline{font-size:14.5px;color:var(--color-text-muted);line-height:1.95;max-width:640px;margin:18px auto 0;text-align:center}
/* certificate + case-study cards */
.promo{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--color-border);border-radius:18px;background:var(--color-card);padding:24px;margin-top:16px}
.promo h3{font-size:17px;font-weight:900;margin:0 0 8px}
.promo p{font-size:14px;color:var(--color-text-muted);line-height:1.9;margin:0}
.promo p b{color:var(--color-text)}
.certbadge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#C4B5FD;background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.3);border-radius:999px;padding:6px 13px;margin-bottom:12px}
/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:22px}
.tcard{border:1px solid var(--color-border);border-radius:16px;background:var(--color-card);padding:20px}
.tcard p{font-size:13.5px;color:var(--color-text-muted);line-height:1.9;margin:0 0 12px}
.tcard .who{font-size:12.5px;font-weight:800;color:var(--color-text)}
.tcard .who small{display:block;color:var(--color-text-faint);font-weight:600;margin-top:2px}
/* buy box */
.feat{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--color-text-muted);line-height:1.9;margin:8px 0}
.feat span:first-child{color:var(--acc-text);font-weight:900;margin-top:1px}
.buybox{border:1px solid rgba(168,85,247,.5);border-radius:24px;background:linear-gradient(165deg,rgba(124,58,237,.12),var(--color-card));padding:30px;text-align:center;max-width:520px;margin:0 auto}
.price-pill{display:inline-flex;align-items:baseline;gap:8px;font-weight:900}
.price-pill b{font-size:34px;color:var(--color-text)}
.anchor{font-size:12.5px;color:var(--acc-text);font-weight:700;margin:8px 0 0}
.guarantee{display:flex;align-items:flex-start;gap:8px;text-align:right;font-size:12.5px;color:var(--color-text-muted);line-height:1.8;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.22);border-radius:12px;padding:11px 13px;margin:16px 0 0}
.guarantee span:first-child{color:#86EFAC}
/* faq */
details.faq{border:1px solid var(--color-border);border-radius:14px;background:var(--color-card);padding:0 18px;margin:10px 0}
details.faq summary{cursor:pointer;padding:16px 0;font-weight:800;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--color-secondary);font-weight:900}
details.faq[open] summary::after{content:"−"}
details.faq p{font-size:13.5px;color:var(--color-text-muted);line-height:1.9;margin:0 0 16px}
.sect-h{font-size:clamp(22px,4vw,30px);font-weight:900;text-align:center;margin:0 0 6px}
.sect-s{text-align:center;color:var(--color-text-muted);font-size:14.5px;line-height:1.9;max-width:600px;margin:0 auto 8px}
.grouplbl{text-align:center;margin:22px 0 2px}
/* sticky buy bar */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .3s ease;background:color-mix(in srgb,var(--color-card) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--color-border);box-shadow:0 -8px 24px rgba(0,0,0,.28)}
.stickybar.show{transform:translateY(0)}
.sb-in{max-width:1000px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sb-price{font-size:13.5px;color:var(--color-text-muted);font-weight:700}
.sb-price b{color:var(--color-text);font-size:17px}
.sb-price small{display:block;font-size:11px;color:var(--color-text-faint)}
@media(max-width:520px){.sb-price small{display:none}}
/* final cta */
.finalcta{text-align:center;border:1px solid rgba(168,85,247,.4);border-radius:24px;background:linear-gradient(160deg,rgba(124,58,237,.14),var(--color-card));padding:44px 24px;max-width:720px;margin:0 auto}
/* ---- light-mode contrast: darken accent/semantic inks on light surfaces ---- */
:root{--acc-ink:var(--acc-text)}
html.light{--acc-ink:color-mix(in srgb,var(--acc) 72%,#000)}
html.light .eyebrow.acc,html.light .refchip,html.light .step .ai,html.light .feat span:first-child,html.light .anchor,html.light .jbody b.accent,html.light .pr-ai,html.light .tbadge b{color:var(--acc-ink)}
html.light .eyebrow,html.light .step .n,html.light .certbadge,html.light .jcard.purple .lbl{color:#6D28D9}
html.light .pr-h{color:#7C3AED}
html.light .jcard .lbl{color:#B45309}
html.light .yn.ok b,html.light .guarantee span:first-child{color:#15803D}
html.light .yn.no b{color:#B91C1C}
html.light .grad{filter:saturate(1.15) brightness(.82)}