/* AI Websites 101 — theme. Reference lock: BRAND.md. Black canvas, Inter only,
   hairlines, one gradient reserved for the promo strip and the primary button. */
:root{
  --ink:#09090B;--surface:#111113;--lift:#1B1B1F;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --txt:#FFFFFF;--helper:#A3A3AB;--muted:#8A8A93;--bad:#FF7A7A;
  --g1:#18E0FF;--g2:#3D6BFF;--g3:#D93BFF;
  --grad:linear-gradient(90deg,#18E0FF,#3D6BFF 52%,#D93BFF);
  --gradbtn:linear-gradient(90deg,#12B8E6,#3558F0 52%,#C233E8);
  --wash:linear-gradient(90deg,rgba(24,224,255,.12),rgba(217,59,255,.10));
  --edge:#262B8F;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r1:6px;--r2:8px;--r3:14px;
  --shadow-lbl:0 0 1px rgba(0,0,0,.70),0 1px 2px rgba(0,0,0,.66),0 2px 12px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--font);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--txt)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
.wrap{width:min(100% - 32px,1200px);margin-inline:auto}
.narrow{width:min(100% - 32px,760px);margin-inline:auto}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- bar (desktop only; phones get no header) ---------- */
.bar{display:none;border-bottom:1px solid var(--line);background:rgba(9,9,11,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.bar .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.bar .brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--txt)}
.bar .brand img{width:38px;height:auto}
.bar nav{margin-left:auto;display:flex;gap:8px;align-items:center}
.bar nav a,.bar nav button{font-weight:600;font-size:15px;color:var(--txt);text-decoration:none;padding:8px 12px;border-radius:var(--r1);background:none;border:0;cursor:pointer;line-height:1.3}
.bar nav .out{border:1px solid var(--line2);padding:8px 16px}
.bar nav a:hover,.bar nav button:hover{background:var(--lift)}
@media(min-width:761px){.bar{display:block}}
.bar.always{display:block}
@media(max-width:760px){.bar.always .wrap{min-height:56px}.bar.always .brand span{display:none}}

/* ---------- type ---------- */
h1{font-size:clamp(38px,6.2vw,64px);line-height:1.0;letter-spacing:-.025em;font-weight:800;margin:0 auto;max-width:16ch;text-wrap:balance}
h2{font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
@media(min-width:761px){h2{font-size:28px}}
h3{font-size:17px;font-weight:700;margin:0 0 8px;line-height:1.35}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin:0 0 16px}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--helper);max-width:56ch;margin:16px auto 0;text-wrap:pretty}
.sub{color:var(--helper);max-width:62ch;margin:0 0 32px}
.center{text-align:center}.center .sub{margin-inline:auto}
p{margin:0 0 16px}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:48px 0 48px;overflow:hidden}
@media(min-width:761px){.hero{padding:64px 0 96px}}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.mark{width:min(44vw,160px);margin:0 auto 12px}
@media(min-width:761px){.mark{width:236px;margin-bottom:16px}}
/* phones: the button comes before the proof frame so it sits above the fold (gate item 1) */
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero .wrap > *{width:100%}
.hero .mark{width:min(44vw,160px)}
@media(min-width:761px){.hero .mark{width:236px}}
@media(max-width:760px){.hero .cta-wrap{margin-top:24px}.hero{padding-top:32px}}
.hero .proof{margin-top:40px}
.phone-line{margin:24px 0 0;font-size:15px;color:var(--helper)}
.phone-line a{font-weight:700;color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line2)}

/* proof object */
.proof{margin:24px auto 0;max-width:720px;text-decoration:none;display:block;color:inherit}
.frame{position:relative;border:1px solid var(--line2);border-radius:var(--r3);background:var(--surface);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 16px -8px rgba(0,0,0,.08),0 24px 48px -24px rgba(0,0,0,.08)}
.frame .chrome{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:#0C0C0F}
.frame .chrome i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.frame .chrome span{margin-left:8px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.frame img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:top}
@media(max-width:760px){.frame img{aspect-ratio:16/8}}
.proof .cap{font-size:14px;color:var(--muted);margin:12px 0 0}
.proof .cap b{color:var(--helper);font-weight:600}

/* ---------- the button (house spec, gradient fill) ---------- */
.cta-wrap{position:relative;display:inline-block;margin:32px auto 0;max-width:100%;width:auto!important}
.btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:min(100%,380px);min-width:min(100%,300px);
  padding:16px 32px;border-radius:var(--r2);border:0;cursor:pointer;color:#fff;text-decoration:none;font-family:var(--font);text-align:center;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),var(--gradbtn);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 0 var(--edge),0 4px 6px -2px rgba(0,0,0,.08),0 12px 20px -8px rgba(0,0,0,.08),0 24px 40px -16px rgba(0,0,0,.08);
  transition:transform .12s ease-out,box-shadow .12s ease-out,filter .12s ease-out}
