/* HospAux website: bold, outlined, playful; Mint & marigold. Roles: --night (the tinted sections: header,
   hero, how it works, footer), --lime (the main accent: primary buttons, highlights, the strip), --violet
   (the hero's accent and offset shadows), the tints for tiles and badges. */
:root {
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; --body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --night: #dcf3ec; --night-2: #c9ebe2; --on-dark: #3b5659;
  --lime: #ffb547; --violet: #2ec4b6; --blue: #12857a; --wrong: #e4572e;
  --coral: #ffc1ad; --sun: #ffdf99; --mint: #b4ebe0; --sky: #cbe9f6; --pink: #ffd7cb;
  --t-violet: #d7f1ec; --t-blue: #d6e8f1; --t-cream: #fff2db;
  --ink: #0b2e33; --ink-2: #3b5659; --muted: #5b7174; --line: #e2eae8; --cream: #fbfaf6;
  --glow-1: rgba(46,196,182,.28); --glow-2: rgba(255,181,71,.3); --accent-glow: rgba(255,181,71,.45);
  --night-text: var(--ink); --night-accent: #0f766e; --night-tag-bg: #fff; --night-tag-line: var(--ink);
  --night-frame: var(--ink); --night-pop: var(--ink); --night-cta-line: var(--ink); --hero-hl: #ffcf73; --hl: var(--lime);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16.5px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; }
.wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(36px, 5vw, 64px); }
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::before { content: ""; position: absolute; inset: 52% -4px 2% -4px; background: var(--hl); z-index: -1; border-radius: 6px; transform: rotate(-1.2deg); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 620px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 16px; font: 700 16px/1 var(--body); text-decoration: none; border: 2px solid var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn .ic { width: 18px; height: 18px; }
.ic { width: 24px; height: 24px; flex: none; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; border: 2px solid var(--ink); background: #fff; }
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: 52px; }
.section-head.center { text-align: center; justify-items: center; }

/* header: a rounded bar that floats. It overlaps the top of the page (the hero's padding makes room for it), so
   the hero's tint runs up behind it and, once the page scrolls, the page shows past it. */
:root { --head-h: 88px; }
.top { position: sticky; top: 0; z-index: 20; padding: 12px 0; margin-bottom: calc(-1 * var(--head-h)); color: var(--night-text); }
.top .wrap { position: relative; display: flex; align-items: center; gap: 30px; height: 64px; padding: 0 10px 0 22px; border: 2px solid var(--ink); border-radius: 22px; background: rgba(201, 235, 226, .95); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 14px 30px -20px rgba(11, 46, 51, .55); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 23px/1 var(--display); letter-spacing: -.03em; }
.brand .logo { width: 32px; height: 32px; flex: none; }
.brand em { font-style: normal; color: var(--night-accent); }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; color: var(--on-dark); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--night-text); }
.top .signin { margin-inline-start: auto; font-weight: 700; text-decoration: none; }
.top .btn { height: 44px; padding: 0 18px; font-size: 14.5px; border-color: var(--night-cta-line); }
.top .btn:hover { box-shadow: 3px 3px 0 var(--night-pop); }

