@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #07111f;
  --card: #0b1628;
  --card-strong: #0f1c32;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f5f7fb;
  --muted: #a7b4c8;
  --muted-strong: #d3d8e2;
  --accent: #ffcb08;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

[hidden] {
  display: none !important;
}

body.mode-loading {
  overflow: hidden;
}

body.mode-installed {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body.mode-sheet-open,
body.mode-installed.mode-sheet-open {
  overflow: hidden;
}

body.mode-installed .page {
  min-height: 100svh;
  height: auto;
  overflow: visible;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

.page {
  width: min(1120px, calc(100% - 24px));
  margin: 0 auto;
  padding: 16px 0 108px;
}

.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 16px;
}

.brand-logo {
  width: clamp(220px, 28vw, 340px);
  height: auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.hero-copy,
.transfer-mini {
  display: grid;
  align-content: start;
  gap: 14px;
}

.desktop-only {
  display: grid;
  gap: 14px;
}

.mobile-only {
  display: none;
}

.landing-mobile {
  gap: 16px;
}

.hero-lead {
  max-width: 38ch;
}

.roadmap-prep {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 203, 8, 0.26);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(255, 203, 8, 0.09), rgba(17, 56, 87, 0.42));
}

.roadmap-prep-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.roadmap-prep-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 203, 8, 0.12);
}

.roadmap-prep strong {
  font-family: "League Spartan", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.1;
}

.roadmap-prep p {
  max-width: 55ch;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.86rem;
  line-height: 1.48;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(7, 17, 31, 0.98);
  transition: opacity 220ms ease;
}

.loader.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.loader[hidden] {
  display: none !important;
}

.loader-shell {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px;
}

.loader-mark {
  position: relative;
  width: min(76vw, 224px);
  height: min(76vw, 224px);
  display: grid;
  place-items: center;
}

.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  border-right-color: rgba(255, 203, 8, 0.54);
  box-shadow: 0 0 0 1px rgba(255, 203, 8, 0.08);
  animation: loader-spin 1.2s linear infinite;
}

.loader-logo {
  width: min(70%, 136px);
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.loader-text {
  margin: 0;
  min-height: 1.6em;
  max-width: 26ch;
  color: var(--text);
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.08rem, 2.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.push-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 540px;
  padding: 16px 16px 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 203, 8, 0.18);
  background: linear-gradient(180deg, rgba(255, 203, 8, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.push-preview-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #07111f;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(255, 203, 8, 0.22);
}

.push-preview-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.push-preview-copy {
  display: grid;
  gap: 2px;
}

.push-preview-meta {
  margin: 0;
  color: rgba(245, 247, 251, 0.7);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.push-preview-copy strong {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 900;
}

.push-preview-copy span {
  color: var(--muted-strong);
  line-height: 1.45;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 900;
}

.field-step {
  display: block;
  margin-bottom: 2px;
  color: var(--accent) !important;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 900;
}

.hero h1,
.notify h2,
.transfer-mini h2,
.sheet-panel h2 {
  font-family: "League Spartan", "Manrope", sans-serif;
  letter-spacing: -0.03em;
  line-height: 0.96;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5.2vw, 4.3rem);
  max-width: 11ch;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.install-callout-list {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}

.install-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.install-callout strong {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
}

.install-callout span:last-child {
  display: block;
  color: var(--muted-strong);
  margin-top: 2px;
  line-height: 1.35;
  font-size: 0.88rem;
}

.install-callout-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #07111f;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(255, 203, 8, 0.22);
}

.install-callout-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.signup-form {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  max-width: 640px;
}

.signup-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  color: var(--text);
  background: var(--card-strong);
}

.signup-form input::placeholder {
  color: rgba(167, 180, 200, 0.65);
}

.cta,
button {
  border: 0;
  border-radius: 18px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 160ms ease, opacity 160ms ease;
}

.cta:hover,
button:hover {
  transform: translateY(-1px);
}

.cta:disabled,
button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.primary {
  color: #07111f;
  background: var(--accent);
}

.secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}

.ghost {
  color: var(--muted-strong);
  background: transparent;
  border: 1px solid transparent;
}

.cta {
  min-width: 170px;
}

.microcopy,
.subtle,
.mini-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.transfer-mini {
  padding-left: 22px;
  border-left: 1px solid var(--line);
  gap: 12px;
  align-content: start;
}

.transfer-mini h2 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}

.transfer-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.transfer-code {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  width: min(100%, 320px);
  aspect-ratio: 1;
}

.transfer-code img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  object-fit: contain;
}

.notify {
  margin-top: 18px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.mode-installed .landing {
  display: none;
}

.mode-installed .notify {
  display: flex !important;
  margin-top: 0;
  width: 100%;
}

.notify-copy {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.notify h2 {
  margin: 0;
  font-size: 2.1rem;
}

.installed-check {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #07111f;
  background: var(--accent);
  font-size: 0.72rem;
  line-height: 1;
}

.notify p {
  margin: 0;
}

#notificationProfileWrap[hidden],
#notificationSaved[hidden],
#notificationActions[hidden],
#notificationSuccess[hidden],
#notificationCard[hidden],
#familySetupCard[hidden],
#roadmapBuildCard[hidden],
#thankYouCard[hidden],
#planCard[hidden] {
  display: none !important;
}

#notificationBody:empty {
  display: none;
}

.notify-username {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.notify-username .cta {
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
}

.notify-username .field {
  width: 100%;
  justify-self: stretch;
  min-width: 0;
}

.notify-username .field input {
  width: 100%;
  min-width: 0;
}

.landing-email-form {
  display: grid;
  gap: 8px;
  width: 100%;
}

.landing-email-form .field {
  width: 100%;
}

.landing-email-form .field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  color: var(--text);
  background: var(--card-strong);
}

.saved-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.12);
  border: 1px solid rgba(255, 203, 8, 0.24);
  color: var(--text);
  font-weight: 900;
}

.saved-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #07111f;
  background: var(--accent);
  font-size: 0.85rem;
}

.example-push-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.example-push-stack {
  position: relative;
  padding-bottom: 38px;
}

.example-push {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 14px 13px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 28, 50, 0.98), rgba(10, 19, 34, 0.98));
  border: 1px solid rgba(255, 203, 8, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.14);
}

.example-push-stack .example-push {
  position: relative;
  z-index: 3;
}

.example-push-stack .example-push:nth-child(2) {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 16px;
  z-index: 2;
  opacity: 0.96;
  transform: translateY(2px) scale(0.99);
  filter: saturate(0.95);
}

.example-push-stack .example-push:nth-child(3) {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  z-index: 1;
  opacity: 0.92;
  transform: translateY(4px) scale(0.982);
  filter: saturate(0.92);
}

.example-push-stack .example-push:nth-child(n + 2) > * {
  visibility: hidden;
}

.example-push-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #07111f;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(255, 203, 8, 0.22);
}

.example-push-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.example-push-copy {
  display: grid;
  gap: 2px;
}

.example-push-meta {
  margin: 0;
  color: rgba(245, 247, 251, 0.84);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.example-push-title {
  margin: 0;
  color: var(--text);
  font-weight: 900;
}

.example-push-body {
  margin: 0;
  color: rgba(245, 247, 251, 0.82);
  line-height: 1.4;
}

.example-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #ff3b30;
  border: 2px solid rgba(15, 28, 50, 0.96);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  z-index: 4;
}

.notify-pill-row {
  margin-top: 4px;
}

.notify-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: min(260px, 100%);
}

.notify-actions .example-push-list {
  margin-top: 12px;
}

.notify-step-copy {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.45;
  font-size: 0.92rem;
}

.notify-step-label {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 900;
}

.notify-actions .cta {
  width: 100%;
}

.thank-you-card {
  margin-top: 18px;
}

.plan-card {
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  align-items: flex-start;
}

.plan-card .notify-copy {
  gap: 10px;
  width: 100%;
}

.mode-installed .plan-card {
  min-height: calc(100svh - env(safe-area-inset-bottom));
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

.plan-eyebrow {
  display: inline-flex;
  width: fit-content;
}

.plan-lead {
  max-width: 48ch;
  color: var(--muted-strong);
}

.plan-hero {
  display: grid;
  gap: 6px;
}

.plan-streak-card {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-radius: 24px;
  border: 1px solid rgba(255, 203, 8, 0.2);
  background: linear-gradient(180deg, rgba(255, 203, 8, 0.14), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

.plan-streak-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-month {
  margin: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plan-streak-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 203, 8, 0.36);
  background: rgba(255, 203, 8, 0.92);
  color: #07111f;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(255, 203, 8, 0.2);
}

.plan-streak-chip-live {
  background: linear-gradient(180deg, rgba(255, 223, 90, 0.98), rgba(255, 203, 8, 0.9));
  border-color: rgba(255, 203, 8, 0.46);
}

.plan-streak-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.plan-streak-count {
  width: 86px;
  min-width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 17, 31, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.plan-streak-count span {
  display: block;
  text-align: center;
}

#planThemeTitle {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2rem, 4vw, 2.95rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.84;
  transform: translateY(2px);
}

.plan-streak-count-label {
  margin-top: 4px;
  color: rgba(245, 247, 251, 0.8);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.plan-upcoming-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
}

.plan-upcoming-link::after {
  content: "→";
  font-size: 0.78rem;
  line-height: 1;
  opacity: 1;
  transform: translateY(-1px);
}

.plan-streak-copy {
  display: grid;
  gap: 4px;
  align-content: center;
}

.plan-streak-copy span {
  color: var(--muted-strong);
  line-height: 1.38;
  max-width: 26ch;
  font-size: 0.92rem;
}

.plan-streak-meter {
  display: flex;
  gap: 6px;
}

.plan-streak-meter span {
  flex: 1 1 0;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.18);
}

.plan-streak-meter .is-on {
  background: var(--accent);
}

.plan-streak-meter .is-off {
  background: rgba(255, 203, 8, 0.32);
}

.plan-section-list {
  display: grid;
  gap: 6px;
}

.plan-section {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.portal-report-card {
  display: grid;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.portal-report-section {
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.portal-report-top {
  display: grid;
  gap: 2px;
  padding: 10px 12px 2px;
}

.portal-report-top .plan-month {
  color: var(--accent);
}

.portal-report-subtitle {
  color: var(--muted-strong);
  line-height: 1.4;
  font-size: 0.88rem;
}

.portal-report-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  min-height: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.portal-report-row:last-child {
  border-bottom: 0;
}

.portal-report-label {
  color: rgba(255, 203, 8, 0.9);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-report-value {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 900;
  min-width: 0;
}

.portal-report-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-status-section {
  gap: 12px;
  border-color: rgba(255, 203, 8, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
}

.portal-status-main {
  display: grid;
  gap: 5px;
}

.portal-status-main strong {
  color: var(--text);
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.portal-status-main p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.35;
}

.portal-status-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-status-stats span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(7, 17, 31, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-status-stats small {
  color: rgba(255, 203, 8, 0.84);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-status-stats b {
  color: var(--text);
  font-size: 0.95rem;
}

.portal-kids-section {
  gap: 10px;
}

.portal-kid-list {
  display: grid;
  gap: 10px;
}

.portal-kid-row {
  display: grid;
  gap: 7px;
}

.portal-kid-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal-kid-top strong {
  color: var(--text);
  font-size: 1rem;
}

.portal-kid-top span {
  color: var(--muted-strong);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: right;
}

.portal-kid-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.portal-kid-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ffe98a);
}

.portal-section-heading {
  display: grid;
  gap: 2px;
}

.portal-section-heading h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.portal-featured-activity,
.portal-activity-deck-section {
  gap: 12px;
  padding: 14px;
}

.portal-activity-card {
  display: grid;
  gap: 10px;
}

.portal-activity-card.is-featured {
  gap: 12px;
}

.portal-activity-poster-wrap {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 203, 8, 0.24);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.portal-activity-poster {
  width: 100%;
  height: auto;
}

.portal-activity-copy {
  display: grid;
  gap: 4px;
}

.portal-activity-copy span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.portal-activity-copy strong {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.05;
}

.portal-activity-copy p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.4;
}

.portal-activity-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-activity-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 78%);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 12px;
}

.portal-activity-deck .portal-activity-card {
  scroll-snap-align: start;
}

.portal-activity-deck .portal-activity-copy p {
  display: none;
}

.portal-newsletter-list {
  display: grid;
  gap: 10px;
}

.portal-newsletter-list.is-archive-list {
  gap: 12px;
}

.portal-newsletter-list.is-single-list {
  gap: 0;
}

.portal-latest-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 0;
}

.portal-latest-plan-copy {
  min-width: 0;
}

.portal-latest-plan-copy strong {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
}

.portal-newsletter-card {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 203, 8, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.portal-newsletter-copy {
  display: grid;
  gap: 6px;
}

.portal-newsletter-copy strong {
  font-size: 1rem;
  line-height: 1.08;
}

.portal-newsletter-copy p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.45;
}

.portal-newsletter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portal-newsletter-index {
  color: rgba(255, 203, 8, 0.5);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.portal-newsletter-card.is-accordion {
  grid-template-columns: minmax(0, 1fr);
}

.portal-newsletter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  color: #07111f;
  background: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.portal-newsletter-link.is-inline {
  width: auto;
  flex-shrink: 0;
}

.plan-reader {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
  min-height: calc(100svh - 120px - env(safe-area-inset-bottom));
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
}

.plan-reader[hidden] {
  display: none !important;
}

.plan-reader-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-reader-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 203, 8, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.plan-reader-logo {
  width: min(180px, 44vw);
  height: auto;
  display: block;
}

.plan-reader-copy {
  display: grid;
  gap: 4px;
}

.plan-reader-meta {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 900;
}

.plan-reader-title {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.plan-reader-frame-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 203, 8, 0.18);
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.18);
  flex: 1 1 auto;
}

.plan-reader-frame {
  display: block;
  width: 100%;
  min-height: min(76vh, 820px);
  height: 100%;
  border: 0;
}

.portal-tab-hero {
  display: grid;
  gap: 8px;
  padding: 16px 16px 15px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 203, 8, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.portal-tab-hero-eyebrow {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 900;
}

.portal-tab-hero h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.portal-tab-hero-copy {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.45;
  max-width: 44ch;
}

.portal-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin-top: 0;
  padding: 14px 0 calc(11px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.14), rgba(5, 11, 22, 0.96) 28%),
    rgba(5, 11, 22, 0.96);
  border-top: 1px solid rgba(255, 203, 8, 0.4);
  box-shadow:
    0 -1px 0 rgba(255, 203, 8, 0.12),
    0 -16px 36px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

.portal-nav-inner {
  width: min(1120px, calc(100% - 16px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}

.portal-nav-button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 2px 2px 12px;
  border: 0;
  color: var(--muted-strong);
  background: transparent;
  text-align: center;
}

.portal-nav-button.is-active {
  color: var(--text);
}

.portal-nav-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transform: translateY(-10px);
}

.portal-nav-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.portal-nav-label {
  font-size: 0.52rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-8px);
}

.plan-card.is-reading {
  position: fixed;
  inset: 0;
  z-index: 32;
  margin: 0;
  display: block;
  padding: 14px 16px calc(86px + env(safe-area-inset-bottom));
  border-radius: 0;
  border: 0;
  background: var(--bg);
  box-shadow: none;
}

.plan-card.is-reading .notify-copy {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  width: 100%;
  min-height: 0;
}

.plan-card.is-reading .plan-reader {
  width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  min-width: 0;
}