.btn .lab{font-size:19px;font-weight:800;letter-spacing:.03em;display:inline-flex;align-items:center;gap:10px;text-shadow:var(--shadow-lbl)}
.btn .lab svg{width:20px;height:20px;flex:none;transition:transform .12s ease-out;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.btn .sub{font-size:13.5px;font-weight:600;letter-spacing:.01em;text-shadow:var(--shadow-lbl);margin:0;color:#fff;max-width:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 5px 0 var(--edge),0 6px 8px -2px rgba(0,0,0,.08),0 16px 24px -8px rgba(0,0,0,.08),0 32px 48px -16px rgba(0,0,0,.08)}
.btn:hover .lab svg{transform:translateX(3px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 var(--edge),0 2px 4px -2px rgba(0,0,0,.08)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn.solid{background-image:none;background:#fff;color:#000;box-shadow:0 3px 0 #9A9AA3,0 4px 6px -2px rgba(0,0,0,.08),0 12px 20px -8px rgba(0,0,0,.08)}
.btn.solid .lab,.btn.solid .sub{text-shadow:none;color:#000}
.btn.solid:active{box-shadow:0 1px 0 #9A9AA3}
.pt{position:absolute;right:-24px;bottom:-14px;font-size:44px;line-height:1;transform:rotate(-12deg);animation:bob 1.3s ease-in-out infinite;pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));z-index:2}
@keyframes bob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-8px)}}
.ring{position:absolute;pointer-events:none;overflow:visible;z-index:1}
.ring ellipse{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.9}
.risk{font-size:14px;color:var(--muted);margin:20px 0 0}
.btn-sm{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r1);border:0;cursor:pointer;color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),var(--gradbtn);text-shadow:var(--shadow-lbl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 2px 0 var(--edge);transition:transform .12s ease-out,filter .12s ease-out;white-space:nowrap}
.btn-sm:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-sm:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 var(--edge)}
.btn-out{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r1);border:1px solid var(--line2);background:none;color:var(--txt);text-decoration:none;font-weight:600;font-size:15px;cursor:pointer}
.btn-out:hover{background:var(--lift)}
.link{background:none;border:0;padding:0;color:var(--helper);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px}

/* ---------- trust row ---------- */
.trust{list-style:none;margin:40px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;max-width:760px}
@media(min-width:761px){.trust{grid-template-columns:repeat(4,1fr);gap:16px}}
.trust li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--helper);text-align:left;line-height:1.3}
.trust svg{width:24px;height:24px;flex:none;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- promo strip (the second chromatic event) ---------- */
.promo{padding:0 0 48px}
.strip{border:1px solid var(--line2);border-radius:var(--r1);background:var(--wash);padding:16px;display:grid;gap:12px;align-items:center;text-align:center}
@media(min-width:761px){.strip{grid-template-columns:auto 1fr auto;text-align:left;padding:16px 24px;gap:24px}}
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;font-size:24px;letter-spacing:-.01em}
.strip p{margin:0;font-weight:600;font-size:16px}
.strip p small{display:block;font-weight:400;color:var(--helper);font-size:14px;margin-top:2px}

/* ---------- sections ---------- */
section.sec{padding:48px 0}
@media(min-width:761px){section.sec{padding:96px 0}}
section.sec + section.sec{border-top:1px solid var(--line)}
.course-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.course-head h2{margin:0}
.course-head span{font-size:14px;color:var(--muted);font-weight:600}
.grid{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 48px}
.grid:last-child{margin-bottom:0}
@media(min-width:520px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}

