:root {
  color-scheme: light;
  --stage: #f5f3f2;
  --paper: #f9f7f5;
  --ink: #240f1b;
  --secondary-ink: #76656e;
  --edge: #eee7e8;
  --fill: #fff;
  --stroke: #e1d7d8;
  --academy-wine: #770523;
  --academy-wine-dark: #58041a;
  --academy-pill: #f7ecee;
  --academy-mom-500: #ee9ca7;
  --academy-blush: #ffdde1;
  /* Academy Moodboard: Pump (Brand/Rose), Lavender, Mint and Butter at 300. */
  --academy-pump-300: #ffc0cb;
  --academy-lavender-300: #c8bdff;
  --academy-mint-300: #b7e5ba;
  --academy-butter-300: #f0cb58;
  --academy-line: #240f1b1f;
  --button-height: 48px;
  --academy-sans: "Academy Aeonik", system-ui, sans-serif;
  --editorial: "Academy Exposure", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  font-family: var(--academy-sans);
  color: var(--ink);
  background: var(--stage);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

:where(button, .knowledge-course-link, .knowledge-checkup-link, .entry-reference,
  .knowledge-observation label, .stage-picker-week) {
  min-height: var(--button-height);
}

.stage {
  --phone-width: min(511px, 100%, max(284px, calc((100dvh - 80px) * 511 / 968)));
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

/* The source image uses a 511 × 968 canvas with a 393 × 852 screen opening. */
.phone {
  position: relative;
  width: var(--phone-width);
  aspect-ratio: 511 / 968;
  container-type: inline-size;
  isolation: isolate;
}

.language-switch {
  position: absolute;
  inset-block-start: clamp(40px, 15dvh, 160px);
  inset-inline-start: calc(50% + var(--phone-width) / 2 + 16px);
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--fill);
}

.language-switch button {
  min-width: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--secondary-ink);
  font: 600 12px/1 var(--academy-sans);
  cursor: pointer;
}

.language-switch [aria-pressed="true"] {
  background: var(--academy-pill);
  color: var(--academy-wine);
}

.language-switch button:focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .stage {
    grid-template-rows: auto 1fr;
  }

  .phone {
    grid-row: 2;
  }

  .language-switch {
    position: static;
    grid-row: 1;
    justify-self: end;
    margin: 8px max(12px, calc((100% - var(--phone-width)) / 2)) 0 0;
  }
}

.iphone-bezel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.phone-screen {
  --screen-block-inset: 5.9917%;
  --screen-side-inset: 11.546;
  --screen-radius: 8.22cqw;
  --status-height: 10.57cqw;
  --app-header-height: var(--button-height);
  --tab-bar-height: calc(var(--button-height) + 8px);
  --home-height: 4.3cqw;
  --header-veil: color-mix(in srgb, var(--paper) 34%, transparent);
  position: absolute;
  inset: var(--screen-block-inset) calc(var(--screen-side-inset) * 1%);
  display: grid;
  grid-template-rows: var(--status-height) var(--app-header-height) minmax(0, 1fr) var(--tab-bar-height) var(--home-height);
  overflow: hidden;
  border-radius: var(--screen-radius);
  background: linear-gradient(var(--header-veil), var(--header-veil)),
    url("assets/shell/header-glow.svg") center -632px no-repeat var(--paper);
}

.status-bar {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: min(1.96cqw, 10px) min(6.65cqw, 34px) 0 min(7.05cqw, 36px);
  color: #050505;
  font: 600 clamp(10px, 2.95cqw, 15px)/1 -apple-system, system-ui, "SF Pro Text", sans-serif;
}

.status-time {
  font-variant-numeric: tabular-nums;
}

.camera-cutout {
  position: absolute;
  top: 2.15cqw;
  left: 50%;
  width: 23.9cqw;
  height: 7.04cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #08080a;
}

.status-icons {
  display: block;
  width: min(15.46cqw, 79px);
  height: auto;
}

.app-header {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 14px;
}

.app-header-title {
  color: var(--ink);
  font: 400 clamp(15px, 3.6cqw, 19px)/1 var(--editorial);
}

.phone-screen:has(> .academy-page[hidden]) .app-header-title {
  display: none;
}

.app-header button {
  display: grid;
  width: var(--button-height);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}

.app-header svg {
  width: 21px;
  height: 21px;
}

.app-header .profile-button svg {
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 1px solid #240f1b0a;
  border-radius: 50%;
  color: var(--fill);
  background: #240f1b1a;
}

.page {
  grid-area: 3 / 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  font: 400 14px/1.45 var(--academy-sans);
}

.page :where(h1, h2, h3) {
  font-weight: 500;
}

.page :where(button, input, select, textarea) {
  font-family: inherit;
}

.page .editorial-title {
  font-family: var(--editorial);
  font-weight: 400;
}

.academy-page {
  --academy-gutter: clamp(13px, 4.1cqw, 21px);
  isolation: isolate;
  grid-row: 1 / -1;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--status-height) + var(--app-header-height));
  scroll-padding-block-end: calc(var(--tab-bar-height) + var(--home-height) + 12px);
  background: var(--paper);
}

.phone-screen:has(> .academy-page[data-scrolled]:not([hidden])) :is(.status-bar, .app-header) {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.academy-intro {
  /* Scale the Figma background from its 402px artboard to the phone opening. */
  --intro-px: calc((100 - 2 * var(--screen-side-inset)) * 1cqw / 402);
  --intro-cream: #f8f4ee;
  --intro-nav-space: calc(var(--tab-bar-height) + var(--home-height));
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 2.3cqw, 12px);
  min-height: calc(100% - var(--intro-nav-space));
  padding-block: calc(var(--status-height) + var(--app-header-height) + clamp(9px, 3.25cqw, 16px))
    18px;
  background:
    linear-gradient(var(--intro-cream), transparent) center top / 100% calc(176 * var(--intro-px)) no-repeat,
    url("assets/academy/postpartum-glow.png") center calc(-20 * var(--intro-px)) / calc(604 * var(--intro-px)) auto no-repeat,
    linear-gradient(var(--intro-cream), transparent) center calc(617 * var(--intro-px)) / 100% calc(156 * var(--intro-px)) no-repeat,
    url("assets/academy/postpartum-cream.svg") center top / 100% auto no-repeat var(--paper);
}

