/* ---------- Tokens ---------- */
:root {
  --ink: #0F1B3D;
  --text: #3B4560;
  --muted: #5A6380;
  --accent: #2551D9;
  --accent-dark: #1C40B0;
  --accent-soft: #E8EEFC;
  --highlight: #FF7A59;
  --highlight-soft: #FFE9E1;
  --label: #C2410C;
  --soft: #F2F4FA;
  --soft-2: #EEF0F6;
  --border: #E3E7F0;
  --on-ink-muted: #BFC8E0;
  --ink-line: #23305A;
  --ink-border: #33406A;
  --radius: 6px;
  --shadow: 0 16px 48px rgba(15, 27, 61, 0.10);
  --font: "Asap", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: 1148px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.section { padding: 112px 0; }
.section-tight { padding-bottom: 112px; }
@media (max-width: 700px) { .section { padding: 72px 0; } .section-tight { padding-bottom: 72px; } }

.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.section-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: 48px; }
.section-head p { font-size: 17px; color: var(--text); max-width: 640px; }
.h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.7; color: var(--text); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 28px; border-radius: 4px; border: 1.5px solid transparent; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1B2B5C; color: #fff; }
.btn-highlight { background: var(--highlight); color: var(--ink); font-weight: 700; }
.btn-highlight:hover { background: #FF8F73; color: var(--ink); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-accent { border-color: var(--accent); color: var(--accent); padding: 12px 20px; font-size: 13px; }
.btn-outline-accent:hover { background: var(--accent); color: #fff; }
.btn svg { flex: none; }

.icon-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--highlight); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-circle svg { width: 28px; height: 28px; }
.icon-circle.sm { width: 40px; height: 40px; }
.icon-circle.sm svg { width: 20px; height: 20px; }

/* ---------- Header ---------- */
.site-header { background: var(--soft); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; color: var(--ink); }
.logo-mark { width: 36px; height: 36px; border-radius: 50%; border: 8px solid var(--accent); background: #fff; flex: none; }
.main-nav ul { display: flex; gap: 26px; font-size: 16px; font-weight: 500; }
.main-nav a[aria-current="page"] { color: var(--label); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--shadow); display: none; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 16px; }
  .main-nav li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
}

