/* =====================================================================
   Rendy Baskhara Academy — shared styles
   Same canvas as the portfolio: void background, glass hulls,
   cyan → emerald accents, Space Grotesk display + Manrope body.
   ===================================================================== */
:root{
  --bg:#09090B;
  --bg-alt:#0D0B18;
  --ink:#F8FAFC;
  --ink-soft:#94A3B8;
  --ink-faint:#64748B;
  --line:rgba(255,255,255,0.10);
  --cyan:#06B6D4;
  --cyan-hi:#22D3EE;
  --emerald:#10B981;
  --emerald-hi:#34D399;
  --indigo:#6366F1;
  --violet:#8B5CF6;
  --amber:#FBBF24;
  --glass:rgba(18,16,33,0.65);
  --glass-hi:rgba(28,25,48,0.78);
  --rim:rgba(255,255,255,0.12);
  --font-display:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r-lg:2rem;
  --r:1rem;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(6,182,212,0.12), rgba(99,102,241,0.06) 45%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 0% 40%, rgba(16,185,129,0.06), transparent 70%),
    radial-gradient(ellipse 650px 550px at 100% 70%, rgba(139,92,246,0.09), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img, svg{ max-width:100%; }
h1, h2, h3, h4, .display{ font-family:var(--font-display); letter-spacing:-0.02em; line-height:1.12; }
::selection{ background:rgba(6,182,212,0.35); }
:focus-visible{ outline:2px solid var(--cyan-hi); outline-offset:3px; border-radius:6px; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 24px; }
.skip{ position:absolute; left:-999px; top:8px; z-index:300; background:var(--cyan); color:#09090B; padding:8px 14px; border-radius:8px; font-weight:700; }
.skip:focus{ left:12px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- NAV ---------- */
.a-nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:60px;
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.a-nav.scrolled, .a-nav.solid{
  background:rgba(9,9,11,0.78);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--rim);
}
.a-nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px; }
.a-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:15px; white-space:nowrap; }
.a-brand .mk{
  width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(6,182,212,0.6), 0 0 14px rgba(6,182,212,0.35);
}
.a-brand small{ display:block; font-family:var(--font-body); font-size:11px; font-weight:500; color:var(--ink-soft); letter-spacing:0.02em; }
.a-links{ display:flex; align-items:center; gap:26px; list-style:none; }
.a-links a{ font-size:13px; color:var(--ink-soft); transition:color .2s; }
.a-links a:hover, .a-links a.active{ color:var(--ink); }
.a-cta{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:980px;
  background:linear-gradient(135deg,#06B6D4 0%,#3B82F6 100%); color:#09090B !important; font-weight:700; font-size:13px;
  box-shadow:0 0 20px rgba(6,182,212,0.35); transition:box-shadow .2s, transform .2s;
}
.a-cta:hover{ box-shadow:0 0 28px rgba(6,182,212,0.6); transform:translateY(-1px); }
.a-burger{ display:none; width:38px; height:38px; border:1px solid var(--rim); border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.a-burger span{ display:block; width:18px; height:1.8px; margin:0 auto; border-radius:2px; background:currentColor; transition:transform .3s, opacity .2s; }
body.menu-open .a-burger span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
body.menu-open .a-burger span:nth-child(2){ opacity:0; }
body.menu-open .a-burger span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }
.a-drawer{
  position:fixed; top:60px; left:0; right:0; z-index:99;
  background:rgba(9,9,11,0.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--rim);
  padding:10px 24px 22px; display:none;
}
body.menu-open .a-drawer{ display:block; }
.a-drawer a{ display:block; padding:13px 0; border-bottom:1px solid var(--line); font-weight:600; }
.a-drawer a:last-child{ border-bottom:none; }
.a-drawer .a-cta{ margin-top:14px; justify-content:center; display:flex; }
@media (max-width:900px){
  .a-links{ display:none; }
  .a-nav .a-cta.desk{ display:none; }
  .a-burger{ display:flex; }
}

/* ---------- BUTTONS / CHIPS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:980px; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid transparent; font-family:inherit; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-primary{ background:linear-gradient(135deg,#06B6D4 0%,#3B82F6 100%); color:#09090B; box-shadow:0 0 22px rgba(6,182,212,0.4); }
.btn-primary:hover{ box-shadow:0 0 30px rgba(6,182,212,0.6); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--rim); color:var(--ink); background:rgba(255,255,255,0.03); }
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(6,182,212,0.45); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:980px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,0.05); border:1px solid var(--rim);
}
.chip.cyan{ color:var(--cyan-hi); background:rgba(6,182,212,0.12); border-color:rgba(6,182,212,0.32); }
.chip.emerald{ color:var(--emerald-hi); background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.32); }
.chip.violet{ color:#c4b5fd; background:rgba(139,92,246,0.14); border-color:rgba(139,92,246,0.34); }
.grad{ background:linear-gradient(100deg,var(--cyan-hi),var(--emerald-hi)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- SECTIONS ---------- */
section{ padding:110px 0; position:relative; }
section.tint{ background:linear-gradient(180deg, rgba(13,11,24,0.0), rgba(13,11,24,0.6) 20%, rgba(13,11,24,0.6) 80%, rgba(13,11,24,0)); }
.kicker{ font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-hi); margin-bottom:14px; }
.s-title{ font-size:clamp(30px, 4.4vw, 48px); font-weight:600; max-width:760px; }
.lede{ margin-top:20px; font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); max-width:680px; }
.center{ text-align:center; }
.center .s-title, .center .lede{ margin-left:auto; margin-right:auto; }