.academy-intro-copy {
  margin-block-start: auto;
  padding-inline: var(--academy-gutter);
}

.postpartum-stage-actions {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.5cqw, 8px);
  margin: 0 0 clamp(7px, 1.8cqw, 10px);
}

.postpartum-stage,
.postpartum-stage-return {
  flex: 0 0 auto;
  border: 1px solid var(--academy-line);
  border-radius: 99px;
  color: var(--academy-wine);
  font: 600 clamp(11px, 2.7cqw, 14px)/1.2 var(--academy-sans);
  white-space: nowrap;
  cursor: pointer;
}

.postpartum-stage {
  position: relative;
  padding: 0 clamp(18px, 5.1cqw, 26px) 0 clamp(7px, 2.2cqw, 11px);
  background: color-mix(in srgb, var(--fill) 72%, transparent);
}

.postpartum-stage-return {
  padding: 0 clamp(6px, 2cqw, 10px);
  background: var(--academy-pill);
}

.postpartum-stage-actions button:focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: 2px;
}

.postpartum-stage::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(7px, 2.35cqw, 12px);
  width: 5px;
  height: 5px;
  border: solid var(--academy-wine);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  content: "";
}

.academy-intro h1 {
  margin: 0;
  font-size: clamp(21px, 7.25cqw, 37px);
  line-height: 1.22;
  text-wrap: balance;
}

.academy-intro h1 .intro-title-accent {
  display: block;
  color: var(--academy-wine);
}

.academy-intro-subtitle {
  margin: clamp(8px, 2.35cqw, 12px) 0 0;
  color: var(--secondary-ink);
  font-size: clamp(12px, 3.25cqw, 16px);
  line-height: 1.4;
}

.weekly-knowledge {
  --weekly-height: clamp(108px, 38cqw, 194px);
  --weekly-shadow-space: clamp(7px, 2.5cqw, 13px);
  min-width: 0;
  padding-block-start: clamp(5px, 1.6cqw, 8px);
}

.weekly-knowledge h2 {
  margin: -7px var(--academy-gutter) 13px;
  color: var(--secondary-ink);
  font-size: clamp(10px, 2.65cqw, 13px);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.weekly-rail:not([hidden]) ~ h2 {
  margin-block-start: calc(4px - var(--weekly-shadow-space));
}

.weekly-empty {
  display: grid;
  min-height: var(--weekly-height);
  place-items: center;
  margin: 0 var(--academy-gutter) 10px;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--fill);
  color: var(--secondary-ink);
  font-size: 13px;
  text-align: center;
}

.academy-page :is(.weekly-rail, .weekly-empty, .academy-content)[hidden] {
  display: none;
}

.weekly-rail {
  --weekly-width: 31.5cqw;
  --weekly-gap: calc(clamp(4px, 1.4cqw, 7px) + 8px);
  --weekly-center-growth: .18;
  --weekly-lift: calc(var(--weekly-height) * var(--weekly-center-growth));
  --weekly-side-angle: 8deg;
  --weekly-arc-sine: sin(var(--weekly-side-angle));
  --weekly-arc-radius: calc((var(--weekly-width) + var(--weekly-gap)) / var(--weekly-arc-sine));
  --weekly-arc-drop: calc(var(--weekly-arc-radius) * (1 - cos(var(--weekly-side-angle))));
  --weekly-tilt-space: calc(var(--weekly-width) * var(--weekly-arc-sine) / 2);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--weekly-width);
  grid-auto-rows: var(--weekly-height);
  gap: var(--weekly-gap);
  height: calc(var(--weekly-height) + var(--weekly-lift) + var(--weekly-arc-drop) + var(--weekly-tilt-space) + 2 * var(--weekly-shadow-space));
  padding-block: calc(var(--weekly-shadow-space) + var(--weekly-lift)) var(--weekly-shadow-space);
  padding-inline: calc((100% - var(--weekly-width)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  user-select: none;
}

.weekly-rail.is-moving {
  scroll-snap-type: none;
}

.weekly-rail:focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: -2px;
}

.weekly-slide {
  display: grid;
  min-width: 0;
  scroll-snap-align: center;
}

.weekly-card {
  --weekly-card-color: var(--academy-pump-300);
  --weekly-art-hue: -9deg;
  --weekly-scale: calc(.9 + (.1 + var(--weekly-center-growth)) * var(--weekly-focus, 0));
  --weekly-arc-angle: asin(calc(var(--weekly-arc-offset, 0) * var(--weekly-arc-sine)));
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  padding: clamp(13px, 3.7cqw, 19px);
  border: 0;
  border-radius: clamp(17px, 5cqw, 26px);
  background: var(--weekly-card-color);
  box-shadow: 0 clamp(6px, 2.1cqw, 11px) clamp(19px, 6.8cqw, 35px) -3px
    color-mix(in srgb, var(--weekly-card-color) 63%, transparent);
  color: var(--ink);
  font: 600 clamp(11px, 3.3cqw, 16px)/1.18 var(--academy-sans);
  text-align: start;
  /* Anchor the bottom edge to the circle and rotate it to the tangent. */
  transform-origin: center bottom;
  transform: translateY(calc(var(--weekly-arc-radius) * (1 - cos(var(--weekly-arc-angle)))))
    rotate(var(--weekly-arc-angle)) scale(var(--weekly-scale, 1));
  cursor: pointer;
}

:is(.weekly-card, .knowledge-picker-illustration)[data-tone="lavender"] {
  --weekly-card-color: var(--academy-lavender-300);
  --weekly-art-hue: -53deg;
}

:is(.weekly-card, .knowledge-picker-illustration)[data-tone="mint"] {
  --weekly-card-color: var(--academy-mint-300);
  --weekly-art-hue: 136deg;
}

:is(.weekly-card, .knowledge-picker-illustration)[data-tone="butter"] {
  --weekly-card-color: color-mix(in srgb, var(--academy-butter-300) 88%, var(--fill));
  --weekly-art-hue: 37deg;
}

.weekly-card-label {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}