/* hero */
.hero { position: relative; background: var(--night); color: var(--night-text); overflow: hidden; padding: calc(64px + var(--head-h)) 0 120px; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, var(--glow-1), transparent 65%); top: -160px; right: -120px; }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--glow-2), transparent 65%); bottom: -260px; left: -140px; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.6vw, 88px); margin: 22px 0 22px; }
.hero h1 .hl::before { background: var(--hero-hl); }
.hero .lead { color: var(--on-dark); }
.hero .tag { background: var(--night-tag-bg); border-color: var(--night-tag-line); color: var(--night-text); }
.hero .tag b { color: var(--night-accent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .btn-white:hover { box-shadow: 4px 4px 0 var(--lime); }
.hero .btn-lime:hover { box-shadow: 4px 4px 0 var(--night-pop); }
.stage { position: relative; }
.shot { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid var(--night-frame); transform: rotate(2deg); box-shadow: 18px 18px 0 var(--violet); background: #fff; }
.shot-crop { position: relative; aspect-ratio: 1160 / 720; overflow: hidden; }
.shot-crop img { position: absolute; width: 165.5%; max-width: none; left: -32.8%; top: -34.5%; }
.mark { position: absolute; border-radius: 8px; border: 3px solid var(--lime); box-shadow: 0 0 0 6px var(--accent-glow); }
.sticker { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; box-shadow: 4px 4px 0 var(--ink); }
.sticker small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.sticker .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 2px solid var(--ink); }
.step-bubble { position: absolute; z-index: 2; width: 270px; padding: 16px; border-radius: 18px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.step-bubble b { display: block; font: 800 12px/1 var(--body); letter-spacing: .08em; margin-bottom: 8px; }

/* marquee */
.marquee { background: var(--lime); border-block: 2px solid var(--ink); overflow: hidden; }
.marquee-track { display: flex; gap: 40px; padding: 16px 0; width: max-content; animation: slide 36s linear infinite; font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.marquee-track span { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; }
.marquee-track span::after { content: "✦"; font-size: 16px; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* numbers */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.number { padding: 28px; border-radius: 24px; border: 2px solid var(--ink); }
.number b { display: block; font: 800 clamp(44px, 5vw, 64px)/1 var(--display); letter-spacing: -.04em; }
.number span { display: block; margin-top: 10px; font-weight: 600; color: var(--ink-2); }
.c-sun { background: var(--sun); } .c-sky { background: var(--sky); } .c-pink { background: var(--pink); } .c-mint { background: var(--mint); } .c-coral { background: var(--coral); } .c-lime { background: var(--lime); } .c-violet { background: var(--t-violet); } .c-blue { background: var(--t-blue); } .c-cream { background: var(--t-cream); }

/* gap */
.gap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gap > div { padding: 34px; border-radius: 28px; border: 2px solid var(--ink); }
.gap h3 { font-size: 30px; margin-bottom: 18px; }
.gap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 17px; font-weight: 500; }
.gap li { display: flex; gap: 12px; }
.gap .before { background: #fff; }
.gap .before li::before { content: "✗"; color: var(--wrong); font-weight: 800; }
.gap .after { background: var(--night); color: var(--night-text); box-shadow: 8px 8px 0 var(--lime); }
.gap .after li::before { content: "✓"; color: var(--night-accent); font-weight: 800; }

/* steps */
.how { background: var(--night); color: var(--night-text); border-radius: 40px; margin-inline: 16px; }
.how .lead { color: var(--on-dark); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; padding: 28px 24px 30px; border-radius: 26px; color: var(--ink); border: 2px solid var(--ink); min-height: 260px; display: flex; flex-direction: column; }
.tile .big { font: 800 64px/1 var(--display); letter-spacing: -.04em; opacity: .9; }
.tile h3 { font-size: 26px; margin: auto 0 10px; }
.tile p { margin: 0; font-weight: 500; font-size: 15px; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; margin-top: 96px; }
.feature-row.flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.feature-row.flip .frame { order: 2; }
.frame { position: relative; border-radius: 22px; border: 3px solid var(--night-frame); overflow: hidden; background: #fff; }
.frame img { width: 100%; }
.feature-row h3 { font-size: clamp(30px, 3.4vw, 44px); margin: 16px 0 16px; }
.feature-row p { color: var(--on-dark); margin: 0 0 20px; font-size: 17px; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 600; }
.checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-end: 10px; border-radius: 8px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 800; }
.miss { position: absolute; border-radius: 6px; border: 3px solid var(--wrong); background: rgba(228,87,46,.14); }
.pop { position: absolute; z-index: 2; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.45; box-shadow: 4px 4px 0 var(--ink); }
.pop b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.pop span { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--line); font-weight: 600; }
.pop span.right { border-color: var(--ink); background: var(--lime); }

/* courses */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1001px) { .courses > :last-child:nth-child(3n+1) { grid-column: 2; } } /* a lone last course sits in the middle */
.course { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; min-height: 190px; border-radius: 26px; border: 2px solid var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.course:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.course .ic-wrap { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); }
.course h3 { font-size: 25px; margin-top: auto; }
.course p { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink-2); }

/* institutes */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.perk { padding: 20px; border-radius: 20px; border: 2px solid var(--ink); background: #fff; }
.perk .ic { margin-bottom: 10px; }
.perk h3 { font-size: 19px; margin-bottom: 6px; letter-spacing: -.02em; }
.perk p { margin: 0; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.board { border-radius: 28px; border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--sun); border-bottom: 2px solid var(--ink); }
.board-head b { font: 800 22px/1 var(--display); }
.board-head small { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.badge { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 800; font-size: 12.5px; background: #fff; white-space: nowrap; }
.board-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 2px solid var(--line); font-weight: 700; }
.board-row:last-child { border-bottom: 0; }
.bar { height: 12px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; position: relative; overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--blue); }

/* students */
.student-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.student-cards > div { padding: 26px; border-radius: 24px; border: 2px solid var(--ink); }
.student-cards h3 { font-size: 23px; margin: 18px 0 8px; }
.student-cards p { margin: 0; font-weight: 500; color: var(--ink-2); }

/* certificate */
.cert-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 36px; border: 2px solid var(--ink); background: var(--sky); }
.cert { --cert-navy: #13294b; --cert-gold: #a8823a; position: relative; container-type: inline-size; aspect-ratio: 297 / 210; padding: 1.8%; background: #fffdf7; color: var(--cert-navy); transform: rotate(-3deg); box-shadow: 10px 10px 0 var(--ink); }
/* the certificate as the app issues it: kicker, name, course and grade, then the HospAux and MedAura blocks */
.cert-frame { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; height: 100%; box-sizing: border-box; padding: 3.2cqi 5cqi 2.2cqi; border: .7cqi double var(--cert-navy); outline: .15cqi solid var(--cert-gold); outline-offset: -1.3cqi; text-align: center; font-family: Georgia, "Times New Roman", serif; }
.cert-frame::before, .cert-frame::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.cert-frame::before { inset: 1.4cqi; background: url("watermark-marks.svg") repeat; background-size: 7cqi 7cqi; opacity: .045; }
.cert-frame::after { left: 50%; top: 44%; width: 22cqi; height: 22cqi; transform: translate(-50%, -50%); background: url("watermark-mark-large.svg") center / contain no-repeat; opacity: .035; }
.cert-kicker { margin-top: auto; font-size: 2.5cqi; letter-spacing: .32em; text-transform: uppercase; }
.cert-lead { margin: 1.6cqi 0 0; font-size: 1.7cqi; font-style: italic; color: #4b5a72; }
.cert-name { margin-top: .8cqi; padding: 0 4cqi .6cqi; border-bottom: .12cqi solid var(--cert-gold); font-size: 4.6cqi; line-height: 1.2; font-style: italic; }
.cert-course { max-width: 78cqi; margin-top: .6cqi; font-size: 3.2cqi; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.cert-grade { margin-top: .6cqi; margin-bottom: auto; font-size: 2.5cqi; font-weight: 600; color: #7a5c22; }
.cert-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqi; width: 100%; margin-top: 2cqi; font-family: var(--body); }
.cert-party { display: grid; justify-items: center; gap: .35cqi; }
.cert-party-logo { display: flex; align-items: center; gap: .9cqi; padding: 0 4cqi 1cqi; margin-bottom: .5cqi; border-bottom: .12cqi solid var(--cert-navy); }
.cert-party-logo .cert-hx { width: 3cqi; height: 3cqi; }
.cert-party-logo img { height: 2.6cqi; width: auto; }
.cert-hospaux { font: 800 2.3cqi/1 var(--display); letter-spacing: -.03em; color: #0b2e33; }
.cert-hospaux b { color: #0F766E; font-weight: 800; }
.cert-medaura { font: 700 2.3cqi/1 var(--body); letter-spacing: -.02em; color: #0a2540; }
.cert-party > b { font-size: 1.6cqi; font-weight: 600; }
.cert-party > span { font-size: 1.25cqi; color: #6b778c; }
.cert-check { display: grid; justify-items: center; gap: .7cqi; }
.cert-check small { font-size: 1.2cqi; font-weight: 600; letter-spacing: .04em; color: #6b778c; }
.cert-qr { display: block; width: 9.5cqi; height: 9.5cqi; }
.cert-checkline { margin-top: 1.2cqi; font: 1.25cqi/1.4 var(--body); color: #6b778c; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { padding: 30px; border-radius: 28px; border: 2px solid var(--ink); background: #fff; display: flex; flex-direction: column; gap: 10px; }
.plan.hot { background: var(--night); color: var(--night-text); box-shadow: 10px 10px 0 var(--lime); }
.plan .what { font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.plan .price { font: 800 40px/1.05 var(--display); letter-spacing: -.03em; }
.plan ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 600; font-size: 15px; }
.plan li::before { content: "✓"; margin-inline-end: 10px; font-weight: 800; color: var(--blue); }
.plan.hot li::before { color: var(--night-accent); }
.plan p { margin: 0; color: var(--muted); font-weight: 500; }
.plan.hot p { color: var(--on-dark); }

/* medaura */
.medaura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 36px; background: var(--night); color: var(--night-text); }
.medaura .lead { color: var(--on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { padding: 10px 16px; border-radius: 14px; font-weight: 700; color: var(--ink); border: 2px solid var(--ink); }

/* faq */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details { border: 2px solid var(--ink); border-radius: 20px; padding: 20px 24px; background: #fff; }
.faq details[open] { background: var(--sun); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 700 19px/1.3 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 26px/1 var(--display); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 12px 0 0; font-weight: 500; }

/* cta */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: clamp(28px, 5vw, 64px); border-radius: 40px; background: var(--lime); border: 2px solid var(--ink); }
.form { display: grid; gap: 14px; padding: 28px; border-radius: 26px; background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.form input, .form select, .form textarea { font: 500 16px var(--body); padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--violet); outline-offset: 1px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


@media (max-width: 1000px) {
  .nav { display: none; }
  .hero .wrap, .split, .cert-band, .medaura, .cta, .feature-row, .feature-row.flip { grid-template-columns: minmax(0, 1fr); }
  .feature-row.flip .frame { order: 0; }
  .numbers, .tiles, .student-cards { grid-template-columns: 1fr 1fr; }
  .courses, .plans { grid-template-columns: 1fr 1fr; }
  .how { margin-inline: 8px; border-radius: 28px; }
}
@media (max-width: 640px) {
  .top .signin { display: none; }
  .top .btn { margin-inline-start: auto; }
  .hero { padding: calc(40px + var(--head-h)) 0 80px; }
  .gap, .numbers, .tiles, .student-cards, .courses, .plans, .perks, .form .two { grid-template-columns: minmax(0, 1fr); }
  .step-bubble, .sticker, .hide-sm { display: none; }
  .shot { transform: none; box-shadow: 8px 8px 0 var(--violet); }
  .tile { min-height: 0; }
  .tile h3 { margin-top: 18px; }
  .board-row { grid-template-columns: 1fr auto; }
  .board-row .bar { grid-column: 1 / -1; order: 3; }
  .pop { display: none; }
  .cert { transform: none; }
}
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; height: auto; min-height: 50px; padding-block: 12px; line-height: 1.25; } }

/* ---------- the site: the menu on every page ---------- */
.nav a[aria-current="page"] { color: var(--night-text); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--lime); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .close { display: none; }
.top.open .menu-btn .open { display: none; }
.top.open .menu-btn .close { display: block; }
@media (max-width: 1000px) {
  .menu-btn { display: grid; }
  :root { --head-h: 84px; }
  .top .wrap { gap: 12px; height: 60px; padding: 0 8px 0 16px; }
  .top .signin { margin-inline-start: auto; }
  .top.open .nav { display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 20px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 18px 30px -18px rgba(11,46,51,.4); }
  .top.open .nav a { padding: 14px 4px; border-bottom: 1px solid rgba(11,46,51,.12); font-size: 18px; color: var(--ink); }
  .top.open .nav a[aria-current="page"] { text-underline-offset: 6px; }
}
@media (max-width: 640px) { .top .btn { display: none; } .top .signin { display: inline; margin-inline-start: auto; } }

/* ---------- inner pages ---------- */
.page-hero { position: relative; background: var(--night); overflow: hidden; padding: calc(64px + var(--head-h)) 0 80px; border-bottom: 2px solid var(--ink); }
.page-hero::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--glow-1), transparent 65%); top: -220px; right: -140px; }
.page-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.page-hero h1 { font-size: clamp(42px, 5.6vw, 76px); margin: 18px 0 18px; }
.page-hero .lead { color: var(--ink-2); }
.page-hero .tag { background: #fff; }
.page-hero .hero-ctas { margin-top: 28px; }
.crumb { font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.hero-card { padding: 24px; border-radius: 26px; border: 2px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--violet); }
.hero-card h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px; }
.hero-card ol, .hero-card ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.jump a { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.jump a:hover { background: var(--lime); }

.block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: clamp(56px, 7vw, 96px) 0; border-bottom: 2px dashed var(--line); scroll-margin-top: 90px; }
.block:last-child { border-bottom: 0; }
.block.flip > .block-media { order: -1; }
.block h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 14px 0 16px; }
.block p { color: var(--ink-2); margin: 0 0 16px; font-size: 17px; }
.block .checks { margin-top: 18px; }
.block-media { position: relative; }
.block-media .frame { border-color: var(--ink); box-shadow: 10px 10px 0 var(--violet); }
.num-tag { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--ink); background: var(--lime); font: 800 20px/1 var(--display); }
.facts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.facts-row span { padding: 7px 12px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: 14px; }

.paper { position: relative; padding: 26px 28px; border-radius: 6px; background: #fffdf7; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--violet); font-size: 15px; transform: rotate(-1.5deg); }
.paper h3 { font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.paper dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.paper dt { color: var(--muted); }
.paper dd { margin: 0; font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 18px; }

.result-card { max-width: 380px; margin-inline: auto; padding: 26px; border-radius: 24px; border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--violet); text-align: center; }
.result-card .big-ic { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 20px; border: 2px solid var(--ink); background: var(--mint); }
.result-card b { display: block; font: 800 24px/1.1 var(--display); }
.result-card small { display: block; color: var(--muted); margin-top: 4px; }
.result-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 2px dashed var(--line); font-weight: 600; }
.result-row:first-of-type { margin-top: 16px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { padding: 26px; border-radius: 24px; border: 2px solid var(--ink); background: #fff; }
.card h3 { font-size: 22px; margin: 14px 0 8px; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--ink-2); font-weight: 500; }
.card .ic-wrap { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; }
.steps-num { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps-num > div { counter-increment: s; position: relative; padding: 26px 24px; border-radius: 24px; border: 2px solid var(--ink); background: #fff; }
.steps-num > div::before { content: counter(s, decimal-leading-zero); display: block; font: 800 44px/1 var(--display); letter-spacing: -.04em; color: var(--blue); margin-bottom: 14px; }
.steps-num h3 { font-size: 21px; margin-bottom: 8px; letter-spacing: -.02em; }
.steps-num p { margin: 0; font-weight: 500; color: var(--ink-2); }

/* courses page */
.course-full { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; padding: 32px; border-radius: 30px; border: 2px solid var(--ink); background: #fff; scroll-margin-top: 90px; }
.course-full + .course-full { margin-top: 20px; }
.course-full .ic-wrap { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; border: 2px solid var(--ink); }
.course-full h2 { font-size: clamp(28px, 3vw, 38px); margin: 16px 0 8px; }
.course-full .for { font-weight: 700; color: var(--ink-2); }
.course-full p { color: var(--ink-2); }
.course-full .chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.course-full .chips-row span { padding: 5px 10px; border-radius: 10px; background: var(--night); font-weight: 600; font-size: 13.5px; }
.includes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-weight: 600; font-size: 15px; }
.includes li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-end: 10px; border-radius: 7px; background: var(--lime); font-size: 12px; font-weight: 800; }
.units { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.units li { display: flex; gap: 14px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--line); font-weight: 600; }
.units li span { flex: none; min-width: 64px; font-size: 13px; font-weight: 700; color: var(--blue); }
.units .part { padding: 16px 2px 6px; border-bottom: 0; font: 800 14px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.course-index { display: flex; flex-wrap: wrap; gap: 8px; }
.course-index a { padding: 9px 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.course-index a:hover { background: var(--lime); }

/* institutes / students */
.att-list { border-radius: 26px; border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--violet); overflow: hidden; }
.att-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px; border-bottom: 2px solid var(--line); }
.att-row:last-child { border-bottom: 0; }
.att-row b { display: block; }
.att-row small { display: block; color: var(--muted); font-weight: 500; font-size: 14px; }
.att-row .badge { margin-inline-start: auto; }
.week { border-radius: 26px; border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--violet); padding: 22px; }
.week-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.week-head b { font: 800 22px/1 var(--display); }
.week-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); margin-top: 8px; font-weight: 600; }
.week-item.done { background: var(--mint); border-color: var(--ink); }
.week-item small { margin-inline-start: auto; color: var(--muted); font-weight: 600; }
.paces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.paces div { padding: 16px; border-radius: 18px; border: 2px solid var(--ink); background: #fff; }
.paces div.on { background: var(--lime); }
.paces b { display: block; font: 800 20px/1.1 var(--display); }
.paces small { display: block; font-weight: 600; color: var(--ink-2); margin-top: 6px; }

/* pricing */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; background: #fff; font-weight: 600; }
.compare th, .compare td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--night); font: 800 18px/1.2 var(--display); border-bottom: 2px solid var(--ink); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare tbody th { font-weight: 700; color: var(--ink-2); width: 34%; }
.table-wrap { overflow-x: auto; }

/* demo page */
.next-steps { counter-reset: n; margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.next-steps li { counter-increment: n; display: flex; gap: 14px; align-items: flex-start; font-weight: 600; }
.next-steps li::before { content: counter(n); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; border: 2px solid var(--ink); background: var(--lime); font: 800 16px/1 var(--display); }
.note { margin-top: 12px; font-size: 14px; color: var(--muted); font-weight: 500; }
.form textarea { min-height: 96px; resize: vertical; }

.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--lime); padding-bottom: 2px; }
.more:hover { border-color: var(--ink); }
.more .ic { width: 18px; height: 18px; }

@media (max-width: 1000px) {
  .page-hero .wrap, .block, .course-full { grid-template-columns: minmax(0, 1fr); }
  .block.flip > .block-media { order: 0; }
  .grid-3, .steps-num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .steps-num, .paces { grid-template-columns: minmax(0, 1fr); }
  .page-hero { padding: calc(40px + var(--head-h)) 0 56px; }
  .course-full { padding: 22px; }
  .paper { transform: none; }
  .att-row { flex-wrap: wrap; }
  .att-row .badge { margin-inline-start: 0; }
}

/* footer columns */
footer { margin-top: 0; padding: 56px 0 36px; background: var(--night); color: var(--ink-2); border-top: 2px solid var(--ink); }
.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand p { margin: 14px 0 0; max-width: 340px; font-weight: 500; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot h2 { font: 800 15px/1.2 var(--body); letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.foot a { text-decoration: none; font-weight: 600; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(11,46,51,.15); font-size: 14px; font-weight: 600; }
@media (max-width: 800px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

.caret { display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 3px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* the menu's own Book a demo button, for phones, where the header has no room for it */
.nav .nav-cta { display: none; }
@media (max-width: 640px) {
  .top.open .nav .nav-cta { display: inline-flex; justify-content: center; margin-top: 14px; padding: 0 18px; border-bottom: 2px solid var(--ink); font-size: 16px; color: var(--ink); }
}

/* ---------- course catalogue ---------- */
.catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cat-card { display: flex; flex-direction: column; border-radius: 26px; border: 2px solid var(--ink); background: #fff; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.cat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 2px solid var(--ink); text-decoration: none; }
.cat-top .ic-wrap { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; }
.cat-facts { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: 13.5px; }
.cat-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px; }
.cat-body h2 { font-size: 25px; letter-spacing: -.02em; }
.cat-body h2 a { text-decoration: none; }
.cat-body h2 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }
.cat-body .for { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.cat-body p { margin: 0; color: var(--ink-2); font-size: 15px; }
.cat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.cat-actions .btn { height: 46px; padding: 0 18px; font-size: 15px; }

/* ---------- a course's page ---------- */
.course-hero { padding-bottom: 64px; }
.course-hero .wrap { grid-template-columns: minmax(0, 1fr); }
.course-hero .wrap > div { max-width: calc(100% - 420px); }
.course-title { display: flex; align-items: center; gap: 18px; margin: 18px 0 12px; }
.course-title .ic-wrap { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; border: 2px solid var(--ink); }
.course-title .ic-wrap .ic { width: 30px; height: 30px; }
.course-title h1 { margin: 0; font-size: clamp(38px, 5vw, 66px); }
.course-hero .for { margin: 0 0 12px; font-weight: 700; color: var(--ink-2); }
.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; padding-bottom: 96px; }
.enrol { grid-column: 2; grid-row: 1; position: sticky; top: 92px; margin-top: -250px; z-index: 2; display: grid; gap: 16px; }
.course-main { grid-column: 1; grid-row: 1; }
.enrol-card { padding: 26px; border-radius: 26px; border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--violet); }
.enrol-card h2 { font-size: 26px; letter-spacing: -.02em; }
.enrol-price { margin: 10px 0 18px; font: 800 22px/1.2 var(--display); }
.enrol-price small { display: block; margin-top: 4px; font: 500 14px/1.4 var(--body); color: var(--muted); }
.enrol-btn { width: 100%; height: 58px; font-size: 17px; }
.enrol-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.enrol-alt { margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--line); font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.enrol-alt a { font-weight: 800; color: var(--ink); }
.uni-card { display: flex; gap: 14px; padding: 20px; border-radius: 22px; border: 2px solid var(--ink); background: var(--night); }
.uni-card .ic-wrap { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--ink); }
.uni-card b { display: block; font-size: 16px; }
.uni-card p { margin: 6px 0 12px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.uni-card .btn { height: 44px; padding: 0 18px; font-size: 14.5px; }
.cm-section { padding: 56px 0 8px; scroll-margin-top: 90px; }
.cm-section > h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 12px; }
.muted-lead { margin: 0 0 18px; color: var(--ink-2); font-size: 17px; }
.roles-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; }
.roles-row .label { font-weight: 800; font-size: 14px; margin-inline-end: 6px; }
.roles-row span:not(.label) { padding: 5px 11px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; font-weight: 600; font-size: 13.5px; }
.part-head { margin: 26px 0 10px; font: 800 15px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.unit { border: 2px solid var(--ink); border-radius: 18px; background: #fff; margin-top: 10px; }
.unit[open] { box-shadow: 6px 6px 0 var(--mint); }
.unit summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; }
.unit summary::-webkit-details-marker { display: none; }
.unit summary::after { content: "+"; margin-inline-start: 4px; font: 800 22px/1 var(--display); }
.unit[open] summary::after { content: "–"; }
.unit-n { flex: none; min-width: 62px; font-size: 13px; color: var(--blue); }
.unit-t { flex: 1; font-size: 17px; }
.unit-c { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.unit ol { margin: 0; padding: 4px 20px 18px 98px; display: grid; gap: 6px; color: var(--ink-2); font-weight: 500; }
.cm-section .card .kind { display: block; margin-top: 14px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cm-section .card h3 { margin-top: 6px; }
.cm-section .card .doc { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.mini-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-steps div { padding: 18px; border-radius: 18px; border: 2px solid var(--ink); background: #fff; }
.mini-steps b { display: block; font: 800 19px/1.2 var(--display); margin-bottom: 4px; }
.mini-steps span { color: var(--ink-2); font-weight: 500; font-size: 15px; }
.cert-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.cert-row h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.cert-row p { color: var(--ink-2); }
.enrol-bar { display: none; }

@media (max-width: 1100px) {
  .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-hero .wrap > div { max-width: none; }
  .course-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .enrol { grid-column: 1; grid-row: auto; position: static; margin-top: -32px; }
  .course-main { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .catalogue, .mini-steps, .cert-row { grid-template-columns: minmax(0, 1fr); }
  .unit ol { padding-inline-start: 40px; }
  .unit summary { flex-wrap: wrap; gap: 4px 12px; }
  .unit-c { width: 100%; padding-inline-start: 74px; }
  .course-title .ic-wrap { width: 52px; height: 52px; }
  /* on phones, enrolling stays one tap away */
  .enrol-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--night); border-top: 2px solid var(--ink); }
  .enrol-bar b { display: block; font-size: 15px; }
  .enrol-bar small { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
  .enrol-bar .btn { flex: none; height: 46px; min-height: 0; padding: 0 18px; white-space: nowrap; }
  .enrol-bar > span { min-width: 0; }
  .enrol-bar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.enrol-bar) footer { padding-bottom: 96px; }
}
.about-course { margin: 0; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--sun); font-weight: 700; }

/* ---------- MedAura on the home page ---------- */
.medaura-sec { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: #fff; }
.ma-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.ma-intro .lead { margin: 0; color: var(--ink-2); }
.journey { padding: 26px; border-radius: 28px; border: 2px solid var(--ink); background: var(--night); box-shadow: 10px 10px 0 var(--violet); }
.journey-head { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 24px; align-items: baseline; margin-bottom: 20px; }
.journey-head b { font: 800 24px/1.15 var(--display); letter-spacing: -.02em; }
.journey-head span { color: var(--ink-2); font-weight: 500; }
.flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; counter-reset: f; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; border: 2px solid var(--ink); counter-increment: f; }
.flow li::before { content: counter(f); position: absolute; top: -12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--ink); background: #fff; font: 800 13px/1 var(--display); }
.flow li + li::after { content: "→"; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); font: 800 20px/1 var(--display); color: var(--ink); }
.flow .ic { width: 26px; height: 26px; margin-bottom: 6px; }
.flow b { font: 800 17px/1.2 var(--display); }
.flow small { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.ma-sub { margin: 56px 0 18px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.ma-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ma-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; border: 2px solid var(--ink); background: #fff; }
.ma-head { display: flex; gap: 12px; align-items: center; }
.ma-head .ic-wrap { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 2px solid var(--ink); }
.ma-head b { display: block; font: 800 19px/1.1 var(--display); }
.ma-head small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.ma-card > p { margin: 0; font-weight: 600; font-size: 14.5px; }
.ma-card .ma-mods { font-weight: 500; font-size: 13px; color: var(--ink-2); }
.ma-courses { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-top: 10px; border-top: 2px dashed var(--line); }
.ma-courses span { font-size: 12px; font-weight: 800; color: var(--muted); margin-inline-end: 2px; }
.ma-courses a { padding: 3px 8px; border-radius: 8px; background: var(--night); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ma-courses a:hover { background: var(--lime); }
/* on a course's page */
.ma-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.ma-line span { font-weight: 800; font-size: 14px; margin-inline-end: 4px; }
.ma-line b { padding: 4px 10px; border-radius: 9px; border: 2px solid var(--ink); background: #fff; font-size: 13.5px; }
@media (max-width: 1100px) {
  .ma-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .flow li:nth-child(4)::after { display: none; }
}
@media (max-width: 760px) {
  .ma-intro, .journey-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow li + li::after { content: "↓"; left: 50%; top: -20px; transform: translateX(-50%); }
  .flow li:nth-child(4)::after { display: block; }
  .flow li { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
  .flow .ic { margin: 0; }
  .flow small { width: 100%; padding-inline-start: 38px; }
}
@media (max-width: 480px) { .ma-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- about, contact and the legal pages ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 40px 0 12px; letter-spacing: -.02em; }
.prose h2:first-child, .prose .legal-draft + h2 { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-inline-start: 22px; display: grid; gap: 8px; }
.prose a { color: var(--ink); font-weight: 700; }
.prose b { color: var(--ink); }
.legal-draft { margin: 0 0 36px !important; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--ink); background: var(--sun); color: var(--ink) !important; font-size: 15px !important; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0 0 20px; font-size: 17px; }
.details dt { font-weight: 700; color: var(--ink); }
.details dd { margin: 0; color: var(--ink-2); }
.details > div { display: contents; }
.details > div[hidden] { display: none; }
/* a company detail not yet given: plainly marked, so it's never mistaken for the real thing */
.co.tbc { padding: 1px 6px; border-radius: 6px; border: 1.5px dashed var(--wrong); background: #fff3ef; color: #9a3412; font-weight: 600; font-size: .92em; }
.foot-contact { margin-top: 12px !important; font-weight: 600; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.legal nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal a { text-decoration: none; font-weight: 600; }
.legal a:hover { text-decoration: underline; color: var(--ink); }

/* ---------- examples, the video, proof ---------- */
[data-example] { position: relative; }
[data-example]::before { content: "Example"; position: absolute; top: -13px; left: 18px; z-index: 3; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font: 800 11.5px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.cert[data-example]::before { top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--body); letter-spacing: .06em; }
.pop .pop-src { display: block; margin-bottom: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.ma-video { margin: 44px 0 0; }
.ma-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; border: 2px solid var(--ink); background: var(--night); box-shadow: 10px 10px 0 var(--violet); }
.ma-video figcaption { margin-top: 18px; color: var(--ink-2); font-weight: 500; }
.ma-video figcaption b { color: var(--ink); margin-inline-end: 6px; }
.checked { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; padding: 20px 22px; border-radius: 22px; border: 2px solid var(--ink); background: #fff; }
.checked .ic-wrap { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--ink); }
.checked b { display: block; font: 800 19px/1.2 var(--display); margin-bottom: 4px; }
.checked p { margin: 0; color: var(--ink-2); font-weight: 500; }
.proof { padding: 48px 0; }
.proof h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 18px; }
.partner-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.partner-list li { padding: 14px 18px; border-radius: 18px; border: 2px solid var(--ink); background: #fff; }
.partner-list b { display: block; }
.partner-list small { color: var(--muted); font-weight: 600; }
/* the hero: the headline makes room for who it's for and both buttons */
.hero h1 { font-size: clamp(40px, 5vw, 68px); }
/* boxes that clip their corners: let the Example label sit on the edge, and round the coloured head instead */
.board[data-example], .att-list[data-example] { overflow: visible; }
.board[data-example] .board-head { border-radius: 26px 26px 0 0; }
/* tinted cards keep their tint (.card's white comes later in this file) */
.card.c-sun { background: var(--sun); } .card.c-sky { background: var(--sky); } .card.c-mint { background: var(--mint); } .card.c-pink { background: var(--pink); }
.card.c-coral { background: var(--coral); } .card.c-violet { background: var(--t-violet); } .card.c-blue { background: var(--t-blue); } .card.c-lime { background: var(--lime); } .card.c-cream { background: var(--t-cream); }
.ma-video video.ambient { pointer-events: none; object-fit: cover; }

/* where a course fits colleges' syllabi */
.unit.syl summary .unit-c { white-space: normal; text-align: end; }
.syl-rows { list-style: none; margin: 0; padding: 0 20px 14px; }
.syl-rows li { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 2px solid var(--line); }
.syl-when { font-size: 13px; font-weight: 700; color: var(--blue); }
.syl-units { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .unit.syl summary { flex-wrap: nowrap; align-items: flex-start; }
  .unit.syl summary .unit-c { width: auto; padding-inline-start: 0; }
  .syl-rows li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .syl-when { grid-column: 1 / -1; }
}
.syl-pack { margin: 16px 0 0; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 var(--mint); }