/* VooSquare Academy: the Academy route hero, school and module pages, the lesson player, exams, certificates and /verify. */

/* ---------------- shared bits ---------------- */
.sch-ring { display: block; transform: rotate(-90deg); flex: none; }
.sch-ring .rg-t { fill: none; stroke: rgba(255,255,255,.1); }
.sch-ring .rg-v { fill: none; stroke: var(--lime); stroke-linecap: round; animation: ringin 1.2s var(--ease) both; }
@keyframes ringin { from { stroke-dashoffset: var(--c); } }
.sch-team { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(140deg, #12C784, #00774B); display: grid; place-items: center; flex: none; }
.sch-team svg { width: 20px; height: 20px; }
.sch-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 600; color: #B6C8BF; }
.sch-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin: 0 10px 2px 0; vertical-align: middle; }
.sch-meta .pill + *, .sch-meta .pill::before { display: none; }
.sch-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.sch-st .ico { width: 15px; height: 15px; }
.sch-st.ok { background: var(--tint); color: var(--deep); }
.sch-st.go { background: var(--lime); color: #14200A; }
.sch-st.wait { background: #FFF3DC; color: #8A5300; font-variant-numeric: tabular-nums; }
.sch-st.lock { background: var(--bg3); color: var(--muted); }
.sch-st .pmk { margin-right: 2px; }
.sch-gate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #E4EEE9; font-weight: 600; font-size: 14.5px; }
.sch-gate > .ico { color: var(--lime); }
.sch-gate > span { flex: 1; min-width: 200px; }
.sch-gate.rev { background: var(--danger-tint); color: var(--danger); border-color: transparent; margin: 0 0 14px; }

/* ---------------- Academy hero: the route ---------------- */
.sch-slot { margin-bottom: 16px; }
.sch-hero { position: relative; overflow: hidden; border-radius: 30px; color: #fff; padding: 30px 30px 26px; background: radial-gradient(900px 420px at 88% -10%, #1C5A3D, rgba(28,90,61,0) 60%), linear-gradient(140deg, #0F2E20, #0A1A13 72%); }
.sch-hero.sk { padding: 0; background: none; }
.sh-top { position: relative; display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.sh-intro { max-width: 640px; }
.sh-badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--lime); }
.sh-badge svg { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: linear-gradient(140deg, #12C784, #00774B); }
.sch-hero h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.02; margin-top: 14px; max-width: 18ch; }
.sch-hero .sh-intro p { color: #B6C8BF; margin-top: 12px; max-width: 54ch; font-size: 15.5px; }
.sh-stats { display: flex; gap: 22px; }
.sh-stats div { display: grid; }
.sh-stats b { font-size: 30px; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.sh-stats small { font-size: 12.5px; color: #8FA79B; font-weight: 600; margin-top: 4px; }
.sch-route { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin: 30px 0 22px; }
.sr-track { position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 37px; height: 4px; border-radius: 9px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 8px, transparent 8px 16px); }
.sr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--along) * 100%); border-radius: 9px; background: linear-gradient(90deg, #12C784, var(--lime)); box-shadow: 0 0 14px rgba(201,246,91,.45); transform-origin: left; animation: srfill 1.6s .2s var(--ease) both; }
@keyframes srfill { from { transform: scaleX(0); } }
.sr-dot { position: absolute; top: 50%; left: calc(var(--along) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(201,246,91,.18), 0 0 22px var(--lime); animation: srdot 1.6s .2s var(--ease) both, srpulse 2.4s 1.8s ease-in-out infinite; }
@keyframes srdot { from { left: 0; } }
@keyframes srpulse { 50% { box-shadow: 0 0 0 12px rgba(201,246,91,0), 0 0 22px var(--lime); } }
.sr-st { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 0 6px; border-radius: 20px; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * .12s); }
.sr-node { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #0B1D15; box-shadow: 0 0 0 6px #0D2118; transition: transform .25s var(--ease); }
.sr-st:hover .sr-node { transform: translateY(-3px); }
.sr-in { position: absolute; inset: 0; display: grid; place-items: center; }
.sr-in b { font-size: 19px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sr-in small { font-size: 11px; color: #8FA79B; }
.sr-in .ico { width: 26px; height: 26px; }
.st-done .sr-node { background: var(--lime); box-shadow: 0 0 0 6px rgba(201,246,91,.16); }
.st-done .sr-in { color: #14200A; } .st-done .sr-in .ico { stroke-width: 2.8; }
.st-done .sch-ring { opacity: 0; }
.st-later .sr-in { color: #7F968A; }
.st-later .sch-ring .rg-v { stroke: #4E6A5B; }
.st-now .sr-node { box-shadow: 0 0 0 6px rgba(201,246,91,.12); }
.sr-t { display: grid; gap: 1px; }
.sr-t small { font-size: 11.5px; color: #8FA79B; font-weight: 700; }
.sr-t b { font-size: 18px; letter-spacing: -.035em; }
.sr-t em { font-style: normal; font-size: 13px; color: #B6C8BF; }
.st-later .sr-t b { color: #C7D5CE; }
.sh-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sh-now, .sh-mini { border-radius: 20px; padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.sh-now { background: var(--lime); color: #14200A; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; transition: transform .25s var(--ease), box-shadow .25s; }
.sh-now:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(201,246,91,.6); }
.sh-now > * { grid-column: 1; }
.sh-now .sh-k { color: #3E5A12; }
.sh-now b { font-size: 19px; letter-spacing: -.035em; line-height: 1.15; }
.sh-now .sh-sub { color: #33461A; font-size: 14px; font-weight: 600; }
.sh-go { grid-column: 2 !important; grid-row: 1 / span 3; align-self: center; display: inline-flex; align-items: center; gap: 8px; background: #14200A; color: var(--lime); font-weight: 800; padding: 11px 16px; border-radius: 999px; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-go .ico { width: 16px; height: 16px; }
.sh-mini { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sh-mini b { font-size: 16px; letter-spacing: -.03em; }
.sh-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--lime); }
.sh-k .ico { width: 15px; height: 15px; }
.sh-sub { font-size: 13.5px; color: #B6C8BF; }
.sh-certs a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; padding: 3px 0; }
.sh-certs a .ico { width: 16px; height: 16px; color: var(--lime); }
.sh-certs a:hover { color: var(--lime); }

/* ---------------- school page ---------------- */
.sch-head, .mod-head { position: relative; overflow: hidden; border-radius: 30px; color: #fff; padding: 28px 30px; background: radial-gradient(800px 380px at 90% 0%, #1C5A3D, rgba(28,90,61,0) 60%), linear-gradient(140deg, #0F2E20, #0A1A13 72%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.sch-head-in, .mh-l { position: relative; min-width: 0; }
.sch-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.07); margin-bottom: 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sch-tabs::-webkit-scrollbar { display: none; }
.sch-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: #B6C8BF; white-space: nowrap; transition: background .2s, color .2s; }
.sch-tabs a span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: rgba(255,255,255,.1); }
.sch-tabs a .ico { width: 14px; height: 14px; }
.sch-tabs a:hover { color: #fff; }
.sch-tabs a.on { background: #fff; color: var(--ink); }
.sch-tabs a.on span { background: var(--lime); color: #14200A; }
.sch-head h2, .mod-head h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1; }
.sch-head p, .mh-l > p { color: #B6C8BF; margin: 12px 0 14px; max-width: 60ch; font-size: 15.5px; }
.sch-head-r, .mh-r { position: relative; display: grid; justify-items: center; gap: 14px; }
.sch-head-r > .sch-ring, .mh-r > .sch-ring { grid-area: 1 / 1; }
.sch-head-pct { grid-area: 1 / 1; align-self: center; display: grid; justify-items: center; }
.sch-head-pct b { font-size: 30px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.sch-head-pct b small { font-size: 15px; color: #8FA79B; }
.sch-head-pct b .ico { width: 34px; height: 34px; color: var(--lime); stroke-width: 2.6; }
.sch-head-pct span { font-size: 12px; color: #8FA79B; font-weight: 700; }
.sch-pace { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 14px; margin: 16px 4px 4px; max-width: 80ch; }
.sch-pace .ico { color: var(--deep); margin-top: 1px; }
.sch-mods { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; position: relative; }
.sch-mods::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 30px; width: 2px; background: var(--line2); }
.sm-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * .04s); }
.sm-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--line2); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--muted); margin-top: 16px; }
.sm-node .ico { width: 20px; height: 20px; }
.st-passed > .sm-node { background: var(--brand); border-color: var(--brand); color: #fff; }
.st-passed > .sm-node .ico { stroke-width: 2.8; }
.st-open > .sm-node { background: var(--lime); border-color: var(--lime); color: #14200A; box-shadow: 0 0 0 6px rgba(201,246,91,.3); }
.st-waiting > .sm-node { border-style: dashed; border-color: #E2B65A; color: #8A5300; }
.sm-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; min-width: 0; }
a.sm-card:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--shadow); }
.st-open > .sm-card { border-color: rgba(0,168,107,.45); box-shadow: 0 16px 36px -26px rgba(0,168,107,.7); }
.st-locked > .sm-card, .st-prereq > .sm-card, .st-premium > .sm-card { background: var(--bg2); }
.st-locked .sm-t b, .st-prereq .sm-t b { color: var(--ink2); }
.sm-t { min-width: 0; display: grid; gap: 4px; }
.sm-t small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.sm-t b { font-size: 18px; letter-spacing: -.035em; line-height: 1.2; }
.sm-t p { font-size: 14px; color: var(--muted); max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-bar { display: block; height: 5px; border-radius: 9px; background: var(--bg3); margin-top: 8px; max-width: 320px; overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--brand2), var(--brand)); }
.sm-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.st-waiting .sm-lock { color: #8A5300; }
.sm-lock .ico { width: 15px; height: 15px; }
.sm-r { display: grid; justify-items: end; gap: 6px; }
.sm-best { font-size: 12px; color: var(--muted); font-weight: 600; }
.sm-final > .sm-node { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.sm-final.st-passed > .sm-node { background: var(--lime); border-color: var(--lime); color: #14200A; }
.sm-final > .sm-card { background: linear-gradient(135deg, #F4FBE6, #fff 60%); border-color: #DCEFB4; }

/* ---------------- module page ---------------- */
.mh-l > small { font-size: 13px; color: var(--lime); font-weight: 800; }
.mh-l h2 { margin-top: 10px; }
.mh-l .btn { margin-top: 18px; max-width: 100%; }
.mh-l .btn { white-space: normal; text-align: left; }
.mod-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; margin-top: 16px; align-items: start; }
.mod-ls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ml { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * .05s); }
.ml:hover:not([aria-disabled]) { transform: translateX(4px); border-color: var(--line2); box-shadow: var(--shadow); }
.ml[aria-disabled] { cursor: not-allowed; background: var(--bg2); }
.ml.st-open { border-color: rgba(0,168,107,.5); }
.ml-n { width: 40px; height: 40px; border-radius: 13px; background: var(--bg3); display: grid; place-items: center; font-weight: 800; flex: none; color: var(--muted); }
.ml-n .ico { width: 18px; height: 18px; }
.ml.st-done .ml-n { background: var(--brand); color: #fff; } .ml.st-done .ml-n .ico { stroke-width: 2.8; }
.ml.st-open .ml-n { background: var(--lime); color: #14200A; }
.ml-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ml-t b { font-size: 16px; letter-spacing: -.025em; }
.ml-t small { color: var(--muted); font-size: 13px; font-weight: 600; }
.ml[aria-disabled] .ml-t b { color: var(--muted); }
.ml-r { flex: none; }
.mod-side { display: grid; gap: 12px; position: sticky; top: 84px; }
.mx-card { border-radius: 24px; padding: 20px; display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); }
.mx-card.st-ready { background: var(--ink); color: #fff; border-color: var(--ink); }
.mx-card.st-passed { background: var(--tint); border-color: #BFEBD7; }
.mx-card.st-cool { background: #FFF8EA; border-color: #F3DDAE; }
.mx-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--bg3); color: var(--muted); }
.mx-card.st-ready .mx-ic { background: var(--lime); color: #14200A; }
.mx-card.st-passed .mx-ic { background: var(--brand); color: #fff; }
.mx-card small { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.mx-card.st-ready small { color: var(--lime); }
.mx-card b { font-size: 20px; letter-spacing: -.04em; line-height: 1.15; }
.mx-card p { font-size: 14px; color: var(--muted); }
.mx-card.st-ready p { color: #B6C8BF; }
.mx-card p [data-until] { font-family: var(--f-m); font-weight: 700; color: #8A5300; }
.mx-card .btn { margin-top: 6px; }
.mx-att { font-size: 12.5px !important; font-weight: 600 !important; }
.mx-next { display: grid; gap: 3px; padding: 16px 18px; border-radius: 20px; border: 1.5px dashed var(--line2); transition: border-color .2s, background .2s; }
.mx-next:hover { border-color: var(--brand); background: #fff; }
.mx-next small { font-size: 12px; font-weight: 800; color: var(--muted); }
.mx-next b { font-size: 16px; letter-spacing: -.03em; }
.mx-next span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--deep); margin-top: 2px; }
.mx-next.wait span { color: #8A5300; }
.mx-next span .ico { width: 15px; height: 15px; }

/* ---------------- lesson player ---------------- */
.sch-player { padding: 12px; }
.sch-player .pl.ssp { width: min(1120px, 100%); height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; border-radius: 28px; position: relative; }
.ssp-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nline); flex: none; }
.ssp-x { width: 40px; height: 40px; border-radius: 50%; background: var(--night3); display: grid; place-items: center; flex: none; transition: background .2s; }
.ssp-x:hover { background: #22382C; }
.ssp-tt { min-width: 0; flex: 1; }
.ssp-tt b { display: block; font-size: 15.5px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssp-tt small { color: var(--muted2); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ssp-who { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--night2); border: 1px solid var(--nline); font-size: 13px; font-weight: 700; flex: none; white-space: nowrap; }
.ssp-who.sw { animation: pop .4s var(--ease); }
.ssp-who .av { width: 30px; height: 30px; border: 2px solid var(--lime); }
.ssp-who span small { display: block; font-size: 11px; color: var(--muted2); font-weight: 600; line-height: 1; }
.ssp-who > span:last-child { line-height: 1.2; }
.ssp-gl { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--nline); font-weight: 700; font-size: 13.5px; transition: background .2s; flex: none; }
.ssp-gl:hover, .ssp-gl[aria-expanded="true"] { background: var(--night3); }
.ssp-gl .ico { width: 17px; height: 17px; }
.ssp-gl i { font-style: normal; font-size: 11.5px; background: var(--lime); color: #14200A; border-radius: 999px; padding: 1px 7px; font-weight: 800; }
.ssp-bars { display: flex; gap: 4px; padding: 12px 16px 0; flex: none; }
.ssp-bars i { flex: 1; height: 4px; border-radius: 9px; background: var(--nline); overflow: hidden; position: relative; }
.ssp-bars i.q { flex: 1.6; background: #2A3C1E; }
.ssp-bars i b { position: absolute; inset: 0; width: 0; background: var(--lime); border-radius: 9px; transition: width .35s var(--ease); }
.ssp-bars i.cur { background: #3B5A2A; }
.ssp-body { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; display: flex; flex-direction: column; }
.ssp-body > * { flex: none; }
.ssp .ssp-stage { flex: 1 0 auto; margin: 14px 16px 0; min-height: 320px; padding: 26px 22px; }
.ssp .ssp-stage[data-v="walk"], .ssp .ssp-stage[data-v="lab"], .ssp .ssp-stage[data-v="map"], .ssp .ssp-stage[data-v="screen"] { padding: 26px 18px; }
.ssp-text { padding: 18px 20px 0; animation: rise .5s .1s var(--ease) both; max-width: 820px; }
.ssp-text h3 { font-size: clamp(22px, 2.8vw, 32px); margin-top: 8px; }
.ssp-text p { color: var(--ntext); font-size: 16.5px; margin-top: 8px; max-width: 68ch; line-height: 1.6; }
.ssp-more { margin-top: 14px; border: 1px solid var(--nline); border-radius: 16px; background: var(--night2); max-width: 72ch; }
.ssp-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 14.5px; color: var(--lime); }
.ssp-more summary::-webkit-details-marker { display: none; }
.ssp-more summary .ico { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.ssp-more[open] summary .ico { transform: rotate(45deg); }
.ssp-more > div { padding: 0 16px 16px; color: #D7E3DD; font-size: 15px; line-height: 1.65; animation: rise .35s var(--ease); }
.ssp-ctl { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--nline); background: var(--night); }
.ssp-ctl .cb { width: 46px; height: 46px; border-radius: 50%; background: var(--night3); border: 1px solid var(--nline); display: grid; place-items: center; transition: transform .2s var(--ease); }
.ssp-ctl .cb:hover { transform: scale(1.06); }
.ssp-ctl .cb.main { background: var(--lime); color: #14200A; border: 0; width: 52px; height: 52px; margin-left: auto; }
.ssp-ctl .cb.main.wide { width: auto; padding: 0 20px; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; border-radius: 999px; font-weight: 800; }
.ssp-text { padding-bottom: 22px; }
.ssp-ctl .cnt { font-family: var(--f-m); font-size: 13px; color: var(--muted2); }
.ssp-intro { padding: clamp(28px, 6vh, 64px) clamp(20px, 5vw, 64px) 30px; display: grid; gap: 16px; justify-items: start; animation: rise .5s var(--ease); max-width: 860px; }
.ssp-num { font-family: var(--f-s); font-style: italic; font-size: 26px; color: var(--lime); }
.ssp-intro h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1; }
.ssp-obj { width: 100%; background: var(--night2); border: 1px solid var(--nline); border-radius: 20px; padding: 18px 20px; margin-top: 6px; }
.ssp-obj h4 { font-size: 15px; color: var(--muted2); margin-bottom: 10px; letter-spacing: -.01em; }
.ssp-obj ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ssp-obj li { display: flex; gap: 10px; font-weight: 600; font-size: 15.5px; animation: rise .45s var(--ease) both; }
.ssp-obj li .ico { color: var(--lime); flex: none; margin-top: 2px; }
.ssp-ia { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ssp-ghost { background: transparent !important; color: #fff !important; border-color: var(--nline) !important; }
.ssp-hint { font-size: 13px; color: var(--muted2); }
.ssp-glossary { position: absolute; right: 12px; top: 68px; bottom: 12px; width: min(380px, calc(100% - 24px)); background: #F7FAF8; color: var(--ink); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); display: flex; flex-direction: column; z-index: 5; animation: glin .3s var(--ease); }
@keyframes glin { from { transform: translateX(20px); opacity: 0; } }
.sg-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sg-h b { font-size: 18px; letter-spacing: -.03em; }
.sg-h button { width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); display: grid; place-items: center; }
.ssp-glossary dl { margin: 0; padding: 8px 18px 18px; overflow-y: auto; display: grid; gap: 4px; }
.ssp-glossary dl > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ssp-glossary dt { font-weight: 800; font-size: 15.5px; letter-spacing: -.02em; }
.ssp-glossary dd { margin: 4px 0 0; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.ssp-recap { max-width: 860px; margin: 0 auto; padding: 26px 20px; }
.ssp-qcta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; background: var(--night2); border: 1px solid var(--nline); border-radius: 20px; padding: 16px 18px; }
.ssp-qcta b { display: block; font-size: 17px; letter-spacing: -.03em; }
.ssp-qcta span { font-size: 14px; color: var(--ntext); }

/* quiz */
.ssp-quiz { max-width: 780px; margin: 0 auto; padding: clamp(22px, 5vh, 48px) 20px 28px; display: grid; gap: 18px; animation: rise .4s var(--ease); }
.sq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sq-dots { display: flex; gap: 6px; }
.sq-dots i { width: 26px; height: 6px; border-radius: 9px; background: var(--nline); transition: background .3s; }
.sq-dots i.cur { background: #fff; } .sq-dots i.ok { background: var(--brand2); } .sq-dots i.no { background: #FF8A80; }
.sq-q { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -.035em; }
.sq-opts { display: grid; gap: 10px; }
.sq-o { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 18px; background: var(--night2); border: 1.5px solid var(--nline); text-align: left; font-weight: 600; font-size: 16px; color: #fff; transition: border-color .2s, background .2s, transform .2s var(--ease), opacity .3s; animation: rise .4s var(--ease) both; line-height: 1.4; }
.sq-o:hover:not(:disabled) { border-color: #4A6E5A; transform: translateX(4px); }
.sq-o:focus-visible { outline-color: var(--lime); }
.sq-l { width: 32px; height: 32px; border-radius: 10px; background: var(--night3); display: grid; place-items: center; font-family: var(--f-m); font-size: 13px; font-weight: 700; flex: none; transition: background .2s, color .2s; }
.sq-t { flex: 1; }
.sq-m { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.sq-m .ico { width: 22px; height: 22px; stroke-width: 2.8; animation: pop .4s var(--ease); }
.sq-o.picked { border-color: #fff; }
.sq-o.sel { border-color: var(--lime); background: rgba(201,246,91,.1); }
.sq-o.sel .sq-l { background: var(--lime); color: #14200A; }
.sq-o.right { border-color: var(--brand2); background: rgba(18,199,132,.14); }
.sq-o.right .sq-l { background: var(--brand2); color: #fff; }
.sq-o.right .sq-m { color: var(--brand2); }
.sq-o.wrong { border-color: #FF8A80; background: rgba(255,138,128,.1); animation: shake .4s; }
.sq-o.wrong .sq-l { background: #FF8A80; color: #3A0A06; }
.sq-o.wrong .sq-m { color: #FF8A80; }
.sq-o.dim { opacity: .45; }
.sq-o:disabled { cursor: default; }
.sq-o.burst::after { content: ""; position: absolute; inset: -2px; border-radius: 19px; border: 2px solid var(--brand2); animation: burst .7s var(--ease) forwards; pointer-events: none; }
@keyframes burst { to { inset: -12px; opacity: 0; } }
.sq-fb { display: grid; gap: 14px; justify-items: start; }
.sq-fb:empty { display: none; }
.sq-why { width: 100%; border-radius: 18px; padding: 14px 16px; animation: rise .4s var(--ease); }
.sq-why.ok { background: rgba(18,199,132,.12); border: 1px solid rgba(18,199,132,.35); }
.sq-why.no { background: rgba(255,138,128,.08); border: 1px solid rgba(255,138,128,.3); }
.sq-why b { font-size: 16px; }
.sq-why.ok b { color: #7DF0C0; } .sq-why.no b { color: #FFB4AD; }
.sq-why p { color: #D7E3DD; font-size: 15px; margin-top: 4px; line-height: 1.55; }
.ssp-result { max-width: 680px; margin: 0 auto; padding: clamp(26px, 6vh, 56px) 20px 30px; display: grid; justify-items: center; text-align: center; gap: 14px; animation: rise .45s var(--ease); }
.sr-score { position: relative; display: grid; place-items: center; }
.sr-score > svg { grid-area: 1 / 1; }
.sr-score > div { grid-area: 1 / 1; display: grid; justify-items: center; }
.sr-score b { font-size: 46px; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.sr-score b small { font-size: 20px; color: var(--muted2); }
.sr-score span { font-size: 13px; color: var(--muted2); font-weight: 700; margin-top: 4px; }
.ssp-result.no .sch-ring .rg-v { stroke: #FFB98E; }
.ssp-result h3 { font-size: clamp(26px, 3.4vw, 36px); }
.ssp-result > p { color: var(--ntext); max-width: 52ch; }
.sr-wrong { width: 100%; text-align: left; background: var(--night2); border: 1px solid var(--nline); border-radius: 18px; padding: 14px 16px; }
.sr-wrong h4 { font-size: 14px; color: var(--muted2); margin-bottom: 8px; }
.sr-wrong ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sr-wrong li { display: flex; gap: 8px; font-size: 14.5px; font-weight: 600; }
.sr-wrong li .ico { color: #FF8A80; flex: none; width: 18px; height: 18px; margin-top: 2px; }
.sr-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.ex-intro { max-width: 760px; }
.ex-rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.ex-rules li { display: flex; gap: 10px; font-size: 15.5px; font-weight: 600; color: #E4EEE9; }
.ex-rules .ico { color: var(--lime); flex: none; }
.ex-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-nav button { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--nline); font-family: var(--f-m); font-size: 12.5px; font-weight: 700; color: var(--muted2); transition: background .2s, border-color .2s; }
.ex-nav button.ans { background: var(--night3); color: #fff; border-color: #3A5A4A; }
.ex-nav button.cur { border-color: var(--lime); color: var(--lime); }
.ex-count { font-size: 13px; color: var(--muted2); font-weight: 600; }
.ex-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ex-ctl .btn-l, .ex-ctl .btn-g { margin-left: auto; }
.ex-ctl .btn-l + .btn-g { margin-left: 0; }
.ex-left { margin-left: auto; color: var(--muted2); font-size: 14px; font-weight: 600; }
.ex-review { width: 100%; text-align: left; background: var(--night2); border: 1px solid var(--nline); border-radius: 18px; }
.ex-review summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--lime); }
.ex-review ol { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 12px; }
.ex-review li { display: flex; gap: 10px; }
.ex-review li .ico { flex: none; margin-top: 2px; width: 18px; height: 18px; }
.ex-review li.ok .ico { color: var(--brand2); } .ex-review li.no .ico { color: #FF8A80; }
.ex-review b { display: block; font-size: 14.5px; }
.ex-review span { display: block; color: var(--lime); font-weight: 700; font-size: 14px; margin-top: 3px; }
.ex-review small { display: block; color: var(--ntext); font-size: 13.5px; margin-top: 3px; }

/* ---------------- certificate ---------------- */
.cert-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cert-stage { min-width: 0; background: radial-gradient(circle at 50% 0%, #E6F2EC, #F3F6F4 70%); border-radius: 28px; padding: clamp(14px, 3vw, 36px); border: 1px solid var(--line); }
.cert-fit { --s: 1; width: 100%; aspect-ratio: 1120 / 792; position: relative; }
.cert { position: absolute; left: 0; top: 0; width: 1120px; height: 792px; transform: scale(var(--s)); transform-origin: 0 0; display: grid; grid-template-columns: 308px 1fr; background: #fff; box-shadow: 0 40px 80px -40px rgba(10,40,28,.45), 0 2px 8px rgba(10,26,19,.06); animation: certin .8s var(--ease) both; font-family: var(--f-d); color: var(--ink); }
@keyframes certin { from { opacity: 0; transform: scale(calc(var(--s) * .97)) translateY(10px); } }
.ct-side { position: relative; background: #0A1611; color: #fff; padding: 46px 40px; display: flex; flex-direction: column; border-right: 4px solid var(--brand); background-image: linear-gradient(#13261C 1px, transparent 1px), linear-gradient(90deg, #13261C 1px, transparent 1px); background-size: 34px 34px; }
.ct-brand { display: flex; align-items: center; gap: 14px; }
.ct-brand > svg { width: 54px; height: 54px; padding: 8px; border-radius: 15px; background: linear-gradient(140deg, #12C784, #00774B); }
.ct-brand b { display: block; font-size: 25px; letter-spacing: -.04em; line-height: 1.05; }
.ct-brand b i { font-style: normal; color: var(--lime); }
.ct-brand em { display: block; font-family: var(--f-s); font-style: italic; font-size: 25px; line-height: 1; color: #fff; letter-spacing: -.01em; }
.ct-brand small { color: var(--ntext); font-size: 14px; }
.ct-site { margin-top: 6px; color: var(--ntext); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ct-route { list-style: none; margin: 96px 0 0; padding: 0; display: grid; gap: 80px; position: relative; }
.ct-route::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 36px; border-left: 3px dashed #2B4537; }
.ct-route li { position: relative; display: flex; align-items: center; gap: 16px; color: #6F8579; }
.ct-route li > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0A1611; border: 2.5px solid #2B4537; font-weight: 800; flex: none; position: relative; z-index: 1; }
.ct-route li.on > span { background: var(--lime); border-color: var(--lime); color: #0A1611; }
.ct-route li.on > span .ico { stroke-width: 3; width: 18px; height: 18px; }
.ct-route li.on + li.on::before { content: ""; position: absolute; left: 16px; bottom: 36px; height: 80px; border-left: 4px solid var(--lime); }
.ct-route b { font-size: 17px; letter-spacing: -.03em; display: grid; }
.ct-route li.on b { color: #fff; }
.ct-route small { font-size: 12px; font-weight: 500; color: inherit; opacity: .8; }
.ct-motto { margin-top: auto; font-family: var(--f-s); font-style: italic; font-size: 21px; color: var(--lime); }
.ct-main { position: relative; padding: 70px 74px 48px; display: flex; flex-direction: column; }
.ct-main::before { content: ""; position: absolute; inset: 22px 22px 22px 22px; border: 1px solid var(--line); pointer-events: none; }
.ct-label { display: inline-flex; align-items: center; gap: 14px; font-weight: 800; font-size: 16px; color: var(--deep); }
.ct-label::before { content: ""; width: 36px; height: 4px; background: var(--deep); }
.ct-main h2 { font-size: 50px; letter-spacing: -.045em; margin-top: 14px; line-height: 1.02; }
.ct-k { margin-top: 44px; color: var(--muted); font-size: 16px; }
.ct-name { font-family: var(--f-s); font-style: italic; font-size: 76px; line-height: 1.05; margin-top: 4px; letter-spacing: -.01em; padding-bottom: 10px; border-bottom: 1px solid var(--line); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-name::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 90px; height: 4px; background: var(--brand); }
.ct-what { margin-top: 20px; color: var(--ink2); font-size: 16.5px; line-height: 1.55; max-width: 56ch; }
.ct-sign { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ct-sign > div { display: grid; min-width: 260px; }
.ct-sig { font-family: var(--f-s); font-style: italic; font-size: 46px; line-height: 1; padding: 0 0 6px 4px; border-bottom: 1.2px solid var(--ink); }
.ct-sign b { font-size: 14px; margin-top: 8px; }
.ct-sign small { font-size: 12.5px; color: var(--muted); }
.ct-seal { width: 132px; height: 132px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; align-content: center; gap: 6px; position: relative; box-shadow: inset 0 0 0 9px var(--tint), inset 0 0 0 11px var(--brand); }
.ct-seal svg { width: 50px; height: 50px; padding: 8px; border-radius: 14px; background: linear-gradient(140deg, #12C784, #00774B); }
.ct-seal i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--deep); text-transform: uppercase; }
.ct-facts { display: grid; grid-template-columns: 160px 210px 1fr; gap: 10px; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ct-facts dt { font-size: 12px; color: var(--muted); }
.ct-facts dd { margin: 2px 0 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.cert-side h3 { font-size: 21px; letter-spacing: -.04em; }
.cert-side > p { font-size: 14.5px; margin-top: -6px; }
.cs-acts { display: grid; gap: 8px; }
.cs-k { display: block; font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.cs-share { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; font-weight: 700; font-size: 14.5px; text-align: left; transition: background .2s; }
.cs-li:hover { background: var(--bg2); }
.cs-li .ico { width: 18px; height: 18px; color: var(--deep); }
.cs-verify { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-verify a { font-size: 13px; color: var(--deep); word-break: break-all; font-weight: 700; }
.cs-verify small { color: var(--muted); font-size: 12.5px; }
.cs-rename { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.cs-rename:hover { color: var(--ink); }
.cs-rename .ico { width: 17px; height: 17px; }
.cs-renamed { font-size: 13px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------------- public verify page ---------------- */
.vf-body { background: radial-gradient(1000px 500px at 50% -10%, #DDF1E7, #F3F6F4 60%); min-height: 100vh; }
.vf { max-width: 640px; margin: 0 auto; padding: 40px 16px 60px; display: grid; gap: 24px; }
.vf-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.vf-brand b { font-size: 21px; letter-spacing: -.04em; }
.vf-brand b span { color: var(--brand); }
.vf-brand small { font-weight: 700; color: var(--muted); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--line2); }
.vf-lock { display: grid; line-height: 1.1; }
.vf-lock small { padding: 0; border: 0; font-weight: 600; font-size: 12.5px; margin-top: 2px; }
/* Dark variant (the one-tap switch pages, src/academy.js) */
.vf-dark { background: radial-gradient(900px 500px at 50% -10%, #173B2A, #07120D 62%); color: #E8F1EC; }
.vf-dark .vf-brand b { color: #fff; }
.vf-dark .vf-brand b span { color: var(--lime); }
.vf-dark .vf-lock small { color: #93A89D; }
.vf-dark .vf-card { background: #0E1D16; border-color: #1F3A2B; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.vf-dark .vf-card h1.vf-nf { color: #fff; }
.vf-dark .vf-note { color: #93A89D; }
.vf-dark .vf-status.ok { background: rgba(201,246,91,.12); color: var(--lime); }
.vf-dark .vf-status.no { background: rgba(255,120,100,.12); color: #FF9C8A; }
.vf-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 5vw, 42px); box-shadow: var(--shadow2); animation: rise .6s var(--ease); }
.vf-status { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; padding: 7px 14px 7px 10px; border-radius: 999px; margin-bottom: 26px; }
.vf-status.ok { background: var(--tint); color: var(--deep); }
.vf-status.no { background: var(--danger-tint); color: var(--danger); }
.vf-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(0,168,107,.18); }
.vf-status.no .vf-dot { box-shadow: 0 0 0 4px rgba(217,54,46,.15); }
.vf-k { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 18px; }
.vf-card h1 { font-family: var(--f-s); font-style: italic; font-weight: 400; font-size: clamp(40px, 8vw, 60px); letter-spacing: -.01em; line-height: 1.05; margin-top: 4px; }
.vf-card h1.vf-nf { font-family: var(--f-d); font-style: normal; font-weight: 800; font-size: 26px; letter-spacing: -.04em; line-height: 1.2; }
.vf-card h2 { font-size: clamp(22px, 4vw, 28px); margin-top: 4px; line-height: 1.15; }
.vf-card dl { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.vf-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.vf-card dt { color: var(--muted); font-size: 14px; }
.vf-card dd { margin: 0; font-weight: 700; font-size: 14.5px; text-align: right; }
.vf-note { margin-top: 20px; color: var(--muted); font-size: 13.5px; }
.vf-foot { text-align: center; color: var(--muted); font-size: 13.5px; }
.vf-foot a { color: var(--deep); font-weight: 700; }

/* ---------------- responsive ---------------- */
@media (max-width: 1060px) {
  .mod-body, .cert-page { grid-template-columns: minmax(0, 1fr); }
  .mod-side, .cert-side { position: static; }
}
@media (max-width: 720px) {
  .sch-hero { padding: 22px 18px 18px; border-radius: 24px; }
  .sh-stats { gap: 18px; }
  .sh-stats b { font-size: 24px; }
  .sch-route { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0 18px; }
  .sr-track { left: 35px; right: auto; top: 30px; bottom: 30px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 8px, transparent 8px 16px); }
  .sr-fill { width: auto; right: 0; height: calc(var(--along) * 100%); bottom: auto; transform-origin: top; animation-name: srfillv; }
  @keyframes srfillv { from { transform: scaleY(0); } }
  .sr-dot { left: 50%; top: calc(var(--along) * 100%); animation: srdotv 1.6s .2s var(--ease) both, srpulse 2.4s 1.8s ease-in-out infinite; }
  @keyframes srdotv { from { top: 0; } }
  .sr-st { grid-template-columns: 74px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 16px; padding: 0; }
  .sh-row { grid-template-columns: minmax(0, 1fr); }
  .sh-now { grid-template-columns: minmax(0, 1fr); }
  .sh-go { grid-column: 1 !important; grid-row: auto; justify-self: start; margin-top: 8px; }
  .sch-head, .mod-head { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; border-radius: 24px; }
  .mh-r { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .sch-head-r { justify-items: start; }
  .sch-head-r > .sch-ring, .mh-r > .sch-ring, .sch-head-pct { grid-area: 1 / 1; }
  .sch-head-r .sch-ring.big, .mh-r .sch-ring.big { width: 92px; height: 92px; }
  .sch-head-pct b { font-size: 22px; }
  .sch-head-r .btn { grid-area: 1 / 2; justify-self: end; }
  .sch-mods::before { left: 17px; }
  .sm-row { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .sm-node { width: 36px; height: 36px; font-size: 13.5px; }
  .sm-card { grid-template-columns: minmax(0, 1fr); padding: 15px 16px; gap: 10px; border-radius: 18px; }
  .sm-r { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
  .sm-t b { font-size: 16.5px; }
  .ml { padding: 12px; gap: 12px; }
  .ml-r { display: none; }
  .sch-player { padding: 0; }
  .sch-player .pl.ssp { height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .ssp-top { padding: 10px 12px; gap: 8px; }
  .ssp-who > span:last-child, .ssp-gl span { display: none; }
  .ssp-who { padding: 3px; }
  .ssp-gl { padding: 9px 10px; }
  .ssp-bars { padding: 10px 12px 0; gap: 3px; }
  .ssp .ssp-stage { margin: 10px 10px 0; padding: 22px 12px; min-height: 280px; border-radius: 20px; }
  .ssp .ssp-stage[data-v="walk"], .ssp .ssp-stage[data-v="lab"], .ssp .ssp-stage[data-v="map"], .ssp .ssp-stage[data-v="screen"] { padding: 18px 10px; }
  .ssp-text { padding: 16px 16px 0; }
  .ssp-text p { font-size: 16px; }
  .ssp-ctl { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .ssp-glossary { top: 60px; right: 8px; left: 8px; width: auto; bottom: 8px; }
  .ssp-quiz { padding: 22px 16px 28px; }
  .sq-o { padding: 13px 14px; font-size: 15px; }
  .ex-ctl .btn { flex: 1; }
  .cert-stage { border-radius: 20px; padding: 10px; }
  .vf { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-ring .rg-v, .sr-fill, .sr-dot, .sr-st, .sm-row, .ml, .cert { animation: none !important; }
}

/* =====================================================================
 * v3: student card, enrolment, verticals, tips entry, partners
 * ===================================================================== */
/* student card (CR80 proportions, sizes follow the card's own width) */
.idc { --acc: var(--lime); position: relative; width: 100%; max-width: 440px; aspect-ratio: 85.6 / 54; perspective: 1100px; container-type: inline-size; }
.idc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s var(--ease); }
.idc-front, .idc-back { position: absolute; inset: 0; border-radius: 6cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.idc-front { color: #fff; padding: 5cqw 5.4cqw 5.6cqw; display: grid; grid-template-rows: auto 1fr auto; background: linear-gradient(140deg, #14352A, #0A1611 55%, #0D2219); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -34px rgba(0,0,0,.75); border-bottom: 1.4cqw solid var(--acc); text-align: left; }
.idc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(201,246,91,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(201,246,91,.05) 1px, transparent 1px); background-size: 5.2cqw 5.2cqw; pointer-events: none; }
.idc-holo { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 28%, rgba(201,246,91,.16) 40%, rgba(120,200,255,.16) 48%, rgba(255,140,200,.13) 56%, transparent 68%); background-size: 240% 240%; background-position: var(--mx, 25%) var(--my, 25%); mix-blend-mode: screen; animation: holo 9s ease-in-out infinite alternate; }
.idc.prem .idc-holo { background-image: linear-gradient(115deg, transparent 22%, rgba(201,246,91,.28) 38%, rgba(120,200,255,.26) 47%, rgba(255,140,200,.22) 56%, rgba(255,230,140,.18) 62%, transparent 72%); }
@keyframes holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.idc-top, .idc-mid, .idc-bot { position: relative; }
.idc-top { display: flex; align-items: center; justify-content: space-between; }
.idc-brand { display: inline-flex; align-items: center; gap: 2.4cqw; font-size: 4cqw; }
.idc-lock { display: grid; line-height: 1; }
.idc-lock b { font-size: 3.9cqw; letter-spacing: -.035em; }
.idc-lock em { font-family: var(--f-s); font-style: italic; font-size: 3.6cqw; color: var(--acc); letter-spacing: 0; margin-top: .4cqw; }
.idc-brand svg { width: 7.4cqw; height: 7.4cqw; padding: 1.3cqw; border-radius: 2cqw; background: linear-gradient(140deg, #12C784, #00774B); }
.idc-kind { display: inline-flex; align-items: center; gap: 2cqw; font-size: 2.9cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.idc-kind .pmk { transform: scale(.8); }
.idc-mid { display: flex; align-items: center; gap: 4.5cqw; }
.idc-face { width: 22cqw; height: 22cqw; border-radius: 5.5cqw; overflow: hidden; flex: none; background: #E7F8F0; box-shadow: 0 0 0 .8cqw var(--acc); }
.idc-face svg { width: 100%; height: 100%; display: block; }
.idc-who { display: grid; min-width: 0; }
.idc-who small, .idc-bot small { font-size: 2.5cqw; color: #8FA79B; font-weight: 600; }
.idc-name { font-size: 6cqw; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1.6cqw; }
.idc-num { font-family: var(--f-m); font-size: 4.2cqw; color: var(--acc); letter-spacing: .02em; font-weight: 700; }
.idc-bot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3cqw; }
.idc-bot div { display: grid; min-width: 0; }
.idc-bot b { font-size: 3.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-bars { position: absolute; right: 5.4cqw; top: 21%; width: 24cqw; height: 5cqw; fill: rgba(255,255,255,.4); }
.idc-back { transform: rotateY(180deg); background: linear-gradient(140deg, #0D2219, #0A1611); display: grid; place-items: center; align-content: center; gap: 3cqw; color: #fff; }
.idc-back svg { width: 20cqw; height: 20cqw; padding: 3cqw; border-radius: 5cqw; background: linear-gradient(140deg, #12C784, #00774B); position: relative; }
.idc-back b { font-size: 4.5cqw; position: relative; }
.idc-back .serif { color: var(--lime); }
.idc.enter .idc-in { animation: idcin 1.35s cubic-bezier(.2,.75,.2,1) both; }
@keyframes idcin { 0% { transform: translateY(50px) rotateY(180deg) rotateX(12deg) scale(.82); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.idc.enter .idc-holo { animation: holosweep 1.8s 1s ease-out both, holo 9s 2.8s ease-in-out infinite alternate; }
@keyframes holosweep { from { background-position: 100% 100%; opacity: 1; } to { background-position: 0% 0%; } }
@media (prefers-reduced-motion: reduce) { .idc.enter .idc-in, .idc-holo, .idc.enter .idc-holo { animation: none !important; } .idc-in { transition: none; } }

/* enrolment moment */
.am.am-enr { width: min(600px, 100%); background: radial-gradient(500px 300px at 50% 0%, #1C5A3D, rgba(28,90,61,0)), #0A1611; color: #fff; border: 1px solid var(--nline); }
.enr { position: relative; padding: 30px 28px 26px; display: grid; justify-items: center; text-align: center; gap: 10px; }
.enr-x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: var(--night3); display: grid; place-items: center; color: #fff; }
.enr-k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--lime); }
.enr-k .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.enr h3 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.045em; }
.enr p { color: #B6C8BF; max-width: 46ch; font-size: 15px; }
.enr-stage { width: 100%; display: grid; place-items: center; padding: 18px 0 8px; }
.enr-stage .idc { max-width: 420px; }
.enr-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.enr-w { background: transparent !important; color: #fff !important; border-color: var(--nline) !important; }

/* school page with a card */
.sch-head.vert { background: radial-gradient(700px 360px at 92% 0%, color-mix(in srgb, var(--acc) 38%, transparent), transparent 62%), linear-gradient(140deg, #0F2E20, #0A1A13 72%); }
.sch-vk { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--acc, var(--lime)); margin-bottom: 14px; }
.sch-vk .ico { width: 18px; height: 18px; }
.sch-head-r { min-width: 0; }
.sch-ringw { display: grid; justify-items: center; }
.sch-ringw > * { grid-area: 1 / 1; }
.idc-mini { display: block; width: 320px; max-width: 100%; border-radius: 6%; transition: transform .25s var(--ease); }
.idc-mini .idc { max-width: none; }
.idc-mini:hover { transform: translateY(-3px); }
.sch-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.sch-cta:empty { display: none; }
.sch-cta-n { font-size: 13px; color: #8FA79B; font-weight: 600; }
.sch-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 4px 0; font-size: 13.5px; color: var(--muted); }
.sch-prog b { color: var(--ink); font-variant-numeric: tabular-nums; }
.spb { flex: 1 1 200px; height: 8px; border-radius: 9px; background: var(--bg3); overflow: hidden; }
.spb i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--brand2), var(--brand)); transform-origin: left; animation: srfill 1.2s var(--ease) both; }
.st-enroll > .sm-card { background: var(--bg2); }
.sch-gate.vpick { background: rgba(201,246,91,.1); border-color: rgba(201,246,91,.35); }
.sch-gate > svg.ico { color: var(--lime); }

/* vertical schools on the school home */
.vsec { margin-top: 26px; }
.vsec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 4px 14px; }
.vsec-h h2 { font-size: clamp(24px, 2.8vw, 32px); display: inline-flex; align-items: center; gap: 10px; }
.vsec-h p { color: var(--muted); max-width: 62ch; margin-top: 6px; font-size: 15px; }
.vsec-h .btn .ico { width: 18px; height: 18px; }
.vsec-up { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: #E4EEE9; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.vsec-up .ico { color: var(--lime); flex: none; }
.vk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vk { --acc: #00A86B; position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .06s); }
.vk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acc); }
.vk:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--acc) 70%, #0A1611); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); }
.vk-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc); }
.vk-ic .ico { width: 24px; height: 24px; stroke-width: 2; }
.vk b { font-size: 19px; letter-spacing: -.035em; }
.vk p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.vk-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink2); margin-top: 4px; }
.vk-st .ico { width: 15px; height: 15px; }
.vk-bar { height: 5px; border-radius: 9px; background: var(--bg3); overflow: hidden; }
.vk-bar i { display: block; height: 100%; background: var(--acc); border-radius: 9px; }
.vk.lock { background: var(--bg2); }
.vk.lock .vk-ic { filter: grayscale(.6); opacity: .8; }
.vk-tag { position: absolute; right: 16px; top: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: #14200A; }
.vk-tag .ico { width: 13px; height: 13px; }
.vk.big { grid-column: span 2; grid-row: span 2; padding: 28px; color: #fff; border: 0; background: radial-gradient(500px 300px at 90% 0%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 65%), linear-gradient(140deg, #0F2E20, #0A1611 70%); align-content: end; min-height: 260px; }
.vk.big::before { display: none; }
.vk.big .vk-ic { width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--acc) 30%, transparent); color: #fff; margin-bottom: auto; }
.vk.big .vk-ic .ico { width: 30px; height: 30px; }
.vk.big b { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.045em; }
.vk.big p { color: #B6C8BF; font-size: 15px; max-width: 52ch; }
.vk.big .vk-st { color: var(--lime); }
.vk.big .vk-bar { background: rgba(255,255,255,.12); }

/* choose your vertical */
.am.am-vt { width: min(880px, 100%); }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.vt { --acc: #00A86B; position: relative; display: grid; gap: 6px; align-content: start; text-align: left; padding: 18px; border-radius: 20px; border: 2px solid var(--line); background: #fff; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; animation: vtin .55s var(--ease) both; animation-delay: calc(var(--i) * .07s); }
@keyframes vtin { from { opacity: 0; transform: translateY(18px) rotateX(18deg); } }
.vt:hover:not(:disabled) { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--acc) 80%, #000); }
.vt:disabled { cursor: default; opacity: .78; }
.vt .vk-ic, .vt-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc); }
.vt-ic .ico { width: 22px; height: 22px; stroke-width: 2; }
.vt b { font-size: 17px; letter-spacing: -.03em; }
.vt small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.vt-ok { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1); }
.vt-ok .ico { width: 16px; height: 16px; stroke-width: 3; }
.vt.on { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.vt.on .vt-ok { transform: scale(1); }
.vt-lock { position: absolute; right: 14px; top: 14px; color: var(--muted2); }
.vt-note { font-size: 13px; color: var(--muted); margin: 14px 2px 4px; }

/* the way into the tips */
.tips-entry { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 16px 20px; border-radius: 22px; border: 1px dashed var(--line2); background: #fff; transition: border-color .2s, transform .2s var(--ease); }
.tips-entry:hover { border-color: var(--brand); transform: translateY(-2px); }
.te-face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--lime); }
.te-face svg { width: 100%; height: 100%; display: block; }
.te-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.te-t small { font-size: 12.5px; font-weight: 800; color: var(--deep); }
.te-t b { font-size: 17px; letter-spacing: -.03em; }
.te-t span { font-size: 14px; color: var(--muted); }
.te-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); flex: none; }
.tips-link { color: var(--lime); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* partners on a vertical school page */
.pc-sec { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pcard { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); transition: transform .2s var(--ease), border-color .2s; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * .05s); }
.pcard:hover { transform: translateY(-3px); border-color: var(--line2); background: #fff; }
.pc-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-h img, .pc-ini { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; }
.pc-ini { display: grid; place-items: center; background: var(--ink); color: var(--lime); font-weight: 800; }
.pc-h b { font-size: 16px; letter-spacing: -.03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: #14200A; white-space: nowrap; }
.pcard p { font-size: 13.5px; color: var(--muted); }
.pcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pcard li { display: flex; gap: 6px; font-size: 13px; font-weight: 600; }
.pcard li .ico { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 2px; }
.pc-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--deep); }
.pc-cta .ico { width: 15px; height: 15px; }
.pc-empty { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line2); color: var(--muted); font-size: 14px; font-weight: 600; }

@media (max-width: 1060px) {
  .vk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk.big { grid-row: auto; }
}
@media (max-width: 720px) {
  .vk-grid { grid-template-columns: minmax(0, 1fr); }
  .vk.big { grid-column: auto; min-height: 220px; padding: 22px; }
  .idc-mini { width: 100%; }
  .sch-head-r .idc-mini { grid-area: auto; }
  .enr { padding: 26px 16px 20px; }
  .tips-entry { padding: 14px; gap: 12px; }
  .te-face { width: 44px; height: 44px; }
}
.vsec-pm { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: 0; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--ink); color: #fff; vertical-align: middle; }
.vsec-pm.vsec-free { background: #00A86B; padding: 6px 12px; }
.vk-art { position: absolute; right: -30px; top: -40px; width: 300px; height: 300px; color: var(--acc); opacity: .16; pointer-events: none; animation: vkart 14s ease-in-out infinite alternate; }
.vk-art .ico { width: 100%; height: 100%; stroke-width: 1.1; }
@keyframes vkart { to { transform: translate(-16px, 12px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .vk-art { animation: none; } }
.pc-h { flex-wrap: wrap; } .pc-h b { white-space: normal; flex: 1 1 120px; }
.sr-wrong li a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Phone touch targets (QA-25) */
@media (max-width: 640px) {
  .ssp-x { width: 44px; height: 44px; }
  .ssp-gl { min-height: 44px; }
  .ssp .cb { min-width: 44px; min-height: 44px; }
  .ex-nav button { width: 44px; height: 44px; }
}

/* Phone text floor (QA-24): nothing under 12px on phones. Generated from the rules above; keep it last. */
@media (max-width: 640px) {
  .sr-in small,
  .sr-t small,
  .sch-tabs a span,
  .ssp-who span small,
  .ssp-gl i,
  .ct-seal i,
  .vk-tag,
  .pc-badge { font-size: 12px; }
}

/* Lesson cold open (app-school.js coldOpen): scene, kicker, the title word by word, objectives ticking in. ~3 s.
 * .co-run plays it; .co-run-mod adds the module card first (first lesson of a module); without .co-run it is static. */
.ssp-intro.co { position: relative; animation: none; max-width: 1080px; width: 100%; align-items: start; }
.co-txt { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.co-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: -6px; }
.co-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(201,246,91,.14); }
.co-title { text-wrap: balance; }
.co-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.co-w > span { display: inline-block; }
.co-tk { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lime); color: #14200A; margin-top: 1px; }
.co-tk .ico { width: 13px; height: 13px; stroke-width: 3.2; }
.ssp-obj li .co-tk .ico { color: #14200A; margin-top: 0; }
.co-art { width: 100%; min-height: 0; padding: 6px; border-radius: 26px; border: 1px solid var(--nline); }
.co-art .la-art .la-svg { width: 100%; max-height: 300px; }
.co-mod { display: none; }
@media (min-width: 900px) {
  .ssp-intro.co.co-has-art { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 40px; }
  .co-has-art .co-art { grid-column: 2; grid-row: 1; position: sticky; top: 0; margin-top: 8px; }
  .co-has-art .co-txt { grid-column: 1; grid-row: 1; }
}
@media (max-width: 899px) {
  .ssp-intro.co { padding-top: 16px; gap: 14px; }
  .co-art { padding: 2px; border-radius: 22px; }
  .co-art .la-art .la-svg { max-height: 176px; }
  .co-txt { gap: 13px; }
}

/* the sequence */
.co { --co0: 0s; }
.co.co-run-mod { --co0: 1.55s; }
.co-run .co-art { animation: coArt .9s var(--ease) calc(var(--co0) + 0s) both; }
.co-run .co-art .la-art { animation: coScene 1.4s var(--ease) calc(var(--co0) + .1s) both; }
.co-run .co-k { animation: coUp .55s var(--ease) calc(var(--co0) + .15s) both; }
.co-run .ssp-num { animation: coUp .55s var(--ease) calc(var(--co0) + .3s) both; }
.co-run .co-w > span { animation: coWord .65s cubic-bezier(.2,.8,.2,1) calc(var(--co0) + .45s + var(--k) * .08s) both; }
.co-run .sch-meta { animation: coFade .6s ease calc(var(--co0) + 1.05s) both; }
.co-run .ssp-obj { animation: coUp .6s var(--ease) calc(var(--co0) + 1.15s) both; }
.co-run .ssp-obj li { animation: coUp .5s var(--ease) calc(var(--co0) + 1.35s + var(--k) * .32s) both; }
.co-run .ssp-obj li .co-tk { animation: coTick .45s var(--ease) calc(var(--co0) + 1.6s + var(--k) * .32s) both; }
.co-run .ssp-obj li .co-tk .ico { animation: coFade .25s ease calc(var(--co0) + 1.8s + var(--k) * .32s) both; }
.co-run .vn-listen, .co-run .vn-offline { animation: coUp .6s var(--ease) calc(var(--co0) + 2.35s) both; }
.co-run .ssp-ia { animation: coUp .6s var(--ease) calc(var(--co0) + 2.5s) both; }
.co-run .ssp-hint { animation: coFade .6s ease calc(var(--co0) + 2.65s) both; }
@keyframes coArt { from { opacity: 0; transform: translateY(10px) } }
@keyframes coScene { from { opacity: 0; transform: scale(1.06) } }
@keyframes coUp { from { opacity: 0; transform: translateY(12px) } }
@keyframes coFade { from { opacity: 0 } }
@keyframes coWord { from { transform: translateY(108%) } }
@keyframes coTick { from { background: transparent; box-shadow: inset 0 0 0 2px var(--nline); transform: scale(.85) } }

/* the module card (first lesson of a module): over the intro for ~1.6 s, then it lifts away */
.co-run-mod .co-mod { display: grid; position: absolute; inset: 0; z-index: 6; align-content: center; justify-items: start; gap: 12px; padding: clamp(24px, 6vw, 72px); background: radial-gradient(circle at 20% 30%, #163A28, var(--night) 70%); pointer-events: none; animation: coModOut .55s cubic-bezier(.6,0,.4,1) 1.35s both; }
.co-mk { font-family: var(--f-m); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); animation: coUp .5s var(--ease) .1s both; }
.co-mod b { font-size: clamp(34px, 6vw, 68px); line-height: 1; letter-spacing: -.05em; font-weight: 800; color: #fff; max-width: 16ch; animation: coUp .6s var(--ease) .25s both; }
.co-rule { display: block; width: min(320px, 60%); height: 3px; border-radius: 3px; background: var(--lime); transform-origin: left; animation: coRule .8s cubic-bezier(.6,0,.2,1) .4s both; }
@keyframes coRule { from { transform: scaleX(0) } }
@keyframes coModOut { to { opacity: 0; transform: translateY(-24px); visibility: hidden } }
@media (prefers-reduced-motion: reduce) {
  .co *, .co { animation: none !important; }
  .co-mod { display: none !important; }
}
.sh-also { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--lime); padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid rgba(201,246,91,.25); background: rgba(201,246,91,.06); transition: background .2s, border-color .2s; }
.sh-also:hover { background: rgba(201,246,91,.12); border-color: rgba(201,246,91,.5); }
.sh-also .ico { width: 15px; height: 15px; }
.sh-also .pi { width: 22px; height: 22px; }