.weekly-card-art {
  /* Compensate for the card scale so the visible artwork grows by 20% at center. */
  --weekly-art-scale: calc(.92 * (1 + .2 * var(--weekly-focus, 0)));
  position: absolute;
  inset-inline-end: var(--weekly-art-end, -24%);
  inset-block-end: var(--weekly-art-bottom, -23%);
  width: var(--weekly-art-width, 112%);
  height: auto;
  scale: calc(var(--weekly-art-scale) / var(--weekly-scale, 1));
  transform-origin: right bottom;
  pointer-events: none;
}

.weekly-rail[data-art-set="weekly-hand-drawn"] .weekly-card {
  isolation: isolate;
}

.weekly-rail[data-art-set="weekly-hand-drawn"] .weekly-card-art {
  filter: hue-rotate(var(--weekly-art-hue)) brightness(1.1);
  mix-blend-mode: multiply;
}

.weekly-card[data-motif="vision"] {
  --weekly-art-width: 118%;
  --weekly-art-end: -26%;
  --weekly-art-bottom: -33%;
}

.weekly-card[data-motif="nails"] {
  --weekly-art-width: 97%;
  --weekly-art-end: -16%;
  --weekly-art-bottom: -12%;
}

.weekly-card[data-motif="sleep-nightcap"] {
  --weekly-art-width: 106%;
  --weekly-art-end: -18%;
  --weekly-art-bottom: -11%;
}

.weekly-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.academy-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 0 var(--academy-gutter) calc(var(--tab-bar-height) + var(--home-height) + 24px);
}

.academy-module + .academy-module {
  padding-top: 24px;
}

.academy-module .module-title {
  margin: 0 0 clamp(12px, 3.7cqw, 19px);
  font: 500 clamp(19px, 4.4cqw, 23px)/1.25 var(--academy-sans);
}

.academy-dialog h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 4.7cqw, 24px);
  line-height: 1.25;
}

.module-stage {
  margin-inline-start: 5px;
  color: var(--secondary-ink);
  font: 400 clamp(11px, 2.55cqw, 13px)/1.2 var(--academy-sans);
}

.questions-module {
  position: relative;
  isolation: isolate;
  margin-inline: calc(-1 * var(--academy-gutter));
  padding: clamp(14px, 4.2cqw, 22px) var(--academy-gutter) clamp(18px, 5cqw, 25px);
}

.questions-module::before {
  position: absolute;
  z-index: -1;
  inset: 13% 0 -5px;
  background: linear-gradient(115deg, #ffcfaa 8%, #f8b6d8 59%, #ded2fa 100%);
  mask-image: radial-gradient(ellipse closest-side, #0009 45%, transparent 100%);
  pointer-events: none;
  content: "";
}

.question-heading,
.featured-course-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: clamp(12px, 3.7cqw, 19px);
}

.question-heading .module-title {
  margin: 0;
  white-space: nowrap;
}

.featured-course-heading .module-title {
  margin: 0;
  text-wrap: balance;
}

.featured-course-heading .text-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.text-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--academy-wine);
  font: 600 13px/1.3 var(--academy-sans);
  white-space: nowrap;
  cursor: pointer;
}

.question-preview {
  --check-in-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--check-in-columns), minmax(0, 1fr));
  gap: clamp(6px, 1.8cqw, 10px);
}

.question-shuffle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.question-shuffle [aria-hidden="true"] {
  font-size: 17px;
  line-height: 1;
}

.pill {
  padding: 5px 8px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--ink);
  background: var(--fill);
  font: 500 clamp(12px, 2.7cqw, 14px)/1.2 var(--academy-sans);
  cursor: pointer;
}

.question-card {
  --check-in-accent: var(--academy-wine);
  --check-in-icon-fill: color-mix(in srgb, var(--academy-pump-300) 35%, white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: clamp(85px, 20.6cqw, 106px);
  padding: clamp(8px, 2.2cqw, 12px) clamp(6px, 1.6cqw, 9px);
  border: 1px solid #fff;
  border-radius: clamp(13px, 3.7cqw, 19px);
  background: var(--fill);
  color: var(--ink);
  box-shadow: 0 3px 10px #240f1b08;
  font: 500 clamp(11px, 2.35cqw, 12px)/1.2 var(--academy-sans);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.question-card[data-tone="butter"] {
  --check-in-accent: #7e451f;
  --check-in-icon-fill: color-mix(in srgb, var(--academy-butter-300) 27%, white);
}

.question-card[data-tone="lavender"] {
  --check-in-accent: #552c95;
  --check-in-icon-fill: color-mix(in srgb, var(--academy-lavender-300) 36%, white);
}

.question-card[data-tone="mint"] {
  --check-in-accent: #1a5140;
  --check-in-icon-fill: color-mix(in srgb, var(--academy-mint-300) 43%, white);
}

.question-card strong {
  font-weight: 600;
}

.question-card-category {
  margin-top: 3px;
  color: var(--secondary-ink);
  font-size: 10px;
}

.question-icon {
  display: grid;
  width: clamp(28px, 7.1cqw, 36px);
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: clamp(7px, 1.95cqw, 10px);
  border-radius: 50%;
  background: var(--check-in-icon-fill);
  color: var(--check-in-accent);
}

.question-icon svg {
  width: 57%;
  height: 57%;
}

.phone-screen:has(.question-library-page:not([hidden])) .app-header {
  visibility: hidden;
}

.phone-screen:has(.question-library-page:not([hidden])) .status-bar,
.question-library-nav,
.question-library-page {
  background: var(--paper);
}

.question-library-nav:not([hidden]) {
  z-index: 1;
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  padding-inline: clamp(9px, 3cqw, 15px);
}

.question-library-nav button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--academy-wine);
  font: 600 13px/1.2 var(--academy-sans);
  cursor: pointer;
}

.question-library-nav svg {
  width: 19px;
}

.question-library-page {
  padding: clamp(12px, 4.1cqw, 21px);
  padding-block-start: 9px;
  scrollbar-width: none;
}