.plan-card.is-reading .plan-reader-frame-wrap {
  width: calc(100% + 32px);
  margin: 0 -16px;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.plan-card.is-reading .plan-reader-frame {
  min-height: 100%;
}

.plan-section h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.4rem;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.plan-section-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.plan-item-list {
  display: grid;
  gap: 10px;
}

.plan-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-item-tag {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.14);
  border: 1px solid rgba(255, 203, 8, 0.2);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plan-item strong {
  font-size: 1rem;
  line-height: 1.1;
}

.plan-item p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.45;
}

.portal-vitals-list,
.portal-toggle-list {
  display: grid;
  gap: 10px;
}

.portal-vital-row,
.portal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-vital-copy,
.portal-toggle-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-vital-label {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
}

.portal-vital-copy strong,
.portal-toggle-copy strong {
  font-size: 1rem;
  line-height: 1.12;
}

.portal-vital-copy strong {
  color: var(--text);
}

.portal-vital-copy span,
.portal-toggle-copy span {
  color: var(--muted-strong);
  line-height: 1.45;
}

.portal-profile-hero {
  display: grid;
  gap: 12px;
  width: min(92%, 860px);
  margin-inline: auto;
  padding: 18px 16px 16px;
  border-radius: 26px;
  border: 1px solid rgba(255, 203, 8, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.portal-profile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.portal-profile-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal-profile-hero h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.portal-profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #07111f;
  background: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-profile-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--muted-strong);
  line-height: 1.45;
}

.portal-profile-progress {
  display: grid;
  gap: 8px;
  padding: 14px 14px 13px;
  border-radius: 18px;
  background: rgba(7, 17, 31, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-profile-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal-profile-progress-top span {
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;
}

.portal-profile-progress-top strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.6rem;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.portal-profile-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.portal-profile-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 203, 8, 0.95), rgba(255, 239, 166, 0.92));
}

.portal-profile-progress-note {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.84rem;
  line-height: 1.35;
}

.portal-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-profile-stats-inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-profile-stat {
  display: grid;
  gap: 4px;
  padding: 14px 13px;
  border-radius: 18px;
  background: rgba(7, 17, 31, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-profile-stat-label {
  color: rgba(255, 203, 8, 0.9);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal-profile-stat strong {
  color: var(--text);
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.portal-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.portal-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portal-profile-link::after {
  content: "→";
  font-size: 0.82rem;
}

.portal-profile-note {
  color: var(--muted-strong);
  font-size: 0.76rem;
  line-height: 1.4;
}

.portal-profile-preferences {
  width: min(90%, 740px);
  margin-inline: auto;
  margin-top: 6px;
  padding: 18px 16px 16px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 203, 8, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.12);
}

.portal-profile-preferences::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 203, 8, 0.95), rgba(255, 203, 8, 0.18));
}

.portal-profile-preferences .portal-toggle-list {
  gap: 10px;
}

.portal-profile-preferences .portal-toggle-row {
  padding: 14px 16px;
  border-left: 3px solid rgba(255, 203, 8, 0.42);
  background: rgba(7, 17, 31, 0.26);
}

.portal-profile-preferences .portal-toggle-copy strong {
  font-size: 1.08rem;
}

.portal-profile-preferences .portal-toggle-copy span {
  font-size: 0.86rem;
}

.portal-calendar-section {
  gap: 12px;
}

.portal-calendar-shell {
  display: grid;
  gap: 12px;
}

.portal-calendar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.95fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.portal-calendar-hero-copy {
  display: grid;
  gap: 8px;
  padding: 16px 16px 15px;
  border-radius: 22px;
  border: 1px solid rgba(255, 203, 8, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 203, 8, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
}

.portal-calendar-hero-copy h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.portal-calendar-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-calendar-summary-card {
  display: grid;
  gap: 6px;
  padding: 14px 13px;
  border-radius: 20px;
  background: rgba(7, 17, 31, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-calendar-summary-card span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.portal-calendar-summary-card strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.portal-calendar-summary-card p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.35;
  font-size: 0.84rem;
}

.portal-calendar-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.portal-calendar-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.portal-calendar-header strong {
  display: block;
  margin-top: 4px;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.portal-calendar-header span {
  color: var(--muted-strong);
  max-width: 32ch;
  line-height: 1.4;
  font-size: 0.9rem;
}

.portal-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.portal-calendar-weekdays span {
  text-align: center;
}

.portal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.portal-calendar-day {
  display: grid;
  gap: 8px;
  min-height: 78px;
  padding: 9px 8px 8px;
  border-radius: 16px;
  background: rgba(7, 17, 31, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-calendar-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.portal-calendar-day.is-weekend {
  border-color: rgba(255, 203, 8, 0.24);
  background: linear-gradient(180deg, rgba(255, 203, 8, 0.08), rgba(7, 17, 31, 0.18));
}

.portal-calendar-day.has-event {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.portal-calendar-day-number {
  color: var(--text);
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}

.portal-calendar-day-labels {
  display: grid;
  gap: 4px;
}

.portal-calendar-day-labels span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.12);
  border: 1px solid rgba(255, 203, 8, 0.16);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.portal-calendar-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.portal-calendar-legend-dot.is-weekend {
  background: #ffcb08;
}

.portal-calendar-legend-dot.is-birthday {
  background: #7dd3fc;
}

.portal-calendar-legend-dot.is-family {
  background: #c4b5fd;
}

.portal-calendar-events {
  display: grid;
  gap: 10px;
}

.portal-calendar-event {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-calendar-event-date {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.14);
  border: 1px solid rgba(255, 203, 8, 0.18);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-calendar-event strong {
  font-size: 1rem;
  line-height: 1.1;
}

.portal-calendar-event p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.45;
}

.portal-vital-action {
  flex-shrink: 0;
}

.portal-vital-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 203, 8, 0.14);
  border: 1px solid rgba(255, 203, 8, 0.2);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-inline-btn {
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: #07111f;
  background: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.portal-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-switch.is-on {
  color: #07111f;
  background: var(--accent);
}

.portal-switch.is-off {
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}

.plan-card .notify-actions .cta {
  min-width: 0;
}

.plan-actions {
  gap: 12px;
}

.plan-share-list {
  margin-top: 4px;
}

.thank-you-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.thank-you-item {
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 203, 8, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 203, 8, 0.18);
  color: var(--text);
  line-height: 1.5;
}

.thank-you-item strong {
  color: var(--text);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}

.sheet[hidden],
.notify[hidden] {
  display: none !important;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 220ms ease;
}

.sheet-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100dvh - 20px - env(safe-area-inset-bottom));
  margin: 0 auto;
  padding: 22px 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(7, 17, 31, 0.12);
  border-radius: 26px;
  background: #ffffff;
  color: #07111f;
  box-shadow: 0 24px 70px rgba(7, 17, 31, 0.26);
  transform: translate3d(0, 120%, 0) rotateX(8deg) scale(0.985);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.18, 1, 0.22, 1),
    opacity 220ms ease;
  will-change: transform, opacity;
}

.sheet-open .sheet-panel {
  transform: translate3d(0, 0, 0) rotateX(0) scale(1);
  opacity: 1;
}

.sheet-open .sheet-backdrop {
  opacity: 1;
}

.sheet-handle {
  width: 56px;
  height: 6px;
  border-radius: 999px;
  margin: 0 auto 14px;
  background: rgba(7, 17, 31, 0.12);
}

.sheet-panel h2 {
  margin: 4px 0 10px;
  font-size: 2.3rem;
  padding-right: 72px;
  color: #07111f;
}

.sheet-estimate {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 13px;
  width: fit-content;
  border-radius: 999px;
  background: #07111f;
  border: 1px solid rgba(7, 17, 31, 0.12);
  color: #f5f7fb;
  letter-spacing: 0.14em;
}

.sheet-dismiss {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: #07111f;
  background: rgba(7, 17, 31, 0.06);
  border: 1px solid rgba(7, 17, 31, 0.1);
}

.step-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0 0 12px;
  color: #07111f;
  line-height: 1.4;
  list-style: none;
}

.step-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(255, 203, 8, 0.2);
  box-shadow: 0 8px 20px rgba(7, 17, 31, 0.04);
}

.step-item.is-app {
  align-items: center;
}

.sheet-visual-hint {
  display: none;
}

.step-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: #07111f;
  border: 1px solid rgba(7, 17, 31, 0.18);
  font-weight: 900;
  font-size: 0.85rem;
}

.step-item.is-app .step-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  padding: 0;
  background: #07111f;
  border: 1px solid rgba(7, 17, 31, 0.18);
  box-shadow: none;
}

.step-icon svg,
.step-icon img {
  width: 18px;
  height: 18px;
  fill: currentColor;
  object-fit: contain;
}

.step-item.is-app .step-icon svg,
.step-item.is-app .step-icon img {
  width: 22px;
  height: 22px;
}

.step-text {
  color: #516173;
}

.step-copy {
  display: grid;
  gap: 3px;
}

.step-copy strong {
  color: #07111f;
  font-size: 1rem;
  line-height: 1.1;
}

.step-copy span {
  color: #516173;
  line-height: 1.35;
}

.step-inline-hint {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}

.step-inline-hint svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.sheet-toolbar-cue {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 18px 0 8px;
  color: rgba(7, 17, 31, 0.42);
}

.sheet-toolbar-label {
  color: rgba(7, 17, 31, 0.62);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sheet-toolbar-swipe {
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: rgba(7, 17, 31, 0.18);
  box-shadow: 0 0 0 1px rgba(7, 17, 31, 0.04) inset;
  animation: toolbar-swipe 1.8s ease-in-out infinite;
}

.sheet-toolbar-cue svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  animation: toolbar-bounce 1.8s ease-in-out infinite;
}

@keyframes toolbar-swipe {
  0%,
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: translateY(1px);
  }
}

@keyframes toolbar-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.sheet-continue {
  width: 100%;
  min-height: 44px;
  border: 0;
  color: #31516b;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.sheet-continue:focus-visible {
  outline: 3px solid #0872ad;
  outline-offset: 2px;
}

.install-sheet,
.hero-slim {
  min-height: 0;
}

.admin-page {
  width: min(1240px, calc(100% - 24px));
}

.admin-shell {
  display: grid;
  gap: 18px;
}

.admin-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(11, 22, 40, 0.96), rgba(8, 16, 29, 0.96));
  box-shadow: var(--shadow);
}

.admin-hero h1 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.admin-hero .lede {
  max-width: 60ch;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  min-width: min(100%, 420px);
}

.admin-funnel {
  gap: 14px;
}

.admin-funnel-actions {
  gap: 10px;
}

.funnel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.funnel-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.funnel-card span {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.funnel-card strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.stat-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-card span {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.stat-card strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}

.admin-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.admin-compose .actions {
  margin-top: 4px;
}

.actions-wrap {
  flex-wrap: wrap;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  color: var(--text);
  background: var(--card-strong);
}

.field-inline input {
  background: rgba(255, 255, 255, 0.05);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-head-wrap {
  align-items: center;
}

.section-head h2 {
  margin: 4px 0 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 2rem;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.users-toolbar {
  display: grid;
  gap: 12px;
}

.subscriber-list {
  display: grid;
  gap: 12px;
}

.subscriber-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.subscriber-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 203, 8, 0.24);
}

.subscriber-row.is-selected {
  background: rgba(255, 203, 8, 0.08);
  border-color: rgba(255, 203, 8, 0.4);
}

.subscriber-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.subscriber-main {
  display: grid;
  gap: 8px;
}

.subscriber-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.subscriber-heading strong {
  font-size: 1.05rem;
}

.subscriber-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.subscriber-actions .cta {
  min-width: 92px;
}

.status {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: grid;
  }

  .transfer-mini {
    display: none;
  }

  .push-preview {
    max-width: 100%;
  }

  .transfer-code {
    width: min(100%, 330px);
  }

  .notify {
    flex-direction: column;
    align-items: stretch;
  }

  .notify-actions {
    width: 100%;
    min-width: 0;
  }

  .notify-copy {
    width: 100%;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-stats {
    width: 100%;
    min-width: 0;
  }

  .funnel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-vital-row,
  .portal-toggle-row,
  .plan-hero-row {
    align-items: flex-start;
  }

  .portal-calendar-hero {
    grid-template-columns: 1fr;
  }

  .portal-calendar-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page {
    width: min(100% - 16px, 1120px);
    padding-top: 10px;
    padding-bottom: 156px;
  }

  .signup-form {
    grid-template-columns: 1fr;
  }

  .cta {
    width: 100%;
    min-width: 0;
  }

  .sheet {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .sheet-panel {
    padding: 18px 16px 16px;
  }

  .sheet-panel h2 {
    font-size: 2rem;
    padding-right: 60px;
  }

  .sheet-toolbar-cue {
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 14vw, 4rem);
  }

  .pill {
    padding: 8px 11px;
  }

  .sheet-dismiss {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .sheet-visual-hint {
    padding: 12px 14px;
  }

  .sheet-visual-arrow {
    width: 46px;
    height: 46px;
  }

  .sheet-visual-arrow svg {
    width: 20px;
    height: 20px;
  }

  .admin-panel {
    padding: 18px 16px;
  }

  .subscriber-row {
    grid-template-columns: 1fr;
  }

  .subscriber-actions {
    justify-content: flex-start;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }

  .funnel-grid {
    grid-template-columns: 1fr;
  }

  .portal-vital-row,
  .portal-toggle-row {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-vital-action {
    align-self: flex-start;
  }

  .portal-profile-hero,
  .portal-profile-preferences,
  .portal-calendar-hero,
  .portal-calendar-card,
  .portal-calendar-events,
  .portal-tab-hero {
    width: 100%;
  }

  .portal-profile-stats-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-calendar-summary-grid {
    grid-template-columns: 1fr;
  }

  .portal-calendar-grid {
    gap: 4px;
  }

  .portal-calendar-day {
    min-height: 70px;
    padding: 8px 7px 7px;
  }

  .plan-hero-row {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-upcoming-link {
    width: fit-content;
  }

  .portal-nav-icon {
    width: 28px;
    height: 28px;
  }

  .portal-nav-label {
    font-size: 0.48rem;
  }
}

/* Roadmap app shell */
body.mode-installed.page {
  width: 100%;
  padding: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(24, 104, 179, 0.22), transparent 42%),
    #06101d;
}

.mode-installed .site-header {
  display: none;
}

.mode-installed .plan-card {
  width: 100%;
  min-height: 100svh;
  padding: 0 0 calc(86px + env(safe-area-inset-bottom));
  overflow: clip;
}

.mode-installed .plan-card .notify-copy {
  display: block;
  width: 100%;
  max-width: none;
}

.mode-installed .plan-section-list {
  display: block;
  width: 100%;
}

.roadmap-home,
.roadmap-page,
.roadmap-topbar {
  width: min(100%, 680px);
  margin-inline: auto;
}

.roadmap-home {
  min-height: calc(100svh - 86px - env(safe-area-inset-bottom));
  background: #071321;
}

.roadmap-cover {
  position: relative;
  height: clamp(290px, 43svh, 390px);
  min-height: 290px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 34%, rgba(75, 161, 229, 0.45), transparent 29%),
    radial-gradient(circle at 24% 56%, rgba(255, 203, 8, 0.16), transparent 32%),
    linear-gradient(145deg, #0b4b82 0%, #082c50 52%, #071321 100%);
}

.roadmap-cover-photo,
.roadmap-cover-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.roadmap-cover-photo {
  object-fit: cover;
}

.roadmap-cover-mark {
  inset: auto -5% -18% auto;
  width: min(80%, 430px);
  height: auto;
  opacity: 0.26;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.3));
}

.roadmap-cover-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 13, 27, 0.5) 0%, transparent 34%),
    linear-gradient(0deg, #071321 0%, rgba(7, 19, 33, 0.2) 46%, transparent 70%);
}

