/* TEAMIT Cambodia - public site styles */

:root {
    --accent: #343090;
    --accent-2: #5f59f7;
    --accent-soft: rgba(95, 89, 247, .1);
    --ink: #111827;
    --ink-2: #5c6b8d;
    --line: #cfcfea;
    --line-soft: #e6e6f5;
    --tint: #f0f2fb;
    --white: #fff;
    --dark: #111827;
    --success: #0f9d58;
    --danger: #d93025;
    --shadow: 0 10px 30px rgba(52, 48, 144, .08);
    --shadow-lg: 0 20px 50px rgba(52, 48, 144, .14);
    --radius: 16px;
    --radius-sm: 10px;
    /* English letters come from Inter (listed first); Khmer letters, which Inter lacks, from Kantumruy Pro. */
    --font: "Inter", "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --container: 1180px;
    --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .6em; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(30px, 4.4vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Layers like the search overlay set their own display; keep the hidden attribute in charge. */
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 860px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
    font: 600 15px/1.4 var(--font); cursor: pointer; text-align: center;
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(52, 48, 144, .25); }
.btn-primary:hover { background: var(--accent-2); color: #fff; }
.btn-outline { border-color: var(--line); color: var(--accent); background: var(--white); }
.btn-outline:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn-light { background: #fff; color: var(--accent); }
.btn-light:hover { background: var(--tint); color: var(--accent); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row-center { justify-content: center; }

/* ---------- Admin preview bar (admins only) ---------- */
.admin-bar { background: #0f1430; color: #c9cee8; font-size: 13.5px; position: relative; z-index: 45; }
.admin-bar-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.admin-bar a { color: #fff; }
.admin-bar-brand { font-weight: 700; }
.admin-bar-mode b { color: #b8b5ff; }
.admin-bar-switch { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.admin-bar-switch a { padding: 3px 12px; border-radius: 999px; color: #c9cee8; }
.admin-bar-switch a.on { background: var(--accent-2); color: #fff; }
.admin-bar-edit { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.admin-bar-edit:hover { background: var(--accent-2); color: #fff; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line-soft); box-shadow: 0 4px 20px rgba(17, 24, 39, .05); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.logo:hover { color: var(--ink); }
.logo img { max-height: 46px; width: auto; }
.logo-mark svg { width: 34px; height: 34px; color: #fff; stroke-width: 2.4; }
.logo-mark svg rect { fill: var(--accent); stroke: none; }
.logo-text { font-size: 22px; letter-spacing: .5px; line-height: 1; }
.logo-text span { font-weight: 500; color: var(--accent-2); margin-left: 6px; }
.logo-light, .logo-light:hover { color: #fff; }
.logo-light .logo-text span { color: #b9b6ff; }

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.nav-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px;
    color: var(--ink); font: 500 15px/1.4 var(--font); background: none; border: 0; cursor: pointer;
}
.nav-link svg { width: 16px; height: 16px; transition: transform .2s; }
.nav-link:hover, .nav-link.active { color: var(--accent-2); background: var(--accent-soft); }
.dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; list-style: none; margin: 0; padding: 8px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.dropdown a { display: block; padding: 9px 14px; border-radius: 9px; color: var(--ink); }
.dropdown a:hover, .dropdown a.active { background: var(--tint); color: var(--accent-2); }
.has-children:hover .dropdown, .has-children:focus-within .dropdown, .has-children.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.has-children.open .nav-link svg { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line-soft); background: #fff; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { color: var(--accent-2); border-color: var(--line); }
.menu-toggle { display: none; }

.mobile-menu { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .45); }
.mobile-menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #fff;
    padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
    animation: slide-in .22s ease-out;
}
@keyframes slide-in { from { transform: translateX(100%); } }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav { list-style: none; margin: 0; padding: 0; }
.mobile-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-weight: 500; }
.mobile-nav a.active { color: var(--accent-2); }
.mobile-signin { text-align: center; color: var(--ink-2); font-size: 14px; }

.search-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(17, 24, 39, .55); display: grid; place-items: start center; padding: 14vh 16px 16px; }
.search-box { display: flex; gap: 10px; align-items: center; width: min(680px, 100%); background: #fff; padding: 12px; border-radius: 18px; box-shadow: var(--shadow-lg); }
.search-box input, .search-inline input {
    flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; font: 16px var(--font); color: var(--ink);
}
.search-inline { display: flex; gap: 10px; max-width: 620px; margin-top: 20px; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-tight { padding: 48px 0; }
.section-flush-top { padding-top: 0; }
.section-tint { background: var(--tint); }
.section-dark { background: var(--dark); color: #d6dbe7; }
.section-dark h2 { color: #fff; }
.section-dark .prose { color: #c9cfdd; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head-center { flex-direction: column; align-items: center; text-align: center; }
.section-text { color: var(--ink-2); margin: 10px 0 0; max-width: 620px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-2); font-size: 14px; font-weight: 600;
}
.eyebrow a { color: inherit; }
.lead { font-size: 18px; color: var(--ink-2); }
.empty { color: var(--ink-2); text-align: center; padding: 40px 0; }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Hero */

/* Split rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.split-reverse .split-media { order: -1; }
.split-media img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-lg); }
.split-media-plain img { box-shadow: none; border-radius: 0; }
.split-copy .btn { margin-top: 12px; }
.split-form { align-items: start; }
.founder-photo img { max-height: 620px; object-fit: cover; object-position: top; }

.prose { color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.checklist svg { width: 22px; height: 22px; margin-top: 3px; color: #fff; stroke-width: 2.4; }
.checklist svg circle { fill: var(--accent-2); stroke: none; }

/* Cards */
.card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-title { font-size: 19px; margin: 0 0 8px; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent-2); }
.card-text { color: var(--ink-2); font-size: 15px; }
.card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: auto; }
.card-link svg { width: 18px; height: 18px; transition: transform .2s; }
.card-link:hover svg { transform: translateX(3px); }

.course-card { padding: 26px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.course-card:hover, .article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.course-icon { width: 52px; height: 52px; padding: 10px; border-radius: 14px; background: var(--tint); object-fit: contain; }
.course-icon-default { display: grid; place-items: center; color: var(--accent-2); }
.course-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
.course-badge svg { width: 16px; height: 16px; }

.article-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.article-thumb { display: block; aspect-ratio: 16 / 9; background: var(--tint); overflow: hidden; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.article-card:hover .article-thumb img { transform: scale(1.04); }
.thumb-placeholder { display: grid; place-items: center; height: 100%; color: var(--line); }
.thumb-placeholder svg { width: 48px; height: 48px; }
.article-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-date { font-size: 13px; font-weight: 600; color: var(--accent-2); margin-bottom: 6px; }

/* Testimonials */
.testimonial { margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.testimonial blockquote { margin: 0; color: var(--ink-2); font-size: 15px; flex: 1; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial figcaption img, .avatar-fallback { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.avatar-fallback { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.testimonial small { display: block; color: var(--ink-2); }
.stars { display: flex; gap: 2px; color: #f5a524; }
.stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.stars svg.off { color: var(--line); }

/* Partners */
.partners-title { text-align: center; font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 28px; }
.partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; }
.partners li a, .partners li > span { display: block; }
.partners img { height: 84px; width: auto; max-width: 160px; object-fit: contain; }

/* Page header */
.page-header { padding: clamp(48px, 7vw, 84px) 0; background: radial-gradient(900px 380px at 90% -20%, rgba(95, 89, 247, .16), transparent 60%), var(--tint); }
.page-header h1 { max-width: 820px; }
.page-header .lead { max-width: 760px; }

/* Course page */
.course-hero { padding: clamp(48px, 7vw, 84px) 0; background: var(--tint); }
.course-hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.label-heading { font-size: 18px; margin-top: 28px; }
.price-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: sticky; top: calc(var(--header-h) + 20px); }
.price-card .course-icon { margin-bottom: 12px; }
.price-prefix, .price-suffix { color: var(--ink-2); font-size: 15px; }
.price { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1.2; }
.price-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-2); margin: 12px 0 8px; }
.price-card .btn { margin-top: 16px; }
.featured-image { width: 100%; border-radius: var(--radius); margin-bottom: 36px; box-shadow: var(--shadow); }

/* Article */
.article-header { padding: clamp(40px, 6vw, 72px) 0 32px; }
.article-header h1 { font-size: clamp(28px, 3.8vw, 42px); }
.article-header .eyebrow time { font-weight: 500; }

/* Rich content from the editor / WordPress */
.entry { color: #2c3550; font-size: 17px; }
.entry h2, .entry h3, .entry h4 { color: var(--ink); margin-top: 1.6em; }
.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.entry li { margin-bottom: .4em; }
.entry img { border-radius: 12px; margin: 8px 0; height: auto; }
.entry figure { margin: 1.6em 0; }
.entry figure.aligncenter, .entry .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry .aligncenter img { margin-left: auto; margin-right: auto; }
.entry figcaption { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: 6px; }
.entry pre, .entry code { font-family: ui-monospace, Consolas, monospace; }
.entry pre { background: var(--dark); color: #e5e7eb; padding: 16px 18px; border-radius: 12px; overflow-x: auto; font-size: 15px; }
.entry :not(pre) > code { background: var(--accent-soft); color: var(--accent); padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.entry table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.entry .wp-block-table { overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry th { background: var(--tint); }
.entry blockquote { margin: 1.4em 0; padding: 12px 20px; border-left: 4px solid var(--accent-2); background: var(--tint); border-radius: 0 12px 12px 0; }
.entry .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.entry iframe { width: 100%; max-width: 100%; border: 0; border-radius: 12px; }
.entry .wp-block-embed__wrapper iframe { position: absolute; inset: 0; height: 100%; }

/* Lesson building blocks (Insert block menu in the admin editor) */
.entry .lead { font-size: 1.15em; color: var(--ink); }
.entry mark { background: #fff1b8; color: inherit; padding: 0 .2em; border-radius: 3px; }
.entry kbd { display: inline-block; min-width: 1.7em; padding: 0 7px; font: 600 .8em/1.75 ui-monospace, Consolas, monospace; color: var(--ink); text-align: center; white-space: nowrap; background: var(--white); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; vertical-align: .08em; }
.entry .callout { --tone: var(--accent-2); position: relative; margin: 1.5em 0; padding: 14px 18px 14px 54px; border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--tone) 7%, var(--white)); }
.entry .callout::before { content: ""; position: absolute; left: 17px; top: 16px; width: 22px; height: 22px; background: var(--tone); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.entry .callout > :last-child { margin-bottom: 0; }
.entry .callout-title, .entry .exercise-title { margin-bottom: .25em; font-weight: 700; color: var(--ink); }
.entry .callout-tip { --tone: #0f9d58; --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 2a7 7 0 0 1 4 12.7V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.3A7 7 0 0 1 12 2Zm0 2a5 5 0 0 0-2.6 9.3l.6.3V16h4v-2.4l.6-.3A5 5 0 0 0 12 4ZM9 20h6v2H9v-2Z%27/%3E%3C/svg%3E"); }
.entry .callout-note { --tone: #5f59f7; --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1 6h2v7h-2v-7Zm0-3h2v2h-2V7Z%27/%3E%3C/svg%3E"); }
.entry .callout-warning { --tone: #c77700; --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 2.5 22.5 21h-21L12 2.5Zm0 4L5 19h14L12 6.5ZM11 10h2v5h-2v-5Zm0 6h2v2h-2v-2Z%27/%3E%3C/svg%3E"); }
.entry ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
.entry ol.steps > li { counter-increment: step; position: relative; min-height: 32px; margin: 0; padding: 3px 0 16px 48px; }
.entry ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.entry ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--line-soft); }
.entry .exercise { margin: 1.6em 0; padding: 18px 22px; border: 2px dashed color-mix(in srgb, var(--accent-2) 55%, transparent); border-radius: 16px; background: var(--white); }
.entry .exercise > :last-child { margin-bottom: 0; }
.entry details { margin: 1.3em 0; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--white); overflow: hidden; }
.entry details > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 600; color: var(--ink); background: var(--tint); cursor: pointer; list-style: none; }
.entry details > summary::-webkit-details-marker { display: none; }
.entry details > summary::before { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(-45deg); transition: transform .2s; }
.entry details[open] > summary::before { transform: rotate(45deg); }
.entry details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.entry details > summary + * { margin-top: 14px; }
.entry details > :last-child { margin-bottom: 16px; }
.entry .formula { padding: 10px 16px; border-left: 4px solid #217346; border-radius: 0 10px 10px 0; background: #f2f8f4; }
.entry .formula code { padding: 0; background: none; color: #14532d; font-size: 15px; }
.entry figure.image { display: block; margin: 1.4em 0; }
.entry figure.image figcaption { margin-top: 8px; }
.entry figure.image img, .lesson-body p > img:only-child, .entry .shot-pair img { display: block; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--white); }
.entry .shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; margin: 1.2em 0 1.6em; }
.entry .shot-pair > * { margin: 0; }
.lesson-body img:not(a img) { cursor: zoom-in; }
@media (max-width: 640px) { .entry .shot-pair { grid-template-columns: 1fr; } .entry .callout { padding-left: 46px; } .entry .callout::before { left: 14px; } }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.form-card { padding: clamp(22px, 4vw, 36px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field-full { grid-column: 1 / -1; }
.field input, .field textarea {
    font: 400 16px/1.5 var(--font); color: var(--ink); padding: 12px 14px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: #fff; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px var(--accent-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 15px; }
.alert-success { background: #e7f6ee; color: #0b6b3c; }
.alert-error { background: #fdecea; color: #a52714; }
.contact-cards { display: grid; gap: 16px; }
.contact-card { display: flex; gap: 16px; padding: 22px; }
.contact-card h2 { font-size: 18px; margin-bottom: 4px; }
.contact-card p { color: var(--ink-2); font-size: 15px; margin-bottom: 6px; }
.contact-card a { font-weight: 600; word-break: break-word; }
.contact-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-2); flex: none; }

.benefits h2 { text-align: center; }
.benefits .checklist { grid-template-columns: 1fr 1fr; gap: 16px 28px; }

.coming-soon { text-align: center; min-height: 50vh; display: grid; place-items: center; }
.coming-soon img { margin: 0 auto 24px; max-height: 260px; }
.error-code { font-size: clamp(72px, 14vw, 140px); font-weight: 700; line-height: 1; color: var(--accent-soft); -webkit-text-stroke: 2px var(--accent-2); margin: 0 0 12px; }
.results-heading { font-size: 22px; margin: 12px 0 20px; }
.results-heading:not(:first-child) { margin-top: 48px; }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 12px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--ink); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .disabled { color: var(--line); }

/* ---------- Accounts, checkout, course player ---------- */
.alert-info { background: var(--accent-soft); color: var(--accent); }
.field-error { color: var(--danger); font-weight: 500; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); cursor: pointer; text-decoration: underline; }
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--accent-2); flex: none; }
.stack-form { display: grid; gap: 16px; }
.stack-form .form-grid { margin-bottom: 0; }

.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-initial { font-weight: 700; color: var(--accent); }
.account-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; padding: 8px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; z-index: 50; }
.account-pop strong { padding: 8px 12px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; font-size: 14px; }
.account-pop a, .account-pop button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--ink); background: none; border: 0; font: 15px var(--font); cursor: pointer; }
.account-pop a:hover, .account-pop button:hover { background: var(--tint); color: var(--accent-2); }

.auth-page { background: var(--tint); min-height: 70vh; }
.auth-box { max-width: 460px; margin: 0 auto; padding: clamp(24px, 5vw, 40px); }
.auth-box h1 { font-size: 28px; margin-bottom: 4px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.auth-switch { text-align: center; margin: 20px 0 0; color: var(--ink-2); font-size: 15px; }

/* Continue with Google */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 18px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: 15px; transition: background .15s, box-shadow .15s; }
.btn-google:hover { color: #1f1f1f; background: #f8f9fb; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.btn-google svg { width: 20px; height: 20px; stroke: none; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.account-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Sign-in step before buying */
.gate-steps { display: flex; justify-content: center; gap: clamp(10px, 3vw, 28px); margin: 0 0 28px; padding: 0; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.gate-steps li { display: flex; align-items: center; gap: 8px; }
.gate-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-size: 13px; }
.gate-steps li.is-current { color: var(--accent); }
.gate-steps li.is-current span { border-color: var(--accent-2); background: var(--accent-2); color: #fff; }
.gate-steps li + li::before { content: ""; width: clamp(16px, 4vw, 48px); height: 2px; background: var(--line); margin-right: 4px; }
.gate { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; }
.gate .auth-box { max-width: none; margin: 0; }
.gate-summary { padding: clamp(22px, 3vw, 30px); position: sticky; top: calc(var(--header-h) + 20px); }
.gate-summary h2 { font-size: 21px; margin-bottom: 6px; }
.gate-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin: 4px 0 14px; }
.gate-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.gate-price { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.gate-price span { font-weight: 600; color: var(--ink); }
.gate-price strong { font-size: 22px; color: var(--accent); white-space: nowrap; }
.gate-price s { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-right: 6px; }
.gate-change { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.gate-includes { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: #2c3550; }
.gate-includes li { position: relative; padding-left: 26px; }
.gate-includes li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.gate-secure { margin: 18px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: 12px; background: var(--tint); }
.auth-tabs a { padding: 10px 12px; border-radius: 9px; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.auth-tabs a[aria-selected="true"] { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } .gate-summary { position: static; order: 2; } }


.account-head { padding: 40px 0 24px; }
.account-head h1 { font-size: clamp(26px, 3.4vw, 36px); }
.account-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-soft); margin-top: 8px; overflow-x: auto; }
.account-tabs a { padding: 10px 16px; color: var(--ink-2); border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
.account-tabs a.on { color: var(--accent); border-color: var(--accent-2); }
.empty-box { text-align: center; padding: 56px 20px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }
.progress { height: 8px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.my-course .progress { margin: 6px 0 10px; }
.my-course-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.my-course.is-expired { opacity: .75; }
.table-card { overflow-x: auto; }
.simple-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.simple-table th, .simple-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.simple-table th { font-size: 13px; color: var(--ink-2); font-weight: 600; background: #fafbff; }
.simple-table tr:last-child td { border-bottom: 0; }
.simple-table small { display: block; color: var(--ink-2); font-size: 12.5px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #f0f1f5; color: #5b6177; }
.pill-paid { background: #e5f5ec; color: #0b7a45; }
.pill-pending, .pill-review { background: #fff4dc; color: #9a6200; }
.pill-failed, .pill-cancelled, .pill-refunded { background: #fdecea; color: #b42318; }

/* Course page: grouped "what you will learn" list */
.feature-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 24px; }
.feature-group { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; }
.feature-group h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; margin: 0; }
.feature-group h3 svg { width: 22px; height: 22px; margin-top: 1px; color: #fff; stroke-width: 2.4; flex: none; }
.feature-group h3 svg circle { fill: var(--accent-2); stroke: none; }
.feature-group ul { list-style: none; margin: 10px 0 0; padding: 0 0 0 32px; display: grid; gap: 6px; }
.feature-group li { position: relative; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.feature-group li::before { content: ""; position: absolute; left: -16px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.feature-group.is-single { display: flex; align-items: center; }
@media (max-width: 640px) { .feature-groups { grid-template-columns: 1fr; } }

/* Prices: plans, discounts, free */
.course-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.course-duration { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.course-duration svg { width: 16px; height: 16px; }
.price-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); }
.price-tag.is-free { padding: 3px 12px; border-radius: 999px; background: #e5f5ec; color: #0b7a45; }
.disc { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #fde8ec; color: #c22845; font-size: 12px; font-weight: 700; }
.fact-free { background: #e5f5ec !important; color: #0b7a45 !important; border-color: #c9ead7 !important; font-weight: 700; }
.price-free { color: #0b7a45; }
.plan-picker { display: grid; gap: 8px; width: 100%; margin: 4px 0 12px; }
.plan-option input { position: absolute; opacity: 0; }
.plan-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.plan-option input:checked + .plan-box { border-color: var(--accent-2); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(95, 89, 247, .14); }
.plan-option input:focus-visible + .plan-box { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.plan-period { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.plan-price { text-align: right; white-space: nowrap; }
.plan-price s { color: var(--ink-2); font-size: 13px; margin-right: 6px; }
.plan-price strong { font-size: 18px; color: var(--accent); }
.plan-until { grid-column: 1 / -1; color: #c22845; font-size: 12.5px; font-weight: 600; }
.sum-discount { color: #c22845 !important; }

/* Course page extras */
.course-facts { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.course-facts li { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-2); }
.access-note { font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }
.price-card .btn + .btn { margin-top: 8px; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 4px; width: 100%; }
.pay-badges span { font: 700 10.5px/1 var(--font); letter-spacing: .04em; padding: 5px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-2); background: #fff; }

/* Curriculum (Cisco-style module list) */
.curriculum { display: grid; gap: 12px; }
.cur-module { border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; overflow: hidden; }
.cur-module summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.cur-module summary::-webkit-details-marker { display: none; }
.cur-module[open] summary { border-bottom: 1px solid var(--line-soft); background: #fafbff; }
.cur-num { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 14px var(--font); flex: none; }
.cur-title { flex: 1; font-weight: 600; line-height: 1.35; }
.cur-title small { display: block; font-size: 12px; font-weight: 600; color: var(--accent-2); text-transform: uppercase; letter-spacing: .05em; }
.cur-count { font-size: 13px; color: var(--ink-2); }
.cur-desc { margin: 12px 18px 0; color: var(--ink-2); font-size: 14px; }
.cur-items { list-style: none; margin: 0; padding: 6px 8px 8px; }
.cur-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 15px; }
.cur-item:hover { background: var(--tint); }
.cur-item a { color: var(--ink); flex: 1; }
.cur-item > span:not(.cur-icon):not(.cur-meta) { flex: 1; color: var(--ink-2); }
.cur-item.is-current { background: var(--accent-soft); }
.cur-item.is-current a { color: var(--accent); font-weight: 600; }
.cur-icon { color: var(--ink-2); display: grid; place-items: center; }
.cur-icon svg { width: 20px; height: 20px; }
.cur-item.is-done .cur-icon { color: #0b7a45; }
.cur-item.is-done .cur-icon circle { fill: #e5f5ec; }
.cur-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cur-meta .lock { width: 16px; height: 16px; color: #a3a9bd; }
.tag { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--tint); color: var(--accent); white-space: nowrap; }
.tag-practice { background: #e7f6ee; color: #0b7a45; }
.tag-quiz { background: #eef1ff; color: #3c3dc9; }
.tag-mock { background: #fff4dc; color: #9a6200; }
.tag-final { background: #fde8ec; color: #b4233e; }
.tag-preview { background: #e8f4ff; color: #1767b0; }

/* Checkout */
.checkout h1 { margin-bottom: 28px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.checkout-main { display: grid; gap: 20px; }
.checkout-card, .checkout-summary { padding: clamp(20px, 3vw, 30px); }
.checkout-card h2, .checkout-summary h2 { font-size: 19px; margin-bottom: 18px; }
.checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; }
.checkout-summary h2 { margin-bottom: 0; }
.summary-course { display: flex; gap: 14px; align-items: center; }
.summary-course img { width: 88px; height: 60px; object-fit: cover; border-radius: 10px; }
.summary-course small { display: block; color: var(--ink-2); }
.summary-lines { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.summary-lines dt { color: var(--ink-2); }
.summary-lines dd { margin: 0; text-align: right; font-weight: 500; }
.summary-lines .total { font-size: 19px; font-weight: 700; color: var(--ink); }
.terms { font-size: 13.5px; }
.pay-options { display: grid; gap: 10px; }
.pay-option input { position: absolute; opacity: 0; }
.pay-option-box { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: .15s; }
.pay-option-box svg { width: 28px; height: 28px; color: var(--accent-2); }
.pay-option-box small { display: block; color: var(--ink-2); font-size: 13px; }
.pay-option input:checked + .pay-option-box { border-color: var(--accent-2); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(95, 89, 247, .15); }
.pay-option input:focus-visible + .pay-option-box { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.secure-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); margin: 16px 0 0; }
.secure-note svg { width: 18px; height: 18px; color: #0b7a45; margin-top: 2px; }

.redirect-page { min-height: 100vh; display: grid; place-items: center; background: var(--tint); padding: 20px; }
.redirect-card { max-width: 440px; padding: 36px; text-align: center; }
.spinner { display: inline-block; width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent-2); animation: spin 1s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.test-gateway { padding: 36px; border: 2px dashed #f0b429; }
.test-badge { display: inline-block; font: 700 12px var(--font); letter-spacing: .06em; padding: 5px 10px; border-radius: 6px; background: #fff4dc; color: #9a6200; margin-bottom: 14px; }

.receipt { padding: clamp(28px, 5vw, 48px); text-align: center; }
.receipt .summary-lines { text-align: left; margin: 24px 0; }
.receipt-icon { margin-bottom: 10px; }
.receipt-icon svg { width: 64px; height: 64px; stroke-width: 1.6; }
.receipt-ok .receipt-icon { color: #0b7a45; }
.receipt-ok .receipt-icon circle { fill: #e5f5ec; }
.receipt-bad .receipt-icon { color: var(--danger); }
.receipt-bad .receipt-icon circle { fill: #fdecea; }

/* Course player */
.page-learn .site-footer { margin-top: 0; }
.player { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); border-top: 1px solid var(--line-soft); }
.player-side { background: #fafbff; border-right: 1px solid var(--line-soft); padding: 20px 16px 40px; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; }
.player-side .curriculum { gap: 8px; }
.player-side .cur-module summary { padding: 10px 12px; }
.player-side .cur-num { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.player-side .cur-item { font-size: 14px; padding: 8px; }
.player-course { display: block; padding: 4px 6px 14px; color: var(--ink); }
.player-course small { display: block; color: var(--accent-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.player-course strong { font-size: 17px; line-height: 1.3; }
.player-progress { padding: 0 6px 16px; }
.player-progress small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.player-main { padding: clamp(20px, 4vw, 48px); max-width: 980px; width: 100%; }
.player-toggle { display: none; margin-bottom: 16px; }
.player-head { margin-bottom: 24px; }
.player-head h1 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 6px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b0f1f; margin-bottom: 28px; box-shadow: var(--shadow-lg); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-watermark { position: absolute; z-index: 2; top: 12%; left: 6%; pointer-events: none; user-select: none; font: 600 12px/1 var(--font-mono, monospace); color: rgba(255, 255, 255, .38); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); animation: wm-drift 48s ease-in-out infinite alternate; }
@keyframes wm-drift { 0% { top: 12%; left: 6%; } 25% { top: 70%; left: 58%; } 50% { top: 30%; left: 64%; } 75% { top: 78%; left: 10%; } 100% { top: 46%; left: 34%; } }
@media (prefers-reduced-motion: reduce) { .video-watermark { animation: none; top: auto; bottom: 18%; left: auto; right: 4%; } }
.lesson-body { margin-bottom: 28px; }
.lesson-body .lesson-shot { margin: 14px 0 24px; }
.lesson-body li > .lesson-shot { margin: 10px 0 16px; }
.lesson-body .lesson-shot img { display: block; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--white); cursor: zoom-in; }
.lesson-body .lesson-shot.is-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lesson-body h3 { padding-top: .2em; }
.lesson-body h3::before { content: ""; display: inline-block; width: 6px; height: .9em; margin-right: 10px; border-radius: 3px; background: var(--accent-2); vertical-align: -.08em; }
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; min-width: 540px; }
.shot-zoom { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(11, 15, 31, .86); cursor: zoom-out; }
.shot-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: var(--white); }
body.is-zoomed { overflow: hidden; }
@media (max-width: 640px) { .lesson-body .lesson-shot.is-pair { grid-template-columns: 1fr; } .shot-zoom { padding: 8px; } }
.lesson-files { padding: 20px; margin-bottom: 28px; }
.lesson-files h2 { font-size: 16px; margin-bottom: 12px; }
.file-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; color: var(--ink); }
.file-row:hover { background: var(--tint); color: var(--ink); }
.file-row > span:nth-child(2) { flex: 1; }
.file-row small { display: block; color: var(--ink-2); font-size: 13px; }
.file-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font: 700 12px var(--font); flex: none; }
.file-ico.xl { background: #e3f4ea; color: #107c41; }
.file-ico.ok { background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.lesson-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.lesson-complete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.done-badge { color: #0b7a45; font-weight: 600; }

.course-dash { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 36px; }
.dash-progress, .dash-cert { display: flex; gap: 20px; align-items: center; padding: 22px; }
.dash-progress .btn { margin-top: 10px; }
.dash-cert > svg { width: 48px; height: 48px; color: #c58a00; flex: none; }
.ring { --p: 0; width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--accent-2) calc(var(--p) * 1%), var(--tint) 0); }
.ring span { font-weight: 700; font-size: 20px; }
.ring-lg { width: 140px; height: 140px; margin: 18px auto 10px; }
.ring-lg span { font-size: 30px; }

/* Quiz intro, exam, results */
.quiz-intro { padding: clamp(22px, 4vw, 34px); margin-bottom: 28px; }
.quiz-facts { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quiz-facts li { padding: 14px; border-radius: 12px; background: var(--tint); text-align: center; }
.quiz-facts strong { display: block; font-size: 24px; color: var(--accent); }
.quiz-facts span { font-size: 13px; color: var(--ink-2); }
.quiz-note { color: var(--ink-2); }
.best-score { display: flex; align-items: center; gap: 10px; }

.page-exam .site-header { position: static; }
.exam-bar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: 0 4px 20px rgba(17, 24, 39, .06); }
.exam-bar-inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.exam-bar-inner > div { flex: 1; min-width: 0; }
.exam-bar-inner small { display: block; color: var(--ink-2); font-size: 13px; }
.exam-bar-inner strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exam-count { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.exam-timer { font: 700 20px/1 ui-monospace, Consolas, monospace; padding: 8px 12px; border-radius: 10px; background: var(--tint); color: var(--accent); }
.exam-timer.is-low { background: #fdecea; color: var(--danger); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .6; } }
.exam-body { padding-top: 28px; padding-bottom: 60px; }
.question { padding: clamp(18px, 3vw, 28px); margin: 0 0 18px; border: 1px solid var(--line-soft); }
.question legend, .q-head { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 17px; padding: 0; margin: 0 0 10px; width: 100%; }
.q-head .pill { margin-left: auto; flex: none; }
.q-num { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--accent); font-size: 14px; flex: none; }
.question.is-answered .q-num { background: var(--accent); color: #fff; }
.q-prompt { flex: 1; }
.q-image { max-height: 320px; border-radius: 10px; margin: 6px 0 12px; border: 1px solid var(--line-soft); }
.q-hint { font-size: 13px; color: var(--ink-2); margin: 0 0 12px 42px; }
.q-options { display: grid; gap: 8px; }
.q-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: .12s; }
label.q-option:hover { border-color: var(--accent-2); }
.q-option input { position: absolute; opacity: 0; }
.q-option:has(input:checked) { border-color: var(--accent-2); background: var(--accent-soft); }
.q-option:has(input:focus-visible) { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.q-mark { width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); flex: none; }
.q-option:has(input:checked) .q-mark { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.q-option small { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.q-option.is-right { border-color: #31a46a; background: #effaf3; }
.q-option.is-right .q-mark { background: #31a46a; border-color: #31a46a; color: #fff; }
.q-option.is-wrong { border-color: #e2564a; background: #fdf0ee; }
.q-option.is-wrong .q-mark { background: #e2564a; border-color: #e2564a; color: #fff; }
.q-check { margin-top: 14px; }
.q-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
.q-feedback p { margin: 6px 0 0; }
.q-feedback.is-right { background: #effaf3; color: #0b6b3c; }
.q-feedback.is-wrong { background: #fdf0ee; color: #a52714; }
.q-explain { margin: 14px 0 0; padding: 12px 14px; background: var(--tint); border-radius: 10px; font-size: 14.5px; color: var(--ink-2); }
.exam-submit { text-align: center; margin-top: 28px; }
.review.is-right { border-left: 4px solid #31a46a; }
.review.is-wrong { border-left: 4px solid #e2564a; }
.result-card { padding: clamp(26px, 5vw, 44px); text-align: center; margin-bottom: 32px; }
.result-verdict { font-size: 24px; font-weight: 700; margin: 0; }
.result-card.is-pass .result-verdict { color: #0b7a45; }
.result-card.is-fail .result-verdict { color: var(--danger); }
.result-card.is-pass .ring { background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(#31a46a calc(var(--p) * 1%), #e5f5ec 0); }
.result-card.is-fail .ring { background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(#e2564a calc(var(--p) * 1%), #fdecea 0); }

/* Certificate (prints on one landscape page) */
.cert-actions { justify-content: center; margin: 0 0 24px; }
.cert-verified { max-width: 900px; margin: 0 auto 20px; text-align: center; }
.certificate { max-width: 980px; margin: 0 auto; aspect-ratio: 1.414 / 1; background: #fff; padding: 22px; border-radius: 6px; box-shadow: var(--shadow-lg);
    background-image: linear-gradient(rgba(95, 89, 247, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 89, 247, .05) 1px, transparent 1px); background-size: 24px 24px; }
.cert-inner { height: 100%; border: 3px double var(--accent); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4% 6%; gap: 6px; }
.cert-brand { margin-bottom: 2%; }
.cert-kicker { font-size: clamp(14px, 2vw, 20px); letter-spacing: .25em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; margin: 0; }
.cert-small { margin: 8px 0 0; color: var(--ink-2); }
.cert-name { font-size: clamp(28px, 5vw, 54px); margin: 4px 0; color: var(--accent); border-bottom: 2px solid var(--line); padding: 0 24px 6px; }
.cert-course { font-size: clamp(20px, 3vw, 32px); margin: 4px 0 0; }
.cert-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin-top: auto; }
.cert-foot small { display: block; color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cert-seal svg { width: 64px; height: 64px; color: #c58a00; }
.cert-verify { font-size: 11px; color: var(--ink-2); margin: 10px 0 0; word-break: break-all; }
@media print {
    @page { size: A4 landscape; margin: 0; }
    .page-certificate .site-header, .page-certificate .site-footer, .page-certificate .cert-actions, .page-certificate .skip-link { display: none !important; }
    .page-certificate .section { padding: 0; }
    .page-certificate .certificate { box-shadow: none; max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
}

@media (max-width: 1024px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .player { grid-template-columns: 1fr; }
    .player-side { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .player-side.open { display: block; }
    .player-toggle { display: inline-flex; }
    .course-dash { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .quiz-facts { grid-template-columns: 1fr 1fr; }
    .exam-count { display: none; }
    .dash-progress { flex-direction: column; align-items: flex-start; }
    .cert-foot { flex-direction: column; gap: 10px; }
}

/* ---------- Motion (all of it is off when the visitor prefers reduced motion) ---------- */
:root { --ease-out: cubic-bezier(.2, .75, .2, 1); }

.page-header .container > *, .article-header .container > *, .course-hero-grid > * { animation: rise-in .7s var(--ease-out) both; }
.page-header .container > :nth-child(2), .article-header .container > :nth-child(2), .course-hero-grid > :nth-child(2) { animation-delay: .08s; }
.page-header .container > :nth-child(3), .article-header .container > :nth-child(3) { animation-delay: .16s; }

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes media-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes drift { to { transform: translate(-70px, 50px) scale(1.1); } }

/* Scroll reveal: site.js adds .reveal to blocks below the fold, then .is-in when they appear. */
.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* Buttons: a light sweep on hover. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* Reading progress on lessons and articles. */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Smooth page-to-page transitions (Chrome, Edge); the header stays put. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .site-header { view-transition-name: site-header; }
    ::view-transition-old(root) { animation: .22s ease-in both vt-out; }
    ::view-transition-new(root) { animation: .3s var(--ease-out) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }


/* ---------- Ad placements (only rendered when an ad unit is set up) ---------- */
.ad-slot { display: block; margin: 32px auto; text-align: center; }
.ad-slot.container { margin-top: 24px; margin-bottom: 24px; }
.ad-label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa3b8; }
/* Switched on but no ad unit yet: a tidy "ad space" box sized like the ad format. */
.ad-placeholder {
    display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 110px; padding: 16px 20px;
    border: 1.5px dashed var(--line); border-radius: 14px; color: var(--ink-2); text-align: left;
    background: repeating-linear-gradient(135deg, #fafbff 0 12px, #f4f5fc 12px 24px);
    transition: border-color .2s, color .2s;
}
.ad-placeholder:hover { border-color: var(--accent-2); color: var(--accent); }
.ad-placeholder svg { width: 34px; height: 34px; color: var(--accent-2); opacity: .7; }
.ad-placeholder strong { display: block; font-size: 15px; color: var(--ink); letter-spacing: .02em; }
.ad-placeholder small { display: block; font-size: 13.5px; }
.ad-fmt-horizontal { min-height: 96px; }
.ad-fmt-auto { min-height: 180px; }
.ad-fmt-in-article { min-height: 150px; }
.ad-fmt-rectangle { width: 336px; max-width: 100%; min-height: 280px; margin: 0 auto; flex-direction: column; text-align: center; }
/* Google found no ad to show: hide the unit and its label so no empty box is left. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #aab2c5; padding-top: 64px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
.footer-brand p { margin-top: 18px; max-width: 340px; line-height: 1.75; }
.footer-col .newsletter { margin-top: 0; }
.footer-links a { position: relative; display: inline-block; padding: 2px 0; transition: color .2s, transform .2s; }
.footer-links a::before { content: "›"; position: absolute; left: -14px; opacity: 0; color: var(--accent-2); transition: opacity .2s, left .2s; }
.footer-links a:hover { transform: translateX(6px); }
.footer-links a:hover::before { left: -12px; opacity: 1; }
.footer-links a.active { color: #fff; font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.to-top { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.to-top span { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; transition: transform .2s, border-color .2s; }
.to-top:hover span { border-color: #fff; transform: translateY(-2px); }
.newsletter { margin-top: 28px; max-width: 460px; }
.newsletter .footer-title { margin-bottom: 6px; }
.newsletter p { margin: 0 0 14px; }
.newsletter-row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.newsletter-row:focus-within { border-color: var(--accent-2); }
.newsletter-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: 0 14px; font: 15px var(--font); }
.newsletter-row input::placeholder { color: #8891a8; }
.newsletter-row input:focus { outline: none; }
.newsletter-row .btn { padding: 10px 20px; box-shadow: none; }
.newsletter-msg { margin: 10px 0 0 !important; font-size: 14px; }
.newsletter-msg.is-ok { color: #7ee2a8; }
.newsletter-msg.is-error { color: #ff9b9b; }
.footer-title { color: #fff; font-size: 16px; margin-bottom: 14px; }
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #d6dbe7; }
.site-footer a:hover { color: #fff; }
.socials { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand, var(--accent-2)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.socials a:hover { color: #fff; }
.follow-card { display: block; }
.follow-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.follow-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-soft); color: var(--ink); font-weight: 600; font-size: 14px; }
.follow-list a:hover { border-color: var(--brand); color: var(--ink); }
.follow-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; }
.follow-ico svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; padding-bottom: 24px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-hero-grid { grid-template-columns: 1fr 300px; }
}
@media (max-width: 900px) {
    .main-nav, .header-cta { display: none; }
    .menu-toggle { display: inline-grid; }
    .header-actions { margin-left: auto; }
    .split, .contact-layout, .course-hero-grid { grid-template-columns: 1fr; }
    .split-reverse .split-media { order: 0; }
    .price-card { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    :root { --header-h: 64px; }
    body { font-size: 15px; }
    .container { padding: 0 16px; }
    .grid-3, .form-grid, .benefits .checklist { grid-template-columns: 1fr; }
    .logo-text { font-size: 19px; }
    .section-head { align-items: flex-start; }
    .btn-row .btn { flex: 1 1 auto; }
    .partners img { height: 64px; }
    .footer-grid { grid-template-columns: 1fr; }
    .search-box { flex-wrap: wrap; }
    .search-box input { flex-basis: 100%; }
    .entry { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Student area: progress that moves (rings, bars, tests, results)
   Every effect animates *from* a start value, so with reduced motion (all
   animations off) the final state still shows.
   ========================================================================== */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes ring-fill { from { --p: 0; } }
@keyframes bar-grow { from { width: var(--from, 0%); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@keyframes flash { from { box-shadow: 0 0 0 0 rgba(95, 89, 247, .45); } to { box-shadow: 0 0 0 16px rgba(95, 89, 247, 0); } }
@keyframes glow { 50% { box-shadow: 0 0 0 8px rgba(95, 89, 247, .16), 0 8px 20px rgba(52, 48, 144, .25); } }
@keyframes draw { from { stroke-dashoffset: 24; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }

.motion .ring-animated { animation: ring-fill 1.3s cubic-bezier(.22, .8, .3, 1) .15s both; }
.motion .progress-animated > span { animation: bar-grow 1s cubic-bezier(.22, .8, .3, 1) .15s both; }
.is-bumping { animation: bump .35s ease; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--accent); }
.btn.is-loading { opacity: .65; pointer-events: none; }

/* Course outline: progress per module */
.cur-bar { display: block; max-width: 220px; height: 4px; margin-top: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.cur-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.motion .cur-bar span { animation: bar-grow .9s cubic-bezier(.22, .8, .3, 1) .25s both; }
.cur-module.is-complete .cur-num { background: #31a46a; }
.cur-module.is-complete .cur-num svg { width: 18px; height: 18px; stroke-width: 3; }
.cur-module.is-complete .cur-bar span { background: #31a46a; }

/* Course home */
.dash-body { flex: 1; min-width: 0; display: grid; gap: 10px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip { padding: 4px 11px; border-radius: 999px; background: var(--tint); color: var(--ink-2); font-size: 13px; }
.dash-chip b { color: var(--accent); }
.dash-cert.is-ready { background: linear-gradient(135deg, #fffaf0, #fff 70%); border-color: #f3dd9b; }
.dash-cert .is-soon { color: #b26a00; font-weight: 600; }
.next-up { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(52, 48, 144, .25); transition: transform .2s, box-shadow .2s; }
.next-up:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(52, 48, 144, .32); }
.next-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .16); }
.next-icon svg { width: 18px; height: 18px; }
.next-text { display: grid; flex: 1; min-width: 0; }
.next-text small { font-size: 12px; opacity: .8; }
.next-text strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.next-arrow { font-size: 18px; transition: transform .2s; }
.next-up:hover .next-arrow { transform: translateX(4px); }

/* "Lesson complete" toast + button */
.learn-toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); animation: toast-in .5s cubic-bezier(.34, 1.56, .64, 1) both; transition: opacity .4s, transform .4s; }
.learn-toast.is-leaving { opacity: 0; transform: translateY(12px); }
.learn-toast small { display: block; opacity: .75; font-size: 13px; }
.learn-toast-check { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #31a46a; }
.learn-toast-check svg { width: 20px; height: 20px; stroke-width: 3; stroke-dasharray: 24; animation: draw .5s .35s ease both; }
.lesson-complete .btn { transition: background .25s, box-shadow .25s; }
.lesson-complete .btn.is-completing { background: #31a46a; box-shadow: 0 8px 20px rgba(49, 164, 106, .35); pointer-events: none; }

/* My courses */
.learn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 18px 0 24px; padding: 0; list-style: none; }
.learn-stats li { padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.learn-stats strong { display: block; color: var(--accent); font-size: 26px; line-height: 1.15; }
.learn-stats span { color: var(--ink-2); font-size: 13px; }
.continue-card { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 28px; padding: 18px; }
.continue-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--tint); }
.continue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.continue-body h2 { margin: 2px 0 10px; font-size: 22px; }
.continue-body h2 a { color: var(--ink); }
.continue-body .progress { margin-bottom: 6px; }
.continue-body .next-up { max-width: 540px; margin-top: 12px; }
.continue-ring { margin-right: 10px; }
.my-course .article-thumb { position: relative; }
.my-course-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(17, 24, 39, .14); }
.my-course-badge.is-done { background: #31a46a; color: #fff; }
.my-course-badge.is-going { background: var(--accent-2); color: #fff; }
.my-course-badge.is-soon { background: #fff4dc; color: #9a6200; }
.my-course-badge.is-expired { background: #5c6b8d; color: #fff; }
.my-course-next { overflow: hidden; margin: 6px 0 0; color: var(--ink); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.my-course-next small { color: var(--ink-2); }
@media (max-width: 860px) {
    .continue-card { grid-template-columns: 1fr; }
    .continue-thumb { aspect-ratio: 16 / 9; }
    .continue-ring { display: none; }
}
@media (max-width: 640px) { .learn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tests: bar, chips, timer ring, feedback */
.exam-bar-inner { flex-wrap: nowrap; }
.exam-title { flex: 1; min-width: 0; }
.exam-bar-inner > .exam-stats { display: flex; flex: none; align-items: center; gap: 8px; }
.exam-count, .exam-score { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.exam-count { background: var(--tint); color: var(--ink-2); }
.exam-count b { color: var(--accent); font-size: 16px; }
.exam-score { background: #e7f6ee; color: #0b7a45; }
.exam-timer { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--tint); color: var(--accent); font: 700 17px/1 ui-monospace, Consolas, monospace; transition: background .3s, color .3s; }
.exam-timer svg { width: 32px; height: 32px; transform: rotate(-90deg); fill: none; stroke: currentColor; stroke-width: 3.4; }
.timer-track { opacity: .18; }
.timer-bar { stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--left, 1) * 100); transition: stroke-dashoffset .5s linear; }
.exam-timer.is-warn { background: #fff4dc; color: #b26a00; }
.exam-timer.is-low { background: #fdecea; color: var(--danger); }
.exam-progress { height: 4px; background: var(--line-soft); }
.exam-progress span { display: block; width: 0; height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--accent-2), #8b7bff); box-shadow: 0 0 12px rgba(95, 89, 247, .5); transition: width .5s cubic-bezier(.22, .8, .3, 1), background .4s; }
.exam.is-complete .exam-progress span { background: linear-gradient(90deg, #0f9d58, #31c27a); box-shadow: 0 0 12px rgba(15, 157, 88, .45); }
.exam-nav { display: flex; gap: 6px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.exam-nav::-webkit-scrollbar { display: none; }
.exam-nav a { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 700; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.exam-nav a:hover { border-color: var(--accent-2); color: var(--accent); }
.exam-nav a.is-answered { border-color: var(--accent-2); background: var(--accent-2); color: #fff; }
.exam-nav a.is-right { border-color: #31a46a; background: #31a46a; color: #fff; }
.exam-nav a.is-wrong { border-color: #e2564a; background: #e2564a; color: #fff; }
.exam-nav a.is-current { box-shadow: 0 0 0 3px rgba(95, 89, 247, .3); transform: translateY(-1px); }
.exam-keys { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; text-align: right; }
@media (hover: none) { .exam-keys { display: none; } }
.question { scroll-margin-top: 170px; transition: border-color .3s, box-shadow .3s; }
/* A fieldset draws its legend on the top border; float it so it sits inside the card. */
.question > legend { float: left; }
.question > legend + * { clear: both; }
.motion .exam .question { animation: rise-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.question.is-answered { border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line-soft)); }
.question.is-flash { animation: flash 1s ease; }
.question.is-correct { border-color: #31a46a; box-shadow: 0 0 0 4px rgba(49, 164, 106, .12); }
.question.is-incorrect { border-color: #e2564a; box-shadow: 0 0 0 4px rgba(226, 86, 74, .1); }
.question.is-shaking { animation: shake .45s ease; }
.q-hint span { color: var(--accent); font-weight: 600; }
.q-option { transition: border-color .15s, background .15s, transform .15s; }
.q-option:active { transform: scale(.99); }
.q-option.is-bumping { animation: none; }
.q-option.is-bumping .q-mark { animation: bump .35s ease; }
.q-mark { transition: background .15s, border-color .15s, color .15s; }
.q-feedback:not([hidden]) { animation: pop-in .35s ease; }
/* After "Check", right / wrong colours win over the "selected" colour. */
.q-option.is-right:has(input:checked) { border-color: #31a46a; background: #effaf3; }
.q-option.is-right:has(input:checked) .q-mark { border-color: #31a46a; background: #31a46a; color: #fff; }
.q-option.is-wrong:has(input:checked) { border-color: #e2564a; background: #fdf0ee; }
.q-option.is-wrong:has(input:checked) .q-mark { border-color: #e2564a; background: #e2564a; color: #fff; }
.question.is-celebrating .q-feedback { animation: pop-in .45s cubic-bezier(.34, 1.56, .64, 1); }
.motion .exam.is-complete .exam-submit .btn { animation: glow 2s ease-in-out infinite; }
.exam-dialog { width: min(440px, calc(100vw - 32px)); padding: 26px; border: 0; border-radius: 20px; box-shadow: var(--shadow-lg); }
.exam-dialog::backdrop { background: rgba(17, 24, 39, .45); backdrop-filter: blur(3px); }
.exam-dialog[open] { animation: pop-in .25s ease; }
.exam-dialog h2 { margin: 0 0 14px; font-size: 21px; }
.exam-dialog-meter { height: 8px; margin-bottom: 12px; overflow: hidden; border-radius: 999px; background: var(--tint); }
.exam-dialog-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s; }
.exam-dialog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.exam-dialog-chips a { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; background: #fff4dc; color: #9a6200; font-size: 13px; font-weight: 700; }
.exam-dialog .btn-row { justify-content: flex-end; margin-top: 20px; }
@media (max-width: 640px) {
    .exam-bar-inner { flex-wrap: wrap; gap: 8px 12px; }
    .exam-title { flex-basis: 100%; }
    .exam-bar-inner > .exam-stats { flex: 1; }
}

/* Results */
.result-card { position: relative; overflow: hidden; }
.result-card.is-pass { background: radial-gradient(520px 220px at 50% 0%, rgba(49, 164, 106, .12), transparent 70%), #fff; }
.result-card .ring span b { font: inherit; }
.result-encourage { max-width: 460px; margin: 8px auto 0; color: var(--ink-2); }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 24px 0 8px; padding: 0; list-style: none; }
.result-stats li { position: relative; overflow: hidden; padding: 14px 10px 16px; border-radius: 14px; background: var(--tint); }
.result-stats strong { display: block; font-size: 24px; line-height: 1.2; }
.result-stats span { color: var(--ink-2); font-size: 13px; }
.result-stats i { position: absolute; bottom: 0; left: 0; width: calc(var(--share, 0) * 100%); height: 4px; background: currentColor; transform-origin: left; }
.motion .result-stats i { animation: grow-x 1s .7s cubic-bezier(.22, .8, .3, 1) both; }
.result-stats .is-right { color: #0b7a45; }
.result-stats .is-wrong { color: #c0392b; }
.result-stats .is-empty { color: #9a6200; }
.result-stats .is-time { color: var(--accent); }
.result-course-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 20px auto 0; padding: 16px 20px; border-radius: 14px; background: linear-gradient(120deg, #fff7e0, #f2efff); }
.review-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.review-head .label-heading { margin: 0; }
.review-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tint); }
.review-filter button { padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 600 14px var(--font); cursor: pointer; }
.review-filter button b { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fff; font-size: 12px; }
.review-filter button[aria-pressed="true"] { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }
.review-filter button[aria-pressed="true"] b { background: var(--accent-soft); }
.confetti { position: fixed; inset: 0; z-index: 300; width: 100%; height: 100%; pointer-events: none; }

/* About page: "Who we are" profile */
.who { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.who-photo { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; }
.who-photo img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow-lg); }
.who-badge { position: relative; margin: -22px 16px 0; padding: 14px 18px; border-left: 4px solid var(--accent-2); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.who-badge strong { display: block; color: var(--ink); font-size: 19px; line-height: 1.35; }
.who-badge span { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.who-body h2 { margin-bottom: 4px; }
.who-sub { margin: 26px 0 12px; color: var(--accent-2); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cred-grid li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.cred-icon, .offer-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); }
.cred-icon svg, .offer-icon svg { width: 21px; height: 21px; }
.cred-grid strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.45; }
.cred-grid small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.who-exp { display: flex; gap: 18px; align-items: flex-start; margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: var(--tint); }
.who-exp-num { display: grid; place-items: center; min-width: 76px; padding: 10px 8px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 34px; font-weight: 800; line-height: 1; text-align: center; }
.who-exp-num small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; opacity: .85; }
.who-exp strong { display: block; color: var(--ink); font-size: 16px; line-height: 1.5; }
.who-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.who-tags span { padding: 5px 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; }
.who-story { margin: 18px 0 0; padding: 18px 22px; border-left: 4px solid var(--accent-2); border-radius: 0 16px 16px 0; background: #fff; box-shadow: var(--shadow); }
.who-story strong { display: block; margin-bottom: 4px; color: var(--ink); }
.who-story p { margin: 0; color: #2c3550; }
.who-extra { margin-top: 18px; }
.who-offers { margin-top: clamp(36px, 6vw, 64px); }
.who-offers h3 { margin-bottom: 18px; font-size: 22px; text-align: center; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.offer-grid li { padding: 22px; border: 1px solid var(--line-soft); border-radius: 18px; background: linear-gradient(180deg, #fff, #fafbff); box-shadow: var(--shadow); }
.offer-grid strong { display: block; margin: 14px 0 6px; color: var(--ink); font-size: 17px; }
.offer-grid p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 860px) {
    .who { grid-template-columns: 1fr; }
    .who-photo { position: relative; top: auto; max-width: 420px; }
    .cred-grid { grid-template-columns: 1fr; }
}

/* Home hero: white card (title, text, buttons) overlapping a large photo on the right */
.shero { padding: clamp(32px, 5vw, 64px) 0; background: #f3f4fb; }
.shero-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.shero-photo { grid-row: 1; grid-column: 5 / -1; }
.shero-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.shero-card { position: relative; z-index: 1; grid-row: 1; grid-column: 1 / 7; padding: clamp(26px, 3vw, 40px); border-radius: 10px; background: #fff; box-shadow: 0 24px 60px -24px rgba(17, 24, 39, .28); }
.shero-card h1 { margin: 0 0 12px; color: var(--ink); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.45; }
.shero-text { margin-bottom: 24px; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.shero-text p { margin: 0; }
.shero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.shero-actions .btn { padding: 11px 20px; border-radius: 6px; font-size: 15px; }
.motion .shero-card { animation: rise-in .8s var(--ease-out) .1s both; }
.motion .shero-photo { animation: media-in 1s var(--ease-out) both; }
.ad-below-hero { margin-top: 28px; }
@media (max-width: 900px) {
    .shero-inner { grid-template-columns: 1fr; }
    .shero-photo, .shero-card { grid-column: 1; }
    .shero-card { grid-row: 2; margin: -56px 16px 0; }
}
/* Your own banner ads (Admin > Ads). Named "promo": ad blockers hide "ad-…" classes. */
.promo { display: block; margin: 32px auto; text-align: center; }
.promo.container { margin-top: 24px; margin-bottom: 24px; }
.promo-label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa3b8; }
.promo a { display: block; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.promo a:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(15, 23, 42, .35); }
.promo a:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.promo img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .promo a, .promo a:hover { transition: none; transform: none; } }