.question-library-period {
  margin: 0 0 5px;
  color: var(--academy-wine);
  font-size: clamp(10px, 2.35cqw, 12px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.question-library-page h1 {
  margin: 0 0 9px;
  font-size: clamp(23px, 6.45cqw, 33px);
  line-height: 1.15;
}

.question-library-page h1:focus {
  outline: none;
}

.question-library-lead {
  margin: 0 0 14px;
  color: var(--secondary-ink);
  font-size: clamp(12px, 2.8cqw, 14px);
}

.question-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}

:is(.question-library-filters, .course-filters) .pill {
  min-width: 52px;
  min-height: 36px;
  padding-inline: 12px;
  border: 0;
  font-size: clamp(11px, 2.55cqw, 13px);
  white-space: nowrap;
}

.question-library-list {
  display: grid;
  gap: 9px;
}

.question-library-card {
  overflow: hidden;
  border-radius: clamp(14px, 4.1cqw, 21px);
  background: var(--fill);
}

.question-library-card summary {
  display: grid;
  gap: 4px;
  padding: clamp(12px, 3.6cqw, 18px);
  list-style: none;
  cursor: pointer;
}

.question-library-card summary::-webkit-details-marker {
  display: none;
}

.question-library-category,
.question-library-action {
  color: var(--academy-wine);
  font-size: clamp(10px, 2.45cqw, 12px);
  font-weight: 600;
}

.question-library-question {
  font-size: clamp(14px, 3.8cqw, 19px);
  line-height: 1.3;
}

.question-library-summary {
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.65cqw, 14px);
  line-height: 1.4;
}

.question-library-action {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  margin-top: 2px;
}

.question-library-action svg {
  width: 14px;
}

.question-library-card:not([open]) .question-library-collapse,
.question-library-card[open] .question-library-read {
  display: none;
}

.question-library-card[open] .question-library-action svg {
  transform: rotate(180deg);
}

.question-library-detail {
  margin-inline: clamp(12px, 3.6cqw, 18px);
  padding: 12px 0 clamp(12px, 3.6cqw, 18px);
  border-top: 1px solid var(--edge);
  font-size: clamp(12px, 2.75cqw, 14px);
}

.question-library-detail h2 {
  margin: 0 0 4px;
  color: var(--academy-wine);
  font-size: inherit;
  font-weight: 600;
}

.question-library-detail p {
  margin: 0;
}

.question-library-help {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--academy-pill);
}

.question-library-nav button:focus-visible,
.question-library-filters button:focus-visible,
.question-library-card summary:focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: -2px;
}

.pill[aria-pressed="true"] {
  border-color: var(--academy-wine);
  background: var(--academy-wine);
  color: var(--fill);
}

.next-stage-collections {
  --collection-gap: clamp(7px, 2.25cqw, 12px);
  display: flex;
  min-width: 0;
  gap: var(--collection-gap);
  margin-inline: calc(-1 * var(--academy-gutter));
  padding-inline-start: var(--academy-gutter);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline-start: var(--academy-gutter);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  user-select: none;
}

.next-stage-collections[data-dragging] {
  scroll-snap-type: none;
}

:is(.collection-card, .featured-course-card) {
  --card-tint: var(--academy-lavender-300);
  --card-surface: color-mix(in srgb, var(--card-tint) 47%, var(--fill));
  border: 0;
}

:is(.collection-card[data-collection="mom"], .featured-course-card[data-cover="pelvic"]) {
  --card-tint: var(--academy-pump-300);
}

.collection-card {
  display: grid;
  flex: 0 0 calc((100% - var(--collection-gap)) / 1.5);
  grid-template-rows: 1fr auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-radius: clamp(13px, 4cqw, 21px);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-tint) 70%, var(--fill)) 0 19%, transparent 19.5%),
    var(--card-surface);
  color: var(--ink);
  font: inherit;
  text-align: start;
  scroll-snap-align: start;
  cursor: pointer;
}

.academy-content .collection-card:focus-visible {
  outline-offset: -3px;
}

.collection-card[data-collection="questions"] {
  --card-tint: var(--academy-mint-300);
}

.collection-copy {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: clamp(9px, 2.8cqw, 14px) clamp(8px, 2.45cqw, 13px);
}

.collection-copy strong {
  font-size: clamp(11px, 3.4cqw, 17px);
  line-height: 1.2;
  white-space: nowrap;
}

.collection-copy .card-secondary {
  font-size: clamp(10px, 2.45cqw, 12px);
}

.collection-image {
  display: block;
  aspect-ratio: 1;
  background: url("assets/academy/next-stage-baby.png") right bottom / 60.6% auto no-repeat;
}

.collection-card[data-collection="mom"] .collection-image {
  background: url("assets/academy/next-stage-mom-and-baby.png") center top / auto 112% no-repeat;
}

.collection-card[data-collection="questions"] .collection-image {
  background: url("assets/academy/postpartum-mother-and-baby.png") center bottom / auto 100% no-repeat;
}

.entry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.entry-card strong {
  font-size: clamp(13px, 3.05cqw, 16px);
  line-height: 1.3;
}

.entry-category {
  color: var(--academy-wine);
  font-size: 11px;
  font-weight: 600;
}

.card-secondary {
  color: var(--secondary-ink);
  font-size: 12px;
  line-height: 1.35;
}

.featured-courses {
  display: grid;
  gap: 14px;
}

.featured-course-card {
  --featured-art: url("assets/academy/featured-course-fitness.png");
  --trial-accent: var(--academy-wine);
  display: grid;
  gap: 8px;
  padding: clamp(9px, 2.55cqw, 13px);
  border-radius: calc(clamp(19px, 5.5cqw, 28px) + 4px);
  background: var(--card-surface) var(--featured-art)
    right top clamp(11px, 3cqw, 15px) / auto clamp(158px, 50cqw, 252px) no-repeat;
  color: var(--ink);
}

.featured-course-card[data-cover="pelvic"] {
  background-position: right 4px top clamp(27px, 8cqw, 40px);
  background-size: auto clamp(140px, 44cqw, 222px);
}

.featured-course-hero {
  display: grid;
  min-height: clamp(158px, 41cqw, 209px);
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: clamp(4px, 1.8cqw, 9px);
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.featured-course-card[data-cover="yoga-ball"] {
  --featured-art: url("assets/academy/featured-course-yoga-ball.jpg");
  --trial-accent: #552c95;
  --featured-art-wash: color-mix(in srgb, var(--card-surface) 24%, transparent);
  background-image: linear-gradient(var(--featured-art-wash), var(--featured-art-wash)), var(--featured-art);
  background-position: center, right 3px top clamp(48px, 12cqw, 61px);
  background-size: 100% 100%, 42% auto;
  background-blend-mode: normal, multiply;
}

.featured-course-copy {
  display: grid;
  gap: 5px;
  width: 56%;
}

.featured-course-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffffa6;
  color: var(--academy-wine-dark);
  font-size: clamp(10px, 2.4cqw, 12px);
  font-weight: 600;
}

