/* Cyber LMS — Hindi-first, mobile-first. Single stylesheet for public + admin. */
:root {
  --bg: #f6f7f9; --card: #ffffff; --ink: #16181d; --muted: #6b7280; --line: #e5e7eb;
  --brand: #0f766e; --brand-dark: #115e59; --brand-soft: #ccfbf1; --accent: #b45309;
  --ok: #16a34a; --bad: #dc2626; --warn: #d97706; --info: #2563eb;
  --radius: 12px; --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
/* sticky footer (public pages): footer always finishes flush at viewport bottom */
body:not(.admin):not(.portal) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.admin):not(.portal) .main { flex: 1 0 auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.7rem; margin: .4em 0; } h2 { font-size: 1.25rem; margin: 1.2em 0 .5em; } h3 { font-size: 1.05rem; }
p.big { font-size: 1.1rem; }
.muted { color: var(--muted); font-size: .92em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.main { padding-top: 18px; padding-bottom: 48px; }
.free { color: var(--ok); }

/* top nav */
.topnav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.topnav .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; }
.logo .logoimg { height: 32px; width: auto; display: block; }
/* logo is a transparent PNG — sits directly on the white header, no badge
   (user request: "background hta do logo ka") */
.navlinks { display: none; gap: 14px; margin-left: auto; }
.navlinks a { color: var(--ink); font-size: .95rem; }
.navauth { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.navlinks + .navauth { margin-left: 0; }
.navtoggle { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; }
body.nav-open .navlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; width: 100%; padding-bottom: 10px; }
.bell { position: relative; margin-left: 8px; font-size: 1.05rem; }
.bell b { position: absolute; top: -6px; right: -10px; background: var(--bad); color: #fff; border-radius: 999px; font-size: .65rem; padding: 1px 5px; }

/* top-nav dropdowns */
.drop { position: relative; }
.dlabel { background: none; border: none; font: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; padding: 6px 2px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dlabel i { font-style: normal; font-size: .68rem; color: var(--muted); transition: transform .15s; }
.drop.open .dlabel i { transform: rotate(180deg); }
.dmenu { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(16,24,40,.14); padding: 6px; min-width: 190px; z-index: 50; }
.dmenu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* hover bridge over the gap */
.dmenu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: .93rem; white-space: nowrap; }
.dmenu a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
@media (min-width: 900px) {
  .drop.open .dmenu { display: block; }
}
@media (min-width: 900px) and (hover: hover) {
  .drop:hover .dmenu { display: block; }
}
@media (max-width: 899px) {
  body.nav-open .drop { width: 100%; border-bottom: 1px dashed var(--line); padding-bottom: 4px; margin-bottom: 4px; }
  body.nav-open .dlabel { width: 100%; justify-content: space-between; padding: 8px 0; }
  body.nav-open .dmenu { display: none; position: static; transform: none; box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0; }
  body.nav-open .drop.open .dmenu { display: block; }
  body.nav-open .dmenu a { white-space: normal; }
}

/* hero */
.hero { text-align: center; padding: 34px 0 10px; }
.hero h1 { font-size: 2rem; line-height: 1.25; }
.hero .accent { color: var(--brand); }
.hero .sub { color: var(--muted); max-width: 560px; margin: 8px auto; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero .cta, .centerbox .cta { justify-content: center; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.stats b { display: block; font-size: 1.2rem; color: var(--brand); }

/* sections + cards */
.sec { padding: 22px 0; }
.sec.alt { background: var(--card); border-radius: var(--radius); padding: 22px 16px; margin: 10px -16px; }
.cgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ccard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); box-shadow: var(--shadow); }
.ccard:hover { border-color: var(--brand); text-decoration: none; }
.ccat { display: inline-block; background: var(--brand-soft); color: var(--brand-dark); font-size: .75rem; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.ccard h3 { margin: 8px 0 4px; }
.cmeta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin: 6px 0; }
.cprice { font-size: 1.15rem; } .cprice s { color: var(--muted); font-weight: 400; }
.save { color: var(--ok); font-size: .8rem; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.steps > div, .tcard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.steps b { display: inline-flex; width: 26px; height: 26px; border-radius: 999px; background: var(--brand); color: #fff; align-items: center; justify-content: center; }
.tgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tcard .stars { color: #f59e0b; } .tcard footer b { display: block; } .tcard footer span { color: var(--muted); font-size: .85rem; }
.leadbox form { display: grid; gap: 10px; max-width: 460px; margin-top: 12px; }

/* buttons, badges, forms */
.btn { display: inline-block; background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: .95rem; cursor: pointer; text-align: center; font-family: inherit; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.lg { padding: 12px 22px; font-size: 1.02rem; }
.btn.sm { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.bad { background: var(--bad); }
.w100 { width: 100%; }
.badge { display: inline-block; font-size: .75rem; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.badge.ok { background: #dcfce7; color: #15803d; } .badge.bad { background: #fee2e2; color: #b91c1c; }
.badge.warn { background: #fef3c7; color: #b45309; } .badge.info { background: #dbeafe; color: #1d4ed8; }
.badge.muted { background: #f1f5f9; color: #64748b; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
textarea { resize: vertical; }
.fld { display: block; margin-bottom: 12px; } .fld span { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; margin: 10px 0; }
.chk input { width: auto; margin-top: 4px; }
.formcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.flash { border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-size: .93rem; }
.flash.ok { background: #dcfce7; color: #166534; } .flash.err { background: #fee2e2; color: #991b1b; }
.flash.warn { background: #fef3c7; color: #92400e; }
.flash.info { background: #dbeafe; color: #1e40af; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; border: 1px dashed var(--line); border-radius: var(--radius); margin: 12px 0; }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.kv.total { font-size: 1.1rem; }
.two { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* tables */
.tscroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f8fafc; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
tr:last-child td { border-bottom: none; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.pager a, .pager b { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pager b { background: var(--brand); color: #fff; border-color: var(--brand); }
.listbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.listbar input[type="search"] { flex: 1; min-width: 160px; width: auto; }
.listbar select { width: auto; min-width: 120px; }

/* course detail */
.cdetail { display: grid; grid-template-columns: 1fr; gap: 18px; }
.cbuy { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; height: fit-content; }
.pricebox { font-size: 1.4rem; margin-bottom: 10px; }
.assure { list-style: none; padding: 0; color: var(--muted); font-size: .88rem; }
.assure li { padding: 3px 0; }
.batchbox { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.batchbox div { display: flex; justify-content: space-between; font-size: .88rem; padding: 3px 0; }
.cdesc { margin: 10px 0; }
details.curri summary, details.faq summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
details.faq { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px; margin: 8px 0; }

/* player */
.learnwrap { max-width: 900px; }
.learnhead { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.progress { background: #e5e7eb; border-radius: 999px; height: 10px; position: relative; margin: 8px 0; max-width: 420px; }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: 999px; }
.progress span { position: absolute; right: 8px; top: -3px; font-size: .7rem; color: var(--muted); }
.progress.sm { height: 8px; max-width: none; }
.modulecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; }
.modulecard header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.modulecard ul { list-style: none; padding: 0; margin: 6px 0; }
.modulecard li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed var(--line); }
.modulecard li.done a { color: var(--muted); }
.batchinfo { background: var(--brand-soft); border-radius: 10px; padding: 10px 14px; font-size: .92rem; margin: 10px 0; }
.vplayer { position: relative; padding-top: 56%; background: #111; border-radius: var(--radius); overflow: hidden; margin: 12px 0; }
.vplayer iframe, .vplayer video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vplayer.emptyvid { display: flex; align-items: center; justify-content: center; padding: 40px 10px; padding-top: 40px; color: #9ca3af; font-size: 1rem; }
.lcontent { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.lessonbar { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.quizcta { background: #fef3c7; padding: 12px 16px; border-radius: 10px; margin: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modcelebrate { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%); border: 1px solid #5eead4; border-radius: 12px; padding: 14px 16px; margin: 14px 0; box-shadow: 0 2px 10px rgba(13, 148, 136, .08); }
.modcelebrate .ava { width: 46px; height: 46px; font-size: 1.1rem; }
.modcelebrate b { color: #0f766e; display: block; font-size: 1rem; }
.modcelebrate p { margin: 2px 0 0; color: #334155; font-size: .9rem; }
.modcelebrate .btn { margin-left: auto; flex: none; }
@media (max-width: 640px) { .modcelebrate .btn { margin-left: 0; } }
.thread { margin: 10px 0; }
.msg { max-width: 85%; border-radius: 12px; padding: 10px 14px; margin: 8px 0; font-size: .93rem; }
.msg.me { background: var(--brand-soft); margin-left: auto; }
.msg.staff { background: var(--card); border: 1px solid var(--line); }
.msg.internal { background: #fef3c7; border: 1px dashed var(--warn); }
.msg span { display: block; font-size: .75rem; color: var(--muted); margin-top: 4px; }
.qa { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: .92rem; }

/* quiz */
.quizpage, .quizresult { max-width: 760px; }
.qlist li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; list-style-position: inside; }
.opts { display: grid; gap: 6px; margin-top: 6px; }
.opts label { display: flex; gap: 8px; align-items: center; background: var(--bg); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.opts input { width: auto; }
.timer { background: #fee2e2; color: #991b1b; padding: 2px 10px; border-radius: 999px; font-weight: 700; margin-left: 10px; }
.scorecard { text-align: center; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 14px 0; }
.scorecard b { font-size: 2.2rem; display: block; }
.scorecard.pass { border-color: var(--ok); } .scorecard.fail { border-color: var(--bad); }

/* certificate — Cybrexa dark brand template (bg = public/assets/cert-bg.jpg) */
.certdesign { position: relative; width: 100%; max-width: 1100px; margin: 14px auto; aspect-ratio: 2900 / 2051; container-type: inline-size; background: #0f1519 url(assets/cert-bg.jpg) center / cover no-repeat; border-radius: 10px; overflow: hidden; color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.45); -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: "Poppins", "Inter", system-ui, sans-serif; }
/* internship certificate variant — same text layout, internship artwork */
.certdesign.intern { aspect-ratio: 2673 / 1890; background-image: url(assets/cert-bg-internship.jpg); }
.cd-body { position: absolute; left: 2.83%; width: 58%; top: 44.4%; text-align: left; font-size: 1.62cqw; line-height: 1.6; font-weight: 400; letter-spacing: .01em; }
.cd-body b { font-weight: 700; letter-spacing: .02em; }
.cd-p2 { margin-top: 1.55em; }
.cd-id { position: absolute; left: 0; width: 100%; top: 94.4%; text-align: center; font-size: 1.03cqw; font-weight: 600; color: #d6bf54; letter-spacing: .05em; }
.cd-date { position: absolute; left: 2.83%; top: 76.5%; font-size: 2.86cqw; font-weight: 700; letter-spacing: .04em; }
/* internship artwork has the signature block higher (~77.7% height vs ~81.8% on
   the course artwork) — lift the date above it so the two never overlap */
.certdesign.intern .cd-date { top: 71.5%; }
.cd-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,10,16,.55); }
.cd-stamp span { border: 4px solid #ff4d5e; color: #ff4d5e; font-size: 6.4cqw; font-weight: 800; letter-spacing: .28em; padding: 1cqw 3.4cqw .6cqw 4.2cqw; transform: rotate(-13deg); text-transform: uppercase; background: rgba(0,0,0,.4); border-radius: 10px; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden; }
  .certdesign, .certdesign * { visibility: visible; }
  .certdesign { position: fixed; inset: 0; width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; height: 100%; }
  body { background: #14141f; }
}

/* invoice */
.invoice { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 700px; margin: 12px 0; }
.invoice header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.invoice .right { text-align: right; }
.invoice .total td { font-weight: 800; border-top: 2px solid var(--ink); }
@media print { .topnav, .footer, .cookiebar, .btn, .flash { display: none !important; } body { background: #fff; } }

/* dashboard */
.kpirow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.kpi span { color: var(--muted); font-size: .8rem; display: block; }
.kpi b { font-size: 1.25rem; }
.kpi small { color: var(--muted); }
.barchart { display: flex; gap: 8px; align-items: flex-end; height: 150px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.barchart .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barchart .bar i { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; }
.barchart .bar b { font-size: .68rem; font-weight: 600; } .barchart .bar span { font-size: .68rem; color: var(--muted); }
.funnel div { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; }
.todo { padding-left: 18px; } .todo li { margin: 6px 0; }
.notif { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.notif.un { border-left: 4px solid var(--brand); }
.centerbox { text-align: center; padding: 40px 10px; }
.authbox { max-width: 420px; margin: 20px auto; }
.demobox { background: #fff7ed; border: 1px dashed var(--warn); border-radius: var(--radius); padding: 12px; margin-top: 14px; }
.verifybox { display: flex; gap: 8px; max-width: 420px; }
.checkout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.couponrow { display: flex; gap: 8px; }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); }
.docpage { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 800px; }
.legal-note { background: #fef3c7; padding: 10px 14px; border-radius: 10px; }
.mthumb { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.rowform { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.rowform input[type="text"], .rowform input[type="number"] { flex: 1; min-width: 110px; width: auto; }
.inline { display: inline; }
.errpage { text-align: center; padding: 60px 0; display: flex; flex-direction: column; justify-content: center; } .errpage h1 { font-size: 3rem; color: var(--brand); }

/* footer */
.footer { background: #0f1420; color: #cbd5e1; margin-top: auto; padding: 44px 0 18px; border-top: 3px solid #2cb9a4; }
.footer .fcols { display: grid; grid-template-columns: 1fr; gap: 26px; }
.footer .fbrand p { font-size: .9rem; line-height: 1.65; color: #94a3b8; margin: 12px 0 14px; max-width: 340px; }
.footer .flogo { height: 30px; width: auto; display: block; }
.footer h4 { color: #fff; margin: 0 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.footer .fcol a, .legalbar a { display: block; color: #cbd5e1; padding: 4px 0; font-size: .9rem; text-decoration: none; }
.footer .fcol a:hover, .legalbar a:hover { color: #fff; text-decoration: underline; }
.footer .soc { display: flex; gap: 8px; }
.footer .soc a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #1e293b; color: #e2e8f0; font-weight: 700; font-size: .85rem; }
.footer .soc a:hover { background: #2cb9a4; color: #0f1420; text-decoration: none; }
.legalbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid #1f2a3c; margin-top: 30px; padding-top: 16px; font-size: .82rem; color: #94a3b8; }
.legalbar a { display: inline; padding: 0; }
.legalbar .fpay { color: #94a3b8; }
.cookiebar { position: fixed; bottom: 12px; left: 12px; right: 12px; background: #111827; color: #fff; padding: 12px 16px; border-radius: 12px; display: none; gap: 10px; align-items: center; flex-wrap: wrap; z-index: 60; font-size: .9rem; }
.cookiebar.show { display: flex; }
.cookiebar .btn { flex: none; }
.cookiebar .ckdecl { background: transparent; color: #e5e7eb; border: 1px solid #4b5563; }
.cookiebar .ckdecl:hover { background: #1f2937; }
.cookiebar a { color: #99f6e4; }

/* admin */
body.admin { display: block; }
.side { position: fixed; inset: 0 auto 0 0; width: 240px; background: #0f172a; color: #cbd5e1; padding: 14px 10px; overflow-y: auto; transform: translateX(-100%); transition: transform .2s; z-index: 70; }
body.nav-open .side { transform: translateX(0); }
.slogo { color: #fff; font-weight: 700; padding: 6px 10px 14px; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.slogo .markimg, .pbrand .markimg { height: 26px; width: auto; display: block; }
.smenu a { display: block; color: #cbd5e1; padding: 8px 10px; border-radius: 8px; font-size: .92rem; }
.smenu a:hover { background: #1e293b; text-decoration: none; }
.smenu a.on { background: var(--brand); color: #fff; }
.sfoot { border-top: 1px solid #1e293b; margin-top: 14px; padding-top: 12px; display: grid; gap: 6px; }
.sfoot b { color: #fff; } .sfoot span { font-size: .8rem; color: #94a3b8; }
.awrap { margin-left: 0; padding: 0 14px 60px; }
.abar { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.abar h1 { font-size: 1.25rem; margin: 0; }
@media (min-width: 900px) {
  .side { transform: translateX(0); }
  .awrap { margin-left: 240px; }

  .cgrid { grid-template-columns: repeat(3, 1fr); }
  .tgrid, .pgrid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .kpirow { grid-template-columns: repeat(5, 1fr); }
  .two { grid-template-columns: 2fr 1fr; }
  .checkout { grid-template-columns: 2fr 1fr; }
  .cdetail { grid-template-columns: 2fr 1fr; }
  .hero h1 { font-size: 2.6rem; }
  .footer .fcols { grid-template-columns: repeat(2, 1fr); }
  .footer .fbrand { grid-column: 1 / -1; }
}
@media (min-width: 1060px) {
  .footer .fcols { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 34px; }
  .footer .fbrand { grid-column: auto; }
  .topnav .wrap { gap: 12px; }
  .navlinks { gap: 16px; }
}
@media (min-width: 1200px) {
  /* flat nav (saare page links ek line me, no dropdowns) — 11 links ko poori jagah chahiye */
  .navtoggle { display: none; }
  /* grid can never wrap — logo | links | auth always stay on one line */
  .topnav .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .topnav .wrap { flex-wrap: nowrap; }
  .navlinks { display: flex; flex-wrap: nowrap; gap: 11px; margin-left: 0; justify-self: end; min-width: 0; }
  .navlinks a, .dlabel { white-space: nowrap; }
  .navauth { margin-left: 0; flex: none; justify-self: end; }
  body.nav-open .navlinks { flex-direction: row; width: auto; padding: 0; }
}
/* ---------- student portal ---------- */
body.portal { background: #f6f7fb; }
body.portal .side { background: linear-gradient(180deg, #0f172a 0%, #113b36 190%); display: flex; flex-direction: column; }
.pbrand { color: #fff; font-weight: 700; padding: 10px 12px 2px; font-size: 1.02rem; }
.ptag { display: inline-block; width: fit-content; background: rgba(45,212,191,.14); color: #5eead4; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin: 4px 12px 12px; }
.ava { display: inline-flex; width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex: none; letter-spacing: .02em; }
.puser { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; margin: 0 8px 12px; min-width: 0; }
.puser div { min-width: 0; }
.puser b { color: #fff; font-size: .9rem; display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puser span { color: #94a3b8; font-size: .74rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smenu a { display: flex; align-items: center; gap: 10px; color: #cbd5e1; padding: 9px 12px; border-radius: 10px; font-size: .92rem; margin: 2px 6px; }
.smenu a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.smenu a.on { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(15,118,110,.35); }
.smenu a .cnt { margin-left: auto; background: #e11d48; color: #fff; border-radius: 999px; font-size: 11px; line-height: 1; padding: 3px 7px; font-weight: 700; }
body.portal .sfoot { margin: auto 8px 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; display: grid; gap: 6px; }
body.portal .sfoot .btn.ghost { color: #cbd5e1; border-color: #334155; }
body.portal .sfoot .btn.ghost:hover { background: rgba(255,255,255,.07); }
body.portal .awrap { background: #f6f7fb; }
.uchip { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 5px; font-size: .84rem; }
.uchip .ava { width: 27px; height: 27px; font-size: .68rem; }
.uchip .uname { font-weight: 600; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .uchip .uname { display: none; } .uchip { padding-right: 5px; } }
@media print { body.portal .side, body.portal .abar { display: none !important; } body.portal .awrap { background: #fff; } }

/* ---------- CRM pipeline board + lead timeline ---------- */
.crmboard { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.crmcol { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 190px; }
.crmcol h4 { margin: 0 2px 10px; font-size: .86rem; display: flex; justify-content: space-between; align-items: center; }
.crmcol h4 .cnt { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: .76rem; color: var(--muted); }
.crmcard { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: #fff; font-size: .88rem; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.crmcard a { text-decoration: none; }
.crmcard .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl { border-left: 2px solid var(--line); margin: 10px 0 10px 8px; padding-left: 16px; }
.tli { position: relative; padding-bottom: 14px; }
.tli:before { content: ''; position: absolute; left: -21.5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #2563eb; }
.tli p { margin: 3px 0; }
@media (max-width: 900px) { .crmboard { grid-template-columns: repeat(5, 210px); } }

/* ---------- v18: home/about content sections + motion animations ---------- */
/* Scroll-reveal: app.js adds html.js + flips .in when a section enters the viewport.
   No-JS fallback: without html.js everything stays visible. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* hero */
.hero .tagline { color: var(--muted); font-weight: 600; letter-spacing: .3px; margin: 10px auto 2px; }
.hero.slim { padding: 26px 0 6px; text-align: center; }
.hero.slim .sub { max-width: 660px; margin: 8px auto 0; }

/* section lead paragraph */
.sec .lead { color: var(--ink); max-width: 760px; }
.sec .lead b { color: var(--brand); }

/* who-we-are video frame */
.vframe { position: relative; width: 100%; max-width: 860px; margin: 16px auto 0; aspect-ratio: 16 / 9; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* transform assure chips */
.assure3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.achip { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.achip b { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); align-items: center; justify-content: center; font-size: 1.3rem; }
.achip h3 { margin: 10px 0 4px; font-size: 1rem; }
.achip p { color: var(--muted); margin: 0; font-size: .9rem; }
.achip:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }

/* internship promo box on home */
.ibox { text-align: center; border: 1px solid var(--brand); box-shadow: 0 0 0 3px rgba(13,148,136,.08); }
.ibox .lead { margin: 0 auto; }

/* final CTA box */
.ctabox { text-align: center; }
.ctabox .cta { margin-top: 12px; }

/* responsive grids for cards (courses + testimonials + team) */
@media (min-width: 700px) {
  .cgrid { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .assure3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1020px) {
  .cgrid { grid-template-columns: repeat(3, 1fr); }
}
.ccard, .tcard { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.tcard:hover { transform: translateY(-2px); border-color: var(--brand); }

/* internship program cards */
.igrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 16px 0 24px; }
@media (min-width: 860px) { .igrid { grid-template-columns: repeat(2, 1fr); } }
.icard { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.icard:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.icard .ihead h2 { margin: 8px 0 2px; font-size: 1.15rem; }
.icard .ihead p { margin: 0; }
.ichips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichips span { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: .82rem; color: var(--muted); }
.icard .idesc { margin: 0; }
.badge.live { background: #dcfce7; color: #15803d; }
.badge.live:before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: 5px; animation: pulse 1.6s ease infinite; }
.badge.soon { background: #dbeafe; color: #1d4ed8; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .badge.live:before { animation: none; } }
.seats { margin-top: 2px; }
.seats .sbar { height: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seats .sbar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .6s ease; }
.seats > span { font-size: .8rem; color: var(--muted); }

/* team (About page — Meet The Minds) */
.tgrid.team { margin-top: 14px; }
@media (min-width: 700px) { .tgrid.team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .tgrid.team { grid-template-columns: repeat(3, 1fr); } }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mcard:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.mcard img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--brand); }
.tavatar { display: inline-flex; width: 84px; height: 84px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), #0f766e); letter-spacing: 1px; }
.mcard h3 { margin: 12px 0 2px; font-size: 1.02rem; }
.mcard .mrole { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); background: rgba(13,148,136,.10); border-radius: 999px; padding: 2px 12px; margin: 2px 0 8px; }
.mcard p { color: var(--muted); font-size: .88rem; margin: 0 0 8px; }
.mcard .mlink { font-size: .82rem; text-decoration: none; font-weight: 600; }

/* ============================================================
   v19 PRO — professional public redesign
   White canvas + full-bleed dark bands instead of stacked boxes,
   editorial typography, hairline soft-shadow cards, refined forms.
   Scoped to the public shell (admin / portal keep their look).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { overflow-x: hidden; overflow-x: clip; }

/* --- canvas + editorial typography (public only) --- */
body:not(.admin):not(.portal) {
  background: #fff; color: #0e1c26; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body:not(.admin):not(.portal) .wrap { max-width: 1120px; }
body:not(.admin):not(.portal) h1,
body:not(.admin):not(.portal) h2,
body:not(.admin):not(.portal) h3 {
  font-family: "Poppins", "Inter", system-ui, sans-serif; letter-spacing: -.015em; color: #0e1c26;
}
body:not(.admin):not(.portal) .main > h1:first-child { font-size: clamp(1.65rem, 3vw, 2.05rem); margin: 22px 0 6px; }
body:not(.admin):not(.portal) .main > .sub, body:not(.admin):not(.portal) h1 + .sub { color: #5a7183; max-width: 720px; }

/* --- top nav: translucent glass --- */
.topnav { background: rgba(255,255,255,.84); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid rgba(14,28,38,.07); }
.topnav .wrap { min-height: 62px; }
.topnav .navlinks a { color: #3c5163; font-weight: 500; transition: color .15s ease; }
.topnav .navlinks a:hover { color: #0f766e; text-decoration: none; }
.topnav .navauth a { font-weight: 600; }
.dmenu { border: 1px solid #e6edf0; box-shadow: 0 18px 40px -18px rgba(14,28,38,.25); }

/* --- buttons: gradient primary + quiet ghost (shared, improves admin too) --- */
.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.btn:not(.ghost):not(.bad) { background: linear-gradient(135deg, #0d9a86, #0f766e); box-shadow: 0 6px 16px -7px rgba(15,118,110,.55); }
.btn:not(.ghost):not(.bad):hover { background: linear-gradient(135deg, #0c8a78, #0c665f); box-shadow: 0 10px 22px -8px rgba(15,118,110,.6); transform: translateY(-1px); }
.btn.bad { box-shadow: 0 6px 16px -7px rgba(220,38,38,.45); }
.btn.bad:hover { transform: translateY(-1px); }
.btn.ghost { border: 1px solid rgba(15,118,110,.4); background: transparent; }
.btn.ghost:hover { background: rgba(13,148,136,.08); border-color: #0d9488; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(20,184,166,.35); outline-offset: 1px; }

/* --- forms: softer fields (shared) --- */
input, select, textarea { border-color: #dce4e9; background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input:focus, select:focus, textarea:focus { border-color: #0d9488; outline: 3px solid rgba(13,148,136,.14); }
::placeholder { color: #93a6b4; }

/* --- flashes: hairline + radius (shared) --- */
.flash { border-radius: 12px; border: 1px solid transparent; }
.flash.ok { border-color: #b9e5c8; } .flash.err { border-color: #f3c1c1; }
.flash.warn { border-color: #f2dba8; } .flash.info { border-color: #bfd8f7; }

/* --- home hero: full-bleed dark band with glow + grid texture --- */
body:not(.admin):not(.portal) .hero.hero-home {
  position: relative; overflow: hidden; text-align: center; color: #c8d6e0;
  margin: -18px calc(50% - 50vw) 0;
  padding: 66px calc(50vw - 50%) 58px;
  background:
    radial-gradient(1000px 520px at 82% -12%, rgba(20,184,166,.22), transparent 62%),
    radial-gradient(760px 460px at 8% 112%, rgba(14,116,144,.16), transparent 60%),
    linear-gradient(180deg, #081420 0%, #0c1e2b 58%, #0a1a26 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-home::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(760px 440px at 50% 0%, #000 28%, transparent 80%);
  mask-image: radial-gradient(760px 440px at 50% 0%, #000 28%, transparent 80%);
}
.hero-home > * { position: relative; z-index: 1; }
body:not(.admin):not(.portal) .hero-home h1 { color: #fff; font-weight: 700; font-size: clamp(2.05rem, 4.4vw, 3.05rem); line-height: 1.18; max-width: 840px; margin: 0 auto 6px; }
.hero-home .accent { color: #2dd4bf; }
.hero-home .tagline { color: #9db4c2; font-weight: 500; letter-spacing: .5px; }
.hero-home .cta { justify-content: center; margin-top: 26px; }
.hero-home .btn.lg { padding: 13px 26px; border-radius: 12px; }
.hero-home .btn.ghost { color: #eaf3f2; border-color: rgba(255,255,255,.32); }
.hero-home .btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.52); }
.hero-home .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 38px; max-width: 880px; margin-left: auto; margin-right: auto; }
.hero-home .stats div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; transition: border-color .2s ease, background .2s ease; }
.hero-home .stats div:hover { border-color: rgba(45,212,191,.42); background: rgba(255,255,255,.08); }
.hero-home .stats b { color: #5eead4; font-size: 1.42rem; font-family: "Poppins", "Inter", sans-serif; }
.hero-home .stats span { color: #a3b8c6; font-size: .8rem; }
@media (min-width: 760px) { .hero-home .stats { grid-template-columns: repeat(4, 1fr); } }

/* --- inner page heads (internships / about): slimmer dark band --- */
body:not(.admin):not(.portal) .hero.slim {
  position: relative; overflow: hidden; text-align: center; color: #c8d6e0;
  margin: -18px calc(50% - 50vw) 10px;
  padding: 60px calc(50vw - 50%) 52px;
  background:
    radial-gradient(880px 460px at 76% -16%, rgba(20,184,166,.20), transparent 64%),
    linear-gradient(180deg, #081420 0%, #0c1e2b 62%, #0a1a26 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero.slim::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(680px 380px at 50% 0%, #000 25%, transparent 82%);
  mask-image: radial-gradient(680px 380px at 50% 0%, #000 25%, transparent 82%);
}
.hero.slim > * { position: relative; z-index: 1; }
body:not(.admin):not(.portal) .hero.slim h1 { color: #fff; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.45rem); line-height: 1.22; max-width: 860px; margin: 0 auto; }
.hero.slim .accent { color: #2dd4bf; }
.hero.slim .sub { color: #9db4c2; }
.hero.slim .sub b { color: #d7e4ea; }

/* --- section rhythm: whitespace + soft tinted bands, no boxes --- */
body:not(.admin):not(.portal) .sec { padding: 52px 0 46px; }
body:not(.admin):not(.portal) .sec.alt {
  background: linear-gradient(180deg, #f7fafb 0%, #f1f6f7 100%);
  border-top: 1px solid #edf3f4; border-bottom: 1px solid #edf3f4;
  border-radius: 0; margin: 6px calc(50% - 50vw);
  padding: 52px calc(50vw - 50%) 46px;
}
body:not(.admin):not(.portal) .sec > h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 14px; }
body:not(.admin):not(.portal) .sec > h2::after {
  content: ''; display: block; width: 46px; height: 3px; border-radius: 3px; margin-top: 12px;
  background: linear-gradient(90deg, #0d9488, #67e8f9);
}
body:not(.admin):not(.portal) .sec > h2 ~ .lead { margin-top: 0; }
body:not(.admin):not(.portal) .sec .lead { color: #41586b; font-size: 1.04rem; line-height: 1.78; max-width: 780px; }
body:not(.admin):not(.portal) .sec .lead b { color: #0f766e; }

/* home internship promo: full-bleed dark band */
body:not(.admin):not(.portal) .sec.ibox {
  position: relative; overflow: hidden; text-align: center; color: #b9cbd7;
  background:
    radial-gradient(820px 420px at 50% -30%, rgba(20,184,166,.24), transparent 65%),
    linear-gradient(180deg, #081420, #0c1e2b);
  border: none; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: 0; margin: 6px calc(50% - 50vw);
  padding: 54px calc(50vw - 50%) 50px; box-shadow: none;
}
.ibox::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 380px at 50% 0%, #000 25%, transparent 82%);
  mask-image: radial-gradient(700px 380px at 50% 0%, #000 25%, transparent 82%);
}
.ibox > * { position: relative; z-index: 1; }
body:not(.admin):not(.portal) .ibox h2 { color: #fff; }
body:not(.admin):not(.portal) .ibox > h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, #2dd4bf, #67e8f9); }
.ibox .lead { color: #b9cbd7; margin-left: auto; margin-right: auto; }
.ibox .lead b { color: #5eead4; }
.ibox .muted { color: #8ba3b2; }
.ibox .cta { justify-content: center; margin-top: 20px; }

/* final CTA: light teal band */
body:not(.admin):not(.portal) .sec.ctabox {
  text-align: center; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, #f0fbf8, #e7f6f2);
  border-top: 1px solid #d8efe9; border-bottom: 1px solid #d8efe9;
  margin: 6px calc(50% - 50vw); padding: 52px calc(50vw - 50%) 48px;
}
body:not(.admin):not(.portal) .ctabox > h2::after { margin-left: auto; margin-right: auto; }
.ctabox .cta { justify-content: center; margin-top: 18px; }

/* --- cards: hairline + layered soft shadow, no heavy borders --- */
body:not(.admin):not(.portal) .ccard,
body:not(.admin):not(.portal) .icard,
body:not(.admin):not(.portal) .mcard,
body:not(.admin):not(.portal) .achip,
body:not(.admin):not(.portal) .tcard,
body:not(.admin):not(.portal) .pcard,
body:not(.admin):not(.portal) .steps > div {
  background: #fff; border: 1px solid #e6edf0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18);
}
body:not(.admin):not(.portal) .achip { background: #fff; }
body:not(.admin):not(.portal) .achip b { background: #f2faf8; border: 1px solid #dcf0eb; border-radius: 12px; }
body:not(.admin):not(.portal) .ccard:hover,
body:not(.admin):not(.portal) .icard:hover,
body:not(.admin):not(.portal) .mcard:hover,
body:not(.admin):not(.portal) .achip:hover,
body:not(.admin):not(.portal) .pcard:hover,
body:not(.admin):not(.portal) .tcard:hover {
  transform: translateY(-4px); border-color: rgba(13,148,136,.5);
  box-shadow: 0 4px 10px -4px rgba(14,28,38,.08), 0 22px 44px -18px rgba(15,118,110,.30);
}
body:not(.admin):not(.portal) .steps > div { padding: 18px; }
body:not(.admin):not(.portal) .steps b { background: linear-gradient(135deg, #0d9a86, #0f766e); box-shadow: 0 4px 10px -3px rgba(15,118,110,.5); }
body:not(.admin):not(.portal) .steps h3 { font-size: 1rem; margin: 10px 0 3px; }
body:not(.admin):not(.portal) .steps p { color: #5a7183; margin: 0; font-size: .9rem; }
body:not(.admin):not(.portal) .ccat { background: rgba(13,148,136,.10); color: #0f766e; font-weight: 600; letter-spacing: .2px; }
body:not(.admin):not(.portal) .ccard h3 { font-size: 1.08rem; }
body:not(.admin):not(.portal) .cprice { font-family: "Poppins", "Inter", sans-serif; font-weight: 600; }
body:not(.admin):not(.portal) .tcard .stars { letter-spacing: 2px; }
body:not(.admin):not(.portal) .tcard footer b { font-family: "Poppins", "Inter", sans-serif; }
body:not(.admin):not(.portal) .mcard img { border: none; box-shadow: 0 0 0 3px rgba(13,148,136,.22), 0 10px 24px -10px rgba(14,28,38,.35); }
body:not(.admin):not(.portal) .tavatar { box-shadow: 0 0 0 3px rgba(13,148,136,.22), 0 10px 24px -10px rgba(14,28,38,.35); }
body:not(.admin):not(.portal) .mcard .mrole { letter-spacing: 1.4px; }
body:not(.admin):not(.portal) .mcard .mlink { color: #0f766e; }
body:not(.admin):not(.portal) .mcard .mlink:hover { text-decoration: underline; }

/* lead-capture form: white card on white section */
body:not(.admin):not(.portal) .leadbox form {
  background: #fff; border: 1px solid #e6edf0; border-radius: 16px; padding: 20px;
  box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18);
}
body:not(.admin):not(.portal) .formcard {
  border-radius: 16px; border-color: #e6edf0; padding: 22px;
  box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18);
}

/* --- FAQ: clean editorial list instead of stacked cards --- */
body:not(.admin):not(.portal) details.faq {
  background: transparent; border: none; border-bottom: 1px solid #e8eef1;
  border-radius: 0; padding: 0 4px; margin: 0; max-width: 840px;
}
body:not(.admin):not(.portal) details.faq summary { padding: 16px 2px; font-size: 1.02rem; font-weight: 600; transition: color .15s ease; }
body:not(.admin):not(.portal) details.faq summary:hover { color: #0f766e; }
body:not(.admin):not(.portal) details.faq[open] summary { color: #0f766e; }
body:not(.admin):not(.portal) details.faq p { color: #41586b; margin: 0; padding: 0 2px 16px; line-height: 1.7; }

/* --- CMS / blog prose pages: clean editorial reading --- */
body:not(.admin):not(.portal) .docpage {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 14px 0 4px; max-width: 840px; margin: 0 auto;
}
body:not(.admin):not(.portal) .docpage h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin: 10px 0 8px; }
body:not(.admin):not(.portal) .docpage h3 { margin: 26px 0 8px; font-size: 1.16rem; }
body:not(.admin):not(.portal) .docpage p, body:not(.admin):not(.portal) .docpage li { color: #41586b; line-height: 1.78; }
body:not(.admin):not(.portal) .docpage a { font-weight: 600; }
body:not(.admin):not(.portal) .docpage .legal-note { background: #fffbeb; border: 1px solid #f5e2a8; }

/* --- course detail: sticky buy card + cleaner syllabus --- */
body:not(.admin):not(.portal) .cbuy {
  border-radius: 16px; border-color: #e6edf0; padding: 22px;
  box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18);
}
@media (min-width: 900px) { body:not(.admin):not(.portal) .cbuy { position: sticky; top: 86px; } }
body:not(.admin):not(.portal) .pricebox { font-family: "Poppins", "Inter", sans-serif; font-size: 1.55rem; }
body:not(.admin):not(.portal) .pricebox .save { background: #dcfce7; color: #15803d; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 600; }
body:not(.admin):not(.portal) .cdetail .cinfo > h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.22; }
body:not(.admin):not(.portal) .cdetail .cinfo > .sub { color: #5a7183; font-size: 1.02rem; }
body:not(.admin):not(.portal) .curri { margin-top: 22px; }
body:not(.admin):not(.portal) .curri h3 { font-size: 1.15rem; margin-bottom: 4px; }
body:not(.admin):not(.portal) details.curri summary { padding: 13px 2px; border-bottom: 1px solid #e8eef1; transition: color .15s ease; }
body:not(.admin):not(.portal) details.curri summary:hover { color: #0f766e; }
body:not(.admin):not(.portal) details.curri ul { margin: 0 0 10px; }
body:not(.admin):not(.portal) .assure li { padding: 6px 0; border-bottom: 1px dashed #e8eef1; }
body:not(.admin):not(.portal) .assure li:last-child { border-bottom: none; }

/* --- quiz: cleaner options --- */
body:not(.admin):not(.portal) .qlist li {
  border-radius: 16px; border-color: #e6edf0;
  box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18);
}
body:not(.admin):not(.portal) .opts label { background: #f5f9fa; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; transition: background .15s ease, border-color .15s ease; }
body:not(.admin):not(.portal) .opts label:hover { background: #eaf7f4; border-color: rgba(13,148,136,.35); }
body:not(.admin):not(.portal) .scorecard { border-radius: 16px; border: 1px solid #e6edf0; box-shadow: 0 1px 2px rgba(14,28,38,.03), 0 14px 36px -22px rgba(14,28,38,.18); }

/* --- misc --- */
body:not(.admin):not(.portal) .empty { background: #fbfdfe; border: 1px dashed #d7e2e7; }
body:not(.admin):not(.portal) .verifybox input { padding: 12px 14px; }
body:not(.admin):not(.portal) .authbox { max-width: 440px; margin: 44px auto 26px; }
body:not(.admin):not(.portal) .authbox h1 { text-align: center; }
body:not(.admin):not(.portal) .pager a { border-color: #e6edf0; box-shadow: 0 1px 2px rgba(14,28,38,.03); }
body:not(.admin):not(.portal) .listbar input[type="search"], body:not(.admin):not(.portal) .listbar select { background: #fff; }

/* --- footer: gradient hairline + quieter links --- */
.footer { background: linear-gradient(180deg, #0a1320 0%, #0d1a2a 100%); border-top: none; position: relative; padding: 52px 0 20px; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(44,185,164,.85) 32%, rgba(94,234,212,.95) 50%, rgba(44,185,164,.85) 68%, transparent 96%);
}
.footer .soc a { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.footer .soc a:hover { background: #2cb9a4; border-color: transparent; }
.footer .fcol a, .legalbar a { transition: color .15s ease; }

/* --- reduced motion: kill decorative transitions --- */
@media (prefers-reduced-motion: reduce) {
  .btn, .ccard, .icard, .mcard, .achip, .tcard, .pcard, .hero-home .stats div { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v20 — DESIGN ELEVATION (public shell; shared primitives as marked)
   Finer type scale, gradient hero accents, aligned card pricing,
   icon-tile chips, custom FAQ markers, floating cookiebar,
   staggered reveals, richer footer & auth. No new sections/boxes.
   ============================================================ */

/* --- global niceties --- */
body:not(.admin):not(.portal) ::selection { background: rgba(13,148,136,.24); color: #06281f; }
body:not(.admin):not(.portal) { scrollbar-width: thin; scrollbar-color: #b7d8d1 #eef4f4; }
body:not(.admin):not(.portal) ::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.admin):not(.portal) ::-webkit-scrollbar-thumb { background: #b7d8d1; border-radius: 8px; border: 2px solid #eef4f4; }
body:not(.admin):not(.portal) ::-webkit-scrollbar-track { background: #eef4f4; }

/* --- page h1 presence on plain pages (courses/contact/faq/verify) --- */
body:not(.admin):not(.portal) .main > h1:first-child { letter-spacing: -.025em; font-size: clamp(1.85rem, 3.4vw, 2.35rem); }

/* --- buttons: deeper gradient + inner highlight (shared) --- */
.btn:not(.ghost):not(.bad) {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 48%, #0f766e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 20px -8px rgba(15,118,110,.65);
}
.btn:not(.ghost):not(.bad):hover {
  background: linear-gradient(135deg, #12aa9a 0%, #0c8a7c 48%, #0c6a60 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 14px 30px -10px rgba(15,118,110,.72);
  transform: translateY(-2px);
}
.btn:not(.ghost):not(.bad):active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 4px 12px -6px rgba(15,118,110,.5); }

/* --- nav: quieter glass + animated underline --- */
.topnav { background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); border-bottom: 1px solid rgba(14,28,38,.06); }
.topnav .wrap { min-height: 64px; }
.topnav .navlinks > a { position: relative; }
.topnav .navlinks > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf); transition: right .24s cubic-bezier(.16,1,.3,1);
}
.topnav .navlinks > a:hover::after { right: 0; }
.dmenu { border-radius: 14px; }

/* --- home hero: deeper band + gradient accent word + uppercase tagline --- */
body:not(.admin):not(.portal) .hero.hero-home {
  background:
    radial-gradient(1100px 560px at 85% -14%, rgba(20,184,166,.27), transparent 60%),
    radial-gradient(880px 480px at -4% 116%, rgba(103,232,249,.13), transparent 55%),
    radial-gradient(620px 340px at 52% 120%, rgba(20,184,166,.15), transparent 65%),
    linear-gradient(180deg, #071220 0%, #0b1c29 55%, #091824 100%);
}
body:not(.admin):not(.portal) .hero-home h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 auto 12px; }
body:not(.admin):not(.portal) .hero-home h1 .accent {
  background: linear-gradient(92deg, #2dd4bf 4%, #67e8f9 58%, #99f6e4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero-home .tagline { text-transform: uppercase; letter-spacing: 3px; font-size: .76rem; font-weight: 600; color: #8fb0bf; }
.hero-home .stats div {
  border-radius: 16px; padding: 16px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
}
.hero-home .stats b { font-size: 1.7rem; letter-spacing: -.02em; }
.hero-home .stats span { font-size: .74rem; letter-spacing: .8px; text-transform: uppercase; }
.hero.slim h1, .ibox h2 { letter-spacing: -.025em; }
body:not(.admin):not(.portal) .hero.slim h1 .accent {
  background: linear-gradient(92deg, #2dd4bf, #67e8f9); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* --- section heads: wider glowing bar --- */
body:not(.admin):not(.portal) .sec > h2 { letter-spacing: -.02em; }
body:not(.admin):not(.portal) .sec > h2::after {
  width: 56px; height: 4px; margin-top: 14px;
  box-shadow: 0 1px 10px rgba(13,148,136,.55);
}
body:not(.admin):not(.portal) .sec .lead { font-size: 1.06rem; color: #465a6d; }

/* --- cards: 18px radius family + aligned pricing foot --- */
body:not(.admin):not(.portal) .ccard { display: flex; flex-direction: column; border-radius: 18px; padding: 20px; }
body:not(.admin):not(.portal) .ccard h3 { letter-spacing: -.01em; }
body:not(.admin):not(.portal) .cmeta { gap: 6px; margin: 12px 0 6px; }
body:not(.admin):not(.portal) .cmeta span {
  background: #f4f9f8; border: 1px solid #e2eeeb; border-radius: 999px;
  padding: 3px 10px; font-size: .78rem; color: #4f6b7d; white-space: nowrap;
}
body:not(.admin):not(.portal) .ccard .cprice {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2ecf0;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
body:not(.admin):not(.portal) .icard, body:not(.admin):not(.portal) .mcard,
body:not(.admin):not(.portal) .tcard, body:not(.admin):not(.portal) .pcard,
body:not(.admin):not(.portal) .formcard, body:not(.admin):not(.portal) .cbuy,
body:not(.admin):not(.portal) .leadbox form { border-radius: 18px; }

/* --- icon tiles (transform chips + why-choose-us): warmer, elevated --- */
body:not(.admin):not(.portal) .achip { padding: 26px 20px; border-radius: 18px; }
body:not(.admin):not(.portal) .achip b {
  width: 54px; height: 54px; font-size: 1.55rem; border-radius: 16px;
  background: linear-gradient(145deg, #f2fbf8, #ddf2ec);
  border: 1px solid #cde9e1; box-shadow: 0 8px 16px -8px rgba(15,118,110,.35), inset 0 1px 0 #ffffff;
}
body:not(.admin):not(.portal) .achip:hover b { box-shadow: 0 10px 20px -8px rgba(15,118,110,.45), inset 0 1px 0 #ffffff; }

/* --- team avatars: gradient + double ring --- */
body:not(.admin):not(.portal) .tavatar {
  background: linear-gradient(145deg, #0d9488, #114e48);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(13,148,136,.32), 0 16px 30px -14px rgba(15,118,110,.55);
  font-family: "Poppins", "Inter", sans-serif;
}
body:not(.admin):not(.portal) .mcard img {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(13,148,136,.32), 0 16px 30px -14px rgba(15,118,110,.55);
}

/* --- FAQ: custom +/− markers instead of ▶ --- */
body:not(.admin):not(.portal) details.faq summary { list-style: none; display: flex; align-items: center; gap: 12px; }
body:not(.admin):not(.portal) details.faq summary::-webkit-details-marker { display: none; }
body:not(.admin):not(.portal) details.faq summary::before {
  content: '+'; flex: none; width: 27px; height: 27px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eaf6f3; color: #0f766e; font-weight: 700; font-size: 1.1rem; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
body:not(.admin):not(.portal) details.faq[open] summary::before {
  content: '−'; background: linear-gradient(135deg, #0d9488, #0f766e); color: #fff; transform: rotate(180deg);
}

/* --- course detail: unified radius + price emphasis --- */
body:not(.admin):not(.portal) .pricebox b { letter-spacing: -.02em; }

/* --- auth: softer, taller, more presence --- */
body:not(.admin):not(.portal) .authbox .formcard { border-radius: 20px; padding: 30px 26px; box-shadow: 0 2px 6px rgba(14,28,38,.04), 0 28px 64px -32px rgba(14,28,38,.3); }
body:not(.admin):not(.portal) .authbox input { padding: 13px 15px; border-radius: 12px; }
body:not(.admin):not(.portal) .authbox .btn { padding: 12px 16px; font-size: 1rem; border-radius: 12px; }

/* --- listbar (search row): taller unified fields --- */
body:not(.admin):not(.portal) .listbar input[type="search"],
body:not(.admin):not(.portal) .listbar select { border-radius: 12px; padding: 11px 14px; box-shadow: 0 1px 2px rgba(14,28,38,.05); }

/* --- cookiebar: floating glass pill (shared shell) --- */
.cookiebar {
  bottom: 18px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(680px, calc(100vw - 24px)); justify-content: center;
  background: rgba(9,20,30,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); padding: 13px 18px;
}

/* --- footer: brighter headings, link hover slide, glowing hairline (shared shell) --- */
.footer { background: linear-gradient(180deg, #081220 0%, #0c1a28 100%); }
.footer h4 { color: #5eead4; font-size: .74rem; letter-spacing: 2.2px; }
.footer .fcol a { color: #a7bcc9; transition: color .15s ease, transform .18s cubic-bezier(.16,1,.3,1); }
.footer .fcol a:hover { color: #ffffff; text-decoration: none; transform: translateX(3px); }
.footer .fbrand p { color: #9db2c0; }
.footer .soc a { border-radius: 11px; transition: transform .18s ease, background .18s ease; }
.footer .soc a:hover { transform: translateY(-2px); }
.footer .legalbar { border-top-color: rgba(255,255,255,.08); }

/* --- error pages: gradient giant numeral --- */
.errpage h1 {
  font-family: "Poppins", "Inter", sans-serif; font-size: 4.4rem; letter-spacing: -.04em;
  background: linear-gradient(135deg, #0d9488, #67e8f9);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* --- staggered reveal: grid children rise in sequence --- */
@media (prefers-reduced-motion: no-preference) {
  html.js .sec.reveal .cgrid > *, html.js .sec.reveal .tgrid > *, html.js .sec.reveal .steps > *,
  html.js .sec.reveal .igrid > *, html.js .sec.reveal .assure3 > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  }
  html.js .sec.reveal.in .cgrid > *, html.js .sec.reveal.in .tgrid > *, html.js .sec.reveal.in .steps > *,
  html.js .sec.reveal.in .igrid > *, html.js .sec.reveal.in .assure3 > * { opacity: 1; transform: none; }
  html.js .sec.reveal.in .cgrid > *:nth-child(2), html.js .sec.reveal.in .tgrid > *:nth-child(2),
  html.js .sec.reveal.in .steps > *:nth-child(2), html.js .sec.reveal.in .igrid > *:nth-child(2),
  html.js .sec.reveal.in .assure3 > *:nth-child(2) { transition-delay: .07s; }
  html.js .sec.reveal.in .cgrid > *:nth-child(3), html.js .sec.reveal.in .tgrid > *:nth-child(3),
  html.js .sec.reveal.in .steps > *:nth-child(3), html.js .sec.reveal.in .igrid > *:nth-child(3),
  html.js .sec.reveal.in .assure3 > *:nth-child(3) { transition-delay: .14s; }
  html.js .sec.reveal.in .cgrid > *:nth-child(4), html.js .sec.reveal.in .tgrid > *:nth-child(4),
  html.js .sec.reveal.in .steps > *:nth-child(4), html.js .sec.reveal.in .igrid > *:nth-child(4) { transition-delay: .21s; }
  html.js .sec.reveal.in .cgrid > *:nth-child(5), html.js .sec.reveal.in .tgrid > *:nth-child(5),
  html.js .sec.reveal.in .steps > *:nth-child(5) { transition-delay: .28s; }
  html.js .sec.reveal.in .cgrid > *:nth-child(6), html.js .sec.reveal.in .tgrid > *:nth-child(6) { transition-delay: .35s; }
  html.js .sec.reveal.in .cgrid > *:nth-child(7) { transition-delay: .42s; }
}

/* --- reduced motion: kill v20 decorative motion too --- */
@media (prefers-reduced-motion: reduce) {
  .topnav .navlinks > a::after, details.faq summary::before { transition: none !important; }
  html.js .sec.reveal .cgrid > *, html.js .sec.reveal .tgrid > *, html.js .sec.reveal .steps > *,
  html.js .sec.reveal .igrid > *, html.js .sec.reveal .assure3 > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .footer .fcol a, .footer .soc a, .btn:not(.ghost):not(.bad) { transition: none !important; }
}

/* v20 fix: flex-column cards must not stretch the inline category chip */
body:not(.admin):not(.portal) .ccard .ccat { align-self: flex-start; }

/* ============================================================
   v21 — CONTENT LAYER (public shell)
   Eyebrow kickers, editorial page heads (resources), internship
   fact chips, blog meta rows, community link cards, faq centering.
   No new boxes — existing component family only.
   ============================================================ */

/* --- kicker: small uppercase eyebrow above headings --- */
body:not(.admin):not(.portal) .kicker {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: #0d9488; margin: 0 0 10px;
}
body:not(.admin):not(.portal) .sec > .kicker { display: block; }
.hero.slim .kicker, .ibox .kicker { color: #5eead4; letter-spacing: 2.8px; }
.pagehead .kicker { color: #0d9488; }

/* --- pagehead: editorial head for resources pages (blog/community/faq) --- */
body:not(.admin):not(.portal) .pagehead { text-align: center; padding: 34px 0 10px; }
body:not(.admin):not(.portal) .pagehead h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); letter-spacing: -.025em; margin: 0 0 10px;
}
body:not(.admin):not(.portal) .pagehead .sub { color: #5a7183; max-width: 660px; margin: 0 auto; font-size: 1.02rem; }
body:not(.admin):not(.portal) .pagehead::after {
  content: ''; display: block; width: 56px; height: 4px; border-radius: 3px; margin: 20px auto 0;
  background: linear-gradient(90deg, #0d9488, #67e8f9); box-shadow: 0 1px 10px rgba(13,148,136,.55);
}

/* --- ifacts: internship fact chips (dark hero bands) --- */
.ifacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.ifacts span {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #c8d6e0;
  border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 500;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, color .2s ease;
}
.ifacts span:hover { border-color: rgba(45,212,191,.45); color: #eaf6f3; }

/* --- blog cards: meta row + sliding arrow --- */
body:not(.admin):not(.portal) .pcard {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px;
}
body:not(.admin):not(.portal) .pcard:hover { text-decoration: none; transform: translateY(-4px); border-color: rgba(13,148,136,.45); box-shadow: 0 16px 34px -18px rgba(15,118,110,.4); }
.pcard h3 { margin: 0; }
.pcard > p { margin: 0; color: #5a7183; }
.pcard .pmeta {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2ecf0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .82rem; color: #7b93a5;
}
.pcard .parrow { font-style: normal; font-weight: 600; color: #0d9488; white-space: nowrap; transition: transform .2s ease; }
.pcard:hover .parrow { transform: translateX(4px); }

/* --- community link cards --- */
.clinks { gap: 14px; margin-top: 20px; }
.clink {
  display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid #e6edf0; border-radius: 16px; padding: 18px; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.clink:hover { text-decoration: none; transform: translateY(-3px); border-color: rgba(13,148,136,.45); box-shadow: 0 14px 30px -16px rgba(15,118,110,.4); }
.clink .cico {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; color: #0f766e;
  background: linear-gradient(145deg, #f2fbf8, #ddf2ec); border: 1px solid #cde9e1;
  box-shadow: 0 8px 16px -8px rgba(15,118,110,.35), inset 0 1px 0 #ffffff;
}
.clink .ctxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.clink .ctxt b { font-size: 1rem; }
.clink .ctxt span { color: #5a7183; font-size: .86rem; }
.clink .parrow { margin-left: auto; font-style: normal; color: #0d9488; font-weight: 600; transition: transform .2s ease; }
.clink:hover .parrow { transform: translateX(4px); }

/* --- faq: centered list + closing foot --- */
.faqlist { max-width: 840px; margin: 0 auto; }
.faqlist details.faq { border-radius: 14px; padding: 6px 18px; margin: 10px 0; }
.faqfoot { text-align: center; margin-top: 28px; }
.faqfoot p { color: #5a7183; margin: 0 0 10px; }

/* --- help page: a.achip topic cards behave like links --- */
a.achip { color: inherit; text-decoration: none; }
a.achip:hover { text-decoration: none; }
a.achip:hover h3 { color: #0f766e; }

/* --- reduced motion: kill v21 decorative motion --- */
@media (prefers-reduced-motion: reduce) {
  .ifacts span, .pcard .parrow, .clink, .clink .parrow { transition: none !important; }
}

/* ============================================================
   v22 — NEW PAGES + ELEVATION LAYER (public shell)
   About (founder cards + stats + why-grid), Careers, Journey
   timeline, Free quiz cards, Verify split page, Blog article,
   Auth split shell. Scoped like v20/v21: public pages only.
   ============================================================ */

/* ---------- shared: 2-col form rows (careers apply, admin) ---------- */
body:not(.admin):not(.portal) .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
body:not(.admin):not(.portal) .row2.full { grid-template-columns: 1fr; }
@media (max-width: 720px) { body:not(.admin):not(.portal) .row2 { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   ABOUT PAGE v7 (user draft about_page_edit.html) — ALL rules are
   scoped to .aboutpage so no other page (home / admin / portal) is
   affected. Replaces the old about styles (abohead / fcard / stats4 /
   whygrid / jtteaser). Old .wfeat / .wcheck rules further below are
   harmless leftovers (no longer used by the about page markup).
   ============================================================ */
body:not(.admin):not(.portal):has(.aboutpage) {
  background: radial-gradient(900px 480px at 88% -140px, rgba(45,212,191,.18), transparent 65%),
              radial-gradient(700px 420px at -8% 4%, rgba(8,145,178,.08), transparent 60%), #f5f8f9;
  background-repeat: no-repeat;
}
.aboutpage h1, .aboutpage h2, .aboutpage h3, .aboutpage h4 { margin: 0; }
.aboutpage .accent { background: linear-gradient(92deg, #0d9488, #0891b2 60%, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.aboutpage .kicker { font-size: .8rem; font-weight: 700; color: #0d9488; margin: 0 0 10px; letter-spacing: .3px; text-transform: none; }
.aboutpage .btn { display: inline-block; border: 0; border-radius: 12px; padding: 10px 18px; font: 600 .95rem/1.3 inherit; font-family: inherit; color: #fff; cursor: pointer; text-align: center;
  background: linear-gradient(135deg, #10a592, #0f766e); box-shadow: 0 10px 22px -12px rgba(15,118,110,.7); transition: transform .18s, box-shadow .18s; }
.aboutpage .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 26px -14px rgba(15,118,110,.8); }
.aboutpage .btn.lg { padding: 13px 26px; font-size: 1rem; }
.aboutpage .btn.sm { padding: 8px 14px; font-size: .85rem; border-radius: 10px; }
.aboutpage .btn.ghost { background: #fff; color: #0f766e; border: 1px solid rgba(15,118,110,.4); box-shadow: none; }
.aboutpage .btn.ghost:hover { border-color: #0d9488; }
.aboutpage .btn:focus-visible, .aboutpage a:focus-visible { outline: 3px solid rgba(13,148,136,.45); outline-offset: 3px; border-radius: 12px; }
.aboutpage .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* --- hero --- */
.aboutpage .abohead { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 72px 0 16px; max-width: 1040px; margin: 0 auto; overflow: clip; }
.aboutpage .abohead::before { content: ''; position: absolute; z-index: -1; inset: 0 -140px -20px; background-image: radial-gradient(circle, rgba(13,148,136,.2) 1.2px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 10%, transparent 75%); }
.aboutpage .abohead .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid rgba(13,148,136,.28); box-shadow: 0 6px 18px -10px rgba(13,148,136,.5); }
.aboutpage .abohead .kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.aboutpage .abohead h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin: .4em 0; }
.aboutpage .abohead .lead { color: #46596a; font-size: 1.1rem; line-height: 1.75; max-width: 540px; margin: 0 0 26px; }
.aboutpage .trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; color: #33475a; font-size: .9rem; font-weight: 600; }
.aboutpage .trust li::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #ecfdf9; border: 1px solid #bfeadf; color: #0f766e; font-size: .7rem; font-weight: 800; }
.aboutpage .herocard { position: relative; background: #fff; border: 1px solid #e4eaee; border-radius: 26px; padding: 28px 26px 24px; overflow: hidden;
  box-shadow: 0 30px 56px -34px rgba(15,118,110,.55), 0 1px 2px rgba(15,23,42,.05); }
.aboutpage .herocard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #0d9488, #67e8f9); }
.aboutpage .herocard h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 4px; }
.aboutpage .herocard > p { margin: 0 0 16px; color: #64748b; font-size: .88rem; }
.aboutpage .hstep { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.aboutpage .hstep:not(:last-of-type)::after { content: ''; position: absolute; left: 21px; top: 62px; bottom: -16px; width: 2px; background: linear-gradient(#bfeadf, transparent); }
.aboutpage .hstep i { position: relative; z-index: 1; font-style: normal; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem;
  background: linear-gradient(145deg, #ecfdf9, #d3f4ec); border: 1px solid #bfeadf; box-shadow: 0 8px 16px -10px rgba(13,148,136,.6); }
.aboutpage .hstep b { display: block; font-size: .96rem; }
.aboutpage .hstep span { display: block; color: #64748b; font-size: .86rem; line-height: 1.5; }
/* --- CMS article --- */
.aboutpage .docpage { background: #fff; border: 1px solid #e4eaee; border-left: 5px solid #0d9488; border-radius: 8px 22px 22px 8px; padding: 18px 34px 24px; max-width: 840px; margin: 44px auto 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.14); }
/* --- leadership --- */
.aboutpage .leadhead { text-align: center; margin: 84px auto 0; max-width: 640px; }
.aboutpage .leadhead h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; font-weight: 800; }
.aboutpage .leadhead h2::after { content: ''; display: block; width: 52px; height: 4px; border-radius: 4px; margin: 12px auto 0; background: linear-gradient(90deg, #0d9488, #67e8f9); }
.aboutpage .leadhead > p:last-child { margin: 10px 0 0; color: #64748b; font-size: 1rem; }
.aboutpage .fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 960px; margin: 32px auto 0; }
.aboutpage .fgrid > .fcard:only-child { grid-column: 1 / -1; width: 100%; max-width: 480px; margin: 0 auto; }
.aboutpage .fcard { display: flex; flex-direction: column; text-align: left; color: #e8f2f0; border-radius: 24px; padding: 28px; border: 1px solid rgba(45,212,191,.16); position: relative; overflow: hidden;
  background: radial-gradient(360px 200px at 100% 0, rgba(45,212,191,.16), transparent 70%), linear-gradient(160deg, #0a1720, #0d232a 58%, #0e2e2c);
  box-shadow: 0 28px 54px -30px rgba(6,26,24,.6); transition: transform .25s, border-color .25s; }
.aboutpage .fcard::after { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #2dd4bf, transparent); }
.aboutpage .fcard:hover { transform: translateY(-4px); border-color: rgba(45,212,191,.4); }
.aboutpage .fhead { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.aboutpage .fphoto { position: relative; flex: none; width: 92px; height: 92px; }
.aboutpage .fphoto img, .aboutpage .fphoto .tavatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #0d232a; box-shadow: 0 0 0 2px rgba(45,212,191,.5); }
.aboutpage .fphoto .tavatar { font-size: 2.3rem; font-weight: 800; color: #2dd4bf; background: linear-gradient(145deg, #12353f, #0a1b24); display: flex; align-items: center; justify-content: center; }
.aboutpage .fcheck { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #2dd4bf); color: #06231f; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; box-shadow: 0 0 0 3px #0d232a; }
.aboutpage .fid { min-width: 0; }
.aboutpage .fbadge { display: inline-block; font-size: .76rem; font-weight: 700; color: #eafff9; background: rgba(45,212,191,.14); border: 1px solid rgba(45,212,191,.4); padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; }
.aboutpage .fid h3 { font-size: 1.65rem; color: #fff; letter-spacing: -.03em; font-weight: 800; line-height: 1.15; }
.aboutpage .frole { color: #2dd4bf; font-weight: 600; font-size: .92rem; margin: 4px 0 0; }
.aboutpage .finfo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.aboutpage .fbio { color: #b8cdd2; font-size: .96rem; line-height: 1.75; margin: 0 0 20px; }
.aboutpage .fbio:last-child { margin-bottom: 0; }
.aboutpage .flink { margin-top: auto; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); color: #eafff9; box-shadow: none; }
.aboutpage .flink:hover { background: rgba(45,212,191,.2); border-color: rgba(45,212,191,.6); color: #fff; }
/* --- stats: one dark strip --- */
.aboutpage .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 64px auto 0; max-width: 1020px; border-radius: 24px; overflow: hidden;
  background: rgba(45,212,191,.18); border: 1px solid rgba(45,212,191,.18); box-shadow: 0 30px 56px -34px rgba(6,26,24,.6); }
.aboutpage .stats4 > div { background: linear-gradient(160deg, #0a1720, #0d2a2c); border: 0; border-radius: 0; box-shadow: none; padding: 30px 14px 26px; text-align: center; }
.aboutpage .stats4 i { font-style: normal; font-size: 1.3rem; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
  background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.3); }
.aboutpage .stats4 b { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.aboutpage .stats4 span { display: block; margin-top: 6px; color: #9fbdb9; font-size: .84rem; font-weight: 500; }
/* --- why + proof --- */
.aboutpage .whygrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; max-width: 1020px; margin: 84px auto 0; align-items: start; }
.aboutpage .whyleft h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); letter-spacing: -.03em; font-weight: 800; margin-bottom: 12px; }
.aboutpage .whyleft h2::after { content: ''; display: block; width: 52px; height: 4px; border-radius: 4px; margin: 12px 0 0; background: linear-gradient(90deg, #0d9488, #67e8f9); }
.aboutpage .whyleft > p { color: #4a5c6a; margin: 0 0 22px; line-height: 1.75; }
.aboutpage .proof { list-style: none; margin: 22px 0 0; padding: 0; background: #fff; border: 1px solid #e4eaee; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.14); }
.aboutpage .proof li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.aboutpage .proof li + li { border-top: 1px solid #e4eaee; }
.aboutpage .proof i { font-style: normal; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem;
  background: linear-gradient(145deg, #ecfdf9, #d3f4ec); border: 1px solid #bfeadf; box-shadow: 0 8px 16px -10px rgba(13,148,136,.6); }
.aboutpage .proof b { display: block; font-size: .96rem; margin-bottom: 2px; }
.aboutpage .proof span { display: block; color: #5a7183; font-size: .88rem; line-height: 1.55; }
.aboutpage .whyright { display: flex; flex-direction: column; gap: 20px; }
.aboutpage .certcard { background: linear-gradient(150deg, #ecfdf5, #d3f4ea); border: 1px solid #b4e6d3; border-radius: 22px; padding: 26px; box-shadow: 0 22px 44px -28px rgba(16,185,129,.55); }
.aboutpage .certcard > i { font-style: normal; font-size: 1.5rem; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; }
.aboutpage .certcard h3 { font-size: 1.25rem; margin: 14px 0 6px; letter-spacing: -.02em; }
.aboutpage .certcard p { color: #3f6157; font-size: .93rem; margin: 0 0 16px; line-height: 1.65; }
.aboutpage .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aboutpage .chips span { background: #fff; border: 1px solid #d0e9df; color: #134e4a; border-radius: 999px; font-size: .8rem; font-weight: 600; padding: 6px 14px; transition: background .18s, color .18s, border-color .18s; }
.aboutpage .chips span:hover { background: #0f766e; color: #fff; border-color: #0f766e; }
.aboutpage .indcard { background: #fff; border: 1px solid #e4eaee; border-radius: 22px; padding: 24px 26px; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.14); }
.aboutpage .indcard h4 { margin: 0 0 14px; font-size: 1.08rem; }
.aboutpage .ind2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aboutpage .ind2 div { color: #33475a; font-size: .9rem; font-weight: 500; background: #f6faf9; border: 1px solid #e6f0ee; border-radius: 12px; padding: 10px 12px; transition: background .18s, border-color .18s; }
.aboutpage .ind2 div:hover { background: #fff; border-color: rgba(13,148,136,.4); }
/* --- journey band --- */
.aboutpage .jtteaser { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; max-width: 1020px; margin: 84px auto 0; padding: 34px 40px; border-radius: 24px;
  background: linear-gradient(120deg, #0a1720, #103c38 90%); border: 1px solid rgba(45,212,191,.16); color: #eaf6f3; box-shadow: 0 30px 56px -32px rgba(6,26,24,.65); }
.aboutpage .jtteaser .kicker { color: #2dd4bf; }
.aboutpage .jtteaser h2 { margin: 4px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
.aboutpage .jtteaser p { margin: 0; color: #a9c4c0; font-size: .95rem; max-width: 560px; line-height: 1.7; }
.aboutpage .jtteaser .btn { background: linear-gradient(135deg, #14b8a6, #0d9488); }
/* --- last CTA (full-bleed band) --- */
.aboutpage .sec.alt.ctabox { text-align: center; margin: 84px calc(50% - 50vw) 0; padding: 72px 20px; border-top: 1px solid #d3eae6; border-bottom: 1px solid #d3eae6; border-radius: 0;
  background: radial-gradient(640px 260px at 50% 0, rgba(45,212,191,.22), transparent 70%), linear-gradient(180deg, #eefaf8, #e2f3f0); }
.aboutpage .ctabox h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.03em; font-weight: 800; margin-bottom: 10px; }
.aboutpage .ctabox h2::after { display: none; }
.aboutpage .ctabox p { color: #41586b; font-size: 1.05rem; max-width: 560px; margin: 0 auto; line-height: 1.7; }
.aboutpage .ctabox .cta { justify-content: center; margin-top: 26px; }
/* --- about: mobile --- */
@media (max-width: 900px) {
  .aboutpage .abohead { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .aboutpage .abohead::before { inset: 0 -20px; }
  .aboutpage .whygrid { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
  .aboutpage .leadhead, .aboutpage .jtteaser, .aboutpage .sec.alt.ctabox { margin-top: 60px; }
  .aboutpage .stats4 { margin-top: 48px; grid-template-columns: repeat(2, 1fr); }
  .aboutpage .hstep:not(:last-of-type)::after { top: 54px; }
}
@media (max-width: 480px) {
  .aboutpage .abohead .cta { flex-direction: column; align-items: stretch; }
  .aboutpage .trust { flex-direction: column; gap: 10px; }
  .aboutpage .ind2 { grid-template-columns: 1fr; }
  .aboutpage .stats4 { gap: 12px; }
  .aboutpage .stats4 b { font-size: 1.9rem; }
  .aboutpage .docpage { padding: 12px 20px 18px; }
  .aboutpage .jtteaser { padding: 26px 22px; }
  .aboutpage .jtteaser .btn { width: 100%; }
  .aboutpage .ctabox .cta { flex-direction: column; align-items: stretch; }
  .aboutpage .fcard { padding: 22px; }
  .aboutpage .fhead { gap: 14px; }
  .aboutpage .fphoto, .aboutpage .fphoto img, .aboutpage .fphoto .tavatar { width: 76px; height: 76px; }
}
@media (hover: none) {
  .aboutpage .fcard:hover, .aboutpage .btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aboutpage * { transition: none !important; }
}

/* ---------- careers ---------- */
body:not(.admin):not(.portal) .joblist { display: flex; flex-direction: column; gap: 18px; margin: 26px 0; }
body:not(.admin):not(.portal) .jobcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px;
  box-shadow: var(--shadow); transition: box-shadow .2s ease, border-color .2s ease;
}
body:not(.admin):not(.portal) .jobcard:hover { border-color: rgba(13, 148, 136, .35); box-shadow: 0 18px 36px -22px rgba(15, 118, 110, .4); }
body:not(.admin):not(.portal) .closedlist .jobcard { opacity: .75; }
body:not(.admin):not(.portal) .jobtop { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
body:not(.admin):not(.portal) .jobtop h3 { font-size: 1.25rem; margin: 0 0 6px; letter-spacing: -.01em; }
body:not(.admin):not(.portal) .jobmeta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
body:not(.admin):not(.portal) .jobmeta span {
  background: #f0f7f6; border: 1px solid #e0ecea; color: #33625c; border-radius: 999px;
  font-size: .78rem; font-weight: 600; padding: 3px 11px;
}
body:not(.admin):not(.portal) .jobbody { color: #44566a; font-size: .94rem; margin: 14px 0 4px; }
body:not(.admin):not(.portal) .jobreq { margin: 10px 0 4px; border-top: 1px dashed var(--line); padding-top: 10px; }
body:not(.admin):not(.portal) .jobreq summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: .9rem; }
body:not(.admin):not(.portal) .jobreq ul { margin: 10px 0 4px; padding-left: 20px; color: #4a5c6a; font-size: .9rem; }
body:not(.admin):not(.portal) .jobreq li { margin: 4px 0; }
body:not(.admin):not(.portal) .jobfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
body:not(.admin):not(.portal) .jobfoot .muted { font-size: .82rem; }

/* ---------- journey timeline (alternating left/right) ---------- */
body:not(.admin):not(.portal) .jtl { position: relative; max-width: 980px; margin: 34px auto 10px; padding: 8px 0; }
body:not(.admin):not(.portal) .jtl::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(45, 212, 191, .15), rgba(13, 148, 136, .55) 12%, rgba(13, 148, 136, .55) 88%, rgba(45, 212, 191, .15));
  border-radius: 3px;
}
body:not(.admin):not(.portal) .jitem { position: relative; width: 50%; padding: 10px 44px 26px 0; }
body:not(.admin):not(.portal) .jitem.right { margin-left: 50%; padding: 10px 0 26px 44px; }
body:not(.admin):not(.portal) .jnode {
  position: absolute; top: 18px; right: -26px; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, #0e2a33, #0d151e); border: 2px solid rgba(45, 212, 191, .55);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  box-shadow: 0 10px 22px -8px rgba(13, 148, 136, .55), 0 0 0 6px var(--bg);
}
body:not(.admin):not(.portal) .jitem.right .jnode { right: auto; left: -26px; }
body:not(.admin):not(.portal) .jcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
body:not(.admin):not(.portal) .jcard:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(15, 118, 110, .45); }
body:not(.admin):not(.portal) .jdate {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 11px; margin-bottom: 8px;
}
body:not(.admin):not(.portal) .jcard h3 { margin: 2px 0 8px; font-size: 1.12rem; letter-spacing: -.01em; }
body:not(.admin):not(.portal) .jcard p { margin: 0; color: #4a5c6a; font-size: .92rem; }
@media (max-width: 760px) {
  body:not(.admin):not(.portal) .jtl::before { left: 24px; }
  body:not(.admin):not(.portal) .jitem, body:not(.admin):not(.portal) .jitem.right { width: 100%; margin-left: 0; padding: 6px 0 22px 62px; }
  body:not(.admin):not(.portal) .jnode, body:not(.admin):not(.portal) .jitem.right .jnode { left: -2px; right: auto; width: 44px; height: 44px; font-size: 1.05rem; }
}

/* ---------- free quiz ---------- */
body:not(.admin):not(.portal) .quiznote {
  max-width: 860px; margin: -6px auto 4px; text-align: center; color: #7a5b12; font-size: .84rem;
  background: #fdf6e3; border: 1px solid #f1e4bb; border-radius: 12px; padding: 9px 14px;
}
body:not(.admin):not(.portal) .qlist { list-style: none; max-width: 860px; margin: 18px auto; padding: 0; counter-reset: qz; }
body:not(.admin):not(.portal) .qcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px;
  margin: 0 0 16px; box-shadow: var(--shadow);
}
body:not(.admin):not(.portal) .qhead { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
body:not(.admin):not(.portal) .qnum {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #0f766e, #0d9488); color: #fff; font-weight: 800; font-size: .85rem;
  box-shadow: 0 8px 16px -8px rgba(13, 148, 136, .6);
}
body:not(.admin):not(.portal) .qhead p { margin: 6px 0 0; font-size: 1.02rem; }
body:not(.admin):not(.portal) .qopt {
  display: flex; gap: 10px; align-items: center; background: #f5f9fa; border: 1.5px solid transparent;
  border-radius: 12px; padding: 11px 14px; cursor: pointer; font-size: .94rem; transition: border-color .15s ease, background .15s ease;
}
body:not(.admin):not(.portal) .qopt:hover { border-color: rgba(13, 148, 136, .4); }
body:not(.admin):not(.portal) .qopt input { width: auto; accent-color: #0d9488; }
body:not(.admin):not(.portal) .qopt:has(input:checked) { border-color: #0d9488; background: #e8f6f3; font-weight: 600; }
body:not(.admin):not(.portal) .qletter {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: #e2efec; color: #25606a;
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
}
body:not(.admin):not(.portal) .qopt:has(input:checked) .qletter { background: #0d9488; color: #fff; }
body:not(.admin):not(.portal) .quizsubmit { max-width: 860px; margin: 8px auto 26px; text-align: center; }
body:not(.admin):not(.portal) .quizsubmit .muted { margin-bottom: 12px; }
body:not(.admin):not(.portal) .scorecard { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 20px 24px; }
body:not(.admin):not(.portal) .scorecard b { font-size: 3rem; letter-spacing: -.03em; }
body:not(.admin):not(.portal) .scorecard span { color: var(--muted); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .78rem; }
body:not(.admin):not(.portal) .scorecard.high { border-color: #16a34a; background: linear-gradient(160deg, #f2fdf5, #dcfce7); }
body:not(.admin):not(.portal) .scorecard.mid { border-color: #0d9488; background: linear-gradient(160deg, #f1fbf9, #d7f2ec); }
body:not(.admin):not(.portal) .scorecard.low { border-color: #d97706; background: linear-gradient(160deg, #fffaf0, #fdeccd); }
body:not(.admin):not(.portal) .scorecard.locked { border-style: dashed; }
body:not(.admin):not(.portal) .retake { margin-top: 18px; color: var(--muted); font-size: .9rem; }
body:not(.admin):not(.portal) .quizresult { max-width: 640px; margin: 0 auto; text-align: center; }

/* ---------- verify page ---------- */
body:not(.admin):not(.portal) .vgrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; max-width: 1020px; margin: 26px auto 10px; align-items: start; }
body:not(.admin):not(.portal) .verifybox {
  display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; box-shadow: 0 14px 30px -20px rgba(16, 24, 40, .35); margin-bottom: 18px;
}
body:not(.admin):not(.portal) .verifybox input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 1rem; letter-spacing: .5px; }
body:not(.admin):not(.portal) .verifybox .btn { padding: 12px 24px; }
body:not(.admin):not(.portal) .vside { display: flex; flex-direction: column; gap: 16px; }
body:not(.admin):not(.portal) .vpanel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); }
body:not(.admin):not(.portal) .vpanel h3 { margin: 0 0 12px; font-size: 1.02rem; }
body:not(.admin):not(.portal) .vstep { display: flex; gap: 12px; margin: 0 0 12px; }
body:not(.admin):not(.portal) .vstep b {
  flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
body:not(.admin):not(.portal) .vstep span { display: block; color: #5a7183; font-size: .85rem; }
body:not(.admin):not(.portal) .vstep b + div b { font-size: .92rem; }
body:not(.admin):not(.portal) .vpanel.trust p { color: #4a5c6a; font-size: .9rem; }
body:not(.admin):not(.portal) .vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; text-align: center; }
body:not(.admin):not(.portal) .vstats div { background: #f2f8f7; border-radius: 12px; padding: 10px 6px; }
body:not(.admin):not(.portal) .vstats b { display: block; font-size: 1.25rem; color: var(--brand-dark); }
body:not(.admin):not(.portal) .vstats span { font-size: .72rem; color: #64748b; }
@media (max-width: 860px) { body:not(.admin):not(.portal) .vgrid { grid-template-columns: 1fr; } }

/* ---------- blog article ---------- */
body:not(.admin):not(.portal) .article { max-width: 820px; margin: 0 auto; }
body:not(.admin):not(.portal) .ahead { text-align: center; padding: 34px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
body:not(.admin):not(.portal) .ahead h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; margin: .4em 0; }
body:not(.admin):not(.portal) .alead { color: #4a5c6a; font-size: 1.05rem; max-width: 640px; margin: 0 auto; }
body:not(.admin):not(.portal) .ameta { display: flex; justify-content: center; gap: 16px; margin: 16px 0 22px; color: #64748b; font-size: .85rem; flex-wrap: wrap; }
body:not(.admin):not(.portal) .aprose { font-size: 1.01rem; line-height: 1.75; color: #26323e; }
body:not(.admin):not(.portal) .aprose h2 { font-size: 1.35rem; margin-top: 1.6em; letter-spacing: -.01em; }
body:not(.admin):not(.portal) .aprose h3 { font-size: 1.12rem; margin-top: 1.5em; }
body:not(.admin):not(.portal) .aprose code { background: #eef2f4; border-radius: 6px; padding: 1px 7px; font-size: .88em; }
body:not(.admin):not(.portal) .aprose pre { background: #0d161e; color: #d7e6ee; border-radius: 14px; padding: 16px 18px; overflow-x: auto; }
body:not(.admin):not(.portal) .aprose blockquote { margin: 1.2em 0; padding: 10px 20px; border-left: 3px solid #0d9488; background: #f2f8f7; border-radius: 0 12px 12px 0; }
body:not(.admin):not(.portal) .afoot { margin-top: 34px; display: grid; gap: 18px; }
body:not(.admin):not(.portal) .ashare { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; background: #f2f8f7; border: 1px solid #e0ecea; border-radius: 16px; }
body:not(.admin):not(.portal) .ashare b { font-size: .92rem; margin-right: 4px; }
body:not(.admin):not(.portal) .acta { background: linear-gradient(120deg, #0c1a24, #103c38 90%); color: #eaf6f3; border-radius: 20px; padding: 26px 30px; display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; box-shadow: 0 24px 46px -30px rgba(6, 26, 24, .6); }
body:not(.admin):not(.portal) .acta h3 { margin: 0 0 6px; font-size: 1.2rem; color: #fff; }
body:not(.admin):not(.portal) .acta p { margin: 0 0 12px; color: #a9c4c0; font-size: .92rem; max-width: 460px; }
body:not(.admin):not(.portal) .arelated { margin-top: 40px; }
body:not(.admin):not(.portal) .arelated h3 { font-size: 1.15rem; margin-bottom: 14px; }
body:not(.admin):not(.portal) .pgrid.slim { grid-template-columns: 1fr 1fr; display: grid; gap: 14px; }
body:not(.admin):not(.portal) .pgrid.slim .pcard { margin: 0; }
body:not(.admin):not(.portal) .pcard { position: relative; }
body:not(.admin):not(.portal) .pico {
  position: absolute; top: 18px; right: 20px; font-size: 1.5rem; opacity: .9;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #f0faf7, #dff2ec); border: 1px solid #cde9e1; border-radius: 14px;
  box-shadow: 0 8px 14px -8px rgba(15, 118, 110, .35);
}
body:not(.admin):not(.portal) .pcard h3 { padding-right: 56px; }
@media (max-width: 720px) { body:not(.admin):not(.portal) .pgrid.slim { grid-template-columns: 1fr; } }

/* ---------- auth: split brand shell ---------- */
body:not(.admin):not(.portal) .authwrap {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 26px; max-width: 1020px; margin: 30px auto; align-items: stretch;
}
body:not(.admin):not(.portal) .authwrap.single { grid-template-columns: 1fr; max-width: 460px; }
body:not(.admin):not(.portal) .authside {
  border-radius: 26px; padding: 34px 32px; color: #eaf6f3; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0c1a24 0%, #0d222b 55%, #0e2f2d 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 26, 24, .65); display: flex; flex-direction: column;
}
body:not(.admin):not(.portal) .authside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(480px 260px at 110% -8%, rgba(45, 212, 191, .18), transparent 60%);
}
body:not(.admin):not(.portal) .abrand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
body:not(.admin):not(.portal) .amark { height: 34px; width: auto; }
body:not(.admin):not(.portal) .authside h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.22; letter-spacing: -.02em; margin: 26px 0 22px; color: #fff; }
body:not(.admin):not(.portal) .authside h2 em { font-style: normal; color: #2dd4bf; }
body:not(.admin):not(.portal) .apoints { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body:not(.admin):not(.portal) .apoints li { display: flex; gap: 13px; align-items: flex-start; }
body:not(.admin):not(.portal) .apoints i {
  font-style: normal; flex: none; width: 42px; height: 42px; border-radius: 13px; font-size: 1.15rem;
  background: rgba(45, 212, 191, .12); border: 1px solid rgba(45, 212, 191, .3);
  display: flex; align-items: center; justify-content: center;
}
body:not(.admin):not(.portal) .apoints b { display: block; font-size: .95rem; color: #fff; }
body:not(.admin):not(.portal) .apoints span { color: #a3bfc4; font-size: .83rem; }
body:not(.admin):not(.portal) .astats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; }
body:not(.admin):not(.portal) .astats div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; text-align: center; padding: 12px 6px; }
body:not(.admin):not(.portal) .astats b { display: block; font-size: 1.3rem; color: #2dd4bf; letter-spacing: -.02em; }
body:not(.admin):not(.portal) .astats span { font-size: .72rem; color: #93b1b8; }
body:not(.admin):not(.portal) .aquote { color: #7fa3ab; font-size: .85rem; font-style: italic; margin: 18px 0 0; }
body:not(.admin):not(.portal) .authmain { display: flex; align-items: center; }
body:not(.admin):not(.portal) .authcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 34px 34px 28px;
  box-shadow: 0 24px 48px -28px rgba(16, 24, 40, .4); width: 100%; max-width: 520px; margin: 0 auto;
}
body:not(.admin):not(.portal) .authcard h1 { font-size: 1.65rem; letter-spacing: -.02em; margin: 0 0 4px; }
body:not(.admin):not(.portal) .authcard > .muted { margin: 0 0 18px; }
body:not(.admin):not(.portal) .authcard .field { margin: 0 0 14px; }
body:not(.admin):not(.portal) .authcard .field label { display: block; font-weight: 600; font-size: .84rem; color: #33475a; margin-bottom: 5px; }
body:not(.admin):not(.portal) .authcard input[type="text"], body:not(.admin):not(.portal) .authcard input[type="email"],
body:not(.admin):not(.portal) .authcard input[type="tel"], body:not(.admin):not(.portal) .authcard input[type="password"] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .98rem;
  background: #fbfdfd; transition: border-color .15s ease, box-shadow .15s ease;
}
body:not(.admin):not(.portal) .authcard input:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .12); }
body:not(.admin):not(.portal) .pwwrap { position: relative; }
body:not(.admin):not(.portal) .pwwrap input { padding-right: 46px !important; }
body:not(.admin):not(.portal) .pwtoggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none;
  font-size: 1.05rem; cursor: pointer; opacity: .55; padding: 6px 8px; border-radius: 8px;
}
body:not(.admin):not(.portal) .pwtoggle:hover { opacity: 1; background: #eef4f3; }
body:not(.admin):not(.portal) .demobox { margin-top: 16px; background: #f6fbf9; border: 1px dashed #cde9e1; border-radius: 14px; padding: 14px 16px; }
body:not(.admin):not(.portal) .demobox .cta { justify-content: flex-start; }
@media (max-width: 880px) {
  body:not(.admin):not(.portal) .authwrap { grid-template-columns: 1fr; margin: 18px auto; }
  body:not(.admin):not(.portal) .authside { order: 2; }
  body:not(.admin):not(.portal) .authmain { order: 1; }
  body:not(.admin):not(.portal) .authcard { padding: 26px 22px 22px; }
}

/* v22.1 fix: journey teaser heading was dark-on-dark inside the dark band */
body:not(.admin):not(.portal) .jtteaser h2 { color: #ffffff; }

/* v22.2 fix: vstep number badge must not style the inner title <b> */
body:not(.admin):not(.portal) .vstep > b {
  flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
body:not(.admin):not(.portal) .vstep div b { width: auto; display: block; font-size: .92rem; color: var(--ink); background: none; }
body:not(.admin):not(.portal) .vexample { background: var(--card); border: 1px dashed #c9dcda; border-radius: 18px; padding: 22px 24px; }
body:not(.admin):not(.portal) .vexample h3 { margin: 0 0 10px; font-size: 1rem; }
body:not(.admin):not(.portal) .vexample .vrow {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .88rem;
}
body:not(.admin):not(.portal) .vexample .vrow:last-child { border-bottom: none; }
body:not(.admin):not(.portal) .vexample .vrow span { color: #64748b; }
body:not(.admin):not(.portal) .vexample .vrow b { color: var(--ink); }

/* v23 — about content cards (what-we-do trio + mission/vision duo), careers resume field */
body:not(.admin):not(.portal) .docpage .wwd3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 26px; }
body:not(.admin):not(.portal) .docpage .wwd {
  background: linear-gradient(180deg, #fbfefd, #f4faf8); border: 1px solid #dcebe7; border-radius: 16px;
  padding: 20px 18px 18px; box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .25);
}
body:not(.admin):not(.portal) .docpage .wwd i {
  font-style: normal; font-size: 1.35rem; display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 13px; background: linear-gradient(135deg, #0ea5a0, #0d9488); box-shadow: 0 8px 16px -8px rgba(13, 148, 136, .55); margin-bottom: 10px;
}
body:not(.admin):not(.portal) .docpage .wwd b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
body:not(.admin):not(.portal) .docpage .wwd p { margin: 0; font-size: .9rem; }
body:not(.admin):not(.portal) .docpage .mv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 6px; }
body:not(.admin):not(.portal) .docpage .mvcard {
  background: linear-gradient(150deg, #101a2b, #16283f 60%, #123f3d); color: #e8f2f1; border-radius: 18px; padding: 22px 20px;
  border: 1px solid #1d3550; box-shadow: 0 18px 36px -22px rgba(16, 24, 40, .5); position: relative; overflow: hidden;
}
body:not(.admin):not(.portal) .docpage .mvcard::after {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, .18), transparent 70%); top: -50px; right: -40px;
}
body:not(.admin):not(.portal) .docpage .mvk {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #5eead4;
  border: 1px solid rgba(94, 234, 212, .35); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; position: relative;
}
body:not(.admin):not(.portal) .docpage .mvcard p { color: #c7d8dd; font-size: .92rem; line-height: 1.7; margin: 0; position: relative; }
@media (max-width: 860px) {
  body:not(.admin):not(.portal) .docpage .wwd3 { grid-template-columns: 1fr; }
  body:not(.admin):not(.portal) .docpage .mv2 { grid-template-columns: 1fr; }
}
body:not(.admin):not(.portal) .formcard input[type="file"] { font-size: .9rem; color: #33475a; width: 100%; }
body:not(.admin):not(.portal) .formcard input[type="file"]::file-selector-button {
  border: 1.5px solid var(--line); background: #f4f8f7; border-radius: 10px; padding: 9px 16px; margin-right: 12px;
  font-weight: 600; color: var(--ink); cursor: pointer;
}
body:not(.admin):not(.portal) .formcard input[type="file"]::file-selector-button:hover { border-color: #0d9488; color: #0d9488; }