/* ============================================================
   screens/grownup.css — today · choose-profile · parent-edu
   All rules scoped under .scr[data-screen="…"].
   Figma frames are 375×812; positions below are Figma px.
   ============================================================ */

/* ============================== today ============================== */
.scr[data-screen="today"] { background: #fff; font-family: var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.scr[data-screen="today"] * { box-sizing: border-box; }
.scr[data-screen="today"] p,
.scr[data-screen="today"] h2 { margin: 0; }

.scr[data-screen="today"] .gu-today-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Illustrated Header / Today Hero — 375×120 */
.scr[data-screen="today"] .gu-hero { position: relative; height: 120px; overflow: hidden; }
.scr[data-screen="today"] .gu-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scr[data-screen="today"] .gu-hero-mask { position: absolute; left: 0; bottom: 0; display: block; }

/* Main Content — 1489px tall in Figma (+ room to clear the floating tab bar) */
.scr[data-screen="today"] .gu-main { position: relative; background: #fff; min-height: 1489px; padding-bottom: 104px; }

/* Section headers — Mobile/Heading S (20) */
.scr[data-screen="today"] .gu-sechead {
  min-height: 56px; padding: 16px 24px; display: flex; align-items: center; gap: 8px;
}
.scr[data-screen="today"] .gu-sechead h2 {
  font: 700 20px/24px var(--hs-font-sans); letter-spacing: -0.6px; color: var(--hs-warm-grey-700); white-space: nowrap;
}
.scr[data-screen="today"] .gu-chev {
  width: 24px; height: 24px; border-radius: 999px; background: #f9f4f2;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scr[data-screen="today"] .gu-chev img { display: block; }

/* Recents / Favorites — secondary Medium (40) buttons */
.scr[data-screen="today"] .gu-seg { display: flex; gap: 8px; padding: 8px 24px; height: 56px; }
.scr[data-screen="today"] .gu-pill {
  height: 40px; padding: 0 16px; border-radius: 999px; background: #f9f4f2;
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="today"] .gu-pill--weak { color: #44423f; }
.scr[data-screen="today"] .gu-pill img { display: block; }

/* Your essentials — section 56..385 (header 56 + 4 + open card 149 + 12 + 48 + 12 + 48) */
.scr[data-screen="today"] .gu-ess { display: flex; flex-direction: column; gap: 4px; height: 329px; }

/*
 * Checklist card stack (Figma "Checklist Accordion" 3559:65625). One step is open
 * at a time. Each card holds its collapsed row and its open layout on top of each
 * other; .is-open animates the height and crossfades between them. The outgoing
 * layer fades out first and the incoming one fades in after, so labels never overlap.
 */
@property --cl-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f9f4f2;
}
.scr[data-screen="today"] .gu-cl {
  --cl-ease: cubic-bezier(0.6, 0, 0.4, 1); /* Figma custom bezier, 0.3s */
  --cl-dur: 0.3s;
  --cl-fade-out: opacity 0.1s ease-out;
  --cl-fade-in: opacity 0.15s ease-in 0.15s;
  --cl-open-h: 149px; /* the Figma mobile card; content always fits within the 150px cap */
  list-style: none; margin: 0; padding: 0 24px 0 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.scr[data-screen="today"] .gu-cl-item { position: relative; display: flex; gap: 8px; }

/* Timeline: 4px round dashes (6 on / 12 off) from the first dot to the last */
.scr[data-screen="today"] .gu-cl-rail { width: 16px; flex: none; display: flex; flex-direction: column; align-items: center; }
.scr[data-screen="today"] .gu-cl-dash {
  flex: 1 1 0; width: 4px; min-height: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='18'%3E%3Crect width='4' height='10' rx='2' fill='%23E2DED9'/%3E%3C/svg%3E") repeat-y;
  background-origin: content-box; background-clip: content-box;
}
.scr[data-screen="today"] .gu-cl-dash--up { padding-bottom: 4px; background-position: 0 100%; }
.scr[data-screen="today"] .gu-cl-dash--down { padding-top: 4px; background-position: 0 0; }
.scr[data-screen="today"] .gu-cl-item:first-child .gu-cl-dash--up,
.scr[data-screen="today"] .gu-cl-item:last-child .gu-cl-dash--down { visibility: hidden; }
.scr[data-screen="today"] .gu-cl-item + .gu-cl-item::before {
  content: ""; position: absolute; top: -12px; left: 6px; width: 4px; height: 8px; border-radius: 2px; background: #e2ded9;
}
.scr[data-screen="today"] .gu-cl-dot {
  width: 16px; height: 16px; flex: none; border: 2px solid #e2ded9; border-radius: 50%; background: #fff;
  transition: background-color var(--cl-dur) var(--cl-ease), border-color var(--cl-dur) var(--cl-ease), transform var(--cl-dur) var(--cl-ease);
}
/* Active dot is 20px in Figma; scaling keeps the 16px slot */
.scr[data-screen="today"] .gu-cl-item.is-open .gu-cl-dot { background: #ff7300; border-color: #fc5500; transform: scale(1.25); }

/* Card; the registered colour lets the fill animate between yellow and cream */
.scr[data-screen="today"] .gu-cl-card {
  position: relative; flex: 1 1 auto; min-width: 0; height: 48px; border-radius: 16px; overflow: hidden; isolation: isolate;
  --cl-bg: #f9f4f2; background: var(--cl-bg);
  transition: height var(--cl-dur) var(--cl-ease), --cl-bg var(--cl-dur) var(--cl-ease);
}
.scr[data-screen="today"] .gu-cl-item.is-open .gu-cl-card { height: var(--cl-open-h); --cl-bg: var(--cl-open-bg, #f9f4f2); }

/* Collapsed row — Playlist Card / Inactive */
.scr[data-screen="today"] .gu-cl-row {
  position: absolute; inset: 0 0 auto; height: 48px; z-index: 3; padding: 12px; border: 0; background: none;
  display: flex; align-items: center; gap: 2px; white-space: nowrap; text-align: left; cursor: pointer;
  font: 400 14px/21px var(--hs-font-sans); color: #44423f;
  transition: var(--cl-fade-in);
}
.scr[data-screen="today"] .gu-cl-row span + span { margin-left: 2px; }
.scr[data-screen="today"] .gu-cl-item.is-open .gu-cl-row { opacity: 0; pointer-events: none; transition: var(--cl-fade-out); }

/* Open card — details left, art right (they overlap by 41px), centered so the
   card reveals it from the middle as it grows */
.scr[data-screen="today"] .gu-cl-open {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--cl-open-h); transform: translateY(-50%); z-index: 2;
  display: flex; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  opacity: 0; pointer-events: none; transition: var(--cl-fade-out);
}
.scr[data-screen="today"] .gu-cl-item.is-open .gu-cl-open { opacity: 1; pointer-events: auto; transition: var(--cl-fade-in); }
.scr[data-screen="today"] .gu-cl-details {
  position: relative; z-index: 2; flex: 1 1 0; min-width: 0; margin-right: -41px; padding: 16px 0 16px 16px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
}
/* The art fades out toward its left edge (Figma's gradient overlay, as a mask), so
   it blends into whatever colour the card is — with no seam at fractional pixels */
.scr[data-screen="today"] .gu-cl-thumb {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, #000 36%, rgba(0, 0, 0, 0.2) 76.08%, transparent 100%);
  mask-image: linear-gradient(to left, #000 36%, rgba(0, 0, 0, 0.2) 76.08%, transparent 100%);
}
.scr[data-screen="today"] .gu-cl-thumb img,
.scr[data-screen="today"] .gu-cl-thumb video {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; min-width: 100%; max-width: none;
  object-fit: cover; object-position: right center; display: block; pointer-events: none;
}
.scr[data-screen="today"] .gu-cl-card .gu-ess-more { opacity: 0; pointer-events: none; transition: var(--cl-fade-out); }
/* The play glyph is 10×12 inside a 16px icon frame */
.scr[data-screen="today"] .gu-ess-meta .gu-cl-icon--play { width: 10px; height: 12px; margin: 2px 3px; }
.scr[data-screen="today"] .gu-cl-item.is-open .gu-ess-more { opacity: 1; transition: var(--cl-fade-in); }
.scr[data-screen="today"] .gu-cl-row:focus-visible,
.scr[data-screen="today"] .gu-cl-open:focus-visible { outline: none; }
.scr[data-screen="today"] .gu-cl-card:has(:focus-visible) { outline: 2px solid var(--hs-blue-200, #0061ef); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .scr[data-screen="today"] .gu-cl * { transition-duration: 1ms !important; }
}

/* .Checklist Details — shared by the open checklist cards */
.scr[data-screen="today"] .gu-ess-more {
  position: absolute; right: 12px; top: 12px; z-index: 3; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.scr[data-screen="today"] .gu-ess-more img { display: block; }
.scr[data-screen="today"] .gu-ess-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 30px;
  background: rgba(255, 255, 255, 0.6);
  font: 700 12px/14.4px var(--hs-font-sans); letter-spacing: -0.36px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="today"] .gu-ess-avs { position: relative; width: 33.6px; height: 14px; display: inline-block; }
.scr[data-screen="today"] .gu-ess-avs img {
  position: absolute; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 1.167px solid #fff; object-fit: cover;
}
.scr[data-screen="today"] .gu-ess-avs img:nth-child(1) { left: 0; }
.scr[data-screen="today"] .gu-ess-avs img:nth-child(2) { left: 9.8px; }
.scr[data-screen="today"] .gu-ess-avs img:nth-child(3) { left: 19.6px; }
.scr[data-screen="today"] .gu-ess-title {
  display: block; font: 700 18px/21.6px var(--hs-font-sans); letter-spacing: -0.54px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="today"] .gu-ess-meta { display: flex; flex-direction: column; gap: 2px; font: 400 12px/18px var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.scr[data-screen="today"] .gu-ess-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.scr[data-screen="today"] .gu-ess-meta img { display: block; }

.scr[data-screen="today"] .gu-weaker { color: #63605d; }

/* HS Jr Ingress — 385..525 */
.scr[data-screen="today"] .gu-ingress { position: relative; padding: 24px 24px 0; height: 140px; }
.scr[data-screen="today"] .gu-jr-card {
  display: flex; align-items: stretch; width: 327px; height: 116px; border-radius: 16px; overflow: hidden;
  background: #02873e; text-decoration: none;
}
.scr[data-screen="today"] .gu-jr-copy {
  flex: 1 0 0; min-width: 0; padding: 16px 8px 16px 24px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
}
.scr[data-screen="today"] .gu-jr-badge {
  height: 16px; padding: 2px 4px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center;
  font: 700 10px/1.2 var(--hs-font-sans); letter-spacing: -0.3px; color: var(--hs-blue-200); white-space: nowrap;
}
.scr[data-screen="today"] .gu-jr-title { font: 700 18px/21.6px var(--hs-font-sans); letter-spacing: -0.54px; color: #fff; }
.scr[data-screen="today"] .gu-jr-body { font: 400 14px/21px var(--hs-font-sans); color: #fff; }
.scr[data-screen="today"] .gu-jr-art { width: 116px; height: 116px; object-fit: cover; flex-shrink: 0; align-self: flex-end; display: block; }
.scr[data-screen="today"] .gu-jr-more {
  position: absolute; right: 32px; top: 32px; width: 24px; height: 24px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.scr[data-screen="today"] .gu-jr-more img { display: block; }

/* Ebb Jumpstarts — 525..669 */
.scr[data-screen="today"] .gu-ebb { padding-top: 8px; height: 144px; }
.scr[data-screen="today"] .gu-ebb .gu-sechead img { display: block; }
.scr[data-screen="today"] .gu-actions { display: flex; gap: 16px; padding: 0 24px; }
.scr[data-screen="today"] .gu-action {
  width: 155.5px; height: 72px; padding: 12px; border-radius: 16px; background: #f9f4f2;
  filter: drop-shadow(0 2px 2px rgba(20, 19, 19, 0.2));
  font: 400 16px/24px var(--hs-font-sans); color: var(--hs-warm-grey-700);
}

/* Recommendations — 669..1465 */
.scr[data-screen="today"] .gu-recs { padding-top: 8px; }
.scr[data-screen="today"] .gu-cardrow { padding-top: 16px; }
.scr[data-screen="today"] .gu-sechead--row { padding-top: 12px; }
.scr[data-screen="today"] .gu-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 24px; align-items: start; }
.scr[data-screen="today"] .gu-tile {
  background: #f9f4f2; border-radius: 16px; overflow: hidden; padding-bottom: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.scr[data-screen="today"] .gu-tile-img { aspect-ratio: 155.5 / 104; overflow: hidden; }
.scr[data-screen="today"] .gu-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scr[data-screen="today"] .gu-tile-body { min-height: 60px; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.scr[data-screen="today"] .gu-tile-title {
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: var(--hs-warm-grey-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr[data-screen="today"] .gu-tile-meta { display: flex; align-items: center; gap: 4px; font: 400 12px/18px var(--hs-font-sans); color: #44423f; white-space: nowrap; }
.scr[data-screen="today"] .gu-tile-meta img { display: block; }

/* Bottom Navigation (Tab Bar) — fixed at y 710, 375×102 */
.scr[data-screen="today"] .gu-tabbar {
  position: absolute; left: 0; top: 710px; width: 375px; height: 102px; z-index: 5;
  padding: 12px 16px 0; filter: drop-shadow(0 0 4px rgba(20, 19, 19, 0.08));
}
.scr[data-screen="today"] .gu-tabbar-base {
  height: 60px; padding: 4px; border-radius: 999px; overflow: hidden; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.scr[data-screen="today"] .gu-tab {
  position: relative; flex: 1 0 0; min-width: 0; height: 52px; margin-right: -5.5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px;
  font: 400 12px/18px var(--hs-font-sans); color: #63605d; white-space: nowrap;
}
.scr[data-screen="today"] .gu-tab:last-child { margin-right: 0; }
.scr[data-screen="today"] .gu-tab.on { color: var(--hs-warm-grey-700); height: 60px; padding: 8px 8px 9px; }
.scr[data-screen="today"] .gu-tab-sel { position: absolute; inset: 4px 0 5px; border-radius: 100px; background: #f9f4f2; }
.scr[data-screen="today"] .gu-tab img,
.scr[data-screen="today"] .gu-tab span:not(.gu-tab-sel) { position: relative; display: block; }

/* Light press feedback */
.scr[data-screen="today"] [data-tap],
.scr[data-screen="today"] [data-go] { transition: transform var(--hs-duration-fastest) var(--hs-easing-standard); }
.scr[data-screen="today"] [data-tap]:active,
.scr[data-screen="today"] [data-go]:active { transform: scale(0.98); }

/* ========================= choose-profile ========================= */
.scr[data-screen="choose-profile"] { background: #fff; font-family: var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.scr[data-screen="choose-profile"] * { box-sizing: border-box; }
.scr[data-screen="choose-profile"] p,
.scr[data-screen="choose-profile"] h1 { margin: 0; }

/* Toolbar Top — y 44, buttons row at y 60 */
.scr[data-screen="choose-profile"] .gu-toolbar {
  position: absolute; left: 0; top: 44px; width: 375px; padding: 16px 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.scr[data-screen="choose-profile"] .gu-toolbar-sp { width: 40px; height: 40px; }
.scr[data-screen="choose-profile"] .gu-toolbar h1 {
  font: 700 20px/24px var(--hs-font-sans); letter-spacing: -0.6px; color: var(--hs-warm-grey-700); white-space: nowrap;
}
.scr[data-screen="choose-profile"] .gu-x {
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.scr[data-screen="choose-profile"] .gu-x--filled { background: #f9f4f2; }
.scr[data-screen="choose-profile"] .gu-x img { display: block; }

/* Profile selection — top 112, slot padding 64/24, 163px columns, 24px row gap */
.scr[data-screen="choose-profile"] .gu-profiles {
  position: absolute; left: 0; top: 112px; width: 375px; padding: 64px 24px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; row-gap: 24px;
}
.scr[data-screen="choose-profile"] .gu-prof {
  width: 163px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
}
.scr[data-screen="choose-profile"] .gu-prof--add { gap: 12px; }
.scr[data-screen="choose-profile"] .gu-prof p {
  width: 100%; text-align: center; font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: #1e1e1e;
}

/* Profile Avatar — 112 with 4px primary ring, 96 mask */
.scr[data-screen="choose-profile"] .gu-av { position: relative; width: 112px; height: 112px; border-radius: 999px; flex-shrink: 0; }
.scr[data-screen="choose-profile"] .gu-av.sel::before {
  content: ""; position: absolute; inset: 0; border: 4px solid var(--hs-blue-200); border-radius: 999px;
}
.scr[data-screen="choose-profile"] .gu-av-mask {
  position: absolute; left: 8px; top: 8px; width: 96px; height: 96px; border-radius: 999px; overflow: hidden;
}
.scr[data-screen="choose-profile"] .gu-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 80px; display: block; }
/* Jr. Badge — 56×17 at top 79, Intersect shape behind the label */
.scr[data-screen="choose-profile"] .gu-jrtag { position: absolute; left: 20px; top: 79px; width: 56px; height: 17px; }
.scr[data-screen="choose-profile"] .gu-jrtag img {
  position: absolute; left: calc(-9.47px - 8.333px); top: -5px; width: 91.603px; height: 26px; display: block; max-width: none;
}
.scr[data-screen="choose-profile"] .gu-jrtag b {
  position: absolute; left: 20px; top: 0; font: 700 14px/1.2 var(--hs-font-sans); letter-spacing: -0.42px; color: #fff; white-space: nowrap;
}

/* Add Jr. profile — 104 dashed circle inside 112 */
.scr[data-screen="choose-profile"] .gu-add { width: 112px; height: 112px; padding: 4px; display: flex; flex-shrink: 0; }
.scr[data-screen="choose-profile"] .gu-add-ring {
  position: relative; flex: 1; border-radius: 999px; background: #fff; border: 4px dashed #d9d9d9;
  display: flex; align-items: center; justify-content: center;
}
.scr[data-screen="choose-profile"] .gu-add-ring img { display: block; margin-left: 1px; }

/* Toast — 359×48 at (8, 660); opacity-only smart animate */
.scr[data-screen="choose-profile"] .gu-toast {
  position: absolute; left: 8px; top: 660px; width: 359px; min-height: 48px; z-index: 4;
  padding: 8px 16px 8px 12px; border-radius: 8px; background: #050726;
  filter: drop-shadow(0 0 6px rgba(20, 19, 19, 0.2));
  display: flex; align-items: center; gap: 4px;
  font: 400 14px/1.5 var(--hs-font-sans); color: #e5e7ec;
  opacity: 0; pointer-events: none;
  transition: opacity var(--hs-duration-fast) var(--hs-easing-standard);
}
.scr[data-screen="choose-profile"] .gu-toast.on { opacity: 1; }
.scr[data-screen="choose-profile"] .gu-toast img { display: block; flex-shrink: 0; }
.scr[data-screen="choose-profile"] .gu-toast span { padding-left: 8px; }

/* Button Tray — "Manage Jr. profiles" tertiary button */
.scr[data-screen="choose-profile"] .gu-tray {
  position: absolute; left: 0; bottom: 0; width: 375px; background: #fff; padding: 16px 24px 32px;
  display: flex; justify-content: center;
}
.scr[data-screen="choose-profile"] .gu-manage {
  height: 48px; display: inline-flex; align-items: center; gap: 4px;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: var(--hs-blue-200);
}
.scr[data-screen="choose-profile"] .gu-manage img { display: block; }

.scr[data-screen="choose-profile"] [data-go] { transition: transform var(--hs-duration-fastest) var(--hs-easing-standard); }
.scr[data-screen="choose-profile"] [data-go]:active { transform: scale(0.97); }

/* =========================== parent-edu =========================== */
.scr[data-screen="parent-edu"] { background: #fff; font-family: var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.scr[data-screen="parent-edu"] * { box-sizing: border-box; }
.scr[data-screen="parent-edu"] h1,
.scr[data-screen="parent-edu"] h2,
.scr[data-screen="parent-edu"] p { margin: 0; }

/* Top Toolbar — Nav Bar 375×56 at y 44 */
.scr[data-screen="parent-edu"] .gu-navbar { position: absolute; left: 0; top: 44px; width: 375px; height: 56px; }
.scr[data-screen="parent-edu"] .gu-navbar h1 {
  position: absolute; left: 56px; top: 17px; width: 263px; text-align: center;
  font: 700 18px/21.6px var(--hs-font-sans); letter-spacing: -0.54px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="parent-edu"] .gu-x {
  position: absolute; left: 319px; top: 8px; width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.scr[data-screen="parent-edu"] .gu-x img { display: block; }

/* Edu - Carousel — slot strip 375×560 at y 100 */
.scr[data-screen="parent-edu"] .gu-car {
  position: absolute; left: 0; top: 100px; width: 375px; height: 560px; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.scr[data-screen="parent-edu"] .gu-car:active { cursor: grabbing; }
.scr[data-screen="parent-edu"] .gu-car-track { display: flex; width: calc(375px * 4); height: 100%; will-change: transform; }
.scr[data-screen="parent-edu"] .gu-slide {
  width: 375px; height: 560px; flex-shrink: 0; padding-top: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.scr[data-screen="parent-edu"] .gu-slide-art { width: 247px; height: 164.67px; display: block; pointer-events: none; }
.scr[data-screen="parent-edu"] .gu-slide-text { width: 375px; padding: 0 24px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.scr[data-screen="parent-edu"] .gu-slide-text h2 {
  font: 700 32px/38.4px var(--hs-font-sans); letter-spacing: -0.96px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="parent-edu"] .gu-slide-text p { font: 400 16px/24px var(--hs-font-sans); color: #44423f; }

/* Carousel Dots — 44×56 at (165.5, 660); 8px active, 4px inactive, 8px gaps */
.scr[data-screen="parent-edu"] .gu-dots {
  position: absolute; left: 0; top: 660px; width: 375px; height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.scr[data-screen="parent-edu"] .gu-dot {
  appearance: none; border: 0; background: none; padding: 0 4px; height: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.scr[data-screen="parent-edu"] .gu-dot:first-child { padding-left: 0; }
.scr[data-screen="parent-edu"] .gu-dot:last-child { padding-right: 0; }
.scr[data-screen="parent-edu"] .gu-dot span {
  display: block; width: 4px; height: 4px; border-radius: 50%; background: #96938d;
  transition: width var(--hs-duration-fast) var(--hs-easing-standard), height var(--hs-duration-fast) var(--hs-easing-standard), background-color var(--hs-duration-fast) linear;
}
.scr[data-screen="parent-edu"] .gu-dot.on span { width: 8px; height: 8px; background: var(--hs-warm-grey-700); }

/* Button Tray — Continue primary 327×48 at (24, 732) */
.scr[data-screen="parent-edu"] .gu-edu-tray { position: absolute; left: 0; top: 716px; width: 375px; height: 96px; padding: 16px 24px 32px; background: #fff; }
.scr[data-screen="parent-edu"] .gu-primary {
  display: flex; align-items: center; justify-content: center; width: 327px; height: 48px; border-radius: 999px;
  background: var(--hs-blue-200); color: #fff; text-decoration: none;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px;
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
.scr[data-screen="parent-edu"] .gu-primary:active { transform: scale(0.98); }