.featured-course-title {
  font: 400 clamp(16px, 4.45cqw, 23px)/1.15 var(--editorial);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.featured-course-subtitle {
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.65cqw, 14px);
  line-height: 1.3;
}

.featured-course-creator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: clamp(10px, 2.5cqw, 13px);
  line-height: 1.2;
}

.featured-course-creator-label,
.featured-course-creator b {
  display: block;
}

.featured-course-creator-label,
.featured-course-review-label {
  color: var(--secondary-ink);
  font-size: clamp(9px, 2.2cqw, 11px);
  font-weight: 600;
}

.featured-course-avatar {
  display: grid;
  width: clamp(23px, 6.5cqw, 33px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.featured-course-creator-avatar {
  background: var(--academy-wine);
  color: var(--fill);
  font: 400 clamp(12px, 3.5cqw, 18px)/1 var(--editorial);
}

.featured-course-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.featured-course-card[data-cover="yoga-ball"] .featured-course-creator-avatar {
  position: relative;
}

.featured-course-card[data-cover="yoga-ball"] .featured-course-creator-avatar img {
  /* Show the central 80px square from the original 138 × 130 image. */
  position: absolute;
  inset: -25% auto auto -32.5%;
  width: 172.5%;
  height: auto;
}

.featured-course-review {
  padding: clamp(9px, 2.6cqw, 13px);
  border-radius: clamp(15px, 4.7cqw, 24px);
  background: #ffffffd1;
  backdrop-filter: blur(9px);
}

.featured-course-review blockquote {
  margin: 2px 0 0;
  font-size: clamp(11px, 2.65cqw, 14px);
  line-height: 1.4;
}

.recommended-courses-module {
  min-width: 0;
}

.course-filters {
  display: flex;
  min-width: 0;
  gap: 5px;
  margin: 0 -4px 12px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  user-select: none;
}

.course-filters .pill {
  flex: 0 0 auto;
}

.course-more,
.question-view-all {
  width: 100%;
}

.course-more {
  margin-top: 10px;
  color: var(--academy-wine);
}

.question-view-all {
  margin-top: 18px;
}

.course-empty {
  margin: 0;
  padding: 15px 12px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--secondary-ink);
  text-align: center;
}

.course-list,
.collection-topic-list {
  display: grid;
  gap: 8px;
}

.entry-card > span {
  display: grid;
  gap: 4px;
}

.entry-card::after {
  color: var(--academy-wine);
  font-size: 20px;
  line-height: 1;
  content: "›";
}

.recommended-course-card {
  grid-template-columns: minmax(58px, 27%) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 2.6cqw, 13px);
  padding: clamp(7px, 2cqw, 10px);
  border: 0;
  border-radius: clamp(16px, 4.3cqw, 22px);
}

.recommended-course-card::after {
  content: none;
}

.recommended-course-cover {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  border-radius: clamp(10px, 3.2cqw, 16px);
  background: var(--paper);
}

.recommended-course-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-card > .recommended-course-copy {
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  gap: 3px;
  min-width: 0;
  padding-block: 2px;
}

.recommended-course-copy .entry-category {
  font-size: clamp(9px, 2.35cqw, 12px);
  text-transform: uppercase;
}

.recommended-course-copy .card-secondary {
  font-size: clamp(11px, 2.7cqw, 13px);
}

.recommended-course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 5px;
  color: var(--secondary-ink);
  font-size: clamp(10px, 2.35cqw, 12px);
}

.recommended-course-footer [aria-hidden] {
  color: var(--academy-wine);
  font-size: 18px;
  line-height: 1;
}

#expert-consultation .module-title {
  margin-bottom: 5px;
}

.consultation-intro,
.consultation-note {
  margin: 0;
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.7cqw, 14px);
  line-height: 1.4;
}

.consultation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-block: 14px;
}

.consultation-tabs .pill {
  min-height: 36px;
  padding-inline: 7px;
  border: 0;
  font-size: clamp(11px, 2.45cqw, 13px);
  white-space: nowrap;
}

.consultation-list {
  display: grid;
  gap: 8px;
}

.self-care-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 2.35cqw, 12px);
}

.self-care-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(14px, 4.1cqw, 21px);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.self-care-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--academy-pill);
}

.self-care-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.self-care-play:not([hidden]) {
  position: absolute;
  inset-inline-end: 8px;
  inset-block-end: 8px;
  display: grid;
  width: clamp(29px, 8cqw, 41px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #ffffffed;
  color: #552c95;
}

.self-care-play::before {
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
  transform: translateX(1px);
  content: "";
}

.self-care-copy {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: clamp(8px, 2.6cqw, 13px);
}

.self-care-copy strong {
  font-size: clamp(12px, 3.1cqw, 16px);
  line-height: 1.3;
}

.consultation-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 2.1cqw, 11px);
  padding: clamp(8px, 2.7cqw, 14px);
  border-radius: clamp(14px, 4.1cqw, 21px);
  background: var(--fill);
}

.consultation-option p {
  margin: 0;
}

.consultation-option h3 {
  margin: 3px 0;
  font-size: clamp(12px, 3.1cqw, 16px);
  line-height: 1.25;
}