.roadmap-topbar {
  position: relative;
  z-index: 4;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 10px;
}

.roadmap-cover .roadmap-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.roadmap-topbar.has-back {
  position: sticky;
  top: 0;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  min-height: calc(66px + env(safe-area-inset-top));
  padding-top: calc(8px + env(safe-area-inset-top));
  background: rgba(6, 25, 45, 0.94);
  border-bottom: 1px solid rgba(126, 192, 242, 0.15);
  backdrop-filter: blur(18px);
}

.roadmap-page > .roadmap-topbar,
.plan-section-list > .roadmap-topbar {
  position: sticky;
  top: 0;
  max-width: 680px;
  background: rgba(6, 25, 45, 0.94);
  border-bottom: 1px solid rgba(126, 192, 242, 0.15);
  backdrop-filter: blur(18px);
}

.roadmap-wordmark {
  width: min(240px, 58vw);
  height: auto;
}

.plan-section-list > .roadmap-topbar .roadmap-wordmark {
  width: min(180px, 46vw);
}

.roadmap-page-title {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-back,
.roadmap-avatar-button,
.roadmap-photo-action,
.roadmap-photo-mini,
.roadmap-text-action {
  border: 0;
  cursor: pointer;
}

.roadmap-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.45rem;
}

.roadmap-avatar-button {
  justify-self: end;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}

.roadmap-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #ffffff;
  color: #071321;
  background: linear-gradient(145deg, #ffda43, #ffb800);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.roadmap-avatar.is-large {
  width: 70px;
  height: 70px;
  font-size: 1.8rem;
}

.roadmap-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roadmap-cover-empty {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 86px;
  display: grid;
  gap: 4px;
}

.roadmap-cover-empty span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.roadmap-cover-empty strong {
  max-width: 14ch;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.85rem, 8vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.roadmap-cover-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.roadmap-cover-prompts span {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(4, 23, 42, 0.34);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: none;
  backdrop-filter: blur(8px);
}

.roadmap-starter-orbit {
  position: absolute;
  border: 1px solid rgba(109, 201, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.roadmap-starter-orbit.is-one {
  width: 230px;
  height: 230px;
  top: 38px;
  right: -92px;
}

.roadmap-starter-orbit.is-two {
  width: 130px;
  height: 130px;
  top: 88px;
  right: -22px;
  border-color: rgba(255, 203, 8, 0.2);
}

.roadmap-cover.starter-young {
  background: radial-gradient(circle at 78% 44%, rgba(255, 203, 8, 0.35), transparent 25%), linear-gradient(145deg, #0d6197, #073155 62%, #071321);
}

.roadmap-cover.starter-school {
  background: radial-gradient(circle at 72% 40%, rgba(67, 180, 235, 0.42), transparent 28%), linear-gradient(145deg, #0a4e86, #082846 64%, #071321);
}

.roadmap-cover.starter-teen {
  background: radial-gradient(circle at 76% 38%, rgba(235, 112, 55, 0.28), transparent 27%), linear-gradient(145deg, #15456f, #102843 58%, #071321);
}

.roadmap-cover.starter-mixed {
  background: radial-gradient(circle at 75% 40%, rgba(93, 196, 173, 0.3), transparent 28%), linear-gradient(145deg, #0e5576, #082c4c 60%, #071321);
}

.roadmap-photo-action {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 76px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 23, 42, 0.76);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  font-size: 0.72rem;
  font-weight: 800;
}

.roadmap-photo-action.is-primary {
  right: 20px;
  bottom: 24px;
  left: 20px;
  justify-content: center;
  min-height: 45px;
  color: #071321;
  background: #ffcb08;
  box-shadow: 0 12px 28px rgba(255, 188, 0, 0.28);
  font-size: 0.78rem;
}

.roadmap-photo-action svg,
.roadmap-photo-mini svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.roadmap-home-body {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 14px;
  margin-top: -54px;
  padding: 0 14px 22px;
}

.roadmap-family-strip {
  min-width: 0;
}

.roadmap-story-strip {
  display: flex;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  padding: 3px 4px 8px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.roadmap-story-strip::-webkit-scrollbar {
  display: none;
}

.roadmap-story {
  flex: 0 0 72px;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  scroll-snap-align: start;
  cursor: pointer;
}

.roadmap-story-ring {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #ffffff;
  outline: 2px solid #1d8fe1;
  color: #071321;
  background: linear-gradient(145deg, #ffdd52, #ffb900);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  font-size: 1.35rem;
  font-weight: 900;
}

.roadmap-story-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roadmap-story strong {
  width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-story small {
  color: #9db0c7;
  font-size: 0.62rem;
  line-height: 1.1;
  white-space: nowrap;
}

.roadmap-story-add .roadmap-story-ring {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.62);
  outline-color: rgba(255, 203, 8, 0.45);
  color: #ffcb08;
  background: rgba(9, 35, 61, 0.92);
  box-shadow: none;
}

.roadmap-story-add.is-first {
  flex-basis: 94px;
}

.roadmap-story-add.is-first .roadmap-story-ring {
  width: 72px;
  height: 72px;
  border: 3px solid #071321;
  outline: 3px solid #ffcb08;
  color: #071321;
  background: #ffcb08;
  box-shadow: 0 10px 26px rgba(255, 188, 0, 0.24);
  animation: roadmap-add-pulse 2.4s ease-in-out infinite;
}

.roadmap-story-add.is-first strong {
  color: #ffcb08;
  font-size: 0.82rem;
}

@keyframes roadmap-add-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 203, 8, 0.18), 0 10px 26px rgba(255, 188, 0, 0.22); }
  50% { box-shadow: 0 0 0 8px rgba(255, 203, 8, 0), 0 12px 30px rgba(255, 188, 0, 0.3); }
}

.roadmap-story-add svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.roadmap-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 4px 0;
}

.roadmap-heading-row > div {
  display: grid;
  gap: 0;
}

.roadmap-heading-row span,
.roadmap-page-intro > span,
.roadmap-subsection-heading span {
  color: #eaf3fb;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.roadmap-heading-row h1,
.roadmap-page-intro h1,
.roadmap-member-card h1 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2.7rem, 13vw, 4.5rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

.roadmap-heading-row h1 {
  color: #ffcb08;
  font-size: clamp(2.5rem, 11.7vw, 4.2rem);
}

.roadmap-update-chip {
  flex: 0 0 auto;
  margin-bottom: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(115, 196, 255, 0.32);
  border-radius: 999px;
  color: #c8e8ff !important;
  background: rgba(17, 91, 145, 0.24);
  font-size: 0.54rem !important;
  letter-spacing: 0.055em !important;
}

.roadmap-setup-nudge {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 203, 8, 0.28);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 203, 8, 0.14), rgba(26, 105, 164, 0.14));
  text-align: left;
}

.roadmap-setup-nudge > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #071321;
  background: #ffcb08;
}

.roadmap-setup-nudge svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.roadmap-setup-nudge > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.roadmap-setup-nudge strong {
  font-size: 0.88rem;
}

.roadmap-setup-nudge small {
  color: #afc0d2;
  font-size: 0.7rem;
}

.roadmap-setup-nudge b {
  color: #ffcb08;
  font-size: 1.25rem;
}

.roadmap-countdown-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.roadmap-countdown-row > span {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 9px 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.roadmap-countdown-row > span:last-child {
  border-right: 0;
}

.roadmap-countdown-row small,
.roadmap-countdown-row em {
  color: #9eb0c4;
  font-size: 0.56rem;
  font-style: normal;
}

.roadmap-countdown-row strong {
  color: #fff;
  font-size: 1.2rem;
}

.roadmap-category-list {
  display: grid;
  gap: 9px;
}

.roadmap-category-card {
  position: relative;
  min-height: 102px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid rgba(102, 192, 255, 0.24);
  border-radius: 20px;
  color: #fff;
  background: #0a2948;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.roadmap-category-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.48;
}

.roadmap-category-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 25, 47, 0.98) 0%, rgba(4, 25, 47, 0.8) 60%, rgba(4, 25, 47, 0.32) 100%);
}

.roadmap-category-card.is-gold {
  border-color: rgba(255, 203, 8, 0.38);
}

.roadmap-category-card.is-gold .roadmap-category-icon {
  color: #071321;
  border-color: #ffcb08;
  background: #ffcb08;
}

.roadmap-category-icon,
.roadmap-category-copy,
.roadmap-category-card > b {
  position: relative;
  z-index: 2;
}

.roadmap-category-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 206, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 66, 114, 0.82);
  backdrop-filter: blur(8px);
}

.roadmap-category-icon svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

.roadmap-category-copy {
  display: grid;
  gap: 3px;
}

.roadmap-category-copy strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.42rem;
  line-height: 1;
}

.roadmap-category-copy small {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  line-height: 1.28;
}

.roadmap-category-card > b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #05233e;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.7rem;
  line-height: 1;
}

.roadmap-page {
  min-height: calc(100svh - 86px - env(safe-area-inset-bottom));
  padding: 18px 15px 28px;
  background: #f4f7fb;
  color: #092c51;
}

.plan-section-list > .roadmap-topbar + .roadmap-page {
  padding-top: 18px;
}

.roadmap-page-intro {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
}

.roadmap-page-intro.is-compact {
  margin-bottom: 18px;
}

.roadmap-page-intro > span,
.roadmap-subsection-heading span {
  color: #1d6da8;
}

.roadmap-page-intro h1 {
  color: #082f56;
  font-size: clamp(2.7rem, 13vw, 4rem);
}

.roadmap-page-intro p,
.roadmap-empty-inline {
  margin: 0;
  color: #597086;
  font-size: 0.92rem;
  line-height: 1.5;
}

.roadmap-page .roadmap-story {
  color: #092c51;
}

.roadmap-page .roadmap-story small {
  color: #687e91;
}

.roadmap-page .roadmap-story-add .roadmap-story-ring {
  background: #e9f1f8;
}

.roadmap-empty-inline {
  padding: 6px 4px 14px;
  font-size: 0.78rem;
}

.roadmap-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 34px 22px;
  border: 1px dashed #afc5d8;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(13, 49, 82, 0.08);
  text-align: center;
}

.roadmap-empty-icon,
.roadmap-list-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #0d5f9d, #083c69);
}

.roadmap-empty-icon.is-gold {
  color: #082f56;
  background: #ffcb08;
}

.roadmap-empty-icon svg,
.roadmap-list-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.roadmap-empty-state h2,
.roadmap-subsection h2,
.roadmap-plan-card h2 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.75rem;
  line-height: 1;
}

.roadmap-empty-state p,
.roadmap-plan-card p {
  margin: 0;
  color: #60768a;
  line-height: 1.48;
}

.roadmap-primary-action {
  width: fit-content;
  padding: 12px 17px;
  border: 0;
  border-radius: 999px;
  color: #072747;
  background: #ffcb08;
  box-shadow: 0 10px 22px rgba(216, 157, 0, 0.2);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.roadmap-primary-action.is-wide {
  width: 100%;
}

.roadmap-kid-list,
.roadmap-content-list,
.roadmap-menu-list,
.roadmap-profile-assets {
  display: grid;
  gap: 10px;
}

.roadmap-kid-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d9e5ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(13, 49, 82, 0.06);
}

.roadmap-kid-photo {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 2px solid #fff;
  border-radius: 50%;
  outline: 2px solid #2088d0;
  color: #082f56;
  background: #ffcb08;
  font-size: 1.4rem;
  font-weight: 900;
}

.roadmap-kid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.roadmap-kid-photo i {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0a4a7d;
}

.roadmap-kid-photo i svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.roadmap-kid-card > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.roadmap-kid-card > div strong {
  font-size: 1.02rem;
}

.roadmap-kid-card > div span,
.roadmap-kid-card > div small {
  color: #62778b;
  font-size: 0.72rem;
}

.roadmap-text-action {
  padding: 8px;
  color: #0c68a8;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 900;
}

.roadmap-member-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding: 17px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, #0a4c82, #072f55);
  box-shadow: 0 16px 34px rgba(13, 49, 82, 0.18);
}

.roadmap-member-card > div {
  min-width: 0;
}

.roadmap-member-card > div > span {
  color: #8cccf7;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roadmap-member-card h1 {
  margin-top: 3px;
  font-size: 1.75rem;
}

.roadmap-member-card p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
}

.roadmap-photo-mini {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #082f56;
  background: #ffcb08;
}

.roadmap-menu-list > button,
.roadmap-menu-list > a {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #dbe6ef;
  border-radius: 18px;
  color: #092c51;
  background: #fff;
  box-shadow: 0 8px 20px rgba(13, 49, 82, 0.055);
  text-align: left;
}

.roadmap-menu-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #0c5f9a;
  background: #e9f4fc;
}

.roadmap-menu-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.roadmap-menu-list > button > span:nth-child(2),
.roadmap-menu-list > a > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.roadmap-menu-list strong {
  font-size: 0.9rem;
}

.roadmap-menu-list small {
  color: #64798c;
  font-size: 0.67rem;
}

.roadmap-menu-list b,
.roadmap-list-card > b {
  color: #0d6dac;
  font-size: 1.45rem;
}

.roadmap-storage-note {
  margin: 14px 0 0;
  color: #73879a;
  font-size: 0.67rem;
  text-align: center;
}

.roadmap-profile-assets > button {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid #d8e4ee;
  border-radius: 18px;
  color: #092c51;
  background: #fff;
  text-align: left;
}

.roadmap-profile-assets > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.roadmap-profile-assets small {
  color: #697d90;
  font-size: 0.7rem;
}

.roadmap-profile-assets > button > svg {
  width: 20px;
  height: 20px;
  fill: #0c68a8;
}

.roadmap-asset-preview {
  width: 74px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  color: #082f56;
  background: linear-gradient(145deg, #d9efff, #a9d2ee);
}

.roadmap-asset-preview.is-avatar {
  width: 58px;
  height: 58px;
  margin-inline: 8px;
  border-radius: 50%;
  background: #ffcb08;
  font-size: 1.35rem;
}

.roadmap-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roadmap-asset-preview.is-cover img:not([src^="blob:"]) {
  object-fit: contain;
  padding: 8px;
  opacity: 0.52;
}

.roadmap-profile-details {
  display: grid;
  gap: 0;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #d8e4ee;
  border-radius: 20px;
  background: #fff;
}

.roadmap-profile-details > div {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e4ecf3;
}

.roadmap-profile-details > div span {
  color: #657b8e;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.roadmap-profile-details > div strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-profile-details .roadmap-primary-action {
  margin: 12px;
  width: calc(100% - 24px);
}

.roadmap-subsection {
  margin-top: 22px;
}

.roadmap-subsection-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.roadmap-subsection-heading h2 {
  margin-top: 3px;
}

.roadmap-subsection-heading button {
  padding: 8px 11px;
  border: 1px solid #bdd3e4;
  border-radius: 999px;
  color: #0c68a8;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.roadmap-plan-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 203, 8, 0.5);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 203, 8, 0.2), transparent 33%),
    linear-gradient(145deg, #0a4c82, #072a4b);
  box-shadow: 0 16px 34px rgba(13, 49, 82, 0.18);
}

.roadmap-plan-card > span {
  color: #ffcb08;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.roadmap-plan-card p {
  color: rgba(255, 255, 255, 0.74);
}

.roadmap-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 14px;
  background: #e5edf4;
}

.roadmap-filter-row span {
  padding: 9px 5px;
  border-radius: 10px;
  color: #567085;
  font-size: 0.66rem;
  font-weight: 800;
  text-align: center;
}

.roadmap-filter-row span.is-active {
  color: #fff;
  background: #092f55;
  box-shadow: 0 6px 14px rgba(9, 47, 85, 0.18);
}

.roadmap-list-card {
  min-height: 88px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 1px solid #dbe6ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(13, 49, 82, 0.055);
}

.roadmap-list-card > img {
  width: 82px;
  height: 72px;
  border-radius: 13px;
  object-fit: cover;
  object-position: center 35%;
}

.roadmap-list-card > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.roadmap-list-card small {
  color: #1577b7;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.roadmap-list-card strong {
  font-size: 0.9rem;
  line-height: 1.1;
}

.roadmap-list-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #61768a;
  font-size: 0.68rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.roadmap-list-card .roadmap-list-icon {
  width: 58px;
  height: 58px;
  margin-left: 8px;
}

.portal-nav {
  min-height: calc(84px + env(safe-area-inset-bottom));
  padding: 5px 0 max(12px, env(safe-area-inset-bottom));
  background: rgba(4, 28, 51, 0.97);
  border-top: 1px solid rgba(76, 174, 240, 0.34);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.2);
}