/* lesson card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--txt);transition:border-color .12s ease-out,background .12s ease-out;position:relative}
a.card:hover,button.card:hover{border-color:var(--line2);background:var(--lift)}
button.card{text-align:left;cursor:pointer;font:inherit;width:100%}
.thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r1);background:#0C0C0F;border:1px solid var(--line);overflow:hidden}
.thumb svg.wf{position:absolute;inset:0;width:100%;height:100%;fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.14);stroke-width:1}
.thumb .n{position:absolute;left:12px;top:10px;font-size:12px;font-weight:700;color:var(--helper);letter-spacing:.08em;text-transform:uppercase}
.thumb .play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.6);display:grid;place-items:center}
.thumb .play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.thumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);border-radius:4px;padding:4px 8px;font-size:13px;font-weight:600;line-height:1}
.thumb .lock{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:4px;background:rgba(0,0,0,.8);display:grid;place-items:center}
.thumb .lock svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
.thumb .done{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.thumb .done svg{width:14px;height:14px;stroke:#000;fill:none;stroke-width:2.5}
.card .t{font-size:16px;font-weight:700;line-height:1.35;margin:0;text-wrap:pretty}
.card .c{font-size:15px;color:var(--helper);margin:0}

/* who / how */
.cols3{display:grid;gap:16px}
@media(min-width:761px){.cols3{grid-template-columns:repeat(3,1fr);gap:24px}}
.tile{border:1px solid var(--line);border-radius:var(--r2);padding:24px;background:var(--surface)}
.tile .num{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin:0 0 12px}
.tile p{margin:0;color:var(--helper);font-size:15.5px}
.tile h3{font-size:18px}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;color:var(--helper);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--helper);max-width:62ch}