.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--rim); border-radius:var(--r-lg);
  box-shadow:0 8px 32px -4px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.08);
}
.tile{ background:rgba(255,255,255,0.03); border:1px solid var(--rim); border-radius:var(--r); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- LANDING: HERO ---------- */
.l-hero{ padding:150px 0 90px; min-height:92vh; display:flex; align-items:center; }
.l-hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.l-hero-grid > *{ min-width:0; }
.l-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:980px; font-size:13px; font-weight:600; color:var(--emerald-hi); background:rgba(16,185,129,0.10); border:1px solid rgba(16,185,129,0.3); }
.ping{ width:8px; height:8px; border-radius:50%; background:var(--emerald-hi); box-shadow:0 0 0 0 rgba(52,211,153,0.6); animation:ping 2s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,0.6);} 70%{ box-shadow:0 0 0 10px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.l-hero h1{ margin-top:22px; font-size:clamp(38px, 5.6vw, 68px); font-weight:600; letter-spacing:-0.035em; line-height:1.03; }
.l-hero .sub{ margin-top:22px; font-size:clamp(16px,1.7vw,19px); color:#c8cdd6; max-width:560px; }
.l-hero .cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.l-hero .trust{ margin-top:30px; font-size:13.5px; color:var(--ink-faint); }
.l-hero .trust b{ color:var(--ink-soft); }

.stack-card{ padding:26px; }
.stack-card .st-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.stack-card .st-head b{ font-family:var(--font-display); font-size:15px; }
.st-layer{ display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:11px 14px; border-radius:14px; margin-bottom:8px; background:rgba(255,255,255,0.03); border:1px solid var(--rim); transition:border-color .25s, transform .25s; }
.st-layer:hover{ border-color:rgba(6,182,212,0.5); transform:translateX(4px); }
.st-layer .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:12px; font-weight:700; font-family:var(--font-display); color:#09090B; }
.st-layer .t{ font-size:14px; font-weight:600; }
.st-layer .d{ font-size:12px; color:var(--ink-soft); }
.st-layer .n{ font-size:11.5px; color:var(--ink-faint); font-family:var(--font-display); }
.st-ai{ margin-top:12px; padding:12px 14px; border-radius:14px; text-align:center; font-size:13px; font-weight:700; color:#c4b5fd; background:linear-gradient(90deg, rgba(139,92,246,0.18), rgba(6,182,212,0.14)); border:1px dashed rgba(139,92,246,0.5); }

.stats-strip{ margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rim); border:1px solid var(--rim); border-radius:var(--r-lg); overflow:hidden; }
.stats-strip > div{ background:rgba(13,11,24,0.85); padding:26px 22px; }
.stats-strip .n{ font-family:var(--font-display); font-size:clamp(28px,3.4vw,40px); font-weight:700; }
.stats-strip .l{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }

/* ---------- LANDING: CARDS ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:54px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; }
.grid-3 > *, .grid-2 > *, .grid-4 > *{ min-width:0; }
.card{ padding:30px 28px; }
.card h3{ font-size:20px; font-weight:600; margin:14px 0 10px; }
.card p{ font-size:15px; color:var(--ink-soft); }
.card .ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(6,182,212,0.22), rgba(99,102,241,0.22)); border:1px solid rgba(6,182,212,0.3); color:var(--cyan-hi); }
.card .ico svg{ width:22px; height:22px; }
.card ul{ list-style:none; margin-top:14px; }
.card li{ position:relative; padding-left:20px; font-size:14.5px; color:#cbd5e1; margin-bottom:8px; }
.card li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--emerald)); }

/* curriculum */
.curr-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.overall{ min-width:260px; padding:16px 20px; }
.overall .ol-t{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:9px; }
.overall .ol-t b{ color:var(--ink); }
.bar{ height:7px; border-radius:7px; background:rgba(255,255,255,0.07); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; border-radius:7px; background:linear-gradient(90deg,var(--cyan),var(--emerald)); transition:width .8s cubic-bezier(.16,1,.3,1); }
.curr-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.curr-grid > *{ min-width:0; }
.mod-card{ display:grid; grid-template-columns:58px 1fr; gap:18px; padding:22px 22px 20px; border-radius:22px; background:var(--glass); border:1px solid var(--rim); transition:border-color .25s, transform .25s, box-shadow .25s; }
.mod-card:hover{ border-color:rgba(6,182,212,0.5); transform:translateY(-3px); box-shadow:0 0 0 1px rgba(6,182,212,0.25), 0 18px 40px -12px rgba(6,182,212,0.25); }
.mod-num{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-family:var(--font-display); font-size:20px; font-weight:700; background:rgba(6,182,212,0.10); border:1px solid rgba(6,182,212,0.3); color:var(--cyan-hi); }
.mod-card.done .mod-num{ background:linear-gradient(135deg,var(--cyan),var(--emerald)); color:#09090B; border-color:transparent; }
.mod-card .phase{ font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.mod-card h3{ font-size:18px; font-weight:600; margin:4px 0 6px; }
.mod-card p{ font-size:14px; color:var(--ink-soft); }
.mod-meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12.5px; color:var(--ink-faint); align-items:center; }
.mod-meta .bar{ flex:1 1 90px; min-width:90px; height:5px; }

/* phases legend */
.phases{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }

/* steps */
.steps{ margin-top:54px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:st; }
.steps > *{ min-width:0; }
.step{ padding:26px 22px; position:relative; }
.step::before{ counter-increment:st; content:"0" counter(st); font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--cyan-hi); }
.step h3{ font-size:18px; margin:10px 0 8px; }
.step p{ font-size:14px; color:var(--ink-soft); }

/* mentor */
.mentor{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; padding:44px; margin-top:54px; }
.mentor > *{ min-width:0; }
.mentor-id{ display:flex; gap:18px; align-items:center; }
.mentor-av{ width:84px; height:84px; border-radius:24px; overflow:hidden; flex-shrink:0; background:#cfe4e0; box-shadow:0 0 0 1px var(--rim), 0 0 30px rgba(6,182,212,0.25); }
.mentor-av svg{ width:100%; height:100%; display:block; }
.mentor h3{ font-size:26px; }
.mentor .role{ font-size:14px; color:var(--ink-soft); margin-top:4px; }
.mentor p.bio{ margin-top:20px; font-size:15.5px; color:#cbd5e1; }
.mentor .links{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.proof{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.proof > div{ padding:20px; }
.proof .n{ font-family:var(--font-display); font-size:clamp(24px,2.8vw,32px); font-weight:700; }
.proof .l{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }

/* pricing */
.plans{ margin-top:54px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.plans > *{ min-width:0; }
.plan{ padding:28px 22px; display:flex; flex-direction:column; }
.plan.hot{ border-color:rgba(6,182,212,0.6); box-shadow:0 0 0 1px rgba(6,182,212,0.35), 0 0 40px -6px rgba(6,182,212,0.35); background:linear-gradient(160deg, rgba(6,182,212,0.14), rgba(99,102,241,0.10)), var(--glass); }
.plan .tag{ align-self:flex-start; }
.plan h3{ font-size:20px; margin-top:14px; }
.plan .for{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; min-height:42px; }
.plan .price{ margin-top:18px; font-family:var(--font-display); font-size:28px; font-weight:700; }
.plan .price small{ display:block; font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--ink-faint); margin-top:2px; }
.plan ul{ list-style:none; margin:20px 0 24px; flex:1; }
.plan li{ font-size:14px; color:#cbd5e1; padding:7px 0 7px 26px; position:relative; border-top:1px solid var(--line); }
.plan li::before{ content:""; position:absolute; left:2px; top:12px; width:14px; height:8px; border-left:2px solid var(--emerald-hi); border-bottom:2px solid var(--emerald-hi); transform:rotate(-45deg); }
.plan .btn{ width:100%; }
.plans-note{ margin-top:18px; font-size:13px; color:var(--ink-faint); text-align:center; }

/* faq */
.faq{ margin-top:44px; display:flex; flex-direction:column; gap:12px; }
.faq details{ border-radius:18px; background:var(--glass); border:1px solid var(--rim); transition:border-color .25s; }
.faq details[open]{ border-color:rgba(6,182,212,0.45); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 56px 20px 24px; font-weight:600; font-size:16px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:22px; top:50%; width:14px; height:14px; margin-top:-7px; transition:transform .25s;
  background:linear-gradient(var(--cyan-hi),var(--cyan-hi)) center/100% 2px no-repeat, linear-gradient(var(--cyan-hi),var(--cyan-hi)) center/2px 100% no-repeat; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 24px 22px; color:var(--ink-soft); font-size:15px; }
.faq .ans p + p{ margin-top:10px; }

/* form */
.reg{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; padding:44px; margin-top:54px; }
.reg > *{ min-width:0; }
.reg h3{ font-size:24px; }
.reg .side p{ margin-top:12px; color:var(--ink-soft); font-size:15px; }
.reg .side ul{ list-style:none; margin-top:20px; }
.reg .side li{ padding:10px 0 10px 28px; position:relative; font-size:14.5px; color:#cbd5e1; border-top:1px solid var(--line); }
.reg .side li::before{ content:""; position:absolute; left:3px; top:16px; width:13px; height:7px; border-left:2px solid var(--cyan-hi); border-bottom:2px solid var(--cyan-hi); transform:rotate(-45deg); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,0.04); border:1px solid var(--rim); border-radius:12px; padding:12px 14px;
  transition:border-color .2s, background .2s;
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.field select option{ background:#121021; color:var(--ink); }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(6,182,212,0.7); background:rgba(6,182,212,0.06); }
.form-foot{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between; }
.form-foot small{ color:var(--ink-faint); font-size:12.5px; max-width:340px; }
.hp{ position:absolute; left:-9999px; }

/* ---------- MODULE PAGE ---------- */
.m-hero{ padding:130px 0 56px; }
.crumbs{ font-size:13px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--cyan-hi); }
.m-hero .m-num{ margin-top:26px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-hi); }
.m-hero h1{ margin-top:10px; font-size:clamp(32px, 4.8vw, 54px); font-weight:600; max-width:860px; }
.m-hero .sub{ margin-top:16px; font-size:clamp(16px,1.6vw,19px); color:#c8cdd6; max-width:720px; }
.m-hero .chips{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.m-outcomes{ margin-top:36px; padding:28px 30px; display:grid; grid-template-columns:1.3fr 0.7fr; gap:30px; }
.m-outcomes > *{ min-width:0; }
.m-outcomes h2{ font-size:15px; font-family:var(--font-display); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.m-outcomes ul{ list-style:none; }
.m-outcomes li{ position:relative; padding:6px 0 6px 28px; font-size:15px; color:#dbe2ea; }
.m-outcomes li::before{ content:""; position:absolute; left:3px; top:13px; width:13px; height:7px; border-left:2px solid var(--emerald-hi); border-bottom:2px solid var(--emerald-hi); transform:rotate(-45deg); }
.m-outcomes .tools{ display:flex; flex-wrap:wrap; gap:7px; }
.m-outcomes .deliv{ margin-top:22px; padding:14px 16px; border-radius:14px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.28); font-size:14px; color:#d1fae5; }
.m-outcomes .deliv b{ display:block; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--emerald-hi); margin-bottom:4px; }

.m-body{ padding:30px 0 100px; }
.m-layout > *{ min-width:0; }
.m-layout{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:start; }
.m-toc{ position:sticky; top:84px; padding:20px; border-radius:22px; background:var(--glass); border:1px solid var(--rim); max-height:calc(100vh - 110px); overflow:auto; }
.m-toc .tt{ font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.m-toc .prog{ margin-bottom:16px; }
.m-toc .prog .pt{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:7px; }
.m-toc ol{ list-style:none; }
.m-toc li a{ display:grid; grid-template-columns:22px 1fr; gap:8px; padding:8px 8px; border-radius:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; transition:background .2s, color .2s; }
.m-toc li a:hover{ background:rgba(255,255,255,0.05); color:var(--ink); }
.m-toc li a.active{ background:rgba(6,182,212,0.12); color:var(--ink); }
.m-toc .ck{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--rim); margin-top:1px; display:grid; place-items:center; font-size:10px; font-weight:800; color:transparent; }
.m-toc li.done .ck{ background:linear-gradient(135deg,var(--cyan),var(--emerald)); border-color:transparent; color:#09090B; }
.m-toc .extra{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.m-toc-mobile{ display:none; }

.lesson{ scroll-margin-top:84px; padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--line); }
.lesson-k{ font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-hi); }
.lesson > h2{ font-size:clamp(25px,3vw,33px); font-weight:600; margin:8px 0 22px; }
.prose{ font-size:16.5px; color:#d3dae3; }
.prose > * + *{ margin-top:16px; }
.prose h3{ font-size:20px; color:var(--ink); margin-top:34px; font-weight:600; }
.prose h4{ font-size:16.5px; color:var(--ink); margin-top:24px; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--cyan-hi); text-decoration:underline; text-decoration-color:rgba(34,211,238,0.4); text-underline-offset:3px; }
.prose ul, .prose ol{ padding-left:22px; }
.prose li{ margin:6px 0; padding-left:4px; }
.prose li::marker{ color:var(--cyan); }
.prose blockquote{ border-left:3px solid var(--violet); padding:6px 0 6px 18px; color:#c4b5fd; font-style:italic; }
.prose code{ font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:0.88em; background:rgba(255,255,255,0.07); padding:2px 6px; border-radius:6px; color:#e2e8f0; }
.prose pre{ background:#0b0a14; border:1px solid var(--rim); border-radius:14px; padding:16px 18px; overflow-x:auto; font-size:13.5px; line-height:1.55; }
.prose pre code{ background:none; padding:0; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:30px 0; }
.table-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--rim); background:rgba(255,255,255,0.02); }
.prose table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.prose th{ text-align:left; font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:0.03em; color:var(--ink-soft); background:rgba(255,255,255,0.05); padding:12px 14px; }
.prose td{ padding:12px 14px; border-top:1px solid var(--line); vertical-align:top; }

.box{ border-radius:18px; padding:20px 22px; border:1px solid var(--rim); background:rgba(255,255,255,0.03); }
.box > .bx-k{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
.box .bx-b > * + *{ margin-top:10px; }
.box.tips{ background:rgba(6,182,212,0.07); border-color:rgba(6,182,212,0.3); }
.box.tips > .bx-k{ color:var(--cyan-hi); }
.box.warn{ background:rgba(251,191,36,0.07); border-color:rgba(251,191,36,0.32); }
.box.warn > .bx-k{ color:var(--amber); }
.box.example{ background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.3); }
.box.example > .bx-k{ color:#c4b5fd; }
.box.task{ background:linear-gradient(150deg, rgba(16,185,129,0.10), rgba(6,182,212,0.06)); border-color:rgba(16,185,129,0.35); }
.box.task > .bx-k{ color:var(--emerald-hi); }
.box.note > .bx-k{ color:var(--ink-soft); }

.prompt{ border-radius:18px; border:1px solid rgba(139,92,246,0.4); background:linear-gradient(160deg, rgba(139,92,246,0.12), rgba(6,182,212,0.06)); overflow:hidden; }
.prompt-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(139,92,246,0.25); }
.prompt-h .pk{ font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#c4b5fd; }
.prompt-h .pt{ font-size:14px; font-weight:600; color:var(--ink); margin-top:2px; }
.copy{ flex-shrink:0; font-family:inherit; font-size:12.5px; font-weight:700; color:#09090B; background:#c4b5fd; border:none; border-radius:980px; padding:7px 14px; cursor:pointer; transition:background .2s; }
.copy:hover{ background:#ddd6fe; }
.copy.ok{ background:var(--emerald-hi); }
.prompt pre{ margin:0; border:none; border-radius:0; background:rgba(9,9,11,0.55); white-space:pre-wrap; word-break:break-word; font-size:13.5px; color:#e2e8f0; padding:16px 18px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }

.lesson-done{ margin-top:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lesson-done button{ font-family:inherit; }
.ld-btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:980px; border:1px solid var(--rim); background:rgba(255,255,255,0.04); color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; transition:all .2s; }
.ld-btn:hover{ border-color:rgba(16,185,129,0.5); }
.ld-btn .ck{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--ink-faint); display:grid; place-items:center; font-size:10px; color:transparent; }
.ld-btn.on{ background:rgba(16,185,129,0.14); border-color:rgba(16,185,129,0.5); color:var(--emerald-hi); }
.ld-btn.on .ck{ background:var(--emerald-hi); border-color:transparent; color:#09090B; }

/* checklist + quiz */
.m-block{ scroll-margin-top:84px; padding:32px; margin-bottom:28px; }
.m-block h2{ font-size:26px; margin-bottom:8px; }
.m-block > p{ color:var(--ink-soft); font-size:15px; }
.checklist{ list-style:none; margin-top:18px; }
.checklist li{ border-top:1px solid var(--line); }
.checklist label{ display:flex; gap:14px; align-items:flex-start; padding:13px 4px; cursor:pointer; font-size:15px; color:#d3dae3; }
.checklist input{ appearance:none; width:20px; height:20px; flex-shrink:0; margin-top:2px; border-radius:6px; border:1.5px solid var(--ink-faint); cursor:pointer; display:grid; place-items:center; transition:all .2s; }
.checklist input:checked{ background:linear-gradient(135deg,var(--cyan),var(--emerald)); border-color:transparent; }
.checklist input:checked::after{ content:""; width:9px; height:5px; border-left:2px solid #09090B; border-bottom:2px solid #09090B; transform:rotate(-45deg) translate(1px,-1px); }
.checklist input:checked + span{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:rgba(148,163,184,0.5); }

.quiz-q{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.quiz-q .qn{ font-size:12px; font-weight:700; color:var(--cyan-hi); letter-spacing:0.08em; }
.quiz-q .qt{ font-size:16.5px; font-weight:600; margin:6px 0 12px; }
.quiz-opts{ display:flex; flex-direction:column; gap:8px; }
.quiz-opt{ text-align:left; font-family:inherit; font-size:15px; color:#d3dae3; padding:12px 16px; border-radius:12px; border:1px solid var(--rim); background:rgba(255,255,255,0.03); cursor:pointer; transition:all .2s; }
.quiz-opt:hover:not([disabled]){ border-color:rgba(6,182,212,0.5); background:rgba(6,182,212,0.06); }
.quiz-opt.right{ border-color:rgba(16,185,129,0.7); background:rgba(16,185,129,0.13); color:#d1fae5; }
.quiz-opt.wrong{ border-color:rgba(248,113,113,0.6); background:rgba(248,113,113,0.10); color:#fecaca; }
.quiz-opt[disabled]{ cursor:default; }
.quiz-why{ display:none; margin-top:10px; font-size:14px; color:var(--ink-soft); padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.03); }
.quiz-q.answered .quiz-why{ display:block; }
.quiz-score{ margin-top:24px; padding:16px 18px; border-radius:14px; background:rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.3); font-weight:600; display:none; }
.quiz-score.show{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

.m-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.m-pager a{ padding:20px 22px; border-radius:20px; background:var(--glass); border:1px solid var(--rim); transition:border-color .25s; }
.m-pager a:hover{ border-color:rgba(6,182,212,0.5); }
.m-pager .k{ font-size:12px; color:var(--ink-faint); font-weight:600; }
.m-pager .t{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-top:4px; }
.m-pager .next{ text-align:right; grid-column:2; }

.mentor-cta{ margin-top:28px; padding:30px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(140deg, rgba(6,182,212,0.12), rgba(99,102,241,0.10)), var(--glass); }
.mentor-cta h3{ font-size:21px; }
.mentor-cta p{ color:var(--ink-soft); font-size:14.5px; margin-top:6px; max-width:520px; }

/* ---------- PROMPT LIBRARY ---------- */
.pl-tools{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pl-search{ flex:1 1 280px; font-family:inherit; font-size:15px; color:var(--ink); background:rgba(255,255,255,0.04); border:1px solid var(--rim); border-radius:980px; padding:12px 20px; }
.pl-search:focus{ outline:none; border-color:rgba(6,182,212,0.7); }
.pl-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pl-filter button{ font-family:inherit; cursor:pointer; }
.pl-filter button.on{ color:#09090B; background:var(--cyan-hi); border-color:transparent; }
.pl-count{ margin-top:18px; font-size:13.5px; color:var(--ink-faint); }
.pl-list{ margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pl-list > *{ min-width:0; }
.pl-item .src{ padding:10px 16px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid rgba(139,92,246,0.2); }
.pl-item .src a{ color:var(--cyan-hi); }
.pl-item pre{ max-height:260px; overflow:auto; }

/* ---------- FOOTER ---------- */
.a-foot{ border-top:1px solid var(--line); padding:44px 0 50px; color:var(--ink-faint); font-size:13.5px; position:relative; }
.a-foot .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.a-foot nav{ display:flex; gap:20px; flex-wrap:wrap; }
.a-foot a:hover{ color:var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .plans{ grid-template-columns:repeat(2,1fr); }
  .grid-4, .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .l-hero{ padding-top:120px; min-height:auto; }
  .l-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-3{ grid-template-columns:1fr; }
  .mentor, .reg{ grid-template-columns:1fr; padding:30px 24px; }
  .m-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .m-toc{ display:none; }
  .m-toc-mobile{ display:block; margin-bottom:34px; border-radius:18px; background:var(--glass); border:1px solid var(--rim); }
  .m-toc-mobile summary{ cursor:pointer; padding:16px 20px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:10px; }
  .m-toc-mobile summary::-webkit-details-marker{ display:none; }
  .m-toc-mobile summary span{ color:var(--ink-faint); font-weight:500; font-size:13.5px; }
  .m-toc-mobile ol{ list-style:none; padding:0 12px 14px; }
  .m-toc-mobile li a{ display:block; padding:9px 8px; font-size:14px; color:var(--ink-soft); border-top:1px solid var(--line); }
  .m-toc-mobile li.done a{ color:var(--emerald-hi); }
  .m-outcomes{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  section{ padding:80px 0; }
  .wrap, .wrap-narrow{ padding:0 16px; }
  .curr-grid, .grid-2, .pl-list{ grid-template-columns:1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .plans, .grid-4, .steps{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .proof{ grid-template-columns:1fr 1fr; }
  .mod-card{ grid-template-columns:46px 1fr; gap:14px; padding:18px; }
  .mod-num{ width:46px; height:46px; font-size:16px; border-radius:13px; }
  .m-block{ padding:24px 18px; }
  .m-outcomes{ padding:22px 20px; }
  .m-pager{ grid-template-columns:1fr; }
  .m-pager .next{ grid-column:1; }
  .prose{ font-size:16px; }
  .mentor-cta{ padding:24px 20px; }
}

@media print{
  .a-nav, .a-drawer, .m-toc, .m-toc-mobile, .lesson-done, .copy, .mentor-cta, .m-pager, .a-foot, #posttest{ display:none !important; }
  body{ background:#fff; color:#111; }
  .prose, .prose strong, .lesson > h2, .m-hero h1, .m-hero .sub{ color:#111 !important; }
  .reveal{ opacity:1; transform:none; }
  .glass, .box, .prompt{ background:#fff !important; border-color:#ccc !important; box-shadow:none !important; backdrop-filter:none !important; }
  .prompt pre{ background:#f6f6f6; color:#111; }
}

/* GFM task lists inside lesson prose (read-only checklists) */
.prose li:has(> input[type="checkbox"]){ list-style:none; margin-left:-22px; }
.prose li > input[type="checkbox"]{ appearance:none; width:16px; height:16px; margin:0 10px -2px 0; border-radius:5px; border:1.5px solid var(--cyan); vertical-align:baseline; }

/* long URLs / formulas in inline code must wrap on phones */
.prose{ overflow-wrap:break-word; }
.prose code{ overflow-wrap:anywhere; word-break:break-word; }

/* =====================================================================
   POST-TEST
   ===================================================================== */
.mod-pt{ margin-top:8px; font-size:12.5px; font-weight:600; color:var(--ink-faint); }
.mod-pt.pass{ color:var(--emerald-hi); }
.mod-pt.fail{ color:var(--amber); }
.mod-card.passed .mod-num{ background:linear-gradient(135deg,var(--cyan),var(--emerald)); color:#09090B; border-color:transparent; }
.overall .ol-pt{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.overall .ol-pt a{ color:var(--cyan-hi); font-weight:700; }

.posttest{ border-color:rgba(139,92,246,0.4) !important; background:linear-gradient(160deg, rgba(139,92,246,0.12), rgba(6,182,212,0.06)), var(--glass) !important; }
.pt-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.pt-head h2{ margin:12px 0 8px; }
.pt-head p{ color:var(--ink-soft); font-size:15px; max-width:560px; }
.pt-badge{ flex-shrink:0; padding:8px 14px; border-radius:980px; font-size:13px; font-weight:700; color:var(--ink-soft); background:rgba(255,255,255,0.05); border:1px solid var(--rim); }
.pt-badge.pass{ color:#09090B; background:var(--emerald-hi); border-color:transparent; }
.pt-badge.fail{ color:var(--amber); border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.08); }
.pt-rules{ list-style:none; margin:20px 0 0; display:grid; gap:6px; }
.pt-rules li{ position:relative; padding-left:22px; font-size:14px; color:#cbd5e1; }
.pt-rules li::before{ content:""; position:absolute; left:6px; top:0.62em; width:6px; height:6px; border-radius:50%; background:#c4b5fd; }
.pt-start{ margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pt-meta{ font-size:13px; color:var(--ink-faint); }
.pt-form{ margin-top:24px; }
.pt-q{ border:none; border-top:1px solid var(--line); padding:22px 0 6px; min-width:0; }
.pt-q legend{ display:block; width:100%; padding:0; margin-bottom:12px; }
.pt-q .qn{ display:block; font-size:12px; font-weight:700; color:#c4b5fd; letter-spacing:0.08em; }
.pt-q .qt{ display:block; font-size:16.5px; font-weight:600; margin-top:6px; line-height:1.5; }
.pt-q.missing .qt{ color:var(--amber); }
.pt-q.missing .qt::after{ content:" — belum dijawab"; font-size:13px; font-weight:600; }
.pt-opt{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin-bottom:8px; border-radius:12px; border:1px solid var(--rim); background:rgba(255,255,255,0.03); cursor:pointer; font-size:15px; color:#d3dae3; transition:border-color .2s, background .2s; }
.pt-opt:hover{ border-color:rgba(139,92,246,0.5); }
.pt-opt:has(input:checked){ border-color:rgba(6,182,212,0.7); background:rgba(6,182,212,0.10); color:var(--ink); }
.pt-opt input{ appearance:none; flex-shrink:0; width:18px; height:18px; margin-top:2px; border-radius:50%; border:1.5px solid var(--ink-faint); display:grid; place-items:center; cursor:pointer; }
.pt-opt input:checked{ border-color:var(--cyan-hi); }
.pt-opt input:checked::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--cyan-hi); }
.pt-submit{ position:sticky; bottom:12px; margin-top:20px; padding:14px 16px; border-radius:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(13,11,24,0.92); border:1px solid var(--rim); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:14px; color:var(--ink-soft); }
.pt-result{ margin-top:24px; }
.pt-score{ display:flex; align-items:center; gap:20px; padding:22px 24px; border-radius:18px; border:1px solid var(--rim); }
.pt-score .big{ font-family:var(--font-display); font-size:46px; font-weight:700; line-height:1; }
.pt-score .ttl{ font-size:18px; font-weight:700; }
.pt-score .sub{ font-size:14px; color:var(--ink-soft); margin-top:4px; }
.pt-score.pass{ background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.45); }
.pt-score.pass .big{ color:var(--emerald-hi); }
.pt-score.fail{ background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.4); }
.pt-score.fail .big{ color:var(--amber); }
.pt-tip{ margin-top:14px; font-size:14.5px; color:var(--ink-soft); }
.pt-actions{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.rv-h{ margin-top:30px; font-size:18px; }
.pt-review{ list-style:none; margin-top:12px; display:grid; gap:10px; }
.pt-review li{ padding:16px 18px; border-radius:14px; border:1px solid var(--rim); background:rgba(255,255,255,0.03); font-size:14.5px; }
.pt-review li.ok{ border-left:3px solid var(--emerald-hi); }
.pt-review li.no{ border-left:3px solid #f87171; }
.rv-q{ color:var(--ink); font-weight:600; }
.rv-a{ margin-top:6px; color:var(--emerald-hi); }
.rv-a.wrong{ color:#fca5a5; }
.rv-why{ margin-top:8px; color:var(--ink-soft); }

/* =====================================================================
   SERTIFIKASI + PAKET (landing)
   ===================================================================== */
.cert-grid{ margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cert-grid > *{ min-width:0; }
.cert-tier{ padding:30px 28px; display:flex; flex-direction:column; }
.cert-tier.gold{ border-color:rgba(6,182,212,0.55); background:linear-gradient(160deg, rgba(6,182,212,0.14), rgba(99,102,241,0.10)), var(--glass); }
.cert-tier .tag{ align-self:flex-start; }
.cert-tier h3{ font-size:22px; margin:14px 0 8px; }
.cert-tier p{ color:var(--ink-soft); font-size:15px; }
.cert-tier ul{ list-style:none; margin:18px 0 24px; flex:1; }
.cert-tier li{ position:relative; padding:8px 0 8px 26px; border-top:1px solid var(--line); font-size:14.5px; color:#cbd5e1; }
.cert-tier li::before{ content:""; position:absolute; left:2px; top:13px; width:13px; height:7px; border-left:2px solid var(--emerald-hi); border-bottom:2px solid var(--emerald-hi); transform:rotate(-45deg); }
.cert-tier .btn{ align-self:flex-start; }
.plans-extra{ margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.plans-extra > *{ min-width:0; }
.pe-item{ padding:18px 20px; border-radius:18px; }
.pe-item b{ display:block; font-size:14.5px; margin-bottom:4px; }
.pe-item span{ font-size:13.5px; color:var(--ink-soft); }
.pe-item a{ color:var(--cyan-hi); font-weight:700; }
.plan .price small{ line-height:1.45; }
@media (max-width:900px){ .cert-grid, .plans-extra{ grid-template-columns:1fr; } }

/* =====================================================================
   CERTIFICATE (scales with its own width via container units)
   ===================================================================== */
.cert-prog{ margin-top:30px; padding:16px 20px; max-width:420px; }
.cert-prog .ol-t{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:9px; }
.cert-prog .ol-t b{ color:var(--ink); }
.cert-ready{ margin-top:28px; }
.cert-tools{ padding:18px 20px; display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.cert-tools .field{ flex:1 1 260px; }
.cert-hint{ margin-top:10px; font-size:13px; color:var(--ink-faint); }
.cert-wrap{ margin-top:22px; }
.cert-empty{ color:var(--ink-faint); font-size:14px; padding:20px 0; }
.cert-locked{ margin-top:28px; padding:24px 26px; }
.cert-locked h2{ font-size:22px; }
.cert-locked p{ margin-top:8px; color:var(--ink-soft); font-size:15px; }
.cert-table{ margin-top:22px; }
.cert-table a{ color:var(--ink); }
.cert-table a:hover{ color:var(--cyan-hi); }
.cert-table .st{ font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:980px; background:rgba(255,255,255,0.06); color:var(--ink-soft); white-space:nowrap; }
.cert-table .st.pass{ background:rgba(16,185,129,0.15); color:var(--emerald-hi); }
.cert-table .st.fail{ background:rgba(251,191,36,0.12); color:var(--amber); }
.cert-table table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px; }
.cert-table th{ text-align:left; font-size:13px; color:var(--ink-soft); background:rgba(255,255,255,0.05); padding:11px 14px; }
.cert-table td{ padding:11px 14px; border-top:1px solid var(--line); }

.cert{
  container-type:inline-size; position:relative; width:100%; aspect-ratio:297/210; color:#F8FAFC; border-radius:14px;
  background:linear-gradient(120deg,#22D3EE,#34D399 45%,#818CF8); padding:0.3cqw;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.75), 0 0 60px -20px rgba(6,182,212,0.5);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cert.verified{ background:linear-gradient(120deg,#F59E0B,#FDE68A 40%,#FBBF24 60%,#22D3EE); box-shadow:0 24px 60px -12px rgba(0,0,0,0.75), 0 0 60px -20px rgba(251,191,36,0.45); }
.cert-in{
  position:relative; overflow:hidden; height:100%; padding:4.4cqw 5.6cqw 2.8cqw; display:flex; flex-direction:column; border-radius:12px;
  background:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(6,182,212,0.24), transparent 65%),
    radial-gradient(ellipse 50% 55% at 100% 100%, rgba(99,102,241,0.24), transparent 65%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(16,185,129,0.12), transparent 70%),
    linear-gradient(160deg, #0D0B18, #09090B 60%);
}
.cert.verified .cert-in{
  background:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(251,191,36,0.18), transparent 65%),
    radial-gradient(ellipse 50% 55% at 100% 100%, rgba(6,182,212,0.2), transparent 65%),
    linear-gradient(160deg, #120F08, #09090B 60%);
}
.cert-in > *{ position:relative; z-index:1; }
.cert-net{ position:absolute !important; inset:0; width:100%; height:100%; z-index:0 !important; opacity:0.6; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 48% 42% at 50% 50%, transparent 35%, #000 85%); mask-image:radial-gradient(ellipse 48% 42% at 50% 50%, transparent 35%, #000 85%); }
.cert-net line{ stroke:#22D3EE; stroke-opacity:0.22; stroke-width:0.18; }
.cert-net circle{ fill:#67E8F9; fill-opacity:0.55; }
.cert.verified .cert-net line{ stroke:#FBBF24; stroke-opacity:0.18; }
.cert.verified .cert-net circle{ fill:#FDE68A; fill-opacity:0.45; }
.cert-top{ display:flex; justify-content:space-between; align-items:center; gap:2cqw; }
.cert-brand{ display:flex; align-items:center; gap:1.3cqw; font-family:var(--font-display); font-weight:700; font-size:1.9cqw; line-height:1.15; color:#F8FAFC; }
.cert-brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:1.1cqw; color:#94A3B8; letter-spacing:0.14em; text-transform:uppercase; margin-top:0.2cqw; }
.cert-brand .mk{ width:4.8cqw; height:4.8cqw; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 0.25cqw #09090B, 0 0 0 0.45cqw #22D3EE, 0 0 2.4cqw rgba(34,211,238,0.6); }
.cert.verified .cert-brand .mk{ box-shadow:0 0 0 0.25cqw #09090B, 0 0 0 0.45cqw #FBBF24, 0 0 2.4cqw rgba(251,191,36,0.5); }
.cert-kind{ font-family:var(--font-display); font-weight:700; font-size:1.15cqw; letter-spacing:0.22em; text-transform:uppercase; color:#67E8F9; padding:0.9cqw 1.8cqw; border-radius:99cqw; white-space:nowrap; background:rgba(6,182,212,0.1); border:0.12cqw solid rgba(103,232,249,0.5); }
.cert.verified .cert-kind{ color:#FDE68A; background:rgba(251,191,36,0.1); border-color:rgba(253,230,138,0.55); }
.cert-body{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.cert-lbl{ font-size:1.3cqw; letter-spacing:0.32em; text-transform:uppercase; color:#22D3EE; font-weight:700; }
.cert.verified .cert-lbl{ color:#FBBF24; }
.cert-name{ font-family:var(--font-display); font-weight:700; font-size:5.6cqw; letter-spacing:-0.025em; line-height:1.08; margin:1.2cqw 0 1.4cqw; color:#fff; overflow-wrap:anywhere; text-shadow:0 0 3cqw rgba(103,232,249,0.25); }
.cert-desc{ font-size:1.55cqw; color:#CBD5E1; line-height:1.5; }
.cert-desc b{ color:#fff; }
.cert-desc.small{ font-size:1.3cqw; color:#94A3B8; max-width:70cqw; margin:0 auto; }
.cert-title{ font-family:var(--font-display); font-weight:700; font-size:3.4cqw; letter-spacing:-0.01em; line-height:1.2; margin:0.8cqw 0 1.2cqw; padding:0 1cqw; background:linear-gradient(100deg,#22D3EE,#34D399); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cert.verified .cert-title{ background-image:linear-gradient(100deg,#FDE68A,#FBBF24 45%,#F59E0B); }
.cert-foot{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap:1.4cqw; align-items:stretch; }
.cert.verified .cert-foot{ grid-template-columns:repeat(3, minmax(0, 1fr)) auto minmax(0, 1.35fr); }
.cert-foot .cf{ padding:1.3cqw 1.5cqw; border-radius:1.2cqw; background:linear-gradient(160deg, rgba(28,25,48,0.96), rgba(13,11,24,0.96)); border:0.1cqw solid rgba(255,255,255,0.12); }
.cert-foot .cf span{ display:block; font-size:0.95cqw; letter-spacing:0.14em; text-transform:uppercase; color:#94A3B8; font-weight:700; }
.cert-foot .cf b{ display:block; font-size:1.4cqw; color:#F8FAFC; margin-top:0.45cqw; font-family:var(--font-display); }
.cert-foot .cf.id b{ font-family:ui-monospace, Consolas, monospace; letter-spacing:0.04em; }
.cert-foot .sign{ text-align:center; background:none; border:none; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:0.4cqw; }
.cert-foot .sig{ font-family:"Brush Script MT", "Segoe Script", cursive; font-size:3.2cqw; color:#fff; line-height:1.1; padding-bottom:0.5cqw; margin-bottom:0.6cqw; border-bottom:0.14cqw solid; border-image:linear-gradient(90deg, transparent, #22D3EE, #34D399, transparent) 1; }
.cert.verified .cert-foot .sig{ border-image:linear-gradient(90deg, transparent, #FBBF24, #FDE68A, transparent) 1; }
.cert-foot .sign span{ letter-spacing:0.04em; text-transform:none; color:#94A3B8; }
.cert-seal{ align-self:center; width:9cqw; height:9cqw; border-radius:50%; display:grid; place-items:center; text-align:center; color:#1C1404;
  background:radial-gradient(circle at 35% 30%, #FEF3C7, #FBBF24 55%, #B45309); box-shadow:0 0 0 0.35cqw rgba(251,191,36,0.25), 0 0 3cqw rgba(251,191,36,0.45); }
.cert-seal div{ font-family:var(--font-display); font-weight:700; font-size:0.85cqw; letter-spacing:0.16em; line-height:1.25; text-transform:uppercase; }
.cert-seal svg{ display:block; width:2.6cqw; height:2.6cqw; margin:0 auto 0.3cqw; }
.cert-note{ margin-top:1.5cqw; text-align:center; font-size:1cqw; color:#64748B; letter-spacing:0.02em; }

/* verification */
.vf-form{ margin-top:30px; padding:10px 10px 10px 14px; display:flex; gap:12px; max-width:560px; border-radius:980px; }
.vf-form input{ flex:1; min-width:0; font-family:ui-monospace, Consolas, monospace; font-size:16px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); background:transparent; border:none; padding:8px 10px; }
.vf-form input:focus{ outline:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.vf-msg{ margin-top:24px; padding:16px 18px; border-radius:14px; font-size:15px; color:var(--ink-soft); border:1px solid var(--rim); }
.vf-msg.ok{ color:#d1fae5; background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.45); }
.vf-msg.bad{ color:#fde68a; background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.4); }
.vf-meta{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:var(--ink-soft); }
.vf-meta b{ color:var(--ink); }

@media print{
  @page{ size:A4 landscape; margin:0; }
  body.printing-cert{ background:#09090B !important; }
  body.printing-cert *{ visibility:hidden !important; }
  body.printing-cert .cert, body.printing-cert .cert *{ visibility:visible !important; }
  body.printing-cert .cert{ position:fixed; left:0; top:0; width:297mm; height:210mm; aspect-ratio:auto; border-radius:0; box-shadow:none; }
  body.printing-cert .cert-in{ border-radius:0; }
  body.printing-cert .cert{ padding:1.2mm; }
}

/* very long Indonesian words must never push the page sideways on phones */
h1, h2, h3, .s-title{ overflow-wrap:break-word; }

/* ---------- SVG ICONS ---------- */
.i{ width:1.05em; height:1.05em; flex-shrink:0; vertical-align:-0.16em; }
.btn .i{ width:1.1em; height:1.1em; stroke-width:2.2; }
.ck .i{ width:11px; height:11px; stroke-width:3; vertical-align:0; }
.m-toc .extra .ck{ color:var(--ink-faint); }
.m-toc .extra .ck .i{ width:10px; height:10px; stroke-width:2.4; }
.m-toc li.done .ck{ color:#09090B; }
.st-layer .ic .i{ width:18px; height:18px; stroke-width:2; }
.crumbs .sep{ display:inline-flex; color:var(--ink-faint); }
.crumbs .sep .i{ width:14px; height:14px; }
.prompt-h .pk, .copy, .overall .ol-pt a, .pe-item a, .m-pager .k, .vf-msg.ok b{ display:inline-flex; align-items:center; gap:6px; }
.box > .bx-k .i{ width:17px; height:17px; stroke-width:2; }
.copy .i{ width:14px; height:14px; stroke-width:2.2; }
.mod-meta .i, .chip .i{ margin-right:4px; }
.chip .i{ margin-right:0; }
.rv-a{ display:flex; align-items:flex-start; gap:7px; }
.rv-a .i{ width:16px; height:16px; margin-top:0.15em; stroke-width:2.4; }
.st-ai .i{ margin-right:6px; }
.prose li.li-ic{ list-style:none; margin-left:-22px; padding-left:0; display:flex; gap:8px; align-items:flex-start; }
.prose li.li-ic .i{ width:17px; height:17px; margin-top:0.2em; stroke-width:2.6; }
.prose li.li-ic.yes .i{ color:var(--emerald-hi); }
.prose li.li-ic.no .i{ color:#f87171; }

/* ---------- REGISTRATION (Baskhara's Mind) ---------- */
.reg-join{ margin-top:36px; }
.reg-join fieldset{ border:none; padding:0; margin:0 0 26px; min-width:0; }
.reg-join legend{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan-hi); margin-bottom:14px; }
.reg-join.tried :invalid, .reg-join form.tried :invalid{ border-color:rgba(248,113,113,0.7); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.55; cursor:pointer; }
.consent input{ flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:var(--cyan); }
form.tried .consent input:invalid + span{ color:#fca5a5; }
.reg-err{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:14px; color:#fde68a; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.4); }
.reg-note{ margin-top:28px; padding:16px 20px; font-size:15px; color:#d1fae5; border-color:rgba(16,185,129,0.45); background:rgba(16,185,129,0.1); }
.reg-note a{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; color:var(--emerald-hi); font-weight:700; }
@media (max-width:900px){ .reg-join{ padding:26px 20px; } }

/* module PDF download */
.m-dl{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.m-dl span{ font-size:13px; color:var(--ink-faint); }

/* ---------- SELF-ASSESSMENT & ROADMAP ---------- */
.as-box{ margin-top:36px; padding:40px; }
.as-box[hidden], .rm[hidden]{ display:none; }
.rate-scale{ list-style:none; counter-reset:sc; display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px; font-size:13px; color:var(--ink-soft); }
.rate-scale li{ counter-increment:sc; }
.rate-scale li::before{ content:counter(sc); display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border-radius:6px; font-size:11.5px; font-weight:700; color:var(--cyan-hi); background:rgba(6,182,212,0.12); }
.rates{ display:grid; gap:8px; }
.rate{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 20px; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,0.02); }
.rate-l b{ display:block; font-size:15px; }
.rate-l small{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-faint); }
.rate-o{ display:flex; gap:6px; }
.rate-o label{ position:relative; cursor:pointer; }
.rate-o input, .pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.rate-o span{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--rim); font-weight:700; color:var(--ink-soft); transition:background .15s, border-color .15s, color .15s; }
.rate-o label:hover span{ border-color:rgba(6,182,212,0.6); color:var(--ink); }
.rate-o input:checked + span{ background:var(--cyan); border-color:var(--cyan); color:#04121a; }
.rate-o input:focus-visible + span, .pick input:focus-visible + span{ outline:2px solid var(--cyan-hi); outline-offset:2px; }
form.tried .rate:has(input:invalid){ border-color:rgba(248,113,113,0.7); }
.as-q{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:10px; }
.as-q small{ font-weight:500; color:var(--ink-faint); margin-left:6px; }
.picks{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pick{ position:relative; cursor:pointer; }
.pick span{ display:inline-block; padding:9px 14px; border-radius:999px; border:1px solid var(--rim); font-size:13.5px; color:var(--ink-soft); transition:background .15s, border-color .15s, color .15s; }
.pick input:checked + span{ background:rgba(139,92,246,0.18); border-color:rgba(139,92,246,0.7); color:#ede9fe; }
.pick input:disabled + span{ opacity:0.4; cursor:not-allowed; }

.rm{ margin-top:36px; }
.rm-head{ padding:36px 40px; }
.rm-k{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan-hi); }
.rm-head h2{ margin-top:10px; font-size:clamp(24px, 3vw, 34px); }
.rm-head h2 span{ color:var(--cyan-hi); }
.rm-why{ margin-top:10px; color:var(--ink-soft); }
.rm-facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; }
.rm-facts div{ padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,0.03); }
.rm-facts b{ display:block; font-family:var(--font-display); font-size:19px; }
.rm-facts span{ font-size:12.5px; color:var(--ink-faint); }
.rm-sw{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; font-size:14px; color:#cbd5e1; }
.rm-sw b{ display:block; font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-bottom:4px; }
.rm-warn{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:12px; font-size:14px; color:#fde68a; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.4); }
.rm-warn .i{ flex-shrink:0; margin-top:2px; }
.rm-goal{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:#e2e8f0; }
.rm-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.rm-h{ margin:34px 0 14px; font-size:20px; }
.rm-list{ list-style:none; display:grid; gap:8px; }
.rm-item a{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:var(--glass); transition:border-color .15s, background .15s; }
.rm-item a:hover{ border-color:rgba(6,182,212,0.5); background:var(--glass-hi); }
.rm-n{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; font-weight:700; color:var(--ink-soft); background:rgba(255,255,255,0.05); }
.rm-item.done .rm-n{ color:#04121a; background:var(--emerald); }
.rm-b{ min-width:0; }
.rm-w{ display:block; font-size:12px; font-weight:600; color:var(--ink-faint); letter-spacing:0.04em; }
.rm-t{ display:block; font-weight:700; font-size:15.5px; margin-top:1px; }
.rm-b small{ display:block; margin-top:3px; font-size:13px; color:var(--ink-soft); }
.rm-s{ display:inline-block; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; color:var(--ink-soft); background:rgba(255,255,255,0.06); border:1px solid var(--rim); }
.st-vert .rm-s{ color:#ede9fe; background:rgba(139,92,246,0.22); border-color:rgba(139,92,246,0.6); }
.st-fokus .rm-s{ color:var(--cyan-hi); background:rgba(6,182,212,0.14); border-color:rgba(6,182,212,0.45); }
.st-review .rm-s{ color:var(--emerald-hi); background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.4); }
.st-final .rm-s, .st-dasar .rm-s{ color:#fde68a; background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.35); }
.st-vert a{ border-color:rgba(139,92,246,0.4); }
.rm-note{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:14px; color:var(--ink-soft); }
.rm-note[hidden]{ display:none; }
.rm-note a{ display:inline-flex; align-items:center; gap:6px; color:var(--cyan-hi); font-weight:700; }
@media (max-width:900px){
  .as-box, .rm-head{ padding:26px 20px; }
  .rate{ grid-template-columns:1fr; }
  .rate-o span{ width:44px; height:40px; }
  .rm-facts, .rm-sw{ grid-template-columns:1fr; }
  .rm-item a{ grid-template-columns:auto 1fr; gap:12px; padding:12px 14px; }
  .rm-item .rm-s{ grid-column:2; justify-self:start; }
}

/* two plans: free vs. paid 1:1 */
.plans.two{ grid-template-columns:repeat(2, 1fr); max-width:900px; margin-left:auto; margin-right:auto; }
.plans.two .plan{ padding:32px 30px; }
.plans-extra.two{ grid-template-columns:repeat(2, 1fr); max-width:900px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .plans.two, .plans-extra.two{ grid-template-columns:1fr; } }

/* mentor photo */
.mentor.has-photo{ grid-template-columns:minmax(0, 300px) minmax(0, 1fr); grid-template-areas:"photo bio" "photo proof"; gap:0 40px; padding:0 40px 0 0; overflow:hidden; align-items:stretch; }
.mentor.has-photo .mentor-photo{ grid-area:photo; }
.mentor.has-photo > div:not(.proof){ grid-area:bio; padding-top:40px; }
.mentor.has-photo .proof{ grid-area:proof; grid-template-columns:repeat(2, minmax(0, 1fr)); padding:28px 0 40px; align-self:end; }
.mentor-photo{ margin:0; position:relative; min-height:100%; background:#0b0b10; }
.mentor-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.mentor-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 70%, rgba(18,16,33,0.6)); pointer-events:none; }
@media (max-width:900px){
  .mentor.has-photo{ grid-template-columns:1fr; grid-template-areas:"photo" "bio" "proof"; padding:0; }
  .mentor-photo{ aspect-ratio:4/3; min-height:0; }
  .mentor-photo::after{ background:linear-gradient(180deg, transparent 60%, rgba(18,16,33,0.85)); }
  .mentor.has-photo > div:not(.proof){ padding:24px 22px 0; }
  .mentor.has-photo .proof{ padding:22px; }
}

/* pre-release promo */
.promo-tag{ align-self:flex-start; margin-top:10px; display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; color:#1c1404; background:linear-gradient(90deg, #FBBF24, #F59E0B); }
.plan .price s{ display:block; font-size:17px; font-weight:600; color:var(--ink-faint); text-decoration-thickness:2px; }
.js-normal{ display:none; }
.promo-ended .js-promo{ display:none; }
.promo-ended .js-normal{ display:inline; }
.mentor.has-photo .proof .n{ font-size:clamp(22px, 2.4vw, 28px); }

/* dedicated way back to the portfolio (mirrors the Baskhara's Mind button on rendybaskhara.com) */
.a-right{ display:flex; align-items:center; gap:10px; }
.a-port{
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px 8px 13px; border-radius:980px;
  font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
  border:1px solid transparent;
  background:linear-gradient(rgba(9,9,11,0.85), rgba(9,9,11,0.85)) padding-box, linear-gradient(100deg, #22D3EE, #34D399 55%, #818CF8) border-box;
  box-shadow:0 0 16px -4px rgba(6,182,212,0.5); transition:box-shadow .2s, transform .2s;
}
.a-port:hover{ box-shadow:0 0 24px -2px rgba(6,182,212,0.75); transform:translateY(-1px); }
.a-port .i{ width:15px; height:15px; stroke-width:2.2; }
@media (max-width:900px){ .a-right{ margin-left:auto; } .a-port{ padding:7px 13px 7px 11px; font-size:12.5px; } }

/* roadmap: on-site two-week plan + mentoring nudge (keeps learners on the site instead of an outside AI plan) */
.rm-sub{ margin:-6px 0 14px; font-size:14px; color:var(--ink-soft); }
.rm-sub a{ color:var(--cyan-hi); font-weight:700; }
.rm-weeks{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.rm-week{ padding:20px 22px; }
.rm-wk-h{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan-hi); margin-bottom:10px; }
.rm-week ol{ list-style:none; display:grid; gap:4px; }
.rm-week li a{ display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:baseline; padding:8px 10px; margin:0 -10px; border-radius:10px; font-size:14.5px; color:#e2e8f0; transition:background .15s; }
.rm-week li a:hover{ background:rgba(6,182,212,0.08); }
.rm-week li .k{ font-size:12.5px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.rm-week li.pt a{ color:var(--emerald-hi); font-weight:700; }
.rm-week li.pt .k{ color:var(--emerald-hi); }
.rm-mentor{ margin-top:28px; padding:26px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(140deg, rgba(6,182,212,0.12), rgba(99,102,241,0.10)), var(--glass); }
.rm-mentor h3{ font-size:20px; }
.rm-mentor p{ margin-top:6px; max-width:560px; font-size:14.5px; color:var(--ink-soft); }
@media (max-width:900px){ .rm-weeks{ grid-template-columns:1fr; } .rm-mentor{ padding:22px 20px; } }

/* sign back in (registration page) */
.reg-join[hidden], .reg-login[hidden], .reg-or[hidden]{ display:none; }
.reg-login{ margin-top:30px; padding:26px 30px; display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:28px; align-items:center; border-color:rgba(6,182,212,0.4); background:linear-gradient(140deg, rgba(6,182,212,0.1), rgba(99,102,241,0.08)), var(--glass); }
.reg-login h3{ font-size:21px; }
.reg-login p{ margin-top:6px; font-size:14.5px; color:var(--ink-soft); }
.reg-login form{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
.reg-login form .reg-err{ grid-column:1 / -1; margin-top:0; }
.reg-login form.tried :invalid{ border-color:rgba(248,113,113,0.7); }
.reg-or{ margin-top:22px; font-size:14px; color:var(--ink-faint); }
.reg-or + .reg-join{ margin-top:12px; }
.linkish{ margin-left:10px; background:none; border:none; padding:0; font:inherit; font-size:13.5px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.linkish:hover{ color:var(--ink); }
@media (max-width:1000px){ .reg-login{ grid-template-columns:1fr; gap:18px; } }
@media (max-width:640px){ .reg-login{ padding:22px 20px; } .reg-login form{ grid-template-columns:1fr; } }