.portal-nav-inner {
  width: min(100%, 680px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.portal-nav-button {
  position: relative;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 1px 2px 3px;
  color: #a7c4db;
}

.portal-nav-button.is-active {
  color: #ffcb08;
}

.portal-nav-button.is-active::after {
  content: "";
  position: absolute;
  left: 27%;
  right: 27%;
  bottom: 1px;
  height: 3px;
  border-radius: 999px;
  background: #ffcb08;
}

.portal-nav-icon {
  width: 27px;
  height: 27px;
  color: currentColor;
  transform: none;
}

.portal-nav-label {
  color: currentColor;
  font-size: 0.57rem;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}

.portal-editor {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 12px;
}

.portal-editor-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 8, 15, 0.7);
  opacity: 0;
  transition: opacity 180ms ease;
}

.portal-editor-sheet {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 203, 8, 0.28);
  border-radius: 28px;
  color: #fff;
  background: #0a192b;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(110%);
  transition: transform 220ms ease;
}

.portal-editor.is-open .portal-editor-backdrop {
  opacity: 1;
}

.portal-editor.is-open .portal-editor-sheet {
  transform: translateY(0);
}

.portal-editor-handle {
  width: 44px;
  height: 5px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.portal-editor-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.portal-editor-kicker {
  margin: 0 0 3px;
  color: #ffcb08;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal-editor-heading h3 {
  margin: 0;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.portal-editor-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.4rem;
}

.portal-editor-form,
.portal-editor-fields,
.portal-editor-actions {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.portal-editor-fields .field { min-width: 0; }
.portal-editor-fields .field textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--card-strong); font: 500 16px/1.4 "Manrope", sans-serif; resize: vertical; }
.portal-editor-fields .field span small { color: #adc1d2; font-size: 0.65rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.portal-editor-hint { margin: 0; color: #a9bed1; font-size: 0.72rem; line-height: 1.4; }

.portal-editor-delete {
  padding: 10px;
  border: 0;
  color: #ff9b9b;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
}

.plan-card.is-reading {
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.plan-card.is-reading .plan-reader {
  min-height: calc(100svh - 90px - env(safe-area-inset-bottom));
  padding-bottom: 0;
}

.family-setup-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.mode-installed .family-setup-card {
  width: min(100%, 620px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 15px calc(24px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 4%, rgba(27, 117, 181, 0.3), transparent 24%),
    #071321;
  box-shadow: none;
}

.family-setup-heading {
  display: grid;
  gap: 7px;
}

.family-setup-heading h2 {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2.2rem, 11vw, 3.35rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.family-setup-heading > p:last-child {
  color: #b2c2d2;
  font-size: 0.86rem;
  line-height: 1.45;
}

.family-setup-cover {
  position: relative;
  min-height: 126px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid rgba(255, 203, 8, 0.3);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(18, 100, 158, 0.62), rgba(8, 39, 68, 0.92));
}

.family-setup-cover > img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  opacity: 0.62;
}

.family-setup-cover.has-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
}

.family-setup-cover.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 27, 49, 0.9), rgba(5, 27, 49, 0.34));
}

.family-setup-cover > div,
.family-setup-cover > button {
  position: relative;
  z-index: 2;
}

.family-setup-cover > div {
  display: grid;
  gap: 3px;
}

.family-setup-cover > div span,
.family-setup-builder-heading > div span {
  color: #7dc6f6;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.family-setup-cover > div strong {
  font-size: 0.95rem;
}

.family-setup-cover > button {
  grid-column: 1 / -1;
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  color: #071321;
  background: #ffcb08;
  font-size: 0.74rem;
  font-weight: 900;
}

.family-setup-builder {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.family-setup-builder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.family-setup-builder-heading > div {
  display: grid;
  gap: 2px;
}

.family-setup-builder-heading > div strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.35rem;
}

.family-kid-count {
  padding: 6px 9px;
  border-radius: 999px;
  color: #ffcb08;
  background: rgba(255, 203, 8, 0.1);
  font-size: 0.64rem;
  font-weight: 900;
}

.family-setup-kids {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.family-setup-kids::-webkit-scrollbar {
  display: none;
}

.family-setup-kids > p {
  margin: 0;
  color: #91a5b8;
  font-size: 0.72rem;
}

.family-setup-kid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 36px auto 18px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(101, 193, 253, 0.22);
  border-radius: 999px;
  background: rgba(6, 38, 68, 0.82);
}

.family-setup-kid > img,
.family-setup-kid > b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071321;
  background: #ffcb08;
  object-fit: cover;
}

.family-setup-kid > span {
  display: grid;
}

.family-setup-kid strong {
  font-size: 0.72rem;
}

.family-setup-kid small {
  color: #9db0c2;
  font-size: 0.57rem;
}

.family-setup-kid i {
  color: #ffcb08;
  font-size: 0.72rem;
  font-style: normal;
}

.family-setup-fields {
  display: grid;
  gap: 10px;
}

.family-setup-fields .field input {
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(4, 18, 33, 0.72);
}

.family-photo-picker {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px dashed rgba(255, 203, 8, 0.36);
  border-radius: 14px;
  cursor: pointer;
}

.family-photo-picker > span:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #071321;
  background: #ffcb08;
  font-size: 1.3rem;
}

.family-photo-picker > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.family-photo-picker strong {
  font-size: 0.76rem;
}

.family-photo-picker small {
  overflow: hidden;
  color: #93a8ba;
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-setup-actions {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.family-skip {
  padding: 10px;
  border: 0;
  color: #99adbf;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 800;
}

@media (min-width: 681px) {
  .roadmap-home,
  .roadmap-page,
  .roadmap-topbar,
  .portal-nav-inner {
    border-inline: 1px solid rgba(255, 255, 255, 0.08);
  }

  .roadmap-home,
  .roadmap-page {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.28);
  }
}

@media (max-width: 390px) {
  .roadmap-cover {
    height: 310px;
  }

  .roadmap-home-body {
    padding-inline: 11px;
  }

  .roadmap-category-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 94px;
    padding-inline: 11px;
  }

  .roadmap-category-icon {
    width: 47px;
    height: 47px;
  }

  .roadmap-category-copy strong {
    font-size: 1.25rem;
  }

  .roadmap-list-card {
    grid-template-columns: 70px minmax(0, 1fr) auto;
  }

  .roadmap-list-card > img {
    width: 70px;
    height: 66px;
  }
}

/* Guided setup and brighter roadmap onboarding */
body.mode-preinstall-onboarding.page {
  width: 100%;
  padding: 0;
  color: #082947;
  background: #edf6fb;
}

.mode-preinstall-onboarding .site-header,
.mode-preinstall-onboarding .landing {
  display: none;
}

.mode-preinstall-onboarding .notify {
  display: flex !important;
  width: 100%;
  margin: 0;
}

.mode-preinstall-onboarding #notificationCard,
.mode-installed #notificationCard,
.mode-preinstall-onboarding .family-setup-card,
.mode-installed .family-setup-card {
  width: min(100%, 620px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  color: #082947;
  background:
    radial-gradient(circle at 86% 2%, rgba(255, 203, 8, 0.3), transparent 18%),
    radial-gradient(circle at 10% 0%, rgba(42, 149, 218, 0.24), transparent 28%),
    linear-gradient(180deg, #e8f4fb 0%, #f8fbfd 45%, #ffffff 100%);
  box-shadow: none;
}

.mode-preinstall-onboarding #notificationCard,
.mode-installed #notificationCard {
  align-content: start;
  justify-content: flex-start;
  gap: clamp(34px, 7vh, 64px);
}

.mode-preinstall-onboarding #notificationCard .eyebrow,
.mode-installed #notificationCard .eyebrow,
.mode-preinstall-onboarding .family-setup-heading .eyebrow,
.mode-installed .family-setup-heading .eyebrow {
  color: #0767a6;
}

.mode-preinstall-onboarding #notificationCard h2,
.mode-installed #notificationCard h2,
.mode-preinstall-onboarding .family-setup-heading h2,
.mode-installed .family-setup-heading h2 {
  color: #082947;
}

.mode-preinstall-onboarding #notificationBody,
.mode-installed #notificationBody,
.mode-preinstall-onboarding .family-setup-heading > p:last-child,
.mode-installed .family-setup-heading > p:last-child,
.mode-preinstall-onboarding #notificationCard .notify-step-copy,
.mode-installed #notificationCard .notify-step-copy {
  color: #557087;
}

.mode-preinstall-onboarding #notificationCard .field span,
.mode-installed #notificationCard .field span,
.mode-preinstall-onboarding .family-setup-card .field span,
.mode-installed .family-setup-card .field span {
  color: #31566f;
}

.mode-preinstall-onboarding #notificationCard .field input,
.mode-installed #notificationCard .field input,
.mode-preinstall-onboarding .family-setup-card .field input,
.mode-installed .family-setup-card .field input {
  color: #082947;
  border-color: #c7dce9;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(19, 65, 96, 0.06);
}

.mode-preinstall-onboarding #notificationCard .field input::placeholder,
.mode-installed #notificationCard .field input::placeholder,
.mode-preinstall-onboarding .family-setup-card .field input::placeholder,
.mode-installed .family-setup-card .field input::placeholder {
  color: #7d94a5;
}

.mode-preinstall-onboarding #notificationCard .microcopy,
.mode-installed #notificationCard .microcopy,
.mode-preinstall-onboarding .family-setup-card .microcopy,
.mode-installed .family-setup-card .microcopy {
  color: #547188;
}

.mode-preinstall-onboarding .family-setup-card,
.mode-installed .family-setup-card {
  gap: 18px;
}

.family-setup-cover {
  min-height: 148px;
  grid-template-columns: 80px minmax(0, 1fr);
  border-color: rgba(255, 203, 8, 0.62);
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 203, 8, 0.2), transparent 34%),
    linear-gradient(135deg, #0c6aa7, #06355e);
  box-shadow: 0 14px 34px rgba(10, 70, 110, 0.18);
}

.family-setup-cover > div span {
  color: #bce7ff;
}

.family-setup-cover > div strong {
  color: #ffffff;
}

.family-setup-builder {
  gap: 15px;
  padding: 16px;
  border-color: #d7e6ef;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(15, 65, 98, 0.09);
}

.family-setup-builder-heading > div span {
  color: #1680bd;
}

.family-setup-builder-heading > div strong {
  color: #082947;
}

.family-kid-count {
  color: #082947;
  background: #fff3bc;
}

.family-kid-count-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.family-kid-count-options button {
  min-height: 48px;
  border: 1px solid #c6dce9;
  border-radius: 14px;
  color: #31566f;
  background: #f5fafd;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
}

.family-kid-count-options button.is-active {
  color: #082947;
  border-color: #ffbd00;
  background: #ffcb08;
  box-shadow: 0 7px 18px rgba(255, 188, 0, 0.24);
}

.family-setup-kids {
  display: grid;
  gap: 11px;
  overflow: visible;
}

.family-count-empty {
  display: grid;
  gap: 3px;
  padding: 20px 14px;
  border: 1px dashed #bdd5e4;
  border-radius: 16px;
  color: #31566f;
  background: #f5fafd;
  text-align: center;
}

.family-count-empty strong {
  color: #0a4772;
  font-size: 0.88rem;
}

.family-count-empty span {
  font-size: 0.7rem;
}

.family-child-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #cfe1ec;
  border-radius: 18px;
  background: #f8fbfd;
}

.family-child-card-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.family-child-card-heading > span {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 27px;
  padding: 0 7px;
  border-radius: 999px;
  color: #082947;
  background: #ffcb08;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.family-child-card-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #0a385a;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-child-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.family-child-fields .field {
  width: 100%;
  min-width: 0;
}

.family-child-fields .field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding-inline: 11px;
  font-size: 0.82rem;
}