.consultation-badge {
  display: grid;
  width: clamp(29px, 10cqw, 51px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 35%;
  background: color-mix(in srgb, var(--consultation-tint, var(--academy-pump-300)) 43%, var(--fill));
  color: var(--ink);
  font: 400 clamp(13px, 4.2cqw, 22px)/1 var(--editorial);
}

.consultation-option[data-tone="mint"] { --consultation-tint: var(--academy-mint-300); }
.consultation-option[data-tone="butter"] { --consultation-tint: var(--academy-butter-300); }
.consultation-option[data-tone="lavender"] { --consultation-tint: var(--academy-lavender-300); }

.consultation-action {
  display: grid;
  min-height: var(--button-height);
  place-items: center;
  padding-inline: clamp(6px, 1.9cqw, 10px);
  border: 0;
  border-radius: 14px;
  background: var(--academy-pill);
  color: var(--academy-wine);
  font: 600 clamp(10px, 2.5cqw, 13px)/1.2 var(--academy-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.academy-content button:focus-visible,
.consultation-action:focus-visible,
.academy-dialog :is(button, a):focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: 2px;
}

.academy-dialog {
  position: fixed;
  inset: var(--dialog-top) auto auto var(--dialog-left);
  width: var(--dialog-width);
  height: var(--dialog-height);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 14px/1.5 var(--academy-sans);
}

.academy-dialog-viewport {
  position: absolute;
  inset: var(--screen-block-inset) calc(var(--screen-side-inset) * 1%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  border-radius: var(--screen-radius);
  pointer-events: none;
}

.academy-dialog-panel {
  position: relative;
  min-height: 0;
  max-height: calc(100% - 54px);
  padding: 14px clamp(14px, 4cqw, 20px) 26px;
  overflow: auto;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  overscroll-behavior: contain;
  pointer-events: auto;
}

.academy-dialog::backdrop {
  background: transparent;
}

.phone:has(.academy-dialog[open]) > .iphone-bezel {
  visibility: hidden;
}

.phone-screen:has(> .academy-dialog[open])::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #240f1b42;
  content: "";
}

.academy-dialog [hidden] {
  display: none;
}

.academy-dialog h2 {
  font-family: var(--editorial);
  font-weight: 400;
}

.academy-dialog h2:focus {
  outline: none;
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.dialog-close {
  flex: none;
  width: var(--button-height);
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--ink);
  background: var(--fill);
  font: 400 23px/1 var(--academy-sans);
  cursor: pointer;
}

.stage-picker form {
  min-height: 50%;
  padding: clamp(10px, 3.6cqw, 18px) clamp(14px, 4cqw, 22px) clamp(12px, 4.2cqw, 22px);
}

:is(.stage-picker, .knowledge-picker)[open] .academy-dialog-panel {
  animation: bottom-sheet-enter .26s cubic-bezier(.2, .75, .25, 1);
}

.knowledge-picker-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: calc(100% - clamp(34px, 9cqw, 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: #faf5f4;
}

.knowledge-picker-progress {
  display: flex;
  gap: 4px;
  padding: 6px clamp(12px, 3.5cqw, 18px) 0;
}

.knowledge-picker-progress button {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  align-items: start;
  padding: 8px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.knowledge-picker-progress button::before {
  height: 3px;
  border-radius: 99px;
  background: #e6d9dd;
  content: "";
}

.knowledge-picker-progress .is-read::before {
  background: #b87a8b;
}

.knowledge-picker-progress [aria-current="step"]::before {
  background: var(--academy-wine);
}

.knowledge-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(14px, 4cqw, 20px) clamp(10px, 2.5cqw, 14px);
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.7cqw, 14px);
}

.knowledge-picker-header .dialog-close {
  display: grid;
  place-items: center;
  border: 2px solid var(--academy-wine);
  background: transparent;
}

.knowledge-picker-header .dialog-close svg {
  width: 20px;
}

.knowledge-picker-pages {
  display: flex;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.knowledge-picker-pages.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.knowledge-picker-page {
  flex: 0 0 100%;
  min-width: 0;
  padding: clamp(18px, 5cqw, 28px) clamp(16px, 6.4cqw, 33px) 24px;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.knowledge-picker-page h2 {
  margin-bottom: clamp(11px, 3.5cqw, 18px);
  font-size: clamp(23px, 6.3cqw, 33px);
  line-height: 1.12;
  text-wrap: balance;
}

.knowledge-picker-lead {
  margin: 0;
  color: var(--secondary-ink);
  font-size: clamp(13px, 3.2cqw, 16px);
}

.knowledge-picker-illustration {
  --weekly-card-color: var(--academy-pump-300);
  --weekly-art-hue: -9deg;
  display: grid;
  height: clamp(116px, 47cqw, 240px);
  margin-block: clamp(16px, 5cqw, 26px);
  place-items: center;
  overflow: hidden;
  border-radius: clamp(12px, 3.5cqw, 18px);
  background: color-mix(in srgb, var(--weekly-card-color) 55%, var(--paper));
  isolation: isolate;
  pointer-events: none;
}

.knowledge-picker-illustration img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: hue-rotate(var(--weekly-art-hue)) brightness(1.1);
  mix-blend-mode: multiply;
}

.knowledge-picker-detail-image img {
  object-fit: cover;
  object-position: center 20%;
  filter: none;
  mix-blend-mode: normal;
}

.knowledge-food-guide {
  margin-block: 16px;
  padding-block-end: 12px;
  border-bottom: 1px solid var(--edge);
  font-size: clamp(12px, 3cqw, 15px);
}

.knowledge-food-guide section + section {
  margin-top: 16px;
}

.knowledge-food-guide h3 {
  margin: 0 0 7px;
  color: var(--academy-wine);
  font-size: clamp(15px, 3.65cqw, 19px);
  line-height: 1.25;
}

.knowledge-food-guide dl,
.knowledge-food-guide dd {
  margin: 0;
}

.knowledge-food-guide dl {
  display: grid;
  gap: 7px;
}

.knowledge-food-guide dl > div {
  display: grid;
  grid-template-columns: minmax(64px, .44fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.knowledge-food-guide dt {
  color: #552c95;
  font-weight: 600;
}

.knowledge-sleep-chart {
  --sleep-asleep: #866bcf;
  --sleep-awake: #e9e1fa;
  margin: 0 0 16px;
  padding: clamp(12px, 4cqw, 20px);
  border-radius: 16px;
  background: var(--fill);
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.8cqw, 14px);
}

.knowledge-sleep-chart strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: clamp(19px, 5.4cqw, 28px);
  font-weight: 600;
}

.sleep-chart-track {
  display: flex;
  height: clamp(12px, 4cqw, 20px);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 5px;
}

.sleep-chart-track span {
  flex: var(--hours) 0 0;
  background: var(--sleep-awake);
}

.sleep-chart-track span:nth-child(odd) {
  background: var(--sleep-asleep);
}

.sleep-chart-axis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4px;
}

.sleep-chart-axis span:nth-child(2) { text-align: center; }
.sleep-chart-axis span:last-child { text-align: end; }

.sleep-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  color: var(--ink);
}

.sleep-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sleep-chart-legend span::before {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--sleep-asleep);
  content: "";
}