/* ---------- forms ---------- */
.panel{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r3);padding:24px}
@media(min-width:761px){.panel{padding:32px}}
.panel h2{margin-bottom:8px}
.field{display:grid;gap:6px;margin:0 0 16px}
.field label{font-size:14px;font-weight:600;color:var(--helper)}
.field label small{font-weight:400;color:var(--muted)}
.two{display:grid;gap:0 12px}
@media(min-width:520px){.two{grid-template-columns:1fr 1fr}}
input[type=text],input[type=email],input[type=tel],input[type=url]{width:100%;font:inherit;font-size:17px;color:#fff;background:var(--ink);border:1px solid var(--line2);border-radius:var(--r1);padding:14px;min-height:52px}
input:focus{outline:2px solid #fff;outline-offset:1px;border-color:#fff}
input::placeholder{color:var(--muted)}
.consent{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 16px}
.consent a{color:var(--helper)}
.err{color:var(--bad);font-size:14px;font-weight:600;margin:0 0 12px;min-height:1em}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.code{font-size:30px;letter-spacing:.28em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.form-cta{margin:8px 0 0;text-align:center}
.form-cta .cta-wrap{margin-top:8px}
.after{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}
.ok-line{font-size:15px;color:var(--helper);margin:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 64px;color:var(--muted);font-size:14px}
@media(min-width:761px){footer{padding:64px 0 96px}}
footer .cols{display:grid;gap:24px}
@media(min-width:761px){footer .cols{grid-template-columns:2fr 1fr 1fr;gap:48px}}
footer img{width:64px}
footer a{color:var(--helper);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer h4{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--helper)}
.fine{font-size:12.5px;line-height:1.6;margin:32px 0 0;color:var(--muted);max-width:80ch}
.fine p{margin:0 0 8px}

/* ---------- member area ---------- */
.member{padding:32px 0 64px}
@media(min-width:761px){.member{padding:48px 0 96px}}
.member h1{font-size:clamp(30px,4vw,44px);max-width:none}
.gate{max-width:480px;margin:32px auto}
.next{display:grid;gap:16px;margin-top:48px}
@media(min-width:761px){.next{grid-template-columns:1fr 1fr}}
.next .tile p{margin-bottom:16px}
.note{font-size:13px;color:var(--muted);line-height:1.55;margin:16px 0 0}

/* lesson page */
.lbar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;background:rgba(9,9,11,.94);backdrop-filter:blur(8px)}
.lbar .wrap{display:flex;align-items:center;gap:12px;min-height:56px}
.lbar .back{text-decoration:none;font-weight:600;font-size:14px;color:var(--helper);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lbar .back:hover{color:#fff}
.steps{display:flex;gap:5px;margin-left:auto;overflow-x:auto;scrollbar-width:none;padding:2px}
.steps::-webkit-scrollbar{display:none}
.steps a{width:27px;height:27px;border-radius:6px;display:grid;place-items:center;text-decoration:none;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);background:var(--surface);flex:none}
.steps a.on{background:#fff;color:#000;border-color:#fff}
.steps a.done{color:#fff;border-color:var(--line2)}
.steps i{width:8px;flex:none}
.pbar{height:3px;background:var(--line)}
.pbar b{display:block;height:100%;background:#fff;width:0;transition:width .4s ease}
.lesson{display:grid;gap:24px;padding:24px 0 96px}
@media(min-width:960px){.lesson{grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;padding-top:40px}}
.lesson .side{position:sticky;top:80px;display:grid;gap:16px}
@media(max-width:959px){.lesson .side{position:static}}
.video{aspect-ratio:16/9;border:1px solid var(--line2);border-radius:var(--r3);overflow:hidden;background:#000;position:relative}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .soon{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;gap:8px}
.video .soon svg.wf{position:absolute;inset:0;width:100%;height:100%;fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.12);stroke-width:1;z-index:0}
.video .soon > *{position:relative;z-index:1}
.video .soon .big{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1}
.video .soon .s{font-size:14px;color:var(--helper);max-width:32ch;margin:0 auto}
.body{max-width:62ch}
.body h2{font-size:22px;margin:40px 0 12px}
.body h2:first-child{margin-top:0}
.body p,.body ul,.body ol{margin:0 0 16px}
.body ul,.body ol{padding-left:22px}
.body li{margin-bottom:8px}
.body li::marker{color:var(--helper);font-weight:700}
.body pre{white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r2);padding:16px;font-size:14px;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0 0 16px;position:relative}
.copy{position:absolute;right:8px;top:8px;font-size:12px;font-weight:700;padding:6px 10px;border-radius:4px;border:1px solid var(--line2);background:var(--ink);color:#fff;cursor:pointer}
.copy:hover{background:var(--lift)}
.body .do{border:1px solid var(--line2);border-left:3px solid #fff;border-radius:var(--r1);padding:16px;margin:32px 0;background:rgba(255,255,255,.03)}
.body .do h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--helper)}
.body .do p:last-child{margin:0}
.body .ex{border:1px solid var(--line);border-radius:var(--r2);padding:16px;margin:0 0 16px;background:var(--surface);font-size:15.5px}
.body .ex h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--helper)}
.body .ex ul{margin:0}
.body a{color:#fff}
.gl{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dashed var(--line2);line-height:inherit}
.gl::after{content:"?";font-size:.62em;font-weight:700;color:var(--helper);vertical-align:super;margin-left:2px}
.gl:hover,.gl:focus-visible{color:#fff;border-bottom-color:#fff;outline:none}
.tip{position:absolute;z-index:50;max-width:min(320px,calc(100vw - 32px));background:var(--lift);border:1px solid var(--line2);border-radius:var(--r2);padding:12px 14px;font-size:14px;line-height:1.5;color:var(--txt);box-shadow:0 2px 4px rgba(0,0,0,.08),0 12px 24px -8px rgba(0,0,0,.08),0 24px 48px -16px rgba(0,0,0,.08)}
.tip b{display:block;margin-bottom:4px}
.lnav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:48px 0 0;flex-wrap:wrap}
.lnav .cta-wrap{margin:0}
.lhead .eyebrow{margin-bottom:12px}
.lhead h1{font-size:clamp(30px,4vw,44px);max-width:none;margin:0 0 12px;text-align:left}
.lhead .lead{margin:0 0 24px;text-align:left;margin-left:0}
.sidecard{border:1px solid var(--line);border-radius:var(--r2);padding:16px;background:var(--surface);font-size:14px;color:var(--helper)}
.sidecard h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin-bottom:12px}
.sidecard ol{margin:0;padding-left:18px;display:grid;gap:6px}
.sidecard li a{color:var(--helper);text-decoration:none}
.sidecard li.on a{color:#fff;font-weight:700}
.sidecard li.done a{color:#fff}

/* legal */
.legal{padding:32px 0 96px;max-width:72ch}
.legal h1{font-size:clamp(30px,4vw,44px);max-width:none;margin:0 0 8px;text-align:left}
.legal h2{margin:48px 0 12px;font-size:22px}
.legal p,.legal li{color:var(--helper)}
.legal ul{padding-left:20px}

/* reveals + motion */
.rv{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s ease-out}
.rv.pre{opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.pre{opacity:1;transform:none;transition:none}
  .pt,.btn,.hero *,.hero .cta-wrap::before,.hero .cta-wrap::after{animation:none!important}
  .btn,.btn-sm{transition:none}
}

/* ================= 2026-09-18 evening — owner's direction: geometric, high-end, elaborate hero ================= */
/* page-wide geometric canvas behind everything */
#geo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body>*{position:relative;z-index:1}
.hero{background:radial-gradient(ellipse 60% 52% at 50% 42%,rgba(9,9,11,.5),rgba(9,9,11,0) 72%)}
.hero .mark{animation:markIn 1s cubic-bezier(.2,.8,.2,1) both,breathe 5.5s ease-in-out 1.2s infinite}
.hero .eyebrow{animation:rise .6s ease-out .3s both}
.hero h1{animation:rise .7s ease-out .45s both}
.hero .lead{animation:rise .7s ease-out .6s both}
.hero .cta-wrap{animation:rise .7s ease-out .8s both}
.hero .risk{animation:rise .6s ease-out .95s both}
.hero .proof{animation:rise .8s ease-out 1.05s both}
.hero .trust{animation:rise .6s ease-out 1.25s both}
.hero .phone-line{animation:rise .6s ease-out 1.35s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes markIn{0%{opacity:0;transform:scale(.84)}100%{opacity:1;transform:none}}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 10px rgba(24,224,255,.26)) drop-shadow(0 0 28px rgba(61,107,255,.16))}50%{filter:drop-shadow(0 0 18px rgba(24,224,255,.55)) drop-shadow(0 0 46px rgba(217,59,255,.34))}}

/* the hero button: bigger, flowing gradient, sonar rings, glow, a pulsing pointer */
.hero .btn{padding:20px 40px;width:min(100%,440px);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),linear-gradient(90deg,#12B8E6,#3558F0 30%,#C233E8 50%,#3558F0 70%,#12B8E6);
  background-size:100% 100%,300% 100%;animation:flow 6s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 0 var(--edge),0 4px 6px -2px rgba(0,0,0,.08),0 16px 44px -12px rgba(61,107,255,.55),0 28px 64px -20px rgba(217,59,255,.35)}
.hero .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 5px 0 var(--edge),0 6px 8px -2px rgba(0,0,0,.08),0 20px 52px -12px rgba(61,107,255,.62),0 32px 72px -20px rgba(217,59,255,.42)}
.hero .btn .lab{font-size:22px}
.hero .btn .sub{font-size:14.5px}
@keyframes flow{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
.hero .cta-wrap::before,.hero .cta-wrap::after{content:"";position:absolute;inset:-5px;border-radius:14px;border:2px solid rgba(255,255,255,.72);animation:sonar 2.6s ease-out infinite;pointer-events:none;z-index:0}
.hero .cta-wrap::after{animation-delay:1.3s}
@keyframes sonar{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.18,1.55);opacity:0}}
.hero .pt{font-size:64px;right:-34px;bottom:-24px;animation:tap 1.4s ease-in-out infinite;transform-origin:20% 90%}
@media(max-width:760px){.hero .pt{font-size:56px;right:-14px;bottom:-20px}}
@keyframes tap{0%,100%{transform:rotate(-14deg) scale(1)}42%{transform:rotate(-14deg) translate(-10px,10px) scale(1.18)}58%{transform:rotate(-14deg) translate(-7px,7px) scale(1.12)}}

/* the demo frame: prompt types, wireframe assembles, crossfade to the real page */
.frame.demo .stage{position:relative;aspect-ratio:16/7;background:#0C0C0F;overflow:hidden}
@media(max-width:760px){.frame.demo .stage{aspect-ratio:16/9}}
.frame.demo .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease;aspect-ratio:auto}
.frame.demo.built .shot{opacity:1}
.frame.demo .build{position:absolute;inset:0;padding:4% 5%;text-align:left;transition:opacity .9s ease}
.frame.demo.built .build{opacity:0}
.chat{font-size:clamp(11.5px,1.5vw,15px);line-height:1.45;color:#EDEDF2;display:flex;gap:8px;align-items:flex-start;max-width:66ch}
.chat .who{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--helper);border:1px solid var(--line2);border-radius:4px;padding:2px 6px;margin-top:2px}
.chat .who.ai{background:var(--grad);color:#fff;border-color:transparent;text-shadow:var(--shadow-lbl)}
.chat.reply{margin-top:8px;color:var(--helper)}
.caret{display:inline-block;width:2px;height:1em;background:#fff;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.wire{position:absolute;left:5%;right:5%;top:36%;bottom:5%;width:90%;height:59%;overflow:visible}
.wire rect{fill:rgba(255,255,255,.04);stroke:#fff;stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400;opacity:0;transition:stroke-dashoffset 1s ease,opacity .3s ease,fill .8s ease .45s}
.wire .w.on rect{stroke-dashoffset:0;opacity:1;fill:rgba(255,255,255,.10)}
.wire .w.on rect.acc{fill:rgba(61,107,255,.6);stroke:#9DBAFF}
.frame .chrome .live{margin-left:auto;font-size:11px;font-weight:700;color:#3DDC84;letter-spacing:.04em}
.frame .chrome .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3DDC84;margin-right:6px;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 1.6s ease-out 3}
@keyframes ping{to{box-shadow:0 0 0 8px rgba(61,220,132,0)}}

/* real thumbnails on the lesson cards and the lesson video slot */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .play{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.video .soon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9}
.video .soon .big{display:none}
.video .soon .s{background:rgba(0,0,0,.72);border:1px solid var(--line);border-radius:6px;padding:10px 14px;max-width:36ch}

/* the timed pop-ups */
.pop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(9,9,11,.74);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
.pop.show{opacity:1}
.pop-card{width:min(100%,440px);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:24px;position:relative;transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.9,.3,1.1);box-shadow:0 2px 4px rgba(0,0,0,.08),0 24px 64px -24px rgba(0,0,0,.08)}
.pop.show .pop-card{transform:none}
.pop-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:8px;border:0;background:none;color:var(--helper);font-size:26px;cursor:pointer;line-height:1}
.pop-x:hover{background:var(--lift);color:#fff}
.pop-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin:0 0 8px}
.pop-card h3{font-size:22px;line-height:1.2;margin:0 36px 8px 0;letter-spacing:-.01em;text-wrap:balance}
.pop-b{color:var(--helper);margin:0 0 16px}
.pop-form .field{margin-bottom:12px}
.pop-form input{min-height:48px;padding:12px}
.pop-btn{width:100%;padding:14px 20px}
.pop-btn .lab{font-size:18px}
.pop-fine{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.pop-fine a{color:var(--helper)}
body.pop-open{overflow:hidden}

/* phones: keep the hero label on one line */
@media(max-width:760px){
  .hero .btn{padding:18px 22px;width:100%}
  .hero .btn .lab{font-size:clamp(18px,5.6vw,22px);letter-spacing:.02em}
  .hero .btn .sub{font-size:13.5px}
}

/* ================= lesson pages: points, actions, full lesson, quiz ================= */
.lblock{margin:32px 0 0}
.lblock h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin:0 0 12px}
.points,.acts{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:66ch}
.points li,.acts li{position:relative;padding:14px 16px 14px 48px;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);font-size:16px;line-height:1.5}
.points li::before{content:"";position:absolute;left:18px;top:21px;width:10px;height:10px;border-radius:50%;background:var(--grad)}
.acts{counter-reset:a}
.acts li::before{counter-increment:a;content:counter(a);position:absolute;left:14px;top:13px;width:24px;height:24px;border-radius:6px;background:#fff;color:#000;font-weight:800;font-size:13px;display:grid;place-items:center}
details.full{margin:32px 0 0;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
details.full summary{cursor:pointer;list-style:none;padding:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.full summary::-webkit-details-marker{display:none}
details.full summary::after{content:"+";font-size:22px;font-weight:400;color:var(--helper)}
details.full[open] summary::after{content:"–"}
details.full .body{padding:0 16px 16px}
.quiz{margin:40px 0 0;border:1px solid var(--line2);border-radius:var(--r3);padding:24px;background:var(--surface)}
.quiz h2{font-size:22px;margin:0 0 4px}
.quiz .qsub{color:var(--helper);margin:0 0 20px;font-size:15px}
.quiz .q{padding:16px 0;border-top:1px solid var(--line)}
.quiz .qt{margin:0 0 12px;font-weight:700;font-size:16.5px}
.quiz .opts{display:grid;gap:8px}
.quiz .opt{text-align:left;font:inherit;font-size:15.5px;color:#fff;background:var(--ink);border:1px solid var(--line2);border-radius:var(--r1);padding:12px 14px;cursor:pointer;min-height:44px;transition:border-color .12s ease-out,background .12s ease-out}
.quiz .opt:hover{border-color:#fff}
.quiz .opt.right{border-color:#3DDC84;background:rgba(61,220,132,.12)}
.quiz .opt.wrong{border-color:var(--bad);background:rgba(255,122,122,.10)}
.quiz .opt[disabled]{cursor:default}
.quiz .why{margin:10px 0 0;font-size:14.5px;color:var(--helper);min-height:1em}
.quiz .why.ok{color:#8BEBB4}
.quiz .qscore{margin:16px 0 0;font-weight:700}
.btn.locked{opacity:.45;pointer-events:none;filter:saturate(.4)}
.lnav .hint{width:100%;font-size:14px;color:var(--muted);margin:0 0 8px;text-align:right}
@media(max-width:959px){.lnav .hint{text-align:left}}

/* ================= member overview ================= */
.ov-stats{display:grid;gap:12px;margin:24px 0 0}
@media(min-width:640px){.ov-stats{grid-template-columns:repeat(3,1fr)}}
.stat{border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);padding:16px}
.stat .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--helper);margin:0 0 6px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.stat .v small{font-size:14px;font-weight:600;color:var(--helper);letter-spacing:0}
.pline{height:6px;border-radius:3px;background:var(--line);margin:10px 0 0;overflow:hidden}
.pline b{display:block;height:100%;background:var(--grad);width:0;transition:width .5s ease}
.course-head .pmini{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);font-weight:600}
.course-head .pmini i{display:inline-block;width:80px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.course-head .pmini i b{position:absolute;inset:0;width:0;background:#fff}
.cert-card{margin-top:48px;border:1px solid var(--line2);border-radius:var(--r3);padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--surface);display:grid;gap:16px}
@media(min-width:761px){.cert-card{grid-template-columns:1fr auto;align-items:center}}
.cert-card h3{font-size:20px;margin:0 0 6px}
.cert-card p{margin:0;color:var(--helper)}
.bridge{margin-top:24px;border:1px solid rgba(255,182,39,.45);border-radius:var(--r3);padding:24px;background:linear-gradient(135deg,rgba(45,27,105,.55),rgba(26,11,61,.35));display:grid;gap:16px}
@media(min-width:761px){.bridge{grid-template-columns:1fr auto;align-items:center}}
.bridge h3{font-family:'Archivo Black',var(--font);font-weight:400;font-size:22px;margin:0 0 6px;letter-spacing:-.005em}
.bridge p{margin:0;color:#E9E2FF}
.btn-gold{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:14px 26px;border-radius:999px;background:#FFB627;color:#1A0B3D;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:.02em;box-shadow:0 3px 0 #B8791A,0 12px 28px -12px rgba(255,182,39,.55);transition:transform .12s ease-out;white-space:nowrap}
.btn-gold small{font-size:12.5px;font-weight:600;letter-spacing:0}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold:active{transform:translateY(2px);box-shadow:0 1px 0 #B8791A}

/* ================= certificate ================= */
.cert-wrap{margin:24px 0}
.cert-frame{border:1px solid var(--line2);border-radius:var(--r3);overflow:hidden;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08),0 24px 64px -24px rgba(0,0,0,.08)}
.cert-frame canvas{display:block;width:100%;height:auto}
.cert-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.left-list{margin:16px 0 0;padding-left:20px;color:var(--helper)}

/* ================= partner sales page (OutletDomains palette: purple + gold) ================= */
.sp{--pur:#2D1B69;--pur2:#1A0B3D;--pur3:#5B2D8E;--gold:#FFB627;--gold2:#B8791A;--cream:#F4F1E8;--od-ink:#0A0118}
.sp .disp{font-family:'Archivo Black',var(--font);font-weight:400;letter-spacing:-.005em}
.sp-hero{position:relative;padding:40px 0 48px;background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(91,45,142,.55),rgba(26,11,61,0) 70%)}
@media(min-width:761px){.sp-hero{padding:64px 0 80px}}
.sp-hero .eyebrow{color:var(--gold)}
.sp-hero h1{font-family:'Archivo Black',var(--font);font-weight:400;font-size:clamp(32px,5.2vw,58px);line-height:1.02;letter-spacing:-.01em;max-width:20ch}
.sp-hero .lead{color:#E9E2FF}
.sp-video{margin:32px auto 0;max-width:900px;aspect-ratio:16/9;border:1px solid rgba(255,182,39,.5);border-radius:var(--r3);overflow:hidden;background:#000;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.08),0 32px 80px -32px rgba(91,45,142,.8)}
.sp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sp-video .poster{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;gap:10px;background:linear-gradient(135deg,#1A0B3D,#2D1B69 55%,#5B2D8E)}
.sp-video .poster .pl{width:76px;height:76px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin:0 auto;box-shadow:0 4px 0 var(--gold2)}
.sp-video .poster .pl svg{width:30px;height:30px;fill:#1A0B3D;margin-left:4px}
.sp-video .poster b{font-family:'Archivo Black',var(--font);font-weight:400;font-size:20px;color:#fff}
.sp-video .poster span{color:#E9E2FF;font-size:14px}
.sp section.sec{padding:48px 0}
@media(min-width:761px){.sp section.sec{padding:96px 0}}
.sp h2{font-family:'Archivo Black',var(--font);font-weight:400;font-size:clamp(26px,3.6vw,38px);line-height:1.08;letter-spacing:-.01em;margin:0 0 16px}
.sp .kicker{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.sp .prose{max-width:66ch;font-size:17.5px;line-height:1.6;color:#E9E2FF}
.sp .prose p{margin:0 0 18px}
.sp .prose strong{color:#fff}
.sp-band{background:linear-gradient(180deg,#1A0B3D,#2D1B69);border-top:1px solid rgba(255,182,39,.25);border-bottom:1px solid rgba(255,182,39,.25)}
.sp-band .prose,.sp-band .tile p{color:#E9E2FF}
.sucks{display:grid;gap:12px;margin:24px 0 0}
@media(min-width:761px){.sucks{grid-template-columns:1fr 1fr}}
.sucks .tile{background:rgba(10,1,24,.55);border-color:rgba(255,255,255,.12)}
.sucks .tile h3{font-size:18px;margin:0 0 6px}
.sucks .tile p{font-size:15px}
.sucks .tile .x{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FF9C9C;margin:0 0 8px}
.sucks .tile .ok{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.math{margin:24px 0 0;border:1px solid rgba(255,182,39,.35);border-radius:var(--r3);overflow:hidden;background:rgba(10,1,24,.5)}
.math .mh{padding:14px 18px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.math .mh span{color:var(--gold);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tablewrap{overflow-x:auto}
.math table{border-collapse:collapse;width:100%;min-width:520px}
.math th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#C9BEE8;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:700}
.math td{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums;font-size:15.5px}
.math tr:last-child td{border-bottom:0}
.math td.g{color:var(--gold);font-weight:800}
.math .note{padding:12px 18px;font-size:13px;color:#C9BEE8;border-top:1px solid rgba(255,255,255,.1)}
.calc{margin:24px 0 0;border:1px solid rgba(255,182,39,.35);border-radius:var(--r3);padding:20px;background:rgba(10,1,24,.5);display:grid;gap:16px}
.calc label{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.calc input[type=range]{width:100%;accent-color:var(--gold)}
.calc .out{display:grid;gap:12px}
@media(min-width:640px){.calc .out{grid-template-columns:repeat(3,1fr)}}
.calc .out div{border:1px solid rgba(255,255,255,.12);border-radius:var(--r2);padding:12px;background:rgba(255,255,255,.03)}
.calc .out .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#C9BEE8;margin:0 0 4px}
.calc .out .v{font-family:'Archivo Black',var(--font);font-size:26px;margin:0;color:var(--gold);font-variant-numeric:tabular-nums}
.proofs{display:grid;gap:12px;margin:24px 0 0}
@media(min-width:761px){.proofs{grid-template-columns:repeat(3,1fr)}}
.proofs .tile{background:rgba(10,1,24,.55);border-color:rgba(255,255,255,.12)}
.proofs blockquote{margin:0 0 10px;font-size:15.5px;color:#fff;line-height:1.5}
.proofs cite{font-style:normal;font-size:13px;color:#C9BEE8}
.plans{display:grid;gap:16px;margin:32px 0 0}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{border:1px solid rgba(255,255,255,.14);border-radius:var(--r3);padding:24px;background:rgba(10,1,24,.6);display:grid;gap:14px;position:relative}
.plan.mid{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 24px 64px -24px rgba(255,182,39,.45)}
.plan .tag{position:absolute;top:-12px;left:20px;background:var(--gold);color:#1A0B3D;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.plan h3{font-family:'Archivo Black',var(--font);font-weight:400;font-size:22px;margin:0}
.plan .price{font-family:'Archivo Black',var(--font);font-size:44px;line-height:1;color:#fff;margin:0}
.plan .price small{font-family:var(--font);font-size:15px;color:#C9BEE8;font-weight:600}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:#E9E2FF}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.plan .btn-gold{justify-self:stretch;text-align:center}
.plan .fine{font-size:12.5px;color:#C9BEE8;margin:0}
.guar{margin:32px auto 0;max-width:760px;border:1px dashed rgba(255,182,39,.5);border-radius:var(--r3);padding:20px 24px;display:flex;gap:16px;align-items:center;background:rgba(10,1,24,.5)}
.guar svg{width:44px;height:44px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.8}
.guar p{margin:0;color:#E9E2FF;font-size:15px}
.sp .faq details p{color:#E9E2FF}
.sp .faq summary{color:#fff}
.sp .fine{color:#C9BEE8}
.sp .fine p{margin:0 0 10px}
.sp-cta{text-align:center;padding:48px 0 96px}
.sp-cta .cta-wrap{margin-top:24px}
/* footer logo pair */
.logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logos img{height:auto}
.logos .by{font-size:13px;color:var(--muted);letter-spacing:.02em}
footer .logos a{border:0}
/* below the hero the geometry stays visible but calmer, so copy and cards read cleanly */
.home main > section:not(.hero),.home footer{background:rgba(9,9,11,.45)}