.family-child-fields input[type="date"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.family-photo-picker {
  grid-template-columns: 54px minmax(0, 1fr);
  border-color: #aecfe1;
  background: #ffffff;
}

.family-photo-picker.has-preview {
  border-style: solid;
  border-color: #2a91cc;
  box-shadow: 0 8px 22px rgba(20, 109, 162, 0.1);
}

.family-photo-picker > .family-photo-preview {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 14px;
  color: #082947;
  background: #ffcb08;
}

.family-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-photo-preview b {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.family-photo-preview svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.family-photo-picker strong {
  color: #0b3c5f;
  font-size: 0.78rem;
}

.family-photo-picker small {
  color: #6d8799;
}

.family-add-another {
  justify-self: center;
  padding: 9px 12px;
  border: 0;
  color: #0d6ca5;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 900;
}

.family-add-another[hidden] {
  display: none;
}

.family-skip {
  color: #597488;
}

.roadmap-home-body {
  margin-top: -16px;
}

.roadmap-home-status { display: grid; gap: 9px; min-width: 0; }

.roadmap-home-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.roadmap-home-facts > article {
  display: grid;
  grid-template-rows: minmax(22px, auto) auto auto;
  align-items: start;
  gap: 4px;
  min-width: 0;
  min-height: 89px;
  padding: 10px 9px;
  border: 1px solid rgba(106, 184, 232, 0.32);
  border-radius: 15px;
  background: linear-gradient(155deg, #123b5e, #0c263f);
}

.roadmap-home-facts > .is-birthday { border-color: rgba(255, 203, 8, 0.36); background: linear-gradient(155deg, #433917, #16283a); }
.roadmap-home-facts > .is-picks { border-color: rgba(91, 207, 188, 0.35); background: linear-gradient(155deg, #174a4d, #0b273b); }
.roadmap-home-facts strong { color: #fff; font: 800 1.8rem/0.85 "League Spartan", "Manrope", sans-serif; }
.roadmap-home-facts small { color: #9ed0ee; font-size: 0.61rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1.15; }
.roadmap-home-facts .is-birthday small { color: #ffdb63; }
.roadmap-home-facts .is-picks small { color: #8de1d2; }
.roadmap-home-facts article > span { color: #d3e0e9; font-size: 0.7rem; font-weight: 700; line-height: 1.22; }
.roadmap-home-goal { display: grid; gap: 7px; width: 100%; min-height: 99px; padding: 12px 15px 14px; border: 1px solid #517c99; border-left: 4px solid #ffcb08; border-radius: 15px; color: #fff; background: linear-gradient(108deg, #123b5d, #0b293f); text-align: left; cursor: pointer; }
.roadmap-home-goal-top, .roadmap-home-goal-main { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; }
.roadmap-home-goal-top small { color: #ffcb08; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; }
.roadmap-home-goal-top b { color: #ffcb08; font-size: 1rem; line-height: 0.8; }
.roadmap-home-goal-title { color: #fff; font: 800 1.08rem/1.1 "League Spartan", "Manrope", sans-serif; }
.roadmap-home-goal-main span { overflow: hidden; color: #c3d9e6; font-size: 0.7rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.roadmap-home-goal-main b { color: #fff; font-size: 0.7rem; white-space: nowrap; }
.roadmap-home-goal-track { position: relative; display: block; height: 8px; overflow: hidden; border: 1px solid #8baec2; border-radius: 99px; background: #254f69; }
.roadmap-home-goal-track i { display: block; height: 100%; border-radius: inherit; background: #ffcb08; }
.roadmap-home-goal-track.is-empty::before { position: absolute; top: 0; left: 0; width: 7px; height: 100%; border-radius: 50%; background: #ffcb08; content: ""; }
.roadmap-home-goal:focus-visible { outline: 3px solid #ffcb08; outline-offset: 2px; }
.roadmap-home-cta { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 57px; padding: 11px 16px; border: 0; border-radius: 14px; color: #071e31; background: #ffcb08; box-shadow: 0 7px 20px #ffcb082e; font: 900 1rem/1.2 "Manrope", sans-serif; cursor: pointer; }
.roadmap-home-goal + .roadmap-home-cta { min-height: 61px; margin-top: 4px; font-size: 1.03rem; }
.roadmap-home-cta span { font-size: 1.25rem; line-height: 0.8; }
.roadmap-home-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 680px) {
  .roadmap-home { min-height: 0; }
  .roadmap-cover { height: clamp(230px, 32svh, 290px); min-height: 230px; }
  .roadmap-cover-empty { bottom: 67px; }
  .roadmap-cover-empty strong { font-size: clamp(1.65rem, 7vw, 2.15rem); }
  .roadmap-cover-prompts { display: none; }
  .roadmap-photo-action.is-primary { bottom: 15px; min-height: 40px; }
  .roadmap-photo-action:not(.is-primary) { bottom: 28px; }
  .roadmap-home-body { gap: 8px; margin-top: -12px; padding-bottom: 10px; }
  .roadmap-story-strip { padding-bottom: 3px; }
}

@media (max-width: 390px) {
  .roadmap-home .roadmap-cover { height: clamp(225px, 31svh, 270px); }
}

.roadmap-story {
  flex-basis: 84px;
  gap: 3px;
}

.roadmap-story-progress {
  width: 66px;
  height: 4px;
  overflow: hidden;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.roadmap-story-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb600, #ffdd52);
}

.roadmap-story em {
  color: #86a4bb;
  font-size: 0.52rem;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.roadmap-story-add {
  align-content: start;
}

.portal-nav {
  min-height: calc(94px + env(safe-area-inset-bottom));
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.portal-nav-inner {
  transform: translateY(-5px);
}

.mode-installed .plan-card {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.roadmap-home {
  min-height: calc(100svh - 100px - env(safe-area-inset-bottom));
}


/* Personalized handoff between family setup and installation. */
body.mode-roadmap-building {
  overflow: hidden;
  color: #ffffff;
  background: #061525;
}

.mode-roadmap-building .site-header,
.mode-roadmap-building .landing,
.mode-roadmap-building #notificationCard,
.mode-roadmap-building #familySetupCard,
.mode-roadmap-building #planCard {
  display: none !important;
}

.roadmap-build-card {
  position: relative;
  width: min(100%, 620px);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  padding: calc(34px + 12svh + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(165deg, #092f52 0%, #061525 58%, #040d18 100%);
}

.roadmap-build-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.38) 0.65px, transparent 0.65px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.roadmap-build-visual {
  position: relative;
  width: 172px;
  height: 172px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
}

.roadmap-build-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
}

.roadmap-build-ring.is-outer {
  inset: 0;
  border-width: 4px;
  border-color: rgba(255, 203, 8, 0.14);
  border-top-color: #ffcb08;
  border-right-color: rgba(255, 203, 8, 0.64);
  box-shadow: 0 0 40px rgba(255, 203, 8, 0.13);
  animation: roadmap-ring-spin 1.6s linear infinite;
}

.roadmap-build-ring.is-inner {
  inset: 15px;
  border-width: 1px;
  border-color: rgba(111, 203, 255, 0.18);
  border-bottom-color: #4db9f5;
  animation: roadmap-ring-spin 2.4s linear infinite reverse;
}

.roadmap-build-visual img {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
  transition: opacity 220ms ease, transform 220ms ease;
}

.roadmap-build-check {
  position: absolute;
  z-index: 3;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #061525;
  background: #ffcb08;
  box-shadow: 0 0 0 10px rgba(255, 203, 8, 0.1), 0 16px 36px rgba(0, 0, 0, 0.26);
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 280ms ease, transform 380ms cubic-bezier(0.2, 1.35, 0.4, 1);
}

.roadmap-build-card.is-complete .roadmap-build-ring {
  animation-play-state: paused;
  border-color: rgba(255, 203, 8, 0.26);
}

.roadmap-build-card.is-complete .roadmap-build-visual img {
  opacity: 0;
  transform: scale(0.72);
}

.roadmap-build-card.is-complete .roadmap-build-check {
  opacity: 1;
  transform: scale(1);
}

.roadmap-build-card > .eyebrow {
  position: relative;
  margin: 0;
  color: #ffcb08;
}

.roadmap-build-card h2 {
  position: relative;
  min-height: 2.05em;
  margin: 0;
  color: #ffffff;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(2rem, 9vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.roadmap-build-card > p:not(.eyebrow) {
  position: relative;
  min-height: 3em;
  max-width: 32ch;
  margin: 0;
  color: #b8d4e7;
  font-size: 0.9rem;
  line-height: 1.5;
}

.roadmap-build-progress {
  position: relative;
  width: min(100%, 330px);
  height: 7px;
  overflow: hidden;
  margin-top: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.roadmap-build-progress i {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb500, #ffe269);
  box-shadow: 0 0 18px rgba(255, 203, 8, 0.32);
  transition: width 650ms cubic-bezier(0.22, 0.8, 0.34, 1);
}

@keyframes roadmap-ring-spin {
  to { transform: rotate(360deg); }
}

/* Installed notification permission and its success/share state. */
.mode-installed #notificationCard {
  gap: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 4%, rgba(255, 203, 8, 0.12), transparent 24%),
    radial-gradient(circle at 10% 0%, rgba(33, 145, 215, 0.26), transparent 34%),
    linear-gradient(180deg, #082947 0%, #06192c 48%, #050f1b 100%);
}

.mode-installed #notificationCard .notify-copy {
  gap: 7px;
}

.mode-installed #notificationCard .eyebrow,
.mode-installed #notificationCard .notify-step-label {
  color: #ffcb08;
}

.mode-installed #notificationCard h2 {
  color: #ffffff;
}

.mode-installed #notificationBody,
.mode-installed #notificationCard .notify-step-copy,
.mode-installed #notificationCard .microcopy {
  color: #b8cbda;
}

.notification-permission-hero {
  position: relative;
  min-height: 170px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(91, 191, 248, 0.24);
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 203, 8, 0.24), transparent 34%),
    linear-gradient(135deg, #0d74b7 0%, #08416f 48%, #072b4a 100%);
  box-shadow: 0 18px 46px rgba(0, 7, 17, 0.3);
}

.notification-permission-hero::after {
  content: "";
  position: absolute;
  inset: auto -24px -62px auto;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.notification-permission-hero img {
  position: relative;
  z-index: 2;
  width: 84px;
  max-height: 116px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.22));
}

.notification-permission-hero > div {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
}

.notification-permission-hero span {
  color: #ffdc55;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notification-permission-hero strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: clamp(1.55rem, 7vw, 2.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.notification-hero-ping {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffcb08;
  box-shadow: 0 0 0 7px rgba(255, 203, 8, 0.1);
  animation: notification-ping 2.4s ease-in-out infinite;
}

.notification-hero-ping.is-one {
  top: 24px;
  right: 26px;
}

.notification-hero-ping.is-two {
  right: 58px;
  bottom: 28px;
  width: 6px;
  height: 6px;
  animation-delay: 900ms;
}

@keyframes notification-ping {
  50% { transform: scale(1.28); opacity: 0.62; }
}

.mode-installed .notify-actions .example-push-list {
  margin-top: 18px;
}

.notification-success {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 8px;
  padding: 26px 18px;
  border: 1px solid rgba(255, 203, 8, 0.28);
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 203, 8, 0.16), transparent 44%),
    rgba(255, 255, 255, 0.045);
}

.notification-success-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071321;
  background: #ffcb08;
  box-shadow: 0 0 0 9px rgba(255, 203, 8, 0.1);
  font-size: 1.8rem;
  font-weight: 900;
}

.notification-success > div:not(.notification-success-mark) {
  display: grid;
  gap: 6px;
}

.notification-success span {
  color: #ffcb08;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notification-success strong {
  color: #ffffff;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.65rem;
  line-height: 1;
}

.notification-success p {
  max-width: 34ch;
  color: #b8cbda;
  font-size: 0.82rem;
  line-height: 1.45;
}

.notification-success .cta {
  width: 100%;
}

.notification-enter {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: #d3e6f4;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-build-ring,
  .notification-hero-ping {
    animation: none;
  }
}

/* Mobile control hardening and simplified roadmap destinations. */
.family-child-fields .field {
  overflow: hidden;
}

.family-child-fields .field input,
.portal-editor-fields .field input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
}

.family-child-fields input[type="date"],
.portal-editor-fields input[type="date"] {
  display: block;
  height: 48px;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: 0 11px;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  font: 400 16px/48px "Manrope", sans-serif;
  text-align: left;
  white-space: nowrap;
}

.family-child-fields input[type="date"]::-webkit-date-and-time-value,
.portal-editor-fields input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}

.roadmap-topbar.has-back {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  padding-right: 16px;
  padding-left: 16px;
}

.roadmap-back,
.roadmap-avatar-button {
  width: 40px;
  height: 40px;
  display: grid;
  align-self: center;
  justify-content: center;
  padding: 0;
  place-items: center;
  line-height: 0;
}

.roadmap-back svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transform: translateX(1px);
}

.roadmap-topbar .roadmap-avatar {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  line-height: 1;
}

.roadmap-topbar .roadmap-avatar > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
  transform: translateY(1px);
}

.roadmap-story-family .roadmap-story-ring {
  outline-color: rgba(255, 203, 8, 0.72);
}

.roadmap-story-family-add .roadmap-story-ring {
  color: #9ed9ff;
  outline-color: rgba(78, 181, 245, 0.52);
}

.roadmap-family-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.roadmap-family-actions .roadmap-primary-action {
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  font-size: 0.68rem;
  line-height: 1.15;
}

.roadmap-family-actions .roadmap-primary-action.is-secondary {
  color: #0a5e98;
  border: 1px solid #b8d6e8;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(13, 49, 82, 0.06);
}

.roadmap-go-tos {
  display: grid;
  gap: 10px;
}

.roadmap-go-tos-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}

.roadmap-go-tos-heading > div {
  display: grid;
  gap: 1px;
}

.roadmap-go-tos-heading span {
  color: #ffcb08;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.roadmap-go-tos-heading h2 {
  margin: 0;
  color: #ffffff;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: -0.035em;
}

.roadmap-go-tos-heading > small {
  padding: 6px 8px;
  border: 1px solid rgba(255, 203, 8, 0.28);
  border-radius: 999px;
  color: #ffdf62;
  background: rgba(255, 203, 8, 0.08);
  font-size: 0.54rem;
  font-weight: 900;
  text-transform: uppercase;
}

.roadmap-go-to-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.roadmap-go-to-card {
  min-width: 0;
  min-height: 134px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(104, 194, 252, 0.2);
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 100% 0%, rgba(72, 181, 245, 0.18), transparent 42%),
    #0a2948;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.roadmap-go-to-card.is-today {
  border-color: rgba(255, 203, 8, 0.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 203, 8, 0.24), transparent 45%),
    linear-gradient(145deg, #0d548b, #092b4b);
}

.roadmap-go-to-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #071321;
  background: #ffcb08;
}

.roadmap-go-to-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.roadmap-go-to-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  grid-column: 1 / -1;
}

.roadmap-go-to-copy small {
  overflow: hidden;
  color: #9ed9ff;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.roadmap-go-to-copy strong {
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.08rem;
  line-height: 0.98;
}

.roadmap-go-to-copy em {
  color: #ffda4b;
  font-size: 0.57rem;
  font-style: normal;
  font-weight: 800;
}

.roadmap-go-to-card > b {
  justify-self: end;
  color: #ffcb08;
  font-size: 1.25rem;
  line-height: 1;
}

.roadmap-idea-periods {
  position: sticky;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 -2px 16px;
  padding: 4px;
  border: 1px solid #d7e4ed;
  border-radius: 15px;
  background: rgba(239, 245, 249, 0.94);
  backdrop-filter: blur(12px);
}

.roadmap-idea-periods button {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  color: #5d7588;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 900;
}

.roadmap-idea-periods button.is-active {
  color: #ffffff;
  background: #082f56;
  box-shadow: 0 7px 16px rgba(8, 47, 86, 0.18);
}

.roadmap-idea-detail-list {
  display: grid;
  gap: 11px;
}

.roadmap-idea-detail {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border: 1px solid #d9e5ee;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 9px 22px rgba(13, 49, 82, 0.055);
  scroll-margin-top: 130px;
}

.roadmap-idea-detail.is-active {
  border-color: rgba(255, 190, 0, 0.78);
  box-shadow: 0 12px 28px rgba(255, 182, 0, 0.13);
}

.roadmap-idea-detail-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(145deg, #0d6eac, #08375f);
}

.roadmap-idea-detail.is-active .roadmap-idea-detail-icon {
  color: #082f56;
  background: #ffcb08;
}

.roadmap-idea-detail-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.roadmap-idea-detail > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.roadmap-idea-detail small {
  color: #1474b3;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.roadmap-idea-detail h2 {
  margin: 0;
  color: #082f56;
  font-family: "League Spartan", "Manrope", sans-serif;
  font-size: 1.28rem;
  line-height: 1;
}

.roadmap-idea-detail p {
  margin: 0;
  color: #60778a;
  font-size: 0.73rem;
  line-height: 1.4;
}

.roadmap-idea-detail strong {
  margin-top: 3px;
  color: #956900;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.roadmap-menu-list > .roadmap-menu-status {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d9e5ee;
  border-radius: 18px;
  color: #092c51;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(13, 49, 82, 0.055);
}

.roadmap-menu-status > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.roadmap-menu-status > b {
  color: #17824b;
  font-size: 0.68rem;
  text-transform: uppercase;
}

@media (max-width: 350px) {
  .roadmap-go-to-grid {
    grid-template-columns: 1fr;
  }
}

/* Let the family cover use spare PWA height without squeezing compact phones. */
@media (max-width: 680px) {
  .roadmap-home {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 94px - env(safe-area-inset-bottom));
    min-height: 590px;
  }

  .roadmap-home .roadmap-cover {
    flex: 0 0 clamp(300px, 42svh, 380px);
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .roadmap-home-body {
    flex: 1 1 auto;
    align-content: start;
    gap: 13px;
    margin-top: -19px;
    padding: 0 14px clamp(13px, 2.5svh, 22px);
  }

  .roadmap-story-strip {
    gap: clamp(7px, 2vw, 12px);
  }

  .roadmap-story,
  .roadmap-story-add.is-first {
    flex-basis: clamp(72px, 20vw, 82px);
  }

  .roadmap-story-ring,
  .roadmap-story-add.is-first .roadmap-story-ring {
    width: clamp(58px, 16vw, 66px);
    height: clamp(58px, 16vw, 66px);
  }

}

@media (max-width: 380px), (max-height: 700px) {
  .roadmap-home {
    height: auto;
  }

  .roadmap-home .roadmap-cover {
    flex: 0 0 auto;
    height: 250px;
  }
}

.roadmap-profile-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.portal-editor-close, .roadmap-profile-close, .sheet-dismiss { position: relative; font-size: 0; }
.portal-editor-close::before, .portal-editor-close::after,
.roadmap-profile-close::before, .roadmap-profile-close::after,
.sheet-dismiss::before, .sheet-dismiss::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
.portal-editor-close::before, .roadmap-profile-close::before, .sheet-dismiss::before { transform: translate(-50%, -50%) rotate(45deg); }
.portal-editor-close::after, .roadmap-profile-close::after, .sheet-dismiss::after { transform: translate(-50%, -50%) rotate(-45deg); }

.portal-editor-sheet {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top));
  overflow-y: auto;
}

.portal-editor-photo {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(119, 190, 237, 0.3);
  border-radius: 16px;
  color: #fff;
  background: #102b49;
  text-align: left;
  cursor: pointer;
}

.portal-editor-photo[hidden] { display: none; }
.portal-editor-photo-preview { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 2px solid #ffcb08; border-radius: 50%; color: #08233f; background: #ffcb08; font-size: 1.25rem; font-weight: 900; }
.portal-editor-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.portal-editor-photo > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.portal-editor-photo strong { font-size: 0.8rem; }
.portal-editor-photo small { color: #a9bed1; font-size: 0.65rem; }
.portal-editor-photo-icon { width: 22px; height: 22px; fill: #ffcb08; }

@media (max-width: 680px) {
  .roadmap-home .roadmap-cover.has-photo { flex-basis: clamp(210px, 29svh, 260px); }
  .roadmap-home .roadmap-cover:not(.has-photo) { flex-basis: clamp(230px, 31svh, 280px); }
  .roadmap-home .roadmap-cover-photo { object-position: center 46%; }
  .roadmap-cover .roadmap-topbar { padding-top: calc(22px + env(safe-area-inset-top)); }
  .roadmap-story-strip { padding-bottom: 6px; }
  .roadmap-story { gap: 5px; }
  .roadmap-story strong { font-size: 0.81rem; }
  .roadmap-story small { font-size: 0.68rem; }
  .roadmap-story-progress { margin-top: 3px; }
  .roadmap-story em { font-size: 0.56rem; }
  .roadmap-home .roadmap-cover:not(.has-photo) .roadmap-starter-orbit { display: none; }
  .roadmap-home .roadmap-cover:not(.has-photo) .roadmap-cover-mark { right: -9%; bottom: -12%; width: min(65%, 300px); opacity: 0.11; }
}

.account-page {
  min-height: 100svh;
  background: radial-gradient(circle at 15% 15%, rgba(16, 95, 151, 0.35), transparent 35%),
    radial-gradient(circle at 90% 75%, rgba(255, 203, 8, 0.1), transparent 32%), #07111f;
}

.account-shell {
  width: min(520px, calc(100% - 36px));
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: max(22px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
}

.account-header { display: flex; align-items: center; gap: 20px; }
.account-header a { font-size: 1.8rem; line-height: 1; color: var(--accent); }
.account-header img { width: min(245px, 68vw); }
.account-card {
  position: relative;
  margin: auto 0 24px;
  padding: clamp(25px, 7vw, 42px);
  border: 1px solid rgba(255, 203, 8, 0.3);
  border-radius: 28px;
  background: linear-gradient(155deg, #122640, #0a1728 75%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.account-card::before {
  position: absolute;
  top: 0;
  left: 26px;
  width: 64px;
  height: 3px;
  background: var(--accent);
  content: "";
}
.account-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.account-card h1 { margin: 0 0 12px; font-family: "League Spartan", sans-serif; font-size: clamp(2.5rem, 10vw, 3.6rem); line-height: 0.98; }
.account-card p { color: #c1cddd; line-height: 1.6; }
.account-card form { display: grid; gap: 11px; margin-top: 28px; }
.account-card label { color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.account-card input { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid #38516c; border-radius: 14px; outline: none; color: #fff; background: #0b1d32; font-size: 16px; }
.account-card input:focus { border-color: var(--accent); }
.account-button { width: 100%; min-height: 54px; display: grid; place-items: center; margin-top: 20px; padding: 12px 18px; border: 0; border-radius: 14px; color: #07111f; background: var(--accent); font-weight: 800; text-align: center; cursor: pointer; }
.account-button:disabled { opacity: 0.5; cursor: wait; }
.account-card small { display: block; margin-top: 22px; color: #9cacbf; line-height: 1.5; }
.account-link-button { display: block; margin: 24px auto 0; padding: 6px; border: 0; color: var(--accent); background: transparent; font-weight: 700; cursor: pointer; }
.account-summary { display: grid; gap: 3px; margin-top: 22px; padding: 16px; border: 1px solid #334960; border-radius: 14px; }
.account-summary span { color: #9cacbf; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.account-summary strong { overflow-wrap: anywhere; }
.account-status { margin: 20px 0 0; padding: 12px 14px; border: 1px solid #b45b5b; border-radius: 12px; color: #fff !important; background: #4c2631; }
.account-footnote { margin: 0 0 20px; color: #92a9c0; font-size: 0.73rem; line-height: 1.5; text-align: center; }

/* Keep the installed handoff visually continuous with the pre-install build. */
.loader {
  background: #061525;
}

.loader-shell {
  position: relative;
  width: min(100%, 620px);
  min-height: 100svh;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  padding: calc(34px + 12svh + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom));
  background: linear-gradient(165deg, #092f52 0%, #061525 58%, #040d18 100%);
}

.loader-shell::before {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.38) 0.65px, transparent 0.65px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  content: "";
}

.loader-shell > :not(.roadmap-build-visual) { position: relative; }
.loader-shell > .eyebrow { margin: 0; color: #ffcb08; }
.loader-text {
  min-height: 2.05em;
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2rem, 9vw, 3.15rem);
  font-weight: 800;
  line-height: 0.98;
}
.loader-subtext { min-height: 3em; margin: 0; color: #b8d4e7; font-size: 0.9rem; line-height: 1.5; text-align: center; }
.loader .roadmap-build-progress { width: min(100%, 330px); }
.loader.is-complete .roadmap-build-ring { animation-play-state: paused; border-color: rgba(255, 203, 8, 0.26); }
.loader.is-complete .roadmap-build-visual img { opacity: 0; transform: scale(0.72); }
.loader.is-complete .roadmap-build-check { opacity: 1; transform: scale(1); }

.notification-skip {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 8px 12px;
  border: 0;
  color: #c5dbec;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(197, 219, 236, 0.45);
  text-underline-offset: 4px;
}

.family-kid-count-options { padding: 3px; margin: -3px; overflow: visible; }
.family-kid-count-options button { min-width: 0; -webkit-appearance: none; appearance: none; }
.family-kid-count-options button:focus-visible { outline: 2px solid #0c75b4; outline-offset: 1px; }
.family-child-fields .field { overflow: visible; }
.family-child-fields input[type="date"],
.portal-editor-fields input[type="date"] {
  overflow: visible;
  -webkit-appearance: auto;
  appearance: auto;
  color-scheme: light;
  font: 400 16px/1.2 "Manrope", sans-serif;
}

.portal-nav-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portal-nav-label { font-size: clamp(0.47rem, 2.2vw, 0.57rem); }
.roadmap-home-facts small { white-space: normal; line-height: 1.15; }

.roadmap-save-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #bfd1df;
  border-radius: 12px;
  color: #537390;
  background: #f4f8fb;
  cursor: pointer;
}
.roadmap-save-button svg { width: 19px; height: 19px; fill: currentColor; }
.roadmap-save-button.is-saved { border-color: #e7ab00; color: #092e53; background: #ffcb08; }
.roadmap-idea-detail .roadmap-save-button { grid-column: 2; justify-self: start; width: auto; gap: 8px; padding-inline: 12px; }
.roadmap-idea-detail .roadmap-save-button::after { content: "Save to Favorites"; font-size: 0.7rem; font-weight: 800; }
.roadmap-idea-detail .roadmap-save-button.is-saved::after { content: "Saved to Favorites"; }
.roadmap-monthly-pending { margin-bottom: 24px; }

html.portal-home-locked {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.mode-installed.portal-home-locked {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body.mode-installed.portal-home-locked .roadmap-home { touch-action: pan-x; }
body.mode-installed.portal-home-locked .plan-card {
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}
body.mode-installed.portal-home-locked .plan-card .notify-copy,
body.mode-installed.portal-home-locked .plan-section-list {
  height: 100%;
  min-height: 0;
}
body.mode-installed.portal-home-locked .roadmap-home {
  height: calc(100dvh - 94px - env(safe-area-inset-bottom));
  min-height: 0;
}

@media (max-width: 720px) {
  body.mode-browser .roadmap-home {
    display: block;
    height: auto;
    min-height: 0;
  }

  body.mode-browser .roadmap-home .roadmap-cover {
    flex: none;
    height: clamp(230px, 33dvh, 275px);
    min-height: 0;
  }

  body.mode-browser .roadmap-home-body {
    display: grid;
    margin-top: -18px;
    padding-bottom: 24px;
  }

  body.mode-browser .plan-card {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }
}

.sheet-panel > .sheet-dismiss {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
}

.sheet-panel .sheet-handle {
  margin-bottom: 22px;
}

.sheet-panel h2 {
  padding-right: 0;
  font-size: clamp(1.65rem, 7vw, 2rem);
  line-height: 1.05;
  text-wrap: balance;
}

body .roadmap-settings-group > .roadmap-sign-out {
  justify-content: center;
  border-color: #c8d9e5;
  color: #31516b;
  background: #f3f7fa;
}

.mode-installed .plan-card:has(.edition-page) { padding-bottom: 0; }
.edition-page { padding: 0 0 calc(100px + env(safe-area-inset-bottom)); background: #071f38; }
.edition-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 22px 22px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, #17649b 0, transparent 44%),
    linear-gradient(150deg, #063058, #071c35 83%);
}
.edition-hero::before { position: absolute; top: -73px; right: -92px; width: 240px; height: 240px; border: 1px solid #ffcb0870; border-radius: 50%; box-shadow: 0 0 0 25px #ffcb0812, 0 0 0 58px #ffcb0808; pointer-events: none; content: ""; }
.edition-hero > * { position: relative; }
.edition-eyebrow, .edition-section-top span {
  color: #ffcb08;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.edition-hero h1 { max-width: 20ch; margin: 10px 0 0; font: 800 clamp(2.2rem, 8vw, 3rem)/1 "League Spartan", "Manrope", sans-serif; }
.edition-hero-line { max-width: 38ch; margin: 8px 0 0; color: #dbe9f2; font-size: 0.94rem; line-height: 1.38; }
.edition-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.edition-hero-meta span { padding: 7px 10px; border: 1px solid #5e92b5; border-radius: 999px; color: #e9f2f8; font-size: 0.65rem; font-weight: 800; }
.edition-print-link { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; margin-top: 18px; padding: 10px 13px; border: 1px solid #e7b800; border-radius: 12px; color: #072e52; background: #ffcb08; font: 900 0.91rem/1.2 "Manrope", sans-serif; cursor: pointer; }
.edition-print-link span { color: #072e52; font-size: 1.25rem; line-height: 1; }
.edition-jump { position: sticky; top: 74px; z-index: 9; display: flex; gap: 8px; overflow-x: auto; padding: 9px 18px; border-bottom: 1px solid #c4ae7c; background: #e8ddc5; box-shadow: 0 7px 16px #001a2d33; scrollbar-width: none; }
.edition-jump a, .edition-jump button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #b2b2a9; border-radius: 999px; color: #20435b; background: #fffdf7; font: 900 0.78rem/1.2 "Manrope", sans-serif; text-decoration: none; cursor: pointer; }
.edition-jump .is-active { color: #fff; background: #072e52; }
.edition-jump a:focus-visible, .edition-jump button:focus-visible, .edition-item summary:focus-visible, .edition-star-button:focus-visible { outline: 3px solid #1b91d1; outline-offset: 2px; }
.favorites-filter { margin: 0 -18px 16px; }
.favorite-result[hidden] { display: none; }
.roadmap-favorites-list { gap: 12px; }
.roadmap-favorites-list .edition-item-count { display: none; }
.edition-calendar { padding: 28px 18px 23px; color: #fff; background: radial-gradient(circle at 95% 0%, #195577 0, transparent 36%), #0a304d; }
.edition-calendar .edition-section-top { display: block; min-height: 0; }
.edition-section-top h2 { margin: 5px 0 3px; color: inherit; font: 800 clamp(1.9rem, 7vw, 2.4rem)/1 "League Spartan", "Manrope", sans-serif; }
.edition-section-top p { margin: 0 0 16px; color: inherit; opacity: 0.84; font-size: 0.94rem; line-height: 1.45; }
.edition-calendar-panel { padding: 12px; border: 1px solid #618db1; border-radius: 18px; background: #f8fbfc; box-shadow: 0 12px 28px #00152340; }
.edition-calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 3px 11px; color: #082e4a; font-size: 1rem; }
.edition-calendar-heading span { color: #607789; font-size: 0.78rem; font-weight: 700; }
.edition-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.edition-calendar-weekday, .edition-calendar-day, .edition-calendar-blank { display: grid; place-items: center; min-width: 0; min-height: 39px; }
.edition-calendar-weekday { color: #557187; font-size: 0.72rem; font-weight: 900; }
.edition-calendar-day { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; border: 0; border-radius: 10px; color: #123d5d; background: #eef3f7; font: 800 0.92rem/1 "Manrope", sans-serif; font-variant-numeric: tabular-nums; text-align: center; -webkit-appearance: none; appearance: none; }
.edition-calendar-day.is-weekend { background: #dcebf4; }
.edition-calendar-day.has-event { border: 1px solid #a57700; color: #092d4e; background: #ffeb9b; cursor: pointer; }
.edition-calendar-day.has-event.is-selected { color: #fff; background: #082e4a; }
.edition-calendar-day i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.edition-calendar-event { margin-top: 11px; padding: 16px; border: 1px solid #4c7998; border-radius: 15px; background: #123d5d; }
.edition-calendar-event > span { color: #ffcb08; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.edition-calendar-event h3 { margin: 5px 0 6px; color: #fff; font-size: 1.1rem; }
.edition-calendar-event p { margin: 0 0 8px; color: #e1eef4; font-size: 0.94rem; line-height: 1.5; }
.edition-calendar-event .edition-source { color: #ffda49; font-size: 0.9rem; }
.edition-calendar > p { margin: 12px 0 0; color: #c9dce9; font-size: 0.78rem; line-height: 1.45; text-align: center; }
.edition-save-cue { display: flex; align-items: center; gap: 9px; padding: 11px 18px; color: #17364d; background: #e8f3fa; font-size: 0.7rem; font-weight: 800; }
.edition-save-cue span { color: #ce8500; font-size: 1.2rem; line-height: 1; }

.edition-section {
  --edition-accent: #ffcb08;
  position: relative;
  padding: 31px 18px 30px;
  overflow: hidden;
  color: #fff;
  background: #092743;
  scroll-margin-top: 132px;
}
.edition-section::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: 0.16; background: radial-gradient(circle at 95% 12%, var(--edition-accent) 0 1px, transparent 2px) 0 0 / 25px 25px; }
.edition-section > * { position: relative; }
.edition-section.is-benjamin { --edition-accent: #1689c1; color: #082e4b; background: #e1f0f6; }
.edition-section.is-family { --edition-accent: #ffcb08; color: #fff; background: #0b4d60; }
.edition-section.is-lesson { --edition-accent: #d46b1e; color: #092d4e; background: #ffebc7; }
.edition-section.is-seasonal { --edition-accent: #ff9a61; color: #fff; background: #162f59; }
.edition-section.is-alert { --edition-accent: #e36526; color: #092d4e; background: #ffe2c7; }
.edition-section.is-resource { --edition-accent: #75dbd2; color: #fff; background: #0c344f; }
.edition-section-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 94px; margin-bottom: 15px; }
.edition-section-top p { margin-bottom: 0; }
.edition-section-top span { color: var(--edition-accent); }
.edition-section-mark { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--edition-accent); border-radius: 21px; color: var(--edition-accent); transform: rotate(9deg); }
.edition-section-mark svg { width: 34px; height: 34px; fill: currentColor; transform: rotate(-9deg); }
.edition-section-mark b { font: 800 2.35rem/1 "League Spartan", "Manrope", sans-serif; transform: rotate(-9deg); }
.edition-items { display: grid; gap: 11px; }
.edition-item { position: relative; overflow: hidden; border: 1px solid #c4d9e5; border-left: 5px solid var(--edition-accent); border-radius: 16px; color: #0a3155; background: #fff; box-shadow: 0 9px 18px #00162b17; }
.edition-item:first-child { background: #fff0bb; }
.is-benjamin .edition-item:first-child { background: #d6f0f6; }
.is-family .edition-item:first-child { background: #dbf3ed; }
.is-lesson .edition-item:first-child { background: #fff9ec; }
.is-seasonal .edition-item:first-child { background: #ffe7d8; }
.is-alert .edition-item:first-child { background: #fff5df; }
.is-resource .edition-item:first-child { background: #e0f5f2; }
.edition-item:has(details[open]) { border-color: #8bb8d6; border-left-color: var(--edition-accent); }
.edition-item summary { display: grid; gap: 9px; min-height: 129px; padding: 16px 66px 16px 15px; cursor: pointer; list-style: none; }
.edition-item summary::-webkit-details-marker { display: none; }
.edition-item-count { color: #0c699a; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.13em; }
.edition-item-count span { color: #7c95a6; }
.edition-item-copy { display: grid; gap: 4px; min-width: 0; }
.edition-item-copy small { color: #0b77ad; font-size: 0.77rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.edition-item-copy strong { color: #092d4e; font-size: 1.19rem; line-height: 1.18; }
.edition-item-copy > span { color: #3f586d; font-size: 0.96rem; line-height: 1.5; }
.edition-item-copy > .edition-open-label { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 7px; padding: 8px 9px 8px 12px; border: 1px solid #a8cde4; border-radius: 10px; color: #073557; background: #e8f4fa; font-size: 0.83rem; font-weight: 900; line-height: 1; }
.edition-open-label b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: #fff; background: #0c527d; font-size: 1.1rem; font-weight: 700; line-height: 1; }
.edition-close-copy { display: none; }
.edition-item details[open] .edition-open-label { border-color: #ddaf17; background: #ffefb2; }
.edition-item details[open] .edition-open-copy { display: none; }
.edition-item details[open] .edition-close-copy { display: inline; }
.edition-item details[open] .edition-open-label b { background: #715608; }
.edition-item details[open] .edition-open-label b { font-size: 0; }
.edition-item details[open] .edition-open-label b::after { content: "−"; font-size: 1.2rem; }
.edition-star-button { position: absolute; z-index: 1; top: 11px; right: 11px; width: 45px; height: 45px; border: 2px solid #c1931e; border-radius: 14px; color: #ffcb08; background: #0a3155; }
.edition-star-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.8; }
.edition-star-button.is-saved { border-color: #0a3155; color: #0a3155; background: #ffcb08; }
.edition-star-button.is-saved svg { fill: currentColor; }
.edition-item-detail { padding: 0 15px 16px; border-top: 1px solid #dce8ee; color: #294d68; background: #fff; font-size: 0.96rem; line-height: 1.58; }
.edition-item-detail p { margin: 13px 0; }
.edition-detail-label { margin-top: 16px; color: #0a6da6; font-size: 0.63rem; font-weight: 900; letter-spacing: 0.12em; }
.edition-item-detail ol { margin: 9px 0; padding-left: 20px; }
.edition-item-detail li + li { margin-top: 7px; }
.edition-item-detail .edition-note { padding: 10px 11px; border-left: 3px solid var(--edition-accent); border-radius: 4px; color: #365b74; background: #eff6fa; font-size: 0.88rem; }
.edition-item-detail .edition-source { display: inline-flex; margin-top: 3px; }
.edition-source { color: #09639d; font-weight: 900; text-decoration: none; }
.edition-memory-tip { margin-top: 14px; padding: 13px; border: 1px solid #b9d8e7; border-radius: 12px; background: #edf6fa; }
.edition-memory-tip strong { color: #0b6e9c; font-size: 0.7rem; letter-spacing: 0.1em; }
.edition-memory-tip p { margin: 4px 0 8px; color: #294d68; font-size: 0.87rem; }
.edition-memory-tip button { padding: 0; border: 0; color: #075d8c; background: none; font: 800 0.85rem/1.3 "Manrope", sans-serif; cursor: pointer; }
.edition-favorite-actions { display: flex; align-items: center; gap: 14px; padding: 0 15px 14px; }
.edition-favorite-actions button { padding: 4px 0; border: 0; color: #08639a; background: none; font: 800 0.85rem/1.25 "Manrope", sans-serif; cursor: pointer; }
.edition-favorite-actions [data-share-idea] { color: #385f7b; font-weight: 700; }
.favorite-complete { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #214864; font: 800 0.82rem/1 "Manrope", sans-serif; white-space: nowrap; cursor: pointer; }
.favorite-complete input { width: 20px; height: 20px; margin: 0; accent-color: #0a739c; }
.favorite-memory-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-top: 1px solid #b3d3db; color: #103f56; background: #e2f3ee; font-size: 0.82rem; font-weight: 700; }
.favorite-memory-invite[hidden] { display: none; }
.favorite-memory-invite button { flex: 0 0 auto; padding: 0; border: 0; color: #086d73; background: none; font: 900 0.82rem/1.2 "Manrope", sans-serif; cursor: pointer; }
.edition-item.is-complete { border-left-color: #168c7b; }
.edition-item.is-favorite summary { min-height: 0; padding-bottom: 11px; }
.edition-footer-note { margin: 0; padding: 15px 18px 0; color: #a9c2d2; background: #071f38; font-size: 0.7rem; line-height: 1.5; }
.edition-finish { padding: 30px 18px 25px; color: #fff; background: linear-gradient(145deg, #0a4062, #061d35); }
.edition-finish > span { color: #ffcb08; font-size: 0.73rem; font-weight: 900; letter-spacing: 0.13em; }
.edition-finish h2 { margin: 8px 0; font: 800 2rem/1 "League Spartan", sans-serif; }
.edition-finish p { color: #d7e9f2; font-size: 0.96rem; line-height: 1.5; }
.edition-finish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.edition-finish-actions button { min-height: 53px; padding: 9px; border: 1px solid #ffcb08; border-radius: 12px; color: #082e4a; background: #ffcb08; font: 800 0.9rem/1.2 "Manrope", sans-serif; }
.edition-finish-actions button:disabled { border-color: #4b7089; color: #b7cbd8; background: #123d5d; }
.edition-finish-actions small { display: block; font-size: 0.7rem; font-weight: 600; }
.roadmap-member-card { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 11px; margin-bottom: 14px; padding: 13px; border-radius: 18px; }
.roadmap-member-card .roadmap-avatar.is-large { width: 54px; height: 54px; }
.roadmap-member-card h1 { margin: 2px 0 0; font-size: 1.38rem; line-height: 1; }
.roadmap-member-card p { margin-top: 3px; color: #c3d7e4; font-size: 0.76rem; line-height: 1.2; }
.roadmap-avatar-edit { grid-column: auto; align-self: center; padding: 8px 10px; border: 1px solid #80acd0; border-radius: 8px; color: #ffcb08; background: #103d61; font: 800 0.75rem/1.2 "Manrope", sans-serif; white-space: nowrap; }
.memory-idea-context { display: grid; gap: 4px; margin: 0 0 15px; padding: 14px; border: 1px solid #a9cee0; border-left: 4px solid #ffcb08; border-radius: 12px; color: #123c58; background: #eaf5fa; }
.memory-idea-context span { color: #0a6c9f; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.1em; }
.memory-idea-context strong { font-size: 1rem; }
.memory-idea-context p { margin: 0; font-size: 0.84rem; line-height: 1.35; }
.roadmap-backup-action { display: block; width: 100%; margin-top: 16px; padding: 13px; border: 1px solid #b48800; border-radius: 12px; color: #073457; background: #ffdb5e; font: 800 0.88rem/1.3 "Manrope", sans-serif; }
.roadmap-preferences-form { display: grid; gap: 10px; margin-top: 22px; padding: 18px; border: 1px solid #bfd5e4; border-radius: 18px; background: #fff; scroll-margin-top: 86px; }
.roadmap-preferences-form > span { color: #0d6da0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; }
.roadmap-preferences-form h2 { margin: 0 0 5px; color: #082e4a; font: 800 1.55rem/1.05 "League Spartan", sans-serif; }
.roadmap-preferences-form label { color: #214761; font-size: 0.82rem; font-weight: 900; }
.roadmap-preferences-form select, .roadmap-preferences-form textarea { box-sizing: border-box; width: 100%; padding: 11px; border: 1px solid #b6cddd; border-radius: 10px; color: #0a3155; background: #f7fafc; font: 500 1rem/1.4 "Manrope", sans-serif; }
.roadmap-preferences-form p { margin: 0; color: #607789; font-size: 0.78rem; line-height: 1.45; }
.roadmap-memory-hero { position: relative; overflow: hidden; margin: -18px -15px 18px; padding: 29px 20px 26px; border: 0; border-radius: 0; color: #fff; background: radial-gradient(circle at 95% 5%, #24658b 0, transparent 42%), linear-gradient(155deg, #123d5f, #082840); }
.roadmap-memory-hero::after { position: absolute; right: -35px; bottom: -84px; width: 190px; height: 190px; border: 1px solid #ffcb084d; border-radius: 50%; box-shadow: 0 0 0 20px #ffcb080d, 0 0 0 43px #ffcb0808; pointer-events: none; content: ""; }
.roadmap-memory-hero > * { position: relative; z-index: 1; }
.roadmap-memory-hero > span, .roadmap-memory-form-heading > span { color: #ffcb08; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; }
.roadmap-memory-hero h1 { margin: 10px 0 8px; font: 900 clamp(2.35rem, 9vw, 3.2rem)/0.98 "League Spartan", "Manrope", sans-serif; }
.roadmap-memory-hero p { max-width: 35ch; margin: 0; color: #d6e7f1; font-size: 0.95rem; line-height: 1.5; }
.roadmap-memory-hero .roadmap-memory-examples { display: grid; gap: 7px; max-width: 37ch; margin: 17px 0 0; padding: 13px 0 0; border-top: 1px solid #5e91ad; list-style: none; color: #e4eef4; font-size: 0.85rem; line-height: 1.35; }
.roadmap-memory-examples li { position: relative; padding-left: 16px; }
.roadmap-memory-examples li::before { position: absolute; top: 0.42em; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: #ffcb08; content: ""; }
.roadmap-memory-form { display: grid; gap: 12px; padding: 18px; border: 1px solid #bfd5e4; border-radius: 18px; background: #fff; }
.roadmap-memory-form-heading { display: grid; gap: 4px; margin-bottom: 2px; }
.roadmap-memory-form-heading > span { color: #1273a9; }
.roadmap-memory-form-heading strong { color: #082e4a; font: 800 1.5rem/1 "League Spartan", "Manrope", sans-serif; }
.roadmap-memory-form label { display: grid; gap: 5px; color: #0a3155; font-size: 0.87rem; font-weight: 900; }
.roadmap-memory-form label small { color: #617789; font-size: 0.75rem; font-weight: 600; }
.roadmap-memory-form .roadmap-memory-picker { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px; border: 1px solid #9bbbd1; border-radius: 12px; color: #fff; background: #0b3c62; cursor: pointer; }
.roadmap-memory-picker svg { flex: 0 0 auto; width: 25px; height: 25px; fill: currentColor; }
.roadmap-memory-picker span { display: grid; gap: 2px; }
.roadmap-memory-form .roadmap-memory-picker small { color: #c5ddec; }
.roadmap-memory-form #memoryPhoto { position: absolute; width: 1px; height: 1px; opacity: 0; }
.roadmap-memory-picker:has(+ #memoryPhoto:focus-visible) { outline: 3px solid #ffcb08; outline-offset: 3px; }
.roadmap-memory-form input, .roadmap-memory-form select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 9px 11px; border: 1px solid #b6cddd; border-radius: 10px; color: #0a3155; background: #f7fafc; font: 500 1rem/1.3 "Manrope", sans-serif; }
.roadmap-memory-form input[type=file] { height: auto; }
.roadmap-memory-preview { display: block; width: 100%; max-height: 270px; object-fit: cover; border-radius: 11px; }
.roadmap-memory-preview[hidden] { display: none; }
.roadmap-memory-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.roadmap-memory-fields label { min-width: 0; }
.roadmap-memory-fields input, .roadmap-memory-fields select { min-width: 0; max-width: 100%; }
.roadmap-memory-fields input[type="date"] { display: block; width: 100%; height: 48px; min-width: 0; max-width: 100%; padding: 0 11px; overflow: hidden; -webkit-appearance: none; appearance: none; font: 400 16px/48px "Manrope", sans-serif; text-align: left; white-space: nowrap; }
.roadmap-memory-fields input[type="date"]::-webkit-date-and-time-value { min-width: 0; margin: 0; text-align: left; }
@media (min-width: 560px) { .roadmap-memory-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roadmap-memory-form p { margin: 0; color: #607789; font-size: 0.77rem; line-height: 1.4; }
.roadmap-memory-list { display: grid; gap: 14px; margin-top: 18px; }
.roadmap-memory-card { overflow: hidden; border: 1px solid #bfd5e4; border-radius: 16px; background: #fff; }
.roadmap-memory-card img { display: block; width: 100%; max-height: 440px; object-fit: cover; }
.roadmap-memory-card > div { display: grid; gap: 6px; padding: 14px; }
.roadmap-memory-card small { color: #2773a0; font-size: 0.77rem; font-weight: 900; }
.roadmap-memory-card strong { color: #0a3155; font-size: 1rem; }
.roadmap-memory-card button { justify-self: start; padding: 6px 0; border: 0; color: #ad3d3d; background: transparent; font: 800 0.8rem/1 "Manrope", sans-serif; }
.roadmap-offers { display: grid; gap: 9px; margin-top: 28px; }
.roadmap-offers-heading { margin-bottom: 3px; }
.roadmap-offers-heading span { color: #0a70a4; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
.roadmap-offers-heading h2 { margin: 5px 0 0; color: #082e4a; font: 800 1.7rem/1 "League Spartan", "Manrope", sans-serif; }
.roadmap-offers > a, .roadmap-world-records { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #b7cfe0; border-radius: 17px; color: #fff; background: linear-gradient(125deg, #0a3e64, #0b2945); text-decoration: none; }
.roadmap-offers > a:focus-visible { outline: 3px solid #ffcb08; outline-offset: 2px; }
.roadmap-offer-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #a78521; border-radius: 13px; color: #ffcb08; background: #144e73; }
.roadmap-offer-icon svg { width: 23px; height: 23px; fill: currentColor; }
.roadmap-offers > a > span:nth-child(2), .roadmap-world-records > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.roadmap-offers strong, .roadmap-world-records strong { font-size: 0.93rem; line-height: 1.2; }
.roadmap-offers small, .roadmap-world-records small { color: #c5dbe8; font-size: 0.72rem; line-height: 1.35; }
.roadmap-offers > a > b { color: #ffcb08; font-size: 1.4rem; }
.roadmap-world-records { margin-top: 10px; border-color: #b8cbd9; color: #244a63; background: #e7edf2; }
.roadmap-world-records .roadmap-offer-icon { border-color: #b8cbd9; color: #557a90; background: #d7e4ec; }
.roadmap-world-records small { color: #678094; }
.roadmap-world-records > b { max-width: 70px; padding: 5px 6px; border-radius: 6px; color: #4b6576; background: #d4e1e9; font-size: 0.54rem; line-height: 1.15; letter-spacing: 0.03em; text-align: center; }
.roadmap-settings-page { display: grid; align-content: start; gap: 15px; }
.admin-preview-banner { position: sticky; top: 0; z-index: 1100; padding: 12px 16px; color: #09213b; background: #ffcb08; font: 800 12px/1.3 "Manrope", sans-serif; text-align: center; }
.admin-draft-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #244765; }
.admin-draft-row a { color: #ffcb08; font-weight: 800; }
.roadmap-settings-page .roadmap-page-intro { margin-bottom: 2px; }
.roadmap-settings-group { overflow: hidden; border: 1px solid #c3d8e5; border-radius: 17px; background: #fff; }
.roadmap-settings-group > span { display: block; padding: 13px 15px; border-bottom: 1px solid #d9e7ee; color: #086a9b; background: #ecf5fa; font-size: 0.69rem; font-weight: 900; letter-spacing: 0.11em; }
.roadmap-settings-group > div { padding: 13px 15px; }
.roadmap-settings-group > div + div { border-top: 1px solid #e1e9ee; }
.roadmap-settings-group strong { color: #0b3151; font-size: 0.85rem; }
.roadmap-settings-group p { margin: 4px 0 0; overflow-wrap: anywhere; color: #49677e; font-size: 0.83rem; line-height: 1.4; }
.roadmap-settings-group .roadmap-settings-help { margin: 0; padding: 0 15px 15px; }
.roadmap-settings-group > a, .roadmap-settings-group > button { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 30px); min-height: 44px; margin: 0 15px 15px; padding: 10px 12px; border: 1px solid #b99715; border-radius: 10px; color: #0b3151; background: #ffcb08; font: 800 0.85rem/1.25 "Manrope", sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
@media (max-width: 370px) {
  .edition-hero h1 { font-size: 2.05rem; }
  .edition-calendar { padding-inline: 13px; }
  .edition-calendar-grid { gap: 2px; }
  .edition-section-mark { width: 52px; height: 52px; }
}

.roadmap-favorites-hero { position: relative; overflow: hidden; margin: -18px -15px 0; padding: 29px 20px 26px; color: #fff; background: radial-gradient(circle at 98% 0%, #1a6892, transparent 42%), linear-gradient(145deg, #0b4569, #092641 80%); }
.roadmap-favorites-hero::after { position: absolute; top: -65px; right: -75px; width: 190px; height: 190px; border: 1px solid #ffcb0870; border-radius: 50%; box-shadow: 0 0 0 23px #ffcb0810; pointer-events: none; content: ""; }
.roadmap-favorites-hero > * { position: relative; z-index: 1; }
.roadmap-favorites-hero > span { color: #ffcb08; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; }
.roadmap-favorites-hero h1 { margin: 10px 0 7px; font: 900 clamp(2.4rem, 10vw, 3.5rem)/0.96 "League Spartan", "Manrope", sans-serif; }
.roadmap-favorites-hero p { max-width: 36ch; margin: 0; color: #d6e7f1; font-size: 0.93rem; line-height: 1.45; }
.roadmap-favorites-hero + .favorites-filter { margin-top: 0; }
.roadmap-favorites-page { background: #f2efe7; }
.roadmap-favorites-page .favorites-filter { border-bottom-color: #c4ae7c; background: #e8ddc5; box-shadow: 0 7px 16px #2c302d1a; }
.roadmap-favorites-page .favorites-filter button { border-color: #b2b2a9; color: #20435b; background: #fffdf7; }
.roadmap-favorites-page .favorites-filter .is-active { border-color: #0d3955; color: #fff; background: #0d3955; }
.roadmap-favorites-list .edition-item { border-color: #d5c8ac; background: linear-gradient(155deg, #fffdf8, #f9f5e9); box-shadow: 0 7px 17px #394b5117; }
.roadmap-favorites-list .edition-item-detail { border-top-color: #e8dcc6; background: #fffcf5; }
.roadmap-favorites-list .edition-item-copy small { color: #9b6b14; }
.roadmap-favorites-list .edition-item-copy > .edition-open-label { border-color: #c4d1ce; color: #fff; background: #17475d; }
.roadmap-favorites-list .edition-item-copy > .edition-open-label b { color: #ffcb08; }
.roadmap-child-insights { display: grid; gap: 10px; margin: 18px 0; }
.roadmap-child-insights .roadmap-subsection-heading { margin-bottom: 2px; }
.roadmap-child-insights article { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid #bed4e3; border-radius: 15px; background: #fff; }
.roadmap-child-insights article > div { min-width: 0; }
.roadmap-child-insights strong { color: #0b3557; font-size: 1rem; }
.roadmap-child-insights p { margin: 4px 0 0; color: #47657a; font-size: 0.86rem; line-height: 1.4; }
.roadmap-child-insights small { display: block; margin-top: 6px; color: #697d8b; font-size: 0.73rem; line-height: 1.35; }
.roadmap-child-insights article button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #8bb9d6; border-radius: 9px; color: #0d5c8d; background: #edf7fb; font: 900 0.75rem/1.2 "Manrope", sans-serif; cursor: pointer; }

.printable-calendar-page { width: min(100%, 1100px); }
.print-calendar-intro { padding: 25px 20px 23px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 100% 0%, #226a8f, transparent 50%), #0a3150; }
.print-calendar-intro > span, .print-calendar-planner-heading > span { color: #ffcb08; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; }
.print-calendar-intro h1 { max-width: 16ch; margin: 9px 0; font: 900 clamp(2.25rem, 9vw, 3.3rem)/0.96 "League Spartan", "Manrope", sans-serif; }
.print-calendar-intro p { max-width: 46ch; margin: 0; color: #d5e5ef; font-size: 0.95rem; line-height: 1.5; }
.print-calendar-actions { display: grid; gap: 8px; margin: 15px 0; }
.print-calendar-actions .roadmap-primary-action { width: 100%; min-height: 52px; }
.print-calendar-actions p { margin: 0; color: #557086; font-size: 0.8rem; line-height: 1.45; }
.print-calendar-planner { display: grid; gap: 15px; margin-bottom: 21px; padding: 18px; border: 1px solid #c4d8e6; border-radius: 18px; background: #fff; }
.print-calendar-planner-heading > span { color: #1170a4; }
.print-calendar-planner-heading h2 { margin: 5px 0 6px; color: #0a3155; font: 900 1.75rem/1 "League Spartan", "Manrope", sans-serif; }
.print-calendar-planner-heading p, .print-calendar-no-ideas { margin: 0; color: #527087; font-size: 0.86rem; line-height: 1.5; }
.print-calendar-scheduled { display: grid; gap: 8px; }
.print-calendar-scheduled h3 { margin: 0 0 2px; color: #0b3a59; font-size: 0.83rem; }
.print-calendar-scheduled > div { display: grid; grid-template-columns: minmax(0, 1fr) 82px 57px; align-items: center; gap: 7px; min-width: 0; padding: 8px; border-bottom: 1px solid #d4e2eb; background: #fff; }
.print-calendar-scheduled > div > span { overflow: hidden; color: #113955; font-size: 0.8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.print-calendar-scheduled select, .print-calendar-add select, .print-calendar-add input { box-sizing: border-box; min-width: 0; min-height: 38px; padding: 7px; border: 1px solid #a9c3d5; border-radius: 8px; color: #103b59; background: #fff; font: 700 0.85rem/1.2 "Manrope", sans-serif; }
.print-calendar-scheduled > div > button, .print-calendar-custom-events button { display: grid; place-items: center; min-height: 36px; padding: 0 5px; border: 0; border-radius: 8px; color: #9b3333; background: #fbe9e6; font: 800 0.63rem/1 "Manrope", sans-serif; cursor: pointer; }
.print-calendar-add { display: grid; gap: 7px; }
.print-calendar-add > label { color: #0a3155; font-size: 0.84rem; font-weight: 900; }
.print-calendar-add > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.print-calendar-add:has(input) > div { grid-template-columns: minmax(0, 1fr) 82px auto; }
.print-calendar-add button { min-width: 54px; padding: 7px 11px; border: 0; border-radius: 8px; color: #fff; background: #0a527b; font: 900 0.83rem/1.2 "Manrope", sans-serif; cursor: pointer; }
.print-calendar-add button:disabled { opacity: 0.45; cursor: not-allowed; }
.print-calendar-add small { color: #678098; font-size: 0.72rem; }
.print-calendar-custom-events { display: flex; flex-wrap: wrap; gap: 7px; }
.print-calendar-custom-events > span { display: flex; align-items: center; gap: 5px; padding: 5px 5px 5px 9px; border: 1px solid #bad4e3; border-radius: 9px; color: #163d58; background: #eaf4f9; font-size: 0.75rem; font-weight: 800; }
.print-calendar-custom-events button { min-height: 26px; padding: 0 7px; }
.print-calendar-preview-label { margin: 0 0 9px; color: #246b95; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; }
.print-calendar-preview { overflow-x: auto; margin: 0 -15px; padding: 0 15px 25px; }
.print-calendar-sheet { box-sizing: border-box; display: grid; grid-template-rows: 0.9in 0.91in minmax(0, 1fr) 0.58in; width: 8in; height: 10.5in; overflow: hidden; border: 1px solid #abc5d8; color: #0c3152; background: #fff; box-shadow: 0 18px 32px #0b274238; font-family: "Manrope", sans-serif; }
.print-calendar-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 0.2in; padding: 0.14in 0.24in; color: #fff; background: linear-gradient(120deg, #082e51, #0d5075); }
.print-calendar-sheet-header img { width: 2.1in; height: auto; }
.print-calendar-sheet-header > div { text-align: right; }
.print-calendar-sheet-header span { color: #ffcf35; font-size: 0.11in; font-weight: 900; letter-spacing: 0.11em; }
.print-calendar-sheet-header h2 { margin: 0.04in 0 0; color: #ffcb08; font: 900 0.43in/0.9 "League Spartan", "Manrope", sans-serif; text-transform: uppercase; }
.print-calendar-sheet-header h2 b { color: #fff; font-size: 0.22in; }
.print-calendar-kids { display: flex; align-items: center; gap: 0.22in; overflow: hidden; padding: 0.11in 0.22in; border-bottom: 3px solid #ffcb08; background: #e9f2f7; }
.print-calendar-sheet.has-many-kids { grid-template-rows: 0.9in 1.22in minmax(0, 1fr) 0.58in; }
.print-calendar-sheet.has-many-kids .print-calendar-kids { flex-wrap: wrap; align-content: center; gap: 0.06in 0.12in; padding-block: 0.05in; }
.print-calendar-sheet.has-many-kids .print-calendar-kid { min-width: 1.13in; }
.print-calendar-sheet.has-many-kids .print-calendar-kid-photo { flex-basis: 0.38in; width: 0.38in; height: 0.38in; font-size: 0.16in; }
.print-calendar-kids > p { color: #49677b; font-size: 0.13in; }
.print-calendar-kid { flex: 0 0 auto; display: flex; align-items: center; gap: 0.08in; max-width: 1.7in; min-width: 1.15in; }
.print-calendar-kid-photo { flex: 0 0 0.52in; display: grid; place-items: center; width: 0.52in; height: 0.52in; overflow: hidden; border: 2px solid #0b7bb9; border-radius: 50%; color: #082d4f; background: #ffcb08; font-size: 0.2in; font-weight: 900; }
.print-calendar-kid-photo img { width: 100%; height: 100%; object-fit: cover; }
.print-calendar-kid > div { display: grid; gap: 0.025in; min-width: 0; }
.print-calendar-kid strong { overflow: hidden; color: #082e51; font-size: 0.135in; text-overflow: ellipsis; white-space: nowrap; }
.print-calendar-kid small { color: #47657c; font-size: 0.1in; white-space: nowrap; }
.print-calendar-kid i { display: block; height: 0.055in; overflow: hidden; border-radius: 99px; background: #c9d9e3; }
.print-calendar-kid em { display: block; height: 100%; border-radius: inherit; background: #f5b900; }
.print-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 0.29in repeat(6, minmax(0, 1fr)); min-height: 0; padding: 0.1in 0.13in 0.04in; }
.print-calendar-weekday { display: grid; place-items: center; color: #fff; background: #113e60; font-size: 0.12in; font-weight: 900; }
.print-calendar-day, .print-calendar-blank { min-width: 0; min-height: 0; padding: 0.06in; border-right: 1px solid #aec4d2; border-bottom: 1px solid #aec4d2; }
.print-calendar-day:nth-of-type(7n + 1), .print-calendar-blank:nth-of-type(7n + 1) { border-left: 1px solid #aec4d2; }
.print-calendar-day.is-weekend { background: #f0f6f8; }
.print-calendar-day > strong { display: block; color: #0a3b60; font-size: 0.15in; line-height: 1; }
.print-calendar-day > div { display: grid; align-content: start; gap: 0.035in; margin-top: 0.07in; }
.print-calendar-day > div > span { display: block; overflow-wrap: anywhere; color: #174c6b; font-size: 0.095in; font-weight: 800; line-height: 1.16; }
.print-calendar-day > div > .is-idea { padding: 0.02in 0.025in; border-left: 2px solid #d69b00; background: #fff2bf; }
.print-calendar-day > div > .is-birthday { color: #a34815; }
.print-calendar-day > div > .is-holiday { color: #567083; font-weight: 700; }
.print-calendar-day > div > .is-custom { color: #206d57; }
.print-calendar-sheet-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2in; padding: 0.08in 0.2in; border-top: 3px solid #ffcb08; }
.print-calendar-sheet-footer div { display: grid; gap: 0.07in; }
.print-calendar-sheet-footer strong { color: #0c5379; font-size: 0.09in; letter-spacing: 0.06em; }
.print-calendar-sheet-footer div > span { display: block; border-bottom: 1px solid #8ca9bb; }
.print-calendar-sheet-footer p { max-width: 2.2in; margin: 0; color: #0d3856; font: 800 0.15in/1.1 "League Spartan", "Manrope", sans-serif; text-align: right; }

@media print {
  @page { size: letter portrait; margin: 0.25in; }
  html, body, body.print-calendar-mode, body.print-calendar-mode .plan-card, body.print-calendar-mode .notify-copy, body.print-calendar-mode .plan-section-list { width: 8in !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body.print-calendar-mode .site-header, body.print-calendar-mode .portal-nav, body.print-calendar-mode .roadmap-topbar, body.print-calendar-mode .print-calendar-intro, body.print-calendar-mode .print-calendar-actions, body.print-calendar-mode .print-calendar-planner, body.print-calendar-mode .print-calendar-preview-label, body.print-calendar-mode .portal-editor { display: none !important; }
  body.print-calendar-mode .printable-calendar-page, body.print-calendar-mode .print-calendar-preview { width: 8in !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body.print-calendar-mode .print-calendar-sheet { width: 8in !important; height: 10.5in !important; margin: 0 !important; border: 0; box-shadow: none; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}