.sleep-chart-legend span:last-child::before {
  background: var(--sleep-awake);
}

.knowledge-sleep-chart p {
  margin: 6px 0 0;
}

.knowledge-course-coach {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(13px, 5cqw, 25px);
  color: var(--secondary-ink);
  font-size: clamp(11px, 2.8cqw, 14px);
}

.knowledge-course-coach img {
  width: clamp(42px, 13cqw, 65px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 24%;
}

.knowledge-course-coach strong {
  display: block;
  color: var(--ink);
  font-size: clamp(15px, 4cqw, 21px);
  font-weight: 600;
}

.knowledge-course-coach div span:first-child {
  color: var(--academy-wine);
}

.knowledge-course-training {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: clamp(13px, 4.5cqw, 22px) 0;
  border-radius: clamp(12px, 3.5cqw, 18px);
  object-fit: cover;
}

.knowledge-course-link,
.featured-course-trial,
.question-view-all,
.lochia-check-in button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--academy-wine);
  color: var(--fill);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.featured-course-trial {
  margin-block-start: 8px;
  background: var(--trial-accent);
}

.academy-content .featured-course-trial:focus-visible {
  outline-color: var(--trial-accent);
}

.question-view-all > span:first-child {
  text-wrap: balance;
}

.lochia-check-in {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.lochia-check-in .lochia-check-in-answer {
  border: 1px solid var(--academy-line);
  background: var(--fill);
  color: var(--academy-wine);
}

.lochia-camera-footer {
  z-index: 1;
  padding: 5px clamp(12px, 4cqw, 20px) clamp(14px, 4.5cqw, 23px);
}

.lochia-camera-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--fill);
  box-shadow: 0 4px 22px #7705231c;
  color: var(--secondary-ink);
  font: inherit;
  font-size: clamp(11px, 2.8cqw, 14px);
  text-align: start;
  cursor: pointer;
}

.lochia-camera-button strong {
  display: block;
  color: var(--academy-wine);
  font-size: clamp(13px, 3.5cqw, 17px);
  font-weight: 600;
}

.lochia-camera-icon {
  flex: 0 0 23px;
}

.lochia-check-in-photo .lochia-camera-icon {
  filter: brightness(0) invert(1);
}

.lochia-camera-status {
  color: var(--academy-wine);
}

.lochia-camera-status {
  margin: 5px 0 0;
  font-size: 12px;
}

.lochia-photo-preview {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 10px;
}

.lochia-photo-preview img {
  display: block;
  max-width: 100%;
  max-height: 140px;
  border-radius: 8px;
  object-fit: contain;
}

.knowledge-observation,
.knowledge-follow-up,
.knowledge-checkup-link {
  margin: 14px 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--academy-pill);
}

.knowledge-observation legend {
  float: left;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
}

.knowledge-observation-options {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.knowledge-observation label {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--academy-wine);
  border-radius: 999px;
  color: var(--academy-wine);
  cursor: pointer;
}

.knowledge-observation input {
  position: absolute;
  opacity: 0;
}

.knowledge-observation label:has(:checked) {
  background: var(--academy-wine);
  color: var(--fill);
}

.knowledge-observation label:has(:focus-visible) {
  outline: 2px solid var(--academy-wine);
  outline-offset: 2px;
}

.knowledge-follow-up h3 {
  margin: 0;
  color: var(--academy-wine);
  font-size: inherit;
  font-weight: 600;
}

.knowledge-follow-up p {
  margin: 8px 0 0;
}

.knowledge-vision-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0;
  padding: 10px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--secondary-ink);
  font-size: clamp(10px, 2.7cqw, 13px);
  text-align: center;
}

.knowledge-vision-comparison figcaption {
  grid-column: 1 / -1;
  color: var(--ink);
  font-weight: 600;
}

.vision-picture {
  display: block;
  width: 100%;
  aspect-ratio: 440 / 393;
  margin-bottom: 4px;
  object-fit: contain;
  transform: scale(1.15);
}

.vision-picture-blurred {
  filter: blur(clamp(2px, 1.05cqw, 5.5px));
}

.knowledge-lochia-guide {
  margin: 16px 0;
  padding: clamp(10px, 3cqw, 16px);
  border-radius: 14px;
  background: var(--fill);
  font-size: clamp(11px, 2.7cqw, 13px);
  line-height: 1.35;
}

.knowledge-lochia-guide figcaption {
  font-weight: 600;
  text-align: center;
}

.lochia-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 3px 5px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.lochia-stages li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.lochia-swatches {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: clamp(50px, 14cqw, 71px);
}

.lochia-swatch {
  width: clamp(14px, 5.2cqw, 26px);
  height: clamp(31px, 9.7cqw, 49px);
  border: 1px solid var(--academy-line);
  border-radius: 999px;
}

.lochia-swatch[data-shade="bright-red"] { background: #bf3d48; }
.lochia-swatch[data-shade="dark-red"] { background: #8d2838; }
.lochia-swatch[data-shade="pink"] { background: #ca898d; }
.lochia-swatch[data-shade="light-brown"] { background: #b48b76; }
.lochia-swatch[data-shade="cream"] { background: #fff0d5; }

.lochia-later-stage .lochia-swatch {
  height: clamp(40px, 12cqw, 60px);
  outline: 1.5px solid var(--academy-wine);
  outline-offset: 2px;
}

.lochia-timing,
.lochia-week-note {
  color: var(--secondary-ink);
}

.lochia-week-note {
  margin: 0;
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--academy-pill);
}

.lochia-week-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--academy-wine);
}

.knowledge-checkup-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--academy-wine);
  text-decoration: none;
}

.knowledge-checkup-link .card-secondary {
  display: block;
  margin-top: 2px;
}

@keyframes bottom-sheet-enter {
  from { transform: translateY(100%); }
}

.stage-picker form {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2.3cqw, 12px);
}

.stage-picker-header,
.stage-picker-week-heading,
.stage-picker-arrows {
  display: flex;
  align-items: center;
}

.stage-picker-header h2 {
  margin: 0;
}

.stage-picker-phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border-radius: 99px;
  background: var(--academy-pill);
}

