/* HealthTab Training — our own course engine.
   Type scale, spacing and timings are calibrated against the Rise 360 export served at /rise. */

@font-face { font-family: "Proxima Nova"; font-weight: 300; src: url("/assets/ProximaNova-Light-c4e16a3f.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Proxima Nova"; font-weight: 400; src: url("/assets/ProximaNova-Regular-8bed4a6a.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Proxima Nova"; font-weight: 700; src: url("/assets/ProximaNova-Bold-a234c77e.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Proxima Nova"; font-weight: 900; src: url("/assets/ProximaNova-Bold-a234c77e.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 300; src: url("/assets/Lato-Light-3633e4ed.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 400; src: url("/assets/Lato-Regular-e59d4fe8.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; src: url("/assets/Lato-Italic-3adbb8e7.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 700; src: url("/assets/Lato-Bold-cf734c8c.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 900; src: url("/assets/Lato-Black-9ba78330.woff") format("woff"); font-display: swap; }

:root {
  --color-theme: #009ddc;
  --color-theme-contrast: #fff;
  --color-theme-tint: #e6f5fc;
  --color-text: #000;
  --color-muted: #707070;
  --color-border: #eaeaea;
  --color-page: #f5f5f5;
  --color-surface: #fff;
  --font-body: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Lato", "Helvetica Neue", Arial, sans-serif;
  --sidebar-width: 28rem;
  --container-max: 104rem;  /* 920px content + 60px side padding, as Rise */
  --text-max: 76.2rem;      /* Rise's text column */
  --radius: .3rem;
  --shadow-card: 0 .2rem .4rem rgba(0,0,0,.05), 0 .6rem 2rem rgba(0,0,0,.12);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--color-page); color: var(--color-text); font-family: var(--font-body); font-size: 1.6rem; line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: var(--color-theme); }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-body); color: var(--color-text); }
p { margin: 0; }
[hidden] { display: none !important; }
mark { background: rgba(0,157,220,.2); color: inherit; }
:focus-visible { outline: .3rem solid rgba(0,157,220,.5); outline-offset: .2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border: .1rem solid transparent; border-radius: .2rem; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  height: 4rem; transition: background .3s, opacity .3s, transform .2s var(--ease);
  /* Label is uppercase, so the line box reserves descender space no glyph uses
     and the text reads high. Pad the top by twice that half-descender to sit the
     ink on the middle. --optical scales with font-size, so it holds at any size. */
  --optical: .17em; padding: var(--optical) 2.4rem 0;
}
.btn--primary { background: var(--color-theme); color: var(--color-theme-contrast); }
.btn--light { background: #fff; color: #222; }
.btn--pill { border-radius: 2rem; min-width: 17rem; }
.btn:hover { opacity: .85; }
.btn:active { transform: translateY(.1rem); }
/* The cover button grows instead of dimming. Every other button keeps the
   lighter-blue hover. */
.cover__start:hover { opacity: 1; transform: scale(1.05); }
.cover__start:active { transform: scale(1.01); }
.btn .icon { font-size: 1.4rem; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* progress ring used in sidebar and overview */
.ring { position: relative; width: 1.8rem; height: 1.8rem; flex: none; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(0,0,0,.15); stroke-width: 2; }
.ring__arc { fill: none; stroke: var(--color-theme); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; transition: stroke-dashoffset .4s ease-out; }
.ring__check { position: absolute; inset: 0; border-radius: 50%; background: var(--color-theme); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.is-complete .ring__check { opacity: 1; transform: none; }

/* ---------- cover page ---------- */
.cover__hero { background: var(--color-theme); color: #fff; }
.cover__hero { min-height: 50rem; display: flex; align-items: flex-start; }
.cover__panel { width: 100%; max-width: 74rem; margin: 0 auto; padding: 12.4rem 2rem 0; }
.cover__title { color: #fff; font-size: 6rem; font-weight: 900; line-height: 7rem; margin: 2rem 0 3rem; }
.cover__progress { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 3.2rem; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700; letter-spacing: .05rem; text-transform: uppercase; }
.cover__progress-track { width: 16rem; height: .3rem; background: rgba(255,255,255,.35); border-radius: .2rem; overflow: hidden; }
.cover__progress-bar, .sidebar__progress-bar { height: 100%; width: 0; background: #fff; transition: width .6s var(--ease); }
.cover__start { height: 4.3rem; padding: var(--optical) 2.8rem 0; border-radius: 10rem; font-size: 1.2rem; font-weight: 900; letter-spacing: .08em; margin-bottom: 1.7rem; }
.cover__body { width: 100%; max-width: 74rem; margin: 0 auto; padding: 6rem 2rem 8rem; }
.cover__logo { display: block; width: 7.5rem; height: 7.5rem; margin-bottom: 3rem; }
.cover__description { font-size: 1.6rem; line-height: 3.3rem; margin-bottom: 6rem; }

.overview__section { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: .06rem; text-transform: uppercase; color: #000; border-bottom: .1rem solid rgba(0,0,0,.1); padding: .5rem 0; margin: 1.5rem 0; }
.overview__list, .sidebar__list { list-style: none; margin: 0; padding: 0; }
.overview__link { display: flex; align-items: center; gap: 1.6rem; padding: 2rem 1rem 2rem 4rem; position: relative; border-radius: var(--radius); color: #000; text-decoration: none; font-family: var(--font-ui); font-size: 1.3rem; font-weight: 700; transition: background .3s; }
.overview__link:hover { background: #f3f3f3; transition-duration: .1s; }
.overview__icon { position: absolute; left: .8rem; color: #717376; font-size: 1.6rem; display: flex; }
.overview__title { flex: 1; }

/* ---------- lesson layout ---------- */
.body--lesson { background: var(--color-surface); }
.lesson { min-height: 100vh; }
.lesson-rule { position: relative; height: .2rem; background: rgba(0,0,0,.08); }
.lesson-rule__fill { height: 100%; width: 0; background: var(--color-theme); transition: width .4s ease-out; }

.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); background: #fff; border-right: .1rem solid #e5e5e5;
  display: flex; flex-direction: column; overflow-y: auto; z-index: 20; transition: transform .3s var(--ease); font-family: var(--font-ui);
}
.sidebar__header { position: relative; background: var(--color-theme); color: #fff; padding: 3.6rem 1.5rem 1.6rem; overflow: hidden; min-height: 14rem; }
.sidebar__header-content { transition: transform .3s var(--ease) .1s, opacity .2s linear; }
.sidebar--searching .sidebar__header-content { transform: translateY(calc(-100% - 2rem)); opacity: 0; transition-delay: 0s; }
.sidebar__search-btn { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.6rem; height: 2.6rem; border: 0; background: none; color: #fff; cursor: pointer; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; border-radius: .3rem; transition: transform .3s var(--ease), opacity .2s; }
.sidebar__search-btn:hover { background: rgba(255,255,255,.18); }
.sidebar--searching .sidebar__search-btn { opacity: 0; transform: translateY(-1.5rem); pointer-events: none; }
.sidebar__course { display: block; color: #fff; text-decoration: none; font-family: var(--font-body); font-size: 2.6rem; font-weight: 900; line-height: 1.15; margin-bottom: 3.2rem; }
.sidebar__progress { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.sidebar__progress-track { height: .2rem; background: rgba(255,255,255,.35); margin-bottom: 1rem; overflow: hidden; }
.sidebar__search { position: absolute; left: 1.9rem; right: 1.9rem; top: 1.9rem; z-index: 3; display: flex; align-items: center; background: #fff; border-radius: 10rem; padding: .7rem 1.2rem; transform: translateY(calc(-100% - 2rem)); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
.sidebar--searching .sidebar__search { transform: none; visibility: visible; transition: transform .3s var(--ease) .1s, visibility 0s; }
.sidebar__search-icon { color: #444; font-size: 1.6rem; display: flex; flex: none; }
.sidebar__search-input { flex: 1; min-width: 0; margin: 0 1rem; border: 0; background: transparent; font-family: var(--font-ui); font-size: 1.5rem; color: #000; }
.sidebar__search-input::placeholder { color: #000; opacity: .55; }
.sidebar__search-input:focus { outline: none; }
.sidebar__search-close { flex: none; width: 2rem; height: 2rem; border: 0; background: none; padding: 0; color: #76767c; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.sidebar__search-close:hover { color: #000; }
.sidebar__nav { padding: 1.5rem 1.5rem 3rem; flex: 1; }
.sidebar__section { display: flex; align-items: center; gap: .3rem; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000; margin: 2rem 0 .6rem; padding-bottom: .8rem; border-bottom: .1rem solid #e5e5e5; }
.sidebar__section .icon { font-size: 1.2rem; color: #555; }
.sidebar__item { margin: 0 -1.5rem; }
.sidebar__link { display: flex; align-items: center; gap: 1rem; padding: 1.8rem 1.5rem 1.8rem 1.5rem; color: #000; text-decoration: none; font-size: 1.3rem; font-weight: 700; line-height: 1.25; border-left: .3rem solid transparent; transition: background .2s; }
.sidebar__link:hover { background: #f7f7f7; }
.sidebar__item--current .sidebar__link { background: #f2f2f2; border-left-color: var(--color-theme); }
.sidebar__link-icon { color: #717376; font-size: 1.6rem; display: flex; }
.sidebar__link-title { flex: 1; }
.sidebar__scrim { display: none; }
.sidebar__results { padding: 1.5rem; }
.search__result { display: block; padding: 1.2rem 1rem; margin: 0 -1rem; border-radius: var(--radius); text-decoration: none; color: #000; }
.search__result:hover { background: #f5f5f5; }
.search__section { display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.search__title { display: block; font-size: 1.3rem; font-weight: 700; margin: .2rem 0; }
.search__snippet { display: block; font-size: 1.2rem; color: #444; line-height: 1.5; }
.search__empty { font-size: 1.3rem; color: var(--color-muted); padding: 1rem; }

.lesson__content { margin-left: var(--sidebar-width); transition: margin .3s var(--ease); min-height: 100vh; display: flex; flex-direction: column; }
.lesson--nav-closed .sidebar { transform: translateX(-100%); }
.lesson--nav-closed .lesson__content { margin-left: 0; }
.lesson__menu-btn { position: fixed; top: .8rem; left: calc(var(--sidebar-width) + 1rem); z-index: 30; width: 3.6rem; height: 3.6rem; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #000; transition: left .3s var(--ease); }
.lesson--nav-closed .lesson__menu-btn { left: 1rem; }

.lesson-header { padding: 4.5rem 0 0; }
.lesson-header__inner { max-width: 104rem; margin: 0 auto; padding: 0 6rem 7.2rem; }
.lesson-header__inner > * { max-width: var(--text-max); margin-left: auto; margin-right: auto; }
.lesson-header__counter { font-size: 1.2rem; font-style: italic; color: #000; margin-bottom: 1.6rem; }
.lesson-header__title { font-size: 4rem; font-weight: 700; line-height: 1.2; padding-bottom: 3rem; position: relative; }
.lesson-header__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 11.4rem; height: .3rem; background: var(--color-theme); }
.lesson-header__description { margin-top: 2.4rem; font-size: 1.7rem; line-height: 1.94; }

.blocks { flex: 1; }
.lesson-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.4rem 2rem; background: var(--color-page); border-bottom: .1rem solid #e5e5e5; color: #000; text-decoration: none; font-family: var(--font-ui); font-size: 1.3rem; font-weight: 700; transition: background .3s; }
.lesson-nav:hover { background: #ececec; }
.lesson-nav .icon { font-size: 1.6rem; }

.lesson-footer { margin-top: auto; background: var(--color-page); border-top: .1rem solid #e5e5e5; animation: footerUp .5s var(--ease) both; }
@keyframes footerUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lesson-footer { animation: none; } }
.lesson-footer__next { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 2rem 1.6rem; color: #000; text-decoration: none; font-family: var(--font-ui); font-size: 1.3rem; font-weight: 700; transition: background .3s; }
.lesson-footer__next:hover { background: #ececec; }
.lesson-footer__next .icon { font-size: 1.6rem; }

/* ---------- blocks ---------- */
.block { position: relative; background: #fff; }
.block__inner { max-width: 104rem; margin: 0 auto; padding: 0 6rem; }
/* Default block width is Rise's text column, centred in the 920px content box. */
.block__inner > * { max-width: var(--text-max); margin: 0 auto; }
/* Blocks that use the full content width instead. */
.block--gallery .block__inner > *,
.block--image-hero .block__inner > *,
.block--image-aside .block__inner > *,
.block--flashcard .block__inner > * { max-width: none; }
.block--embed .block__inner > * { max-width: 70rem; }
.block--video .block__inner > * { max-width: 76rem; }
/* Rise never upscales an image past its natural size. */
.gallery__img, .image-hero__img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; }
/* Rise does stretch the text-aside image to fill its column. */
.image-aside__img { display: block; width: 100%; height: auto; }
.block--animate { opacity: 0; transform: translateY(2rem); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.block--animate.is-visible { opacity: 1; transform: none; }
/* Text-aside blocks fade in place while the image slides in from the side it
   sits on, rather than the whole block lifting. */
.block--image-aside.block--animate { transform: none; }
.block--image-aside .image-aside__figure { transform: translateX(-4rem); transition: transform .9s var(--ease) .25s; }
.block--image-aside.image-aside--reverse .image-aside__figure { transform: translateX(4rem); }
.block--image-aside.is-visible .image-aside__figure { transform: none; }
.is-gated { display: none; }
@media (prefers-reduced-motion: reduce) {
  .block--animate { opacity: 1; transform: none; transition: none; }
  .block--image-aside .image-aside__figure { transform: none; transition: none; }
}

/* padding scale: Rise's paddingTop/paddingBottom 0–8 → rem (3 = default 30px) */
[data-pt="0"] { padding-top: 0; } [data-pb="0"] { padding-bottom: 0; }
[data-pt="1"] { padding-top: 1rem; } [data-pb="1"] { padding-bottom: 1rem; }
[data-pt="2"] { padding-top: 2rem; } [data-pb="2"] { padding-bottom: 2rem; }
[data-pt="3"] { padding-top: 3rem; } [data-pb="3"] { padding-bottom: 3rem; }
[data-pt="4"] { padding-top: 4.5rem; } [data-pb="4"] { padding-bottom: 4.5rem; }
[data-pt="5"] { padding-top: 6rem; } [data-pb="5"] { padding-bottom: 6rem; }
[data-pt="6"] { padding-top: 7.5rem; } [data-pb="6"] { padding-bottom: 7.5rem; }
[data-pt="7"] { padding-top: 9rem; } [data-pb="7"] { padding-bottom: 9rem; }
[data-pt="8"] { padding-top: 10.5rem; } [data-pb="8"] { padding-bottom: 10.5rem; }

/* text */
.text__heading { font-size: 2.8rem; font-weight: 700; line-height: 1.25; padding: .8rem 0; }
.text__subheading { font-size: 2.2rem; font-weight: 700; line-height: 1.25; padding: .8rem 0; }
.text__body, .image-aside__text, .process__description { font-size: 1.7rem; line-height: 1.94; }
.text__body p + p, .image-aside__text p + p, .process__description p + p { margin-top: 3.4rem; }
.text__body ul, .text__body ol { padding-left: 2.4rem; }
.note { display: flex; gap: 1.2rem; background: var(--color-theme-tint); border: .06rem solid var(--color-theme); border-radius: .3rem; padding: 2.4rem 3.2rem 2.4rem 2.4rem; }
.note__icon { color: var(--color-theme); font-size: 2rem; display: flex; margin-top: .2rem; }
.note__body { font-size: 1.5rem; line-height: 1.66; }
.note__body p + p { margin-top: 1.2rem; }
.caption { font-size: 1.2rem; line-height: 2; color: #000; border-bottom: .1rem solid var(--color-border); padding: 1.3rem 0 1rem; margin: .4rem 0 0; }

/* images */
.zoomable { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoomable-img { cursor: zoom-in; }
/* Rise lets this row overhang the container on the image side, so it runs about
   1000px wide rather than the 920px content box. */
.image-aside { display: flex; align-items: center; margin-left: -7.9rem; width: calc(100% + 7.9rem); }
.image-aside--reverse .image-aside { flex-direction: row-reverse; margin-left: 0; margin-right: -7.9rem; }
.image-aside__figure { margin: 0; flex: 0 0 66.6%; min-width: 0; }
.image-aside--large .image-aside__figure { flex-basis: 73.3%; }
.image-aside--small .image-aside__figure { flex-basis: 50%; }
.image-aside__text { flex: 1; min-width: 0; padding-left: 6rem; }
.image-aside--reverse .image-aside__text { padding-left: 0; padding-right: 6rem; }
.image-aside__text p { line-height: 2; }
.image-aside__text p strong { font-size: 1.7rem; }
.image-hero { margin: 0; }
.image-hero .caption { max-width: var(--text-max); margin: .75rem auto 0; }
.block--full-bleed .block__inner { padding: 0; max-width: none; }
.block--full-bleed .block__inner > * { margin-left: 0; max-width: none; }
.image-full { margin: 0; }
.image-full__media { position: relative; width: 100%; max-height: 70rem; min-height: 20rem; overflow: hidden; background-position: 50%; background-size: cover; background-repeat: no-repeat; }
.image-full__media > img { display: block; width: 100%; max-height: 70rem; opacity: 0; }
.image-full__caption { max-width: 104rem; margin: .75rem auto 0; padding: 0 6rem; }
.gallery__stage { position: relative; }
.gallery__viewport { overflow: hidden; transition: height .3s ease-in-out; }
.gallery__track { display: flex; align-items: flex-start; transition: transform .3s ease-in-out; }
.gallery__slide { flex: 0 0 100%; min-width: 0; margin: 0; }
/* Large, thin chevrons set well outside the image, as Rise draws them. */
.gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 5rem; height: 8rem; border: 0; background: none; color: #9a9a9a; cursor: pointer; font-size: 5.6rem; display: flex; align-items: center; justify-content: center; transition: color .2s; }
.gallery__arrow .icon { stroke-width: 1.2; }
.gallery__arrow:hover { color: #000; }
.gallery__arrow--prev { left: -11rem; } .gallery__arrow--next { right: -11rem; }
.gallery__dots { list-style: none; display: flex; justify-content: center; gap: 1.6rem; margin: 2rem 0 0; padding: 0; }
.gallery__dot { width: 1.2rem; height: 1.2rem; padding: 0; border: 0; border-radius: 50%; background: var(--color-theme); cursor: pointer; transition: box-shadow .25s, background .2s; }
.gallery__dot.is-active { background: transparent; box-shadow: 0 0 0 .2rem var(--color-theme); }
.gallery__captions { margin-top: 1rem; }

/* media */
/* margin auto, not 0: these are narrower than the content box and must stay
   centred on it like every other block. */
.embed, .video { position: relative; width: 100%; margin: 0 auto; }
.embed { aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background-size: cover; background-position: center; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.embed__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 50%); }
.embed__play { position: relative; z-index: 1; width: 7.2rem; height: 7.2rem; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--color-theme); font-size: 3.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.embed__poster:hover .embed__play { transform: scale(1.08); }
.embed__title { position: absolute; left: 2.4rem; bottom: 2rem; z-index: 1; color: #fff; font-size: 1.6rem; font-weight: 700; text-shadow: 0 .1rem .3rem rgba(0,0,0,.6); }
.video__player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video .caption { margin-top: 0; }

/* attachment */
.attachment { display: flex; align-items: center; gap: 2.3rem; padding: 3.2rem 3.1rem; background: #fff; border: .1rem solid #e2e2e2; border-radius: .4rem; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.attachment:hover { border-color: var(--color-theme); box-shadow: var(--shadow-card); }
.attachment__icon { position: relative; font-size: 4rem; color: var(--color-theme); display: flex; }
.attachment__ext { position: absolute; left: 0; right: 0; bottom: .5rem; font-size: .9rem; font-weight: 900; text-align: center; letter-spacing: .05rem; font-family: var(--font-ui); }
.attachment__info { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.attachment__name { font-size: 1.7rem; font-weight: 700; }
.attachment__size { font-size: 1.4rem; color: var(--color-muted); }
.attachment__download { font-size: 2.2rem; color: #76767c; }

/* buttons */
.buttons__row { display: flex; align-items: center; gap: 8rem; padding: 3rem 0; }
.buttons__row + .buttons__row { padding-top: 0; }
.buttons__description { flex: 1; font-size: 1.5rem; font-weight: 300; line-height: 1.66; }
.buttons__description strong { font-weight: 700; }
.buttons__btn { flex: none; }

/* continue gate */
.gate__btn { display: flex; width: 100%; height: auto; padding: calc(2rem + var(--optical)) 3rem 2rem; font-size: 1.5rem; letter-spacing: .17rem; border-radius: .2rem; }
.gate__hint { display: flex; align-items: center; gap: 3rem; background: #fff; border: .1rem solid #000; border-radius: .3rem; padding: 1.8rem 3rem; font-family: var(--font-ui); font-size: 1.5rem; }
.gate__hint > span:last-child { flex: 1; text-align: center; }
.gate__lock { font-size: 1.9rem; display: flex; }
.block--gate.is-open .gate { display: none; }
.block--gate.is-open { padding: 0 !important; }

/* labeled graphic */
.lg { position: relative; --color-lg-accent: var(--color-theme); }
.lg__canvas { position: relative; width: 100%; }
.lg__img { display: block; width: 100%; height: auto; }
.lg__marker { position: absolute; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transform: scale(.01); transition: transform .2s var(--ease); transition-delay: calc(var(--i) * .2s); z-index: 3; }
.is-ready .lg__marker { transform: scale(1); }
.lg__pin { position: absolute; inset: .5rem; border-radius: 50%; background: var(--color-lg-accent); color: #fff; font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; line-height: 3rem; text-align: center; box-shadow: 0 .2rem .6rem rgba(0,0,0,.5); transition: background .2s, color .2s; }
.lg__pin::before { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: .2rem solid transparent; transition: border-color .15s; }
/* A ripple rather than a throb: the ring grows outward and fades to nothing,
   then waits its turn to go again.
   Markers ripple in the order they are numbered. --seq is the marker's position
   as a fraction of how many there are, set when the block renders, so the set
   sweeps through once per cycle whether there are three markers or ten.
   The delay is positive, which is what puts them in order, and that is only
   safe because "both" holds the first keyframe while a marker waits and that
   keyframe is invisible. Without either, a waiting halo falls back to the
   ring's own state: full size and fully opaque. */
.lg__pin::after { content: ""; position: absolute; inset: -2.4rem; border-radius: 50%; border: .6rem solid #80ceed; border-color: color-mix(in srgb, var(--color-lg-accent) 50%, #fff); pointer-events: none;
  animation: markerPulse 4.5s ease-out infinite both; animation-delay: calc(var(--seq, 0) * 2.7s); }
.lg__marker:hover .lg__pin::before { border-color: #fff; }
.lg__marker.is-active .lg__pin { background: #fff; color: var(--color-lg-accent); }
.lg__marker.is-active .lg__pin::before { border-color: var(--color-lg-accent); }
.lg__marker.is-active .lg__pin::after, .lg__marker.is-visited .lg__pin::after, .is-complete .lg__pin::after { display: none; }
/* Each ripple takes about a second of the cycle and the rest of it is a hold at
   nothing. Both ends sit at zero opacity, so a marker is invisible while it
   waits its turn and the loop has no visible seam. */
@keyframes markerPulse {
  0%   { transform: scale(.55); opacity: 0; }
  5%   { transform: scale(.62); opacity: .7; }
  22%  { transform: scale(.9); opacity: 0; }
  100% { transform: scale(.9); opacity: 0; }
}
/* Reduce motion means hold the halo still, not drop it: without a size and
   weight of its own it falls back to the ring's own state, which is full size
   and fully opaque. Park it partway through the pulse instead. */
@media (prefers-reduced-motion: reduce) {
  .lg__pin::after { animation: none; transform: scale(.75); opacity: .4; }
  .lg__marker { transition: none; transform: scale(1); }
}
/* Rise unfolds this rather than fading it: the card grows from a narrow
   collapsed state to full width, its padding and blue bottom rule open out,
   and the heading grows while the body fades in behind it. */
.lg__card { position: absolute; z-index: 5; width: 40rem; max-width: 22rem; background: #fff; border-radius: .4rem; border-bottom: 0 solid var(--color-lg-accent); box-shadow: 0 0 1rem rgba(0,0,0,.5); padding: 2rem; opacity: 0; font-family: var(--font-body);
  transition: opacity .2s ease, max-width .2s ease, padding .2s ease, border-bottom-width .2s ease, transform .2s ease; }
.lg__card.is-open { opacity: 1; max-width: calc(100% - 3.5rem); padding: 3rem; border-bottom-width: .4rem; }
/* Rise gives every marker its own card, so moving between markers replays the
   unfold. We share one card, so it is snapped back to the collapsed state first
   and that snap must not animate. */
.lg__card.is-resetting, .lg__card.is-resetting * { transition: none !important; }
/* Small triangle pointing back at the marker. */
.lg__card::before { content: ""; position: absolute; top: calc(50% - .6rem); border: .6rem solid transparent; }
.lg__card--right { transform: translate(3.5rem, -50%) translateX(-.8rem); }
.lg__card--right.is-open { transform: translate(3.5rem, -50%); }
.lg__card--right::before { left: -1.2rem; border-right-color: #fff; }
.lg__card--left { transform: translate(calc(-100% - 3.5rem), -50%) translateX(.8rem); }
.lg__card--left.is-open { transform: translate(calc(-100% - 3.5rem), -50%); }
.lg__card--left::before { right: -1.2rem; border-left-color: #fff; }
.lg__card--below, .lg__card--below.is-open { position: relative; width: 100%; max-width: none; margin-top: 1.6rem; transform: none; box-shadow: var(--shadow-card); }
.lg__card--below::before { display: none; }
.lg__card-head { position: relative; }
.lg__title { font-size: 1.4rem; font-weight: 900; line-height: 1.25; margin: .8rem 0 1.2rem; transition: font-size .3s ease, margin .3s ease; }
.lg__card.is-open .lg__title { font-size: 2rem; font-weight: 700; margin: 1rem 9rem 3rem 0; }
.lg__nav { position: absolute; top: .4rem; right: 0; display: flex; gap: .6rem; opacity: 0; transition: opacity .3s ease; }
.lg__card.is-open .lg__nav { opacity: 1; }
.lg__nav-btn { width: 3rem; height: 3rem; border: 0; background: none; cursor: pointer; font-size: 2rem; color: #9a9a9a; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color .2s; }
.lg__nav-btn:hover { color: #000; }
/* Body text waits for the card to finish unfolding, then fades in on its own.
   Closing takes it away at once, so the delay only applies while opening. */
.lg__description { font-size: 1.5rem; font-weight: 300; line-height: 1.74; max-height: 40rem; overflow-y: auto; opacity: 0; transition: opacity .3s ease; }
.lg__card.is-open .lg__description { opacity: 1; transition-delay: .45s; }
.lg__description strong { font-weight: 700; }
.lg__description p + p { margin-top: 1.5rem; }

/* process */
/* The parked cards sit well past the edges of the page, so clip them at the
   block. Clipping rather than hiding keeps the block out of the scroll model, so
   no horizontal scrollbar appears and vertical overflow still shows. */
.process { background: var(--color-page); padding: 4.5rem 0; overflow-x: clip; }
/* Rise runs this the full width of the page and parks the cards on either side
   of the current one at the container's edges, so a sliver of the card that is
   coming next shows past the padding. Nothing here clips. */
.process__stage { position: relative; padding: 0 4rem; }
.process__viewport { position: relative; transition: height .3s ease-in-out; }
.process__track { position: absolute; inset: 0; }
.process__card { position: absolute; top: 0; left: 50%; width: 89rem; max-width: 100%; padding: 2.4rem 0 4rem; opacity: 0;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.process__card.is-active, .process__card.is-beside { opacity: 1; }
.process__card-inner { background: #fff; border-radius: .4rem; box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 1rem 3.6rem rgba(0,0,0,.16); min-height: 38rem; padding: 7.5rem 7rem 9rem; }
.process__card--intro .process__card-inner, .process__card--summary .process__card-inner { text-align: center; padding: 7.5rem 7rem; }
.process__chip { position: absolute; top: 2.4rem; left: 50%; transform: translate(-50%, -50%); z-index: 2; background: var(--color-theme); color: #fff; font-family: var(--font-body); font-size: 2rem; font-weight: 700; letter-spacing: .05rem; line-height: 1.2; padding: .8rem 2rem; border-radius: .8rem; box-shadow: 0 .2rem .6rem rgba(0,0,0,.15); max-width: 90%; }
.process__title { font-size: 2.5rem; font-weight: 700; line-height: 1.25; margin-bottom: 2rem; }
.process__card--intro .process__title { font-size: 2.5rem; }
.process__media { margin: 0 0 2.4rem; }
.process__media img { display: block; max-height: 60rem; width: auto; max-width: 100%; margin: 0 auto; }
.process__description { font-size: 1.7rem; line-height: 1.8; }
.process__description p + p { margin-top: 1.5rem; }
.process__description em { color: #444; }
.process__start { margin-top: 3rem; min-width: 12rem; }
.process__arrow { position: absolute; top: 16rem; width: 6rem; height: 6rem; border-radius: 50%; border: 0; background: #000; color: #fff; cursor: pointer; font-size: 2.8rem; display: flex; align-items: center; justify-content: center; z-index: 3; transition: opacity .2s, background .2s; }
.process__arrow:hover { background: var(--color-theme); }
.process__arrow--prev { left: max(2rem, 50% - 57.5rem); } .process__arrow--next { right: max(2rem, 50% - 57.5rem); }
.process__arrow:disabled { opacity: 0; pointer-events: none; }
.process__counter { list-style: none; display: flex; justify-content: center; gap: .4rem; margin: 3rem 0 0; padding: 0; }
.process__dot { width: 3rem; height: 3rem; border-radius: 50%; border: .2rem solid transparent; background: none; color: rgba(0,0,0,.5); font-family: var(--font-ui); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .3s, color .3s; }
.process__dot.is-active { border-color: var(--color-theme); color: #000; }
.process__dot.is-done { color: #000; }
.process__dot--end { font-size: 1.4rem; }
.process__dot:hover { color: #000; }

/* flashcards */
.flashcards { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4rem; }
.flashcard { position: relative; flex: 1 1 0; min-width: 0; max-width: 28rem; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 100rem; text-align: center; }
.flashcard__side { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; border: .1rem solid #ddd; box-shadow: var(--shadow-card); backface-visibility: hidden; transition: transform .6s var(--ease); overflow: hidden; }
.flashcard__side--front { transform: rotateY(0); border-top: .3rem solid var(--color-theme); }
/* A full-image front already carries its own rule in the artwork, so it fills the
   card edge to edge and takes no border of its own. */
.flashcard__side--fullimage { border-top: 0; }
.flashcard__side--back { transform: rotateY(180deg); }
.flashcard.is-flipped .flashcard__side--front { transform: rotateY(-180deg); }
.flashcard.is-flipped .flashcard__side--back { transform: rotateY(0); }
.flashcard__title { display: block; padding: 2.4rem 2rem 0; font-size: 2.2rem; font-weight: 300; line-height: 1.25; }
.flashcard__img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 1.6rem 2.5rem 2.5rem; }
.flashcard__side--fullimage .flashcard__img { padding: 0; height: 100%; object-fit: contain; }
.flashcard__text { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 2.5rem; font-size: 2.4rem; font-weight: 300; line-height: 1.35; }
.flashcard__flip { position: absolute; right: 1.6rem; bottom: 1.6rem; color: #000; display: flex; font-size: 2.4rem; opacity: .75; transition: opacity .2s, transform .2s; }
.flashcard:hover .flashcard__flip { opacity: 1; transform: rotate(-15deg); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 4rem; cursor: zoom-out; opacity: 0; transition: opacity .25s; }
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-width: 100%; max-height: 100%; box-shadow: 0 1rem 4rem rgba(0,0,0,.5); transform: scale(.96); transition: transform .25s var(--ease); }
.lightbox.is-open .lightbox__img { transform: none; }

/* ---------- responsive ---------- */
/* ---------- sign-in ---------- */
.sign-in__hero { min-height: 36.5rem; }
.sign-in__hero .cover__panel { padding-top: 4.6rem; }
.sign-in__hero .cover__title { margin-bottom: 1.2rem; }
.sign-in__tagline { max-width: 48rem; margin: 0; color: #fff; font-size: 1.8rem; line-height: 1.45; }
.sign-in__body { width: 100%; max-width: 74rem; margin: -11rem auto 0; padding: 0 2rem 8rem; }
.sign-in__card { max-width: 50rem; background: var(--color-surface); border-radius: .4rem; box-shadow: var(--shadow-card); padding: 4.4rem 4rem 3.2rem; display: flex; flex-direction: column; }
.sign-in__heading { font-size: 2.8rem; font-weight: 700; margin-bottom: 1.2rem; }
.sign-in__intro { color: #555; font-size: 1.6rem; line-height: 1.6; margin: 0 0 3.2rem; }
.sign-in__alert { background: #fdecea; color: #8a1c14; border-left: .4rem solid #d93025; border-radius: .2rem; padding: 1.2rem 1.4rem; font-size: 1.4rem; line-height: 1.5; margin: -1.2rem 0 2.4rem; }
.sign-in__label { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700; letter-spacing: .08rem; text-transform: uppercase; margin-bottom: .8rem; }
.sign-in__input { font: inherit; font-size: 1.6rem; padding: 1.4rem 1.5rem; border: .1rem solid #d0d0d0; border-radius: .3rem; margin-bottom: 2.4rem; transition: border-color .2s, box-shadow .2s; }
.sign-in__input::placeholder { color: #a8a8a8; }
.sign-in__input:focus { outline: none; border-color: var(--color-theme); box-shadow: 0 0 0 .3rem var(--color-theme-tint); }
/* Larger, spaced dots for the PIN as it is typed: a password field draws its dots
   at the font size, so size and spacing are set here rather than on a placeholder. */
.sign-in__input--pin { max-width: 14rem; height: 5.5rem; padding: 0 1.5rem; font-size: 4rem; letter-spacing: .2em; color: #3a3a3a; }
.sign-in__submit { width: 100%; height: 5.2rem; margin-top: .4rem; border: 0; cursor: pointer; font-size: 1.4rem; letter-spacing: .14em; }
.sign-in__help { color: #555; font-size: 1.4rem; text-align: center; margin: 2.4rem 0 0; }
.sign-in__other { color: var(--color-muted); font-size: 1.3rem; text-align: center; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: .1rem solid var(--color-border); }

/* who's signed in, on the cover and at the foot of the sidebar */
.account { display: flex; align-items: center; gap: 1.2rem; font-family: var(--font-ui); font-size: 1.3rem; }
.account__form { display: inline; margin: 0; }
.account__sign-out { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; color: inherit; }
.cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-bottom: 1.7rem; }
.cover__actions .cover__start { margin-bottom: 0; }
.account--cover { color: #fff; font-family: var(--font-body); font-size: 1.6rem; font-weight: 600; gap: 1.4rem; }
.account--cover .account__name { padding-right: 1.4rem; border-right: .1rem solid rgba(255,255,255,.6); line-height: 1.2; }
.account--cover .account__form { display: flex; }
.account--cover .account__sign-out { font-weight: 700; line-height: 1.2; text-underline-offset: .3rem; }
.account--sidebar { padding: 1.6rem 1.5rem 2.4rem; border-top: .1rem solid var(--color-border); color: var(--color-muted); justify-content: space-between; }

/* ---------- quiz ---------- */
.quiz { background: var(--color-surface); border-radius: .4rem; box-shadow: var(--shadow-card); padding: 4rem 5rem 3.6rem; }
.quiz__questions { list-style: none; margin: 0; padding: 0; counter-reset: question; }
.quiz__question { counter-increment: question; padding: 0 0 3.2rem; margin: 0 0 3.2rem; border-bottom: .1rem solid var(--color-border); }
.quiz__question:last-child { margin-bottom: 2.4rem; }
.quiz__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__prompt { display: flex; gap: 1.2rem; font-size: 1.8rem; font-weight: 700; line-height: 1.45; margin-bottom: 1.6rem; padding: 0; }
.quiz__prompt::before { content: counter(question) "."; color: var(--color-theme); }
.quiz__hint { color: var(--color-muted); font-size: 1.4rem; margin: -.8rem 0 1.2rem; }
.quiz__hint p { margin: 0; }
.quiz__image { display: block; max-width: 100%; max-height: 40rem; margin: 0 0 1.6rem; border-radius: .3rem; }
.quiz__feedback p { margin: 0; }
.quiz__feedback p + p { margin-top: 1rem; }
.quiz__feedback-image { display: block; max-width: 100%; max-height: 36rem; margin-top: 1.2rem; border-radius: .3rem; }
.quiz__choice { position: relative; display: flex; align-items: flex-start; gap: 1.4rem; padding: 1.3rem 1.6rem; margin-bottom: .8rem; border: .1rem solid var(--color-border); border-radius: .3rem; cursor: pointer; font-size: 1.6rem; line-height: 1.5; transition: border-color .2s, background .2s; }
.quiz__choice:hover { border-color: #bdbdbd; }
.quiz__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz__mark { flex: none; width: 2rem; height: 2rem; margin-top: .2rem; border: .2rem solid #9a9a9a; border-radius: 50%; transition: border-color .2s, background .2s, box-shadow .2s; }
.quiz__input[type="checkbox"] + .quiz__mark { border-radius: .3rem; }
.quiz__input:checked + .quiz__mark { border-color: var(--color-theme); background: var(--color-theme); box-shadow: inset 0 0 0 .3rem #fff; }
.quiz__input:focus-visible + .quiz__mark { box-shadow: 0 0 0 .3rem var(--color-theme-tint); }
.quiz__choice:has(.quiz__input:checked) { border-color: var(--color-theme); background: var(--color-theme-tint); }
.quiz__input:disabled + .quiz__mark, .quiz__choice:has(.quiz__input:disabled) { cursor: default; }
.quiz__feedback { font-size: 1.5rem; line-height: 1.6; margin: 1.2rem 0 0; padding: 1.2rem 1.6rem; border-radius: .3rem; }
.quiz__question.is-correct .quiz__feedback { background: #e8f5e9; color: #1e5b24; }
.quiz__question.is-incorrect .quiz__feedback { background: #fdecea; color: #8a1c14; }
.quiz__question.is-correct .quiz__prompt::after { content: "✓"; color: #2e7d32; margin-left: auto; }
.quiz__question.is-incorrect .quiz__prompt::after { content: "✕"; color: #c62828; margin-left: auto; }
.quiz__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }
.quiz__status { flex: 1 1 24rem; margin: 0; font-size: 1.5rem; line-height: 1.5; font-weight: 600; }
.quiz.is-passed .quiz__status { color: #1e5b24; }
.quiz__submit, .quiz__retry { border: 0; cursor: pointer; }
.quiz__retry { background: var(--color-surface); color: var(--color-theme); box-shadow: inset 0 0 0 .2rem var(--color-theme); }
.quiz[aria-busy="true"] .quiz__submit { opacity: .6; cursor: progress; }
@media (max-width: 700px) {
  .quiz { padding: 2.8rem 2rem 2.4rem; }
  .sign-in__card { padding: 3rem 2.2rem 2.6rem; }
}

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 4rem rgba(0,0,0,.2); }
  .lesson__content { margin-left: 0; }
  .lesson__menu-btn, .lesson--nav-closed .lesson__menu-btn { left: 1rem; }
  .lesson--nav-mobile-open .sidebar { transform: none; }
  .lesson--nav-mobile-open .sidebar__scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 15; }
  .block__inner, .lesson-header__inner, .cover__panel, .cover__body, .image-full__inner { padding-left: 3rem; padding-right: 3rem; }
  .process__stage { padding: 0 2rem; }
  .gallery__arrow { width: 4rem; height: 6rem; font-size: 4.4rem; }
  .gallery__arrow--prev { left: -5rem; } .gallery__arrow--next { right: -5rem; }
  .process__arrow { width: 5rem; height: 5rem; font-size: 2.4rem; }
  .process__arrow--prev { left: .8rem; } .process__arrow--next { right: .8rem; }
  .process__card { width: 100%; }
}
@media (max-width: 700px) {
  .block__inner, .lesson-header__inner, .cover__panel, .cover__body, .image-full__inner { padding-left: 2rem; padding-right: 2rem; }
  .block__inner > *, .lesson-header__inner > *, .cover__panel > *, .cover__body > * { margin-left: 0; max-width: none; }
  .lesson-header__title { font-size: 2.8rem; }
  .text__body, .image-aside__text { font-size: 1.5rem; line-height: 1.8; }
  .image-aside, .image-aside--reverse .image-aside { flex-direction: column; gap: 2rem; margin-left: 0; margin-right: 0; width: 100%; }
  .image-aside__text, .image-aside--reverse .image-aside__text { padding-left: 0; padding-right: 0; }
  .image-aside__figure { flex-basis: auto; width: 100%; }
  .process { padding: 4rem 0; }
  .process__stage { padding: 0 1rem; }
  .gallery__arrow--prev { left: -1rem; } .gallery__arrow--next { right: -1rem; }
  .process__card { padding: 2.4rem 0 2rem; width: 100%; }
  .process__card-inner, .process__card--intro .process__card-inner, .process__card--summary .process__card-inner { padding: 4rem 2.4rem 3rem; }
  .process__arrow { top: auto; bottom: -5.6rem; width: 4.4rem; height: 4.4rem; }
  .buttons__row { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .cover__title { font-size: 3.2rem; }
  .flashcard { width: 100%; max-width: 32rem; }
  .media-card { padding: 1rem; }
  .image-full__text { font-size: 2.2rem; margin: 6rem 0; }
}