/* ---------- Page banner (inner pages) ---------- */
.page-banner { background: var(--soft); padding: 56px 0 88px; text-align: center; }
.page-banner h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.15; font-weight: 600; }
.breadcrumb { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.breadcrumb .home-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--highlight); display: inline-flex; align-items: center; justify-content: center; }
.breadcrumb .sep { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { background: var(--soft); padding: 40px 0 128px; }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.hero h1 .hl { color: var(--accent); }
.hero h1 span.line { display: block; }
.hero-copy > p { font-size: 18px; color: var(--text); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.play-link { display: inline-flex; align-items: center; gap: 16px; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.play-link .icon-circle { width: 64px; height: 64px; }
.hero-visual { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.portrait { position: relative; width: 440px; max-width: 100%; aspect-ratio: 440 / 500; }
.portrait .disc { position: absolute; left: 6%; right: 6%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--highlight); }
.portrait img { position: absolute; left: 14%; bottom: 0; width: 72%; height: 92%; object-fit: cover; object-position: top; border-radius: 220px 220px 12px 12px; }
.float-card { position: absolute; border-radius: 8px; padding: 14px 18px; box-shadow: 0 12px 32px rgba(15,27,61,.14); display: flex; flex-direction: column; gap: 2px; }
.float-card strong { font-size: 26px; line-height: 1.2; }
.float-card span { font-size: 13px; }
.float-card.one { left: -8px; top: 22%; background: #fff; }
.float-card.one strong { color: var(--accent); }
.float-card.one span { color: var(--text); }
.float-card.two { right: -8px; bottom: 18%; background: var(--ink); color: #fff; }
.float-card.two strong { color: var(--highlight); }

/* ---------- Proof strip ---------- */
.proof { margin-top: -72px; position: relative; }
.proof-card { background: #fff; box-shadow: var(--shadow); border-radius: var(--radius); padding: 28px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.proof-item { display: flex; align-items: center; gap: 14px; }
.proof-item .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.proof-item strong { display: block; font-size: 17px; }
.proof-item small { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }

/* ---------- About ---------- */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.split > * { flex: 1 1 420px; min-width: 0; }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ph { background: var(--soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 14px; padding: 16px; }
.collage .ph.tall { grid-row: span 2; min-height: 360px; }
.collage .ph.short { min-height: 180px; background: var(--soft-2); }
.stat-tile { background: var(--accent); color: #fff; border-radius: var(--radius); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.stat-tile strong { font-size: 40px; line-height: 1.1; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Service cards ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 400px) { .grid-cards { grid-template-columns: 1fr; } }
.svc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; background: #fff; transition: box-shadow .2s, transform .2s; }
.svc-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-card h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }
.svc-card > p { font-size: 15.5px; color: var(--text); }
.check-list { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { flex: none; margin-top: 3px; }
.check-list b { display: block; font-size: 16px; font-weight: 600; }
.check-list span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.check-list.compact { gap: 10px; }
.check-list.compact li { font-size: 15px; font-weight: 500; }
.svc-card .btn { align-self: flex-start; }

.advisory { margin-top: 16px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.advisory-body { flex: 1 1 480px; min-width: 0; display: flex; gap: 20px; align-items: flex-start; }
.advisory .tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--highlight); }
.advisory h3 { font-size: 26px; font-weight: 600; margin: 6px 0 8px; }
.advisory p { color: var(--on-ink-muted); }
.advisory .btn-row { flex: 0 1 auto; }
.advisory a.btn-outline-light { border: 1.5px solid var(--ink-border); color: #fff; }
.advisory a.btn-outline-light:hover { background: #fff; color: var(--ink); }

/* ---------- Training ---------- */
.training { background: var(--soft); border-radius: var(--radius); padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.training > * { flex: 1 1 400px; min-width: 0; }
@media (max-width: 700px) { .training { padding: 40px 24px; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; }
.num-list { display: flex; flex-direction: column; gap: 14px; }
.num-item { background: #fff; border-radius: var(--radius); padding: 24px; display: flex; gap: 18px; align-items: flex-start; }
.num-item .num { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--highlight); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.num-item h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.num-item p { font-size: 15px; color: var(--text); }

/* ---------- Process band ---------- */
.band { background: var(--ink); color: #fff; padding: 80px 0; }
.band-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 40px; }
.band-head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; font-weight: 600; max-width: 560px; }
.band-head p { color: var(--on-ink-muted); font-size: 17px; max-width: 420px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.step { border-top: 3px solid var(--highlight); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.step .n { font-size: 14px; font-weight: 600; color: var(--highlight); }
.step h3 { font-size: 24px; font-weight: 600; }
.step p { font-size: 15px; color: var(--on-ink-muted); }
.steps.light .step p { color: var(--text); }
.steps.light .step .n { color: var(--label); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--soft); border-radius: 4px; transition: background .2s, box-shadow .2s; }
.faq details[open] { background: #fff; box-shadow: 0 10px 30px rgba(15,27,61,.08); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .arrow { width: 32px; height: 32px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; }
.faq details[open] summary .arrow { background: var(--highlight); transform: rotate(90deg); }
.faq details p { padding: 0 24px 24px; font-size: 16px; line-height: 1.7; color: var(--text); }

/* ---------- Testimonials ---------- */
.reviews { display: flex; flex-wrap: wrap; gap: 24px; }
.reviews-head { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }
.reviews-grid { flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text); }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.review figcaption b { display: block; font-size: 16px; }
.review figcaption small { font-size: 13px; color: var(--muted); }

/* ---------- Blog cards ---------- */
.post-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cover { height: 200px; display: flex; align-items: flex-end; padding: 20px; position: relative; overflow: hidden; }
.cover::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 28px solid rgba(255,255,255,.55); }
.cover-0 { background: var(--accent-soft); }
.cover-1 { background: var(--highlight-soft); }
.cover-2 { background: var(--soft-2); }
.tag-pill { position: relative; z-index: 1; background: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }
.post-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.post-body h3 { font-size: 19px; line-height: 1.35; font-weight: 600; }
.post-body p { font-size: 15px; color: var(--text); flex-grow: 1; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.meta img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.meta .by { color: var(--accent); font-weight: 600; }
.read-more { font-weight: 600; font-size: 15px; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--soft); border-radius: var(--radius); padding: 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.newsletter h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; font-weight: 600; }
.newsletter p { font-size: 17px; color: var(--text); }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 560px; margin-top: 16px; }
.inline-form input { flex: 1 1 260px; min-width: 0; height: 54px; padding: 0 18px; border: 1px solid #D3D9E6; border-radius: 4px; background: #fff; font-size: 16px; }
.inline-form .btn { height: 54px; }
.form-status { min-height: 1.5em; font-size: 15px; font-weight: 500; }
.form-status.ok { color: #157347; }
.form-status.err { color: #B42318; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 48px; }
.site-footer .logo { color: #fff; }
.site-footer p, .site-footer a, .site-footer li { color: var(--on-ink-muted); font-size: 15px; }
.site-footer a:hover { color: #fff; }
.footer-title { display: block; font-weight: 700; font-size: 16px; color: var(--highlight); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.socials { display: flex; gap: 12px; margin-top: 8px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-border); display: flex; align-items: center; justify-content: center; }
.footer-bottom { border-top: 1px solid var(--ink-line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--on-ink-muted); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Sidebar layout (service + blog pages) ---------- */
.with-sidebar { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.with-sidebar > .main-col { flex: 999 1 560px; min-width: 0; }
.with-sidebar > aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.side-title { font-size: 30px; font-weight: 600; margin-bottom: 16px; }
.side-list li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15.5px; color: var(--text); min-height: 44px; }
.side-list li a:hover { color: var(--accent); }
.side-list li a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.side-list .count { font-size: 13px; color: var(--muted); }
.callback { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.callback::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; border: 26px solid rgba(255,122,89,.25); }
.callback .tag { color: var(--highlight); font-weight: 700; font-size: 15px; }
.callback h3 { font-size: 24px; font-weight: 600; line-height: 1.3; }
.callback p, .callback a.plain { color: var(--on-ink-muted); font-size: 15px; position: relative; z-index: 1; }
.callback .btn { position: relative; z-index: 1; }
.search-box { display: flex; }
.search-box input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--border); border-right: 0; border-radius: 4px 0 0 4px; }
.search-box button { width: 52px; height: 52px; border: 0; border-radius: 0 4px 4px 0; background: var(--highlight); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.recent li a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.recent b { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.recent small { font-size: 13px; color: var(--muted); }

/* ---------- Service detail ---------- */
.detail-cover { height: 300px; border-radius: var(--radius); background: var(--accent-soft); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 32px; }
.detail-cover::before { content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: var(--highlight); opacity: .9; }
.detail-cover::after { content: ""; position: absolute; right: 120px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid #fff; opacity: .7; }
.detail-cover .icon-circle { position: absolute; right: 60px; top: 60px; width: 120px; height: 120px; background: #fff; z-index: 1; }
.detail-cover .icon-circle svg { width: 56px; height: 56px; }
.detail-cover .tag-pill { z-index: 1; }
.main-col > h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; font-weight: 600; margin: 36px 0 16px; }
.main-col h3.sub { font-size: 24px; font-weight: 600; margin: 48px 0 20px; }
.svc-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.svc-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.svc-block .num { font-size: 13px; font-weight: 700; color: var(--label); letter-spacing: .08em; }
.svc-block h4 { font-size: 19px; font-weight: 600; line-height: 1.35; }
.svc-block p { font-size: 15px; color: var(--text); }
.cta-box { margin-top: 48px; background: var(--soft); border-radius: var(--radius); padding: 36px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.cta-box h3 { font-size: 24px; font-weight: 600; }
.cta-box p { color: var(--text); margin-top: 6px; }

/* ---------- Services listing ---------- */
.integrate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.integrate .lead { max-width: 760px; }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 28px; width: 100%; text-align: left; }
.feature { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border-radius: var(--radius); background: var(--soft); }
.feature h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.feature p { font-size: 15px; color: var(--text); }

/* ---------- Blog article ---------- */
.article-cover { height: 380px; background: var(--accent-soft); position: relative; overflow: hidden; }
.article-cover::before { content: ""; position: absolute; left: 8%; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: var(--highlight); opacity: .85; }
.article-cover::after { content: ""; position: absolute; right: 10%; bottom: -140px; width: 320px; height: 320px; border-radius: 50%; border: 40px solid #fff; opacity: .8; }
.article-head { padding: 56px 0 32px; margin-bottom: 36px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.article-head h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.2; font-weight: 600; }
.prose { font-size: 18px; line-height: 1.8; color: var(--text); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 28px; line-height: 1.3; color: var(--ink); font-weight: 600; margin-top: 44px; }
.prose ul { list-style: disc; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 44px 0; text-align: center; font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--ink); padding: 0 4%; }
.prose blockquote::before { content: "\201C"; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--highlight); font-size: 56px; line-height: 1; padding-top: 18px; }
.article-foot { margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.article-foot .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.article-foot .tags span { background: var(--soft); padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.share { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.share a { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.share a:hover { background: var(--highlight); }
.author-box { margin-top: 40px; display: flex; gap: 24px; align-items: center; padding: 28px; background: var(--soft); border-radius: var(--radius); flex-wrap: wrap; }
.author-box img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.author-box div { flex: 1 1 280px; }
.author-box b { font-size: 19px; }
.author-box p { color: var(--text); margin-top: 6px; font-size: 15.5px; }

/* ---------- Contact ---------- */
.info-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.info-card { display: flex; gap: 18px; align-items: flex-start; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); }
.info-card .sq { width: 48px; height: 48px; border-radius: 4px; background: var(--highlight); display: flex; align-items: center; justify-content: center; flex: none; }
.info-card b { display: block; font-size: 17px; }
.info-card span, .info-card a { font-size: 15px; color: var(--text); }
.info-card a:hover { color: var(--accent); }
.contact-photo { border-radius: var(--radius); overflow: hidden; background: var(--soft); aspect-ratio: 5 / 4; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.contact-form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #D3D9E6; border-radius: 4px; background: #fff; font-size: 16px; }
.field textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- About page ---------- */
.about-photo { position: relative; max-width: 520px; }
.about-photo .contact-photo { aspect-ratio: 4 / 5; }
.about-photo .stat-tile { position: absolute; right: -16px; bottom: 32px; padding: 22px 26px; box-shadow: var(--shadow); }
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.area { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.area h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.area p { font-size: 15px; color: var(--muted); }
.philosophy { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.philosophy > * { flex: 1 1 400px; min-width: 0; }
.philosophy h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.15; font-weight: 600; }
.philosophy h2 .hl { color: var(--highlight); }
.philosophy p { color: var(--on-ink-muted); font-size: 17px; }
.check-list.light { border-top-color: #33406A; }
.check-list.light span { color: #fff; font-size: 17px; }
@media (max-width: 700px) { .about-photo .stat-tile { right: 12px; bottom: 12px; } }

/* ---------- Learn ---------- */
.learn-hero h1 .hl { color: var(--highlight); }
.path-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%); margin-left: auto; }
.path-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.path-step { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, background .15s; }
.path-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.path-step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.path-step div { flex: 1; min-width: 0; }
.path-step b { display: block; font-size: 17px; }
.path-step small { color: var(--muted); font-size: 14px; }

.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; counter-reset: step; }
.ladder-step { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.ladder-step .n { position: absolute; top: 24px; right: 28px; font-size: 40px; font-weight: 700; color: var(--soft-2); line-height: 1; }
.ladder-step h3 { font-size: 22px; font-weight: 600; }
.ladder-step p { color: var(--text); font-size: 15.5px; flex-grow: 1; }

.price-sm { font-size: 18px; font-weight: 700; color: var(--ink); }
.price-sm small { font-size: 13px; font-weight: 500; color: var(--muted); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.svc-card .card-foot .btn { align-self: center; }
.svc-card h3 a:hover { color: var(--accent); }
.status { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; background: var(--soft-2); color: var(--muted); }
.status.open { background: var(--highlight-soft); color: var(--label); }
.mini-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.mini-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill.soft { background: var(--accent-soft); color: var(--accent-dark); }
.tag-pill.line { background: #fff; border: 1px solid var(--border); color: var(--muted); }
.check-list.plain { border-top: 0; padding-top: 0; margin-top: 0; flex-grow: 0; }
.check-list.plain span { font-size: 16px; color: var(--text); }
.center-row { display: flex; justify-content: center; margin-top: 32px; }

.sub-h { font-size: 26px; font-weight: 600; margin-top: 20px; }
.note-strip { display: flex; gap: 10px; align-items: flex-start; background: var(--highlight-soft); border-radius: var(--radius); padding: 14px 18px; font-size: 15px; color: var(--ink); }
.note-strip svg { flex: none; margin-top: 3px; }
.path-line { background: var(--soft); border-radius: var(--radius); padding: 14px 18px; font-size: 15px; }

.price-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.with-sidebar > aside .price-card { position: sticky; top: 100px; }
.price-big { font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.price-big small { font-size: 15px; font-weight: 500; color: var(--muted); }
.price-big s { font-size: 18px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.facts span { color: var(--muted); }
.facts b { text-align: right; font-weight: 600; }
.pay-btn { width: 100%; }
.btn-disabled { background: var(--soft-2); color: var(--muted); cursor: not-allowed; }
.btn-disabled:hover { transform: none; }
.fine { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.help-line { font-size: 14px; color: var(--muted); }
.help-line a { color: var(--accent); font-weight: 600; }

.waitlist { display: flex; flex-direction: column; gap: 10px; background: var(--soft); border-radius: var(--radius); padding: 18px; }
.waitlist-title { font-weight: 700; font-size: 15px; }
.waitlist input { height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 15px; }

.timeline { display: flex; flex-direction: column; border-left: 2px solid var(--border); margin-left: 8px; }
.timeline li { display: flex; gap: 16px; align-items: flex-start; padding: 0 0 20px 24px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--highlight); }
.timeline .t { flex: none; min-width: 64px; font-size: 13px; font-weight: 700; color: var(--label); padding-top: 2px; }
.timeline b { display: block; font-size: 16.5px; }
.timeline p { font-size: 15px; color: var(--muted); margin-top: 2px; }

.ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ba-col { border-radius: var(--radius); padding: 24px; }
.ba-col h3 { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.ba-col.before { background: var(--soft); }
.ba-col.before h3 { color: var(--muted); }
.ba-col.after { background: var(--ink); }
.ba-col.after h3 { color: var(--highlight); }
.ba-col.after .check-list.plain span { color: #fff; }
.ba-col .check-list span { font-size: 15px; }

.curriculum summary { text-transform: none; letter-spacing: 0; font-size: 18px; }
.curriculum summary small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.class-list { padding: 0 24px 20px; display: flex; flex-direction: column; }
.class-list li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.class-list .n { flex: none; width: 32px; font-weight: 700; color: var(--accent); font-size: 14px; padding-top: 2px; }
.class-list b { display: block; font-size: 16px; font-weight: 600; }
.class-list small { color: var(--muted); font-size: 14px; }
.feature .label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.compare { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15.5px; }
.compare th, .compare td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { background: var(--ink); color: #fff; font-weight: 600; }
.compare thead a { color: #fff; }
.compare tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.compare tbody tr:nth-child(even) { background: var(--soft); }
.compare tbody tr:last-child > * { border-bottom: 0; }

.areas.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.icon-circle.big { width: 76px; height: 76px; }
.icon-circle.big svg { width: 34px; height: 34px; }
@media (max-width: 700px) { .path-card { margin: 0 auto; } .price-big { font-size: 30px; } }
.main-col > h2.sub-h { font-size: 26px; line-height: 1.3; margin-top: 20px; }
.form-status:empty { display: none; }
.logo-tag { margin-left: 8px; padding: 3px 8px; border-radius: 3px; background: var(--highlight); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-footer .logo-tag { color: var(--ink); }
.footer-bottom .back-home { color: #fff; font-weight: 600; }
.footer-bottom .back-home:hover { color: var(--highlight); }

/* Learn: instructor intro */
.employer-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--ink); color: #fff; border-left: 5px solid var(--highlight); transition: transform .2s; }
.employer-card:hover { transform: translateY(-2px); }
.employer-card .icon-circle { background: var(--highlight); flex: none; }
.employer-card small { display: block; font-size: 13px; color: #C9D2EC; }
.employer-card b { display: block; font-size: 24px; line-height: 1.2; }
.employer-card span:not(.icon-circle) { font-size: 14px; color: #C9D2EC; }
.employer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.employer-stats div { background: var(--highlight-soft); border-radius: 12px; padding: 14px 12px; }
.employer-stats strong { display: block; font-size: 22px; color: var(--ink); line-height: 1.2; }
.employer-stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 480px) { .employer-stats { grid-template-columns: 1fr; } }
.instructor .split { gap: 48px; max-width: 980px; }
.instructor .about-photo { flex: 0 1 300px; max-width: 300px; }
.instructor .about-photo .stat-tile { padding: 14px 18px; right: -12px; bottom: 20px; }
.instructor .stat-tile strong { font-size: 28px; }
.instructor .stack { gap: 14px; }
.instructor .h2 { font-size: clamp(28px, 3vw, 36px); }
.instructor .lead { font-size: 17px; }
.instructor .employer-card { padding: 14px 16px; }
.instructor .employer-card b { font-size: 20px; }
.instructor .employer-stats div { padding: 10px 12px; }
.instructor .employer-stats strong { font-size: 19px; }
.instructor { padding-top: 72px; padding-bottom: 40px; }
.main-col .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .main-col .steps { grid-template-columns: 1fr; } }
/* Learn: AI-powered course tag, "who it's for" line, AI note */
.tag-pill.ai { background: var(--highlight-soft); color: var(--label); letter-spacing: .04em; padding: 6px 8px; }
.check-list .ai-hl { display: inline; font-size: inherit; font-weight: 700; color: var(--ink); }
.who { font-size: 14px; color: var(--muted); background: var(--soft); border-radius: 6px; padding: 8px 12px; }
.who b { color: var(--ink); }
.ai-note { display: flex; gap: 10px; background: var(--highlight-soft); border-radius: 8px; padding: 14px 18px; color: var(--text); }
.ai-note b { color: var(--ink); }
.review blockquote p { margin: 0 0 12px; }
.review blockquote p:last-child { margin-bottom: 0; }
.avatar-logo { object-fit: cover; background: #fff; border: 1px solid var(--border); }
.reviews-head .btn { align-self: flex-start; }
.review-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); margin-top: -6px; }
.review-more:hover { text-decoration: underline; }
.reviews-list { display: flex; flex-direction: column; gap: 24px; }
.reviews-list .review { scroll-margin-top: 110px; }

/* AI workflows page (draft) */
.preview-banner { background: var(--highlight-soft); color: var(--ink); text-align: center; font-weight: 600; padding: 8px 16px; font-size: 14px; }
.wf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.wf-stats div { background: var(--soft); border-radius: var(--radius); padding: 24px; text-align: center; }
.wf-stats strong { display: block; font-size: 36px; color: var(--accent); }
.wf-stats span { color: var(--muted); }
.wf-list { display: flex; flex-direction: column; gap: 32px; }
.wf-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.wf-case.flip .wf-shot { order: 2; }
.wf-shot { min-height: 300px; }
.wf-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wf-body h3 { font-size: 26px; margin: 0; }
.wf-body dl { margin: 0; display: grid; gap: 4px; }
.wf-body dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-top: 8px; }
.wf-body dd { margin: 0; color: var(--text); }
.wf-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-tools span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; }
.wf-result { display: flex; align-items: baseline; gap: 10px; background: var(--accent-soft); border-radius: 8px; padding: 12px 16px; }
.wf-result strong { font-size: 26px; color: var(--accent); }
.wf-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.wf-video { aspect-ratio: 16 / 9; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 16px; }
.wf-video .play { width: 56px; height: 56px; border-radius: 50%; background: var(--highlight); display: flex; align-items: center; justify-content: center; }
.wf-video small { color: #C9D2EA; }
.band + .wf-free { padding-top: 80px; }
@media (max-width: 860px) { .wf-case { grid-template-columns: 1fr; } .wf-case.flip .wf-shot { order: 0; } .wf-shot { min-height: 200px; } }

/* Digital marketing course page (draft) */
.cf { background: var(--highlight-soft); color: var(--label); border-radius: 3px; padding: 0 4px; }
.dm-note { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 18px; }
.dm-glance { gap: 4px; }
.dm-g { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dm-g:last-child { border-bottom: 0; }
.dm-g .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.dm-g b { display: block; font-size: 17px; }
.dm-g small { color: var(--muted); font-size: 14px; }
.dm-equation { display: flex; flex-direction: column; gap: 12px; }
.dm-equation > div { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.dm-equation .icon-circle { margin-bottom: 6px; }
.dm-equation small { color: var(--muted); }
.dm-equation .plus { text-align: center; font-size: 28px; font-weight: 700; color: var(--highlight); line-height: 1; }
.dm-equation .result { background: var(--ink); color: #fff; border-color: var(--ink); font-size: 20px; }
.dm-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dm-mod { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: #fff; }
.dm-mod .n { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.dm-mod h3 { font-size: 19px; margin: 6px 0 10px; }
.dm-mod ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; display: grid; gap: 4px; }
.dm-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.dm-proj { display: flex; gap: 16px; background: var(--soft); border-radius: var(--radius); padding: 22px; }
.dm-proj .n { font-size: 28px; font-weight: 700; color: var(--highlight); line-height: 1; }
.dm-proj p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.dm-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; align-content: center; }
.dm-trainer { display: flex; gap: 36px; align-items: center; background: var(--soft); border-radius: var(--radius); padding: 36px; }
.dm-trainer img { width: 160px; height: auto; border-radius: var(--radius); flex: none; }
.dm-support { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dm-support div { background: #fff; border-radius: 8px; padding: 14px 16px; }
.dm-support b, .dm-support small { display: block; }
.dm-support small { color: var(--muted); font-size: 14px; }
.dm-enroll { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; align-items: start; }
.dm-dl { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dm-dl p { margin: 0 0 6px; color: var(--muted); }
.dm-price { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.dm-price .tag { color: var(--highlight); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dm-price strong { font-size: 34px; }
.dm-price small { color: #C9D2EA; }
.dm-price .waitlist { margin-top: 12px; }
@media (max-width: 900px) { .dm-enroll { grid-template-columns: 1fr; } .dm-trainer { flex-direction: column; align-items: flex-start; padding: 24px; } }
.seo-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.seo-month { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.seo-month-head { background: var(--ink); color: #fff; padding: 18px 22px; }
.seo-month-head span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--highlight); }
.seo-month-head h3 { color: #fff; font-size: 22px; margin: 4px 0 0; }
.seo-month ol { list-style: none; margin: 0; padding: 8px 22px 16px; }
.seo-month li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.seo-month li:last-child { border-bottom: 0; }
.seo-month li .n { font-weight: 700; color: var(--accent); min-width: 22px; }
.seo-month li b { display: block; font-size: 16px; }
.seo-month li small { color: var(--muted); font-size: 14px; }
.seo-format { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.seo-format div { background: var(--soft); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--highlight); }
.seo-format strong { font-size: 22px; color: var(--accent); }
.seo-stage { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-bottom: 2px; }
.dm-price .pay-btn { margin-top: 12px; }
.hi-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); font-size: 15px; }
.proof + .section-tight { padding-top: 96px; }
.mdc-mark { height: 40px; width: auto; flex: none; }
.mdc-name i { font-style: normal; color: var(--accent); }
.site-footer .mdc-name i { color: var(--highlight); }
.mentor-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-left: auto; width: min(340px, 100%); }
.mentor-hero .portrait { width: 300px; }
.mentor-cap { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mentor-cap b { font-size: 22px; color: var(--ink); }
.mentor-cap small { color: var(--muted); font-size: 14px; max-width: 360px; }
.mentor-cap .hi-link { margin-top: 6px; }
@media (max-width: 900px) { .mentor-hero { margin: 32px auto 0; } }

/* My Digital Classes programme homepage (draft) */
.pg-nav ul { gap: 22px; }
.pg-nav a { font-size: 15px; }
.pg-head-cta { display: flex; align-items: center; gap: 16px; }
.pg-advisor { font-weight: 600; font-size: 15px; color: var(--accent); white-space: nowrap; }
.pg-hero { background: radial-gradient(circle at 90% 10%, rgba(37,81,217,.12), transparent 45%), radial-gradient(circle at 0% 100%, rgba(255,122,89,.10), transparent 40%), var(--soft); padding: 72px 0 88px; }
.pg-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.pg-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pg-pill svg { color: var(--highlight); }
.pg-hero h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.06; margin: 18px 0 16px; }
.pg-grad { background: linear-gradient(90deg, #2551D9, #7B5CFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-sub { font-size: 18px; line-height: 1.7; color: var(--text); max-width: 560px; margin: 0; }
.pg-visual { position: relative; padding: 24px 12px; }
.pg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.pg-list svg { flex: none; margin-top: 3px; }
.pg-after-band { padding-top: 88px; }
.pg-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pg-toolcat { border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.pg-toolcat h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin: 0 0 2px; }
.pg-toollist { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1001px) {
  .pg-tools { grid-template-columns: 1fr; gap: 12px; }
  .pg-toolcat { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 16px; padding: 14px 18px; }
  .pg-toolcat h3 { margin: 0; }
  .pg-toolcat { grid-template-columns: 170px 1fr; }
  .pg-toollist { display: flex; flex-flow: row wrap; gap: 10px; }
  .pg-toollist .pg-tool { min-width: 150px; white-space: nowrap; }
}
.pg-tool { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--soft); border-radius: 10px; }
.pg-tool b { font-size: 15px; }
.pg-tool .tg { font-size: 12px; font-weight: 600; align-self: flex-start; border-radius: 4px; padding: 1px 6px; }
.tg.free { background: #E3F5EA; color: #1B7A43; }
.tg.paid, .tg.budget, .tg.hosting, .tg.payg, .tg.trial { background: #FFE9E1; color: var(--label); }
.pg-mentor { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; scroll-margin-top: 100px; }
.pg-portrait { width: 320px; }
.pg-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; scroll-margin-top: 100px; }
.pg-details div { border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.pg-details span { font-size: 13px; color: var(--muted); }
.pg-details b { font-size: 16px; }
.pg-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-ph { border: 2px dashed var(--border); border-radius: 16px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
.pg-ph small { color: var(--muted); }
.pg-final { background: radial-gradient(circle at 90% 0%, rgba(123,92,250,.35), transparent 50%), var(--ink); color: #fff; border-radius: 20px; padding: 56px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pg-final h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); margin: 0; }
.pg-final p { color: #C9D2EA; max-width: 620px; margin: 0 0 10px; }
.pg-final .btn-row { justify-content: center; }
.pg-final .btn-outline-light { border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.pg-sticky { position: fixed; right: 92px; bottom: 22px; z-index: 50; background: var(--accent); color: #fff; font-weight: 700; padding: 14px 22px; border-radius: 999px; box-shadow: 0 12px 30px rgba(37,81,217,.35); letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.pg-wa { position: fixed; right: 22px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(37,211,102,.35); }
@media (max-width: 1180px) { .pg-advisor { display: none; } .pg-nav ul { gap: 14px; } }
@media (max-width: 1000px) { .pg-hero-grid, .pg-mentor { grid-template-columns: 1fr; } .pg-proof { grid-template-columns: 1fr; } .pg-tools { grid-template-columns: repeat(2, 1fr); } .pg-details { grid-template-columns: repeat(2, 1fr); } .pg-portrait { margin: 0 auto; } }
@media (max-width: 560px) { .pg-tools, .pg-details { grid-template-columns: 1fr; } .pg-sticky { left: 16px; right: 88px; text-align: center; } }
.pg-nav a, .pg-head-cta .btn, .site-header .mdc-name { white-space: nowrap; }
.pg-nav ul { gap: 18px; }
.pg-nav a { font-size: 14.5px; }
@media (max-width: 1400px) { .pg-advisor { display: none; } }
.pg-trainer { display: flex; justify-content: center; padding: 0; }
.pg-hero-portrait { width: 400px; }
.pg-nameplate { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 22px; text-align: center; box-shadow: 0 16px 36px rgba(15,27,61,.25); white-space: nowrap; }
.pg-nameplate small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--highlight); }
.pg-nameplate b { display: block; font-size: 20px; }
.pg-nameplate span { font-size: 13px; color: #C9D2EA; }
.pg-nameplate { white-space: normal; width: max-content; max-width: 340px; }
.pg-nameplate span { display: block; }
.pg-nameplate b { display: inline-flex; align-items: center; gap: 8px; }
.pg-nameplate:hover { background: #1A2A57; }
@media (max-width: 1000px) { .pg-trainer { margin-top: 16px; padding-bottom: 32px; } }
@media (max-width: 560px) { .pg-hero-portrait { width: 300px; } }

/* My Digital Classes: live masterclass link in the header + masterclass landing page */
.pg-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--highlight-soft); color: var(--label) !important; font-weight: 700; white-space: nowrap; }
.pg-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: pgpulse 1.6s infinite; }
.pg-live:hover, .pg-live.on { background: var(--highlight); color: #fff !important; }
.pg-live.on .dot, .pg-live:hover .dot { background: #fff; }
@keyframes pgpulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .pg-live .dot { animation: none; } }
.hi, .hi h1, .hi h2, .hi h3 { font-family: "Asap", "Hind", sans-serif; }
.mc-topbar { background: var(--ink); color: #fff; text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 600; letter-spacing: .03em; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; font-family: "Asap", "Hind", sans-serif; }
.mc-topbar svg { color: var(--highlight); }
.mc-topbar s { color: #8C97B8; }
.mc-topbar b { color: var(--highlight); }
.mc-hero h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.2; }
.mc-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 6px; font-weight: 600; color: var(--ink); }
.mc-when .sep { color: var(--muted); }
.mc-cta { font-size: 16px; padding: 16px 28px; }
.mc-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; margin-top: 14px; }
.mc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.mc-step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(15,27,61,.05); }
.mc-step .n { display: block; margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.mc-step h3 { font-size: 26px; margin: 4px 0 10px; }
.mc-step p { margin: 0; color: var(--muted); line-height: 1.7; }
.mc-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mc-why .ic { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,122,89,.14); align-items: center; justify-content: center; }
.mc-why h3 { color: #fff; font-size: 19px; margin: 14px 0 8px; }
.mc-why p { color: #C9D2EA; margin: 0; font-size: 15px; line-height: 1.7; }
.mc-learn { align-items: flex-start; }
.mc-list li { font-size: 17px; line-height: 1.6; }
.mc-learn .mc-cta { align-self: flex-start; margin-top: 8px; }
.mc-agenda { background: var(--soft); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.mc-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mc-fit-col { border-radius: 16px; padding: 28px; }
.mc-fit-col.yes { background: #EEF8F1; }
.mc-fit-col.no { background: #FFF1EC; }
.mc-fit-col h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 16px; }
.mc-fit-col li { font-size: 16px; }
.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mc-stats div { background: var(--soft); border-radius: 12px; padding: 14px; }
.mc-stats strong { display: block; font-size: 26px; color: var(--accent); }
.mc-stats span { font-size: 13px; color: var(--muted); }
.mc-quotes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mc-register { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; background: var(--ink); color: #fff; scroll-margin-top: 90px; }
.mc-reg-copy { padding: 40px; display: flex; flex-direction: column; gap: 14px; }
.mc-reg-copy .tag { color: var(--highlight); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mc-reg-copy h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin: 0; }
.mc-reg-copy .pg-list li { color: #E3E8F6; }
.mc-reg-when { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-weight: 600; }
.mc-reg-box { background: #fff; color: var(--ink); padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.mc-price s { color: var(--muted); font-size: 20px; }
.mc-price strong { font-size: 44px; color: var(--ink); }
.mc-price small { color: var(--muted); }
.mc-disclaimer { margin: 24px auto 0; max-width: 760px; text-align: center; font-size: 13px; color: var(--muted); }
.mc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; box-shadow: 0 -8px 30px rgba(15,27,61,.12); padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 15px; }
.mc-sticky .btn { padding: 10px 22px; }
body:has(.mc-sticky) .site-footer { padding-bottom: 80px; }
@media (max-width: 1000px) { .mc-steps, .mc-fit, .mc-register { grid-template-columns: 1fr; } .mc-why { grid-template-columns: repeat(2, 1fr); } .mc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mc-why { grid-template-columns: 1fr; } .mc-sticky { justify-content: space-between; font-size: 13px; padding: 10px 14px; } .mc-reg-copy, .mc-reg-box { padding: 24px; } }
.site-header:has(.pg-nav) .header-inner { gap: 28px; }
.site-header:has(.pg-nav) .logo { flex: none; }
@media (max-width: 1240px) { .pg-nav ul { gap: 12px; } .pg-nav a { font-size: 14px; } }

/* ===== My Digital Classes theme (based on the "Courses" education template) ===== */
.mdc, .mdc-head, .mdc-foot { --mt-ink: #2E3A78; --mt-title: #4255A4; --mt-orange: #FF9F67; --mt-orange-dark: #F5874A; --mt-violet: #8C5CF5; --mt-grad: linear-gradient(160deg, #5B7CFA 0%, #9A6BFA 48%, #E06AF0 100%); }
.mdc { font-family: "Mulish", "Hind", sans-serif; color: #5C6286; }
.mdc h1, .mdc h2, .mdc h3, .mdc .h2, .mdc .mt-btn, .mdc .btn, .mdc-head, .mdc-foot .footer-title { font-family: "Josefin Sans", "Hind", sans-serif; }
.mdc h2, .mdc .h2, .mdc h3 { color: var(--mt-title); }
/* header */
.mdc-head { background: #5B7CFA; box-shadow: none; }
.mdc-head .mdc-name, .mdc-head .pg-nav a:not(.pg-live) { color: #fff; }
.mdc-head .mdc-name i { color: #FFE2CF; }
.mdc-head .pg-nav a:not(.pg-live):hover, .mdc-head .pg-nav a[aria-current="page"] { color: #FFE2CF; }
.mdc-head .pg-live { background: rgba(255,255,255,.18); color: #fff !important; border: 1px solid rgba(255,255,255,.5); }
.mdc-head .pg-live:hover, .mdc-head .pg-live.on { background: #fff; color: var(--mt-title) !important; }
.mdc-head .pg-live.on .dot, .mdc-head .pg-live:hover .dot { background: #E5484D; }
.mdc-head .header-cta { background: var(--mt-orange); border-radius: 5px; }
.mdc-head .header-cta:hover { background: var(--mt-orange-dark); }
.mdc-head .nav-toggle { color: #fff; }
/* buttons */
.mt-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mt-orange); color: #fff; font-weight: 600; font-size: 16px; padding: 18px 32px; border-radius: 5px; border: 2px solid var(--mt-orange); transition: background .2s, transform .2s; }
.mt-btn:hover { background: var(--mt-orange-dark); border-color: var(--mt-orange-dark); transform: translateY(-1px); }
.mt-btn.ghost { background: transparent; border-color: rgba(255,255,255,.7); }
.mt-btn.ghost:hover { background: #fff; color: var(--mt-title); }
.mt-btn.ghost-dark { background: transparent; color: var(--mt-title); border-color: #D6DAF0; }
.mt-btn.ghost-dark:hover { border-color: var(--mt-title); }
.mt-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.mt-center { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
/* hero */
.mt-hero { position: relative; overflow: hidden; background: var(--mt-grad); color: #fff; padding: 80px 0 150px; }
.mt-cloud { position: absolute; background: rgba(255,255,255,.14); border-radius: 999px; }
.mt-cloud.c1 { width: 220px; height: 46px; top: 70px; left: -40px; }
.mt-cloud.c2 { width: 180px; height: 40px; top: 120px; right: 8%; }
.mt-blob { position: absolute; width: 520px; height: 520px; right: -120px; top: 40px; border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; background: rgba(255,255,255,.10); }
.mt-hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.mt-kicker { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFE2CF; }
.mt-hero h1 { color: #fff; font-size: clamp(40px, 5vw, 62px); line-height: 1.15; margin: 14px 0 18px; }
.mt-hero p { color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.7; max-width: 560px; margin: 0; }
.mt-hero-visual { display: flex; justify-content: center; }
.mt-hero .portrait .disc { background: rgba(255,255,255,.22); }
.mt-hero .pg-nameplate { background: #fff; color: var(--mt-title); }
.mt-hero .pg-nameplate small { color: var(--mt-orange-dark); }
.mt-hero .pg-nameplate span { color: #6B7194; }
.mt-hero .pg-nameplate svg { stroke: var(--mt-title); }
.mt-hero .pg-nameplate:hover { background: #F4F2FF; }
/* overlapping feature cards */
.mt-features { position: relative; margin-top: -90px; z-index: 2; }
.mt-feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mt-feature { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: 10px; padding: 30px 26px; box-shadow: 0 20px 50px rgba(66,85,164,.14); transition: transform .2s; }
.mt-feature:hover { transform: translateY(-4px); }
.mt-feature-ic { flex: none; }
.mt-feature h3 { font-size: 22px; margin: 0 0 8px; }
.mt-feature p { margin: 0; font-size: 15px; line-height: 1.6; color: #6B7194; }
/* sections */
.mt-section { padding: 90px 0 0; }
.mt-title { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.mt-title h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; margin: 0 0 12px; }
.mt-title p { margin: 0; font-size: 17px; }
.mt-h2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; line-height: 1.25; margin: 18px 0 14px; }
.mt-lead { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.mt-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mt-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #4B5177; }
.mt-checks svg { flex: none; margin-top: 3px; }
.mt-checks.big li { font-size: 16px; line-height: 1.6; }
.mt-checks b { color: var(--mt-title); }
/* track cards (like the template's course cards) */
.mt-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mt-track { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 40px rgba(66,85,164,.10); display: flex; flex-direction: column; scroll-margin-top: 100px; }
.mt-track-cover { height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .03em; }
.g1 { background: linear-gradient(135deg, #5B7CFA, #8C5CF5); }
.g2 { background: linear-gradient(135deg, #8C5CF5, #E06AF0); }
.g3 { background: linear-gradient(135deg, #FF9F67, #F06AA8); }
.g4 { background: linear-gradient(135deg, #4255A4, #5B7CFA); }
.mt-track-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mt-track-body small { color: #8A90B0; font-size: 14px; }
.mt-track-body h3 { font-size: 21px; line-height: 1.3; margin: 0; }
/* split section */
.mt-round-ic { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #8C5CF5, #E06AF0); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(140,92,245,.35); }
/* subject tiles */
.mt-subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mt-subject { border-radius: 10px; min-height: 160px; padding: 24px 20px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; position: relative; overflow: hidden; }
.mt-subject b { font-family: "Josefin Sans", sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.mt-subject small { font-size: 14px; opacity: .9; line-height: 1.5; }
.mt-subject svg { position: absolute; top: 20px; right: 20px; opacity: .85; }
/* outcomes with blob */
/* mentor (template's "community experts") */
.mt-expert { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; max-width: 960px; margin: 0 auto; }
.mt-expert-photo { width: 240px; height: 240px; border-radius: 50%; padding: 10px; background: #F1EDFF; }
.mt-expert-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; }
.mt-expert h3 { font-size: 30px; margin: 0 0 6px; }
.mt-role { color: var(--mt-orange-dark); font-weight: 700; margin: 0 0 14px; }
.mt-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 24px; }
.mt-facts div { background: #F6F4FF; border-radius: 10px; padding: 14px; }
.mt-facts strong { display: block; font-family: "Josefin Sans", sans-serif; font-size: 28px; color: var(--mt-violet); }
.mt-facts span { font-size: 13px; }
/* shared bits restyled for the theme */
.mdc .pg-toolcat, .mdc .pg-details div { border-color: #E9EBF6; border-radius: 10px; box-shadow: 0 8px 24px rgba(66,85,164,.06); }
.mdc .pg-toolcat h3 { color: var(--mt-violet); }
.mdc .pg-details { margin-bottom: 30px; }
.mt-faq .section { padding-top: 90px; }
.mdc details summary { font-family: "Josefin Sans", sans-serif; }
.mt-cta { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; background: linear-gradient(135deg, #F4F1FF, #FFF1EA); border-radius: 16px; padding: 40px 56px; margin-bottom: 90px; }
.mt-sticky { background: var(--mt-orange); box-shadow: 0 12px 30px rgba(255,159,103,.45); border-radius: 5px; }
/* footer */
.mdc-foot { background: #4255A4; }
.mdc-foot .footer-title { color: #FFE2CF; }
.mdc-foot .mdc-name i { color: #FFE2CF; }
.mdc-foot .mdc-mark { filter: brightness(1.15); }
/* masterclass page inside the theme */
.mdc .pg-hero { background: var(--mt-grad); color: #fff; }
.mdc .pg-hero h1 { color: #fff; }
.mdc .pg-hero .pg-grad { background: none; -webkit-text-fill-color: #FFE2CF; color: #FFE2CF; }
.mdc .pg-hero .pg-sub, .mdc .pg-hero .mc-note, .mdc .pg-hero .mc-when { color: rgba(255,255,255,.92); }
.mdc .pg-hero .mc-when svg, .mdc .pg-hero .mc-note svg { stroke: #FFE2CF; }
.mdc .pg-hero .pg-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.mdc .pg-hero .portrait .disc { background: rgba(255,255,255,.22); }
.mdc .pg-hero .pg-nameplate { background: #fff; color: var(--mt-title); }
.mdc .pg-hero .pg-nameplate small { color: var(--mt-orange-dark); }
.mdc .pg-hero .pg-nameplate span { color: #6B7194; }
.mdc .pg-hero .pg-nameplate svg { stroke: var(--mt-title); }
.mdc .mc-topbar { background: #4255A4; }
.mdc .btn-highlight { background: var(--mt-orange); border-radius: 5px; color: #fff; }
.mdc .btn-highlight:hover { background: var(--mt-orange-dark); }
.mdc .band { background: #4255A4; }
.mdc .mc-register, .mdc .pg-final { background: var(--mt-grad); }
.mdc .eyebrow { color: var(--mt-violet); }
.mdc .icon-circle { background: linear-gradient(135deg, #8C5CF5, #E06AF0); }
.mdc .icon-circle svg { stroke: #fff; }
@media (max-width: 1000px) { .mt-hero-grid, .mt-expert, .mt-cta { grid-template-columns: 1fr; } .mt-feature-row, .mt-tracks { grid-template-columns: 1fr; } .mt-subjects { grid-template-columns: repeat(2, 1fr); } .mt-hero { padding-bottom: 130px; } .mt-expert-photo { margin: 0 auto; } .mt-cta { padding: 32px 24px; } }
@media (max-width: 560px) { .mt-subjects, .mt-facts { grid-template-columns: 1fr; } .mt-btn { padding: 15px 22px; } }
.mdc-head .mdc-mark, .mdc-foot .mdc-mark { box-shadow: 0 0 0 2px rgba(255,255,255,.85); border-radius: 10px; }
.mt-cta-badge { width: 280px; height: 280px; margin: 0 auto; border-radius: 50%; background: var(--mt-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; box-shadow: 0 24px 60px rgba(140,92,245,.35); }
.mt-cta-badge img { width: 120px; height: 120px; border-radius: 26px; box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
.mt-cta-badge span { color: #fff; font-family: "Josefin Sans", sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
.mdc .band h2, .mdc .band h3, .mdc .mc-why h3, .mdc .mc-reg-copy h2, .mdc .pg-final h2, .mdc .mt-hero h1 { color: #fff; }
.mdc .mc-reg-copy .tag { color: #FFE2CF; }
.mdc .mc-reg-copy .pg-list svg, .mdc .mc-reg-when svg { stroke: #FFE2CF; }

/* One flagship programme */
.mt-flagship { display: grid; grid-template-columns: 1.6fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(66,85,164,.14); background: #fff; }
.mt-flagship-main { padding: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mt-flag-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--mt-grad); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.mt-flagship-main h3 { font-size: clamp(28px, 3vw, 38px); margin: 0; }
.mt-flagship-main p { margin: 0; font-size: 16px; line-height: 1.7; }
.mt-checks.two { grid-template-columns: 1fr 1fr; gap: 10px 22px; width: 100%; }
.mt-flagship-side { background: var(--mt-grad); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.mt-flag-fact { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 12px 16px; color: #fff; }
.mt-flag-fact span { display: block; font-size: 13px; opacity: .85; }
.mt-flag-fact b { font-family: "Josefin Sans", sans-serif; font-size: 20px; }
.mt-flagship-side .mt-btn { justify-content: center; }
.mt-flagship-side .mt-btn.ghost-dark { background: #fff; border-color: #fff; }
.mt-persona-desc { margin: 0; font-size: 15px; line-height: 1.65; }
.mt-lo { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-violet) !important; font-size: 12px !important; margin-top: 4px; }
.mt-method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mt-method-step { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 12px 34px rgba(66,85,164,.08); position: relative; }
.mt-method-step .n { position: absolute; top: 20px; right: 22px; font-family: "Josefin Sans", sans-serif; font-size: 28px; font-weight: 700; color: #ECE6FD; }
.mt-method-step h3 { font-size: 19px; margin: 16px 0 8px; }
.mt-method-step p { margin: 0; font-size: 15px; line-height: 1.6; }
.mt-round-ic.sm { width: 46px; height: 46px; }
.mt-diagram { margin: 50px auto 0; max-width: 900px; }
.mt-dg-top { margin: 0 auto; width: min(420px, 100%); text-align: center; background: var(--mt-grad); color: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 16px 40px rgba(140,92,245,.3); }
.mt-dg-top small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.mt-dg-top b { display: block; font-family: "Josefin Sans", sans-serif; font-size: 26px; margin: 2px 0; }
.mt-dg-top span { font-size: 14px; opacity: .92; }
.mt-dg-lines { display: block; width: 100%; height: 70px; }
.mt-dg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mt-dg-out { border-radius: 12px; padding: 18px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mt-dg-out b { font-family: "Josefin Sans", sans-serif; font-size: 19px; }
.mt-dg-out span { font-size: 14px; opacity: .92; }
@media (max-width: 1000px) { .mt-flagship { grid-template-columns: 1fr; } .mt-method { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mt-checks.two, .mt-method, .mt-dg-row { grid-template-columns: 1fr; } .mt-dg-lines { display: none; } .mt-dg-row { margin-top: 14px; } .mt-flagship-main { padding: 26px; } }
/* MDC enrol: details grid + price card */
.mdc .mt-enrol-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.mdc .mt-enrol-grid .pg-details { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.mdc .mt-price { background: #fff; border: 1px solid #E9EBF6; border-radius: 14px; box-shadow: 0 14px 36px rgba(66,85,164,.12); padding: 26px; position: sticky; top: 100px; }
.mdc .mt-price-big { display: block; font-family: "Josefin Sans", sans-serif; font-size: 40px; font-weight: 700; color: #4255A4; margin-bottom: 10px; }
.mdc .mt-price-big small { font-size: 16px; color: var(--muted); font-weight: 500; }
.mdc .mt-price dl { margin: 0 0 18px; }
.mdc .mt-price dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF0F7; font-size: 15px; }
.mdc .mt-price dt { color: var(--muted); }
.mdc .mt-price dd { margin: 0; font-weight: 700; text-align: right; }
.mdc .mt-price .mt-btn { display: block; width: 100%; text-align: center; margin-bottom: 10px; box-sizing: border-box; }
.mdc .mt-price p { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 1000px) { .mdc .mt-enrol-grid { grid-template-columns: 1fr; } .mdc .mt-price { position: static; } }
@media (max-width: 560px) { .mdc .mt-enrol-grid .pg-details { grid-template-columns: 1fr; } }
/* MDC masterclass: landing layout (centered hero, stage card, badges, visual steps, counters) */
.mdc .mc-hero-c { text-align: center; }
.mdc .mc-hero-head { max-width: 900px; margin: 0 auto; }
.mdc .mc-hero-c h1 { margin: 18px 0 14px; }
.mdc .mc-hero-c .pg-sub { max-width: 720px; margin: 0 auto; }
.mdc .mc-stage { display: grid; grid-template-columns: 340px 1fr; max-width: 900px; margin: 36px auto 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(46,58,120,.28); text-align: left; }
.mdc .mc-stage-photo { position: relative; background: linear-gradient(180deg, #EEF0FF, #F7E9FF); display: flex; align-items: flex-end; justify-content: center; padding-top: 20px; min-height: 380px; }
.mdc .mc-stage-photo img { width: 270px; height: auto; display: block; margin-bottom: 70px; }
.mdc .mc-stage-photo .pg-nameplate { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.mdc .mc-stage-info { padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.mdc .mc-stage-tag { align-self: flex-start; background: #FFEDE3; color: #F5874A; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 30px; }
.mdc .mc-stage-info h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0; color: #4255A4; }
.mdc .mc-stage-info ul { list-style: none; margin: 0; padding: 0; }
.mdc .mc-stage-info li { display: grid; grid-template-columns: 24px 90px 1fr; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #EEF0F7; font-size: 15px; }
.mdc .mc-stage-info li span { color: #5C6286; }
.mdc .mc-stage-info li b { color: #2E3A78; }
.mdc .mc-stage-price s { color: #9AA0BD; font-size: 20px; }
.mdc .mc-stage-price strong { font-family: "Josefin Sans", sans-serif; font-size: 42px; color: #2E3A78; }
.mdc .mc-stage-price small { color: #5C6286; }
.mdc .mc-hero-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mdc .mc-hero-cta .mc-cta { font-size: 18px; padding: 18px 40px; box-shadow: 0 12px 28px rgba(245,135,74,.4); }
.mdc .mc-hero-cta .mc-note { justify-content: center; }
.mdc .mc-badges { background: #2E3A78; padding: 18px 0; }
.mdc .mc-badges .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.mdc .mc-badges span { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #2E3A78; font-weight: 700; padding: 9px 18px; border-radius: 30px; font-size: 15px; }
.mdc .mc-badges span.live { color: #F5874A; }
.mdc .mc-tag { display: inline-block; background: var(--mt-grad); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 6px; margin-bottom: 12px; }
.mdc .mc-step { padding: 0; overflow: hidden; border-color: #E9EBF6; }
.mdc .mc-step-visual { position: relative; height: 170px; background: var(--mt-grad); display: flex; align-items: center; justify-content: center; }
.mdc .mc-step:nth-child(2) .mc-step-visual { background: linear-gradient(160deg, #8C5CF5, #E06AF0); }
.mdc .mc-step:nth-child(3) .mc-step-visual { background: linear-gradient(160deg, #F5874A, #E06AF0); }
.mdc .mc-step-visual span { position: absolute; left: 16px; top: 14px; background: rgba(255,255,255,.22); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 20px; }
.mdc .mc-step-body { padding: 24px 26px 28px; }
.mdc .mc-step-body h3 { margin-top: 0; }
.mdc .mc-counters { background: var(--mt-grad); padding: 44px 0; }
.mdc .mc-counters .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.mdc .mc-counters strong { display: block; font-family: "Josefin Sans", sans-serif; font-size: clamp(36px, 4vw, 52px); color: #fff; line-height: 1.1; }
.mdc .mc-counters span { color: rgba(255,255,255,.9); font-size: 15px; }
.mdc .mc-sticky { justify-content: space-between; padding: 12px max(24px, calc((100% - 1160px) / 2)); border-top: 3px solid #F5874A; }
.mdc .mc-sticky-price { display: flex; flex-direction: column; line-height: 1.2; }
.mdc .mc-sticky-price strong { font-family: "Josefin Sans", sans-serif; font-size: 30px; color: #F5874A; }
.mdc .mc-sticky-price s { color: #9AA0BD; font-size: 18px; }
.mdc .mc-sticky-price > small { color: #5C6286; font-size: 13px; }
.mdc .mc-sticky .btn { padding: 14px 32px; border-radius: 30px; }
@media (max-width: 1000px) { .mdc .mc-stage { grid-template-columns: 1fr; } .mdc .mc-counters .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mdc .mc-stage-info { padding: 24px 20px; } .mdc .mc-stage-info li { grid-template-columns: 22px 76px 1fr; } .mdc .mc-sticky-price > small { display: none; } .mdc .mc-sticky-price strong { font-size: 24px; } .mdc .mc-sticky .btn { padding: 12px 20px; } }
.mdc .mc-stage-photo .pg-nameplate { left: 16px; right: 16px; bottom: 16px; transform: none; width: auto; max-width: none; background: #fff; color: #4255A4; padding: 12px 16px; }
.mdc .mc-stage-photo .pg-nameplate small { color: #F5874A; }
.mdc .mc-stage-photo .pg-nameplate span { color: #5C6286; font-size: 12.5px; }
.mdc .mc-stage-photo .pg-nameplate:hover { background: #F7F8FE; }
.mdc .mc-stage-photo img { margin-bottom: 110px; }
/* MDC masterclass thank-you page */
.mdc .mc-ty-head { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mdc .mc-ty-check { width: 88px; height: 88px; border-radius: 50%; background: #F5874A; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(255,255,255,.22); }
.mdc .mc-ty-head h1 { margin: 0; font-size: clamp(32px, 4.4vw, 50px); }
.mdc .mc-ty-head .pg-sub { margin: 0; }
.mdc .mc-ty-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mdc .mc-ty-pills > span { background: #fff; color: #2E3A78; font-weight: 700; padding: 8px 16px; border-radius: 30px; font-size: 15px; }
.mdc .mc-ty-head .mt-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.mdc .mc-ty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mdc .mc-ty-steps article { position: relative; background: #fff; border: 1px solid #E9EBF6; border-radius: 14px; padding: 28px; box-shadow: 0 10px 28px rgba(66,85,164,.08); }
.mdc .mc-ty-steps .n { position: absolute; top: 18px; right: 22px; font-family: "Josefin Sans", sans-serif; font-size: 44px; font-weight: 700; color: #EEE8FD; }
.mdc .mc-ty-steps .ic { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: #F2ECFE; align-items: center; justify-content: center; }
.mdc .mc-ty-steps h3 { margin: 16px 0 8px; font-size: 21px; color: #4255A4; }
.mdc .mc-ty-steps p { margin: 0; line-height: 1.7; }
.mdc .mc-ty-help { margin-top: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mdc .mc-ty-help p { margin: 0; }
.mdc .mc-ty-help .mt-actions { justify-content: center; }
@media (max-width: 1000px) { .mdc .mc-ty-steps { grid-template-columns: 1fr; } }
/* My Digital Classes certificate (container units: same markup for previews and the A4 PDF) */
.cert { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 297 / 210; background: linear-gradient(160deg, #5B7CFA 0%, #9A6BFA 48%, #E06AF0 100%); border-radius: 10px; box-shadow: 0 24px 50px rgba(46,58,120,.22); overflow: hidden; color: #2E3A78; font-family: "Mulish", sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cert-inner { position: absolute; inset: 1.6cqw; background: #fff; border-radius: .8cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.6cqw 7cqw 0; }
.cert-inner::before { content: ""; position: absolute; inset: 1.2cqw; border: .15cqw solid #E4E0FB; border-radius: .5cqw; pointer-events: none; }
.cert-blob { position: absolute; width: 30cqw; height: 30cqw; border-radius: 50%; background: linear-gradient(160deg, #9A6BFA, #E06AF0); opacity: .09; }
.cert-blob.a { top: -14cqw; right: -10cqw; }
.cert-blob.b { bottom: -16cqw; left: -12cqw; background: linear-gradient(160deg, #5B7CFA, #9A6BFA); }
.cert-brand { display: flex; align-items: center; gap: 1cqw; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 2cqw; color: #2E3A78; }
.cert-brand img { height: 3.4cqw; width: auto; }
.cert-brand i { font-style: normal; color: #F5874A; }
.cert-title { margin-top: 2.6cqw; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 5cqw; line-height: 1; letter-spacing: .5cqw; text-transform: uppercase; color: #4255A4; }
.cert-title small { display: block; margin-top: .9cqw; font-size: 1.45cqw; letter-spacing: .7cqw; color: #F5874A; }
.cert-line { margin: 2cqw 0 0; font-size: 1.5cqw; color: #5C6286; }
.cert-name { margin-top: .6cqw; font-family: "Great Vibes", cursive; font-size: 6cqw; line-height: 1.15; color: #2E3A78; padding: 0 4cqw .4cqw; border-bottom: .15cqw solid #D9D4FA; min-width: 46cqw; }
.cert-programme { margin-top: .9cqw; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 2.8cqw; background: linear-gradient(90deg, #5B7CFA, #9A6BFA, #E06AF0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cert-meta { margin: 1cqw 0 0; font-size: 1.25cqw; color: #5C6286; }
.cert-foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 3.6cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqw; }
.cert-sign { display: flex; flex-direction: column; align-items: center; justify-self: start; min-width: 20cqw; font-size: 1.1cqw; color: #5C6286; }
.cert-sign img { height: 5cqw; width: auto; }
.cert-script { font-family: "Great Vibes", cursive; font-size: 3.2cqw; color: #2E3A78; line-height: 1.2; }
.cert-sign b { margin-top: .4cqw; padding-top: .6cqw; border-top: .15cqw solid #C9C3F2; width: 100%; font-size: 1.3cqw; color: #2E3A78; }
.cert-seal { width: 11cqw; height: 11cqw; border-radius: 50%; background: linear-gradient(160deg, #F5874A, #E06AF0); display: flex; align-items: center; justify-content: center; border: .55cqw solid #FBE6F7; }
.cert-seal span { width: 8.6cqw; height: 8.6cqw; border-radius: 50%; border: .2cqw dashed rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 2.4cqw; line-height: 1.1; }
.cert-seal small { font-size: .85cqw; letter-spacing: .25cqw; text-transform: uppercase; }
.cert-verify { justify-self: end; display: flex; align-items: center; gap: 1.2cqw; text-align: left; font-size: .95cqw; color: #5C6286; max-width: 26cqw; }
.cert-qr { width: 7.4cqw; flex: none; }
.cert-qr svg { display: block; width: 100%; height: auto; }
.cert-qr path, .cert-qr rect[fill="black"] { fill: #2E3A78; }
.cert-verify b { display: block; font-size: 1.2cqw; color: #2E3A78; margin-bottom: .3cqw; }
.cert-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 12cqw; letter-spacing: 1cqw; text-transform: uppercase; color: rgba(140,92,245,.08); pointer-events: none; }
/* Programme page block + verify pages */
.mdc .mt-cert { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.mdc .mt-cert .mt-checks { margin: 18px 0 24px; }
.mdc .cert-verify-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.mdc .cert-ok { display: inline-flex; align-items: center; gap: 8px; background: #1B7A43; color: #fff; font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 30px; }
.mdc .cert-h1 { font-size: clamp(30px, 4vw, 44px); margin: 16px 0 8px; color: #4255A4; }
.mdc .cert-lead { font-size: 17px; margin: 0 0 20px; }
.mdc .cert-dl { margin: 0 0 24px; }
.mdc .cert-dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF0F7; }
.mdc .cert-dl dt { color: #5C6286; }
.mdc .cert-dl dd { margin: 0; font-weight: 700; color: #2E3A78; }
.mdc .cert-verify-page .mt-actions .mt-btn { display: inline-flex; align-items: center; gap: 8px; }
.mdc .cert-lookup { max-width: 640px; text-align: center; }
.mdc .cert-form { display: flex; gap: 10px; margin-top: 8px; }
.mdc .cert-form input { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid #D9DCEC; border-radius: 8px; font: inherit; font-size: 17px; text-transform: uppercase; }
.mdc .cert-msg { min-height: 1.5em; color: #C2410C; font-weight: 600; }
.mdc .cert-help { font-size: 15px; }
@media (max-width: 1000px) { .mdc .mt-cert, .mdc .cert-verify-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mdc .cert-dl div { grid-template-columns: 1fr; gap: 2px; } .mdc .cert-form { flex-direction: column; } }
.cert-brand span { color: #2E3A78; }