.stage-picker-phases button,
.stage-picker-current,
.stage-picker-done {
  padding: 4px 8px;
  border: 0;
  border-radius: 99px;
  color: var(--academy-wine);
  background: transparent;
  font: 600 clamp(11px, 2.65cqw, 13px)/1.2 var(--academy-sans);
  cursor: pointer;
}

.stage-picker-phases button[aria-pressed="true"] {
  background: var(--fill);
  box-shadow: 0 1px 4px #240f1b19;
}

.stage-picker-week-controls {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
  gap: clamp(5px, 1.7cqw, 9px);
}

.stage-picker-week-heading {
  justify-content: space-between;
  color: var(--secondary-ink);
  font-size: 12px;
  font-weight: 600;
}

.stage-picker-arrows {
  gap: 6px;
}

.stage-picker-arrows button {
  width: var(--button-height);
  padding: 0;
  border: 1px solid var(--academy-line);
  border-radius: 50%;
  background: var(--fill);
  color: var(--academy-wine);
  font: 400 20px/1 var(--academy-sans);
  cursor: pointer;
}

.stage-picker-arrows button:disabled {
  opacity: .35;
  cursor: default;
}

.stage-picker-weeks {
  --visible-weeks: 5;
  --week-gap: 5px;
  --week-inset: 4px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible-weeks) - 1) * var(--week-gap)) / var(--visible-weeks));
  gap: var(--week-gap);
  padding: var(--week-inset);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--week-inset);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.stage-picker-week {
  position: relative;
  display: grid;
  place-content: center;
  gap: 1px;
  border: 1px solid var(--academy-line);
  border-radius: 99px;
  background: var(--fill);
  color: var(--ink);
  line-height: 1.2;
  text-align: center;
  scroll-snap-align: start;
  cursor: pointer;
}

.stage-picker-week input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
}

.stage-picker-week span {
  font-size: 10px;
}

.stage-picker-week strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.stage-picker-week:has(input:checked),
.stage-picker-done {
  border-color: var(--academy-wine);
  background: var(--academy-wine);
  color: var(--fill);
}

.stage-picker-week:has(input:focus-visible) {
  outline: 2px solid var(--academy-wine);
  outline-offset: 1px;
}

.stage-picker-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stage-picker-actions button {
  white-space: nowrap;
}

.stage-picker-current {
  border: 1px solid var(--academy-line);
  background: var(--fill);
}

@container (min-width: 430px) {
  .stage-picker-weeks {
    --visible-weeks: 7;
  }
}

@container (max-width: 320px) {
  .stage-picker form {
    gap: 5px;
    padding-block-end: 10px;
  }

  .stage-picker-weeks {
    --visible-weeks: 4;
  }
}

.entry-detail p {
  margin: 8px 0 0;
}

.entry-reference {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  color: var(--academy-wine);
  font-size: 13px;
  text-underline-offset: 2px;
}

.entry-meta,
.entry-subtitle {
  color: var(--secondary-ink);
  font-size: 12px;
}

.entry-detail > .entry-knowledge {
  margin-top: 16px;
}

.support-practice:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--academy-lavender-300) 38%, var(--fill));
  color: #552c95;
}

.support-practice-time {
  padding-inline-start: 8px;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.support-practice-control {
  padding-inline: 14px;
  color: inherit;
}

.entry-knowledge section + section {
  margin-top: 14px;
}

.entry-knowledge h3,
.knowledge-picker-lead-heading {
  margin: 0;
  color: var(--academy-wine);
  font-size: 14px;
  font-weight: 600;
}

.entry-knowledge p {
  margin: 4px 0 0;
}

.knowledge-picker-lead-heading:not([hidden]) {
  margin-bottom: 4px;
}

@container (max-width: 380px) {
  .question-preview {
    --check-in-columns: 2;
  }
}

.tab-bar {
  position: relative;
  z-index: 2;
  grid-area: 4 / 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-inline: min(2.74cqw, 14px);
  padding: 3px;
  border: 1px solid #240f1b18;
  border-radius: 999px;
  background: var(--fill);
  box-shadow: 0 4px 14px #240f1b08;
}

.tab-bar button {
  display: grid;
  min-width: 0;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: clamp(8px, 2.2cqw, 11px);
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.tab-bar svg {
  width: clamp(16px, 4.11cqw, 21px);
  height: clamp(16px, 4.11cqw, 21px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-bar button:disabled {
  cursor: default;
}

.tab-bar button[aria-current="page"] {
  color: var(--academy-wine);
  background: var(--academy-pill);
}

.tab-bar button:focus-visible {
  outline: 2px solid var(--academy-wine);
  outline-offset: -2px;
}

.home-indicator {
  position: relative;
  z-index: 1;
  grid-area: 5 / 1;
  display: grid;
  place-items: center;
  background: var(--paper);
}

.academy-page:not([hidden]) ~ .home-indicator {
  background: transparent;
}

.home-indicator span {
  width: 30%;
  height: 4px;
  border-radius: 99px;
  background: var(--ink);
}

.touch-cursor {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
  transform: translate(-50%, -50%);
  border: 1px solid #240f1b25;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, #ffffffb3 34%, #ffffff8a 58%, #eeeeee7a);
  box-shadow: inset 0 1px 2px #fff9, inset 0 -5px 10px #0000000d;
  pointer-events: none;
  transition: opacity .09s ease, transform .1s ease;
}

.dialog-cursor-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

:is(.phone-screen, .academy-dialog-panel)[data-pointer],
:is(.phone-screen, .academy-dialog-panel)[data-pointer] * {
  cursor: none !important;
}

:is(.phone-screen, .academy-dialog-panel)[data-pointer] .touch-cursor {
  opacity: 1;
}

:is(.phone-screen, .academy-dialog-panel)[data-pointer="down"] .touch-cursor {
  transform: translate(-50%, -50%) scale(.82);
}

@media (prefers-reduced-motion: reduce) {
  .academy-page {
    scroll-behavior: auto;
  }

  .weekly-card {
    transform: scale(var(--weekly-scale));
  }

  .weekly-rail {
    height: calc(var(--weekly-height) + var(--weekly-lift) + 2 * var(--weekly-shadow-space));
  }

  .academy-dialog[open] .academy-dialog-panel {
    animation: none;
  }

  .touch-cursor {
    transition: none;
  }
}