:root {
  color-scheme: light;
  --canvas: #fbfdfd;
  --surface: #ffffff;
  --ink: #262b35;
  --muted: #69717d;
  --line: #e8eef0;
  --teal: #58c5bd;
  --teal-strong: #31aaa1;
  --teal-soft: #eafafa;
  --coral: #f27f87;
  --coral-soft: #fff0f2;
  --sky: #73b9df;
  --sky-soft: #eef8ff;
  --sand: #d7ad79;
  --sand-soft: #fff7ed;
  --shadow: 0 18px 45px rgba(49, 79, 90, 0.12);
  --soft-shadow: 0 12px 30px rgba(49, 79, 90, 0.08);
  --radius: 22px;
  --content-max: 1280px;
  --page-gutter: 34px;
  --header-height: 72px;
}

.page-diagnosis .diagnosis-start-section {
  padding-block: clamp(44px, 5vw, 78px);
}

.page-diagnosis .diagnosis-start-card {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 0.72fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: stretch;
  padding: clamp(28px, 4.5vw, 58px);
  border: 1px solid rgba(205, 226, 230, 0.92);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 12%, rgba(69, 198, 191, 0.14), transparent 290px),
    radial-gradient(circle at 92% 18%, rgba(246, 124, 137, 0.12), transparent 300px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 252, 0.9));
  box-shadow: 0 28px 82px rgba(47, 82, 92, 0.11);
  overflow: hidden;
}

.page-diagnosis .diagnosis-start-copy {
  display: grid;
  align-content: center;
  gap: 18px;
}

.page-diagnosis .diagnosis-start-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.25rem, 4.2vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.page-diagnosis .diagnosis-start-copy p {
  max-width: 680px;
  margin: 0;
  color: #60707c;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 760;
  line-height: 1.9;
}

.page-diagnosis .diagnosis-start-copy ul {
  display: grid;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.page-diagnosis .diagnosis-start-copy li {
  position: relative;
  padding-left: 30px;
  color: #445565;
  font-weight: 900;
  line-height: 1.55;
}

.page-diagnosis .diagnosis-start-copy li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.66)),
    var(--teal);
  box-shadow: inset 0 0 0 5px var(--teal), 0 8px 18px rgba(35, 171, 164, 0.18);
}

.page-diagnosis .diagnosis-start-form {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 560px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(218, 229, 232, 0.9);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 249, 250, 0.84)),
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 8%), rgba(246, 124, 137, 0.11), transparent 260px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(42, 78, 86, 0.09);
}

.page-diagnosis .diagnosis-start-form-body,
.page-diagnosis .diagnosis-start-success {
  display: grid;
  gap: 14px;
}

.page-diagnosis .diagnosis-start-success[hidden] {
  display: none;
}

.page-diagnosis .diagnosis-start-form-body > span {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--teal);
  background: rgba(69, 198, 191, 0.1);
  font-size: 0.78rem;
  font-weight: 950;
}

.page-diagnosis .diagnosis-start-form h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  line-height: 1.2;
}

.page-diagnosis .diagnosis-start-field {
  display: grid;
  gap: 7px;
}

.page-diagnosis .diagnosis-start-field span {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
}

.page-diagnosis .diagnosis-start-field input,
.page-diagnosis .diagnosis-start-field select,
.page-diagnosis .diagnosis-start-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(205, 222, 226, 0.96);
  border-radius: 15px;
  outline: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 0.93rem;
  font-weight: 760;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.page-diagnosis .diagnosis-start-field textarea {
  resize: vertical;
}

.page-diagnosis .diagnosis-start-field input:focus,
.page-diagnosis .diagnosis-start-field select:focus,
.page-diagnosis .diagnosis-start-field textarea:focus {
  border-color: rgba(69, 198, 191, 0.72);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(69, 198, 191, 0.12);
}

.page-diagnosis .diagnosis-start-field.has-error input,
.page-diagnosis .diagnosis-start-field.has-error select,
.page-diagnosis .diagnosis-start-field.has-error textarea {
  border-color: rgba(246, 124, 137, 0.82);
  box-shadow: 0 0 0 4px rgba(246, 124, 137, 0.1);
}

.page-diagnosis .diagnosis-start-field.is-nudging {
  animation: fieldNudge 260ms cubic-bezier(0.25, 1, 0.5, 1);
}

.page-diagnosis .diagnosis-start-field small {
  min-height: 18px;
  color: var(--coral);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.35;
}

.page-diagnosis .diagnosis-start-note {
  margin: 0;
  color: #7c8792;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.55;
}

.page-diagnosis .diagnosis-start-form.is-submitted .diagnosis-start-form-body {
  display: none;
}

.page-diagnosis .diagnosis-start-success {
  justify-items: start;
  align-content: center;
  min-height: 440px;
}

.page-diagnosis .diagnosis-start-success .icon {
  width: 64px;
  height: 64px;
}

.page-diagnosis .diagnosis-start-success strong {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.3vw, 2.3rem);
  line-height: 1.2;
}

.page-diagnosis .diagnosis-start-success p {
  margin: 0;
  color: #60707c;
  font-weight: 760;
  line-height: 1.8;
}

.page-diagnosis .diagnosis-start-next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1439px) {
  .page-diagnosis .diagnosis-start-card {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 28px;
  }

  .page-diagnosis .diagnosis-start-form {
    min-height: auto;
  }

  .page-diagnosis .diagnosis-start-copy h2 {
    font-size: 2.45rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 14% 4%, rgba(88, 197, 189, 0.1), transparent 30rem),
    radial-gradient(circle at 86% 10%, rgba(242, 127, 135, 0.09), transparent 34rem),
    linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    system-ui,
    sans-serif;
  line-height: 1.68;
}

body::selection {
  background: rgba(88, 197, 189, 0.24);
}

button,
a {
  font: inherit;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-strong);
  box-shadow: var(--soft-shadow);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.site {
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.site-scale-viewport {
  --desktop-design-width: 1536px;
  --desktop-scale: 1;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.site-scale-viewport > .site {
  transform-origin: top center;
}

@media (min-width: 1440px) {
  .site-scale-viewport[data-desktop-scale] {
    position: relative;
    --desktop-css-scale: min(1, calc(100vw / var(--desktop-design-width)));
  }

  .site-scale-viewport[data-desktop-scale] > .site {
    width: var(--desktop-design-width);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    zoom: var(--desktop-css-scale);
  }

  .site-scale-viewport.is-desktop-stage {
    position: relative;
  }

  .site-scale-viewport.is-desktop-stage > .site {
    width: var(--desktop-design-width);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .site-scale-viewport.is-desktop-stage.is-zoom > .site {
    zoom: var(--desktop-scale);
  }

  .site-scale-viewport.is-desktop-stage.is-transform > .site {
    transform: scale(var(--desktop-scale));
  }
}

@media (max-width: 1439px) {
  .site-scale-viewport {
    height: auto !important;
  }

  .site-scale-viewport > .site {
    width: 100%;
    transform: none;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--page-gutter);
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(232, 238, 240, 0.7);
  backdrop-filter: blur(16px);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(210, 224, 228, 0.86);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.08);
}

.site-header.minimal-header .site-nav {
  margin-left: auto;
}

.site-header.minimal-header .site-nav a::after {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 152px;
}

.brand-logo {
  display: block;
  width: 158px;
  height: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #39414c;
  font-size: 0.98rem;
  font-weight: 700;
}

.site-nav a {
  position: relative;
  padding: 23px 0;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: var(--teal);
  transform: translateX(-50%) scaleX(0);
  transition: transform 160ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--teal-strong);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-nav-toggle,
.mobile-nav-panel {
  display: none;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  font-size: 0.86rem;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  box-shadow: 0 12px 24px rgba(49, 170, 161, 0.24);
  overflow: hidden;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: -50% -34%;
  z-index: 0;
  background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.48) 48%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%) rotate(7deg);
  transition:
    opacity 180ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover::before {
  opacity: 0.7;
  transform: translateX(120%) rotate(7deg);
}

.btn.is-pressing {
  animation: btnPress 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(49, 170, 161, 0.3);
}

.btn.secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border-color: #dfe8eb;
  box-shadow: var(--soft-shadow);
}

.btn.coral {
  background: linear-gradient(135deg, #f58b91, #ef707d);
  box-shadow: 0 14px 28px rgba(242, 127, 135, 0.26);
}

.btn.sky-btn {
  background: linear-gradient(135deg, #79bee2, #5baed6);
  box-shadow: 0 14px 28px rgba(91, 174, 214, 0.24);
}

.btn.small {
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.btn-arrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1;
  transition: transform 160ms ease;
}

@keyframes btnPress {
  0%,
  100% {
    transform: translateY(-2px) scale(1);
  }
  45% {
    transform: translateY(0) scale(0.972);
  }
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

.page-main {
  min-height: 0;
}

.page-guide {
  position: fixed;
  top: 50%;
  right: clamp(8px, calc((100vw - var(--content-max)) / 2 - 72px), 26px);
  z-index: 18;
  width: 60px;
  padding: 9px 8px;
  border: 1px solid rgba(213, 229, 232, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 48px rgba(49, 79, 90, 0.12);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(14px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    width 220ms ease;
}

.page-guide.is-guide-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.page-guide:hover,
.page-guide:focus-within {
  width: 138px;
}

.page-guide-label {
  display: block;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  transition:
    max-height 180ms ease,
    margin 180ms ease,
    opacity 180ms ease;
}

.page-guide:hover .page-guide-label,
.page-guide:focus-within .page-guide-label {
  max-height: 20px;
  margin: 0 8px 9px;
  opacity: 1;
}

.page-guide-track {
  position: relative;
  display: grid;
  gap: 6px;
}

.page-guide-track::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, rgba(88, 197, 189, 0.18), rgba(242, 127, 135, 0.16), rgba(115, 185, 223, 0.18));
}

.page-guide-dot {
  position: relative;
  display: grid;
  grid-template-columns: 28px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 8px 4px 5px;
  border: 0;
  border-radius: 999px;
  color: #6a7480;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.page-guide:hover .page-guide-dot,
.page-guide:focus-within .page-guide-dot {
  grid-template-columns: 28px minmax(0, 1fr);
}

.page-guide-dot span {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.92);
  font-size: 0.58rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(88, 197, 189, 0.18);
}

.page-guide-dot strong {
  position: absolute;
  left: 43px;
  min-width: 74px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.page-guide:hover .page-guide-dot strong,
.page-guide:focus-within .page-guide-dot strong {
  position: static;
  min-width: 0;
  opacity: 1;
}

.page-guide-dot:hover,
.page-guide-dot.is-active {
  transform: translateX(-3px);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 20px rgba(49, 79, 90, 0.08);
}

.page-guide-dot.is-active span {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  box-shadow: 0 8px 18px rgba(49, 170, 161, 0.2);
}

.page-guide-dot:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.34);
  outline-offset: 2px;
}

.hero {
  position: relative;
  --hero-x: 0px;
  --hero-y: 0px;
  --hero-widget-x: 0px;
  --hero-widget-y: 0px;
  --hero-micro-x: 0px;
  --hero-micro-y: 0px;
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(480px, 1.14fr);
  align-items: center;
  padding: 58px var(--page-gutter) 42px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 46%, rgba(231, 246, 255, 0.82) 100%),
    radial-gradient(circle at 88% 20%, rgba(114, 185, 223, 0.22), transparent 22rem),
    radial-gradient(circle at 12% 80%, rgba(88, 197, 189, 0.11), transparent 20rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, 0.52) 48%, transparent 62%),
    radial-gradient(circle at 76% 72%, rgba(255, 255, 255, 0.7), transparent 18rem);
  pointer-events: none;
}

.hero-content,
.hero-visual {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #157e7a;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 25px rgba(53, 103, 117, 0.08);
  font-size: 0.8rem;
  font-weight: 800;
}

.hero h1 {
  max-width: 560px;
  margin: 0;
  font-size: 3.35rem;
  line-height: 1.22;
  letter-spacing: 0;
  font-weight: 900;
  text-wrap: balance;
  word-break: normal;
}

.hero h1 .accent {
  color: var(--coral);
  white-space: nowrap;
}

.hero h1 .teal {
  color: var(--teal-strong);
  white-space: nowrap;
}

.hero h1 .sky {
  color: var(--sky);
  white-space: nowrap;
}

.hero h1:has(.hero-title-main) {
  display: grid;
  gap: 2px;
}

.hero-title-main,
.hero-title-sub {
  display: block;
}

.hero-title-main {
  font-size: 1.22em;
  line-height: 1.08;
}

.hero-title-sub {
  font-size: 0.76em;
  line-height: 1.26;
}

.hero-copy {
  max-width: 520px;
  margin: 18px 0 0;
  color: #596473;
  font-size: 1rem;
  font-weight: 500;
}

.hero-taste-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(100%, 520px);
  min-height: 34px;
  margin-bottom: 18px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(210, 224, 228, 0.82);
  border-radius: 999px;
  color: #475362;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 16px 38px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.hero-taste-badge strong {
  min-width: 0;
  color: var(--teal-strong);
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-taste-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 12%, rgba(255, 255, 255, 0.58) 48%, transparent 72%);
  transform: translateX(-115%);
  animation: badgeSheen 7.2s ease-in-out infinite;
  pointer-events: none;
}

.badge-ping {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(88, 197, 189, 0.16);
}

.badge-ping::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(88, 197, 189, 0.42);
  border-radius: inherit;
  animation: badgePing 2.4s ease-out infinite;
}

.badge-arrow {
  flex: 0 0 auto;
  color: var(--coral);
  transition: transform 180ms ease;
}

.hero-taste-badge:hover .badge-arrow {
  transform: translateX(3px);
}

.hero-flow-command {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(100%, 580px);
  min-height: 48px;
  margin-top: 22px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(circle at var(--pointer-x, 12%) var(--pointer-y, 50%), rgba(88, 197, 189, 0.22), transparent 210px),
    linear-gradient(135deg, #202833, #111821 54%, #242d37);
  box-shadow:
    0 20px 44px rgba(31, 45, 54, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.hero-flow-command::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.16) 48%, transparent 70%);
  transform: translateX(-120%);
  animation: commandSheen 6.8s ease-in-out infinite;
  pointer-events: none;
}

.hero-flow-kicker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #b8fffa;
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.hero-flow-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 850;
}

.hero-flow-track span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.hero-flow-track b {
  color: #86ddd6;
  font-size: 0.7rem;
  font-weight: 950;
}

.hero-flow-track i {
  color: rgba(255, 255, 255, 0.28);
  font-style: normal;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.hero-note {
  margin: 12px 0 0;
  color: #818a95;
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: #69717d;
  font-size: 0.78rem;
  font-weight: 800;
}

.hero-social img {
  width: 126px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.hero-points {
  display: flex;
  gap: 24px;
  margin-top: 30px;
  color: #404956;
}

.hero-point {
  display: grid;
  gap: 6px;
  width: 118px;
  font-size: 0.72rem;
  font-weight: 700;
}

.icon {
  --icon-rgb: 31, 155, 150;
  --icon-deep: #178f8a;
  --icon-soft: #e8fbf8;
  --icon-glow: rgba(var(--icon-rgb), 0.2);
  --icon-ring: rgba(var(--icon-rgb), 0.26);
  display: inline-grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--icon-deep) 28%, #fff);
  border-radius: 16px;
  color: var(--icon-deep);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), var(--icon-soft));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 22px rgba(var(--icon-rgb), 0.06),
    0 14px 34px rgba(var(--icon-rgb), 0.15);
  transform: translateZ(0);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 66% 68%, rgba(var(--icon-rgb), 0.2), transparent 35%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(var(--icon-rgb), 0.1));
  opacity: 0.86;
}

.icon::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
  opacity: 0.86;
}

.icon.coral {
  --icon-rgb: 239, 111, 125;
  --icon-deep: #ee6f7d;
  --icon-soft: #fff1f3;
}

.icon.sky {
  --icon-rgb: 80, 164, 218;
  --icon-deep: #489fd6;
  --icon-soft: #edf8ff;
}

.icon.sand {
  --icon-rgb: 210, 153, 88;
  --icon-deep: #c98f45;
  --icon-soft: #fff6e9;
}

.icon[data-icon="brain"],
.icon[data-icon="target"] {
  --icon-rgb: 29, 154, 149;
  --icon-deep: #168f8a;
  --icon-soft: #e6fbf8;
}

.icon[data-icon="heart"],
.icon[data-icon="bell"],
.icon[data-icon="chat"] {
  --icon-rgb: 238, 111, 125;
  --icon-deep: #ee6f7d;
  --icon-soft: #fff1f3;
}

.icon[data-icon="chart"],
.icon[data-icon="clock"],
.icon[data-icon="calendar"] {
  --icon-rgb: 73, 157, 214;
  --icon-deep: #499dd6;
  --icon-soft: #edf8ff;
}

.icon[data-icon="shield"],
.icon[data-icon="doc"],
.icon[data-icon="users"],
.icon[data-icon="sliders"] {
  --icon-rgb: 36, 139, 132;
  --icon-deep: #247f7a;
  --icon-soft: #eef9f7;
}

.icon[data-icon="rocket"],
.icon[data-icon="star"] {
  --icon-rgb: 210, 153, 88;
  --icon-deep: #c98f45;
  --icon-soft: #fff6e9;
}

.icon[data-icon="frown"] {
  --icon-rgb: 111, 126, 145;
  --icon-deep: #627083;
  --icon-soft: #f3f7f8;
}

.icon.coral {
  --icon-rgb: 239, 111, 125;
  --icon-deep: #ee6f7d;
  --icon-soft: #fff1f3;
}

.icon.sky {
  --icon-rgb: 80, 164, 218;
  --icon-deep: #489fd6;
  --icon-soft: #edf8ff;
}

.icon.sand {
  --icon-rgb: 210, 153, 88;
  --icon-deep: #c98f45;
  --icon-soft: #fff6e9;
}

.icon svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.72;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(var(--icon-rgb), 0.18));
}

.card:hover .icon,
.feature-panel:hover .icon,
.metric-card:hover .icon,
.plan-card:hover .icon,
.consult-step:hover .icon,
.journey-node:hover .icon,
.about-ref-value-card:hover .icon,
.about-ref-role-card:hover .icon,
.hero-point:hover .icon,
.taste-loop-step:hover .icon,
.lens-node:hover .icon,
.parent-worry-card:hover .icon,
.parent-care-tab:hover .icon,
.parent-reason-card:hover .icon,
.progress-metric-tile:hover .icon,
.progress-value-card:hover .icon,
.diagnosis-process-step:hover .icon,
.programs-persona-card:hover .icon,
.weekly-flow-card:hover .icon,
.coach-role-card:hover .icon {
  transform: translateY(-2px) scale(1.035);
  border-color: color-mix(in srgb, var(--icon-deep) 42%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -12px 26px rgba(var(--icon-rgb), 0.08),
    0 18px 42px rgba(var(--icon-rgb), 0.22);
}

.hero-visual {
  min-height: 420px;
}

.photo-card {
  position: absolute;
  right: calc(var(--page-gutter) * -0.75);
  top: 8px;
  width: min(54vw, 760px);
  height: 440px;
  overflow: hidden;
  border-radius: 0 0 0 72px;
  background: #eaf6fb;
  box-shadow: -24px 26px 68px rgba(65, 107, 123, 0.18);
  transform: translate3d(var(--hero-x), var(--hero-y), 0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 0.82));
  pointer-events: none;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.03);
  animation: imageFloat 8s ease-in-out infinite;
}

.page-pricing .hero {
  color: #fff;
  padding-left: clamp(42px, 4.6vw, 86px);
  background: linear-gradient(90deg, #86abd4 0%, #94b8dc 44%, #c3ddf1 100%);
}

.page-pricing .hero::before {
  background: none;
}

.page-pricing .eyebrow {
  display: none;
}

.page-home .eyebrow,
.page-about .eyebrow,
.page-programs .eyebrow,
.page-progress .eyebrow,
.page-diagnosis .eyebrow,
.page-system .eyebrow {
  display: none;
}

.page-pricing .hero h1 {
  color: #fff;
  text-shadow: 0 14px 32px rgba(68, 103, 137, 0.18);
}

.page-pricing .hero-copy,
.page-pricing .hero-point {
  color: rgba(255, 255, 255, 0.92);
}

.page-pricing .hero-point strong,
.page-pricing .hero-point span {
  color: inherit;
}

.page-pricing .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
}

.page-pricing .photo-card {
  top: 0;
  right: 0;
  width: min(55.8vw, 575px);
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-pricing .photo-card::after {
  background:
    linear-gradient(90deg, rgba(126, 171, 211, 0.46), rgba(126, 171, 211, 0.16) 20%, transparent 42%),
    linear-gradient(180deg, rgba(122, 169, 207, 0.02), rgba(122, 169, 207, 0.02));
}

.page-pricing .photo-card img {
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  animation-name: imageFloatTight;
}

.page-coach .hero {
  background: #fff;
}

.page-coach .hero::before {
  background: none;
}

.page-coach .hero::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -92px;
  left: -8%;
  z-index: 0;
  height: 168px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(64% 100% at 22% 30%, rgba(226, 249, 249, 0.9), transparent 66%),
    radial-gradient(58% 96% at 78% 38%, rgba(255, 238, 229, 0.84), transparent 70%);
  pointer-events: none;
}

.page-coach .photo-card {
  right: 0;
  top: -34px;
  width: min(57vw, 620px);
  height: 430px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-coach .photo-card::after {
  background: none;
}

.page-coach .photo-card img {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1);
}

.hero-widget {
  position: absolute;
  z-index: 2;
  min-width: 134px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 38px rgba(51, 84, 96, 0.14);
  backdrop-filter: blur(12px);
  animation: widgetFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

.hero-widget strong {
  display: block;
  color: var(--ink);
  font-size: 1.34rem;
  line-height: 1.1;
}

.hero-widget span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.hero-widget .widget-label {
  margin-bottom: 7px;
  color: #3f4a56;
  font-size: 0.76rem;
  font-weight: 900;
}

.hero-widget .widget-detail {
  display: block;
  max-width: 11.5em;
  margin-top: 4px;
  color: #7b858f;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
}

.widget-line {
  display: block;
  width: 142px;
  height: 54px;
  margin-top: 8px;
}

.widget-line path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 8px 10px rgba(49, 170, 161, 0.14));
  animation: drawLine 4.2s ease-in-out infinite;
}

.widget-type-trend .widget-line path {
  stroke: var(--coral);
}

.hero-widget .widget-donut {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  margin: 2px auto 8px;
  border-radius: 999px;
  color: var(--ink);
  background:
    radial-gradient(circle at center, #fff 0 48%, transparent 49%),
    conic-gradient(var(--teal) 0 82%, #eaf0f2 82% 100%);
  font-size: 1rem;
}

.hero-widget .widget-donut.score {
  background:
    radial-gradient(circle at center, #fff 0 50%, transparent 51%),
    conic-gradient(var(--teal) 0 72%, #eaf0f2 72% 100%);
}

.widget-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-score-caption {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.widget-score-line {
  width: 128px;
  height: 36px;
  margin-top: 2px;
}

.widget-donut b {
  font-size: 1.35rem;
  line-height: 1;
}

.widget-donut em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.widget-mini-legend {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.widget-mini-legend span {
  position: relative;
  padding-left: 13px;
  white-space: nowrap;
}

.widget-mini-legend span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--teal);
}

.widget-mini-legend span:nth-child(2)::before {
  background: var(--sky);
}

.widget-mini-legend span:nth-child(3)::before {
  background: var(--sand);
}

.widget-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  width: 148px;
  height: 70px;
  margin-top: 8px;
}

.widget-bars i {
  width: 14px;
  min-height: 18px;
  border-radius: 7px 7px 2px 2px;
  background: var(--teal);
}

.widget-bars i:nth-child(2n) {
  background: var(--coral);
}

.widget-bars i:nth-child(3n) {
  background: var(--sky);
}

.widget-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: #566170;
  font-size: 0.76rem;
  font-weight: 800;
}

.widget-list li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 99px;
  background: var(--coral);
}

.hero-widget.one {
  left: 1%;
  bottom: 38px;
}

.hero-widget.two {
  right: 1%;
  top: 58px;
  animation-delay: 0.65s;
}

.hero-widget.three {
  right: 7%;
  bottom: 28px;
  animation-delay: 1.1s;
}

.hero-preview-wall {
  position: absolute;
  right: clamp(26px, 5.4vw, 96px);
  top: clamp(72px, 9.5vw, 146px);
  z-index: 4;
  width: min(28vw, 390px);
  min-width: 292px;
  height: min(32vw, 430px);
  pointer-events: auto;
  transform: translate3d(calc(var(--hero-widget-x) * 0.46), calc(var(--hero-widget-y) * 0.46), 0);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-preview-card {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.54), transparent 170px),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    0 24px 56px rgba(49, 79, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.hero-preview-card span,
.hero-preview-card em {
  display: block;
  color: #71808d;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.hero-preview-card strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.28;
  font-weight: 950;
}

.hero-preview-card p {
  margin: 8px 0 0;
  color: #596473;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.58;
}

.preview-main {
  left: 0;
  top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px;
  gap: 12px;
  width: 100%;
  min-height: 154px;
  padding: 16px;
  animation: previewFloatA 6.6s ease-in-out infinite;
}

.preview-main figure {
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--teal-soft);
}

.preview-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(1.04) contrast(1.02);
}

.hero-preview-diagram {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 10px;
  background:
    radial-gradient(circle at 24% 24%, rgba(88, 197, 189, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(238, 248, 255, 0.86));
}

.hero-preview-diagram > span {
  color: var(--teal-strong);
  font-size: 0.64rem;
  font-weight: 950;
}

.hero-preview-diagram div {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.hero-preview-diagram .icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.hero-preview-diagram .icon svg {
  width: 18px;
  height: 18px;
}

.hero-preview-diagram > i {
  display: block;
  width: 76%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(227, 238, 241, 0.88);
}

.hero-preview-diagram > i::after {
  content: "";
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.preview-metric {
  right: -10px;
  top: 0;
  width: 148px;
  padding: 14px 16px;
  transform: rotate(2.4deg);
  animation: previewFloatB 5.8s ease-in-out infinite;
}

.preview-metric strong {
  margin: 5px 0 4px;
  color: var(--teal-strong);
  font-size: 1.72rem;
}

.preview-proof {
  left: 48px;
  bottom: 0;
  width: 250px;
  padding: 15px 16px;
  transform: rotate(-1.6deg);
  animation: previewFloatC 6.2s ease-in-out infinite;
}

.preview-proof strong {
  color: var(--coral);
}

.preview-proof div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.preview-proof i {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #536171;
  background: rgba(244, 249, 250, 0.86);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.micro-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(var(--hero-micro-x), var(--hero-micro-y), 0);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.micro-layer span {
  position: absolute;
  display: block;
}

.motion-home .shine {
  left: 45%;
  top: -8%;
  width: 32%;
  height: 118%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.64), transparent);
  filter: blur(16px);
  transform: skewX(-17deg);
  animation: shineSweep 6.6s ease-in-out infinite;
}

.motion-home .pulse {
  right: 9%;
  top: 18%;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  animation: pulseRing 3.4s ease-out infinite;
}

.motion-about .blob,
.motion-coach .blob {
  right: 3%;
  top: 16%;
  width: 330px;
  height: 330px;
  border-radius: 48% 52% 58% 42%;
  background: rgba(242, 127, 135, 0.12);
  animation: softBlob 8s ease-in-out infinite;
}

.motion-about .blob {
  background: rgba(242, 127, 135, 0.05);
  opacity: 0.5;
}

.motion-programs .split-line {
  left: 52%;
  top: 20%;
  width: 1px;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(242, 127, 135, 0.52), transparent);
  animation: breathe 3s ease-in-out infinite;
}

.motion-progress .draw-line,
.motion-diagnosis .draw-line {
  right: 7%;
  top: 24%;
  width: 164px;
  height: 92px;
}

.draw-line svg {
  width: 100%;
  height: 100%;
}

.draw-line path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: drawLine 4.2s ease-in-out infinite;
}

.motion-diagnosis .scan {
  right: 16%;
  top: 12%;
  width: 210px;
  height: 300px;
  background: linear-gradient(90deg, transparent, rgba(88, 197, 189, 0.26), transparent);
  filter: blur(9px);
  transform: rotate(-8deg);
  animation: scan 4.5s ease-in-out infinite;
}

.motion-system .node {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(88, 197, 189, 0.35);
  animation: nodePulse 2.6s ease-in-out infinite;
}

.motion-system .node:nth-child(1) {
  left: 49%;
  top: 76%;
}

.motion-system .node:nth-child(2) {
  left: 62%;
  top: 76%;
  animation-delay: 0.3s;
}

.motion-system .node:nth-child(3) {
  left: 75%;
  top: 76%;
  animation-delay: 0.6s;
}

.motion-pricing .price-ring {
  right: 13%;
  bottom: 13%;
  width: 230px;
  height: 120px;
  border: 2px dashed rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  transform: rotate(-7deg);
  animation: breathe 4.8s ease-in-out infinite;
}

.motion-pricing .price-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 10px rgba(88, 197, 189, 0.16);
  animation: nodePulse 2.8s ease-in-out infinite;
}

.motion-pricing .price-dot:nth-child(2) {
  right: 29%;
  bottom: 24%;
}

.motion-pricing .price-dot:nth-child(3) {
  right: 20%;
  bottom: 20%;
  animation-delay: 0.35s;
}

.motion-pricing .price-dot:nth-child(4) {
  right: 12%;
  bottom: 27%;
  animation-delay: 0.7s;
}

.motion-parent .care-orbit {
  right: 8%;
  top: 13%;
  width: 310px;
  height: 310px;
  border-radius: 44% 56% 52% 48%;
  border: 1px solid rgba(88, 197, 189, 0.34);
  background: radial-gradient(circle at 38% 42%, rgba(242, 127, 135, 0.14), transparent 42%);
  animation: softBlob 9s ease-in-out infinite;
}

.motion-parent .care-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 0 12px rgba(242, 127, 135, 0.12);
  animation: nodePulse 3.2s ease-in-out infinite;
}

.motion-parent .care-dot:nth-child(2) {
  right: 24%;
  top: 18%;
}

.motion-parent .care-dot:nth-child(3) {
  right: 9%;
  top: 53%;
  background: var(--teal);
  animation-delay: 0.55s;
}

.motion-coach .heart-wave {
  right: 15%;
  top: 25%;
  width: 170px;
  height: 170px;
  border: 2px solid rgba(242, 127, 135, 0.3);
  border-radius: 999px;
  animation: pulseRing 3s ease-out infinite;
}

.taste-loop-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  gap: 24px;
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content-max);
  margin: -18px auto 8px;
  padding: 18px;
  border: 1px solid rgba(210, 224, 228, 0.78);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 253, 0.86)),
    radial-gradient(circle at var(--pointer-x, 16%) var(--pointer-y, 50%), rgba(88, 197, 189, 0.16), transparent 260px);
  box-shadow:
    0 22px 58px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  overflow: hidden;
}

.taste-loop-strip,
.section,
.cta-band,
.footer {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.taste-loop-strip.is-visible,
.section.is-visible,
.cta-band.is-visible,
.footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero,
.faq-ref-hero,
.faq-ref-category-grid,
.faq-ref-main-section,
.faq-ref-concerns,
.faq-ref-cta,
.taste-loop-strip,
.section,
.cta-band,
.footer {
  opacity: 1;
  transform: none;
}

html.motion-ready :is(
  .faq-ref-category-grid,
  .faq-ref-main-section,
  .faq-ref-concerns,
  .faq-ref-cta,
  .taste-loop-strip,
  .section,
  .cta-band,
  .footer
):not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}

.motion-child {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 560ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 560ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--motion-index, 0) * 42ms);
}

html.motion-ready :is(.hero, .faq-ref-hero, .faq-ref-category-grid, .faq-ref-main-section, .faq-ref-concerns, .faq-ref-cta, .taste-loop-strip, .section, .cta-band, .footer):not(.is-visible) .motion-child {
  opacity: 0;
  translate: 0 14px;
  filter: blur(3px);
}

html.motion-ready :is(.hero, .faq-ref-hero).is-visible .motion-child {
  animation: globalHeroChildIn 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--motion-index, 0) * 58ms);
}

.taste-loop-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px 10px 12px 12px;
}

.taste-loop-copy span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
}

.taste-loop-copy i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(88, 197, 189, 0.12);
}

.taste-loop-copy strong {
  color: var(--ink);
  font-size: clamp(1.25rem, 1.7vw, 1.8rem);
  line-height: 1.25;
  font-weight: 950;
}

.taste-loop-copy p {
  max-width: 38em;
  margin: 0;
  color: #596473;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.7;
}

.taste-loop-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.taste-loop-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(222, 234, 237, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.taste-loop-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x, 20%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.48), transparent 140px);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.taste-loop-step:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 197, 189, 0.38);
  box-shadow: 0 18px 34px rgba(49, 79, 90, 0.08);
}

.taste-loop-step:hover::after {
  opacity: 1;
}

.taste-loop-step span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.76rem;
  font-weight: 950;
}

.taste-loop-step:nth-child(2) span {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.taste-loop-step:nth-child(3) span {
  background: linear-gradient(135deg, #7fc2e5, #5baed6);
}

.taste-loop-step strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.35;
}

.taste-loop-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.56;
}

.taste-loop-step em {
  align-self: end;
  justify-self: start;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 26px;
}

.section {
  padding: 42px var(--page-gutter);
}

.section > * {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.section.flush-top {
  padding-top: 18px;
}

.section-title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 1.55rem;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.section-subtitle {
  max-width: 620px;
  margin: -14px auto 28px;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.section-title .teal {
  color: var(--teal-strong);
}

.section-title .coral {
  color: var(--coral);
}

.page-about .section-title:not([style*="left"]),
.page-programs .section-title:not([style*="left"]) {
  display: block;
}

.page-about .section-title:not([style*="left"])::before,
.page-about .section-title:not([style*="left"])::after,
.page-programs .section-title:not([style*="left"])::before,
.page-programs .section-title:not([style*="left"])::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 50%, var(--teal) 0 3px, transparent 3.4px),
    radial-gradient(circle at 76% 50%, var(--coral) 0 3px, transparent 3.4px);
  opacity: 0.62;
  vertical-align: middle;
  animation: titleDots 3.8s ease-in-out infinite;
}

.page-about .section-title:not([style*="left"])::before,
.page-programs .section-title:not([style*="left"])::before {
  margin-right: 14px;
}

.page-about .section-title:not([style*="left"])::after,
.page-programs .section-title:not([style*="left"])::after {
  margin-left: 14px;
  animation-delay: 0.8s;
  transform: scaleX(-1);
}

.page-parent .section-title:not([style*="left"]) {
  display: block;
}

.page-parent .section-title:not([style*="left"])::before,
.page-parent .section-title:not([style*="left"])::after {
  content: "";
  display: inline-block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 163, 172, 0.55));
  vertical-align: middle;
}

.page-parent .section-title:not([style*="left"])::before {
  margin-right: 18px;
}

.page-parent .section-title:not([style*="left"])::after {
  margin-left: 18px;
  background: linear-gradient(90deg, rgba(151, 163, 172, 0.55), transparent);
}

.page-coach .section-title:not([style*="left"])::after {
  content: "";
  display: block;
  width: 116px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
}

.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.section-kicker::before,
.section-kicker::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9c3a0);
}

.section-kicker::after {
  background: linear-gradient(90deg, #d9c3a0, transparent);
}

.grid {
  display: grid;
  gap: 18px;
}

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

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

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

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

.card,
.soft-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
}

.card::after,
.feature-panel::after,
.plan-card::after,
.metric-card::after,
.coach-role-card::after,
.weekly-flow-card::after,
.consult-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.38), transparent 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.card:hover::after,
.feature-panel:hover::after,
.plan-card:hover::after,
.metric-card:hover::after,
.coach-role-card:hover::after,
.weekly-flow-card:hover::after,
.consult-step:hover::after {
  opacity: 1;
}

.card {
  min-height: 150px;
  padding: 24px;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(88, 197, 189, 0.5);
  box-shadow: var(--shadow);
}

.card.teal {
  background: linear-gradient(135deg, var(--teal-soft), #fff);
}

.card.coral {
  background: linear-gradient(135deg, var(--coral-soft), #fff);
}

.card.sky {
  background: linear-gradient(135deg, var(--sky-soft), #fff);
}

.card.sand {
  background: linear-gradient(135deg, var(--sand-soft), #fff);
}

.card-number {
  color: currentColor;
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.advantage-card {
  min-height: 210px;
  padding: 28px;
}

.advantage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.advantage-head .card-number {
  color: inherit;
  font-size: 2.05rem;
}

.advantage-head .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.advantage-showcase {
  --adv-ink: #102138;
  --adv-edge: rgba(120, 180, 185, 0.2);
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  isolation: isolate;
}

.advantage-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  min-height: clamp(330px, 30vw, 430px);
  border: 1px solid rgba(88, 197, 189, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(140deg, rgba(234, 250, 250, 0.96), rgba(255, 255, 255, 0.96) 58%, rgba(255, 246, 240, 0.88)),
    #fff;
  box-shadow:
    0 28px 70px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.advantage-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 48%, rgba(255, 255, 255, 0.52) 70%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 46%);
  z-index: 1;
}

.advantage-hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(36px, 4.6vw, 68px);
}

.advantage-hero-brand {
  display: block;
  width: 154px;
  height: auto;
  margin-bottom: 28px;
  object-fit: contain;
}

.advantage-hero-copy h2 {
  margin: 0;
  color: var(--adv-ink);
  font-size: clamp(3.5rem, 6.15vw, 5.85rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
}

.advantage-hero-copy h2 b {
  color: var(--teal-strong);
  font-size: 1.18em;
  font-weight: 300;
}

.advantage-hero-copy p {
  max-width: 38rem;
  margin: 22px 0 0;
  color: #52606e;
  font-size: clamp(1rem, 1.45vw, 1.34rem);
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0;
}

.advantage-hero-panel figure {
  position: relative;
  z-index: 0;
  min-height: 100%;
  margin: 0;
}

.advantage-hero-panel figure img,
.advantage-feature-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advantage-hero-panel figure img {
  object-position: 62% center;
}

.advantage-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

.advantage-feature-card {
  --adv-tone: var(--teal);
  --adv-soft: var(--teal-soft);
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(392px, 30vw, 452px);
  border: 1px solid var(--adv-edge);
  border-radius: 26px;
  background: var(--adv-soft);
  box-shadow:
    0 18px 44px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.advantage-feature-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 68px rgba(49, 79, 90, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.advantage-feature-card.teal {
  --adv-tone: var(--teal-strong);
  --adv-soft: #eafafa;
}

.advantage-feature-card.coral {
  --adv-tone: var(--coral);
  --adv-soft: #fff0f2;
}

.advantage-feature-card.sky {
  --adv-tone: #4da7d3;
  --adv-soft: #eef8ff;
}

.advantage-feature-card.sand {
  --adv-tone: var(--sand);
  --adv-soft: #fff7ed;
}

.advantage-feature-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-position: 70% center;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.012);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.advantage-feature-card:hover > img {
  transform: scale(1.045);
}

.advantage-feature-card:nth-child(1) > img {
  object-position: 71% center;
}

.advantage-feature-card:nth-child(2) > img {
  object-position: 73% center;
}

.advantage-feature-card:nth-child(3) > img {
  object-position: 73% center;
}

.advantage-feature-card:nth-child(4) > img {
  object-position: center center;
}

.advantage-feature-card:nth-child(5) > img {
  object-position: 50% center;
}

.advantage-feature-card:nth-child(6) > img {
  object-position: center center;
}

.advantage-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0 28%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.04) 68%, rgba(255, 255, 255, 0.14) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 30%, rgba(255, 255, 255, 0.22) 62%, transparent);
}

.advantage-feature-card::after {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--adv-tone) 16%, transparent), transparent 42%);
}

.advantage-feature-copy {
  position: absolute;
  top: clamp(22px, 2vw, 30px);
  left: clamp(22px, 2vw, 30px);
  right: clamp(22px, 2vw, 30px);
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 13px;
  row-gap: 8px;
  align-items: end;
  max-width: none;
}

.advantage-feature-copy span {
  display: block;
  margin: 0;
  color: var(--adv-tone);
  font-size: clamp(2.15rem, 3.15vw, 3rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: 0;
  vertical-align: baseline;
}

.advantage-feature-copy h3 {
  display: block;
  margin: 0;
  color: var(--adv-ink);
  font-size: clamp(1.04rem, 1.18vw, 1.32rem);
  line-height: 1.25;
  font-weight: 900;
}

.advantage-feature-copy p {
  grid-column: 1 / -1;
  max-width: 34em;
  margin: 0;
  color: #4f5e6c;
  font-size: clamp(0.78rem, 0.82vw, 0.88rem);
  font-weight: 700;
  line-height: 1.68;
}

.adv-ui-card {
  position: absolute;
  left: clamp(18px, 2vw, 24px);
  right: clamp(18px, 2vw, 24px);
  bottom: clamp(18px, 2vw, 24px);
  z-index: 2;
  width: auto;
  min-height: 108px;
  padding: clamp(13px, 1.2vw, 17px);
  border: 1px solid rgba(214, 229, 232, 0.78);
  border-radius: 16px;
  color: #263241;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 18px 38px rgba(49, 79, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.18);
}

.adv-ui-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.46), transparent 42%);
  pointer-events: none;
}

.adv-ui-card strong {
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.plan-ui {
  display: grid;
  gap: 8px;
}

.plan-ui span,
.trust-ui span {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: center;
  color: #66717c;
  font-size: 0.7rem;
  font-weight: 800;
}

.plan-ui i {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--adv-tone), rgba(88, 197, 189, 0.16));
}

.plan-ui em {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border: 7px solid rgba(88, 197, 189, 0.22);
  border-top-color: var(--adv-tone);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--adv-tone);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
}

.radar-ui {
  width: auto;
}

.radar-ui span {
  color: #66717c;
  font-size: 0.72rem;
  font-weight: 800;
}

.radar-ui svg {
  display: block;
  width: 96px;
  height: 74px;
  margin-top: 4px;
}

.radar-ui polygon:first-child {
  fill: rgba(88, 197, 189, 0.08);
  stroke: rgba(88, 197, 189, 0.28);
}

.radar-ui polygon:last-child {
  fill: rgba(88, 197, 189, 0.28);
  stroke: var(--teal-strong);
}

.radar-ui button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: var(--teal-strong);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
}

.image-ui {
  min-height: clamp(120px, 10vw, 148px);
  padding: 0;
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.image-ui img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) contrast(1.01);
}

.score-ui img,
.overview-ui img {
  object-position: center top;
}

.chat-ui p,
.chat-ui span {
  margin: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.76rem;
  font-weight: 800;
}

.chat-ui p {
  background: #f6fafb;
}

.chat-ui span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  margin-left: auto;
  color: #fff;
  background: var(--teal-strong);
}

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

.data-ui strong,
.data-ui svg {
  grid-column: 1 / -1;
}

.data-ui div {
  padding: 8px;
  border-radius: 10px;
  background: #f7fbfc;
}

.data-ui b {
  display: block;
  color: #142235;
  font-size: 1.16rem;
  line-height: 1.1;
}

.data-ui span {
  color: #66717c;
  font-size: 0.68rem;
  font-weight: 800;
}

.data-ui svg {
  width: 100%;
  height: 42px;
}

.data-ui path {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 4;
  stroke-linecap: round;
}

.skills-ui div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.skills-ui span {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--adv-tone);
  background: color-mix(in srgb, var(--adv-tone) 12%, #fff);
  font-size: 0.7rem;
  font-weight: 900;
}

.skills-ui p {
  margin: 0;
  color: #66717c;
  font-size: 0.74rem;
  font-weight: 800;
}

.trust-ui {
  display: grid;
  gap: 9px;
}

.trust-ui span {
  grid-template-columns: 1fr 22px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7fbfc;
}

.trust-ui i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--adv-tone);
}

.trust-ui i::after {
  content: "";
  display: block;
  width: 8px;
  height: 5px;
  margin: 5px auto 0;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

.advantage-flow-strip {
  position: relative;
  height: clamp(230px, 28vw, 360px);
  margin-top: 2px;
  border: 1px solid rgba(88, 197, 189, 0.16);
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 18px 48px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.advantage-flow-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.advantage-mini-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(88, 197, 189, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(100deg, rgba(234, 250, 250, 0.96), rgba(255, 246, 240, 0.72) 62%, #fff),
    #fff;
  box-shadow:
    0 18px 48px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.advantage-cta-divider {
  width: 1px;
  height: 68px;
  background: linear-gradient(180deg, transparent, rgba(20, 34, 53, 0.22), transparent);
}

.advantage-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.advantage-cta-actions .btn {
  min-width: 156px;
  justify-content: center;
}

.advantage-mini-cta h3,
.advantage-mini-cta p {
  margin: 0;
}

.advantage-mini-cta h3 {
  color: var(--adv-ink);
  font-size: clamp(1.28rem, 1.7vw, 1.7rem);
  line-height: 1.3;
  font-weight: 900;
}

.advantage-mini-cta p {
  max-width: 580px;
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(0.86rem, 0.9vw, 0.96rem);
  line-height: 1.65;
  font-weight: 700;
}

.card-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--coral);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
}

.card h3 {
  margin: 14px 0 8px;
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 900;
}

.card p,
.card li {
  color: #616b77;
  font-size: 0.88rem;
  font-weight: 600;
}

.card p {
  margin: 0;
}

.card ul {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.card li::before,
.check-list li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--teal-strong);
  font-weight: 900;
}

.mini-cards .card {
  min-height: 102px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.mini-cards .card h3 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.metric-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 128px;
  padding: 20px 18px;
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.metric-card.coral {
  border-color: rgba(242, 127, 135, 0.28);
}

.metric-card.sky {
  border-color: rgba(115, 185, 223, 0.3);
}

.metric-card.sand {
  border-color: rgba(215, 173, 121, 0.32);
}

.metric-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.metric-card strong {
  display: block;
  color: var(--teal-strong);
  font-size: 1.75rem;
  line-height: 1.1;
}

.metric-card.coral strong {
  color: var(--coral);
}

.metric-card.sky strong {
  color: var(--sky);
}

.metric-card.sand strong {
  color: #e4a243;
}

.metric-card strong span {
  margin-left: 3px;
  font-size: 0.78rem;
}

.metric-card p {
  margin: 4px 0 0;
  color: #404956;
  font-size: 0.84rem;
  font-weight: 850;
}

.metric-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.feature-panel {
  position: relative;
  padding: 28px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--soft-shadow);
  text-align: center;
  overflow: hidden;
}

.feature-panel .icon {
  margin: 0 auto 14px;
}

.feature-panel h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.feature-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.coach-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.coach-role-card {
  position: relative;
  min-height: 218px;
  padding: 26px 18px 22px;
  border: 1px solid rgba(88, 197, 189, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(234, 250, 250, 0.84), rgba(255, 255, 255, 0.94));
  box-shadow: var(--soft-shadow);
  text-align: center;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.coach-role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(49, 79, 90, 0.12);
}

.coach-role-card.coral {
  border-color: rgba(242, 127, 135, 0.32);
  background: linear-gradient(180deg, rgba(255, 240, 242, 0.86), rgba(255, 255, 255, 0.94));
}

.coach-role-card.sky {
  border-color: rgba(115, 185, 223, 0.32);
  background: linear-gradient(180deg, rgba(238, 248, 255, 0.88), rgba(255, 255, 255, 0.94));
}

.coach-role-card.sand {
  border-color: rgba(215, 173, 121, 0.3);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.94));
}

.coach-role-card .icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.36);
}

.coach-role-card h3 {
  margin: 0 0 8px;
  color: var(--teal-strong);
  font-size: 1.18rem;
}

.coach-role-card.coral h3 {
  color: var(--coral);
}

.coach-role-card.sky h3 {
  color: var(--sky);
}

.coach-role-card.sand h3 {
  color: #a77a45;
}

.coach-role-card p {
  margin: 0;
  color: #4d5966;
  font-size: 0.86rem;
  font-weight: 850;
}

.coach-role-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.weekly-flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  margin-top: 34px;
}

.weekly-flow-card {
  position: relative;
  min-width: 0;
  min-height: 192px;
  padding: 24px 15px 20px;
  border: 1px solid rgba(88, 197, 189, 0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 22%, rgba(88, 197, 189, 0.14), transparent 48px),
    linear-gradient(180deg, rgba(234, 250, 250, 0.84), rgba(255, 255, 255, 0.95));
  text-align: center;
  box-shadow: var(--soft-shadow);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.weekly-flow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(49, 79, 90, 0.12);
}

.weekly-flow-card.coral {
  border-color: rgba(242, 127, 135, 0.34);
  background:
    radial-gradient(circle at 50% 22%, rgba(242, 127, 135, 0.16), transparent 48px),
    linear-gradient(180deg, rgba(255, 240, 242, 0.9), rgba(255, 255, 255, 0.96));
}

.weekly-flow-card.sky {
  border-color: rgba(115, 185, 223, 0.34);
  background:
    radial-gradient(circle at 50% 22%, rgba(115, 185, 223, 0.16), transparent 48px),
    linear-gradient(180deg, rgba(238, 248, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.weekly-flow-card.sand {
  border-color: rgba(215, 173, 121, 0.34);
  background:
    radial-gradient(circle at 50% 22%, rgba(215, 173, 121, 0.14), transparent 48px),
    linear-gradient(180deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.96));
}

.weekly-flow-card > span {
  display: block;
  margin-bottom: 8px;
  color: var(--teal-strong);
  font-size: 1.25rem;
  font-weight: 900;
}

.weekly-flow-card.coral > span,
.weekly-flow-card.coral h3 {
  color: var(--coral);
}

.weekly-flow-card.sky > span,
.weekly-flow-card.sky h3 {
  color: var(--sky);
}

.weekly-flow-card.sand > span,
.weekly-flow-card.sand h3 {
  color: #a77a45;
}

.weekly-flow-card .icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 15px;
  border-width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.weekly-flow-card h3 {
  margin: 0 0 8px;
  color: var(--teal-strong);
  font-size: 1rem;
}

.weekly-flow-card p {
  margin: 0 auto;
  max-width: 10.5em;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.62;
}

.weekly-flow-arrow {
  margin-top: 84px;
  color: #b6c4ca;
  font-size: 1.16rem;
}

.recommend-card {
  min-height: 200px;
  padding: 24px;
  border: 1px solid rgba(88, 197, 189, 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-soft), rgba(255, 255, 255, 0.9));
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.recommend-card.coral {
  border-color: rgba(242, 127, 135, 0.3);
  background: linear-gradient(135deg, var(--coral-soft), rgba(255, 255, 255, 0.9));
}

.recommend-card .icon {
  margin: 0 auto 12px;
}

.recommend-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.recommend-card p {
  min-height: 48px;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.recommend-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 38px;
  margin-top: 18px;
  border-radius: 8px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.16);
  font-size: 0.86rem;
  font-weight: 900;
}

.recommend-card.coral span {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.14);
}

.fit-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fit-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 178px;
  padding: 26px 30px;
  border: 1px solid rgba(88, 197, 189, 0.35);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.88), rgba(255, 255, 255, 0.94));
  box-shadow: var(--soft-shadow);
}

.fit-card.coral {
  border-color: rgba(242, 127, 135, 0.32);
  background: linear-gradient(135deg, rgba(255, 240, 242, 0.9), rgba(255, 255, 255, 0.95));
}

.fit-card .icon {
  width: 78px;
  height: 78px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
}

.fit-card .icon svg {
  width: 40px;
  height: 40px;
}

.fit-card h3 {
  margin: 0;
  color: var(--teal-strong);
  font-size: 1.02rem;
}

.fit-card.coral h3 {
  color: var(--coral);
}

.fit-card .check-list {
  gap: 7px;
  margin: 12px 0 0;
  font-size: 0.84rem;
}

.advantage-board {
  padding: 28px;
}

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: center;
}

.split.reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.soft-panel {
  padding: 28px;
  overflow: hidden;
}

.check-list {
  display: grid;
  gap: 11px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  color: #4b5664;
  font-weight: 700;
}

.image-panel {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #eefafa, #fff7f7);
  box-shadow: var(--soft-shadow);
}

.image-panel img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.quote-note {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 218px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--soft-shadow);
  color: #596473;
  font-size: 0.78rem;
  font-weight: 700;
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.plan-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 22px;
  min-height: 260px;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid rgba(88, 197, 189, 0.28);
  background: linear-gradient(135deg, #eafafa, #fff);
  overflow: hidden;
}

.plan-card.coral {
  border-color: rgba(242, 127, 135, 0.28);
  background: linear-gradient(135deg, #fff0f2, #fff);
}

.plan-card h3 {
  margin: 6px 0 10px;
  font-size: 1.35rem;
  line-height: 1.35;
}

.plan-card .label {
  color: var(--teal-strong);
  font-size: 0.82rem;
  font-weight: 900;
}

.plan-card.coral .label {
  color: var(--coral);
}

.price {
  margin: 8px 0;
  color: var(--teal-strong);
  font-size: 1.9rem;
  font-weight: 900;
}

.plan-card.coral .price {
  color: var(--coral);
}

.program-plan,
.pricing-plan {
  grid-template-columns: 150px 1fr;
  align-items: stretch;
}

.program-plan {
  grid-template-columns: 1fr;
  padding: 34px 36px 30px;
}

.program-plan .plan-copy {
  position: relative;
  z-index: 1;
}

.plan-corner-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 0 0 12px rgba(88, 197, 189, 0.12),
    0 18px 36px rgba(49, 79, 90, 0.1);
}

.program-plan.coral .plan-corner-badge {
  box-shadow:
    inset 0 0 0 12px rgba(242, 127, 135, 0.14),
    0 18px 36px rgba(49, 79, 90, 0.1);
}

.plan-corner-badge .icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.pricing-orb {
  display: grid;
  place-items: start center;
  padding-top: 24px;
}

.pricing-orb .icon {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
}

.pricing-ribbon {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.14);
  font-size: 0.78rem;
  font-weight: 900;
}

.pricing-plan.coral .pricing-ribbon {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.14);
}

.plan-subline {
  margin: 0 0 8px;
  color: #3b4855;
  font-size: 0.95rem;
  font-weight: 850;
}

.plan-summary {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
}

.plan-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

.plan-feature-row div {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
  text-align: center;
}

.plan-feature-row .icon {
  width: 38px;
  height: 38px;
  border-radius: 15px;
}

.plan-feature-row strong {
  font-size: 0.78rem;
  line-height: 1.35;
}

.plan-feature-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.plan-actions {
  display: grid;
  gap: 10px;
  max-width: 320px;
}

.plan-prop {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 202px;
  height: 178px;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  filter: drop-shadow(0 22px 30px rgba(45, 113, 122, 0.13));
}

.plan-prop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: multiply;
  transform: scale(1.16);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-card:hover .plan-prop img {
  transform: scale(1.21) translateY(-2px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, #eefafa, #fff, #fff7ed);
  box-shadow: var(--soft-shadow);
}

.stats.compact {
  margin-top: 28px;
}

.consult-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.consult-step {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-radius: 18px;
}

.consult-step .icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 30px rgba(49, 79, 90, 0.08);
}

.consult-step b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  margin-bottom: 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-size: 0.75rem;
}

.consult-step.coral b {
  background: var(--coral);
}

.consult-step.sky b {
  background: var(--sky);
}

.consult-step.sand b {
  background: var(--sand);
}

.consult-step h3 {
  margin: 0 0 6px;
  color: var(--teal-strong);
  font-size: 1rem;
}

.consult-step.coral h3 {
  color: var(--coral);
}

.consult-step.sky h3 {
  color: var(--sky);
}

.consult-step.sand h3 {
  color: #a77a45;
}

.consult-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.consult-arrow {
  margin-top: 34px;
  color: #aab6bc;
  font-size: 1.2rem;
}

.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 70px;
  border-right: 1px solid #e6eef0;
}

.stat:last-child {
  border-right: 0;
}

.stat strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.05;
}

.stat span {
  display: block;
  color: #69717d;
  font-size: 0.78rem;
  font-weight: 800;
}

.journey-section {
  position: relative;
}

.journey-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  margin-top: 36px;
}

.journey-node {
  position: relative;
  min-width: 0;
  min-height: 196px;
  padding: 18px 12px 20px;
  text-align: center;
}

.journey-node::before {
  content: "";
  position: absolute;
  inset: 34px 10px auto;
  height: 86px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(234, 250, 250, 0.95), rgba(255, 255, 255, 0.86));
  box-shadow: 0 20px 36px rgba(49, 79, 90, 0.08);
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}

.journey-node.coral::before {
  background: linear-gradient(145deg, rgba(255, 240, 242, 0.95), rgba(255, 255, 255, 0.88));
}

.journey-node.sky::before {
  background: linear-gradient(145deg, rgba(238, 248, 255, 0.96), rgba(255, 255, 255, 0.88));
}

.journey-node:hover::before {
  transform: translateY(-5px);
  box-shadow: 0 24px 42px rgba(49, 79, 90, 0.11);
}

.journey-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 23px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
}

.journey-node.coral .journey-num {
  background: var(--coral);
}

.journey-node.sky .journey-num {
  background: var(--sky);
}

.journey-node .icon {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  border-width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  animation: breathe 4.8s ease-in-out infinite;
}

.journey-node:nth-of-type(3n) .icon {
  animation-delay: 0.35s;
}

.journey-node:nth-of-type(5n) .icon {
  animation-delay: 0.7s;
}

.journey-node h3,
.journey-node p {
  position: relative;
  z-index: 1;
}

.journey-node h3 {
  margin: 0 0 7px;
  color: var(--teal-strong);
  font-size: 1rem;
  font-weight: 900;
}

.journey-node.coral h3 {
  color: var(--coral);
}

.journey-node.sky h3 {
  color: var(--sky);
}

.journey-node p {
  margin: 0 auto;
  max-width: 9.5em;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.6;
}

.journey-arrow {
  margin-top: 74px;
  color: #b6c4ca;
  font-size: 1.12rem;
  font-weight: 900;
}

.diagnosis-step-panel {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--soft-shadow);
}

.diagnosis-stepper {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.diagnosis-step {
  position: relative;
  min-height: 188px;
  text-align: center;
}

.diagnosis-step .step-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-size: 0.75rem;
  font-weight: 900;
}

.diagnosis-step.coral .step-dot {
  background: var(--coral);
}

.diagnosis-step.sky .step-dot {
  background: var(--sky);
}

.diagnosis-step.sand .step-dot {
  background: #e4a243;
}

.diagnosis-step .icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow:
    inset 0 0 0 12px rgba(88, 197, 189, 0.08),
    0 14px 28px rgba(49, 79, 90, 0.08);
}

.diagnosis-step h3 {
  margin: 0 0 5px;
  color: var(--teal-strong);
  font-size: 1rem;
}

.diagnosis-step.coral h3 {
  color: var(--coral);
}

.diagnosis-step.sky h3 {
  color: var(--sky);
}

.diagnosis-step.sand h3 {
  color: #a77a45;
}

.diagnosis-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.diagnosis-arrow {
  color: #b8c5ca;
  font-size: 1.25rem;
  font-weight: 700;
}

.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.rhythm-panel {
  padding: 30px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--teal-soft), rgba(255, 255, 255, 0.9));
  box-shadow: var(--soft-shadow);
}

.rhythm-panel.coral {
  border-color: rgba(242, 127, 135, 0.24);
  background: linear-gradient(135deg, var(--coral-soft), rgba(255, 255, 255, 0.9));
}

.rhythm-panel h3 {
  margin: 0;
  color: var(--teal-strong);
  font-size: 1.2rem;
}

.rhythm-panel.coral h3 {
  color: var(--coral);
}

.rhythm-panel p {
  margin: 4px 0 22px;
  color: var(--muted);
  font-weight: 750;
}

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

.rhythm-steps div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.rhythm-steps div:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 22px;
  color: #b8c6ca;
  font-weight: 900;
}

.rhythm-steps .icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
}

.rhythm-steps strong,
.rhythm-steps span {
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
}

.rhythm-steps span {
  color: var(--muted);
}

.rhythm-panel small {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  text-align: center;
  font-size: 0.84rem;
  font-weight: 750;
}

.engine-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1fr) minmax(220px, 0.8fr);
  align-items: center;
  gap: 28px;
}

.engine-list {
  padding: 22px;
}

.engine-list h3 {
  margin: 0 0 12px;
  color: var(--teal-strong);
}

.engine-list.coral h3 {
  color: var(--coral);
}

.engine-venn {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 260px;
  align-items: center;
  justify-items: center;
}

.engine-venn::before,
.engine-venn::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  opacity: 0.72;
}

.engine-venn::before {
  left: 38px;
  background: rgba(88, 197, 189, 0.26);
}

.engine-venn::after {
  right: 38px;
  background: rgba(242, 127, 135, 0.24);
}

.engine-venn span {
  position: relative;
  z-index: 2;
}

.engine-venn span:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.engine-venn b,
.engine-venn em {
  position: absolute;
  z-index: 2;
  bottom: 48px;
  color: #4c5865;
  font-size: 0.82rem;
  font-style: normal;
}

.engine-venn b {
  left: 82px;
}

.engine-venn em {
  right: 68px;
}

.formula-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.formula-card {
  min-height: 170px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.8), rgba(255, 255, 255, 0.9));
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.formula-card .icon {
  margin: 0 auto 12px;
}

.formula-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.formula-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.formula-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #596473;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 750;
}

.formula-card li::before {
  content: "•";
  margin-right: 7px;
  color: var(--teal-strong);
  font-weight: 900;
}

.formula-card.result {
  display: grid;
  align-content: center;
  justify-items: center;
  background: linear-gradient(135deg, rgba(255, 240, 242, 0.82), rgba(255, 255, 255, 0.94));
}

.formula-symbol {
  color: #9aa9af;
  font-size: 2rem;
  font-weight: 300;
}

.about-loop-section,
.about-proof-section {
  padding-top: 34px;
  padding-bottom: 34px;
}

.about-loop-panel,
.about-proof-panel {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(202, 228, 231, 0.78);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(234, 250, 250, 0.78), rgba(255, 255, 255, 0.94) 48%, rgba(255, 240, 242, 0.72)),
    linear-gradient(90deg, rgba(88, 197, 189, 0.08), rgba(115, 185, 223, 0.06), rgba(242, 127, 135, 0.07));
  box-shadow:
    0 28px 74px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.about-loop-panel {
  grid-template-columns: minmax(310px, 0.88fr) minmax(430px, 1.12fr);
  padding: clamp(30px, 4.6vw, 58px);
}

.about-proof-panel {
  grid-template-columns: minmax(430px, 1.08fr) minmax(310px, 0.92fr);
  padding: clamp(30px, 4.2vw, 54px);
}

.about-loop-panel::before,
.about-proof-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.03) 52%, rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.about-loop-copy,
.about-proof-copy,
.about-loop-visual,
.parent-report-visual {
  position: relative;
  z-index: 1;
}

.about-panel-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 14px;
  padding: 0 13px;
  border: 1px solid rgba(88, 197, 189, 0.22);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.about-loop-copy h3,
.about-proof-copy h3 {
  max-width: 13em;
  margin: 0;
  color: #253040;
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
  line-height: 1.26;
  font-weight: 950;
  letter-spacing: 0;
}

.about-loop-steps {
  display: grid;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
}

.about-loop-steps article {
  display: grid;
  grid-template-columns: 42px 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid rgba(222, 234, 237, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.06);
}

.about-loop-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.72rem;
  font-weight: 950;
}

.about-loop-steps article:nth-child(2) b {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.12);
}

.about-loop-steps article:nth-child(3) b {
  color: #4fa7d3;
  background: rgba(115, 185, 223, 0.13);
}

.about-loop-steps .icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.about-loop-steps strong,
.about-loop-steps span {
  display: block;
}

.about-loop-steps strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
}

.about-loop-steps span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.48;
}

.about-loop-visual {
  display: grid;
  place-items: center;
  min-height: clamp(390px, 38vw, 520px);
  margin: 0;
}

.loop-map {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
}

.loop-ring,
.loop-path,
.loop-node,
.loop-core {
  position: absolute;
}

.loop-ring {
  inset: 8%;
  border-radius: 999px;
}

.loop-ring.outer {
  border: 1px solid rgba(88, 197, 189, 0.28);
  box-shadow:
    inset 0 0 0 24px rgba(255, 255, 255, 0.24),
    0 28px 70px rgba(49, 79, 90, 0.08);
}

.loop-ring.inner {
  inset: 26%;
  border: 1px dashed rgba(242, 127, 135, 0.34);
}

.loop-path {
  inset: 14%;
  border-radius: 999px;
  background: conic-gradient(from -62deg, rgba(88, 197, 189, 0), rgba(88, 197, 189, 0.62), rgba(115, 185, 223, 0.48), rgba(242, 127, 135, 0.56), rgba(88, 197, 189, 0));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67%);
  animation: loopSpin 18s linear infinite;
}

.loop-path.path-two {
  inset: 22%;
  opacity: 0.62;
  animation-duration: 26s;
  animation-direction: reverse;
}

.loop-node {
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: clamp(118px, 10vw, 146px);
  min-height: 118px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 20px 46px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.loop-node .icon {
  width: 54px;
  height: 54px;
  border-radius: 19px;
}

.loop-node strong {
  color: #334050;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 950;
}

.loop-node.node-1 {
  left: 3%;
  top: 17%;
}

.loop-node.node-2 {
  right: 2%;
  top: 20%;
}

.loop-node.node-3 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.loop-core {
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(174px, 16vw, 220px);
  min-height: clamp(174px, 16vw, 220px);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 247, 0.9)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.16), rgba(242, 127, 135, 0.15));
  box-shadow:
    0 24px 58px rgba(49, 79, 90, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  text-align: center;
  transform: translate(-50%, -50%);
}

.loop-core .icon {
  width: 58px;
  height: 58px;
  margin-bottom: 9px;
  border-radius: 21px;
}

.loop-core strong,
.loop-core span {
  display: block;
}

.loop-core strong {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.1vw, 1.24rem);
  line-height: 1.35;
  font-weight: 950;
}

.loop-core span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.parent-report-visual {
  position: relative;
  min-height: clamp(400px, 36vw, 500px);
  margin: 0;
}

.report-device {
  position: absolute;
  left: 4%;
  top: 7%;
  z-index: 2;
  width: min(76%, 520px);
  min-height: 380px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(213, 230, 234, 0.92);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 253, 0.92)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.09), rgba(115, 185, 223, 0.08));
  box-shadow:
    0 28px 70px rgba(49, 79, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.report-device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 58px;
  height: 5px;
  border-radius: 999px;
  background: rgba(185, 205, 211, 0.48);
  transform: translateX(-50%);
}

.report-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
}

.report-head span,
.report-note span,
.report-float span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.report-head strong {
  color: #253040;
  font-size: clamp(1.18rem, 1.45vw, 1.6rem);
  line-height: 1.28;
  font-weight: 950;
}

.report-score-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 14px;
}

.report-score-row div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(222, 234, 237, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.report-score-row b,
.report-float b {
  display: block;
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.05;
  font-weight: 950;
}

.report-score-row span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 820;
}

.report-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 12px;
}

.chart-grid {
  fill: none;
  stroke: rgba(181, 202, 208, 0.52);
  stroke-width: 1;
}

.chart-area {
  fill: rgba(88, 197, 189, 0.12);
}

.chart-line {
  fill: none;
  stroke: url(#reportLineGradient);
  stroke-width: 8;
  stroke-linecap: round;
}

.report-note {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.9), rgba(255, 255, 255, 0.88));
}

.report-note strong {
  color: var(--teal-strong);
  font-size: 0.94rem;
  line-height: 1.35;
}

.report-float {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: 156px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 22px 48px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.report-float.card-a {
  right: 2%;
  top: 12%;
}

.report-float.card-b {
  right: 8%;
  bottom: 12%;
}

.report-float.card-b b {
  color: var(--coral);
}

.about-proof-copy {
  display: grid;
  align-content: center;
}

.about-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(22px, 3vw, 34px);
}

.about-proof-stats article {
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(222, 234, 237, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 16px 36px rgba(49, 79, 90, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.about-proof-stats .icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 16px;
}

.about-proof-stats strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.52rem, 2vw, 2rem);
  line-height: 1.05;
  font-weight: 950;
}

.about-proof-stats span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .about-loop-panel,
  .about-proof-panel {
    grid-template-columns: 1fr;
  }

  .about-loop-copy h3,
  .about-proof-copy h3 {
    max-width: 18em;
  }

  .parent-report-visual {
    min-height: 430px;
  }
}

@media (max-width: 760px) {
  .about-loop-section,
  .about-proof-section {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .about-loop-panel,
  .about-proof-panel {
    gap: 22px;
    padding: 24px;
    border-radius: 24px;
  }

  .about-loop-panel::before,
  .about-proof-panel::before {
    inset: 12px;
    border-radius: 18px;
    background-size: 34px 34px;
  }

  .about-loop-copy h3,
  .about-proof-copy h3 {
    font-size: 1.55rem;
  }

  .about-loop-steps article {
    grid-template-columns: 34px 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 72px;
    padding: 11px 12px;
  }

  .about-loop-steps b {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .about-loop-steps .icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .about-loop-visual {
    min-height: 350px;
  }

  .loop-map {
    width: min(100%, 350px);
  }

  .loop-node {
    width: 104px;
    min-height: 98px;
    padding: 10px 8px;
    border-radius: 18px;
  }

  .loop-node .icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .loop-node strong {
    font-size: 0.7rem;
  }

  .loop-core {
    width: 152px;
    min-height: 152px;
    padding: 16px;
  }

  .loop-core .icon {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 16px;
  }

  .loop-core strong {
    font-size: 0.94rem;
  }

  .loop-core span {
    font-size: 0.68rem;
  }

  .parent-report-visual {
    display: grid;
    gap: 12px;
    min-height: 0;
  }

  .report-device,
  .report-float {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
  }

  .report-device {
    min-height: 0;
    padding: 20px;
    border-radius: 24px;
  }

  .report-float {
    min-width: 0;
    padding: 14px 16px;
  }

  .about-proof-stats {
    gap: 10px;
  }

  .about-proof-stats article {
    min-height: 126px;
    padding: 15px;
    border-radius: 18px;
  }
}

@media (max-width: 520px) {
  .about-loop-panel,
  .about-proof-panel {
    padding: 20px;
  }

  .about-loop-steps article {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .about-loop-visual {
    min-height: 320px;
  }

  .loop-map {
    width: min(100%, 318px);
  }

  .loop-node {
    width: 92px;
    min-height: 88px;
  }

  .loop-node.node-1 {
    left: -1%;
    top: 13%;
  }

  .loop-node.node-2 {
    right: -1%;
    top: 14%;
  }

  .loop-node.node-3 {
    bottom: -2%;
  }

  .loop-core {
    width: 142px;
    min-height: 142px;
  }

  .report-head,
  .report-score-row,
  .about-proof-stats {
    grid-template-columns: 1fr;
  }

  .report-head {
    display: grid;
    gap: 4px;
  }
}

.data-source {
  margin: 14px auto 0;
  color: var(--muted);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 650;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.9fr);
  gap: 18px;
}

.report-summary {
  display: grid;
  grid-template-columns: minmax(145px, 0.8fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 22px;
}

.report-score {
  min-width: 0;
}

.report-subjects {
  min-width: 0;
}

.score-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.score-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  color: #4c5865;
  font-size: 0.82rem;
  font-weight: 800;
}

.score-track {
  height: 10px;
  border-radius: 999px;
  background: #edf1f2;
  overflow: hidden;
}

.score-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #7bd7cf);
  transform-origin: left center;
  animation: scoreFill 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.score-row.coral .score-track i {
  background: linear-gradient(90deg, #f28a91, #f7b2b7);
}

.score-row.sky .score-track i {
  background: linear-gradient(90deg, var(--sky), #a8d7ef);
}

.score-row.sand .score-track i {
  background: linear-gradient(90deg, var(--sand), #efd4a7);
}

.weak-top {
  background: linear-gradient(135deg, #fff6f6, #fff);
}

.weak-top-row {
  display: grid;
  grid-template-columns: 1fr minmax(90px, 1.3fr) 54px;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  color: #57616e;
  font-size: 0.86rem;
  font-weight: 800;
}

.weak-top-row i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f58b91, #f9bbc0);
}

.weak-top-row b {
  color: var(--coral);
  text-align: right;
  font-size: 1.1rem;
}

.coach-note p {
  position: relative;
  margin-top: 16px;
  color: #596473;
  font-weight: 650;
}

.coach-note p::before {
  content: "“";
  display: block;
  color: var(--coral);
  font-size: 2.4rem;
  line-height: 0.8;
}

.coach-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.coach-profile b,
.coach-profile span {
  display: block;
}

.coach-profile span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.coach-profile em {
  display: grid;
  place-items: center;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--coral);
  background: var(--coral-soft);
  font-style: normal;
}

.parent-visible .check-list {
  margin-bottom: 0;
}

.radar-tags,
.legend-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.chart-note {
  display: inline-flex;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: var(--teal-soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.donut-legend {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.donut-legend span {
  position: relative;
  padding-left: 14px;
}

.donut-legend span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--teal);
}

.donut-legend span:nth-child(2)::before {
  background: var(--sky);
}

.donut-legend span:nth-child(3)::before {
  background: #f4c56e;
}

.radar-tags {
  margin-top: 12px;
}

.radar-map {
  position: relative;
  height: 198px;
  margin-top: 8px;
}

.radar-map svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(220px, 72%);
  height: 176px;
  transform: translate(-50%, -46%);
}

.radar-ring,
.radar-axis {
  fill: none;
  stroke: rgba(115, 185, 223, 0.28);
  stroke-width: 1.5;
}

.radar-ring.inner {
  stroke: rgba(88, 197, 189, 0.24);
}

.radar-fill {
  fill: rgba(88, 197, 189, 0.26);
  stroke: var(--teal-strong);
  stroke-width: 3;
  filter: drop-shadow(0 8px 14px rgba(49, 170, 161, 0.16));
}

.radar-map span {
  position: absolute;
  color: #5f6b77;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.radar-map .top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  color: var(--teal-strong);
}

.radar-map .right {
  right: 0;
  top: 42%;
  color: var(--coral);
}

.radar-map .bottom-right {
  right: 11%;
  bottom: 0;
  color: var(--sky);
}

.radar-map .bottom-left {
  left: 12%;
  bottom: 0;
  color: var(--teal-strong);
}

.radar-map .left {
  left: 0;
  top: 42%;
  color: var(--sand);
}

.legend-row span {
  padding-left: 12px;
  position: relative;
}

.legend-row span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--teal);
}

.legend-row span:nth-child(2)::before {
  background: var(--sky);
}

.legend-row span:nth-child(3)::before {
  background: var(--coral);
}

.weakness-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  gap: 24px;
  align-items: stretch;
}

.diagnosis-advice-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 0.95fr 1.1fr;
  gap: 18px;
}

.advice-priority,
.advice-card {
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.advice-priority {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  background: #fff;
}

.advice-priority > div {
  display: grid;
  place-items: center;
  align-self: stretch;
  color: #fff;
  background: linear-gradient(180deg, var(--teal), var(--teal-strong));
}

.advice-priority .icon {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
}

.advice-priority h3 {
  margin: 0;
  padding: 0 22px;
  color: var(--teal-strong);
  font-size: 1.25rem;
  line-height: 1.45;
}

.advice-priority .check-list {
  grid-column: 2;
  margin: 0;
  padding: 0 22px 20px;
}

.advice-card {
  position: relative;
  padding: 24px;
  background: linear-gradient(135deg, var(--teal-soft), #fff);
}

.advice-card.daily {
  background: linear-gradient(135deg, var(--coral-soft), #fff);
}

.advice-card.curve {
  background: linear-gradient(135deg, var(--sky-soft), #fff);
}

.advice-card h3 {
  margin: 0 0 12px;
  color: var(--teal-strong);
  font-size: 1.02rem;
}

.advice-card.daily h3 {
  color: var(--coral);
}

.route-stack {
  display: grid;
  gap: 5px;
  color: #4d5966;
  font-size: 0.86rem;
  font-weight: 800;
}

.route-stack i {
  width: 1px;
  height: 18px;
  margin-left: 38px;
  background: #b7c7cc;
}

.advice-card.route .icon,
.advice-card.daily .icon {
  position: absolute;
  right: 22px;
  bottom: 22px;
  opacity: 0.72;
}

.advice-card.daily strong {
  display: block;
  margin-top: 22px;
  color: var(--ink);
  font-size: 1.45rem;
}

.advice-card.daily p,
.advice-card.curve p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.tiny-line {
  height: 74px;
  margin-top: 10px;
}

.tiny-line svg {
  width: 100%;
  height: 100%;
}

.tiny-line path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawLine 4.5s ease-in-out infinite;
}

.dashboard {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 18px;
}

.chart-card {
  padding: 22px;
  min-height: 220px;
}

.line-chart,
.bars,
.donut {
  margin-top: 16px;
  height: 132px;
}

.line-chart {
  position: relative;
  background:
    linear-gradient(#e9eff1 1px, transparent 1px) 0 0 / 100% 33%,
    linear-gradient(180deg, transparent, rgba(88, 197, 189, 0.1));
  border-radius: 12px;
}

.line-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.line-chart.small {
  height: 110px;
  margin-top: 0;
}

.line-chart path {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: drawLine 4.8s ease-in-out infinite;
}

.study-line {
  height: 150px;
  margin-top: 10px;
  padding: 14px 10px 22px 30px;
  background:
    linear-gradient(#eef2f3 1px, transparent 1px) 30px 16px / calc(100% - 38px) 26px no-repeat,
    linear-gradient(#eef2f3 1px, transparent 1px) 30px 42px / calc(100% - 38px) 26px no-repeat,
    linear-gradient(#eef2f3 1px, transparent 1px) 30px 68px / calc(100% - 38px) 26px no-repeat,
    linear-gradient(#eef2f3 1px, transparent 1px) 30px 94px / calc(100% - 38px) 26px no-repeat,
    linear-gradient(#eef2f3 1px, transparent 1px) 30px 120px / calc(100% - 38px) 26px no-repeat,
    linear-gradient(180deg, transparent, rgba(88, 197, 189, 0.08));
}

.study-line svg {
  inset: 8px 10px 20px 24px;
  width: calc(100% - 34px);
  height: calc(100% - 28px);
  overflow: visible;
}

.study-line .area {
  fill: url(#studyArea);
  stroke: none;
}

.study-line .line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: drawLine 4.8s ease-in-out infinite;
}

.study-line circle {
  fill: #fff;
  stroke: var(--teal-strong);
  stroke-width: 4;
}

.study-line text,
.study-line .axis-label,
.study-line .axis-y,
.study-line .axis-x {
  color: #667280;
  fill: #667280;
  font-size: 0.62rem;
  font-weight: 800;
}

.study-line .axis-label,
.study-line .axis-y {
  position: absolute;
  left: 8px;
}

.study-line .y-label {
  top: 8px;
}

.study-line .y12 {
  top: 27px;
}

.study-line .y9 {
  top: 53px;
}

.study-line .y6 {
  top: 78px;
}

.study-line .y3 {
  top: 103px;
}

.study-line .y0 {
  bottom: 22px;
}

.study-line .axis-x {
  position: absolute;
  right: 10px;
  bottom: 5px;
  left: 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}

.bars {
  display: grid;
  align-items: end;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 14px;
}

.bars span {
  display: block;
  height: var(--bar);
  border-radius: 999px 999px 6px 6px;
  background: var(--color);
  animation: barRise 3.2s ease-in-out infinite;
}

.donut {
  position: relative;
  display: grid;
  place-items: center;
}

.donut::before {
  content: "";
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: conic-gradient(var(--teal) 0 82%, #f4c56e 82% 92%, #ef9da4 92% 100%);
  mask: radial-gradient(circle, transparent 0 48%, #000 49%);
  animation: rotateSoft 8s linear infinite;
}

.donut strong {
  position: absolute;
  font-size: 2rem;
}

.comparison {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  align-items: stretch;
  gap: 22px;
}

.vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #b7c4c9;
  color: #39414c;
  background: #fff;
  font-weight: 900;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

.choice-feature {
  position: relative;
  text-align: center;
}

.choice-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 0;
  width: 1px;
  height: 74px;
  background: linear-gradient(180deg, transparent, rgba(183, 196, 201, 0.75), transparent);
}

.choice-feature .icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.66);
}

.choice-feature h3 {
  margin: 0 0 6px;
  font-size: 0.96rem;
}

.choice-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.faq details[open] {
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(49, 79, 90, 0.09);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 14px 18px;
  color: #404956;
  font-weight: 800;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "⌄";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.faq details[open] summary::after {
  transform: rotate(180deg);
  background: rgba(242, 127, 135, 0.12);
  color: var(--coral);
}

.faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  animation: faqAnswerIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq details.is-opening {
  animation: faqOpenGlow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq details:hover summary::after {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(49, 170, 161, 0.12);
}

.faq details[open]:hover summary::after {
  transform: rotate(180deg) translateY(1px);
}

.is-switching {
  animation: panelSwitchIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mock-dashboard-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.mock-dashboard {
  display: grid;
  grid-template-columns: 64px 1fr;
  overflow: hidden;
  min-height: 310px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.mock-dashboard.coral {
  background: linear-gradient(135deg, #fff7f8, #fff);
}

.mock-side {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  padding-top: 34px;
  background: linear-gradient(180deg, rgba(88, 197, 189, 0.14), rgba(255, 255, 255, 0.78));
}

.mock-dashboard.coral .mock-side {
  background: linear-gradient(180deg, rgba(242, 127, 135, 0.14), rgba(255, 255, 255, 0.78));
}

.mock-side span {
  width: 22px;
  height: 22px;
  border: 2px solid var(--teal);
  border-radius: 8px;
}

.mock-dashboard.coral .mock-side span {
  border-color: var(--coral);
}

.mock-main {
  padding: 24px;
}

.mock-badge {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: var(--teal-soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.mock-dashboard.coral .mock-badge {
  color: var(--coral);
  background: var(--coral-soft);
}

.mock-main h3 {
  margin: 0 0 16px;
  font-size: 1rem;
}

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

.mock-metrics div {
  min-height: 62px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(49, 79, 90, 0.08);
  color: #4c5865;
  font-size: 0.78rem;
  font-weight: 800;
}

.mock-lower {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  margin-top: 20px;
}

.mock-lower h4 {
  margin: 0 0 10px;
  font-size: 0.86rem;
}

.mini-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: #596473;
  font-size: 0.76rem;
  font-weight: 800;
}

.mini-progress {
  height: 9px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f3;
}

.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.mock-chart {
  position: relative;
}

.mock-trend-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(49, 79, 90, 0.11);
  font-size: 0.76rem;
  font-weight: 900;
}

.mock-trend-badge.teal {
  right: 16px;
  bottom: 12px;
}

.system-showcase {
  position: relative;
  overflow: hidden;
}

.system-showcase::before {
  content: "";
  position: absolute;
  inset: 18px 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(88, 197, 189, 0.11), transparent 32%),
    radial-gradient(circle at 88% 74%, rgba(115, 185, 223, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(234, 250, 250, 0.42), rgba(255, 240, 242, 0.28));
  opacity: 0.9;
}

.system-rhythm-showcase::before,
.system-data-showcase::before {
  background:
    radial-gradient(circle at 86% 14%, rgba(242, 127, 135, 0.12), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(88, 197, 189, 0.1), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(238, 248, 255, 0.46), rgba(255, 247, 248, 0.32));
}

.system-showcase-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.system-showcase-shell.reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
}

.system-showcase-shell.reverse .system-showcase-copy {
  order: 2;
}

.system-showcase-shell.reverse .system-visual {
  order: 1;
}

.system-showcase-copy {
  max-width: 420px;
}

.system-showcase .section-title {
  margin: 8px 0 14px;
  text-align: left;
  font-size: 2.42rem;
  line-height: 1.16;
  letter-spacing: 0;
}

.system-showcase-copy p {
  margin: 0;
  color: #566271;
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.9;
}

.system-role-section {
  position: relative;
  padding-block: clamp(36px, 5vw, 76px);
}

.system-role-shell {
  width: min(1420px, calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  padding: clamp(24px, 3.2vw, 42px);
  border: 1px solid rgba(205, 229, 231, 0.88);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 12%, rgba(80, 197, 187, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 253, 253, 0.92));
  box-shadow: 0 26px 76px rgba(34, 75, 82, 0.1);
}

.system-role-head {
  max-width: 780px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  text-align: center;
}

.system-role-head span {
  color: #19a99f;
  font-weight: 920;
}

.system-role-head h2 {
  margin: 8px 0 12px;
  color: #17283d;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: 0;
}

.system-role-head p {
  margin: 0;
  color: #5d6b79;
  font-weight: 760;
  line-height: 1.85;
}

.system-role-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.system-role-compare article {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(211, 232, 234, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 44px rgba(42, 81, 88, 0.07);
}

.system-role-compare article.coach {
  border-color: rgba(246, 177, 184, 0.72);
  background:
    radial-gradient(circle at 92% 4%, rgba(242, 127, 135, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.84);
}

.system-role-compare h3 {
  margin: 0 0 16px;
  color: #17283d;
  font-size: 1.42rem;
}

.system-role-compare ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-role-compare li {
  position: relative;
  padding-left: 20px;
  color: #4f6070;
  font-weight: 800;
  line-height: 1.65;
}

.system-role-compare li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35bdb5;
  box-shadow: 0 0 0 5px rgba(53, 189, 181, 0.12);
}

.system-role-compare .coach li::before {
  background: #f27f87;
  box-shadow: 0 0 0 5px rgba(242, 127, 135, 0.12);
}

.system-role-note {
  width: fit-content;
  margin: clamp(20px, 2.8vw, 34px) auto 0;
  padding: 12px 22px;
  border-radius: 999px;
  color: #157f78;
  background: rgba(232, 250, 248, 0.92);
  font-weight: 920;
  box-shadow: 0 14px 34px rgba(48, 148, 141, 0.12);
}

.system-kicker {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(49, 79, 90, 0.07);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
}

.system-proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.system-proof-pills span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(183, 196, 201, 0.52);
  border-radius: 999px;
  color: #52606d;
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 900;
}

.system-visual {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(210, 222, 226, 0.78);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at 12% 0, rgba(88, 197, 189, 0.13), transparent 34%);
  box-shadow:
    0 28px 70px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.system-visual::after {
  content: "";
  position: absolute;
  inset: 11px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
}

.system-window,
.rhythm-planner,
.engine-console,
.data-dashboard {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(217, 227, 230, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(49, 79, 90, 0.1);
}

.system-window-bar,
.data-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(226, 235, 237, 0.92);
  color: #3d4653;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 252, 0.9));
  font-size: 0.78rem;
  font-weight: 900;
}

.system-window-bar span,
.data-toolbar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.72);
}

.system-window-bar span:nth-child(2),
.data-toolbar span:nth-child(2) {
  background: rgba(242, 127, 135, 0.7);
}

.system-window-bar span:nth-child(3),
.data-toolbar span:nth-child(3) {
  background: rgba(115, 185, 223, 0.76);
}

.system-window-bar b,
.data-toolbar b {
  margin-left: 5px;
}

.journey-window {
  min-height: 430px;
}

.journey-route-board {
  position: relative;
  min-height: 324px;
  padding: 22px;
  background:
    linear-gradient(rgba(231, 240, 243, 0.52) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at 18% 20%, rgba(234, 250, 250, 0.94), transparent 36%),
    radial-gradient(circle at 82% 64%, rgba(238, 248, 255, 0.96), transparent 34%);
}

.journey-route-board svg {
  position: absolute;
  inset: 38px 38px 34px;
  width: calc(100% - 76px);
  height: calc(100% - 72px);
  overflow: visible;
}

.journey-route-board path {
  fill: none;
  stroke: rgba(88, 197, 189, 0.56);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 12 18;
  animation: routeFlow 12s linear infinite;
}

.journey-route-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 116px;
  min-height: 126px;
  place-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(197, 214, 219, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(49, 79, 90, 0.1);
  text-align: center;
}

.journey-route-point span {
  display: inline-grid;
  width: 34px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-size: 0.72rem;
  font-weight: 950;
}

.journey-route-point.coral span {
  background: var(--coral);
}

.journey-route-point.sky span {
  background: var(--sky);
}

.journey-route-point .icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(234, 250, 250, 0.72);
}

.journey-route-point strong,
.journey-route-point small {
  display: block;
}

.journey-route-point strong {
  color: #36404a;
  font-size: 0.78rem;
}

.journey-route-point small {
  color: #70808a;
  font-size: 0.68rem;
  font-weight: 850;
}

.journey-action-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.journey-action-strip div,
.rhythm-task-stack article,
.rhythm-coach-card,
.data-metric-grid article,
.data-chart-panel,
.data-subject-panel,
.data-note-card {
  border: 1px solid rgba(224, 233, 236, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(49, 79, 90, 0.07);
}

.journey-action-strip div {
  padding: 13px;
}

.journey-action-strip small,
.rhythm-planner small,
.data-dashboard small {
  display: block;
  color: #78858f;
  font-size: 0.68rem;
  font-weight: 850;
}

.journey-action-strip strong,
.rhythm-planner strong,
.data-dashboard strong {
  display: block;
  margin-top: 2px;
  color: #34404b;
  font-size: 0.88rem;
}

.rhythm-planner {
  min-height: 460px;
  padding: 20px;
}

.rhythm-planner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rhythm-planner-head strong {
  font-size: 1.34rem;
}

.rhythm-planner-head > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--coral);
  background: rgba(255, 240, 242, 0.92);
  font-size: 0.78rem;
  font-weight: 950;
}

.rhythm-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.rhythm-day {
  min-height: 138px;
  padding: 12px 10px;
  border: 1px solid rgba(213, 226, 229, 0.9);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(234, 250, 250, 0.74), rgba(255, 255, 255, 0.92));
  box-shadow: 0 10px 24px rgba(49, 79, 90, 0.07);
}

.rhythm-day.coral {
  background: linear-gradient(180deg, rgba(255, 240, 242, 0.78), rgba(255, 255, 255, 0.92));
}

.rhythm-day.sky {
  background: linear-gradient(180deg, rgba(238, 248, 255, 0.82), rgba(255, 255, 255, 0.92));
}

.rhythm-day.sand {
  background: linear-gradient(180deg, rgba(255, 246, 235, 0.88), rgba(255, 255, 255, 0.92));
}

.rhythm-day > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #fff;
  background: var(--teal);
  font-size: 0.82rem;
  font-weight: 950;
}

.rhythm-day.coral > span {
  background: var(--coral);
}

.rhythm-day.sky > span {
  background: var(--sky);
}

.rhythm-day.sand > span {
  background: #d8a86c;
}

.rhythm-day strong {
  font-size: 0.9rem;
}

.rhythm-day small {
  margin-top: 4px;
  line-height: 1.45;
}

.rhythm-live-row {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) 192px;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
}

.rhythm-ring {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  border-radius: 22px;
  background:
    radial-gradient(circle, #fff 0 47%, transparent 48%),
    conic-gradient(var(--teal) 0 74%, rgba(233, 240, 242, 0.95) 74% 100%);
  box-shadow: inset 0 0 0 1px rgba(210, 225, 228, 0.7), 0 14px 30px rgba(49, 79, 90, 0.09);
}

.rhythm-ring strong {
  color: var(--teal-strong);
  font-size: 2.2rem;
  line-height: 1;
}

.rhythm-ring span {
  color: #6f7c86;
  font-size: 0.78rem;
  font-weight: 900;
}

.rhythm-task-stack {
  display: grid;
  gap: 10px;
}

.rhythm-task-stack article {
  padding: 14px;
}

.rhythm-task-stack b,
.rhythm-task-stack span,
.rhythm-task-stack i {
  display: block;
}

.rhythm-task-stack b {
  color: #35414d;
  font-size: 0.9rem;
}

.rhythm-task-stack span {
  margin: 3px 0 10px;
  color: #6b7883;
  font-size: 0.78rem;
  font-weight: 820;
}

.rhythm-task-stack i {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.rhythm-coach-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
}

.rhythm-coach-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.rhythm-coach-card span {
  color: #65737e;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.55;
}

.engine-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 44%, rgba(88, 197, 189, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(250, 253, 253, 0.96), rgba(255, 255, 255, 0.92));
}

.engine-panel,
.engine-core,
.engine-result-strip {
  border: 1px solid rgba(220, 231, 234, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(49, 79, 90, 0.08);
}

.engine-panel {
  min-height: 286px;
  padding: 18px;
}

.engine-panel.coach {
  background: linear-gradient(180deg, rgba(255, 247, 248, 0.9), rgba(255, 255, 255, 0.92));
}

.engine-label {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
}

.engine-panel.coach .engine-label {
  color: var(--coral);
  background: rgba(255, 240, 242, 0.92);
}

.engine-panel .icon {
  width: 56px;
  height: 56px;
  margin: 24px 0 12px;
  border-radius: 18px;
}

.engine-panel strong {
  display: block;
  color: #33404b;
  font-size: 1.18rem;
}

.engine-panel small {
  display: block;
  margin-top: 12px;
  color: #667581;
  font-size: 0.78rem;
  font-weight: 850;
}

.engine-radar {
  width: 150px;
  height: 124px;
  margin: 8px auto 0;
}

.engine-radar svg {
  width: 100%;
  height: 100%;
}

.engine-radar polygon:first-child {
  fill: none;
  stroke: rgba(88, 197, 189, 0.24);
  stroke-width: 3;
}

.engine-radar polygon:last-child {
  fill: rgba(88, 197, 189, 0.25);
  stroke: var(--teal-strong);
  stroke-width: 3;
}

.coach-message-stack {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.coach-message-stack p {
  margin: 0;
  padding: 11px 12px;
  border-radius: 14px;
  color: #5c6975;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(237, 222, 224, 0.92);
  font-size: 0.76rem;
  font-weight: 790;
  line-height: 1.48;
}

.engine-core {
  position: relative;
  display: grid;
  min-height: 286px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 42%, rgba(234, 250, 250, 0.86) 43% 68%, rgba(255, 240, 242, 0.82) 69% 100%);
}

.engine-core span {
  display: inline-grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 14px 28px rgba(49, 170, 161, 0.22);
  font-size: 1rem;
  font-weight: 950;
}

.engine-core span:nth-of-type(2) {
  background: var(--coral);
  box-shadow: 0 14px 28px rgba(242, 127, 135, 0.22);
}

.engine-core i {
  display: block;
  width: 2px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(var(--teal), var(--coral));
}

.engine-core strong {
  margin-top: 6px;
  color: #2f3b47;
  font-size: 1rem;
}

.engine-core p {
  margin: 0;
  color: #697682;
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.5;
}

.engine-result-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(224, 233, 236, 0.86);
}

.engine-result-strip div {
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.9);
}

.engine-result-strip small {
  display: block;
  color: #76838e;
  font-size: 0.68rem;
  font-weight: 850;
}

.engine-result-strip strong {
  display: block;
  margin-top: 2px;
  color: #34404b;
  font-size: 1rem;
}

.data-dashboard {
  padding: 0 18px 18px;
}

.data-toolbar {
  margin: 0 -18px 18px;
  justify-content: space-between;
}

.data-toolbar div {
  display: flex;
  gap: 8px;
}

.data-toolbar em {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.9);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.data-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.data-metric-grid article {
  min-height: 98px;
  padding: 15px;
}

.data-metric-grid strong {
  color: #2f3c48;
  font-size: 1.3rem;
}

.data-metric-grid span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 950;
}

.data-dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.65fr);
  gap: 12px;
}

.data-chart-panel {
  min-height: 250px;
  padding: 16px;
}

.data-chart-panel > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.data-chart-panel svg {
  display: block;
  width: 100%;
  height: 184px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(233, 240, 243, 0.9) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(234, 250, 250, 0.3), rgba(255, 255, 255, 0.72));
}

.data-area {
  fill: rgba(88, 197, 189, 0.18);
}

.data-line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: drawLine 5.2s ease-in-out infinite;
}

.data-subject-panel {
  display: grid;
  align-content: center;
  gap: 13px;
  min-height: 250px;
  padding: 16px;
}

.data-subject-panel > strong {
  margin-bottom: 4px;
}

.data-subject {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: #5e6b77;
  font-size: 0.76rem;
  font-weight: 900;
}

.data-subject i {
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(229, 237, 239, 0.92);
}

.data-subject b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.data-subject.coral b {
  background: linear-gradient(90deg, var(--coral), #f3a5aa);
}

.data-subject.sky b {
  background: linear-gradient(90deg, var(--sky), #a8d6ef);
}

.data-subject em {
  font-style: normal;
}

.data-note-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
}

.data-note-card .icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.data-note-card span {
  display: block;
  margin-top: 3px;
  color: #65737f;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.55;
}

.consult-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 34px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(100deg, var(--teal), #6ed2c8);
  box-shadow: var(--shadow);
}

.consult-strip h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.consult-strip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
}

.consult-strip .btn {
  color: var(--teal-strong);
  background: #fff;
}

.concern-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.concern-card {
  position: relative;
  min-height: 74px;
  padding: 20px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.concern-card span {
  position: absolute;
  top: -11px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--coral);
  transform: translateX(-50%);
  font-size: 0.86rem;
  font-weight: 900;
}

.concern-card p {
  margin: 0;
  color: #69717d;
  font-size: 0.86rem;
  font-weight: 800;
}

.care-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.care-card {
  min-height: 260px;
  padding: 28px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.82), rgba(255, 255, 255, 0.92));
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.care-card .icon {
  margin: 0 auto 16px;
  width: 62px;
  height: 62px;
  border-radius: 22px;
}

.care-card h3 {
  margin: 0 0 8px;
  font-size: 1.16rem;
}

.care-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.care-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: #b9c7cc;
  font-weight: 900;
}

.reassure-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(88, 197, 189, 0.26);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--teal-soft), rgba(255, 255, 255, 0.86));
  box-shadow: var(--soft-shadow);
}

.reassure-card.coral {
  border-color: rgba(242, 127, 135, 0.26);
  background: linear-gradient(135deg, var(--coral-soft), rgba(255, 255, 255, 0.88));
}

.reassure-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.reassure-visual {
  position: relative;
  display: grid;
  align-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 230px;
  margin: 0;
  padding: 20px;
  background:
    radial-gradient(circle at 28% 20%, rgba(88, 197, 189, 0.16), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(234, 250, 250, 0.9));
}

.reassure-card.coral .reassure-visual,
.reassure-visual.child {
  background:
    radial-gradient(circle at 28% 20%, rgba(242, 127, 135, 0.16), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 240, 242, 0.92));
}

.mini-report-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 228, 232, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.mini-report-head span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--teal);
}

.reassure-visual article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(215, 228, 232, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 24px rgba(49, 79, 90, 0.07);
}

.reassure-visual small,
.reassure-visual span {
  color: #6d7a85;
  font-size: 0.7rem;
  font-weight: 850;
}

.reassure-visual strong {
  color: #31404c;
  font-size: 0.92rem;
}

.reassure-visual article i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 237, 240, 0.9);
}

.reassure-visual article i::after {
  content: "";
  display: block;
  width: var(--progress, 88%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.motivation-face {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  margin: 0 auto;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--coral), #f6aab0);
  box-shadow: 0 16px 30px rgba(242, 127, 135, 0.22);
}

.motivation-face span,
.motivation-face i {
  display: block;
  width: 40px;
  height: 18px;
  border: 3px solid #fff;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.motivation-face i {
  width: 50px;
  height: 18px;
  margin-top: -10px;
  opacity: 0.46;
}

.motivation-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.motivation-stars span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 0 7px rgba(242, 127, 135, 0.12);
}

.reassure-card > div {
  padding: 26px;
}

.reassure-card h3 {
  margin: 0;
  color: var(--teal-strong);
  font-size: 1.24rem;
}

.reassure-card.coral h3 {
  color: var(--coral);
}

.testimonial {
  min-height: 180px;
}

.testimonial::before {
  content: "“";
  color: var(--teal);
  font-size: 3rem;
  line-height: 0.8;
}

.testimonial .avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #596473;
  font-size: 0.82rem;
  font-weight: 700;
}

.testimonial .avatar img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(49, 79, 90, 0.12);
}

.testimonial-initial {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  box-shadow: 0 8px 18px rgba(49, 79, 90, 0.12);
  font-size: 0.9rem;
  font-weight: 950;
}

.testimonial-initial.coral {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.testimonial-initial.sky {
  background: linear-gradient(135deg, #7fc2e5, #5baed6);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}

.carousel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cfd8dc;
}

.carousel-dots span:first-child {
  background: var(--teal);
}

.reason-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
}

.reason-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 20px 24px;
}

.reason-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 0;
  width: 1px;
  height: calc(100% - 44px);
  background: linear-gradient(180deg, transparent, rgba(183, 196, 201, 0.7), transparent);
}

.reason-item .icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
}

.reason-item h3 {
  margin: 0 0 3px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.reason-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.connection-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.connection-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--teal-soft), rgba(255, 255, 255, 0.92));
  box-shadow: var(--soft-shadow);
}

.connection-card.coral {
  border-color: rgba(242, 127, 135, 0.24);
  background: linear-gradient(135deg, var(--coral-soft), rgba(255, 255, 255, 0.92));
}

.connection-card.sky {
  border-color: rgba(115, 185, 223, 0.26);
  background: linear-gradient(135deg, var(--sky-soft), rgba(255, 255, 255, 0.92));
}

.connection-card.sand {
  border-color: rgba(215, 173, 121, 0.28);
  background: linear-gradient(135deg, var(--sand-soft), rgba(255, 255, 255, 0.92));
}

.connection-card .icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 17px;
}

.connection-card h3 {
  margin: 0 0 2px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.connection-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.chain-arrow {
  color: #aab6bc;
  font-size: 1.35rem;
  font-weight: 500;
}

.avatar-dot {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--coral));
}

.product-lens {
  padding-top: 34px;
  padding-bottom: 34px;
}

.lens-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.1fr);
  gap: 24px 30px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(88, 197, 189, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 253, 253, 0.8)),
    radial-gradient(circle at var(--pointer-x, 76%) var(--pointer-y, 18%), rgba(88, 197, 189, 0.18), transparent 260px),
    radial-gradient(circle at 10% 92%, rgba(242, 127, 135, 0.12), transparent 270px);
  box-shadow:
    0 28px 70px rgba(44, 82, 92, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.lens-shell::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  pointer-events: none;
}

.lens-shell::after {
  content: "";
  position: absolute;
  right: -86px;
  top: -86px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 999px;
  animation: rotateSoft 18s linear infinite;
  pointer-events: none;
}

.lens-copy,
.lens-visual {
  position: relative;
  z-index: 1;
}

.lens-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.lens-copy h2 {
  max-width: 11em;
  margin: 0;
  font-size: clamp(1.7rem, 2.7vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.lens-copy p {
  max-width: 35em;
  margin: 16px 0 0;
  color: #596473;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.78;
}

.lens-tabs {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.lens-map-tabs {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
}

.lens-map-tabs::before,
.lens-map-tabs::after {
  content: "";
  position: absolute;
  left: calc(16.66% + 8px);
  right: calc(16.66% + 8px);
  top: 42px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
}

.lens-map-tabs::before {
  background: linear-gradient(90deg, rgba(88, 197, 189, 0.18), rgba(242, 127, 135, 0.2), rgba(115, 185, 223, 0.18));
}

.lens-map-tabs::after {
  right: auto;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--coral), var(--sky));
  box-shadow: 0 0 18px rgba(88, 197, 189, 0.22);
  transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-lens[data-active-lens="1"] .lens-map-tabs::after {
  width: 0;
}

.product-lens[data-active-lens="2"] .lens-map-tabs::after {
  width: calc(33.33% - 8px);
}

.product-lens[data-active-lens="3"] .lens-map-tabs::after {
  width: calc(66.66% - 16px);
}

.lens-tab {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 12px;
  border: 1px solid rgba(210, 224, 228, 0.92);
  border-radius: 16px;
  color: #45515e;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.lens-node {
  grid-template-columns: auto;
  align-content: start;
  min-height: 174px;
  padding: 16px;
  border-color: rgba(210, 224, 228, 0.74);
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.52), transparent 120px),
    rgba(255, 255, 255, 0.74);
  text-align: left;
  isolation: isolate;
}

.lens-node::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(88, 197, 189, 0.22), rgba(255, 255, 255, 0.1), rgba(115, 185, 223, 0.18));
  opacity: 0;
  transition: opacity 180ms ease;
}

.lens-node::after {
  content: "";
  position: absolute;
  top: 23px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(88, 197, 189, 0.32);
  opacity: 0.42;
  animation: nodePulse 2.8s ease-in-out infinite;
}

.lens-node.node-2::after {
  background: var(--coral);
  animation-delay: 0.3s;
}

.lens-node.node-3::after {
  background: var(--sky);
  animation-delay: 0.6s;
}

.lens-tab:hover,
.lens-tab.is-active {
  transform: translateY(-4px);
  border-color: rgba(88, 197, 189, 0.44);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 32px rgba(49, 79, 90, 0.08);
}

.lens-node:hover::before,
.lens-node.is-active::before {
  opacity: 1;
}

.lens-node.is-active {
  box-shadow:
    0 18px 38px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.lens-tab > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.76rem;
  font-weight: 900;
}

.lens-tab:nth-child(2).is-active > span,
.lens-tab:nth-child(2):hover > span {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.lens-tab:nth-child(3).is-active > span,
.lens-tab:nth-child(3):hover > span {
  background: linear-gradient(135deg, #7fc2e5, #5baed6);
}

.lens-node-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 8px;
  border: 1px solid rgba(88, 197, 189, 0.22);
  border-radius: 18px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  font-style: normal;
}

.lens-node.node-2 .lens-node-icon {
  border-color: rgba(242, 127, 135, 0.22);
  color: var(--coral);
  background: rgba(255, 242, 243, 0.72);
}

.lens-node.node-3 .lens-node-icon {
  border-color: rgba(115, 185, 223, 0.24);
  color: var(--sky);
  background: rgba(237, 248, 255, 0.76);
}

.lens-node-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lens-tab strong {
  min-width: 0;
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.34;
}

.lens-tab small {
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.lens-node.node-2 small {
  color: var(--coral);
}

.lens-node.node-3 small {
  color: #4a9fca;
}

.lens-takeaways {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1.48fr);
  gap: 16px;
  margin-top: 0;
  padding: 18px;
  border: 1px solid rgba(88, 197, 189, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(246, 253, 253, 0.68)),
    radial-gradient(circle at 10% 0%, rgba(88, 197, 189, 0.12), transparent 150px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.lens-takeaways > strong {
  display: block;
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
}

.lens-takeaways > p {
  max-width: none;
  margin: 8px 0 0;
  color: #4e5a67;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.72;
}

.lens-takeaway-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.lens-takeaway-list span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid rgba(222, 234, 237, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.lens-takeaway-list b {
  color: var(--ink);
  font-size: 0.78rem;
}

.lens-takeaway-list em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 680;
  line-height: 1.58;
}

.lens-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
  min-height: 330px;
}

.lens-stage {
  position: relative;
  min-height: 100%;
}

.lens-figure {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--teal-soft), #fff6f7);
  box-shadow: 0 18px 40px rgba(49, 79, 90, 0.1);
}

.lens-stage-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 32px rgba(49, 79, 90, 0.12);
  backdrop-filter: blur(14px);
  animation: captionFloat 5.8s ease-in-out infinite;
}

.lens-stage-caption span {
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 950;
}

.lens-stage-caption strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.42;
}

.lens-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 66%, rgba(255, 255, 255, 0.48)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.38), transparent 160px);
  pointer-events: none;
}

.lens-figure img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.07) contrast(1.03);
  transform: scale(1.02);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lens-stage.has-scenario {
  min-height: 360px;
}

.lens-scenario {
  position: relative;
  display: grid;
  min-height: 100%;
  margin: 0;
  padding: 58px 18px 86px;
  overflow: hidden;
  border: 1px solid rgba(210, 224, 228, 0.9);
  border-radius: 24px;
  background:
    linear-gradient(rgba(233, 242, 244, 0.58) 1px, transparent 1px) 0 46px / 100% 44px,
    radial-gradient(circle at 18% 18%, rgba(88, 197, 189, 0.18), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(242, 127, 135, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(49, 79, 90, 0.1);
}

.scenario-window-bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(218, 231, 234, 0.9);
  background: rgba(255, 255, 255, 0.88);
}

.scenario-window-bar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.scenario-window-bar span:nth-child(2) {
  background: var(--coral);
}

.scenario-window-bar span:nth-child(3) {
  background: var(--sky);
}

.scenario-window-bar b {
  margin-left: 4px;
  color: #34404b;
  font-size: 0.78rem;
}

.scenario-window-bar em {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.9);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.scenario-diagnosis-grid,
.scenario-program-columns,
.scenario-coach-room,
.scenario-parent-grid {
  display: grid;
  gap: 12px;
}

.scenario-diagnosis-grid {
  grid-template-columns: 1fr 0.92fr 0.92fr;
  align-items: stretch;
}

.scenario-question-card,
.scenario-scan-card,
.scenario-report-card,
.scenario-program-columns article,
.scenario-task-panel,
.scenario-chat-panel,
.scenario-coach-status,
.scenario-parent-report,
.scenario-parent-message,
.scenario-parent-loop,
.scenario-metric-row article,
.scenario-recommend-strip {
  border: 1px solid rgba(215, 228, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 26px rgba(49, 79, 90, 0.08);
}

.lens-scenario small,
.lens-scenario span {
  color: #687783;
  font-size: 0.72rem;
  font-weight: 850;
}

.lens-scenario strong {
  color: #303b47;
  line-height: 1.36;
}

.scenario-question-card,
.scenario-scan-card,
.scenario-report-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
  padding: 16px;
}

.scenario-question-card div,
.scenario-report-card {
  align-content: start;
}

.scenario-question-card div {
  display: grid;
  gap: 7px;
  margin-top: 4px;
}

.scenario-question-card div span,
.scenario-report-card > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(234, 250, 250, 0.92);
}

.scenario-report-card > span.hot {
  color: var(--coral);
  background: rgba(255, 240, 242, 0.96);
}

.scenario-scan-card {
  place-items: center;
  align-content: center;
  text-align: center;
}

.scenario-scan-card .icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.scan-beam {
  position: absolute;
  inset: 46px auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  animation: scanDown 3.8s ease-in-out infinite;
}

.scenario-progress-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.scenario-progress-track span {
  min-height: 38px;
  padding: 10px;
  border: 1px solid rgba(220, 232, 235, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

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

.scenario-program-columns article {
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 18px;
}

.scenario-program-columns article:nth-child(2) {
  background: linear-gradient(180deg, rgba(255, 240, 242, 0.72), rgba(255, 255, 255, 0.88));
}

.scenario-program-columns .icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.scenario-program-columns i,
.scenario-task-panel i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 235, 238, 0.92);
}

.scenario-program-columns i::after,
.scenario-task-panel i::after {
  content: "";
  display: block;
  width: var(--score, 68%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.scenario-recommend-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
}

.scenario-recommend-strip b {
  flex: 0 0 auto;
  color: var(--teal-strong);
  font-size: 0.84rem;
}

.scenario-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scenario-metric-row article {
  min-height: 92px;
  padding: 14px;
}

.scenario-metric-row strong {
  display: block;
  margin: 3px 0;
  color: var(--teal-strong);
  font-size: 1.42rem;
}

.scenario-chart-board {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(215, 228, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.scenario-chart-board svg {
  width: 100%;
  height: 156px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(231, 240, 243, 0.86) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(234, 250, 250, 0.3), rgba(255, 255, 255, 0.7));
}

.scenario-chart-area {
  fill: rgba(88, 197, 189, 0.16);
}

.scenario-chart-line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: drawLine 5s ease-in-out infinite;
}

.scenario-chart-board div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: #5f6c78;
  font-size: 0.74rem;
  font-weight: 900;
}

.scenario-chart-board div i {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.scenario-coach-room {
  grid-template-columns: 0.9fr 1.1fr;
}

.scenario-task-panel,
.scenario-chat-panel,
.scenario-coach-status {
  padding: 16px;
}

.scenario-task-panel {
  display: grid;
  gap: 8px;
  min-height: 176px;
}

.scenario-task-panel strong {
  font-size: 1.28rem;
}

.scenario-chat-panel {
  display: grid;
  gap: 10px;
}

.scenario-chat-panel p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  color: #566371;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(223, 233, 236, 0.9);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.55;
}

.scenario-chat-panel p:nth-child(2) {
  color: #8a4d57;
  background: rgba(255, 240, 242, 0.82);
}

.scenario-coach-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scenario-coach-status .icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.scenario-parent-grid {
  grid-template-columns: 1.05fr 0.95fr;
}

.scenario-parent-report,
.scenario-parent-message,
.scenario-parent-loop {
  padding: 16px;
}

.scenario-parent-report {
  display: grid;
  gap: 10px;
}

.scenario-parent-report div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(234, 250, 250, 0.78);
}

.scenario-parent-report b {
  color: var(--teal-strong);
}

.scenario-parent-message {
  display: grid;
  align-content: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 240, 242, 0.74), rgba(255, 255, 255, 0.88));
}

.scenario-parent-message p {
  margin: 0;
  color: #566371;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.6;
}

.scenario-parent-loop {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.scenario-parent-loop span {
  min-height: 42px;
  padding: 12px;
  border-radius: 15px;
  color: #fff;
  background: var(--teal);
}

.scenario-parent-loop span:nth-of-type(2) {
  background: var(--coral);
}

.scenario-parent-loop span:nth-of-type(3) {
  background: var(--sky);
}

.scenario-parent-loop i {
  height: 2px;
  border-radius: 999px;
  background: rgba(176, 194, 199, 0.86);
}

.product-lens[data-active-lens="2"] .lens-scenario {
  border-color: rgba(242, 127, 135, 0.34);
}

.product-lens[data-active-lens="3"] .lens-scenario {
  border-color: rgba(115, 185, 223, 0.34);
}

.product-lens[data-lens="home"] .lens-figure img,
.product-lens[data-lens="about"] .lens-figure img,
.product-lens[data-lens="progress"] .lens-figure img,
.product-lens[data-lens="diagnosis"] .lens-figure img,
.product-lens[data-lens="system"] .lens-figure img,
.product-lens[data-lens="coach"] .lens-figure img,
.product-lens[data-lens="pricing"] .lens-figure img,
.product-lens[data-lens="parent"] .lens-figure img {
  object-position: right center;
}

.lens-shell:hover .lens-figure img {
  transform: scale(1.055);
}

.product-lens[data-active-lens="2"] .lens-shell {
  border-color: rgba(242, 127, 135, 0.28);
}

.product-lens[data-active-lens="3"] .lens-shell {
  border-color: rgba(115, 185, 223, 0.3);
}

.lens-dashboard {
  display: grid;
  align-content: stretch;
  gap: 14px;
}

.lens-detail {
  min-height: 214px;
  padding: 22px;
  border: 1px solid rgba(88, 197, 189, 0.22);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
  animation: faqAnswerIn 240ms ease both;
}

.lens-detail[hidden] {
  display: none;
}

.lens-detail > span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.74rem;
  font-weight: 900;
}

.product-lens[data-active-lens="2"] .lens-detail > span {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.product-lens[data-active-lens="3"] .lens-detail > span {
  background: linear-gradient(135deg, #7fc2e5, #5baed6);
}

.lens-detail h3 {
  margin: 14px 0 8px;
  font-size: 1.12rem;
  line-height: 1.35;
}

.lens-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.65;
}

.lens-detail strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 18px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.14);
  font-size: 0.82rem;
}

.product-lens[data-active-lens="2"] .lens-detail strong {
  color: #e8606d;
  background: rgba(242, 127, 135, 0.14);
}

.product-lens[data-active-lens="3"] .lens-detail strong {
  color: #4a9fca;
  background: rgba(115, 185, 223, 0.14);
}

.lens-proof-grid {
  position: relative;
  display: grid;
  gap: 10px;
}

.lens-proof-grid::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(88, 197, 189, 0.18), rgba(242, 127, 135, 0.18), rgba(115, 185, 223, 0.18));
}

.lens-proof-grid button {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 34px;
  border: 0;
  border-radius: 14px;
  color: #43505d;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(222, 234, 237, 0.78);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 850;
  text-align: left;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.lens-proof-grid button:hover,
.lens-proof-grid button.is-active {
  transform: translateX(4px);
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(88, 197, 189, 0.3),
    0 12px 24px rgba(49, 79, 90, 0.08);
}

.lens-proof-grid button:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.34);
  outline-offset: 2px;
}

.lens-proof-grid button::before {
  content: "";
  position: absolute;
  left: 13px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 7px rgba(88, 197, 189, 0.12);
}

.lens-proof-grid button.is-active::before {
  animation: nodePulse 2.2s ease-in-out infinite;
}

.lens-proof-grid button:nth-child(2)::before {
  background: var(--coral);
  box-shadow: 0 0 0 7px rgba(242, 127, 135, 0.12);
}

.lens-proof-grid button:nth-child(3)::before {
  background: var(--sky);
  box-shadow: 0 0 0 7px rgba(115, 185, 223, 0.12);
}

.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: var(--content-max);
  margin: 0 auto 42px;
  padding: 30px 42px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(110deg, #178f8a, #2aa39b 44%, #df6675);
  overflow: hidden;
}

.cta-band.has-media {
  grid-template-columns: minmax(0, 1fr) auto 280px;
  padding-right: 18px;
}

.cta-band.has-mark {
  padding-left: 124px;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: 50px;
  top: -40px;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  animation: pulseRing 4s ease-out infinite;
}

.cta-band h2 {
  margin: 0 0 4px;
  font-size: 1.65rem;
  line-height: 1.3;
}

.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}

.cta-band small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 750;
}

.cta-band .btn {
  position: relative;
  z-index: 1;
  color: var(--teal-strong);
  background: #fff;
  box-shadow: 0 16px 32px rgba(42, 113, 121, 0.18);
}

.cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-actions .btn.secondary {
  color: #6b7480;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.86);
}

.cta-figure {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 100%;
  max-height: 132px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 16px 24px rgba(42, 113, 121, 0.16));
}

.cta-programs .cta-figure {
  height: 146px;
  max-height: 146px;
  border-radius: 20px 20px 0 20px;
  object-fit: cover;
  object-position: 28% 20%;
  mix-blend-mode: screen;
}

.cta-mark {
  position: absolute;
  left: 42px;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.94);
}

.cta-mark .icon {
  width: 66px;
  height: 66px;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, 0.08),
    0 18px 32px rgba(42, 113, 121, 0.16);
  animation: breathe 4s ease-in-out infinite;
}

.footer {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(120px, 1fr));
  gap: 24px;
  padding: 42px var(--page-gutter);
  border-top: 1px solid var(--line);
  color: #69717d;
  background: #fff;
  font-size: 0.82rem;
}

.footer-about {
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(150px, 1fr));
}

.footer h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 0.92rem;
}

.footer p,
.footer a {
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
}

.footer .brand {
  margin-bottom: 12px;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(232, 238, 240, 0.9);
  color: #66727d;
  font-size: 0.76rem;
}

.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.footer-legal a,
.footer-social a {
  margin: 0;
}

.footer-legal a + a {
  position: relative;
}

.footer-legal a + a::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 1px;
  height: 0.9em;
  background: #d7e0e3;
  transform: translateY(-50%);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-social a {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: #68727d;
  background: #f4f8f9;
  font-size: 0.72rem;
  font-weight: 900;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.footer-social a:hover {
  color: var(--teal-strong);
  background: var(--teal-soft);
  transform: translateY(-2px);
}

@keyframes imageFloat {
  0%,
  100% {
    transform: translateY(0) scale(1.03);
  }
  50% {
    transform: translateY(-8px) scale(1.04);
  }
}

@keyframes imageFloatTight {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1);
  }
}

@keyframes imageFloatCoach {
  0%,
  100% {
    transform: translateY(-26px) scale(1);
  }
  50% {
    transform: translateY(-33px) scale(1);
  }
}

@keyframes widgetFloat {
  0%,
  100% {
    transform: translate3d(var(--hero-widget-x), var(--hero-widget-y), 0);
  }
  50% {
    transform: translate3d(var(--hero-widget-x), calc(var(--hero-widget-y) - 10px), 0);
  }
}

@keyframes shineSweep {
  0%,
  100% {
    transform: translateX(-34%) skewX(-17deg);
  }
  50% {
    transform: translateX(30%) skewX(-17deg);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.72);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes softBlob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    border-radius: 48% 52% 58% 42%;
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
    border-radius: 58% 42% 44% 56%;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.28;
    transform: scaleY(0.88);
  }
  50% {
    opacity: 0.72;
    transform: scaleY(1.05);
  }
}

@keyframes drawLine {
  0% {
    stroke-dashoffset: 460;
    opacity: 0.5;
  }
  45%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -460;
    opacity: 0.5;
  }
}

@keyframes routeFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -120;
  }
}

@keyframes scanDown {
  0%,
  100% {
    transform: translateY(16px);
    opacity: 0.16;
  }

  50% {
    transform: translateY(138px);
    opacity: 0.72;
  }
}

@keyframes scan {
  0%,
  100% {
    transform: translateX(-38px) rotate(-8deg);
    opacity: 0.08;
  }
  50% {
    transform: translateX(52px) rotate(-8deg);
    opacity: 0.4;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(88, 197, 189, 0.38);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 16px rgba(88, 197, 189, 0);
  }
}

@keyframes titleDots {
  0%,
  100% {
    opacity: 0.48;
    filter: saturate(0.9);
  }
  50% {
    opacity: 0.82;
    filter: saturate(1.15);
  }
}

@keyframes barRise {
  0%,
  100% {
    transform: scaleY(0.72);
    transform-origin: bottom;
  }
  50% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes rotateSoft {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loopSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scoreFill {
  from {
    transform: scaleX(0.18);
    opacity: 0.62;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes faqAnswerIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes faqOpenGlow {
  0% {
    box-shadow: 0 0 0 rgba(49, 170, 161, 0);
  }
  42% {
    box-shadow: 0 16px 34px rgba(49, 170, 161, 0.13);
  }
  100% {
    box-shadow: 0 12px 26px rgba(49, 79, 90, 0.09);
  }
}

@keyframes panelSwitchIn {
  from {
    opacity: 0;
    filter: blur(4px);
    translate: 0 8px;
  }
  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}

@keyframes globalHeroChildIn {
  from {
    opacity: 0;
    filter: blur(6px);
    translate: 0 18px;
  }
  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}

@keyframes badgeSheen {
  0%,
  58% {
    transform: translateX(-115%);
  }
  76%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes badgePing {
  0% {
    transform: scale(0.72);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes commandSheen {
  0%,
  62% {
    transform: translateX(-120%);
  }
  82%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes previewFloatA {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg);
  }
  50% {
    transform: translateY(-8px) rotate(-0.4deg);
  }
}

@keyframes previewFloatB {
  0%,
  100% {
    transform: translateY(0) rotate(2.4deg);
  }
  50% {
    transform: translateY(7px) rotate(1.2deg);
  }
}

@keyframes previewFloatC {
  0%,
  100% {
    transform: translateY(0) rotate(-1.6deg);
  }
  50% {
    transform: translateY(-6px) rotate(-2.4deg);
  }
}

@keyframes captionFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@media (min-width: 941px) and (max-width: 1599px) {
  :root {
    --page-gutter: 30px;
    --radius: 18px;
    --header-height: 62px;
  }

  body {
    line-height: 1.55;
  }

  .site-header {
    height: 62px;
  }

  .brand {
    min-width: 126px;
    gap: 8px;
  }

  .brand-logo {
    width: 126px;
  }

  .site-nav {
    gap: clamp(10px, 1.25vw, 16px);
    font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  }

  .site-nav a {
    padding: 19px 0;
  }

  .site-nav a::after {
    bottom: 10px;
  }

  .btn {
    min-height: 36px;
    padding: 0 15px;
    font-size: 0.78rem;
  }

  .btn.small {
    min-height: 34px;
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .hero {
    min-height: 370px;
    grid-template-columns: minmax(310px, 0.86fr) minmax(430px, 1.14fr);
    padding: 24px var(--page-gutter) 20px;
  }

  .eyebrow {
    margin-bottom: 12px;
    padding: 5px 12px;
    font-size: 0.72rem;
  }

  .hero h1 {
    max-width: 470px;
    font-size: 2.36rem;
    line-height: 1.16;
  }

  .hero-copy {
    max-width: 430px;
    margin-top: 10px;
    font-size: 0.8rem;
  }

  .hero-taste-badge {
    min-height: 30px;
    margin-bottom: 12px;
    padding-inline: 10px 12px;
    font-size: 0.68rem;
  }

  .hero-flow-command {
    width: min(100%, 430px);
    min-height: 40px;
    margin-top: 14px;
    padding: 6px 12px;
    gap: 9px;
  }

  .hero-flow-kicker {
    min-height: 26px;
    padding-inline: 8px;
    font-size: 0.6rem;
  }

  .hero-flow-track {
    gap: 7px;
    font-size: 0.66rem;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 15px;
  }

  .hero-note {
    margin-top: 8px;
    font-size: 0.74rem;
  }

  .hero-social {
    gap: 8px;
    margin-top: 12px;
    font-size: 0.72rem;
  }

  .hero-social img {
    width: 104px;
  }

  .hero-points {
    gap: 14px;
    margin-top: 16px;
  }

  .hero-point {
    width: 105px;
    gap: 5px;
    font-size: 0.68rem;
  }

  .icon {
    width: 38px;
    height: 38px;
    border-radius: 15px;
  }

  .icon svg {
    width: 21px;
    height: 21px;
  }

  .hero-visual {
    min-height: 292px;
  }

  .photo-card {
    top: 4px;
    width: min(52vw, 520px);
    height: 308px;
    border-radius: 0 0 0 44px;
  }

  .page-progress .hero,
  .page-coach .hero {
    min-height: 470px;
    padding-left: 58px;
    padding-top: 36px;
    padding-bottom: 34px;
  }

  .page-progress .hero-visual,
  .page-coach .hero-visual {
    min-height: 372px;
  }

  .page-progress .photo-card,
  .page-coach .photo-card {
    height: 390px;
    width: min(54vw, 560px);
  }

  .page-coach .photo-card {
    right: -6px;
    top: -102px;
    width: min(60vw, 612px);
    height: 474px;
    border-radius: 0;
  }

  .page-progress .hero {
    min-height: 540px;
  }

  .page-progress .hero-visual {
    min-height: 438px;
  }

  .page-progress .photo-card {
    height: 455px;
    right: -4px;
    top: -24px;
    width: min(56vw, 570px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-progress .photo-card::after {
    background: linear-gradient(180deg, transparent 80%, rgba(255, 255, 255, 0.4));
  }

  .photo-card img {
    transform: translateY(0) scale(1);
    animation-name: imageFloatTight;
  }

  .hero-widget {
    min-width: 112px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .hero-widget strong {
    font-size: 1.08rem;
  }

  .hero-widget span,
  .hero-widget .widget-label {
    font-size: 0.68rem;
  }

  .hero-widget .widget-detail {
    max-width: 10.5em;
    font-size: 0.58rem;
  }

  .widget-line {
    width: 118px;
    height: 42px;
  }

  .hero-widget .widget-donut {
    width: 76px;
    height: 76px;
  }

  .widget-mini-legend {
    gap: 2px;
  }

  .widget-mini-legend span {
    padding-left: 10px;
    font-size: 0.56rem;
  }

  .widget-bars {
    width: 118px;
    height: 54px;
    gap: 7px;
  }

  .section {
    padding: 20px var(--page-gutter);
  }

  .section.flush-top {
    padding-top: 14px;
  }

  .section-title {
    margin-bottom: 12px;
    font-size: 1.22rem;
    letter-spacing: 0.03em;
  }

  .page-about .section-title:not([style*="left"]),
  .page-programs .section-title:not([style*="left"]) {
    display: block;
  }

  .page-about .section-title:not([style*="left"])::before,
  .page-about .section-title:not([style*="left"])::after,
  .page-programs .section-title:not([style*="left"])::before,
  .page-programs .section-title:not([style*="left"])::after {
    width: 24px;
    height: 6px;
  }

  .page-about .section-title:not([style*="left"])::before,
  .page-programs .section-title:not([style*="left"])::before {
    margin-right: 10px;
  }

  .page-about .section-title:not([style*="left"])::after,
  .page-programs .section-title:not([style*="left"])::after {
    margin-left: 10px;
  }

  .page-parent .section-title:not([style*="left"]) {
    display: block;
  }

  .page-parent .section-title:not([style*="left"])::before,
  .page-parent .section-title:not([style*="left"])::after {
    width: 42px;
  }

  .page-parent .section-title:not([style*="left"])::before {
    margin-right: 12px;
  }

  .page-parent .section-title:not([style*="left"])::after {
    margin-left: 12px;
  }

  .section-subtitle {
    margin: -6px auto 14px;
    font-size: 0.76rem;
  }

  .section-kicker {
    margin-bottom: 9px;
  }

  .grid,
  .plans,
  .fit-pair,
  .comparison,
  .metric-row,
  .dashboard,
  .report-grid,
  .weakness-layout,
  .diagnosis-advice-grid,
  .rhythm-grid,
  .engine-layout,
  .coach-role-grid,
  .mock-dashboard-row,
  .concern-row,
  .care-flow,
  .connection-chain,
  .choice-row,
  .reason-strip {
    gap: 10px;
  }

  .card {
    min-height: 100px;
    padding: 14px;
  }

  .card h3 {
    margin: 10px 0 6px;
    font-size: 0.98rem;
  }

  .card p,
  .card li {
    font-size: 0.78rem;
  }

  .card h3,
  .card p,
  .card li,
  .feature-panel h3,
  .feature-panel p,
  .hero-point strong,
  .hero-point span {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .card ul {
    gap: 5px;
    margin-top: 10px;
  }

  .advantage-card {
    min-height: 136px;
    padding: 15px;
  }

  .advantage-head .card-number {
    font-size: 1.72rem;
  }

  .advantage-head .icon {
    width: 42px;
    height: 42px;
  }

  .mini-cards .card {
    min-height: 86px;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 14px;
  }

  .mini-cards .card h3 {
    font-size: 0.88rem;
  }

  .feature-panel {
    padding: 14px 10px;
  }

  .feature-panel .icon {
    margin-bottom: 10px;
  }

  .feature-panel h3 {
    font-size: 0.9rem;
  }

  .feature-panel p {
    font-size: 0.74rem;
  }

  .soft-panel,
  .advantage-board {
    padding: 15px;
  }

  .split,
  .split.reverse {
    gap: 18px;
  }

  .check-list {
    gap: 7px;
    margin: 12px 0 16px;
    font-size: 0.84rem;
  }

  .image-panel {
    min-height: 158px;
  }

  .quote-note {
    right: 16px;
    bottom: 14px;
    width: 190px;
    padding: 10px 12px;
    font-size: 0.72rem;
  }

  .plan-card {
    grid-template-columns: minmax(0, 1fr) 150px;
    min-height: 178px;
    gap: 12px;
    padding: 16px;
  }

  .plan-card h3 {
    margin: 4px 0 8px;
    font-size: 1rem;
  }

  .plan-card .label,
  .plan-subline,
  .plan-summary,
  .plan-feature-row span {
    font-size: 0.72rem;
  }

  .plan-prop {
    transform: scale(0.64);
  }

  .program-plan {
    padding: 18px 22px 16px;
  }

  .plan-corner-badge {
    top: 12px;
    right: 14px;
    width: 64px;
    height: 64px;
  }

  .plan-corner-badge .icon {
    width: 42px;
    height: 42px;
  }

  .plan-feature-row {
    gap: 8px;
    margin: 12px 0 14px;
  }

  .plan-feature-row div {
    gap: 4px;
    padding: 8px 6px;
    border-radius: 11px;
  }

  .plan-feature-row .icon {
    width: 30px;
    height: 30px;
    border-radius: 12px;
  }

  .plan-feature-row strong {
    font-size: 0.68rem;
  }

  .stats {
    padding: 12px;
  }

  .stat {
    min-height: 48px;
    gap: 9px;
  }

  .stat strong {
    font-size: 1.35rem;
  }

  .stat span {
    font-size: 0.7rem;
  }

  .metric-card {
    min-height: 80px;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .metric-card .icon {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }

  .metric-card strong {
    font-size: 1.36rem;
  }

  .metric-card p {
    font-size: 0.74rem;
  }

  .metric-card small {
    font-size: 0.66rem;
  }

  .coach-role-card {
    min-height: 146px;
    padding: 14px 9px 12px;
  }

  .coach-role-card .icon {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
  }

  .coach-role-card h3 {
    font-size: 1rem;
  }

  .coach-role-card p,
  .coach-role-card small {
    font-size: 0.72rem;
  }

  .weekly-flow-track,
  .consult-steps {
    gap: 12px;
  }

  .weekly-flow-card {
    min-height: 132px;
    padding: 12px 8px 11px;
  }

  .weekly-flow-card > span {
    margin-bottom: 5px;
    font-size: 1.02rem;
  }

  .weekly-flow-card .icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
  }

  .weekly-flow-card h3 {
    font-size: 0.9rem;
  }

  .weekly-flow-card p {
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .weekly-flow-arrow {
    margin-top: 68px;
  }

  .recommend-card {
    min-height: 136px;
    padding: 14px 10px;
  }

  .recommend-card p {
    min-height: 38px;
    font-size: 0.74rem;
  }

  .recommend-card span {
    min-width: 110px;
    min-height: 32px;
    margin-top: 12px;
    font-size: 0.74rem;
  }

  .fit-card {
    min-height: 118px;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    padding: 14px 16px;
  }

  .fit-card .icon {
    width: 62px;
    height: 62px;
    border-radius: 22px;
  }

  .fit-card h3,
  .fit-card .check-list {
    font-size: 0.76rem;
  }

  .journey-track {
    gap: 10px;
    margin-top: 16px;
  }

  .journey-node {
    min-height: 126px;
    padding: 10px 6px 12px;
  }

  .journey-node::before {
    inset: 24px 5px auto;
    height: 54px;
  }

  .journey-node .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 7px;
  }

  .journey-node h3 {
    margin-bottom: 5px;
    font-size: 0.88rem;
  }

  .journey-node p {
    font-size: 0.66rem;
    line-height: 1.45;
  }

  .journey-arrow {
    margin-top: 58px;
  }

  .diagnosis-step-panel {
    padding: 14px;
  }

  .diagnosis-step {
    min-height: 120px;
  }

  .diagnosis-step .icon {
    width: 48px;
    height: 48px;
  }

  .diagnosis-step h3 {
    font-size: 0.9rem;
  }

  .diagnosis-step p {
    font-size: 0.72rem;
  }

  .diagnosis-arrow,
  .consult-arrow {
    margin-top: 26px;
  }

  .rhythm-panel,
  .engine-list,
  .mock-dashboard,
  .chart-card,
  .pricing-plan,
  .care-card,
  .reassure-card,
  .connection-card,
  .reason-item,
  .choice-feature {
    padding: 14px;
  }

  .rhythm-panel p {
    margin-bottom: 12px;
  }

  .rhythm-steps {
    gap: 8px;
  }

  .rhythm-steps .icon {
    width: 42px;
    height: 42px;
  }

  .rhythm-steps strong,
  .rhythm-steps span {
    font-size: 0.66rem;
  }

  .rhythm-panel small {
    margin-top: 12px;
    font-size: 0.7rem;
  }

  .engine-layout {
    grid-template-columns: minmax(190px, 0.78fr) minmax(250px, 0.95fr) minmax(190px, 0.78fr);
    gap: 14px;
  }

  .engine-list h3 {
    margin-bottom: 8px;
  }

  .engine-venn {
    min-height: 190px;
  }

  .engine-venn::before,
  .engine-venn::after {
    width: 140px;
    height: 140px;
  }

  .engine-venn b,
  .engine-venn em {
    bottom: 30px;
    font-size: 0.68rem;
  }

  .engine-venn b {
    left: 58px;
  }

  .engine-venn em {
    right: 48px;
  }

  .mock-dashboard {
    grid-template-columns: 48px 1fr;
    min-height: 240px;
  }

  .mock-side {
    gap: 10px;
    padding-top: 24px;
  }

  .mock-side span {
    width: 17px;
    height: 17px;
    border-radius: 6px;
  }

  .mock-main {
    padding: 14px;
  }

  .mock-badge {
    margin-bottom: 8px;
    padding: 3px 9px;
    font-size: 0.66rem;
  }

  .mock-main h3 {
    margin-bottom: 10px;
    font-size: 0.86rem;
  }

  .mock-metrics {
    gap: 6px;
  }

  .mock-metrics div {
    min-height: 44px;
    padding: 8px;
    border-radius: 10px;
    font-size: 0.66rem;
  }

  .mock-lower {
    gap: 12px;
    margin-top: 12px;
  }

  .mock-lower h4 {
    margin-bottom: 6px;
    font-size: 0.74rem;
  }

  .mini-row {
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 6px;
    margin: 6px 0;
    font-size: 0.64rem;
  }

  .line-chart.small {
    height: 78px;
  }

  .mock-trend-badge {
    right: 7px;
    bottom: 7px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.62rem;
  }

  .pricing-plan {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 0;
    padding: 14px;
  }

  .pricing-orb {
    padding-top: 4px;
  }

  .pricing-orb .icon {
    width: 58px;
    height: 58px;
  }

  .pricing-ribbon {
    min-height: 22px;
    margin-bottom: 5px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .pricing-plan .price {
    margin: 4px 0 6px;
    font-size: 1.38rem;
  }

  .pricing-plan .check-list {
    gap: 5px;
    margin: 6px 0 9px;
    font-size: 0.73rem;
  }

  .pricing-plan .plan-actions {
    gap: 6px;
    max-width: 250px;
  }

  .pricing-plan .plan-actions .btn {
    min-height: 31px;
    font-size: 0.72rem;
  }

  .consult-step .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  .consult-step h3 {
    margin-bottom: 4px;
    font-size: 0.88rem;
  }

  .consult-step p {
    font-size: 0.68rem;
    line-height: 1.45;
  }

  .consult-strip {
    min-height: 0;
    padding: 15px 20px;
  }

  .consult-strip h2 {
    font-size: 1.16rem;
  }

  .consult-strip p {
    font-size: 0.78rem;
  }

  .choice-row {
    gap: 14px;
  }

  .choice-feature .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border-radius: 19px;
  }

  .choice-feature:not(:last-child)::after {
    top: 24px;
    height: 54px;
  }

  .stats.compact {
    margin-top: 18px;
  }

  .faq {
    gap: 7px;
  }

  .faq summary {
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  .faq summary::after {
    width: 18px;
    height: 18px;
  }

  .faq p {
    padding: 0 14px 12px;
    font-size: 0.74rem;
  }

  .report-grid {
    gap: 10px;
  }

  .report-summary {
    grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1.28fr);
    gap: 10px;
  }

  .chart-card {
    min-height: 158px;
  }

  .line-chart,
  .bars,
  .donut {
    height: 88px;
    margin-top: 10px;
  }

  .donut::before {
    width: 92px;
    height: 92px;
  }

  .donut strong {
    font-size: 1.5rem;
  }

  .score-list {
    gap: 7px;
    margin-top: 10px;
  }

  .score-row {
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    gap: 8px;
    font-size: 0.7rem;
  }

  .score-track {
    height: 7px;
  }

  .radar-map {
    height: 132px;
    margin-top: 4px;
  }

  .radar-map svg {
    width: min(156px, 66%);
    height: 124px;
  }

  .radar-map span {
    font-size: 0.62rem;
  }

  .donut-legend {
    gap: 4px;
    margin-top: 7px;
    font-size: 0.66rem;
  }

  .weakness-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
    gap: 12px;
  }

  .diagnosis-advice-grid {
    gap: 10px;
  }

  .advice-priority,
  .advice-card {
    min-height: 128px;
  }

  .advice-priority {
    grid-template-columns: 78px 1fr;
  }

  .advice-priority h3 {
    padding: 0 14px;
    font-size: 0.96rem;
    line-height: 1.32;
  }

  .advice-priority .check-list {
    padding: 0 14px 12px;
    font-size: 0.7rem;
  }

  .advice-card {
    padding: 13px;
  }

  .advice-card h3 {
    margin-bottom: 7px;
    font-size: 0.84rem;
  }

  .route-stack {
    gap: 3px;
    font-size: 0.7rem;
  }

  .route-stack i {
    height: 11px;
    margin-left: 28px;
  }

  .advice-card.daily strong {
    margin-top: 8px;
    font-size: 1.12rem;
  }

  .tiny-line {
    height: 48px;
    margin-top: 6px;
  }

  .rhythm-panel h3,
  .engine-list h3,
  .chart-card h3,
  .care-card h3,
  .connection-card h3,
  .reason-item h3,
  .choice-feature h3 {
    font-size: 0.96rem;
  }

  .rhythm-panel p,
  .engine-list li,
  .chart-card,
  .care-card p,
  .connection-card p,
  .reason-item p,
  .choice-feature p {
    font-size: 0.74rem;
  }

  .cta-band {
    min-height: 82px;
    margin-bottom: 22px;
    padding: 18px 28px;
  }

  .cta-band.has-media {
    grid-template-columns: minmax(0, 1fr) auto 220px;
  }

  .cta-band.has-mark {
    padding-left: 104px;
  }

  .cta-band h2 {
    font-size: 1.36rem;
  }

  .cta-band p {
    font-size: 0.82rem;
  }

  .page-progress .cta-band {
    min-height: 124px;
    margin-bottom: 32px;
    background: linear-gradient(110deg, #45bfb8 0%, #65ccc5 100%);
  }

  .page-progress .cta-band::after {
    display: none;
  }

  .page-progress .cta-actions .btn {
    min-width: 220px;
  }

  .cta-programs .cta-figure {
    height: 118px;
    max-height: 118px;
  }

  .cta-mark {
    left: 34px;
    width: 56px;
    height: 56px;
  }

  .cta-mark .icon {
    width: 56px;
    height: 56px;
  }

  .footer {
    gap: 18px;
    padding: 24px var(--page-gutter);
    font-size: 0.72rem;
  }

  .page-home .section,
  .page-programs .section,
  .page-diagnosis .section,
  .page-coach .section,
  .page-pricing .section {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .page-programs .section {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .page-diagnosis .section {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .page-home .hero,
  .page-diagnosis .hero,
  .page-coach .hero,
  .page-pricing .hero {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .page-home .hero {
    padding-left: 76px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 39%, rgba(228, 246, 255, 0.8) 100%),
      radial-gradient(circle at 84% 22%, rgba(115, 185, 223, 0.22), transparent 22rem);
  }

  .page-home .hero::before {
    background:
      linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.64) 34%, transparent 60%),
      linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.82));
  }

  .page-home .hero h1,
  .page-diagnosis .hero h1,
  .page-coach .hero h1,
  .page-pricing .hero h1 {
    font-size: 2.22rem;
    line-height: 1.12;
  }

  .page-home .hero h1 {
    font-family: "Songti TC", "STSong", Georgia, "Times New Roman", serif;
    max-width: 440px;
    font-size: 2.72rem;
    line-height: 1.18;
    font-weight: 800;
  }

  .page-home .section-title {
    font-family: "Songti TC", "STSong", Georgia, "Times New Roman", serif;
    font-weight: 800;
  }

  .page-home .hero-copy {
    max-width: 380px;
  }

  .page-home .mini-cards {
    width: min(100%, 810px);
    margin-right: auto;
    margin-left: auto;
  }

  .page-home .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
  }

  .page-home .photo-card {
    top: 0;
    right: 0;
    width: min(60vw, 620px);
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-home .photo-card::after {
    background: linear-gradient(180deg, transparent 74%, rgba(255, 255, 255, 0.55));
  }

  .page-home .photo-card img {
    object-fit: cover;
    object-position: center top;
    transform: scale(1);
  }

  .page-pricing .hero h1 {
    max-width: 390px;
    font-size: 3.05rem;
    line-height: 1.12;
  }

  .page-pricing .hero-copy {
    max-width: 410px;
  }

  .page-home .hero-points,
  .page-diagnosis .hero-points,
  .page-coach .hero-points,
  .page-pricing .hero-points {
    margin-top: 12px;
  }

  .page-home .hero-copy,
  .page-diagnosis .hero-copy,
  .page-coach .hero-copy,
  .page-pricing .hero-copy {
    margin-top: 8px;
  }

  .page-home .plans .plan-card {
    grid-template-columns: minmax(0, 1fr) 154px;
    min-height: 176px;
    padding: 10px 12px;
    overflow: visible;
  }

  .page-home .plans {
    width: min(100%, 760px);
    margin-right: auto;
    margin-left: auto;
    gap: 22px;
  }

  .page-home .plan-prop {
    width: 188px;
    height: 154px;
    opacity: 0.6;
    transform: translateX(18px);
  }

  .page-home .plan-prop img {
    mix-blend-mode: normal;
    transform: scale(1.08);
  }

  .page-home .plan-card:hover .plan-prop img {
    transform: scale(1.12) translateY(-2px);
  }

  .page-home .plan-card .check-list {
    gap: 4px;
    margin: 5px 0 7px;
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .page-home .plan-card h3 {
    margin: 2px 0 5px;
    font-size: 0.92rem;
  }

  .page-home .plan-card .label {
    font-size: 0.66rem;
  }

  .page-home .plan-card .btn {
    min-height: 28px;
    font-size: 0.68rem;
  }

  .page-home .advantage-board,
  .page-home .soft-panel {
    padding: 10px;
  }

  .page-home .feature-panel {
    padding: 9px 7px;
  }

  .page-home .feature-panel .icon {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .page-home .feature-panel h3 {
    margin-bottom: 4px;
    font-size: 0.84rem;
  }

  .page-home .feature-panel p {
    font-size: 0.68rem;
    line-height: 1.32;
  }

  .page-home .mini-cards .card {
    min-height: 92px;
    padding: 8px;
  }

  .page-home .mini-cards .card .icon {
    width: 32px;
    height: 32px;
  }

  .page-home .mini-cards .card h3 {
    margin: 2px 0 1px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .page-home .mini-cards .card p {
    font-size: 0.62rem;
    line-height: 1.28;
    white-space: nowrap;
  }

  .page-home .section-kicker {
    margin-bottom: 8px;
  }

  .page-home .split,
  .page-home .split.reverse {
    gap: 12px;
    align-items: stretch;
  }

  .page-home .image-panel {
    min-height: 126px;
  }

  .page-home .quote-note {
    width: 160px;
    padding: 8px 10px;
    font-size: 0.66rem;
  }

  .page-home .stats {
    padding: 12px 14px;
  }

  .page-home .stat strong {
    font-size: 1.02rem;
  }

  .page-home .stat span {
    font-size: 0.68rem;
  }

  .page-home .cta-band {
    min-height: 76px;
    padding: 14px 126px 14px 132px;
  }

  .footer-home {
    gap: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.62rem;
  }

  .footer-home h3 {
    margin-bottom: 5px;
    font-size: 0.72rem;
  }

  .footer-home p,
  .footer-home a {
    margin-bottom: 3px;
  }

  .footer-home .footer-bottom {
    padding-top: 5px;
    font-size: 0.56rem;
  }

  .page-programs .comparison {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  }

  .page-programs .hero + .section {
    padding-top: 40px;
  }

  .page-programs .comparison,
  .page-programs .fit-pair,
  .page-programs .section > .grid.cols-4,
  .page-programs .stats,
  .page-programs .cta-band {
    width: min(100%, 782px);
    margin-right: auto;
    margin-left: auto;
  }

  .page-about .hero {
    min-height: 420px;
  }

  .page-about .hero h1 {
    font-size: 1.9rem;
    line-height: 1.24;
    text-wrap: initial;
    word-break: keep-all;
  }

  .page-about .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
  }

  .page-about .photo-card {
    top: 0;
    right: 0;
    width: min(60vw, 600px);
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-about .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.32) 24%, transparent 55%),
      linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.62));
  }

  .page-about .photo-card img {
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
  }

  .page-about .section {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .page-about .hero + .section {
    padding-top: 18px;
  }

  .page-about .advantage-card {
    min-height: 128px;
    padding: 13px 15px;
  }

  .page-about .advantage-head .card-number {
    font-size: 1.62rem;
  }

  .page-about .advantage-head .icon {
    width: 39px;
    height: 39px;
  }

  .page-about .formula-row {
    gap: 8px;
  }

  .page-about .formula-card {
    min-height: 132px;
    padding: 14px 12px;
  }

  .page-about .formula-card .icon {
    width: 42px;
    height: 42px;
  }

  .page-about .stats {
    padding: 10px 12px;
  }

  .page-about .stat {
    min-height: 44px;
  }

  .page-about .cta-band {
    min-height: 74px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #253040;
    background: linear-gradient(100deg, #e9fbfb 0%, #fff4f5 100%);
    border: 1px solid rgba(88, 197, 189, 0.2);
  }

  .page-about .cta-band::after {
    display: none;
  }

  .page-about .cta-band h2 {
    color: #253040;
  }

  .page-about .cta-band p {
    color: #596473;
  }

  .page-about .cta-band .btn {
    color: #fff;
    background: linear-gradient(135deg, #f58b91, #ef707d);
  }

  .page-about .cta-actions .btn.secondary {
    color: #596473;
    background: #fff;
    border-color: #f0c7ca;
  }

  .footer-about {
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 14px;
    font-size: 0.62rem;
  }

  .footer-about .brand {
    margin-bottom: 4px;
  }

  .footer-about h3 {
    margin-bottom: 5px;
    font-size: 0.74rem;
  }

  .footer-about p,
  .footer-about a {
    margin-bottom: 3px;
    line-height: 1.25;
  }

  .footer-about .footer-bottom {
    padding-top: 7px;
    font-size: 0.56rem;
  }

  .page-programs .vs {
    width: 44px;
    height: 44px;
  }

  .page-programs .program-plan {
    min-height: 276px;
    padding: 20px 24px 18px;
    overflow: visible;
  }

  .page-programs .program-plan h3 {
    margin: 4px 0 7px;
    font-size: 1.02rem;
    line-height: 1.28;
    white-space: nowrap;
  }

  .page-programs .program-plan .plan-copy {
    display: flex;
    min-height: 100%;
    flex-direction: column;
  }

  .page-programs .program-plan .label {
    font-size: 0.74rem;
    line-height: 1.32;
  }

  .page-programs .program-plan .plan-subline {
    font-size: 0.68rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .page-programs .program-plan .plan-summary {
    font-size: 0.62rem;
    line-height: 1.34;
  }

  .page-programs .program-plan .plan-summary {
    max-width: 100%;
    margin-bottom: 6px;
  }

  .page-programs .program-plan .plan-feature-row {
    gap: 8px;
    margin: 10px 0 12px;
  }

  .page-programs .program-plan .plan-feature-row div {
    gap: 2px;
    padding: 6px 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
  }

  .page-programs .program-plan .plan-feature-row .icon {
    width: 30px;
    height: 30px;
    border-radius: 12px;
  }

  .page-programs .program-plan .plan-feature-row strong {
    font-size: 0.54rem;
    line-height: 1.16;
  }

  .page-programs .program-plan .plan-feature-row span {
    font-size: 0.48rem;
    line-height: 1.16;
  }

  .page-programs .program-plan .check-list {
    margin: 6px 0 8px;
    gap: 3px;
    font-size: 0.58rem;
    line-height: 1.24;
  }

  .page-programs .program-plan .btn {
    align-self: flex-start;
    min-height: 34px;
    margin-top: auto;
    padding: 0 18px;
    font-size: 0.72rem;
  }

  .page-programs .plan-corner-badge {
    top: -20px;
    right: 20px;
    width: 72px;
    height: 72px;
  }

  .page-programs .plan-corner-badge .icon {
    width: 46px;
    height: 46px;
  }

  .page-programs .fit-card {
    min-height: 146px;
    grid-template-columns: 70px 1fr;
    gap: 14px;
    padding: 18px 22px;
  }

  .page-programs .fit-card .icon {
    width: 58px;
    height: 58px;
    border-radius: 22px;
  }

  .page-programs .fit-card h3 {
    font-size: 0.82rem;
    line-height: 1.34;
  }

  .page-programs .fit-card .check-list {
    font-size: 0.72rem;
    line-height: 1.36;
  }

  .page-programs .fit-card .check-list {
    gap: 5px;
    margin: 8px 0 0;
  }

  .page-programs .recommend-card {
    min-height: 146px;
    padding: 12px 12px 12px;
  }

  .page-programs .recommend-card .icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 7px;
    border-radius: 15px;
  }

  .page-programs .recommend-card h3 {
    margin: 0 0 4px;
    font-size: 0.82rem;
  }

  .page-programs .recommend-card p {
    min-height: 30px;
    font-size: 0.62rem;
    line-height: 1.28;
  }

  .page-programs .recommend-card span {
    min-width: 98px;
    min-height: 26px;
    margin-top: 6px;
    font-size: 0.62rem;
  }

  .page-programs .cta-band {
    min-height: 112px;
    padding: 9px 24px;
  }

  .page-programs .cta-programs .cta-figure {
    height: 92px;
    max-height: 92px;
  }

  .footer-programs {
    gap: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.54rem;
  }

  .footer-programs .brand {
    margin-bottom: 0;
  }

  .footer-programs .footer-bottom {
    padding-top: 2px;
  }

  .footer-programs h3 {
    margin-bottom: 0;
    font-size: 0.66rem;
  }

  .footer-programs p,
  .footer-programs a {
    margin-bottom: 0;
    line-height: 1.08;
  }

  .footer-programs .footer-bottom {
    padding-top: 2px;
    font-size: 0.52rem;
  }

  .footer-programs .footer-social a {
    min-width: 18px;
    height: 18px;
  }

  .page-diagnosis .diagnosis-step-panel,
  .page-diagnosis .soft-panel {
    padding: 9px;
  }

  .page-diagnosis .hero {
    min-height: 480px;
    padding-top: 48px;
    padding-left: 52px;
  }

  .page-diagnosis .hero h1 {
    word-break: normal;
  }

  .page-diagnosis .hero-points {
    margin-top: 30px;
  }

  .page-diagnosis .hero-actions {
    margin-top: 24px;
  }

  .page-diagnosis .hero-visual {
    align-self: start;
    min-height: 350px;
  }

  .page-diagnosis .photo-card {
    top: -25px;
    right: 0;
    width: min(56vw, 560px);
    height: 336px;
  }

  .page-diagnosis .hero-widget {
    min-width: 104px;
    padding: 8px 10px;
  }

  .page-diagnosis .hero-widget.has-trend {
    min-width: 160px;
    padding: 10px 12px 8px;
  }

  .page-diagnosis .hero-widget.two {
    right: 3%;
    top: 42px;
  }

  .page-diagnosis .hero-widget.three {
    right: 10%;
    bottom: 20px;
  }

  .page-diagnosis .hero-widget .widget-donut {
    width: 66px;
    height: 66px;
    margin-bottom: 4px;
  }

  .page-diagnosis .hero-widget.has-trend .widget-donut {
    width: 58px;
    height: 58px;
    margin: 0;
  }

  .page-diagnosis .hero-widget.has-trend .widget-detail {
    max-width: 14em;
  }

  .page-diagnosis .hero-widget.has-trend .widget-score-line {
    width: 126px;
    height: 34px;
  }

  .page-diagnosis .widget-bars {
    width: 104px;
    height: 46px;
    gap: 6px;
  }

  .page-diagnosis .widget-list {
    gap: 4px;
    font-size: 0.62rem;
    line-height: 1.35;
  }

  .page-diagnosis .diagnosis-step {
    min-height: 118px;
    padding: 0 3px;
  }

  .page-diagnosis .diagnosis-step .step-dot {
    width: 21px;
    height: 21px;
    margin-bottom: 4px;
    font-size: 0.6rem;
  }

  .page-diagnosis .diagnosis-step .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  .page-diagnosis .diagnosis-step h3 {
    margin-bottom: 3px;
    font-size: 0.78rem;
  }

  .page-diagnosis .diagnosis-step p {
    font-size: 0.62rem;
    line-height: 1.28;
  }

  .page-diagnosis .chart-card {
    min-height: 118px;
    padding: 10px;
  }

  .page-diagnosis .report-summary {
    min-height: 136px;
  }

  .page-diagnosis .chart-card h3 {
    margin-bottom: 5px;
    font-size: 0.8rem;
  }

  .page-diagnosis .chart-card p,
  .page-diagnosis .data-source {
    margin-top: 5px;
    font-size: 0.62rem;
    line-height: 1.32;
  }

  .page-diagnosis .line-chart,
  .page-diagnosis .bars,
  .page-diagnosis .donut {
    height: 52px;
    margin-top: 5px;
  }

  .page-diagnosis .donut::before {
    width: 58px;
    height: 58px;
  }

  .page-diagnosis .donut strong {
    font-size: 1.08rem;
  }

  .page-diagnosis .score-list {
    gap: 5px;
    margin-top: 6px;
  }

  .page-diagnosis .score-row {
    grid-template-columns: 44px minmax(0, 1fr) 30px;
    gap: 6px;
    font-size: 0.6rem;
  }

  .page-diagnosis .score-track {
    height: 5px;
  }

  .page-diagnosis .radar-map {
    height: 90px;
    margin-top: 0;
  }

  .page-diagnosis .radar-map svg {
    height: 84px;
  }

  .page-diagnosis .radar-map span {
    font-size: 0.54rem;
  }

  .page-diagnosis .donut-legend,
  .page-diagnosis .legend-row {
    gap: 3px;
    margin-top: 4px;
    font-size: 0.56rem;
  }

  .page-diagnosis .weak-top-row {
    grid-template-columns: 1fr minmax(70px, 1.2fr) 38px;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.62rem;
  }

  .page-diagnosis .weak-top-row b {
    font-size: 0.82rem;
  }

  .page-diagnosis .coach-note p {
    margin-top: 6px;
    font-size: 0.64rem;
    line-height: 1.36;
  }

  .page-diagnosis .coach-profile {
    gap: 8px;
    margin-top: 8px;
    font-size: 0.64rem;
  }

  .page-diagnosis .weakness-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(232px, 0.75fr);
    gap: 10px;
  }

  .page-diagnosis .weakness-layout .card {
    min-height: 88px;
    padding: 10px;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 {
    gap: 8px;
  }

  .page-diagnosis .weakness-layout .card h3 {
    margin: 5px 0 3px;
    font-size: 0.72rem;
  }

  .page-diagnosis .weakness-layout .card p,
  .page-diagnosis .weakness-layout .card li {
    font-size: 0.62rem;
    line-height: 1.34;
  }

  .page-diagnosis .weakness-layout .card ul {
    gap: 3px;
    margin-top: 5px;
  }

  .page-diagnosis .advice-priority,
  .page-diagnosis .advice-card {
    min-height: 114px;
  }

  .page-diagnosis .advice-priority {
    grid-template-columns: 58px 1fr;
  }

  .page-diagnosis .advice-priority .icon {
    width: 34px;
    height: 34px;
  }

  .page-diagnosis .advice-priority h3 {
    padding: 0 9px;
    font-size: 0.74rem;
    line-height: 1.24;
  }

  .page-diagnosis .advice-priority .check-list {
    gap: 3px;
    padding: 0 9px 8px;
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .page-diagnosis .advice-card {
    padding: 8px;
  }

  .page-diagnosis .advice-card h3 {
    margin-bottom: 4px;
    font-size: 0.72rem;
  }

  .page-diagnosis .route-stack {
    gap: 2px;
    font-size: 0.62rem;
  }

  .page-diagnosis .route-stack i {
    height: 8px;
    margin-left: 22px;
  }

  .page-diagnosis .advice-card.route .icon,
  .page-diagnosis .advice-card.daily .icon {
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
  }

  .page-diagnosis .advice-card.daily strong {
    margin-top: 5px;
    font-size: 0.98rem;
  }

  .page-diagnosis .advice-card.daily p,
  .page-diagnosis .advice-card.curve p {
    font-size: 0.64rem;
    line-height: 1.34;
  }

  .page-diagnosis .tiny-line {
    height: 42px;
    margin-top: 4px;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card {
    min-height: 98px;
    padding: 12px;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card h3 {
    margin: 6px 0 4px;
    font-size: 0.78rem;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card p {
    font-size: 0.66rem;
    line-height: 1.38;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .icon {
    width: 34px;
    height: 34px;
  }

  .page-diagnosis .cta-figure {
    height: 100px;
    max-height: 100px;
  }

  .page-diagnosis .cta-band {
    min-height: 132px;
    padding: 12px 24px;
  }

  .page-diagnosis .cta-band h2 {
    font-size: 1.12rem;
  }

  .page-diagnosis .cta-band p,
  .page-diagnosis .cta-band small {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .page-coach .reassure-card {
    grid-template-columns: 150px 1fr;
    min-height: 178px;
  }

  .page-coach .reassure-card div {
    padding: 14px;
  }

  .page-coach .reassure-card .check-list {
    margin: 10px 0 0;
    font-size: 0.74rem;
  }

  .page-pricing .pricing-plan {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .page-pricing .pricing-orb .icon {
    width: 42px;
    height: 42px;
  }

  .page-pricing .pricing-ribbon {
    min-height: 20px;
    margin-bottom: 4px;
    font-size: 0.62rem;
  }

  .page-pricing .pricing-plan h3 {
    margin: 2px 0 4px;
    font-size: 0.95rem;
  }

  .page-pricing .pricing-plan .price {
    margin: 2px 0 3px;
    font-size: 1.18rem;
  }

  .page-pricing .pricing-plan .plan-subline,
  .page-pricing .pricing-plan .plan-summary {
    margin-bottom: 4px;
    font-size: 0.66rem;
    line-height: 1.35;
  }

  .page-pricing .pricing-plan .check-list {
    gap: 3px;
    margin: 3px 0 5px;
    font-size: 0.66rem;
    line-height: 1.35;
  }

  .page-pricing .pricing-plan .plan-actions {
    gap: 5px;
  }

  .page-pricing .pricing-plan .plan-actions .btn {
    min-height: 26px;
    font-size: 0.68rem;
  }

  .page-pricing .consult-step .icon {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
  }

  .page-pricing .consult-step b {
    height: 19px;
    margin-bottom: 4px;
    font-size: 0.66rem;
  }

  .page-pricing .consult-steps {
    gap: 8px;
  }

  .page-pricing .consult-step p {
    font-size: 0.64rem;
    line-height: 1.38;
  }

  .page-pricing .choice-feature {
    padding: 10px 8px;
  }

  .page-pricing .choice-feature .icon {
    width: 44px;
    height: 44px;
  }

  .page-pricing .stats.compact {
    margin-top: 12px;
  }

  .page-pricing .plans {
    gap: 12px;
  }

  .page-pricing .pricing-plan {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 8px 10px;
  }

  .page-pricing .pricing-orb .icon {
    width: 36px;
    height: 36px;
  }

  .page-pricing .pricing-ribbon {
    min-height: 18px;
    margin-bottom: 2px;
    padding: 0 8px;
    font-size: 0.58rem;
  }

  .page-pricing .pricing-plan h3 {
    margin: 0 0 2px;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .page-pricing .pricing-plan .price {
    margin: 1px 0 2px;
    font-size: 1.04rem;
    line-height: 1.15;
  }

  .page-pricing .pricing-plan .plan-subline,
  .page-pricing .pricing-plan .plan-summary {
    margin-bottom: 2px;
    font-size: 0.6rem;
    line-height: 1.25;
  }

  .page-pricing .pricing-plan .check-list {
    gap: 2px;
    margin: 2px 0 4px;
    font-size: 0.6rem;
    line-height: 1.26;
  }

  .page-pricing .pricing-plan .plan-actions {
    gap: 4px;
  }

  .page-pricing .pricing-plan .plan-actions .btn {
    min-height: 24px;
    font-size: 0.62rem;
  }

  .page-pricing .pricing-plan {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 7px 9px;
  }

  .page-pricing .pricing-plan .check-list {
    gap: 1px;
    margin-bottom: 3px;
    font-size: 0.56rem;
    line-height: 1.2;
  }

  .page-pricing .pricing-plan .plan-actions .btn {
    min-height: 22px;
    font-size: 0.58rem;
  }

  .page-pricing .pricing-orb .icon {
    width: 54px;
    height: 54px;
  }

  .page-pricing .consult-step .icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
  }

  .page-pricing .consult-step h3 {
    margin-bottom: 2px;
    font-size: 0.78rem;
  }

  .page-pricing .consult-step p {
    font-size: 0.58rem;
    line-height: 1.28;
  }

  .page-pricing .consult-strip {
    padding: 10px 108px 10px 64px;
  }

  .page-pricing .consult-strip h2 {
    font-size: 1.02rem;
  }

  .page-pricing .consult-strip p {
    font-size: 0.7rem;
  }

  .page-pricing .choice-row {
    gap: 9px;
  }

  .page-pricing .choice-feature {
    padding: 8px 6px;
  }

  .page-pricing .choice-feature .icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
    border-radius: 15px;
  }

  .page-pricing .choice-feature h3 {
    margin-bottom: 2px;
    font-size: 0.76rem;
  }

  .page-pricing .choice-feature p {
    font-size: 0.58rem;
    line-height: 1.26;
  }

  .page-pricing .choice-feature:not(:last-child)::after {
    top: 18px;
    right: 0;
    height: 42px;
  }

  .page-pricing .stats {
    padding: 10px 12px;
  }

  .page-pricing .stats.compact {
    margin-top: 8px;
  }

  .page-pricing .faq {
    gap: 5px;
  }

  .page-pricing .faq summary {
    padding: 6px 9px;
    font-size: 0.68rem;
  }

  .page-pricing .faq p {
    padding: 0 9px 6px;
    font-size: 0.64rem;
    line-height: 1.3;
  }

  .page-pricing .faq-section {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .page-pricing .faq-section .split {
    gap: 10px;
  }

  .page-pricing .faq-section .soft-panel {
    padding: 8px;
  }

  .page-pricing .faq-section .soft-panel .icon {
    width: 32px;
    height: 32px;
    border-radius: 13px;
  }

  .page-pricing .faq-section .soft-panel h3 {
    margin: 4px 0 3px;
    font-size: 0.78rem;
  }

  .page-pricing .faq-section .soft-panel p {
    margin: 0 0 6px;
    font-size: 0.6rem;
    line-height: 1.25;
  }

  .page-pricing .faq-section .soft-panel .btn {
    min-height: 26px;
    font-size: 0.64rem;
  }

  .page-pricing .cta-band {
    min-height: 76px;
    padding: 13px 104px 13px 96px;
  }

  .page-pricing .cta-band h2 {
    font-size: 1.12rem;
  }

  .page-pricing .cta-band p {
    font-size: 0.72rem;
    line-height: 1.36;
  }

  .page-pricing .cta-mark {
    left: 32px;
    width: 48px;
    height: 48px;
  }

  .page-pricing .cta-mark .icon {
    width: 48px;
    height: 48px;
  }

  .page-pricing .soft-panel {
    padding: 10px;
  }

  .page-pricing .hero + .section {
    padding-bottom: 56px;
  }

  .page-pricing .section.flush-top {
    padding-top: 0;
    padding-bottom: 6px;
  }

  .page-pricing .faq-section {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .page-pricing .consult-steps,
  .page-pricing .plans,
  .page-pricing .consult-strip,
  .page-pricing .choice-row,
  .page-pricing .stats.compact,
  .page-pricing .faq-section .split {
    width: min(100%, 696px);
    margin-right: auto;
    margin-left: auto;
  }

  .page-pricing .consult-steps {
    gap: 14px;
  }

  .page-pricing .plans {
    gap: 31px;
    align-items: stretch;
  }

  .page-pricing .pricing-plan {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    min-height: 276px;
    padding: 22px 28px 18px;
  }

  .page-pricing .pricing-orb {
    padding-top: 18px;
  }

  .page-pricing .pricing-orb .icon {
    width: 76px;
    height: 76px;
  }

  .page-pricing .pricing-ribbon {
    min-height: 22px;
    margin-bottom: 6px;
    padding: 0 9px;
    font-size: 0.63rem;
  }

  .page-pricing .pricing-plan h3 {
    margin: 0 0 4px;
    font-size: 0.96rem;
    line-height: 1.22;
  }

  .page-pricing .pricing-plan .price {
    margin: 0 0 5px;
    font-size: 1.22rem;
    line-height: 1.12;
  }

  .page-pricing .pricing-plan .plan-summary {
    margin-bottom: 7px;
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .page-pricing .pricing-plan .check-list {
    gap: 3px;
    margin: 0 0 9px;
    font-size: 0.6rem;
    line-height: 1.26;
  }

  .page-pricing .pricing-plan .plan-actions {
    gap: 6px;
  }

  .page-pricing .pricing-plan .plan-actions .btn {
    min-height: 26px;
    font-size: 0.6rem;
  }

  .page-system .mock-dashboard {
    grid-template-columns: 42px 1fr;
    min-height: 220px;
  }

  .page-system .mock-side {
    gap: 8px;
    padding-top: 18px;
  }

  .page-system .mock-main {
    padding: 10px;
  }

  .page-system .mock-badge {
    margin-bottom: 5px;
    font-size: 0.58rem;
  }

  .page-system .mock-main h3 {
    margin-bottom: 7px;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .page-system .mock-metrics {
    gap: 4px;
  }

  .page-system .mock-metrics div {
    min-height: 34px;
    padding: 5px;
    font-size: 0.55rem;
    line-height: 1.2;
  }

  .page-system .mock-lower {
    gap: 8px;
    margin-top: 8px;
  }

  .page-system .mock-lower h4 {
    margin-bottom: 4px;
    font-size: 0.64rem;
  }

  .page-system .mini-row {
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    gap: 5px;
    margin: 4px 0;
    font-size: 0.56rem;
  }

  .page-system .line-chart.small {
    height: 56px;
  }

  .page-system .mock-trend-badge {
    min-height: 20px;
    padding: 0 6px;
    font-size: 0.52rem;
  }

  .page-parent .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
  }

  .page-parent .hero {
    background:
      radial-gradient(900px 620px at 86% 8%, rgba(167, 211, 237, 0.78), rgba(224, 245, 252, 0.56) 48%, transparent 49%),
      linear-gradient(90deg, #fff 0%, #fff 42%, rgba(232, 248, 253, 0.68) 100%);
  }

  .page-parent .hero::before {
    background: none;
  }

  .page-parent .hero-content {
    transform: translate(28px, 24px);
  }

  .page-parent .photo-card {
    top: 0;
    right: 0;
    width: min(58vw, 600px);
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-parent .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26) 30%, transparent 54%),
      linear-gradient(180deg, transparent 78%, rgba(255, 255, 255, 0.52));
  }

  .page-parent .photo-card img {
    object-fit: cover;
    object-position: left center;
    transform: scale(1);
  }

  .page-parent .care-card {
    min-height: 218px;
    padding: 22px 16px;
  }

  .page-parent .care-card .icon {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 22px;
  }

  .page-parent .care-card h3 {
    margin-bottom: 7px;
    font-size: 1rem;
  }

  .page-parent .care-card p {
    font-size: 0.72rem;
    line-height: 1.48;
  }

  .page-parent .testimonial {
    min-height: 150px;
    padding: 18px;
  }

  .page-parent .testimonial::before {
    font-size: 2.8rem;
  }

  .page-parent .testimonial p {
    font-size: 0.8rem;
    line-height: 1.58;
  }

  .page-parent .testimonial .avatar {
    margin-top: 13px;
    font-size: 0.74rem;
  }

  .page-parent .testimonial .avatar img {
    width: 40px;
    height: 40px;
  }

  .page-parent .connection-card {
    min-height: 84px;
    gap: 12px;
    padding: 14px;
  }

  .page-parent .connection-card .icon {
    width: 44px;
    height: 44px;
    border-radius: 17px;
  }

  .page-parent .connection-card h3 {
    font-size: 0.84rem;
  }

  .page-parent .connection-card p {
    font-size: 0.66rem;
    line-height: 1.38;
  }

  .page-parent .cta-band {
    width: min(100%, 820px);
    min-height: 104px;
    padding-top: 14px;
    padding-bottom: 14px;
    background: linear-gradient(110deg, #45bfb8 0%, #65ccc5 100%);
  }

  .page-parent .cta-band::after {
    display: none;
  }

  .footer-pricing {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.62rem;
  }

  .footer-pricing .footer-bottom {
    margin-top: 0;
    padding-top: 6px;
    font-size: 0.6rem;
  }

  .footer-pricing h3 {
    margin-bottom: 5px;
  }

  .footer-pricing p,
  .footer-pricing a {
    margin-bottom: 3px;
    line-height: 1.26;
  }

  .footer h3 {
    margin-bottom: 7px;
    font-size: 0.78rem;
  }

  .footer p,
  .footer a {
    margin-bottom: 5px;
    line-height: 1.34;
  }

  .footer .brand {
    margin-bottom: 8px;
  }

  .footer-bottom {
    gap: 12px;
    padding-top: 12px;
    font-size: 0.66rem;
  }

  .footer-social a {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: 0.62rem;
  }

  .page-pricing .faq-section .section-title {
    margin-bottom: 6px;
  }

  .page-pricing .faq-section .split {
    align-items: center;
    gap: 10px;
  }

  .page-pricing .faq {
    gap: 2px;
  }

  .page-pricing .faq summary {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 0.61rem;
    line-height: 1.15;
  }

  .page-pricing .faq p {
    padding: 0 8px 5px;
    font-size: 0.58rem;
  }

  .page-pricing .faq-section .soft-panel {
    padding: 6px;
  }

  .page-pricing .faq-section .soft-panel .icon {
    width: 28px;
    height: 28px;
  }

  .page-pricing .faq-section .soft-panel h3 {
    margin: 3px 0 2px;
    font-size: 0.72rem;
  }

  .page-pricing .faq-section .soft-panel p {
    margin-bottom: 5px;
    font-size: 0.56rem;
  }

  .page-pricing .faq-section .soft-panel .btn {
    min-height: 24px;
    font-size: 0.6rem;
  }

  .page-pricing .cta-band {
    width: min(100%, 845px);
    min-height: 62px;
    margin-top: -20px;
    margin-bottom: 0;
    padding: 10px 104px 10px 92px;
  }

  .page-pricing .cta-band h2 {
    font-size: 1.02rem;
  }

  .page-pricing .cta-band p {
    font-size: 0.66rem;
  }

  .page-pricing .cta-mark {
    left: 32px;
    width: 44px;
    height: 44px;
  }

  .page-pricing .cta-mark .icon {
    width: 44px;
    height: 44px;
  }

  .footer-pricing {
    width: min(100%, 780px);
    margin-right: auto;
    margin-left: auto;
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 0.58rem;
  }

  .footer-home {
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .footer-pricing .brand {
    margin-bottom: 4px;
  }

  .footer-pricing h3 {
    margin-bottom: 4px;
    font-size: 0.7rem;
  }

  .footer-pricing p,
  .footer-pricing a {
    margin-bottom: 2px;
    line-height: 1.18;
  }

  .footer-pricing .footer-bottom {
    gap: 8px;
    padding-top: 4px;
    font-size: 0.56rem;
  }

  .footer-pricing .footer-social a {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-size: 0.56rem;
  }

  .page-coach .coach-role-grid,
  .page-coach .comparison,
  .page-coach .weekly-flow-track,
  .page-coach .section > .grid.cols-2 {
    width: min(100%, 770px);
    margin-right: auto;
    margin-left: auto;
  }

  .page-coach .coach-role-grid {
    gap: 14px;
  }

  .page-coach .hero + .section {
    padding-top: 48px;
  }

  .page-coach .comparison {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 10px;
  }

  .page-coach .comparison .vs {
    width: 42px;
    height: 42px;
  }

  .page-coach .weekly-flow-track {
    gap: 10px;
  }

  .page-coach .weekly-flow-arrow {
    margin-top: 66px;
  }

  .page-coach .reassure-card {
    grid-template-columns: 148px minmax(0, 1fr);
    min-height: 182px;
    height: 182px;
  }

  .page-coach .reassure-card div {
    padding: 10px 12px;
  }

  .page-coach .reassure-card h3 {
    font-size: 0.96rem;
    line-height: 1.22;
  }

  .page-coach .reassure-card .check-list {
    gap: 3px;
    margin-top: 7px;
    font-size: 0.64rem;
    line-height: 1.24;
  }

  .page-coach .cta-band {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 142px;
    margin-top: -58px;
    margin-bottom: 0;
    padding: 42px 30px 16px;
    border-radius: 0;
    color: var(--ink);
    text-align: center;
    background:
      radial-gradient(66% 92% at 7% 108%, rgba(204, 239, 253, 0.7), transparent 66%),
      radial-gradient(66% 92% at 96% 108%, rgba(255, 232, 213, 0.78), transparent 66%),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 253, 253, 0.96) 100%);
    box-shadow: none;
  }

  .page-coach .cta-band.has-mark {
    padding-left: 30px;
  }

  .page-coach .cta-band::after {
    display: none;
  }

  .page-coach .cta-band h2 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 1.22rem;
    line-height: 1.25;
  }

  .page-coach .cta-band p {
    color: #68727d;
    font-size: 0.78rem;
  }

  .page-coach .cta-actions {
    justify-content: center;
    margin-top: 10px;
  }

  .page-coach .cta-band .btn {
    min-height: 30px;
    padding: 0 18px;
    color: #fff;
    background: var(--coral);
    box-shadow: 0 12px 24px rgba(242, 127, 135, 0.2);
  }

  .page-coach .cta-mark {
    left: 50%;
    top: 31px;
    width: 26px;
    height: 26px;
    transform: translateX(-50%);
    color: var(--teal);
  }

  .page-coach .cta-mark .icon {
    width: 26px;
    height: 26px;
    border: none;
    color: currentColor;
    background: transparent;
    box-shadow: none;
  }

  .page-coach .photo-card img {
    animation-name: imageFloatCoach;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card {
    min-height: 98px;
    padding: 12px;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .icon {
    width: 34px;
    height: 34px;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card h3 {
    margin: 6px 0 4px;
    font-size: 0.78rem;
  }

  .page-diagnosis .soft-panel .grid.cols-3 .card p {
    font-size: 0.66rem;
    line-height: 1.38;
  }

  .page-diagnosis .cta-figure {
    height: 84px;
    max-height: 84px;
  }

  .page-diagnosis .cta-band {
    min-height: 104px;
    padding: 12px 24px;
    color: #2fb4ad;
    background: linear-gradient(100deg, #e9fbfb 0%, #f1fcfb 62%, #fff4f5 100%);
    border: 1px solid rgba(88, 197, 189, 0.25);
  }

  .page-diagnosis .cta-band::after {
    display: none;
  }

  .page-diagnosis .cta-band h2 {
    color: #2fb4ad;
  }

  .page-diagnosis .cta-band p {
    color: #46515d;
  }

  .page-diagnosis .cta-band small {
    color: #7b8790;
  }

  .page-diagnosis .cta-band .btn {
    color: #fff;
    background: linear-gradient(135deg, #f58b91, #ef707d);
    box-shadow: 0 12px 24px rgba(242, 127, 135, 0.22);
  }

  .page-diagnosis .cta-figure {
    align-self: end;
    height: 86px;
    max-height: 86px;
    object-position: right bottom;
  }

  .page-diagnosis .diagnosis-companion-panel {
    padding: 8px 10px;
  }

  .page-diagnosis .diagnosis-companion-panel .section-title {
    margin-bottom: 8px;
  }

  .page-diagnosis .diagnosis-companion-panel .card {
    min-height: 84px;
    padding: 9px 10px;
  }

  .page-diagnosis .diagnosis-companion-panel .icon {
    width: 30px;
    height: 30px;
  }

  .page-diagnosis .diagnosis-companion-panel .card h3 {
    margin: 4px 0 3px;
    font-size: 0.74rem;
  }

  .page-diagnosis .diagnosis-companion-panel .card p {
    font-size: 0.6rem;
    line-height: 1.3;
  }

  .page-diagnosis .diagnosis-step-panel,
  .page-diagnosis .soft-panel {
    padding: 14px 18px;
  }

  .page-diagnosis .soft-panel > h2:not(.section-title) {
    margin-bottom: 12px;
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .page-diagnosis .report-grid {
    gap: 14px;
  }

  .page-diagnosis .report-summary,
  .page-diagnosis .report-radar {
    min-height: 142px;
    padding: 12px 16px;
  }

  .page-diagnosis .report-summary {
    grid-template-columns: minmax(142px, 0.78fr) minmax(0, 1.22fr);
    gap: 12px;
  }

  .page-diagnosis .report-score .donut {
    height: 64px;
  }

  .page-diagnosis .report-score .donut::before {
    width: 64px;
    height: 64px;
  }

  .page-diagnosis .report-score .donut strong {
    font-size: 1.32rem;
  }

  .page-diagnosis .report-subjects .score-list {
    gap: 5px;
    margin-top: 6px;
  }

  .page-diagnosis .report-subjects .score-row {
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    gap: 8px;
    font-size: 0.66rem;
  }

  .page-diagnosis .report-radar .radar-map {
    height: 98px;
  }

  .page-diagnosis .report-radar .radar-map svg {
    height: 94px;
  }

  .page-diagnosis .report-radar .radar-map span {
    font-size: 0.6rem;
  }

  .page-diagnosis .weakness-layout {
    grid-template-columns: minmax(0, 1.48fr) minmax(250px, 0.78fr);
    gap: 16px;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 {
    gap: 12px;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card {
    min-height: 112px;
    padding: 13px 12px 12px;
    border-color: rgba(242, 127, 135, 0.22);
    background:
      radial-gradient(circle at 86% 18%, rgba(242, 127, 135, 0.12), transparent 4.8rem),
      linear-gradient(135deg, rgba(255, 240, 242, 0.9), rgba(255, 255, 255, 0.94));
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card:nth-child(2) {
    border-color: rgba(115, 185, 223, 0.26);
    background:
      radial-gradient(circle at 86% 18%, rgba(115, 185, 223, 0.13), transparent 4.8rem),
      linear-gradient(135deg, rgba(238, 248, 255, 0.9), rgba(255, 255, 255, 0.94));
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card:nth-child(3) {
    border-color: rgba(88, 197, 189, 0.24);
    background:
      radial-gradient(circle at 86% 18%, rgba(88, 197, 189, 0.13), transparent 4.8rem),
      linear-gradient(135deg, rgba(234, 250, 250, 0.9), rgba(255, 255, 255, 0.94));
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card::after {
    content: "!";
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #fff;
    background: var(--coral);
    font-size: 0.68rem;
    font-weight: 900;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card .icon {
    width: 34px;
    height: 34px;
    border-radius: 15px;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card-badge {
    top: 12px;
    right: 12px;
    min-height: 20px;
    padding: 0 9px;
    font-size: 0.58rem;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card h3 {
    margin: 6px 0 4px;
    font-size: 0.78rem;
  }

  .page-diagnosis .weakness-layout .grid.cols-3 .card p,
  .page-diagnosis .weakness-layout .grid.cols-3 .card li {
    font-size: 0.62rem;
    line-height: 1.32;
  }

  .page-diagnosis .weakness-layout > .chart-card {
    min-height: 146px;
    padding: 13px;
  }

  .page-diagnosis .weakness-layout > .chart-card .legend-row {
    gap: 8px;
    margin-top: 8px;
    font-size: 0.62rem;
  }

  .page-diagnosis .advice-priority,
  .page-diagnosis .advice-card {
    min-height: 118px;
  }

  .page-diagnosis .advice-card {
    padding: 12px;
  }

  .page-diagnosis .diagnosis-companion-panel {
    padding: 10px 16px;
  }

  .page-diagnosis .diagnosis-companion-panel .section-title {
    margin-bottom: 7px;
    font-size: 1.05rem;
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(88, 197, 189, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 .card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 68px;
    padding: 9px 14px;
    border: 0;
    border-right: 1px solid rgba(190, 209, 216, 0.58);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 .card:last-child {
    border-right: 0;
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 .icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 999px;
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 .card h3 {
    grid-column: 2;
    margin: 0 0 2px;
    font-size: 0.72rem;
  }

  .page-diagnosis .diagnosis-companion-panel .grid.cols-3 .card p {
    grid-column: 2;
    font-size: 0.56rem;
    line-height: 1.24;
  }
}

@media (min-width: 1600px) {
  :root {
    --content-max: 1480px;
    --page-gutter: 86px;
  }

  .brand {
    min-width: 176px;
  }

  .brand-logo {
    width: 176px;
  }

  .hero {
    min-height: 690px;
  }

  .hero h1 {
    font-size: 5rem;
    max-width: 720px;
  }

  .photo-card {
    width: min(50vw, 850px);
    height: 590px;
  }

  .page-pricing .photo-card img {
    transform: scale(1);
  }
}

@media (max-width: 1023px) {
  .site-nav {
    gap: 16px;
    font-size: 0.88rem;
  }

  .header-actions .secondary {
    display: none;
  }

  .hero h1 {
    font-size: 3.05rem;
  }

  .photo-card img {
    transform: translateY(0) scale(1);
    animation-name: imageFloatTight;
  }

  .lens-shell {
    grid-template-columns: 1fr;
  }

  .lens-copy h2 {
    max-width: 14em;
  }

  .lens-visual {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
    min-height: 300px;
  }

  .lens-figure img {
    min-height: 300px;
  }
}

@media (max-width: 1023px) {
  .page-guide {
    display: none;
  }
}

@media (min-width: 941px) and (max-width: 1439px) {
  .header-actions .secondary {
    display: inline-flex;
  }
}

@media (max-width: 940px) {
  :root {
    --page-gutter: 24px;
  }

  .site-nav {
    gap: 11px;
    font-size: 0.85rem;
  }

  .brand {
    min-width: 128px;
  }

  .brand-logo {
    width: 128px;
  }

  .header-actions .btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.74rem;
  }

  .hero {
    grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.1fr);
  }

  .photo-card {
    right: 0;
    width: min(51vw, 500px);
  }

  .hero-preview-wall {
    display: none;
  }

  .page-progress .hero-widget,
  .page-diagnosis .hero-widget {
    display: none;
  }

  .hero-flow-command {
    width: min(100%, 430px);
  }

  .taste-loop-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - var(--page-gutter) * 2);
    margin-top: 18px;
    padding: 16px;
  }

  .taste-loop-copy {
    padding: 4px 2px 0;
  }

  .taste-loop-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .taste-loop-step {
    min-height: 136px;
    padding: 13px;
  }

  .report-grid,
  .dashboard,
  .concern-row,
  .diagnosis-advice-grid,
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weakness-layout,
  .engine-layout,
  .care-flow {
    grid-template-columns: 1fr;
  }

  .care-plus {
    margin: 0 auto;
  }

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

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

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

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

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

  .journey-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
  }

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

  .consult-arrow {
    display: none;
  }

  .journey-arrow {
    display: none;
  }

  .weekly-flow-arrow {
    display: none;
  }

  .diagnosis-arrow {
    display: none;
  }

  .reason-item:nth-child(2)::after {
    display: none;
  }

  .choice-feature:nth-child(2)::after {
    display: none;
  }

  .chain-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --page-gutter: 18px;
  }

  .site-header {
    height: 64px;
    padding: 0 12px;
  }

  .brand {
    min-width: 0;
  }

  .brand-logo {
    width: 122px;
  }

  .header-actions {
    display: none;
  }
}

@media (max-width: 840px) {
  .site {
    width: 100%;
    box-shadow: none;
  }

  .site-header {
    height: auto;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 14px;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .site-nav a {
    white-space: nowrap;
    padding: 8px 0;
  }

  .site-nav a::after {
    bottom: 1px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 34px 22px 28px;
  }

  .hero h1 {
    font-size: 2.65rem;
  }

  .hero-visual {
    min-height: 300px;
    margin-top: 22px;
  }

  .photo-card {
    right: -22px;
    width: calc(100% + 22px);
    height: 300px;
  }

  .hero-taste-badge {
    max-width: 100%;
    margin-bottom: 14px;
  }

  .hero-flow-command {
    grid-template-columns: 1fr;
    align-items: start;
    width: 100%;
    border-radius: 18px;
  }

  .hero-flow-track {
    flex-wrap: wrap;
  }

  .hero-flow-track i {
    display: none;
  }

  .taste-loop-strip {
    width: calc(100% - 44px);
    margin: 18px 22px 4px;
    border-radius: 20px;
  }

  .taste-loop-rail {
    grid-template-columns: 1fr;
  }

  .hero-points {
    flex-wrap: wrap;
  }

  .hero-social img {
    width: 116px;
  }

  .section {
    padding: 28px 22px;
  }

  .product-lens {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .lens-shell {
    gap: 20px;
    padding: 20px;
    border-radius: 22px;
  }

  .lens-shell::before {
    inset: 10px;
    border-radius: 18px;
  }

  .lens-copy h2 {
    max-width: none;
    font-size: 1.7rem;
  }

  .lens-copy p {
    font-size: 0.9rem;
  }

  .lens-tabs {
    gap: 8px;
  }

  .lens-map-tabs {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 0 0 24px;
  }

  .lens-map-tabs::before,
  .lens-map-tabs::after {
    top: 24px;
    bottom: 24px;
    left: 12px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .lens-map-tabs::after {
    height: 0;
  }

  .product-lens[data-active-lens="1"] .lens-map-tabs::after {
    width: 2px;
    height: 0;
  }

  .product-lens[data-active-lens="2"] .lens-map-tabs::after {
    width: 2px;
    height: calc(33.33% - 8px);
  }

  .product-lens[data-active-lens="3"] .lens-map-tabs::after {
    width: 2px;
    height: calc(66.66% - 16px);
  }

  .lens-tab {
    min-height: 52px;
  }

  .lens-node {
    grid-template-columns: 42px 52px minmax(0, 1fr);
    align-items: center;
    min-height: 92px;
    padding: 13px;
  }

  .lens-node:hover,
  .lens-node.is-active {
    transform: translateX(3px);
  }

  .lens-node > span {
    grid-row: 1 / span 2;
  }

  .lens-node-icon {
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .lens-node strong {
    margin-top: 0;
  }

  .lens-node small {
    grid-column: 3;
  }

  .lens-takeaways {
    grid-template-columns: 1fr;
  }

  .lens-takeaway-list {
    grid-template-columns: 1fr;
  }

  .lens-visual {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lens-figure img {
    min-height: 220px;
  }

  .lens-dashboard {
    grid-template-columns: 1fr;
  }

  .lens-detail {
    min-height: auto;
    padding: 18px;
  }

  .lens-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

	  .grid.cols-2,
	  .grid.cols-3,
	  .grid.cols-4,
	  .grid.cols-5,
	  .plans,
	  .metric-row,
	  .split,
	  .split.reverse,
	  .dashboard,
	  .report-grid,
	  .weakness-layout,
	  .diagnosis-advice-grid,
	  .comparison,
	  .fit-pair,
	  .formula-row,
	  .rhythm-grid,
	  .engine-layout,
	  .concern-row,
	  .care-flow,
	  .connection-chain,
	  .coach-role-grid,
	  .choice-row,
	  .reason-strip,
	  .weekly-flow-track,
	  .consult-steps,
	  .journey-track,
	  .diagnosis-stepper,
	  .mock-dashboard-row,
	  .footer,
	  .consult-strip,
	  .cta-band {
	    grid-template-columns: 1fr;
	  }

  .cta-band.has-media,
  .reassure-card {
    grid-template-columns: 1fr;
  }

  .choice-feature::after {
    display: none;
  }

  .reason-item::after {
    display: none;
  }

  .formula-symbol {
    display: none;
  }

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

  .rhythm-steps div:not(:last-child)::after {
    display: none;
  }

  .engine-venn::before {
    left: 18%;
  }

  .engine-venn::after {
    right: 18%;
  }

  .engine-venn b {
    left: 24%;
  }

  .engine-venn em {
    right: 20%;
  }

  .care-plus {
    margin: 0 auto;
  }

  .plan-card {
    grid-template-columns: 1fr;
  }

  .pricing-plan {
    grid-template-columns: 1fr;
  }

  .pricing-orb {
    padding-top: 0;
  }

  .advice-priority {
    grid-template-columns: 1fr;
  }

  .advice-priority > div {
    min-height: 90px;
  }

  .advice-priority .check-list {
    grid-column: 1;
  }

  .plan-prop {
    justify-self: center;
    order: -1;
  }

	  .mock-metrics,
	  .mock-lower {
	    grid-template-columns: 1fr;
	  }

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

  .comparison .vs {
    margin: 0 auto;
  }

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

  .stat:nth-child(2) {
    border-right: 0;
  }

  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid #e6eef0;
  }

  .cta-band {
    margin: 0 22px 28px;
    padding: 28px;
  }

  .cta-band.has-mark {
    padding-left: 28px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .cta-mark {
    position: static;
    transform: none;
    order: -1;
  }

	  .consult-strip {
	    padding: 24px;
	  }

  .cta-figure {
    justify-self: end;
    max-width: 280px;
  }
	}

@media (max-width: 520px) {
  .header-actions .secondary {
    display: none;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero-taste-badge {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 0.68rem;
  }

  .hero-taste-badge .badge-label {
    display: none;
  }

  .hero-flow-command {
    margin-top: 16px;
  }

  .taste-loop-copy strong {
    font-size: 1.22rem;
  }

  .hero-points {
    gap: 14px;
  }

  .hero-point {
    width: calc(50% - 8px);
  }

  .lens-shell {
    padding: 16px;
  }

  .lens-copy h2 {
    font-size: 1.46rem;
  }

  .lens-tab {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 8px 10px;
  }

  .lens-tab span {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .lens-proof-grid {
    grid-template-columns: 1fr;
  }

  .mini-cards .card {
    grid-template-columns: 1fr;
  }

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

  .stat {
    border-right: 0;
    border-bottom: 1px solid #e6eef0;
  }

  .stat:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 941px) {
  .hero {
    isolation: isolate;
    --hero-fit-vw: 45vw;
    --hero-min-height: 420px;
    --hero-max-height: 880px;
    --hero-vh-gap: clamp(34px, 4.8vh, 64px);
    --hero-vh-fit: calc(100svh - var(--header-height) - var(--hero-vh-gap));
    --hero-image-ratio: 1.777;
    --hero-aspect-height: calc(100vw / var(--hero-image-ratio));
    --hero-stage-height: clamp(var(--hero-min-height), min(var(--hero-fit-vw), var(--hero-vh-fit)), var(--hero-max-height));
    --hero-title-size: clamp(2.42rem, calc(0.15rem + 3.55vw), 4.85rem);
    --hero-copy-size: clamp(0.82rem, calc(0.25rem + 0.75vw), 1.18rem);
    --hero-point-size: clamp(0.7rem, calc(0.42rem + 0.36vw), 0.92rem);
    --hero-point-width: clamp(106px, calc(68px + 4.2vw), 154px);
    --hero-icon-size: clamp(38px, calc(14px + 2.6vw), 58px);
    height: var(--hero-stage-height);
    min-height: var(--hero-stage-height);
    grid-template-columns: minmax(340px, 560px) 1fr;
    padding: clamp(46px, 5.2vw, 88px) clamp(46px, 6.8vw, 124px) clamp(38px, 4.8vw, 76px);
    background: #f9fdff;
  }

  .hero::before {
    z-index: 1;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.86), transparent 26rem),
      radial-gradient(circle at 86% 22%, rgba(116, 187, 225, 0.16), transparent 30rem);
  }

  .hero-content {
    z-index: 4;
    max-width: clamp(540px, 41vw, 760px);
    align-self: start;
  }

  .hero h1 {
    max-width: clamp(520px, 42vw, 760px);
    font-size: var(--hero-title-size);
    line-height: 1.16;
  }

  .page-main:not(.page-diagnosis) .hero h1 {
    max-width: clamp(430px, 42vw, 720px);
    line-height: 1.14;
  }

  .hero-copy {
    max-width: clamp(470px, 36vw, 660px);
    margin-top: clamp(13px, 1.28vw, 24px);
    font-size: var(--hero-copy-size);
    line-height: 1.78;
  }

  .hero-actions {
    gap: clamp(12px, 1.05vw, 18px);
    margin-top: clamp(20px, 2vw, 34px);
  }

  .hero-note {
    margin-top: clamp(10px, 0.95vw, 16px);
    font-size: clamp(0.78rem, 0.74vw, 0.9rem);
  }

  .hero-social {
    margin-top: clamp(16px, 1.6vw, 28px);
    font-size: clamp(0.74rem, 0.72vw, 0.88rem);
  }

  .hero-social img {
    width: clamp(112px, 9vw, 150px);
  }

  .hero-points {
    gap: clamp(14px, 1.8vw, 34px);
    margin-top: clamp(22px, 2.3vw, 40px);
  }

  .hero-point {
    width: var(--hero-point-width);
    gap: clamp(6px, 0.7vw, 10px);
    font-size: var(--hero-point-size);
  }

  .hero-point .icon {
    width: var(--hero-icon-size);
    height: var(--hero-icon-size);
    border-radius: clamp(16px, 1.35vw, 22px);
  }

  .hero-point .icon svg {
    width: calc(var(--hero-icon-size) * 0.56);
    height: calc(var(--hero-icon-size) * 0.56);
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
    pointer-events: none;
  }

  .photo-card {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    height: auto;
    min-width: min(100vw, calc(var(--hero-stage-height) * var(--hero-image-ratio)));
    max-width: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 18%, rgba(255, 255, 255, 0.3) 34%, transparent 54%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 68%, rgba(255, 255, 255, 0.38));
  }

  .page-system .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.56) 19%, rgba(255, 255, 255, 0.18) 34%, transparent 52%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%, rgba(255, 255, 255, 0.52));
  }

  .photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    animation: none;
    filter: saturate(1.03) contrast(1.02);
  }

  .page-home .photo-card,
  .page-about .photo-card,
  .page-programs .photo-card,
  .page-progress .photo-card,
  .page-diagnosis .photo-card,
  .page-system .photo-card,
  .page-coach .photo-card,
  .page-pricing .photo-card,
  .page-parent .photo-card {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    height: auto;
    min-width: min(100vw, calc(var(--hero-stage-height) * var(--hero-image-ratio)));
    max-width: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-progress .hero {
    --hero-fit-vw: 52vw;
    --hero-min-height: 520px;
    --hero-max-height: 940px;
    --hero-image-ratio: 1.777;
  }

  .page-diagnosis .hero {
    --hero-fit-vw: 52vw;
    --hero-min-height: 480px;
    --hero-max-height: 940px;
    --hero-image-ratio: 1.777;
  }

  .page-coach .hero {
    --hero-fit-vw: 53vw;
    --hero-min-height: 520px;
    --hero-image-ratio: 1.555;
  }

  .page-parent .hero {
    --hero-fit-vw: 54vw;
    --hero-min-height: 450px;
    --hero-image-ratio: 1.211;
  }

  .page-parent .hero h1 {
    max-width: 690px;
    text-wrap: initial;
  }

  .page-home .hero {
    --hero-fit-vw: 52vw;
    --hero-min-height: 420px;
    --hero-image-ratio: 1.555;
  }

  .page-about .hero {
    --hero-fit-vw: 53vw;
    --hero-min-height: 480px;
    --hero-image-ratio: 1.445;
  }

  .page-programs .hero,
  .page-pricing .hero {
    --hero-fit-vw: 52vw;
    --hero-min-height: 430px;
    --hero-image-ratio: 1.389;
  }

  .page-system .hero {
    --hero-fit-vw: 53vw;
    --hero-min-height: 430px;
    --hero-image-ratio: 1.317;
  }

  .page-about .hero h1,
  .page-diagnosis .hero h1,
  .page-coach .hero h1,
  .page-parent .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .page-home .photo-card img {
    object-position: right center;
  }

  .page-home .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.84) 27%, rgba(255, 255, 255, 0.34) 48%, transparent 68%),
      linear-gradient(180deg, transparent 76%, rgba(255, 255, 255, 0.42));
  }

  .page-about .photo-card img {
    object-position: right center;
  }

  .page-programs .photo-card img,
  .page-system .photo-card img {
    object-position: right center;
  }

  .page-progress .photo-card img {
    object-position: right center;
  }

  .page-progress .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.12) 28%, transparent 54%),
      linear-gradient(180deg, transparent 78%, rgba(255, 255, 255, 0.55));
  }

  .page-diagnosis .photo-card img {
    object-position: right center;
  }

  .page-coach .photo-card img {
    object-position: right center;
  }

  .page-pricing .photo-card img,
  .page-parent .photo-card img {
    object-position: right center;
  }

  .page-pricing .photo-card {
    left: 0;
    width: 100%;
    min-width: 100%;
  }

  .page-pricing .photo-card img {
    object-fit: contain;
    object-position: center center;
    filter: none;
    opacity: 1;
  }

  .page-pricing .hero {
    background: linear-gradient(90deg, #86abd4 0%, #94b8dc 44%, #c3ddf1 100%);
  }

  .page-pricing .hero::before {
    background: none;
  }

  .page-pricing .hero h1 {
    font-size: 2.92rem;
    line-height: 1.18;
  }

  .page-pricing .hero-copy {
    margin-top: 14px;
    line-height: 1.55;
  }

  .page-pricing .hero-points {
    margin-top: 30px;
  }

  .page-pricing .photo-card::after {
    background: linear-gradient(90deg, rgba(126, 171, 211, 0.2), rgba(126, 171, 211, 0.06) 20%, transparent 44%);
  }

  .page-parent .photo-card::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.86) 20%, rgba(255, 255, 255, 0.24) 42%, transparent 62%),
      linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.36));
  }

  .page-coach .hero::after {
    z-index: 1;
  }

  .page-diagnosis .hero-visual,
  .page-progress .hero-visual {
    min-height: 100%;
  }

  .page-progress .hero-widget.one {
    top: clamp(68px, 9vw, 138px);
    bottom: auto;
    left: auto;
    right: clamp(320px, 38vw, 720px);
  }

  .page-progress .hero-widget.two {
    top: clamp(72px, 9.5vw, 150px);
    right: clamp(40px, 7vw, 132px);
  }

  .page-progress .hero-widget.three {
    right: clamp(70px, 10vw, 172px);
    bottom: clamp(58px, 8vw, 122px);
  }

  .page-diagnosis .hero-widget.one {
    left: auto;
    right: clamp(310px, 37vw, 690px);
    top: clamp(190px, 22vw, 330px);
    bottom: auto;
  }

  .page-diagnosis .hero-widget.two {
    top: clamp(86px, 10vw, 160px);
    right: clamp(46px, 7vw, 136px);
  }

  .page-diagnosis .hero-widget.three {
    right: clamp(78px, 11vw, 190px);
    bottom: clamp(48px, 8vw, 118px);
  }
}

@media (min-width: 941px) and (max-width: 1199px) {
  .hero {
    --hero-fit-vw: 45vw;
    --hero-min-height: 420px;
    --hero-max-height: 620px;
    --hero-vh-gap: clamp(28px, 4.8vh, 42px);
    --hero-stage-height: clamp(var(--hero-min-height), min(var(--hero-fit-vw), var(--hero-vh-fit)), var(--hero-max-height));
  }

  .page-home .hero {
    --hero-fit-vw: 44vw;
    --hero-max-height: 560px;
  }

  .page-home .hero-content {
    transform: translateY(10px);
  }

  .page-about .hero {
    --hero-fit-vw: 45vw;
    --hero-max-height: 590px;
  }

  .page-programs .hero {
    --hero-fit-vw: 40vw;
    --hero-image-ratio: 1.4;
    --hero-min-height: 385px;
    --hero-max-height: 430px;
  }

  .page-progress .hero {
    --hero-fit-vw: 45vw;
    --hero-max-height: 600px;
    min-height: var(--hero-stage-height);
  }

  .page-progress .hero-content {
    transform: none;
  }

  .page-diagnosis .hero {
    --hero-fit-vw: 45vw;
    --hero-max-height: 620px;
    min-height: 460px;
    padding-top: 42px;
  }

  .page-diagnosis .hero h1 {
    max-width: 430px;
    font-size: 2.08rem;
    line-height: 1.06;
  }

  .page-main:not(.page-diagnosis) .hero h1 {
    max-width: 430px;
    font-size: 2.08rem;
    line-height: 1.08;
  }

  .page-diagnosis .hero-copy {
    max-width: 430px;
  }

  .page-diagnosis .hero-visual {
    min-height: 100%;
  }

  .page-diagnosis .hero-widget {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 32px rgba(51, 84, 96, 0.1);
  }

  .page-diagnosis .hero-widget span {
    color: #68727d;
  }

  .page-diagnosis .hero-widget.one {
    left: auto;
    right: clamp(54px, 7.2vw, 76px);
    top: clamp(28px, calc(var(--hero-stage-height) * 0.1), 58px);
    bottom: auto;
  }

  .page-diagnosis .hero-widget.two {
    right: clamp(30px, 4.4vw, 54px);
    top: clamp(220px, calc(var(--hero-stage-height) * 0.45), 284px);
  }

  .page-diagnosis .hero-widget.three {
    right: clamp(282px, 33vw, 330px);
    bottom: clamp(18px, calc(var(--hero-stage-height) * 0.05), 38px);
  }

  .page-diagnosis .diagnosis-step-panel {
    padding: 20px 22px;
  }

  .page-diagnosis .diagnosis-step {
    min-height: 142px;
    padding: 0 4px;
  }

  .page-diagnosis .diagnosis-step .icon {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
  }

  .page-diagnosis .diagnosis-step h3 {
    font-size: 0.86rem;
  }

  .page-diagnosis .diagnosis-step p {
    font-size: 0.66rem;
    line-height: 1.34;
  }

  .page-diagnosis .diagnosis-arrow {
    margin-top: 38px;
  }

  .page-coach .hero {
    --hero-fit-vw: 52vw;
    --hero-min-height: 470px;
    --hero-max-height: 620px;
  }

  .page-system .hero {
    --hero-fit-vw: 44vw;
    --hero-max-height: 560px;
  }

  .page-pricing .hero {
    --hero-fit-vw: 44vw;
    --hero-max-height: 560px;
  }

  .page-parent .hero {
    --hero-fit-vw: 45vw;
    --hero-max-height: 580px;
  }

  .page-home .section {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .footer-home {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .page-programs .section {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .page-programs .hero + .section {
    padding-top: 20px;
  }

  .footer-programs {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .page-system .section {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .page-pricing .section {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .page-pricing .hero + .section {
    padding-bottom: 6px;
  }

  .page-pricing .hero-content {
    transform: translateY(10px);
  }

  .page-pricing .pricing-plan {
    min-height: 276px;
    padding: 22px 28px 18px;
  }

  .page-pricing .faq-section {
    padding-top: 8px;
  }

  .page-pricing .faq-section .section-title {
    margin-bottom: 4px;
  }

  .page-parent .section {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .page-parent .cta-band {
    margin-bottom: 55px;
  }
}

@media (min-width: 941px) and (max-width: 1199px) and (max-height: 900px) {
  .page-home .hero {
    --hero-fit-vw: 52vw;
  }

  .page-about .hero {
    --hero-fit-vw: 53vw;
  }

  .page-programs .hero,
  .page-pricing .hero {
    --hero-fit-vw: 52vw;
  }

  .page-diagnosis .hero,
  .page-progress .hero {
    --hero-fit-vw: 52vw;
  }

  .page-system .hero {
    --hero-fit-vw: 53vw;
  }

  .page-coach .hero {
    --hero-fit-vw: 53vw;
  }

  .page-parent .hero {
    --hero-fit-vw: 54vw;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .hero {
    --hero-title-size: clamp(3.3rem, 4.3vw, 4.35rem);
    --hero-copy-size: clamp(1.08rem, 1.22vw, 1.24rem);
    --hero-point-size: clamp(0.88rem, 0.92vw, 1rem);
    --hero-point-width: clamp(148px, 11.4vw, 180px);
    --hero-icon-size: clamp(52px, 4.1vw, 64px);
    grid-template-columns: minmax(610px, 760px) 1fr;
    padding-left: clamp(72px, 6.2vw, 104px);
  }

  .hero-content {
    max-width: clamp(660px, 51vw, 820px);
  }

  .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .hero-copy {
    max-width: clamp(570px, 43vw, 690px);
    margin-top: clamp(18px, 1.55vw, 28px);
    line-height: 1.76;
  }

  .hero-actions {
    gap: clamp(14px, 1.25vw, 22px);
    margin-top: clamp(26px, 2.35vw, 38px);
  }

  .hero-actions .btn {
    min-height: clamp(46px, 3.6vw, 54px);
    padding: 0 clamp(24px, 2.05vw, 34px);
    font-size: clamp(0.92rem, 0.82vw, 1rem);
  }

  .hero-social {
    gap: clamp(10px, 1vw, 16px);
    margin-top: clamp(20px, 1.9vw, 32px);
    font-size: clamp(0.86rem, 0.78vw, 0.98rem);
  }

  .hero-social img {
    width: clamp(142px, 11vw, 176px);
  }

  .hero-points {
    gap: clamp(26px, 2.45vw, 44px);
    margin-top: clamp(30px, 2.7vw, 48px);
  }

  .page-home .hero h1,
  .page-programs .hero h1,
  .page-system .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .page-home .hero-copy,
  .page-programs .hero-copy,
  .page-system .hero-copy {
    max-width: clamp(570px, 43vw, 690px);
    margin-top: clamp(18px, 1.55vw, 28px);
  }

  .page-home .hero-points,
  .page-diagnosis .hero-points,
  .page-coach .hero-points,
  .page-pricing .hero-points {
    margin-top: clamp(30px, 2.7vw, 48px);
  }

  .page-about .hero,
  .page-coach .hero,
  .page-diagnosis .hero,
  .page-parent .hero {
    --hero-title-size: clamp(3.3rem, 4.3vw, 4.35rem);
    --hero-copy-size: clamp(1.04rem, 1.12vw, 1.2rem);
  }

  .page-pricing .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .page-pricing .hero-copy {
    max-width: clamp(540px, 40vw, 660px);
    margin-top: clamp(18px, 1.55vw, 28px);
  }
}

@media (min-width: 941px) and (max-height: 1000px) {
  .hero {
    --hero-aspect-target: min(var(--hero-aspect-height), var(--hero-vh-fit));
    --hero-fit-target: min(max(var(--hero-fit-vw), var(--hero-aspect-target)), var(--hero-vh-fit));
    --hero-stage-height: clamp(var(--hero-min-height), var(--hero-fit-target), var(--hero-max-height));
  }
}

@media (min-width: 1600px) {
  .hero {
    --hero-min-height: 620px;
    --hero-max-height: 1080px;
    --hero-vh-gap: clamp(42px, 4vh, 76px);
    --hero-vh-fill-gap: clamp(54px, 6vh, 96px);
    --hero-title-size: clamp(4rem, 3.9vw, 4.75rem);
    --hero-copy-size: clamp(1.18rem, 1.05vw, 1.34rem);
    --hero-point-size: clamp(0.98rem, 0.76vw, 1.14rem);
    --hero-point-width: clamp(166px, 10.8vw, 210px);
    --hero-icon-size: clamp(60px, 3.7vw, 72px);
    grid-template-columns: minmax(720px, 880px) 1fr;
    padding-left: clamp(96px, 7vw, 148px);
  }

  .hero-content {
    max-width: clamp(760px, 47vw, 960px);
  }

  .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.08;
  }

  .page-main:not(.page-diagnosis) .hero h1 {
    line-height: 1.08;
  }

  .hero-copy {
    max-width: clamp(620px, 39vw, 780px);
    font-size: var(--hero-copy-size);
  }

  .hero-actions .btn {
    min-height: clamp(50px, 3.1vw, 58px);
    padding: 0 clamp(28px, 2vw, 38px);
    font-size: clamp(0.96rem, 0.76vw, 1.08rem);
  }

  .hero-social {
    gap: clamp(12px, 0.9vw, 18px);
    font-size: clamp(0.9rem, 0.72vw, 1.02rem);
  }

  .hero-social img {
    width: clamp(154px, 10vw, 196px);
  }

  .hero-points {
    gap: clamp(32px, 2.35vw, 54px);
  }

  .page-about .hero h1,
  .page-diagnosis .hero h1,
  .page-coach .hero h1,
  .page-parent .hero h1 {
    font-size: clamp(4rem, 3.9vw, 4.75rem);
    line-height: 1.08;
  }

  .page-pricing .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.08;
  }

  .page-progress .hero {
    --hero-max-height: 1080px;
  }

  .page-diagnosis .hero {
    --hero-max-height: 1080px;
  }

  .page-about .hero-copy,
  .page-diagnosis .hero-copy,
  .page-coach .hero-copy,
  .page-parent .hero-copy {
    max-width: clamp(620px, 38vw, 760px);
  }
}

@media (min-width: 941px) {
  .page-main .hero-content {
    transform: none;
  }

  .page-main .hero h1 {
    font-family:
      "Noto Sans TC",
      "PingFang TC",
      "Microsoft JhengHei",
      system-ui,
      sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .page-coach .eyebrow,
  .page-parent .eyebrow {
    display: none;
  }
}

@media (min-width: 941px) and (max-width: 1199px) {
  .page-main .hero {
    padding-top: 42px;
    padding-left: 52px;
  }

  .page-main .hero-content,
  .page-main .hero h1,
  .page-main .hero-copy {
    max-width: 430px;
  }

  .page-main .hero h1 {
    font-size: 2.08rem;
    line-height: 1.06;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .page-main .hero {
    padding-top: 48px;
    padding-left: 52px;
  }

  .page-main .hero-content {
    max-width: clamp(660px, 51vw, 820px);
  }

  .page-main .hero h1 {
    max-width: clamp(540px, 42vw, 720px);
    font-size: var(--hero-title-size);
    line-height: 1.14;
  }

  .page-main .hero-copy {
    max-width: clamp(570px, 43vw, 690px);
  }
}

@media (min-width: 1600px) {
  .page-main .hero {
    padding-top: clamp(46px, 5.2vw, 88px);
    padding-left: clamp(96px, 7vw, 148px);
  }

  .page-main .hero-content {
    max-width: clamp(760px, 47vw, 960px);
  }

  .page-main .hero h1 {
    max-width: clamp(720px, 42vw, 860px);
    font-size: var(--hero-title-size);
    line-height: 1.08;
  }

  .site .page-main .hero h1 {
    max-width: clamp(720px, 42vw, 860px);
  }

  .page-main .hero-copy {
    max-width: clamp(620px, 39vw, 780px);
  }
}

@media (min-width: 941px) {
  .hero-preview-wall {
    top: clamp(34px, 5vw, 68px);
    right: clamp(18px, 4.2vw, 72px);
    bottom: clamp(28px, 4.8vw, 68px);
    width: clamp(248px, 23vw, 332px);
    min-width: 0;
    height: auto;
  }

  .hero-preview-card {
    border-color: rgba(255, 255, 255, 0.86);
    border-radius: 16px;
    background:
      radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.62), transparent 150px),
      rgba(255, 255, 255, 0.82);
    box-shadow:
      0 18px 42px rgba(49, 79, 90, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .preview-main {
    top: 0;
    min-height: clamp(118px, 10vw, 148px);
    grid-template-columns: minmax(0, 1fr) clamp(70px, 6.4vw, 92px);
    gap: 10px;
    padding: clamp(12px, 1.1vw, 15px);
  }

  .preview-main figure {
    border-radius: 12px;
  }

  .preview-metric {
    top: -14px;
    right: -4px;
    width: clamp(106px, 9vw, 132px);
    padding: clamp(11px, 1vw, 13px) clamp(12px, 1.1vw, 15px);
  }

  .preview-metric strong {
    font-size: clamp(1.35rem, 2vw, 1.62rem);
  }

  .preview-proof {
    right: clamp(6px, 1.2vw, 18px);
    bottom: 0;
    left: auto;
    width: clamp(210px, 19vw, 248px);
    padding: clamp(12px, 1vw, 14px);
  }

  .preview-proof div {
    gap: 6px;
  }

  .preview-proof i {
    min-height: 22px;
    padding-inline: 8px;
  }

  .hero-preview-card p {
    font-size: clamp(0.68rem, 0.62vw, 0.75rem);
    line-height: 1.52;
  }

  .hero-preview-card strong {
    font-size: clamp(0.92rem, 0.88vw, 1.02rem);
  }

  .hero-preview-card span,
  .hero-preview-card em {
    font-size: clamp(0.64rem, 0.58vw, 0.72rem);
  }

  .page-progress .hero-widget.one {
    top: clamp(46px, 6.2vw, 96px);
    right: clamp(340px, 39vw, 720px);
  }

  .page-progress .hero-widget.two {
    top: clamp(32px, 4.6vw, 74px);
    right: clamp(26px, 4.8vw, 92px);
  }

  .page-progress .hero-widget.three {
    right: clamp(54px, 9vw, 156px);
    bottom: clamp(44px, 7vw, 108px);
  }

  .page-coach .preview-main {
    display: none;
  }
}

@media (max-width: 1439px) {
  .advantage-hero-panel {
    grid-template-columns: minmax(0, 1fr);
  }

	  .advantage-hero-panel::before {
	    background:
	      linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 56%, rgba(255, 255, 255, 0.48) 84%, transparent),
	      linear-gradient(135deg, rgba(88, 197, 189, 0.12), transparent 42%);
	  }

  .advantage-hero-panel figure {
    position: absolute;
    inset: 0 0 0 42%;
  }
}

@media (max-width: 1000px) {
  .advantage-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .advantage-showcase {
    gap: 18px;
  }

  .advantage-hero-panel {
    min-height: 430px;
    border-radius: 22px;
  }

	  .advantage-hero-panel figure {
	    inset: auto 0 0 0;
	    min-height: 0;
	    height: 58%;
	  }

  .advantage-hero-panel figure img {
    object-position: 50% center;
  }

	  .advantage-hero-panel::before {
	    background:
	      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0 55%, rgba(255, 255, 255, 0.38) 72%, transparent),
	      linear-gradient(135deg, rgba(88, 197, 189, 0.12), transparent 48%);
	  }

  .advantage-hero-copy {
    align-self: start;
    padding: 26px;
  }

  .advantage-hero-copy h2 {
    font-size: 2.7rem;
    white-space: nowrap;
  }

  .advantage-hero-copy p {
    font-size: 0.95rem;
    letter-spacing: 0;
  }

	  .advantage-feature-card {
	    height: 420px;
	    border-radius: 20px;
	  }

  .advantage-feature-grid {
    grid-template-columns: 1fr;
  }

	  .advantage-feature-copy {
	    top: 22px;
	    left: 22px;
	    right: 22px;
	    max-width: none;
	  }

  .advantage-feature-copy span {
    font-size: 2.25rem;
  }

  .advantage-feature-copy h3 {
    font-size: 1.02rem;
  }

  .advantage-feature-card::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0 34%, rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0.84) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent 70%);
  }

  .advantage-feature-card > img {
    object-position: center center;
  }

	  .adv-ui-card {
	    left: 18px;
	    right: 18px;
    bottom: 18px;
    width: auto;
	    min-height: 110px;
	  }

  .image-ui {
    min-height: 128px;
  }

  .advantage-flow-strip {
    height: 250px;
    aspect-ratio: auto;
    border-radius: 20px;
  }

  .advantage-flow-strip img {
    object-fit: cover;
  }

	  .advantage-mini-cta {
	    grid-template-columns: 1fr;
	    justify-items: stretch;
	    padding: 22px;
	    text-align: center;
	  }

	  .advantage-cta-divider {
	    display: none;
	  }

	  .advantage-cta-actions {
	    justify-content: center;
	  }

	  .advantage-cta-actions .btn {
	    width: min(100%, 260px);
	  }
	}

@media (max-width: 520px) {
  .advantage-hero-panel {
    min-height: 392px;
  }

  .advantage-hero-copy {
    padding: 22px;
  }

  .advantage-hero-copy h2 {
    font-size: 2.42rem;
  }

	  .advantage-feature-card {
	    height: 390px;
	  }

  .advantage-feature-copy p {
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .adv-ui-card {
    padding: 13px;
  }

  .data-ui b {
    font-size: 1rem;
  }
}

@media (max-width: 1439px) {
  .system-role-compare {
    grid-template-columns: 1fr;
  }

  .system-showcase-shell,
  .system-showcase-shell.reverse {
    grid-template-columns: 1fr;
  }

  .system-showcase-shell.reverse .system-showcase-copy {
    order: 1;
  }

  .system-showcase-shell.reverse .system-visual {
    order: 2;
  }

  .system-showcase-copy {
    max-width: 680px;
  }

  .system-showcase .section-title {
    font-size: 2.2rem;
  }

  .rhythm-live-row {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .rhythm-coach-card {
    grid-column: 1 / -1;
  }

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

  .engine-panel.ai {
    order: 1;
  }

  .engine-panel.coach {
    order: 2;
  }

  .engine-core {
    order: 3;
    grid-column: 1 / -1;
    grid-template-columns: 64px 40px 64px;
    min-height: 168px;
  }

  .engine-result-strip {
    order: 4;
  }

  .engine-core i {
    width: 40px;
    height: 2px;
  }

  .engine-core strong,
  .engine-core p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .journey-route-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .journey-route-board svg {
    display: none;
  }

  .journey-route-point {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 118px;
    transform: none;
  }

  .journey-action-strip {
    grid-template-columns: 1fr;
  }

  .rhythm-week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .data-dashboard-main {
    grid-template-columns: 1fr;
  }

  .data-subject-panel {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .system-showcase .section-title {
    font-size: 1.82rem;
    line-height: 1.22;
  }

  .system-showcase-copy p {
    font-size: 0.88rem;
    line-height: 1.75;
  }

  .system-proof-pills {
    gap: 7px;
    margin-top: 16px;
  }

  .system-proof-pills span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .system-visual {
    padding: 10px;
    border-radius: 20px;
  }

  .system-visual::after {
    inset: 7px;
    border-radius: 16px;
  }

  .system-window,
  .rhythm-planner,
  .engine-console,
  .data-dashboard {
    border-radius: 16px;
  }

  .journey-window {
    min-height: 0;
  }

  .journey-route-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  .journey-route-point {
    min-height: 112px;
    border-radius: 15px;
  }

  .journey-route-point .icon {
    width: 34px;
    height: 34px;
  }

  .journey-action-strip {
    padding: 0 12px 12px;
  }

  .rhythm-planner,
  .engine-console,
  .data-dashboard {
    padding: 14px;
  }

  .rhythm-planner-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

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

  .rhythm-day:last-child {
    grid-column: 1 / -1;
  }

  .rhythm-day {
    min-height: 118px;
  }

  .rhythm-live-row,
  .engine-console,
  .data-metric-grid,
  .engine-result-strip {
    grid-template-columns: 1fr;
  }

  .engine-core,
  .engine-result-strip {
    grid-column: auto;
  }

  .engine-core {
    grid-template-columns: 58px 34px 58px;
    min-height: 156px;
  }

  .engine-core span {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .engine-core i {
    width: 34px;
  }

  .data-toolbar {
    gap: 8px;
    padding: 0 12px;
  }

  .data-toolbar b {
    font-size: 0.72rem;
  }

  .data-toolbar em {
    min-height: 25px;
    padding: 0 8px;
    font-size: 0.66rem;
  }
}

@media (max-width: 360px) {
  .journey-route-board,
  .rhythm-week-grid {
    grid-template-columns: 1fr;
  }

  .rhythm-day:last-child {
    grid-column: auto;
  }

  .rhythm-ring {
    min-height: 128px;
  }

  .data-note-card {
    align-items: flex-start;
  }
}

@media (max-width: 940px) {
  .scenario-diagnosis-grid,
  .scenario-program-columns,
  .scenario-coach-room,
  .scenario-parent-grid,
  .scenario-metric-row,
  .scenario-progress-track {
    grid-template-columns: 1fr;
  }

  .scenario-parent-loop {
    grid-template-columns: 1fr;
  }

  .scenario-parent-loop i {
    width: 2px;
    height: 18px;
    margin: 0 auto;
  }

  .scenario-coach-status,
  .scenario-parent-loop {
    grid-column: auto;
  }

  .reassure-card {
    grid-template-columns: 1fr;
  }

  .reassure-visual {
    min-height: 210px;
  }
}

@media (max-width: 620px) {
  .lens-stage.has-scenario {
    min-height: 0;
  }

  .lens-scenario {
    min-height: 340px;
    padding: 56px 12px 86px;
    border-radius: 18px;
  }

  .scenario-window-bar {
    padding: 0 12px;
  }

  .scenario-window-bar em {
    display: none;
  }

  .scenario-question-card,
  .scenario-scan-card,
  .scenario-report-card,
  .scenario-program-columns article,
  .scenario-task-panel,
  .scenario-chat-panel,
  .scenario-coach-status,
  .scenario-parent-report,
  .scenario-parent-message,
  .scenario-parent-loop,
  .scenario-chart-board {
    border-radius: 15px;
  }

  .scenario-recommend-strip,
  .scenario-coach-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .scenario-chart-board svg {
    height: 126px;
  }

  .reassure-visual {
    min-height: 190px;
  }
}

.page-diagnosis .diagnosis-process-section,
.page-diagnosis .diagnosis-report-section,
.page-diagnosis .diagnosis-weakness-section,
.page-diagnosis .diagnosis-plan-section,
.page-diagnosis .diagnosis-partner-section {
  padding-top: clamp(34px, 5vw, 70px);
  padding-bottom: clamp(34px, 5vw, 70px);
}

.diagnosis-process-shell,
.diagnosis-report-shell,
.diagnosis-weakness-shell,
.diagnosis-plan-shell,
.diagnosis-partner-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(194, 225, 228, 0.8);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 8%), rgba(88, 197, 189, 0.14), transparent 20rem),
    linear-gradient(135deg, rgba(244, 253, 253, 0.96), rgba(255, 255, 255, 0.98) 48%, rgba(255, 244, 245, 0.82));
  box-shadow:
    0 30px 80px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.diagnosis-process-shell::before,
.diagnosis-report-shell::before,
.diagnosis-weakness-shell::before,
.diagnosis-plan-shell::before,
.diagnosis-partner-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.048) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.diagnosis-process-shell > *,
.diagnosis-report-shell > *,
.diagnosis-weakness-shell > *,
.diagnosis-plan-shell > *,
.diagnosis-partner-shell > * {
  position: relative;
  z-index: 1;
}

.diagnosis-block-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.diagnosis-block-heading.align-left {
  justify-items: start;
  margin: 0;
  text-align: left;
}

.diagnosis-block-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.diagnosis-block-heading h2 {
  margin: 0;
  color: #253040;
  font-size: clamp(1.7rem, 2.85vw, 3rem);
  line-height: 1.26;
  font-weight: 950;
  letter-spacing: 0;
}

.diagnosis-block-heading p {
  max-width: 58ch;
  margin: 0;
  color: #607080;
  font-size: clamp(0.94rem, 1vw, 1.05rem);
  font-weight: 740;
  line-height: 1.72;
}

.diagnosis-process-shell {
  padding: clamp(28px, 4.4vw, 58px);
}

.diagnosis-process-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.16fr) minmax(230px, 0.72fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
  margin-top: clamp(28px, 3.8vw, 48px);
}

.diagnosis-process-rail {
  display: grid;
  gap: 12px;
}

.diagnosis-process-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 20px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px rgba(49, 79, 90, 0.06);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.diagnosis-process-step:hover,
.diagnosis-process-step:focus-visible,
.diagnosis-process-step.is-active {
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(248, 255, 255, 0.95);
  box-shadow: 0 22px 52px rgba(49, 79, 90, 0.1);
  transform: translateY(-2px);
}

.diagnosis-process-step b {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.72rem;
  font-weight: 950;
}

.diagnosis-process-step .icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 16px;
}

.diagnosis-process-step strong,
.diagnosis-process-step span,
.diagnosis-process-step em {
  grid-column: 3;
}

.diagnosis-process-step strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.34;
  font-weight: 950;
}

.diagnosis-process-step span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.42;
}

.diagnosis-process-step em {
  justify-self: start;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 24px;
}

.diagnosis-process-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  margin: 0;
}

.process-device {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  width: min(100%, 560px);
  padding: 18px;
  border: 1px solid rgba(204, 225, 230, 0.95);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 253, 0.94)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.08), rgba(115, 185, 223, 0.07));
  box-shadow:
    0 30px 72px rgba(49, 79, 90, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.process-device-bar,
.report-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 230, 234, 0.82);
}

.process-device-bar i,
.report-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.process-device-bar i:nth-child(2),
.report-browser-bar i:nth-child(2) {
  background: var(--coral);
}

.process-device-bar i:nth-child(3),
.report-browser-bar i:nth-child(3) {
  background: var(--sky);
}

.process-device-bar span,
.report-browser-bar span {
  margin-left: 6px;
  color: #435262;
  font-size: 0.78rem;
  font-weight: 900;
}

.process-question-card,
.process-scan-card,
.process-result-card {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(49, 79, 90, 0.06);
}

.process-question-card small,
.process-scan-card small,
.process-result-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.process-question-card strong,
.process-scan-card strong,
.process-result-card strong {
  display: block;
  margin-top: 5px;
  color: #253040;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 950;
}

.process-question-card span,
.process-result-card span {
  display: block;
  margin-top: 9px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  color: #47616a;
  background: rgba(234, 250, 250, 0.94);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 32px;
}

.process-question-card span:nth-of-type(2),
.process-result-card span:nth-of-type(2) {
  background: rgba(255, 240, 242, 0.9);
}

.process-scan-card {
  display: grid;
  place-items: center;
  min-height: 150px;
  text-align: center;
}

.process-scan-card .icon {
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
  border-radius: 20px;
}

.process-scan-line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 38%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(88, 197, 189, 0.88), transparent);
  animation: scanDown 3.8s ease-in-out infinite;
}

.process-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.process-orbit span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 10px rgba(88, 197, 189, 0.12);
}

.process-orbit span:nth-child(1) {
  left: 6%;
  top: 22%;
}

.process-orbit span:nth-child(2) {
  right: 8%;
  top: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 10px rgba(242, 127, 135, 0.12);
}

.process-orbit span:nth-child(3) {
  left: 15%;
  bottom: 14%;
  background: var(--sky);
  box-shadow: 0 0 0 10px rgba(115, 185, 223, 0.12);
}

.diagnosis-process-panels {
  display: grid;
  align-content: end;
}

.diagnosis-process-panel {
  align-self: end;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 48px rgba(49, 79, 90, 0.08);
}

.diagnosis-process-panel span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.78rem;
  font-weight: 950;
}

.diagnosis-process-panel h3 {
  margin: 0;
  color: #253040;
  font-size: 1.45rem;
  line-height: 1.35;
  font-weight: 950;
}

.diagnosis-process-panel p {
  margin: 12px 0 18px;
  color: #5c6976;
  font-weight: 760;
  line-height: 1.72;
}

.diagnosis-process-panel strong {
  display: inline-flex;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.82rem;
  line-height: 32px;
}

.diagnosis-report-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  padding: clamp(28px, 4.4vw, 58px);
}

.diagnosis-report-copy {
  display: grid;
  gap: 24px;
}

.diagnosis-report-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(100%, 380px);
  padding: 6px;
  border: 1px solid rgba(210, 229, 233, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
}

.diagnosis-report-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  color: #5e6a76;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.diagnosis-report-tabs button.is-active,
.diagnosis-report-tabs button:hover,
.diagnosis-report-tabs button:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  box-shadow: 0 12px 24px rgba(49, 170, 161, 0.18);
}

.diagnosis-report-summary article {
  min-height: 176px;
  padding: 24px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 42px rgba(49, 79, 90, 0.07);
}

.diagnosis-report-summary small,
.report-task-stack strong,
.plan-time-card span,
.plan-week-card span,
.plan-coach-card span {
  display: block;
  color: var(--teal-strong);
  font-size: 0.76rem;
  font-weight: 900;
}

.diagnosis-report-summary strong {
  display: block;
  margin-top: 7px;
  color: #253040;
  font-size: 1.48rem;
  line-height: 1.32;
  font-weight: 950;
}

.diagnosis-report-summary p {
  margin: 10px 0 0;
  color: #607080;
  font-weight: 760;
  line-height: 1.72;
}

.diagnosis-report-device {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 520px;
  margin: 0;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(205, 226, 231, 0.95);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 253, 0.94)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.08), rgba(242, 127, 135, 0.06));
  box-shadow:
    0 30px 76px rgba(49, 79, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.report-browser-bar em {
  margin-left: auto;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 26px;
}

.report-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 16px;
  align-items: center;
}

.report-hero-row > div:first-child,
.report-metric-grid article,
.report-task-stack {
  padding: 18px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.report-hero-row span,
.report-metric-grid span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.report-hero-row strong {
  display: inline-block;
  margin: 8px 6px 0 0;
  color: var(--teal-strong);
  font-size: clamp(3rem, 5vw, 4.8rem);
  line-height: 0.95;
  font-weight: 950;
}

.report-hero-row small {
  color: #637080;
  font-weight: 850;
}

.report-ring {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 48%, transparent 49%),
    conic-gradient(var(--teal) 0 72%, rgba(224, 235, 238, 0.8) 72% 100%);
  box-shadow: inset 0 0 0 1px rgba(208, 226, 230, 0.8);
}

.report-ring b {
  color: var(--teal-strong);
  font-size: 1.1rem;
  font-weight: 950;
}

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

.report-metric-grid strong {
  display: block;
  margin-top: 5px;
  color: #253040;
  font-size: 1.4rem;
  font-weight: 950;
}

.report-metric-grid em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.report-metric-grid article:first-child strong,
.report-metric-grid article:first-child em {
  color: var(--coral);
}

.report-analysis-board {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.78fr);
  gap: 14px;
  align-items: stretch;
}

.report-radar-visual {
  position: relative;
  min-height: 220px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.report-radar-visual svg {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}

.report-radar-visual polygon,
.report-radar-visual polyline {
  fill: none;
  stroke: rgba(115, 185, 223, 0.24);
  stroke-width: 2;
}

.report-radar-visual .fill {
  fill: rgba(88, 197, 189, 0.22);
  stroke: var(--teal-strong);
  stroke-width: 4;
}

.report-radar-visual span {
  position: absolute;
  color: #51606e;
  font-size: 0.72rem;
  font-weight: 900;
}

.report-radar-visual .radar-a {
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}

.report-radar-visual .radar-b {
  right: 18px;
  bottom: 32px;
  color: var(--sky);
}

.report-radar-visual .radar-c {
  left: 18px;
  bottom: 32px;
  color: var(--coral);
}

.report-task-stack {
  display: grid;
  align-content: center;
  gap: 10px;
}

.report-task-stack span {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #4d6570;
  background: rgba(234, 250, 250, 0.92);
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 34px;
}

.diagnosis-weakness-shell,
.diagnosis-plan-shell,
.diagnosis-partner-shell {
  padding: clamp(28px, 4.4vw, 58px);
}

.diagnosis-weakness-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  margin-top: clamp(28px, 3.8vw, 48px);
}

.weakness-map-board {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(205, 226, 231, 0.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 197, 189, 0.1), transparent 15rem),
    rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.weakness-map-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(176px, 18vw, 230px);
  min-height: clamp(176px, 18vw, 230px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 253, 253, 0.92)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.14), rgba(115, 185, 223, 0.12));
  box-shadow:
    0 26px 64px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  text-align: center;
  transform: translate(-50%, -50%);
}

.weakness-map-center .icon {
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
  border-radius: 21px;
}

.weakness-map-center strong,
.weakness-map-center span {
  display: block;
}

.weakness-map-center strong {
  color: #253040;
  font-size: 1.15rem;
  font-weight: 950;
}

.weakness-map-center span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.weakness-hotspot {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: 142px;
  min-height: 86px;
  padding: 14px 18px;
  border: 1px solid rgba(242, 127, 135, 0.32);
  border-radius: 22px;
  color: inherit;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 22px 50px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.weakness-hotspot:hover,
.weakness-hotspot:focus-visible,
.weakness-hotspot.is-active {
  border-color: rgba(242, 127, 135, 0.62);
  box-shadow: 0 26px 56px rgba(49, 79, 90, 0.14);
  transform: translateY(-3px);
}

.weakness-hotspot b {
  color: var(--coral);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 950;
}

.weakness-hotspot span {
  color: #50606f;
  font-size: 0.8rem;
  font-weight: 900;
}

.hotspot-one {
  left: 6%;
  top: 14%;
}

.hotspot-two {
  right: 5%;
  top: 22%;
  border-color: rgba(115, 185, 223, 0.34);
}

.hotspot-two b {
  color: var(--sky);
}

.hotspot-three {
  left: 12%;
  bottom: 12%;
  border-color: rgba(88, 197, 189, 0.34);
}

.hotspot-three b {
  color: var(--teal-strong);
}

.weakness-map-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(88, 197, 189, 0.62), transparent);
  transform-origin: center;
}

.line-one {
  left: 22%;
  top: 34%;
  width: 34%;
  transform: rotate(18deg);
}

.line-two {
  right: 18%;
  top: 42%;
  width: 30%;
  transform: rotate(-23deg);
}

.line-three {
  left: 24%;
  bottom: 30%;
  width: 34%;
  transform: rotate(-22deg);
}

.weakness-detail-stack {
  display: grid;
  gap: 14px;
}

.weakness-detail-card,
.weakness-score-board {
  padding: 22px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 42px rgba(49, 79, 90, 0.08);
}

.weakness-detail-card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 18px;
}

.weakness-detail-card small {
  display: block;
  color: var(--teal-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.weakness-detail-card h3 {
  margin: 6px 0 6px;
  color: #253040;
  font-size: 1.32rem;
  line-height: 1.34;
  font-weight: 950;
}

.weakness-detail-card strong {
  color: var(--coral);
  font-size: 1.06rem;
  font-weight: 950;
}

.weakness-detail-card p {
  margin: 8px 0 0;
  color: #5d6c78;
  font-weight: 760;
}

.weakness-score-board {
  display: grid;
  gap: 10px;
}

.weakness-score-board > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.weakness-score-board div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  color: #52606f;
  font-size: 0.78rem;
  font-weight: 880;
}

.weakness-score-board i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(227, 237, 240, 0.92);
}

.weakness-score-board i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #75d6ce);
}

.weakness-score-board .coral i::before {
  background: linear-gradient(90deg, var(--coral), #f6adb3);
}

.weakness-score-board .sky i::before {
  background: linear-gradient(90deg, var(--sky), #a8d7ef);
}

.weakness-score-board em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.diagnosis-plan-layout {
  display: grid;
  grid-template-columns: minmax(500px, 1.12fr) minmax(310px, 0.88fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(26px, 3.6vw, 46px);
}

.plan-route-board {
  position: relative;
  min-height: 470px;
  margin: 0;
  border: 1px solid rgba(205, 226, 231, 0.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 24%, rgba(88, 197, 189, 0.12), transparent 12rem),
    radial-gradient(circle at 80% 76%, rgba(242, 127, 135, 0.12), transparent 12rem),
    rgba(255, 255, 255, 0.58);
}

.plan-path-line {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sky), var(--coral), var(--sand));
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.62);
}

.plan-path-node {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 5px;
  width: clamp(138px, 14vw, 172px);
  min-height: 126px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 20px 46px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.plan-path-node span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.74rem;
  font-weight: 950;
}

.plan-path-node strong {
  color: #253040;
  font-size: 0.98rem;
  font-weight: 950;
}

.plan-path-node small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.42;
}

.plan-path-node.node-1 {
  left: 7%;
  top: 13%;
}

.plan-path-node.node-2 {
  left: 33%;
  bottom: 12%;
}

.plan-path-node.node-3 {
  right: 27%;
  top: 12%;
}

.plan-path-node.node-4 {
  right: 6%;
  bottom: 16%;
}

.plan-path-node.node-2 span {
  background: linear-gradient(135deg, var(--coral), #ef707d);
}

.plan-path-node.node-3 span {
  background: linear-gradient(135deg, var(--sky), #5baed6);
}

.plan-path-node.node-4 span {
  background: linear-gradient(135deg, #d7ad79, #c99356);
}

.plan-daily-board {
  display: grid;
  gap: 14px;
}

.plan-time-card,
.plan-week-card,
.plan-coach-card {
  padding: 22px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 42px rgba(49, 79, 90, 0.08);
}

.plan-time-card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 18px;
}

.plan-time-card strong,
.plan-week-card strong {
  display: block;
  margin-top: 6px;
  color: #253040;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.18;
  font-weight: 950;
}

.plan-time-card p {
  margin: 8px 0 0;
  color: #5f6c78;
  font-weight: 760;
}

.plan-week-card svg {
  width: 100%;
  height: 120px;
  margin-top: 10px;
}

.plan-week-card path {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: drawLine 4.8s ease-in-out infinite;
}

.plan-week-card circle {
  fill: #fff;
  stroke: var(--coral);
  stroke-width: 5;
}

.plan-coach-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.plan-coach-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 19px;
}

.plan-coach-card strong {
  display: block;
  margin-top: 5px;
  color: #253040;
  line-height: 1.48;
  font-weight: 920;
}

.partner-loop {
  position: relative;
  min-height: clamp(540px, 50vw, 650px);
  margin-top: clamp(26px, 4vw, 52px);
}

.partner-loop-ring {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 28px rgba(255, 255, 255, 0.24),
    0 28px 70px rgba(49, 79, 90, 0.08);
}

.partner-loop-ring::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background: conic-gradient(from -80deg, rgba(88, 197, 189, 0), rgba(88, 197, 189, 0.58), rgba(115, 185, 223, 0.45), rgba(242, 127, 135, 0.54), rgba(88, 197, 189, 0));
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62% 65%, transparent 66%);
  mask: radial-gradient(circle, transparent 61%, #000 62% 65%, transparent 66%);
  animation: loopSpin 22s linear infinite;
}

.partner-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(190px, 18vw, 242px);
  min-height: clamp(190px, 18vw, 242px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 247, 0.9)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.14), rgba(242, 127, 135, 0.12));
  box-shadow:
    0 28px 66px rgba(49, 79, 90, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  text-align: center;
  transform: translate(-50%, -50%);
}

.partner-core .icon {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  border-radius: 22px;
}

.partner-core strong,
.partner-core span {
  display: block;
}

.partner-core strong {
  color: #253040;
  font-size: clamp(1.05rem, 1.18vw, 1.28rem);
  line-height: 1.36;
  font-weight: 950;
}

.partner-core span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.partner-node {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: clamp(190px, 18vw, 246px);
  min-height: 168px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 22px 50px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  text-align: center;
  backdrop-filter: blur(12px);
}

.partner-node .icon {
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 20px;
}

.partner-node strong {
  color: #253040;
  font-size: 0.98rem;
  font-weight: 950;
}

.partner-node p {
  margin: 6px 0 0;
  color: #637080;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.52;
}

.partner-node.node-a {
  left: 5%;
  top: 12%;
}

.partner-node.node-b {
  right: 5%;
  top: 12%;
}

.partner-node.node-c {
  left: 8%;
  bottom: 9%;
}

.partner-node.node-d {
  right: 8%;
  bottom: 9%;
}

.partner-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.partner-proof-row span {
  min-height: 74px;
  padding: 16px 18px;
  border: 1px solid rgba(219, 233, 236, 0.9);
  border-radius: 22px;
  color: #5d6b78;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 780;
}

.partner-proof-row b {
  display: block;
  color: var(--teal-strong);
  font-size: 1.1rem;
  font-weight: 950;
}

@media (max-width: 1439px) {
  .diagnosis-process-layout,
  .diagnosis-report-shell,
  .diagnosis-weakness-layout,
  .diagnosis-plan-layout {
    grid-template-columns: 1fr;
  }

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

  .diagnosis-process-panels {
    grid-template-columns: 1fr;
  }

  .diagnosis-process-panel {
    min-height: 0;
  }

  .diagnosis-report-device,
  .weakness-map-board,
  .plan-route-board {
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  .page-diagnosis .diagnosis-process-section,
  .page-diagnosis .diagnosis-report-section,
  .page-diagnosis .diagnosis-weakness-section,
  .page-diagnosis .diagnosis-plan-section,
  .page-diagnosis .diagnosis-partner-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .diagnosis-process-shell,
  .diagnosis-report-shell,
  .diagnosis-weakness-shell,
  .diagnosis-plan-shell,
  .diagnosis-partner-shell {
    border-radius: 24px;
  }

  .diagnosis-process-shell,
  .diagnosis-report-shell,
  .diagnosis-weakness-shell,
  .diagnosis-plan-shell,
  .diagnosis-partner-shell {
    padding: 22px;
  }

  .diagnosis-process-shell::before,
  .diagnosis-report-shell::before,
  .diagnosis-weakness-shell::before,
  .diagnosis-plan-shell::before,
  .diagnosis-partner-shell::before {
    inset: 12px;
    border-radius: 18px;
    background-size: 34px 34px;
  }

  .diagnosis-block-heading,
  .diagnosis-block-heading.align-left {
    justify-items: start;
    text-align: left;
  }

  .diagnosis-block-heading h2 {
    font-size: 1.58rem;
  }

  .diagnosis-block-heading p {
    font-size: 0.88rem;
  }

  .diagnosis-process-layout,
  .diagnosis-report-shell,
  .diagnosis-weakness-layout,
  .diagnosis-plan-layout {
    gap: 18px;
    margin-top: 22px;
  }

  .diagnosis-process-rail,
  .report-metric-grid,
  .report-analysis-board,
  .partner-proof-row {
    grid-template-columns: 1fr;
  }

  .diagnosis-process-step {
    grid-template-columns: 34px 42px minmax(0, 1fr);
    min-height: 86px;
    padding: 12px;
  }

  .diagnosis-process-step b {
    width: 31px;
    height: 31px;
  }

  .diagnosis-process-step .icon {
    width: 38px;
    height: 38px;
  }

  .diagnosis-process-visual,
  .diagnosis-report-device,
  .weakness-map-board,
  .plan-route-board {
    min-height: 0;
  }

  .process-device,
  .diagnosis-report-device {
    padding: 14px;
    border-radius: 22px;
  }

  .process-question-card,
  .process-scan-card,
  .process-result-card,
  .report-hero-row > div:first-child,
  .report-metric-grid article,
  .report-task-stack,
  .diagnosis-process-panel,
  .weakness-detail-card,
  .weakness-score-board,
  .plan-time-card,
  .plan-week-card,
  .plan-coach-card {
    padding: 16px;
    border-radius: 18px;
  }

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

  .report-ring {
    justify-self: start;
    width: 112px;
    height: 112px;
  }

  .report-radar-visual {
    min-height: 210px;
  }

  .weakness-map-board {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .weakness-map-center,
  .weakness-hotspot,
  .weakness-map-line {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  .weakness-map-line {
    display: none;
  }

  .weakness-map-center {
    width: 100%;
    min-height: 154px;
    border-radius: 22px;
  }

  .weakness-hotspot {
    min-width: 0;
    width: 100%;
  }

  .weakness-score-board div {
    grid-template-columns: 76px minmax(0, 1fr) 40px;
  }

  .plan-route-board {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .plan-path-line {
    display: none;
  }

  .plan-path-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 104px;
    border-radius: 20px;
  }

  .plan-path-node.node-1,
  .plan-path-node.node-2,
  .plan-path-node.node-3,
  .plan-path-node.node-4,
  .partner-node.node-a,
  .partner-node.node-b,
  .partner-node.node-c,
  .partner-node.node-d {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .partner-loop {
    display: grid;
    gap: 12px;
    min-height: 0;
  }

  .partner-loop-ring {
    display: none;
  }

  .partner-core,
  .partner-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .partner-core {
    border-radius: 26px;
  }

  .partner-node {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 460px) {
  .diagnosis-process-shell,
  .diagnosis-report-shell,
  .diagnosis-weakness-shell,
  .diagnosis-plan-shell,
  .diagnosis-partner-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .diagnosis-process-step {
    grid-template-columns: 1fr;
  }

  .diagnosis-process-step b,
  .diagnosis-process-step .icon,
  .diagnosis-process-step strong,
  .diagnosis-process-step span,
  .diagnosis-process-step em {
    grid-column: 1;
    grid-row: auto;
  }

  .report-browser-bar,
  .process-device-bar {
    flex-wrap: wrap;
  }

  .diagnosis-report-tabs {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .diagnosis-report-tabs button:not(.is-active) {
    background: rgba(255, 255, 255, 0.62);
  }

  .weakness-score-board div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .weakness-score-board em {
    text-align: left;
  }

  .plan-coach-card {
    grid-template-columns: 1fr;
  }
}

.page-progress .progress-command-section,
.page-progress .progress-insight-section,
.page-progress .progress-value-section {
  padding-top: 58px;
  padding-bottom: 58px;
}

.page-progress .progress-command-section {
  padding-top: 70px;
}

.progress-command-shell,
.progress-insight-shell,
.progress-value-shell {
  position: relative;
  overflow: hidden;
  padding: 54px;
  border: 1px solid rgba(190, 222, 226, 0.82);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 16%) var(--pointer-y, 10%), rgba(88, 197, 189, 0.15), transparent 22rem),
    linear-gradient(135deg, rgba(247, 254, 254, 0.98) 0%, rgba(255, 255, 255, 0.98) 50%, rgba(255, 246, 247, 0.84) 100%);
  box-shadow:
    0 32px 86px rgba(49, 79, 90, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.progress-insight-shell {
  background:
    radial-gradient(circle at var(--pointer-x, 84%) var(--pointer-y, 8%), rgba(115, 185, 223, 0.14), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 252, 0.96) 54%, rgba(255, 248, 239, 0.82));
}

.progress-command-shell::before,
.progress-insight-shell::before,
.progress-value-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.048) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.025) 64%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.progress-command-shell > *,
.progress-insight-shell > *,
.progress-value-shell > * {
  position: relative;
  z-index: 1;
}

.progress-block-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.progress-block-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.progress-block-heading h2 {
  margin: 0;
  color: #253040;
  font-size: 2.65rem;
  line-height: 1.24;
  font-weight: 950;
  letter-spacing: 0;
}

.progress-block-heading p {
  max-width: 60ch;
  margin: 0;
  color: #607080;
  font-size: 1.02rem;
  font-weight: 740;
  line-height: 1.72;
}

.progress-command-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(460px, 1.35fr) minmax(260px, 0.75fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 44px;
}

.progress-metric-rail,
.progress-parent-feed,
.progress-live-panels,
.progress-insight-grid,
.progress-value-cards {
  display: grid;
  gap: 14px;
}

.progress-metric-tile {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  min-height: 116px;
  padding: 16px;
  border: 1px solid rgba(218, 233, 236, 0.94);
  border-radius: 22px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px rgba(49, 79, 90, 0.06);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.progress-metric-tile:hover,
.progress-metric-tile:focus-visible,
.progress-metric-tile.is-active {
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(250, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(49, 79, 90, 0.1);
  transform: translateY(-2px);
}

.progress-metric-tile.coral.is-active,
.progress-metric-tile.coral:hover,
.progress-metric-tile.coral:focus-visible {
  border-color: rgba(242, 127, 135, 0.36);
}

.progress-metric-tile .icon {
  grid-row: 1 / span 3;
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.progress-metric-tile strong {
  color: #253040;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 950;
}

.progress-metric-tile strong span {
  margin-left: 3px;
  font-size: 0.8rem;
}

.progress-metric-tile b {
  color: #435262;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 950;
}

.progress-metric-tile small {
  color: #6a7782;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.4;
}

.progress-live-device,
.progress-report-station,
.progress-loop-board {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 610px;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(204, 225, 230, 0.95);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 253, 0.94)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.08), rgba(115, 185, 223, 0.07));
  box-shadow:
    0 30px 72px rgba(49, 79, 90, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.progress-device-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 230, 234, 0.82);
}

.progress-device-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.progress-device-bar i:nth-child(2) {
  background: var(--coral);
}

.progress-device-bar i:nth-child(3) {
  background: var(--sky);
}

.progress-device-bar span {
  margin-left: 6px;
  color: #435262;
  font-size: 0.78rem;
  font-weight: 900;
}

.progress-device-bar em {
  margin-left: auto;
  color: #7b8792;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

.progress-live-summary,
.progress-feed-card,
.progress-live-panel,
.progress-insight-card,
.progress-phone-card,
.progress-value-card,
.progress-loop-node,
.progress-loop-center {
  border: 1px solid rgba(219, 233, 236, 0.95);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(49, 79, 90, 0.06);
}

.progress-live-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: 18px;
  border-radius: 22px;
}

.progress-live-summary small,
.progress-live-panel small,
.progress-insight-card > span,
.progress-value-card > span,
.progress-feed-card > span,
.progress-loop-center span,
.progress-loop-node span {
  color: var(--teal-strong);
  font-size: 0.76rem;
  font-weight: 900;
}

.progress-live-summary strong,
.progress-feed-card strong,
.progress-loop-center strong,
.progress-loop-node strong {
  display: block;
  color: #253040;
  font-size: 1.08rem;
  line-height: 1.32;
  font-weight: 950;
}

.progress-live-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.progress-live-chart,
.report-station-chart {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 24px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    rgba(255, 255, 255, 0.82);
  background-size: 44px 44px;
}

.progress-live-chart svg,
.report-station-chart svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 220px;
}

.progress-chart-area {
  fill: rgba(88, 197, 189, 0.12);
}

.progress-chart-line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 8px 16px rgba(49, 170, 161, 0.18));
}

.progress-live-chart circle {
  fill: #fff;
  stroke: var(--teal-strong);
  stroke-width: 5;
}

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

.progress-live-panel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  min-height: 116px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.14), transparent 10rem),
    rgba(255, 255, 255, 0.82);
}

.progress-live-panel[hidden] {
  display: none !important;
}

.progress-live-panel .icon {
  grid-row: 1 / span 3;
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.progress-live-panel strong {
  color: #253040;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 950;
}

.progress-live-panel strong span {
  margin-left: 4px;
  font-size: 0.82rem;
}

.progress-live-panel p,
.progress-feed-card p,
.progress-insight-card p,
.progress-phone-shell p,
.progress-value-card p {
  margin: 0;
  color: #647382;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.58;
}

.progress-parent-feed {
  align-content: start;
}

.progress-feed-card {
  display: grid;
  gap: 10px;
  min-height: 172px;
  padding: 20px;
  border-radius: 24px;
}

.progress-feed-card.highlight {
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.16), transparent 12rem),
    rgba(255, 255, 255, 0.86);
}

.progress-feed-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.progress-insight-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(390px, 0.92fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 44px;
}

.progress-report-station {
  min-height: 690px;
}

.report-station-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  align-items: center;
  gap: 18px;
  min-height: 188px;
  padding: 22px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 12%, rgba(88, 197, 189, 0.15), transparent 14rem),
    rgba(255, 255, 255, 0.84);
}

.report-station-hero small {
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 900;
}

.report-station-hero strong {
  display: block;
  color: #253040;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 950;
}

.report-station-hero p {
  margin: 8px 0 0;
  color: #647382;
  font-size: 0.86rem;
  font-weight: 780;
}

.progress-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: conic-gradient(var(--teal) 0 82%, var(--sky) 82% 95%, var(--sand) 95% 100%);
  box-shadow: 0 20px 42px rgba(49, 170, 161, 0.14);
}

.progress-donut::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: inherit;
  background: #fff;
}

.progress-donut b {
  position: relative;
  z-index: 1;
  color: #253040;
  font-size: 2rem;
  font-weight: 950;
}

.report-station-subjects {
  display: grid;
  gap: 12px;
}

.progress-subject-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  color: #4c5865;
  font-size: 0.82rem;
  font-weight: 850;
}

.progress-subject-row i {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(221, 232, 235, 0.8);
}

.progress-subject-row i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--score);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #7bd7cf);
}

.progress-subject-row.coral i::before {
  background: linear-gradient(90deg, #f28a91, #f7b2b7);
}

.progress-subject-row.sky i::before {
  background: linear-gradient(90deg, var(--sky), #a8d7ef);
}

.progress-subject-row.sand i::before {
  background: linear-gradient(90deg, var(--sand), #efd4a7);
}

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

.progress-insight-card,
.progress-phone-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.14), transparent 14rem),
    rgba(255, 255, 255, 0.84);
}

.progress-insight-card h3 {
  margin: 0;
  color: #253040;
  font-size: 1.28rem;
  line-height: 1.32;
  font-weight: 950;
}

.weakness-card {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.13), transparent 15rem),
    rgba(255, 255, 255, 0.84);
}

.progress-weak-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(120px, 1fr) 92px;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}

.progress-weak-row strong {
  color: #4c5865;
  font-size: 0.8rem;
  line-height: 1.32;
  font-weight: 900;
}

.progress-weak-row i {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(245, 218, 221, 0.75);
}

.progress-weak-row i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--score);
  border-radius: inherit;
  background: linear-gradient(90deg, #f28a91, #f7b2b7);
}

.progress-weak-row b {
  color: #df727b;
  font-size: 0.82rem;
  font-weight: 950;
  text-align: right;
}

.progress-coach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 230, 234, 0.82);
}

.progress-coach-row span,
.progress-coach-row b {
  color: #4d5d69;
  font-size: 0.78rem;
  font-weight: 900;
}

.progress-coach-row b {
  color: var(--teal-strong);
}

.progress-phone-card {
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 185, 223, 0.13), transparent 14rem),
    rgba(255, 255, 255, 0.84);
}

.progress-phone-shell {
  display: grid;
  gap: 10px;
  min-height: 100%;
  padding: 20px;
  border: 1px solid rgba(204, 225, 230, 0.95);
  border-radius: 28px;
  background: linear-gradient(180deg, #fff, rgba(243, 251, 252, 0.94));
}

.progress-phone-shell span {
  color: var(--teal-strong);
  font-size: 0.76rem;
  font-weight: 900;
}

.progress-phone-shell strong {
  color: #253040;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 950;
}

.progress-phone-shell div {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.progress-phone-shell i {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.18);
}

.progress-phone-shell i:nth-child(2) {
  width: 78%;
  background: rgba(115, 185, 223, 0.2);
}

.progress-phone-shell i:nth-child(3) {
  width: 58%;
  background: rgba(242, 127, 135, 0.18);
}

.progress-value-layout {
  display: grid;
  grid-template-columns: minmax(450px, 0.9fr) minmax(480px, 1.1fr);
  gap: 26px;
  align-items: stretch;
  min-width: 0;
  margin-top: 44px;
}

.progress-loop-board {
  min-height: 520px;
  overflow: hidden;
}

.progress-loop-board::before {
  content: "";
  position: absolute;
  inset: 84px;
  border: 1px dashed rgba(88, 197, 189, 0.26);
  border-radius: 999px;
}

.progress-loop-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 210px;
  min-height: 210px;
  padding: 28px;
  border-radius: 999px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.progress-loop-center .icon {
  width: 58px;
  height: 58px;
  border-radius: 21px;
}

.progress-loop-node {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 160px;
  min-height: 148px;
  padding: 16px;
  border-radius: 24px;
  text-align: center;
}

.progress-loop-node b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.72rem;
  font-weight: 950;
}

.progress-loop-node .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.progress-loop-node.node-1 {
  left: 5%;
  top: 12%;
}

.progress-loop-node.node-2 {
  right: 5%;
  top: 12%;
}

.progress-loop-node.node-3 {
  right: 8%;
  bottom: 10%;
}

.progress-loop-node.node-4 {
  left: 8%;
  bottom: 10%;
}

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

.progress-value-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 250px;
  padding: 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.14), transparent 14rem),
    rgba(255, 255, 255, 0.84);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.progress-value-card.sky {
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 185, 223, 0.14), transparent 14rem),
    rgba(255, 255, 255, 0.84);
}

.progress-value-card.coral {
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.13), transparent 14rem),
    rgba(255, 255, 255, 0.84);
}

.progress-value-card:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 197, 189, 0.36);
  box-shadow: 0 24px 58px rgba(49, 79, 90, 0.1);
}

.progress-value-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 20px;
}

.progress-value-card h3 {
  margin: 0;
  color: #253040;
  font-size: 1.2rem;
  line-height: 1.32;
  font-weight: 950;
}

@media (max-width: 1439px) {
  .progress-command-shell,
  .progress-insight-shell,
  .progress-value-shell {
    padding: 34px;
  }

  .progress-block-heading h2 {
    font-size: 2.15rem;
  }

  .progress-command-layout,
  .progress-insight-layout,
  .progress-value-layout {
    grid-template-columns: 1fr;
  }

  .progress-metric-rail {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    overflow: visible;
    padding-bottom: 4px;
  }

  .progress-metric-tile {
    min-width: 0;
  }

  .progress-parent-feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .progress-live-device,
  .progress-report-station,
  .progress-loop-board {
    min-height: auto;
  }

  .progress-loop-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .progress-loop-board::before {
    display: none;
  }

  .progress-loop-center,
  .progress-loop-node {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-height: 168px;
    border-radius: 24px;
    transform: none;
  }

  .progress-loop-center {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page-progress .progress-command-section,
  .page-progress .progress-insight-section,
  .page-progress .progress-value-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .progress-command-shell,
  .progress-insight-shell,
  .progress-value-shell {
    padding: 22px;
    border-radius: 24px;
  }

  .progress-command-shell::before,
  .progress-insight-shell::before,
  .progress-value-shell::before {
    inset: 10px;
    border-radius: 20px;
  }

  .progress-block-heading {
    justify-items: start;
    text-align: left;
  }

  .progress-block-heading h2 {
    font-size: 1.62rem;
    line-height: 1.28;
  }

  .progress-block-heading p {
    font-size: 0.9rem;
  }

  .progress-command-layout,
  .progress-insight-layout,
  .progress-value-layout {
    gap: 16px;
    margin-top: 26px;
  }

  .progress-metric-rail,
  .progress-parent-feed,
  .progress-live-panels,
  .progress-insight-grid,
  .progress-value-cards,
  .progress-loop-board {
    grid-template-columns: 1fr;
  }

  .progress-metric-rail {
    overflow: visible;
  }

  .progress-metric-tile {
    min-width: 0;
  }

  .progress-live-summary,
  .report-station-hero,
  .progress-weak-row {
    grid-template-columns: 1fr;
  }

  .progress-live-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .progress-live-summary span {
    white-space: normal;
  }

  .progress-live-device,
  .progress-report-station,
  .progress-loop-board {
    padding: 14px;
    border-radius: 22px;
  }

  .progress-feed-card,
  .progress-live-panel,
  .progress-insight-card,
  .progress-phone-card,
  .progress-value-card {
    padding: 20px;
    border-radius: 22px;
  }

  .progress-live-chart,
  .report-station-chart {
    min-height: 176px;
  }

  .progress-live-chart svg,
  .report-station-chart svg {
    height: 176px;
  }

  .report-station-hero {
    justify-items: start;
  }

  .progress-donut {
    width: 132px;
  }

  .progress-weak-row b {
    text-align: left;
  }

  .progress-device-bar {
    flex-wrap: wrap;
  }

  .progress-device-bar em {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  .progress-command-shell,
  .progress-insight-shell,
  .progress-value-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .progress-block-heading h2 {
    font-size: 1.42rem;
  }

  .progress-metric-tile,
  .progress-live-panel {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .progress-metric-tile .icon,
  .progress-live-panel .icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .report-station-hero strong,
  .progress-live-panel strong {
    font-size: 2.2rem;
  }

  .progress-loop-center,
  .progress-loop-node {
    min-height: 150px;
  }
}

.page-programs .programs-compare-section,
.page-programs .programs-fit-section,
.page-programs .programs-recommend-section,
.page-programs .programs-trust-section {
  padding-top: 58px;
  padding-bottom: 58px;
}

.page-programs .programs-compare-section {
  padding-top: 70px;
}

.programs-compare-shell,
.programs-fit-shell,
.programs-recommend-shell,
.programs-trust-shell {
  position: relative;
  overflow: hidden;
  padding: 54px;
  border: 1px solid rgba(190, 222, 226, 0.82);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 15%) var(--pointer-y, 10%), rgba(88, 197, 189, 0.15), transparent 22rem),
    linear-gradient(135deg, rgba(247, 254, 254, 0.98) 0%, rgba(255, 255, 255, 0.98) 48%, rgba(255, 245, 246, 0.86) 100%);
  box-shadow:
    0 32px 86px rgba(49, 79, 90, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.programs-fit-shell,
.programs-trust-shell {
  background:
    radial-gradient(circle at var(--pointer-x, 84%) var(--pointer-y, 12%), rgba(115, 185, 223, 0.13), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 252, 0.96) 54%, rgba(255, 248, 239, 0.82));
}

.programs-compare-shell::before,
.programs-fit-shell::before,
.programs-recommend-shell::before,
.programs-trust-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.048) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.025) 64%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.programs-compare-shell > *,
.programs-fit-shell > *,
.programs-recommend-shell > *,
.programs-trust-shell > * {
  position: relative;
  z-index: 1;
}

.programs-block-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.programs-block-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.programs-block-heading h2 {
  margin: 0;
  color: #253040;
  font-size: 2.65rem;
  line-height: 1.24;
  font-weight: 950;
  letter-spacing: 0;
}

.programs-block-heading p {
  max-width: 60ch;
  margin: 0;
  color: #607080;
  font-size: 1.02rem;
  font-weight: 740;
  line-height: 1.72;
}

.programs-compare-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(420px, 1.18fr) minmax(270px, 0.82fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 44px;
}

.programs-plan-tabs,
.programs-plan-panels,
.recommend-choice-grid,
.programs-persona-grid,
.trust-metrics {
  display: grid;
  gap: 14px;
}

.programs-plan-panel[hidden],
.recommend-output[hidden] {
  display: none !important;
}

.programs-plan-tabs,
.recommend-choice-grid {
  align-content: start;
}

.programs-plan-tab {
  position: relative;
  display: grid;
  grid-template-columns: 46px 54px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 156px;
  padding: 18px;
  border: 1px solid rgba(218, 233, 236, 0.94);
  border-radius: 24px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px rgba(49, 79, 90, 0.06);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.programs-plan-tab:hover,
.programs-plan-tab:focus-visible,
.programs-plan-tab.is-active {
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(250, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(49, 79, 90, 0.1);
  transform: translateY(-2px);
}

.programs-plan-tab:nth-child(2).is-active {
  border-color: rgba(242, 127, 135, 0.36);
}

.programs-plan-tab b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.78rem;
  font-weight: 950;
}

.programs-plan-tab:nth-child(2) b {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.programs-plan-tab .icon {
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.programs-plan-tab strong,
.programs-plan-tab span,
.programs-plan-tab em {
  grid-column: 3;
}

.programs-plan-tab strong {
  color: #243243;
  font-size: 1.06rem;
  line-height: 1.3;
  font-weight: 950;
}

.programs-plan-tab span {
  color: #607080;
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.45;
}

.programs-plan-tab em {
  justify-self: start;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  line-height: 26px;
}

.programs-plan-tab:nth-child(2) em {
  color: #dc7178;
  background: rgba(242, 127, 135, 0.12);
}

.programs-match-device,
.recommend-screen,
.trust-ops-board {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 440px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(204, 225, 230, 0.95);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 253, 0.94)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.08), rgba(115, 185, 223, 0.07));
  box-shadow:
    0 30px 72px rgba(49, 79, 90, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.programs-device-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 230, 234, 0.82);
}

.programs-device-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.programs-device-bar i:nth-child(2) {
  background: var(--coral);
}

.programs-device-bar i:nth-child(3) {
  background: var(--sky);
}

.programs-device-bar span {
  margin-left: 6px;
  color: #435262;
  font-size: 0.78rem;
  font-weight: 900;
}

.programs-device-bar em {
  margin-left: auto;
  color: #7b8792;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

.match-signal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.match-signal-row article,
.match-plan-cards article,
.programs-plan-panel,
.fit-system-card,
.programs-persona-card,
.recommend-choice,
.trust-metric {
  border: 1px solid rgba(219, 233, 236, 0.95);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(49, 79, 90, 0.06);
}

.match-signal-row article {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 15px;
  border-radius: 18px;
}

.match-signal-row span,
.match-plan-cards small,
.programs-plan-panel p,
.fit-system-card span,
.programs-persona-card p,
.recommend-choice span,
.recommend-output p,
.trust-metric span,
.trust-checks span {
  color: #647382;
  font-weight: 720;
  line-height: 1.55;
}

.match-signal-row span,
.match-plan-cards small,
.fit-system-card span,
.recommend-choice span,
.trust-checks span {
  font-size: 0.76rem;
}

.match-signal-row strong {
  color: #253040;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 950;
}

.match-route {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 64px;
}

.match-route span,
.recommend-next-steps span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #49606b;
  background: rgba(234, 250, 250, 0.94);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.match-route i,
.recommend-next-steps i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(88, 197, 189, 0.16), rgba(88, 197, 189, 0.78));
}

.match-route i::after,
.recommend-next-steps i::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  margin-left: auto;
  border-radius: 2px;
  border-top: 2px solid rgba(88, 197, 189, 0.82);
  border-right: 2px solid rgba(88, 197, 189, 0.82);
  transform: rotate(45deg);
}

.match-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
}

.match-plan-cards article {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 152px;
  padding: 18px;
  border-radius: 22px;
}

.match-plan-cards article.is-recommended {
  border-color: rgba(88, 197, 189, 0.38);
  background: linear-gradient(135deg, rgba(234, 250, 250, 0.92), rgba(255, 255, 255, 0.9));
}

.match-plan-cards article.is-recommended::after {
  content: "系統首選";
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 24px;
}

.match-plan-cards .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.match-plan-cards strong {
  color: #253040;
  font-size: 1rem;
  line-height: 1.28;
  font-weight: 950;
}

.programs-plan-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 440px;
  padding: 24px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 253, 253, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.16), transparent 15rem);
}

.programs-plan-panel:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 244, 245, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.16), transparent 15rem);
}

.programs-plan-panel span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.9rem;
  font-weight: 950;
}

.programs-plan-panel:nth-child(2) span {
  background: linear-gradient(135deg, #f58b91, #ef707d);
}

.programs-plan-panel h3,
.programs-persona-card h3,
.recommend-output h3 {
  margin: 0;
  color: #253040;
  font-size: 1.35rem;
  line-height: 1.32;
  font-weight: 950;
  letter-spacing: 0;
}

.programs-plan-panel p,
.programs-persona-card p,
.recommend-output p {
  margin: 0;
  font-size: 0.88rem;
}

.programs-plan-panel > strong {
  align-self: end;
  color: var(--teal-strong);
  font-size: 1.8rem;
  line-height: 1.12;
  font-weight: 950;
}

.programs-plan-panel:nth-child(2) > strong {
  color: #dc7178;
}

.programs-plan-panel div,
.programs-persona-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.programs-plan-panel em,
.programs-persona-card em {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #47616a;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
}

.programs-plan-panel .btn {
  align-self: end;
  justify-self: start;
  min-height: 42px;
  margin-top: auto;
}

.programs-fit-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 44px;
}

.fit-system-scene {
  position: relative;
  min-height: 520px;
}

.fit-system-scene::before {
  content: "";
  position: absolute;
  inset: 76px 46px;
  border-radius: 999px;
  border: 1px dashed rgba(88, 197, 189, 0.26);
}

.fit-system-scene::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 24%, rgba(88, 197, 189, 0.14), transparent 10rem),
    radial-gradient(circle at 78% 76%, rgba(242, 127, 135, 0.12), transparent 11rem);
  pointer-events: none;
}

.fit-system-card {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 24px;
}

.fit-system-card.main {
  top: 34px;
  left: 50%;
  width: min(86%, 390px);
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 68px rgba(49, 79, 90, 0.13);
}

.fit-system-card.card-a,
.fit-system-card.card-b {
  bottom: 44px;
  width: 46%;
  min-height: 180px;
  align-content: center;
  text-align: center;
}

.fit-system-card.card-a {
  left: 0;
  background: linear-gradient(145deg, rgba(235, 251, 250, 0.92), rgba(255, 255, 255, 0.86));
}

.fit-system-card.card-b {
  right: 0;
  background: linear-gradient(145deg, rgba(255, 242, 243, 0.92), rgba(255, 255, 255, 0.86));
}

.fit-system-card .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 20px;
}

.fit-system-card strong {
  color: #253040;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 950;
}

.fit-system-card.main > span {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.fit-system-card.main > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.fit-system-card.main i {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(221, 232, 235, 0.8);
}

.fit-system-card.main i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--score);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.fit-system-card.main b {
  color: #52616e;
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}

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

.programs-persona-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 520px;
  padding: 28px;
  border-radius: 26px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 250, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.15), transparent 16rem);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.programs-persona-card.coral {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 242, 243, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.15), transparent 16rem);
}

.programs-persona-card:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 197, 189, 0.36);
  box-shadow: 0 24px 58px rgba(49, 79, 90, 0.1);
}

.programs-persona-card .icon {
  width: 58px;
  height: 58px;
  border-radius: 21px;
}

.programs-persona-card small {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.programs-persona-card.coral small {
  color: #dc7178;
}

.programs-persona-card > strong {
  margin-top: auto;
  color: var(--teal-strong);
  font-size: 2.1rem;
  line-height: 1.05;
  font-weight: 950;
}

.programs-persona-card.coral > strong {
  color: #dc7178;
}

.programs-persona-card > strong span {
  display: block;
  margin-top: 5px;
  color: #657482;
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 800;
}

.recommend-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 44px;
}

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

.recommend-choice {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 196px;
  padding: 20px;
  border-radius: 24px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.recommend-choice:hover,
.recommend-choice:focus-visible,
.recommend-choice.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(250, 255, 255, 0.96);
  box-shadow: 0 22px 52px rgba(49, 79, 90, 0.1);
}

.recommend-choice.coral.is-active,
.recommend-choice.coral:hover,
.recommend-choice.coral:focus-visible {
  border-color: rgba(242, 127, 135, 0.36);
}

.recommend-choice .icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
}

.recommend-choice strong {
  color: #253040;
  font-size: 1rem;
  line-height: 1.32;
  font-weight: 950;
}

.recommend-choice em {
  align-self: end;
  justify-self: start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
}

.recommend-choice.coral em {
  color: #dc7178;
  background: rgba(242, 127, 135, 0.12);
}

.recommend-output-board {
  min-width: 0;
}

.recommend-screen {
  min-height: 406px;
  padding: 20px;
}

.recommend-output {
  display: grid;
  gap: 12px;
  min-height: 310px;
  padding: 26px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 12%, rgba(88, 197, 189, 0.14), transparent 13rem),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(49, 79, 90, 0.07);
}

.recommend-output small {
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 900;
}

.recommend-output h3 {
  font-size: 2.1rem;
}

.recommend-output strong {
  justify-self: start;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 42px;
}

.recommend-next-steps {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.trust-dashboard {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(540px, 1.18fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 44px;
}

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

.trust-metric {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-height: 190px;
  padding: 24px;
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 250, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.14), transparent 12rem);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.trust-metric.sky {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(238, 248, 255, 0.88)),
    radial-gradient(circle at 100% 0%, rgba(115, 185, 223, 0.15), transparent 12rem);
}

.trust-metric.coral {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 242, 243, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.14), transparent 12rem);
}

.trust-metric.sand {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 239, 0.88)),
    radial-gradient(circle at 100% 0%, rgba(215, 173, 121, 0.16), transparent 12rem);
}

.trust-metric:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 197, 189, 0.36);
  box-shadow: 0 24px 58px rgba(49, 79, 90, 0.1);
}

.trust-metric .icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.trust-metric strong {
  color: #253040;
  font-size: 2rem;
  line-height: 1;
  font-weight: 950;
}

.trust-ops-board {
  min-height: 394px;
  padding: 20px;
}

.trust-line-chart {
  display: grid;
  place-items: center;
  min-height: 218px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 24px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    rgba(255, 255, 255, 0.82);
  background-size: 44px 44px;
}

.trust-line-chart svg {
  display: block;
  width: min(100%, 520px);
  height: 220px;
}

.trust-area {
  fill: url("#trustGradient");
  fill: rgba(88, 197, 189, 0.12);
}

.trust-line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 8px 16px rgba(49, 170, 161, 0.18));
}

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

.trust-checks span {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(219, 233, 236, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.trust-checks b {
  color: var(--teal-strong);
  font-size: 1.18rem;
  line-height: 1.1;
  font-weight: 950;
}

@media (max-width: 1439px) {
  .programs-compare-shell,
  .programs-fit-shell,
  .programs-recommend-shell,
  .programs-trust-shell {
    padding: 34px;
  }

  .programs-block-heading h2 {
    font-size: 2.15rem;
  }

  .programs-compare-layout,
  .programs-fit-layout,
  .recommend-layout,
  .trust-dashboard {
    grid-template-columns: 1fr;
  }

  .programs-plan-tabs,
  .programs-plan-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .programs-match-device,
  .programs-plan-panel,
  .fit-system-scene,
  .programs-persona-card,
  .recommend-screen,
  .trust-ops-board {
    min-height: auto;
  }

  .fit-system-scene {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .fit-system-scene::before,
  .fit-system-scene::after {
    display: none;
  }

  .fit-system-card,
  .fit-system-card.main,
  .fit-system-card.card-a,
  .fit-system-card.card-b {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 188px;
    transform: none;
  }

  .fit-system-card.main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page-programs .programs-compare-section,
  .page-programs .programs-fit-section,
  .page-programs .programs-recommend-section,
  .page-programs .programs-trust-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .programs-compare-shell,
  .programs-fit-shell,
  .programs-recommend-shell,
  .programs-trust-shell {
    padding: 22px;
    border-radius: 24px;
  }

  .programs-compare-shell::before,
  .programs-fit-shell::before,
  .programs-recommend-shell::before,
  .programs-trust-shell::before {
    inset: 10px;
    border-radius: 20px;
  }

  .programs-block-heading {
    justify-items: start;
    text-align: left;
  }

  .programs-block-heading h2 {
    font-size: 1.62rem;
    line-height: 1.28;
  }

  .programs-block-heading p {
    font-size: 0.9rem;
  }

  .programs-compare-layout,
  .programs-fit-layout,
  .recommend-layout,
  .trust-dashboard {
    gap: 16px;
    margin-top: 26px;
  }

  .programs-plan-tabs,
  .programs-plan-panels,
  .programs-persona-grid,
  .recommend-choice-grid,
  .trust-metrics,
  .match-signal-row,
  .match-plan-cards,
  .trust-checks {
    grid-template-columns: 1fr;
  }

  .programs-plan-tab {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 132px;
    padding: 16px;
  }

  .programs-plan-tab .icon {
    display: none;
  }

  .programs-plan-tab strong,
  .programs-plan-tab span,
  .programs-plan-tab em {
    grid-column: 2;
  }

  .match-route,
  .recommend-next-steps {
    grid-template-columns: 1fr;
  }

  .match-route i,
  .recommend-next-steps i {
    width: 2px;
    height: 22px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(88, 197, 189, 0.16), rgba(88, 197, 189, 0.78));
  }

  .match-route i::after,
  .recommend-next-steps i::after {
    margin: 14px 0 0 -3px;
    transform: rotate(135deg);
  }

  .programs-match-device,
  .recommend-screen,
  .trust-ops-board {
    padding: 14px;
    border-radius: 22px;
  }

  .programs-plan-panel,
  .programs-persona-card,
  .recommend-output,
  .trust-metric {
    padding: 20px;
    border-radius: 22px;
  }

  .recommend-output h3,
  .trust-metric strong,
  .programs-persona-card > strong {
    font-size: 1.75rem;
  }

  .fit-system-scene {
    grid-template-columns: 1fr;
  }

  .programs-device-bar {
    flex-wrap: wrap;
  }

  .programs-device-bar em {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  .programs-compare-shell,
  .programs-fit-shell,
  .programs-recommend-shell,
  .programs-trust-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .programs-block-heading h2 {
    font-size: 1.42rem;
  }

  .programs-plan-tab b,
  .programs-plan-panel span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .programs-plan-tab {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .programs-plan-panel h3,
  .programs-persona-card h3,
  .recommend-choice strong,
  .recommend-output h3 {
    overflow-wrap: anywhere;
  }

  .recommend-output h3,
  .trust-metric strong,
  .programs-persona-card > strong {
    font-size: 1.45rem;
  }

  .fit-system-card.main > div {
    grid-template-columns: 1fr;
  }

  .fit-system-card.main b {
    white-space: normal;
  }
}

/* Coach page 55.png redesign */
.page-coach .coach-reference-section,
.page-coach .coach-theory-section,
.page-coach .coach-dual-section,
.page-coach .coach-flow-section,
.page-coach .coach-reassure-section {
  padding-block: clamp(28px, 4.8vw, 62px);
}

.page-coach .coach-reference-section {
  padding-top: clamp(18px, 3vw, 42px);
}

.page-coach .coach-reference-shell,
.page-coach .coach-theory-shell,
.page-coach .coach-dual-grid,
.page-coach .coach-flow-shell,
.page-coach .coach-reassure-grid {
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
}

.coach-theory-shell {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  padding: clamp(24px, 3.4vw, 46px);
  border: 1px solid rgba(205, 229, 231, 0.9);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 10%, rgba(80, 197, 187, 0.13), transparent 32%),
    radial-gradient(circle at 96% 24%, rgba(242, 127, 135, 0.11), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 253, 0.94));
  box-shadow:
    0 30px 82px rgba(31, 73, 82, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.coach-theory-head {
  display: grid;
  max-width: 860px;
  gap: 12px;
}

.coach-theory-head span,
.coach-loop-method > div span {
  color: #19a99f;
  font-weight: 920;
}

.coach-theory-head h2 {
  max-width: 780px;
  margin: 0;
  color: #17283d;
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.coach-theory-head p,
.coach-loop-method p {
  max-width: 780px;
  margin: 0;
  color: #526372;
  font-weight: 780;
  line-height: 1.9;
}

.coach-theory-quote {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border: 1px solid rgba(194, 225, 228, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
}

.coach-theory-quote strong {
  color: #17283d;
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
}

.coach-theory-quote span {
  color: #158a82;
  font-weight: 900;
}

.coach-theory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.coach-theory-grid article {
  min-height: 230px;
  padding: 20px;
  border: 1px solid rgba(211, 232, 234, 0.86);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 44px rgba(38, 78, 84, 0.07);
}

.coach-theory-grid b {
  display: inline-flex;
  margin-bottom: 12px;
  color: #19a99f;
  font-size: 0.9rem;
}

.coach-theory-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #17283d;
  font-size: 1.16rem;
  line-height: 1.35;
}

.coach-theory-grid p {
  margin: 0;
  color: #5b6a78;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.72;
}

.coach-loop-method {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(232, 250, 248, 0.9), rgba(255, 246, 247, 0.72));
}

.coach-loop-method h3 {
  margin: 8px 0 12px;
  color: #17283d;
  font-size: clamp(1.7rem, 2.4vw, 2.7rem);
  line-height: 1.2;
}

.coach-loop-method ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-loop-method li {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(211, 232, 234, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.coach-loop-method li b {
  color: #17283d;
  font-size: 1.02rem;
}

.coach-loop-method li span {
  color: #5f6d78;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.55;
}

.coach-theory-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(243, 251, 251, 0.58) 48%, rgba(255, 255, 255, 0));
}

.coach-theory-shell {
  max-width: 1480px;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(28px, 3.8vw, 54px) clamp(28px, 4.2vw, 64px) clamp(24px, 3vw, 42px);
  border-color: rgba(205, 229, 231, 0.82);
  border-radius: 40px;
  background:
    radial-gradient(circle at 86% 4%, rgba(231, 246, 241, 0.86), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 253, 0.96));
  overflow: hidden;
}

.coach-method-hero {
  display: grid;
  grid-template-columns: minmax(580px, 0.92fr) minmax(620px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.coach-method-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(14px, 1.5vw, 20px);
  align-content: center;
}

.coach-method-pill {
  width: fit-content;
  min-height: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(187, 223, 225, 0.92);
  border-radius: 999px;
  color: #079f95;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px rgba(40, 106, 112, 0.08);
  font-weight: 920;
}

.coach-method-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #10243d;
  font-size: clamp(3rem, 3.65vw, 4.35rem);
  line-height: 1.18;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}

.coach-method-copy p {
  max-width: 690px;
  margin: 0;
  color: #52606f;
  font-size: clamp(1rem, 1.06vw, 1.1rem);
  font-weight: 760;
  line-height: 1.82;
}

.coach-method-photo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 282px;
  margin: 0;
}

.coach-method-photo img {
  width: min(100%, 760px);
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 48px rgba(51, 75, 82, 0.08));
}

.coach-method-statement {
  display: flex;
  width: min(820px, 68%);
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: clamp(16px, 1.6vw, 26px) auto 0;
  border: 1px solid rgba(246, 190, 195, 0.74);
  border-radius: 999px;
  color: #10243d;
  background: linear-gradient(90deg, rgba(255, 247, 248, 0.94), rgba(255, 255, 255, 0.9));
  box-shadow: 0 18px 46px rgba(242, 127, 135, 0.08);
}

.coach-method-statement img {
  width: 48px;
  height: auto;
}

.coach-method-statement strong {
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  letter-spacing: 0;
}

.coach-method-theories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.coach-method-theories article {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 282px;
  padding: 20px 20px 12px;
  border: 1px solid rgba(219, 232, 234, 0.82);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 22px 60px rgba(47, 76, 86, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.coach-method-theories article > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #079f95;
  font-weight: 920;
}

.coach-method-theories article > div img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.coach-method-theories h3 {
  margin: 12px 0 8px;
  color: #10243d;
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  line-height: 1.35;
}

.coach-method-theories p {
  margin: 0;
  color: #566575;
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  font-weight: 730;
  line-height: 1.68;
}

.coach-method-theories figure {
  align-self: end;
  margin: 8px -10px 0;
  text-align: center;
}

.coach-method-theories figure img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.coach-method-loop {
  display: grid;
  grid-template-columns: minmax(360px, 0.38fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(178, 226, 226, 0.86);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 80%, rgba(80, 197, 187, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(245, 253, 252, 0.96), rgba(255, 255, 255, 0.9));
}

.coach-method-loop-intro {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 300px;
  padding: 10px 24px 10px 8px;
}

.coach-method-loop-intro span {
  color: #079f95;
  font-weight: 920;
}

.coach-method-loop-intro h3 {
  margin: 8px 0 12px;
  color: #10243d;
  font-size: clamp(1.9rem, 2.1vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.coach-method-loop-intro p {
  max-width: 340px;
  margin: 0;
  color: #536271;
  font-weight: 760;
  line-height: 1.8;
}

.coach-method-loop-intro img {
  width: 76px;
  height: auto;
  margin-top: 20px;
}

.coach-method-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 18px);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: coach-method-step;
}

.coach-method-steps li {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  min-height: 300px;
  padding: 18px 14px 16px;
  border: 1px solid rgba(211, 232, 234, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px rgba(39, 79, 86, 0.07);
  text-align: center;
  align-content: start;
}

.coach-method-steps li::before {
  counter-increment: coach-method-step;
  content: counter(coach-method-step);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #57c8bf, #8be0d8);
  font-size: 1rem;
  font-weight: 920;
  box-shadow: 0 12px 26px rgba(60, 190, 181, 0.18);
}

.coach-method-steps li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -18px;
  z-index: 2;
  color: #079f95;
  font-size: 1.45rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.coach-method-steps strong {
  color: #10243d;
  font-size: clamp(1rem, 1.02vw, 1.14rem);
  line-height: 1.2;
}

.coach-method-steps span {
  margin-top: 6px;
  color: #596879;
  font-size: 0.88rem;
  font-weight: 860;
}

.coach-method-steps p {
  align-self: start;
  margin: 18px 0 12px;
  color: #667483;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.55;
}

.coach-method-steps img {
  align-self: end;
  max-width: 88px;
  height: auto;
  object-fit: contain;
}

.coach-reference-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 385px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  min-height: 520px;
  padding: clamp(18px, 2.8vw, 34px);
  border: 1px solid rgba(229, 215, 195, 0.72);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 246, 234, 0.42), transparent 34%),
    radial-gradient(circle at var(--pointer-x, 72%) var(--pointer-y, 18%), rgba(242, 127, 135, 0.1), transparent 310px),
    linear-gradient(135deg, #fffaf4 0%, #ffffff 44%, #fff7ef 100%);
  box-shadow:
    0 30px 90px rgba(75, 55, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.coach-reference-shell::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -70px;
  width: 260px;
  height: 420px;
  border: 1px solid rgba(218, 180, 130, 0.24);
  border-radius: 50%;
  transform: rotate(22deg);
  pointer-events: none;
}

.coach-reference-hero {
  position: relative;
  z-index: 1;
  min-height: 472px;
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 22px 0;
  background: #f7efe5;
  box-shadow: 0 24px 58px rgba(74, 55, 44, 0.14);
}

.coach-reference-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 72%, rgba(255, 250, 244, 0.78));
  pointer-events: none;
}

.coach-reference-hero img,
.coach-role-photo img,
.coach-dual-photo img,
.coach-flow-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-reference-hero img {
  object-position: left center;
}

.coach-reference-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: clamp(22px, 3vw, 34px);
  min-width: 0;
}

.coach-ref-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.coach-ref-heading span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #68717b;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  font-weight: 760;
  line-height: 1.6;
}

.coach-ref-heading span::before,
.coach-ref-heading span::after {
  content: "";
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 197, 189, 0.45));
}

.coach-ref-heading span::after {
  background: linear-gradient(90deg, rgba(242, 127, 135, 0.48), transparent);
}

.coach-ref-heading h2 {
  margin: 0;
  color: #262a31;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: clamp(2.6rem, 5.2vw, 5.45rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.coach-ref-heading h2 span {
  display: inline;
  color: var(--coral);
  font-size: 1.12em;
  font-style: italic;
  line-height: 1;
}

.coach-ref-heading h2 span::before,
.coach-ref-heading h2 span::after {
  content: none;
}

.coach-ref-heading p {
  max-width: 54em;
  margin: 0;
  color: #66717b;
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 690;
  line-height: 1.85;
}

.coach-ref-role-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 18px);
}

.page-coach .coach-ref-role-grid,
.page-coach .coach-flow-track {
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-coach .coach-five-roles-section {
  width: min(100%, 1800px);
  margin-inline: auto;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(71, 184, 176, 0.18);
  border-radius: clamp(24px, 2.6vw, 34px);
  background:
    radial-gradient(circle at 16% 22%, rgba(226, 248, 246, 0.78), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 244, 0.8));
  box-shadow:
    0 28px 76px rgba(46, 74, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-coach .coach-five-roles-showcase {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(16px, 1.7vw, 24px);
  background: #fffdf9;
  box-shadow: 0 18px 48px rgba(78, 61, 45, 0.1);
}

.page-coach .coach-five-roles-showcase img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1916 / 821;
  object-fit: contain;
}

.coach-ref-role-card {
  min-height: 292px;
  padding: 0 16px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  box-shadow:
    0 18px 42px rgba(75, 61, 44, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.page-coach .coach-ref-role-card {
  min-height: 292px;
  height: auto;
  padding: 0 16px 22px;
}

.coach-ref-role-card.teal {
  border-color: rgba(88, 197, 189, 0.38);
}

.coach-ref-role-card.coral {
  border-color: rgba(242, 127, 135, 0.36);
}

.coach-ref-role-card.sky {
  border-color: rgba(115, 185, 223, 0.36);
}

.coach-ref-role-card.sand {
  border-color: rgba(196, 143, 82, 0.34);
}

.coach-role-photo {
  height: 120px;
  margin: 0 -16px;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  background: #f7efe5;
}

.coach-role-photo img {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.coach-ref-role-card:hover .coach-role-photo img {
  transform: scale(1.045);
}

.coach-role-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: -34px auto 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 14px 28px rgba(49, 79, 90, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.coach-role-symbol .icon {
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.page-coach .coach-role-symbol .icon {
  width: 58px;
  height: 58px;
  margin: 0;
}

.coach-ref-role-card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.2rem, 1.45vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.coach-ref-role-card p,
.coach-ref-role-card small {
  color: #57616d;
  font-size: clamp(0.78rem, 0.86vw, 0.9rem);
  line-height: 1.7;
}

.coach-dual-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.coach-dual-grid.coach-role-triad {
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
  gap: 14px;
}

.coach-dual-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 46%) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  min-height: 280px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(88, 197, 189, 0.46);
  border-radius: 20px;
  background:
    radial-gradient(circle at var(--pointer-x, 24%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.16), transparent 260px),
    linear-gradient(135deg, rgba(237, 253, 252, 0.92), rgba(255, 255, 255, 0.9));
  box-shadow:
    0 24px 60px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.coach-dual-card.coral {
  border-color: rgba(242, 127, 135, 0.42);
  background:
    radial-gradient(circle at var(--pointer-x, 30%) var(--pointer-y, 0%), rgba(242, 127, 135, 0.14), transparent 260px),
    linear-gradient(135deg, rgba(255, 242, 244, 0.94), rgba(255, 255, 255, 0.9));
}

.coach-role-triad .coach-dual-card {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 16px;
  min-height: 520px;
}

.coach-dual-card.director {
  border-color: rgba(218, 178, 118, 0.5);
  background:
    radial-gradient(circle at var(--pointer-x, 30%) var(--pointer-y, 0%), rgba(225, 179, 112, 0.16), transparent 260px),
    linear-gradient(135deg, rgba(255, 249, 240, 0.96), rgba(255, 255, 255, 0.92));
}

.coach-dual-photo {
  min-height: 210px;
  overflow: hidden;
  border-radius: 14px;
  background: #f4eee6;
  box-shadow: 0 18px 38px rgba(74, 55, 44, 0.12);
}

.coach-role-triad .coach-dual-photo {
  min-height: 220px;
  aspect-ratio: 16 / 9;
}

.coach-role-triad .coach-dual-photo img {
  height: 100%;
  object-fit: cover;
}

.coach-dual-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  justify-items: start;
  column-gap: 16px;
  row-gap: 12px;
  min-width: 0;
}

.coach-dual-copy .icon {
  grid-column: 1;
  grid-row: 1;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.coach-dual-copy h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--teal-strong);
  font-size: clamp(1.48rem, 1.8vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: 0.035em;
}

.coach-dual-card.coral h2 {
  color: var(--coral);
}

.coach-dual-card.director h2 {
  color: #b98745;
}

.coach-dual-copy p {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: #3d4652;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  font-weight: 880;
}

.coach-dual-copy .coach-check-list {
  grid-column: 1 / -1;
}

.coach-check-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: #596675;
  list-style: none;
  font-size: clamp(0.82rem, 0.94vw, 0.95rem);
  font-weight: 780;
  line-height: 1.55;
}

.coach-check-list li {
  position: relative;
  padding-left: 24px;
}

.coach-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-strong);
  font-weight: 950;
}

.coach-dual-card.coral .coach-check-list li::before,
.coach-reassure-card.coral .coach-check-list li::before {
  color: var(--coral);
}

.coach-dual-card.director .coach-check-list li::before {
  color: #c69452;
}

.coach-plus-badge {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-inline: -16px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), #86d8d1);
  box-shadow: 0 18px 36px rgba(88, 197, 189, 0.28);
  font-size: 2rem;
  font-weight: 500;
}

.coach-role-triad .coach-plus-badge {
  width: 54px;
  height: 54px;
  margin-inline: -12px;
  font-size: 1.65rem;
}

.coach-flow-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 14px;
  padding: clamp(14px, 1.8vw, 22px);
  border: 1px solid rgba(229, 215, 195, 0.8);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 248, 238, 0.84), rgba(255, 255, 255, 0.9)),
    radial-gradient(circle at 2% 12%, rgba(88, 197, 189, 0.12), transparent 230px);
  box-shadow:
    0 22px 60px rgba(75, 61, 44, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.coach-flow-intro {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(218, 200, 176, 0.62);
}

.coach-flow-intro .icon {
  width: 54px;
  height: 54px;
  color: var(--teal-strong);
  background: linear-gradient(135deg, rgba(88, 197, 189, 0.24), rgba(255, 255, 255, 0.72));
}

.coach-flow-intro h2 {
  margin: 0;
  color: #2f3440;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: clamp(1.55rem, 2.35vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.coach-flow-intro p {
  margin: 0;
  color: #6b747f;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.65;
}

.coach-flow-track {
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

.coach-flow-card {
  display: grid;
  align-content: start;
  min-height: 242px;
  padding: 0 12px 16px;
  border-radius: 14px;
  box-shadow:
    0 12px 30px rgba(75, 61, 44, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.page-coach .coach-flow-card {
  min-height: 242px;
  height: auto;
  padding: 0 12px 16px;
}

.coach-flow-photo {
  height: 84px;
  margin: 0 -12px 10px;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  background: #f6eee5;
}

.coach-flow-photo img {
  object-position: center;
}

.coach-flow-card > span {
  margin-bottom: 6px;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.coach-flow-card .icon {
  width: 60px;
  height: 60px;
  margin-bottom: 11px;
  background: rgba(255, 255, 255, 0.74);
}

.coach-flow-card h3 {
  margin-bottom: 8px;
  font-size: clamp(0.94rem, 1.08vw, 1.08rem);
  line-height: 1.32;
  letter-spacing: 0;
}

.coach-flow-card p {
  max-width: 11.5em;
  font-size: 0.76rem;
  line-height: 1.55;
}

.coach-flow-arrow {
  align-self: center;
  margin-top: 44px;
  color: rgba(123, 139, 149, 0.62);
  font-size: 1.25rem;
}

.page-coach .coach-flow-arrow {
  margin-top: 44px;
}

.page-coach .coach-flow-shell {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: center;
  padding: clamp(24px, 2.8vw, 36px);
  border-color: rgba(203, 228, 230, 0.88);
  border-radius: 28px;
  background:
    radial-gradient(circle at 7% 52%, rgba(91, 205, 196, 0.16), transparent 250px),
    linear-gradient(105deg, rgba(250, 254, 253, 0.98) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 251, 246, 0.92) 100%);
  box-shadow:
    0 30px 88px rgba(38, 79, 88, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.page-coach .coach-flow-intro {
  min-height: 250px;
  padding: 10px clamp(18px, 2vw, 28px);
  border-right: 1px solid rgba(205, 226, 229, 0.86);
}

.page-coach .coach-flow-intro .icon {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(88, 197, 189, 0.34);
  color: #0aa69b;
  background:
    radial-gradient(circle at 44% 34%, rgba(255, 255, 255, 0.98), rgba(235, 250, 249, 0.72));
  box-shadow: 0 18px 42px rgba(54, 178, 170, 0.12);
}

.page-coach .coach-flow-intro h2 {
  color: #14253d;
  font-size: clamp(2.05rem, 2.65vw, 3.15rem);
  line-height: 1.16;
}

.page-coach .coach-flow-intro p {
  max-width: 13em;
  color: #667484;
  font-size: 1rem;
  line-height: 1.7;
}

.page-coach .coach-flow-track-clean {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: clamp(14px, 1.45vw, 22px);
  align-items: stretch;
  margin: 0;
}

.page-coach .coach-flow-track-clean .coach-flow-arrow {
  display: none;
}

.page-coach .coach-flow-track-clean .coach-flow-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  min-height: 236px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(213, 231, 233, 0.98);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 253, 0.9));
  box-shadow:
    0 20px 48px rgba(31, 73, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  overflow: visible;
}

.page-coach .coach-flow-track-clean .coach-flow-card:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(14px, 1.45vw, 22px) * -1);
  z-index: 3;
  width: clamp(14px, 1.45vw, 22px);
  height: 2px;
  background: linear-gradient(90deg, rgba(10, 166, 155, 0.25), rgba(10, 166, 155, 0.72));
  transform: translateY(-50%);
}

.page-coach .coach-flow-track-clean .coach-flow-card:not(:last-of-type)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(14px, 1.45vw, 22px) * -1 - 2px);
  z-index: 4;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(10, 166, 155, 0.72);
  border-right: 2px solid rgba(10, 166, 155, 0.72);
  transform: translateY(-50%) rotate(45deg);
}

.page-coach .coach-flow-track-clean .coach-flow-card > span:first-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #32beb4, #88ded8);
  box-shadow: 0 14px 28px rgba(52, 190, 180, 0.2);
  font-size: 0.98rem;
  font-weight: 920;
}

.page-coach .coach-flow-track-clean .coach-flow-card.coral > span:first-child {
  background: linear-gradient(135deg, #f27f87, #ffbdc1);
}

.page-coach .coach-flow-track-clean .coach-flow-card.sky > span:first-child {
  background: linear-gradient(135deg, #56aee0, #a7ddf7);
}

.page-coach .coach-flow-track-clean .coach-flow-card.sand > span:first-child {
  background: linear-gradient(135deg, #c99555, #ead4ad);
}

.page-coach .coach-flow-track-clean .coach-flow-icon {
  width: 70px;
  height: 70px;
  margin: 0 0 14px;
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 50%;
  color: #0aa69b;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98), rgba(233, 250, 249, 0.9));
  box-shadow:
    0 16px 34px rgba(46, 144, 142, 0.1),
    inset 0 0 0 10px rgba(255, 255, 255, 0.58);
}

.page-coach .coach-flow-track-clean .coach-flow-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-coach .coach-flow-track-clean .coach-flow-icon.coral {
  color: #f27f87;
  border-color: rgba(242, 127, 135, 0.28);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98), rgba(255, 240, 242, 0.92));
}

.page-coach .coach-flow-track-clean .coach-flow-icon.sky {
  color: #56aee0;
  border-color: rgba(86, 174, 224, 0.28);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98), rgba(237, 248, 255, 0.94));
}

.page-coach .coach-flow-track-clean .coach-flow-icon.sand {
  color: #b88645;
  border-color: rgba(201, 149, 85, 0.28);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.94));
}

.page-coach .coach-flow-track-clean .coach-flow-card h3 {
  margin: 0 0 8px;
  color: #14253d;
  font-size: clamp(1.02rem, 1.06vw, 1.16rem);
  font-weight: 920;
  line-height: 1.24;
}

.page-coach .coach-flow-track-clean .coach-flow-card.teal h3 {
  color: #0aa69b;
}

.page-coach .coach-flow-track-clean .coach-flow-card.coral h3 {
  color: #f27f87;
}

.page-coach .coach-flow-track-clean .coach-flow-card.sky h3 {
  color: #56aee0;
}

.page-coach .coach-flow-track-clean .coach-flow-card.sand h3 {
  color: #b88645;
}

.page-coach .coach-flow-track-clean .coach-flow-card p {
  max-width: 9.5em;
  margin: 0 auto;
  color: #607080;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.62;
}

.page-coach .coach-flow-showcase {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: clamp(8px, 1vw, 14px);
  border: 1px solid rgba(203, 228, 230, 0.86);
  border-radius: clamp(22px, 2.5vw, 36px);
  background:
    radial-gradient(circle at 12% 18%, rgba(88, 197, 189, 0.11), transparent 260px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 253, 253, 0.94));
  box-shadow:
    0 24px 70px rgba(35, 80, 89, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.page-coach .coach-flow-showcase img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 724;
  border-radius: clamp(18px, 2vw, 28px);
}

.coach-reassure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.coach-reassure-card {
  display: grid;
  grid-template-columns: minmax(230px, 42%) minmax(0, 1fr);
  gap: clamp(18px, 2.3vw, 30px);
  min-height: 300px;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-coach .coach-reassure-card {
  grid-template-columns: minmax(230px, 42%) minmax(0, 1fr);
  min-height: 300px;
  height: auto;
  padding: clamp(18px, 2.4vw, 30px);
}

.coach-reassure-card > div,
.coach-reassure-copy {
  padding: 0;
}

.page-coach .coach-reassure-card > div,
.page-coach .coach-reassure-card .coach-reassure-copy {
  padding: 0;
}

.coach-reassure-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.coach-reassure-copy > span {
  justify-self: start;
  min-height: 40px;
  padding: 0 17px;
  border: 1px solid rgba(202, 221, 224, 0.9);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 920;
  line-height: 40px;
}

.coach-reassure-card.coral .coach-reassure-copy > span {
  color: var(--coral);
  border-color: rgba(242, 127, 135, 0.28);
}

.coach-reassure-card h3 {
  margin: 8px 0 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.page-coach .coach-reassure-card h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.25;
}

.coach-reassure-visual {
  min-height: 240px;
  padding: 18px;
  border: 1px solid rgba(211, 228, 231, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 10%, rgba(88, 197, 189, 0.18), transparent 160px),
    rgba(255, 255, 255, 0.54);
}

.coach-reassure-card.coral .coach-reassure-visual,
.coach-reassure-visual.child {
  border-color: rgba(242, 127, 135, 0.2);
  background:
    radial-gradient(circle at 50% 12%, rgba(242, 127, 135, 0.18), transparent 160px),
    rgba(255, 255, 255, 0.54);
}

.coach-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(202, 221, 224, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(49, 79, 90, 0.06);
}

.coach-report-tab span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--teal);
}

.coach-report-tab b {
  color: #27323f;
  font-size: 1rem;
  font-weight: 920;
}

.coach-reassure-visual article {
  padding: 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
}

.coach-reassure-visual article i {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 236, 239, 0.9);
}

.coach-reassure-visual article i::after {
  content: none;
}

.coach-reassure-visual article i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.coach-task-face {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 104px;
  height: 104px;
  border-radius: 36px;
  background: linear-gradient(135deg, #f47784, #f7a6ad);
  box-shadow: 0 18px 38px rgba(242, 127, 135, 0.25);
}

.coach-task-face span,
.coach-task-face i {
  display: block;
  width: 46px;
  height: 22px;
  border: 4px solid #fff;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.coach-task-face i {
  width: 58px;
  margin-top: -12px;
  opacity: 0.46;
}

.coach-task-card {
  width: min(100%, 190px);
  justify-self: center;
}

.coach-task-card strong {
  font-size: 1.35rem;
}

.coach-reward-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.coach-reward-row span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 0 7px rgba(242, 127, 135, 0.13);
}

.page-coach .cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  min-height: 220px;
  margin: 0;
  padding: clamp(48px, 5vw, 72px) var(--page-gutter) clamp(36px, 4vw, 54px);
  border-radius: 0;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(62% 105% at 0% 100%, rgba(204, 239, 253, 0.78), transparent 68%),
    radial-gradient(58% 105% at 100% 100%, rgba(255, 231, 211, 0.86), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 253, 0.98));
  box-shadow: none;
  overflow: hidden;
}

.page-coach .cta-band::after {
  content: none;
}

.page-coach .cta-band > div {
  position: relative;
  z-index: 1;
}

.page-coach .cta-band h2 {
  margin: 0;
  color: #252d36;
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.page-coach .cta-band p {
  max-width: 42em;
  margin: 8px auto 0;
  color: #68717c;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 760;
}

.page-coach .cta-band .cta-actions {
  justify-self: center;
  justify-content: center;
}

.page-coach .cta-band .btn {
  min-width: 190px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f27f87, #f06f7c);
  box-shadow: 0 16px 32px rgba(242, 127, 135, 0.22);
}

.page-coach .cta-band .cta-mark {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 42px;
  height: 42px;
  color: var(--teal-strong);
  opacity: 0.28;
  transform: translateX(176px) rotate(-10deg);
}

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

  .coach-method-photo {
    min-height: 0;
  }

  .coach-method-statement {
    width: 100%;
  }

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

  .coach-method-loop {
    grid-template-columns: 1fr;
  }

  .coach-method-loop-intro {
    min-height: auto;
    padding: 0;
  }

  .coach-method-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .coach-method-steps li:not(:last-child)::after {
    display: none;
  }

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

  .coach-loop-method {
    grid-template-columns: 1fr;
  }

  .coach-reference-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
  }

  .coach-reference-hero {
    min-height: 520px;
  }

  .coach-ref-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .coach-dual-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .coach-dual-grid.coach-role-triad {
    grid-template-columns: minmax(0, 1fr);
  }

  .coach-role-triad .coach-dual-card {
    min-height: auto;
  }

  .coach-plus-badge {
    width: 54px;
    height: 54px;
    margin: -12px auto;
  }

  .coach-flow-shell {
    grid-template-columns: 1fr;
  }

  .coach-flow-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(218, 200, 176, 0.62);
  }

  .page-coach .coach-flow-intro {
    min-height: auto;
    padding: 0 0 20px;
    border-right: 0;
    border-bottom-color: rgba(205, 226, 229, 0.86);
  }

  .page-coach .coach-flow-track-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-coach .coach-flow-track-clean .coach-flow-card::before,
  .page-coach .coach-flow-track-clean .coach-flow-card::after {
    content: none;
  }
}

@media (max-width: 900px) {
  .coach-theory-shell {
    padding: 20px;
    border-radius: 24px;
  }

  .coach-method-copy h2 {
    font-size: clamp(2.3rem, 11vw, 3.3rem);
  }

  .coach-method-copy p {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .coach-method-statement {
    min-height: auto;
    justify-content: flex-start;
    padding: 14px 18px;
    border-radius: 24px;
  }

  .coach-method-statement img {
    width: 38px;
  }

  .coach-method-statement strong {
    font-size: 1.15rem;
  }

  .coach-method-theories,
  .coach-method-steps {
    grid-template-columns: 1fr;
  }

  .coach-method-theories article {
    min-height: 0;
  }

  .coach-method-theories figure img {
    max-height: 170px;
  }

  .coach-method-loop {
    padding: 18px;
    border-radius: 22px;
  }

  .coach-method-loop-intro h3 {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .coach-method-steps li {
    min-height: 0;
  }

  .coach-theory-grid,
  .coach-loop-method ol {
    grid-template-columns: 1fr;
  }

  .coach-reference-shell {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .coach-reference-hero {
    min-height: 360px;
    border-radius: 18px;
  }

  .coach-reference-hero::after {
    background: linear-gradient(180deg, transparent 74%, rgba(255, 250, 244, 0.76));
  }

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

  .coach-dual-card,
  .page-coach .coach-reassure-card {
    grid-template-columns: 1fr;
  }

  .coach-dual-photo {
    min-height: 230px;
  }

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

  .page-coach .coach-flow-track-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-flow-arrow {
    display: none;
  }

  .coach-reassure-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .coach-theory-shell {
    gap: 18px;
    padding: 18px;
  }

  .coach-method-pill {
    min-height: 34px;
    padding-inline: 16px;
    font-size: 0.9rem;
  }

  .coach-method-photo img {
    width: 112%;
    max-width: none;
    margin-left: -6%;
  }

  .coach-method-theories article {
    padding: 18px 18px 10px;
    border-radius: 18px;
  }

  .coach-method-loop-intro img {
    width: 58px;
  }

  .page-coach .coach-reference-section,
  .page-coach .coach-dual-section,
  .page-coach .coach-flow-section,
  .page-coach .coach-reassure-section {
    padding-block: 24px;
  }

  .coach-reference-shell,
  .coach-dual-card,
  .coach-flow-shell,
  .coach-reassure-card {
    border-radius: 18px;
  }

  .coach-ref-heading span {
    display: block;
  }

  .coach-ref-heading span::before,
  .coach-ref-heading span::after {
    content: none;
  }

  .coach-ref-role-grid,
  .coach-flow-track {
    grid-template-columns: 1fr;
  }

  .page-coach .coach-flow-shell {
    padding: 18px;
  }

  .page-coach .coach-flow-intro {
    justify-items: center;
    text-align: center;
  }

  .page-coach .coach-flow-intro p {
    max-width: 100%;
  }

  .page-coach .coach-flow-track-clean {
    grid-template-columns: 1fr;
  }

  .page-coach .coach-ref-role-card {
    min-height: 250px;
  }

  .coach-role-photo {
    height: 128px;
  }

  .coach-dual-photo {
    min-height: 190px;
  }

  .page-coach .coach-flow-card {
    min-height: 0;
  }

  .coach-flow-photo {
    height: 98px;
  }

  .coach-reassure-visual {
    min-height: 220px;
  }

  .page-coach .cta-band {
    min-height: 210px;
    padding-top: 44px;
  }

  .page-coach .cta-band .cta-mark {
    display: none;
  }
}

/* Parent page assurance redesign */
.page-parent .parent-concern-section,
.page-parent .parent-care-section,
.page-parent .parent-reasons-section,
.page-parent .parent-testimonials-section,
.page-parent .parent-connection-section {
  padding-block: clamp(34px, 5vw, 72px);
}

.parent-concern-shell,
.parent-care-shell,
.parent-reasons-shell,
.parent-feedback-shell,
.parent-weekly-shell {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}

.parent-block-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto clamp(24px, 3.2vw, 38px);
  text-align: center;
}

.parent-block-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(88, 197, 189, 0.2);
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.74);
  font-size: 0.76rem;
  font-weight: 950;
}

.parent-block-heading h2 {
  margin: 0;
  color: #25303b;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.parent-block-heading h2 span {
  color: var(--coral);
}

.parent-care-section .parent-block-heading h2 span,
.parent-connection-section .parent-block-heading h2 span {
  color: var(--teal-strong);
}

.parent-block-heading p {
  max-width: 56em;
  margin: 0;
  color: #66717d;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: 700;
  line-height: 1.85;
}

.parent-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(226, 238, 241, 0.86);
  color: #65717d;
  font-size: 0.72rem;
  font-weight: 900;
}

.parent-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.parent-browser-bar i:nth-child(2) {
  background: var(--coral);
}

.parent-browser-bar i:nth-child(3) {
  background: var(--sky);
}

.parent-browser-bar span {
  min-width: 0;
  margin-left: 4px;
  color: #34404b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-browser-bar em {
  margin-left: auto;
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-style: normal;
  white-space: nowrap;
}

.parent-concern-shell {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 10%), rgba(242, 127, 135, 0.12), transparent 24rem),
    linear-gradient(135deg, rgba(255, 248, 249, 0.76), rgba(255, 255, 255, 0.96) 48%, rgba(237, 253, 252, 0.74));
  box-shadow:
    0 26px 72px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.parent-concern-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
}

.parent-worry-stack {
  display: grid;
  gap: 12px;
}

.parent-worry-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 16px 18px;
  border: 1px solid rgba(88, 197, 189, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--pointer-x, 8%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.7), transparent 150px),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.07);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.parent-worry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 197, 189, 0.42);
  box-shadow: 0 20px 42px rgba(49, 79, 90, 0.1);
}

.parent-worry-card.coral {
  border-color: rgba(242, 127, 135, 0.28);
}

.parent-worry-card.sky {
  border-color: rgba(115, 185, 223, 0.3);
}

.parent-worry-card.sand {
  border-color: rgba(215, 173, 121, 0.28);
}

.parent-worry-card b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.86rem;
  font-weight: 950;
}

.parent-worry-card.coral b {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.12);
}

.parent-worry-card.sky b {
  color: var(--sky);
  background: rgba(115, 185, 223, 0.13);
}

.parent-worry-card.sand b {
  color: #ad7d42;
  background: rgba(215, 173, 121, 0.14);
}

.parent-worry-card span {
  display: block;
  color: #82909b;
  font-size: 0.72rem;
  font-weight: 900;
}

.parent-worry-card p {
  margin: 3px 0 0;
  color: #303946;
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 870;
  line-height: 1.5;
}

.parent-worry-card em {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 920;
  line-height: 28px;
  white-space: nowrap;
}

.parent-concern-console {
  display: grid;
  align-content: start;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 231, 235, 0.92);
  border-radius: 24px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.048) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 253, 253, 0.9));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow:
    0 24px 58px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.parent-console-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 18px 10px;
}

.parent-console-summary article,
.parent-console-flow div,
.parent-console-message {
  border: 1px solid rgba(224, 237, 240, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(49, 79, 90, 0.06);
}

.parent-console-summary article {
  display: grid;
  gap: 4px;
  min-height: 94px;
  padding: 14px;
}

.parent-console-summary small,
.parent-console-flow b,
.parent-console-flow span,
.parent-console-message p {
  color: #64717d;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.55;
}

.parent-console-summary strong {
  color: var(--teal-strong);
  font-size: 2rem;
  line-height: 1;
}

.parent-console-summary span {
  color: #8a97a2;
  font-size: 0.72rem;
  font-weight: 850;
}

.parent-console-flow {
  display: grid;
  gap: 10px;
  padding: 8px 18px 18px;
}

.parent-console-flow div {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 84px;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  overflow: hidden;
}

.parent-console-flow b {
  color: #303b47;
  font-size: 0.84rem;
}

.parent-console-flow i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 236, 239, 0.9);
}

.parent-console-flow i::after {
  content: "";
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.parent-console-flow div:nth-child(2) i::after {
  width: 88%;
}

.parent-console-flow div:nth-child(3) i::after {
  width: 64%;
  background: linear-gradient(90deg, var(--coral), #f3a4aa);
}

.parent-console-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 18px 18px;
  padding: 14px;
}

.parent-console-message .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-console-message p {
  margin: 0;
}

.parent-care-shell {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 84%) var(--pointer-y, 10%), rgba(88, 197, 189, 0.14), transparent 24rem),
    linear-gradient(135deg, rgba(237, 253, 252, 0.86), rgba(255, 255, 255, 0.95));
  box-shadow:
    0 26px 72px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.parent-care-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: stretch;
}

.parent-care-tabs {
  display: grid;
  gap: 10px;
  align-content: start;
}

.parent-care-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 18px;
  color: inherit;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 26px rgba(49, 79, 90, 0.05);
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.parent-care-tab:hover,
.parent-care-tab.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.42);
  background: rgba(255, 255, 255, 0.94);
}

.parent-care-tab.coral:hover,
.parent-care-tab.coral.is-active {
  border-color: rgba(242, 127, 135, 0.42);
}

.parent-care-tab.sky:hover,
.parent-care-tab.sky.is-active {
  border-color: rgba(115, 185, 223, 0.44);
}

.parent-care-tab.sand:hover,
.parent-care-tab.sand.is-active {
  border-color: rgba(215, 173, 121, 0.44);
}

.parent-care-tab .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-care-tab span {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
}

.parent-care-tab.coral span {
  color: var(--coral);
}

.parent-care-tab.sky span {
  color: var(--sky);
}

.parent-care-tab.sand span {
  color: #ad7d42;
}

.parent-care-tab b,
.parent-care-tab small {
  grid-column: 3;
}

.parent-care-tab b {
  color: #303b46;
  font-size: 0.96rem;
  line-height: 1.2;
}

.parent-care-tab small {
  color: #76838e;
  font-size: 0.7rem;
  font-weight: 820;
}

.parent-care-panels {
  min-width: 0;
}

.parent-care-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
  gap: clamp(16px, 2vw, 24px);
  min-height: 478px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--pointer-x, 22%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.14), transparent 18rem),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 56px rgba(49, 79, 90, 0.08);
}

.parent-care-panel[hidden] {
  display: none !important;
}

.parent-care-panel.coral {
  border-color: rgba(242, 127, 135, 0.28);
  background:
    radial-gradient(circle at var(--pointer-x, 22%) var(--pointer-y, 0%), rgba(242, 127, 135, 0.13), transparent 18rem),
    rgba(255, 255, 255, 0.78);
}

.parent-care-panel.sky {
  border-color: rgba(115, 185, 223, 0.32);
}

.parent-care-panel.sand {
  border-color: rgba(215, 173, 121, 0.3);
}

.parent-care-device {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 20px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.045) 1px, transparent 1px),
    #fff;
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.parent-care-device-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 12px;
  padding: 16px;
}

.parent-care-score,
.parent-care-chart,
.parent-care-list {
  border: 1px solid rgba(224, 237, 240, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 26px rgba(49, 79, 90, 0.06);
}

.parent-care-score {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 220px;
  padding: 16px;
}

.parent-care-score .icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}

.parent-care-score small,
.parent-care-chart span,
.parent-care-list b,
.parent-care-list span {
  color: #65717d;
  font-size: 0.74rem;
  font-weight: 850;
}

.parent-care-score strong {
  color: #2f3a46;
  font-size: 1.45rem;
  line-height: 1.2;
}

.parent-care-score p {
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.82rem;
  font-weight: 880;
  line-height: 1.55;
}

.parent-care-chart {
  min-height: 220px;
  padding: 16px;
}

.parent-mini-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 126px;
}

.parent-mini-chart .area {
  fill: rgba(88, 197, 189, 0.14);
}

.parent-mini-chart .line {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 4;
  stroke-linecap: round;
}

.parent-mini-chart circle {
  fill: #fff;
  stroke: var(--teal-strong);
  stroke-width: 4;
}

.parent-mini-chart.coral .area {
  fill: rgba(242, 127, 135, 0.13);
}

.parent-mini-chart.coral .line,
.parent-mini-chart.coral circle {
  stroke: var(--coral);
}

.parent-mini-chart.sky .area {
  fill: rgba(115, 185, 223, 0.14);
}

.parent-mini-chart.sky .line,
.parent-mini-chart.sky circle {
  stroke: var(--sky);
}

.parent-mini-chart.sand .area {
  fill: rgba(215, 173, 121, 0.15);
}

.parent-mini-chart.sand .line,
.parent-mini-chart.sand circle {
  stroke: #ad7d42;
}

.parent-care-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 14px;
}

.parent-care-list b {
  color: #303b47;
}

.parent-care-list span {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.1);
  color: var(--teal-strong);
  line-height: 34px;
  text-align: center;
}

.parent-care-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}

.parent-care-copy span {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.74rem;
  font-weight: 930;
  line-height: 34px;
}

.parent-care-panel.coral .parent-care-copy span {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.12);
}

.parent-care-panel.sky .parent-care-copy span {
  color: var(--sky);
  background: rgba(115, 185, 223, 0.13);
}

.parent-care-panel.sand .parent-care-copy span {
  color: #ad7d42;
  background: rgba(215, 173, 121, 0.14);
}

.parent-care-copy h3 {
  margin: 0;
  color: #2e3844;
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  line-height: 1.22;
}

.parent-care-copy p {
  margin: 0;
  color: #606d79;
  font-size: clamp(0.9rem, 1.04vw, 1rem);
  font-weight: 730;
  line-height: 1.85;
}

.parent-reasons-shell,
.parent-feedback-shell,
.parent-weekly-shell {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(218, 231, 234, 0.86);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgba(115, 185, 223, 0.13), transparent 24rem),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    0 26px 72px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

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

.parent-reason-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 280px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(88, 197, 189, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.14), transparent 14rem),
    linear-gradient(135deg, rgba(237, 253, 252, 0.82), rgba(255, 255, 255, 0.92));
  box-shadow: 0 16px 38px rgba(49, 79, 90, 0.07);
}

.parent-reason-card.wide {
  grid-column: span 2;
}

.parent-reason-card.tall {
  grid-column: span 2;
}

.parent-reason-card.sky {
  border-color: rgba(115, 185, 223, 0.3);
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgba(115, 185, 223, 0.15), transparent 14rem),
    linear-gradient(135deg, rgba(238, 248, 255, 0.9), rgba(255, 255, 255, 0.92));
}

.parent-reason-card.coral {
  border-color: rgba(242, 127, 135, 0.28);
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgba(242, 127, 135, 0.14), transparent 14rem),
    linear-gradient(135deg, rgba(255, 240, 242, 0.9), rgba(255, 255, 255, 0.92));
}

.parent-reason-card.sand {
  border-color: rgba(215, 173, 121, 0.3);
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgba(215, 173, 121, 0.15), transparent 14rem),
    linear-gradient(135deg, rgba(255, 247, 237, 0.9), rgba(255, 255, 255, 0.92));
}

.parent-reason-icon .icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
}

.parent-reason-card h3 {
  margin: 0 0 7px;
  color: #303b47;
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
  line-height: 1.35;
}

.parent-reason-card p {
  margin: 0;
  color: #62707c;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.7;
}

.parent-route-map,
.parent-report-mini,
.parent-team-mini,
.parent-trend-mini {
  margin-top: auto;
  border: 1px solid rgba(224, 237, 240, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 26px rgba(49, 79, 90, 0.05);
}

.parent-route-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px;
}

.parent-route-map span,
.parent-team-mini span,
.parent-team-mini b,
.parent-trend-mini span {
  color: #64717d;
  font-size: 0.72rem;
  font-weight: 870;
  text-align: center;
}

.parent-route-map i {
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.34);
}

.parent-report-mini {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  padding: 16px;
}

.parent-report-mini b,
.parent-report-mini strong {
  color: #303b47;
}

.parent-report-mini strong {
  color: var(--sky);
  font-size: 2.2rem;
}

.parent-report-mini .parent-mini-chart {
  grid-column: 1 / -1;
  min-height: 112px;
}

.parent-team-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.parent-team-mini span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.parent-team-mini b {
  grid-column: 1 / -1;
  min-height: 34px;
  border-radius: 999px;
  color: var(--coral);
  background: rgba(242, 127, 135, 0.1);
  line-height: 34px;
}

.parent-trend-mini {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.parent-trend-mini span {
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #ad7d42;
  background: rgba(215, 173, 121, 0.13);
  line-height: 30px;
}

.parent-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.9fr);
  gap: 16px;
}

.parent-featured-quote,
.parent-feedback-thread,
.parent-sentiment-panel {
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(49, 79, 90, 0.08);
}

.parent-featured-quote {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 360px;
  padding: clamp(24px, 3vw, 38px);
  background:
    radial-gradient(circle at var(--pointer-x, 12%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.18), transparent 19rem),
    linear-gradient(135deg, rgba(237, 253, 252, 0.9), rgba(255, 255, 255, 0.88));
}

.parent-quote-score {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-self: start;
  gap: 3px;
  min-width: 122px;
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--teal-strong);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 28px rgba(49, 79, 90, 0.07);
}

.parent-quote-score strong {
  font-size: 2.6rem;
  line-height: 0.9;
}

.parent-quote-score span {
  color: #7e8994;
  font-weight: 900;
}

.parent-quote-score small {
  grid-column: 1 / -1;
  color: #6d7a85;
  font-size: 0.72rem;
  font-weight: 850;
}

.parent-featured-quote p {
  margin: 0;
  max-width: 22em;
  color: #2f3944;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  font-weight: 890;
  line-height: 1.55;
}

.parent-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.parent-quote-author b,
.parent-feedback-card > b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 1.05rem;
}

.parent-quote-author span {
  color: #62707c;
  font-size: 0.9rem;
  font-weight: 840;
}

.parent-feedback-thread {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.parent-feedback-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(224, 237, 240, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.parent-feedback-card.coral > b {
  background: linear-gradient(135deg, var(--coral), #f4a1a8);
}

.parent-feedback-card.sky > b {
  background: linear-gradient(135deg, var(--sky), #98d0ed);
}

.parent-feedback-card span {
  color: #303b47;
  font-size: 0.82rem;
  font-weight: 900;
}

.parent-feedback-card p {
  margin: 5px 0 8px;
  color: #65717d;
  font-size: 0.82rem;
  font-weight: 730;
  line-height: 1.6;
}

.parent-feedback-card em {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.11);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 26px;
}

.parent-sentiment-panel {
  grid-column: 1 / -1;
  overflow: hidden;
}

.parent-sentiment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.parent-sentiment-grid article {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(224, 237, 240, 0.92);
  border-radius: 17px;
  background: rgba(247, 253, 253, 0.84);
}

.parent-sentiment-grid strong {
  color: var(--teal-strong);
  font-size: 2rem;
  line-height: 1;
}

.parent-sentiment-grid span,
.parent-sentiment-tags span {
  color: #687681;
  font-size: 0.78rem;
  font-weight: 850;
}

.parent-sentiment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 18px;
}

.parent-sentiment-tags span {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.1);
  color: var(--teal-strong);
  line-height: 30px;
}

.parent-weekly-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2.4vw, 28px);
}

.parent-weekly-timeline {
  position: relative;
  display: grid;
  gap: 12px;
}

.parent-weekly-timeline::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--coral), var(--sky), var(--sand));
  opacity: 0.32;
}

.parent-weekly-step {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 15px;
  border: 1px solid rgba(88, 197, 189, 0.26);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(49, 79, 90, 0.06);
}

.parent-weekly-step.coral {
  border-color: rgba(242, 127, 135, 0.28);
}

.parent-weekly-step.sky {
  border-color: rgba(115, 185, 223, 0.3);
}

.parent-weekly-step.sand {
  border-color: rgba(215, 173, 121, 0.3);
}

.parent-weekly-step > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #fff;
  background: var(--teal);
  font-size: 0.72rem;
  font-weight: 950;
}

.parent-weekly-step.coral > span {
  background: var(--coral);
}

.parent-weekly-step.sky > span {
  background: var(--sky);
}

.parent-weekly-step.sand > span {
  background: var(--sand);
}

.parent-weekly-step .icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.parent-weekly-step h3 {
  margin: 0 0 2px;
  color: #303b47;
  font-size: 0.96rem;
  line-height: 1.35;
}

.parent-weekly-step p {
  margin: 0;
  color: #65717d;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.55;
}

.parent-weekly-device {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 231, 234, 0.9);
  border-radius: 24px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 197, 189, 0.048) 1px, transparent 1px),
    #fff;
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow:
    0 22px 58px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.parent-weekly-screen {
  display: grid;
  grid-template-columns: minmax(190px, 0.36fr) minmax(0, 0.64fr);
  gap: 14px;
  padding: 18px;
}

.parent-weekly-screen aside,
.parent-weekly-screen main {
  border: 1px solid rgba(224, 237, 240, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(49, 79, 90, 0.06);
}

.parent-weekly-screen aside {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.parent-weekly-screen aside b {
  color: #303b47;
  font-size: 0.98rem;
}

.parent-weekly-screen aside span {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
  font-size: 0.78rem;
  font-weight: 880;
  line-height: 42px;
}

.parent-weekly-screen main {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.parent-weekly-message {
  display: grid;
  gap: 5px;
  max-width: 90%;
  padding: 13px;
  border-radius: 17px;
  background: rgba(237, 253, 252, 0.9);
}

.parent-weekly-message.parent {
  justify-self: end;
  background: rgba(255, 240, 242, 0.86);
}

.parent-weekly-message b {
  color: #303b47;
  font-size: 0.78rem;
}

.parent-weekly-message p {
  margin: 0;
  color: #65717d;
  font-size: 0.8rem;
  font-weight: 730;
  line-height: 1.6;
}

.parent-weekly-next {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(115, 185, 223, 0.24);
  border-radius: 17px;
  background: rgba(238, 248, 255, 0.76);
}

.parent-weekly-next span,
.parent-weekly-next em {
  color: #687681;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.parent-weekly-next strong {
  color: #2f3a46;
  font-size: 1.04rem;
}

@media (max-width: 1080px) {
  .parent-concern-layout,
  .parent-care-layout,
  .parent-weekly-layout {
    grid-template-columns: 1fr;
  }

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

  .parent-care-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

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

  .parent-feedback-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-parent .parent-concern-section,
  .page-parent .parent-care-section,
  .page-parent .parent-reasons-section,
  .page-parent .parent-testimonials-section,
  .page-parent .parent-connection-section {
    padding-block: 24px;
  }

  .parent-concern-shell,
  .parent-care-shell,
  .parent-reasons-shell,
  .parent-feedback-shell,
  .parent-weekly-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .parent-care-tabs,
  .parent-reasons-grid,
  .parent-console-summary,
  .parent-sentiment-grid {
    grid-template-columns: 1fr;
  }

  .parent-worry-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .parent-worry-card em {
    grid-column: 2;
    justify-self: start;
  }

  .parent-console-flow div,
  .parent-care-device-grid,
  .parent-care-list,
  .parent-weekly-screen {
    grid-template-columns: 1fr;
  }

  .parent-care-list span {
    text-align: left;
  }

  .parent-reason-card.wide,
  .parent-reason-card.tall {
    grid-column: auto;
  }

  .parent-route-map {
    grid-template-columns: 1fr;
  }

  .parent-route-map i {
    width: 2px;
    height: 24px;
    justify-self: center;
  }

  .parent-featured-quote {
    min-height: 300px;
  }

  .parent-feedback-card,
  .parent-weekly-step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .parent-weekly-step .icon {
    grid-row: span 2;
  }

  .parent-weekly-step div {
    grid-column: 1 / -1;
  }

  .parent-weekly-screen aside span {
    white-space: normal;
    line-height: 1.35;
    padding-block: 10px;
  }
}

.page-home {
  --home-ink: #202a36;
  --home-muted: #64717d;
  --home-line: #dfecef;
  --home-teal: #36b9b0;
  --home-teal-rgb: 54 185 176;
  --home-coral: #f57783;
  --home-coral-rgb: 245 119 131;
  --home-sky: #5eb4df;
  --home-sky-rgb: 94 180 223;
  --home-sand: #d9aa68;
  --home-sand-rgb: 217 170 104;
}

.page-home .home-redesign-entry,
.page-home .home-advantage-redesign,
.page-home .home-choice-section,
.page-home .home-course-section,
.page-home .home-stats-section {
  padding-top: clamp(26px, 4vw, 54px);
  padding-bottom: clamp(20px, 3.8vw, 48px);
}

.page-home .home-reference-shell {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.page-home .home-reference-shell,
.page-home .home-step-card,
.page-home .home-system-panel,
.page-home .home-parent-tracker,
.page-home .home-pain-card,
.page-home .home-adv-card,
.page-home .home-choice-band,
.page-home .home-course-card,
.page-home .home-stat-tile {
  isolation: isolate;
}

.page-home .home-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.2);
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  font-size: 0.74rem;
  font-weight: 900;
}

.page-home .home-pill i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--home-teal);
  box-shadow: 0 0 0 5px rgba(var(--home-teal-rgb) / 0.12);
}

.page-home .home-quick-guide {
  display: grid;
  grid-template-columns: 1.12fr repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(218, 231, 234, 0.86);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 8%) var(--pointer-y, 12%), rgba(var(--home-teal-rgb) / 0.08), transparent 260px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 252, 0.9));
  box-shadow: 0 24px 70px rgba(49, 79, 90, 0.08);
}

.page-home .home-guide-intro {
  display: grid;
  align-content: center;
  min-height: 178px;
  padding: clamp(20px, 2.5vw, 32px);
}

.page-home .home-guide-intro h2,
.page-home .home-system-copy h2,
.page-home .home-section-head h2,
.page-home .home-choice-copy h2,
.page-home .home-course-section h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: "Songti TC", "STSong", Georgia, "Times New Roman", serif;
  font-weight: 850;
  letter-spacing: 0;
}

.page-home .home-guide-intro h2 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.45rem);
  line-height: 1.18;
}

.page-home .home-guide-intro p,
.page-home .home-system-copy p,
.page-home .home-section-head p,
.page-home .home-choice-copy li,
.page-home .home-course-copy li,
.page-home .home-parent-tracker p,
.page-home .home-pain-card small,
.page-home .home-adv-card p {
  color: var(--home-muted);
  font-weight: 700;
  line-height: 1.68;
}

.page-home .home-guide-intro p {
  max-width: 31em;
  margin: 12px 0 0;
  font-size: 0.92rem;
}

.page-home .home-step-card {
  position: relative;
  display: grid;
  grid-template-rows: 108px 1fr;
  align-items: stretch;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 8%, rgba(var(--home-teal-rgb) / 0.12), transparent 170px),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(49, 79, 90, 0.07);
  transition:
    transform 190ms ease,
    box-shadow 190ms ease,
    border-color 190ms ease;
}

.page-home .home-step-card.coral {
  border-color: rgba(var(--home-coral-rgb) / 0.2);
  background:
    radial-gradient(circle at 20% 8%, rgba(var(--home-coral-rgb) / 0.12), transparent 170px),
    rgba(255, 255, 255, 0.88);
}

.page-home .home-step-card.sky {
  border-color: rgba(var(--home-sky-rgb) / 0.22);
  background:
    radial-gradient(circle at 20% 8%, rgba(var(--home-sky-rgb) / 0.12), transparent 170px),
    rgba(255, 255, 255, 0.88);
}

.page-home .home-step-card:hover,
.page-home .home-adv-card:hover,
.page-home .home-course-card:hover,
.page-home .home-pain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(49, 79, 90, 0.12);
}

.page-home .home-step-card > div {
  position: relative;
  z-index: 1;
  grid-row: 2;
  display: grid;
  align-content: center;
  gap: 7px;
  max-width: none;
  padding: 14px 16px 16px;
}

.page-home .home-step-card span,
.page-home .home-adv-card b {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--home-teal), #239f98);
  font-size: 0.72rem;
  font-weight: 950;
}

.page-home .home-step-card.coral span,
.page-home .home-adv-card.coral b {
  background: linear-gradient(135deg, var(--home-coral), #ef6f7b);
}

.page-home .home-step-card.sky span,
.page-home .home-adv-card.sky b {
  background: linear-gradient(135deg, var(--home-sky), #4da6d6);
}

.page-home .home-adv-card.sand b {
  background: linear-gradient(135deg, var(--home-sand), #c78f4e);
}

.page-home .home-step-card h3,
.page-home .home-parent-tracker h3,
.page-home .home-pain-card strong,
.page-home .home-adv-card h3,
.page-home .home-course-card h3 {
  margin: 0;
  color: var(--home-ink);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: 0;
}

.page-home .home-step-card h3 {
  font-size: 1.05rem;
}

.page-home .home-step-card p {
  min-height: 3.15em;
  margin: 0;
  color: #5e6a76;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.58;
}

.page-home .home-step-card em {
  align-self: end;
  width: fit-content;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.12);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 27px;
}

.page-home .home-step-card.coral em {
  color: var(--home-coral);
  background: rgba(var(--home-coral-rgb) / 0.12);
}

.page-home .home-step-card.sky em {
  color: #338fc0;
  background: rgba(var(--home-sky-rgb) / 0.13);
}

.page-home .home-step-card figure,
.page-home .home-adv-card figure,
.page-home .home-choice-band figure,
.page-home .home-system-panel figure,
.page-home .home-pain-card figure,
.page-home .home-course-visual {
  margin: 0;
}

.page-home .home-step-card figure {
  position: relative;
  grid-row: 1;
  height: 108px;
  width: 100%;
  min-height: 108px;
  overflow: hidden;
  background-image: url("/assets/optimized/parent/parent-path-one.webp");
  background-position: center;
  background-size: cover;
}

.page-home .home-step-card.coral figure {
  background-image: url("/assets/optimized/parent/parent-path-two.webp");
  background-position: 54% center;
}

.page-home .home-step-card.sky figure {
  background-image: url("/assets/optimized/parent/parent-path-three.webp");
  background-position: 65% center;
}

.page-home .home-step-card figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 66%, rgba(255, 255, 255, 0.42) 100%);
}

.page-home .home-step-card img,
.page-home .home-system-panel img,
.page-home .home-pain-card img,
.page-home .home-adv-card img,
.page-home .home-choice-band img,
.page-home .home-course-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-step-card img {
  object-position: center;
  opacity: 0;
  filter: saturate(1.14) contrast(1.07) brightness(0.96);
  transform: scale(1.03);
}

.page-home .home-step-card.coral img {
  object-position: 54% center;
}

.page-home .home-step-card.sky img {
  object-position: 65% center;
}

.page-home .home-system-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  align-items: center;
  min-height: clamp(500px, 48vw, 628px);
  overflow: hidden;
  border: 1px solid rgba(211, 226, 230, 0.92);
  border-radius: 34px;
  background: linear-gradient(120deg, #f8fcfc 0%, #fff 54%, #eef8ff 100%);
  box-shadow: 0 30px 90px rgba(49, 79, 90, 0.11);
}

.page-home .home-system-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.62) 35%, rgba(255, 255, 255, 0.1) 58%, rgba(255, 255, 255, 0.74) 100%),
    linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.84));
  pointer-events: none;
}

.page-home .home-system-copy {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 16px;
  max-width: 510px;
  padding: clamp(28px, 4vw, 58px);
}

.page-home .home-system-copy h2 {
  max-width: 10.5em;
  font-size: clamp(2.05rem, 4vw, 4rem);
  line-height: 1.14;
}

.page-home .home-system-copy p {
  max-width: 36em;
  margin: 0;
  font-size: 0.96rem;
}

.page-home .home-system-photo {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 62%;
}

.page-home .home-system-photo img {
  object-position: 72% center;
  filter: saturate(1.03) contrast(1.01);
}

.page-home .home-system-tablet {
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(96%, 660px);
  aspect-ratio: 1.45;
  margin-right: clamp(18px, 3vw, 44px);
  overflow: hidden;
  border-radius: 32px;
  filter: drop-shadow(0 28px 42px rgba(25, 54, 66, 0.2));
}

.page-home .home-system-tablet img {
  object-position: center;
}

.page-home .home-system-phone {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(18px, 3vw, 46px);
  z-index: 5;
  width: clamp(150px, 16vw, 230px);
  aspect-ratio: 0.74;
  overflow: hidden;
  border-radius: 36px;
  box-shadow: 0 26px 48px rgba(24, 45, 56, 0.22);
}

.page-home .home-system-phone img {
  object-position: 0 center;
}

.page-home .home-system-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
}

.page-home .home-system-badges span {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(221, 235, 238, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(49, 79, 90, 0.07);
}

.page-home .home-system-badges .icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 16px;
}

.page-home .home-system-badges b,
.page-home .home-system-badges small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-home .home-system-badges b {
  color: #35404c;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.page-home .home-system-badges small {
  color: var(--home-teal);
  font-size: 0.72rem;
  font-weight: 900;
}

.page-home .home-parent-tracker {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(218, 231, 234, 0.92);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 56px rgba(49, 79, 90, 0.08);
}

.page-home .home-parent-tracker h3 {
  font-size: 1.1rem;
}

.page-home .home-parent-tracker p {
  max-width: 66em;
  margin: 0;
  font-size: 0.86rem;
}

.page-home .home-parent-tracker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-home .home-parent-tracker article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 5px 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(221, 235, 238, 0.86);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 252, 0.84));
}

.page-home .home-parent-tracker b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.12);
  font-weight: 950;
}

.page-home .home-parent-tracker strong {
  color: var(--home-ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.page-home .home-parent-tracker span {
  color: var(--home-muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.55;
}

.page-home .home-pain-strip {
  display: grid;
  gap: 18px;
  padding-top: clamp(22px, 3vw, 38px);
}

.page-home .home-pain-strip h2 {
  margin: 0;
  color: var(--home-ink);
  text-align: center;
  font-family: "Songti TC", "STSong", Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 850;
  letter-spacing: 0;
}

.page-home .home-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
}

.page-home .home-pain-card {
  position: relative;
  min-height: 136px;
  overflow: hidden;
  border: 1px solid rgba(221, 234, 237, 0.86);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(49, 79, 90, 0.08);
  transition:
    transform 190ms ease,
    box-shadow 190ms ease;
}

.page-home .home-pain-card figure {
  position: absolute;
  inset: 0;
}

.page-home .home-pain-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 28%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.94) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 44%);
}

.page-home .home-pain-card img {
  object-position: center;
  transform: scale(1.04);
}

.page-home .home-pain-card:nth-child(3) img {
  object-position: 54% center;
}

.page-home .home-pain-card:nth-child(4) img {
  object-position: center;
}

.page-home .home-pain-card > span {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(49, 79, 90, 0.12);
}

.page-home .home-pain-card .icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
}

.page-home .home-pain-card > div {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(49, 79, 90, 0.1);
}

.page-home .home-pain-card strong {
  font-size: 0.9rem;
}

.page-home .home-pain-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.2;
}

.page-home .home-section-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 22px;
  text-align: center;
}

.page-home .home-section-head.compact {
  margin-bottom: 16px;
}

.page-home .home-section-head h2 {
  font-size: clamp(1.42rem, 2.35vw, 2.15rem);
  line-height: 1.22;
}

.page-home .home-section-head h2 span,
.page-home .home-choice-copy h2 span {
  color: var(--home-coral);
}

.page-home .home-section-head p {
  max-width: 620px;
  margin: 0;
  font-size: 0.9rem;
}

.page-home .home-advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.page-home .home-adv-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, 0.56fr) minmax(174px, auto);
  min-height: 348px;
  overflow: hidden;
  border: 1px solid rgba(221, 235, 238, 0.9);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(49, 79, 90, 0.09);
  transition:
    transform 190ms ease,
    box-shadow 190ms ease,
    border-color 190ms ease;
}

.page-home .home-adv-card::after,
.page-home .home-course-card::after,
.page-home .home-choice-band::after,
.page-home .home-system-panel::before,
.page-home .home-stat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 8%), rgba(255, 255, 255, 0.52), transparent 190px);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.page-home .home-adv-card:hover::after,
.page-home .home-course-card:hover::after,
.page-home .home-choice-band:hover::after,
.page-home .home-system-panel:hover::before,
.page-home .home-stat-tile:hover::after {
  opacity: 1;
}

.page-home .home-adv-card figure {
  position: relative;
  min-height: 152px;
  overflow: hidden;
  background: #f7fbfc;
}

.page-home .home-adv-card figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9));
}

.page-home .home-adv-card img {
  object-position: center;
  transform: scale(1.04);
  transition: transform 260ms ease;
}

.page-home .home-adv-card:hover img {
  transform: scale(1.075);
}

.page-home .home-adv-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--home-teal-rgb) / 0.08), transparent 150px),
    rgba(255, 255, 255, 0.96);
}

.page-home .home-adv-card.coral .home-adv-copy {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--home-coral-rgb) / 0.08), transparent 150px),
    rgba(255, 255, 255, 0.96);
}

.page-home .home-adv-card.sky .home-adv-copy {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--home-sky-rgb) / 0.08), transparent 150px),
    rgba(255, 255, 255, 0.96);
}

.page-home .home-adv-card.sand .home-adv-copy {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--home-sand-rgb) / 0.1), transparent 150px),
    rgba(255, 255, 255, 0.96);
}

.page-home .home-adv-copy > span {
  position: absolute;
  top: -28px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.12);
}

.page-home .home-adv-copy .icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
}

.page-home .home-adv-card b {
  margin-top: 16px;
}

.page-home .home-adv-card h3 {
  font-size: 1.03rem;
}

.page-home .home-adv-card p {
  min-height: 4.8em;
  margin: 0;
  font-size: 0.8rem;
}

.page-home .home-choice-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.44fr) minmax(0, 0.56fr);
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(216, 230, 234, 0.92);
  border-radius: 30px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 42%, rgba(238, 248, 255, 0.58) 100%),
    #fff;
  box-shadow: 0 24px 70px rgba(49, 79, 90, 0.09);
}

.page-home .home-choice-copy {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: center;
  gap: 14px;
  max-width: 500px;
  padding: clamp(24px, 3.5vw, 46px);
}

.page-home .home-choice-copy h2 {
  font-size: clamp(1.42rem, 2.2vw, 2.05rem);
  line-height: 1.25;
}

.page-home .home-choice-copy ul,
.page-home .home-course-copy ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-choice-copy li,
.page-home .home-course-copy li {
  position: relative;
  padding-left: 22px;
  font-size: 0.85rem;
}

.page-home .home-choice-copy li::before,
.page-home .home-course-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--home-teal);
  font-weight: 950;
}

.page-home .home-choice-copy .btn {
  justify-self: start;
  min-height: 42px;
}

.page-home .home-choice-band figure {
  position: relative;
  z-index: 1;
  min-height: 260px;
}

.page-home .home-choice-band figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.34) 34%, transparent 58%);
}

.page-home .home-choice-band img {
  object-position: 78% center;
}

.page-home .home-choice-note {
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  bottom: 28px;
  z-index: 5;
  max-width: 244px;
  padding: 16px 18px;
  border: 1px solid rgba(222, 234, 237, 0.9);
  border-radius: 18px;
  color: #586574;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(49, 79, 90, 0.12);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.55;
}

.page-home .home-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.page-home .home-course-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(180px, 0.42fr);
  align-items: center;
  min-height: 238px;
  overflow: hidden;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 48%, rgba(var(--home-teal-rgb) / 0.16), transparent 220px),
    linear-gradient(135deg, #eafafa, #fff);
  box-shadow: 0 22px 58px rgba(49, 79, 90, 0.08);
  transition:
    transform 190ms ease,
    box-shadow 190ms ease;
}

.page-home .home-course-card.coral {
  border-color: rgba(var(--home-coral-rgb) / 0.24);
  background:
    radial-gradient(circle at 90% 48%, rgba(var(--home-coral-rgb) / 0.15), transparent 220px),
    linear-gradient(135deg, #fff0f2, #fff);
}

.page-home .home-course-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(20px, 2.8vw, 34px);
}

.page-home .home-course-copy .label {
  color: var(--home-teal);
  font-size: 0.78rem;
  font-weight: 950;
}

.page-home .home-course-card.coral .label {
  color: var(--home-coral);
}

.page-home .home-course-card h3 {
  max-width: 12em;
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
}

.page-home .home-course-copy li {
  font-size: 0.82rem;
  line-height: 1.45;
}

.page-home .home-course-copy .btn {
  justify-self: start;
  min-height: 38px;
  margin-top: 4px;
}

.page-home .home-course-visual {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  min-height: 190px;
}

.page-home .home-course-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.66), transparent 52%);
}

.page-home .home-course-visual img {
  object-position: center;
  transform: scale(1.02);
  transition: transform 260ms ease;
}

.page-home .home-course-card:hover .home-course-visual img {
  transform: scale(1.06);
}

.page-home .home-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 231, 234, 0.88);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 48px rgba(49, 79, 90, 0.08);
}

.page-home .home-stat-tile {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 20px;
  border-right: 1px solid rgba(224, 236, 239, 0.92);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 252, 0.84));
}

.page-home .home-stat-tile:last-child {
  border-right: 0;
}

.page-home .home-stat-tile .icon {
  width: 46px;
  height: 46px;
  border-radius: 18px;
}

.page-home .home-stat-tile strong {
  display: block;
  color: var(--home-ink);
  font-size: clamp(1.08rem, 1.7vw, 1.45rem);
  line-height: 1.1;
  font-weight: 950;
}

.page-home .home-stat-tile span {
  display: block;
  color: var(--home-muted);
  font-size: 0.74rem;
  font-weight: 830;
  line-height: 1.35;
}

.page-home .cta-home {
  min-height: 92px;
  margin-top: 4px;
  margin-bottom: 36px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: linear-gradient(100deg, #31aaa1 0%, #64cbc5 42%, #f4a7b0 100%);
  box-shadow: 0 22px 58px rgba(49, 79, 90, 0.12);
}

.page-home .cta-home h2 {
  font-family: "Songti TC", "STSong", Georgia, "Times New Roman", serif;
  font-size: clamp(1.32rem, 2vw, 1.85rem);
  letter-spacing: 0;
}

.page-home .cta-home::after {
  right: 34%;
  top: -52px;
  opacity: 0.58;
}

@media (max-width: 1439px) {
  .page-home .home-quick-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-guide-intro {
    min-height: 190px;
  }

  .page-home .home-system-panel {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  }

  .page-home .home-system-tablet {
    width: min(94%, 560px);
  }

  .page-home .home-system-phone {
    width: 176px;
  }

  .page-home .home-advantage-grid,
  .page-home .home-pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-pain-card {
    min-height: 168px;
  }
}

@media (max-width: 900px) {
  .page-home .home-quick-guide,
  .page-home .home-parent-tracker > div,
  .page-home .home-course-grid {
    grid-template-columns: 1fr;
  }

  .page-home .home-system-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
    padding: 18px;
  }

  .page-home .home-system-panel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.86));
  }

  .page-home .home-system-copy {
    padding: 8px 6px 0;
  }

  .page-home .home-system-copy h2 {
    max-width: 12em;
  }

  .page-home .home-system-photo {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 24px;
  }

  .page-home .home-system-tablet {
    justify-self: center;
    width: min(100%, 620px);
    margin-right: 0;
  }

  .page-home .home-system-phone {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: center;
    width: min(72%, 230px);
    margin-top: -96px;
  }

  .page-home .home-choice-band {
    grid-template-columns: 1fr;
  }

  .page-home .home-choice-band figure {
    min-height: 260px;
    order: -1;
  }

  .page-home .home-choice-band figure::before {
    background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.96) 96%);
  }

  .page-home .home-choice-copy {
    max-width: none;
    padding-top: 0;
  }

  .page-home .home-choice-note {
    right: 22px;
    bottom: auto;
    top: 212px;
  }

  .page-home .home-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-stat-tile:nth-child(2) {
    border-right: 0;
  }

  .page-home .home-stat-tile:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(224, 236, 239, 0.92);
  }
}

@media (max-width: 680px) {
  .page-home .home-redesign-entry,
  .page-home .home-advantage-redesign,
  .page-home .home-choice-section,
  .page-home .home-course-section,
  .page-home .home-stats-section {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .page-home .home-quick-guide,
  .page-home .home-system-panel,
  .page-home .home-choice-band,
  .page-home .home-parent-tracker,
  .page-home .home-stat-row {
    border-radius: 22px;
  }

  .page-home .home-step-card {
    grid-template-rows: auto 1fr;
    min-height: auto;
  }

  .page-home .home-step-card > div {
    max-width: none;
  }

  .page-home .home-step-card figure {
    width: 100%;
    height: auto;
    min-height: 168px;
  }

  .page-home .home-step-card figure::before {
    background: linear-gradient(180deg, transparent 38%, rgba(255, 255, 255, 0.9));
  }

  .page-home .home-system-badges,
  .page-home .home-advantage-grid,
  .page-home .home-pain-grid {
    grid-template-columns: 1fr;
  }

  .page-home .home-system-photo {
    height: 244px;
  }

  .page-home .home-system-tablet {
    aspect-ratio: 1.24;
    border-radius: 22px;
  }

  .page-home .home-system-phone {
    width: min(78%, 210px);
    margin-top: -70px;
  }

  .page-home .home-pain-card {
    min-height: 188px;
    border-radius: 28px;
  }

  .page-home .home-adv-card {
    grid-template-rows: 188px auto;
    min-height: 0;
  }

  .page-home .home-adv-card p {
    min-height: auto;
  }

  .page-home .home-choice-note {
    position: relative;
    inset: auto;
    z-index: 5;
    max-width: none;
    margin: -14px 18px 18px;
  }

  .page-home .home-choice-copy {
    padding: 20px;
  }

  .page-home .home-course-card {
    grid-template-columns: 1fr;
  }

  .page-home .home-course-visual {
    order: -1;
    min-height: 190px;
  }

  .page-home .home-course-visual::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.72));
  }

  .page-home .cta-home {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
    text-align: left;
  }

  .page-home .cta-home .cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .page-home .home-quick-guide {
    padding: 10px;
  }

  .page-home .home-guide-intro {
    min-height: auto;
    padding: 18px 16px;
  }

  .page-home .home-guide-intro h2,
  .page-home .home-system-copy h2 {
    font-size: 1.7rem;
  }

  .page-home .home-step-card > div,
  .page-home .home-adv-copy,
  .page-home .home-course-copy {
    padding: 16px;
  }

  .page-home .home-parent-tracker article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .page-home .home-parent-tracker b {
    width: 38px;
    height: 38px;
  }

  .page-home .home-pain-card > div {
    border-radius: 18px;
  }

  .page-home .home-pain-card small {
    white-space: normal;
  }

  .page-home .home-stat-row {
    grid-template-columns: 1fr;
  }

  .page-home .home-stat-tile {
    border-right: 0;
    border-bottom: 1px solid rgba(224, 236, 239, 0.92);
  }

  .page-home .home-stat-tile:last-child {
    border-bottom: 0;
  }
}

.page-home .home-onepage-section {
  padding-top: clamp(34px, 4.8vw, 72px);
  padding-bottom: clamp(34px, 4.8vw, 72px);
}

.page-home .home-onepage-head,
.page-home .home-onepage-solution-shell,
.page-home .home-onepage-split,
.page-home .home-onepage-proof-shell,
.page-home .home-onepage-faq-grid,
.page-home .home-onepage-plan-grid,
.page-home .home-onepage-pain-grid {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content-max);
  margin-right: auto;
  margin-left: auto;
}

.page-home .home-onepage-head {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 880px;
  margin-bottom: 24px;
  text-align: center;
}

.page-home .home-onepage-head.compact {
  margin-bottom: 20px;
}

.page-home .home-onepage-head h2,
.page-home .home-onepage-copy h2,
.page-home .home-onepage-solution-copy h2,
.page-home .home-onepage-proof-copy h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.95rem, 3vw, 3.05rem);
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-home .home-onepage-head p,
.page-home .home-onepage-copy p,
.page-home .home-onepage-solution-copy p,
.page-home .home-onepage-proof-copy p,
.page-home .home-onepage-card p,
.page-home .home-onepage-plan p,
.page-home .home-onepage-faq p {
  margin: 0;
  color: var(--home-muted);
  font-size: 0.98rem;
  line-height: 1.78;
  font-weight: 650;
}

.page-home .home-onepage-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.page-home .home-onepage-card,
.page-home .home-onepage-flow article,
.page-home .home-onepage-plan,
.page-home .home-onepage-faq article,
.page-home .home-onepage-metrics article,
.page-home .home-onepage-dashboard,
.page-home .home-onepage-diagnosis-board,
.page-home .home-onepage-coach-photo,
.page-home .home-onepage-parent-report {
  border: 1px solid rgba(216, 231, 235, 0.88);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.9)),
    radial-gradient(circle at var(--pointer-x, 14%) var(--pointer-y, 12%), rgba(var(--home-teal-rgb) / 0.1), transparent 230px);
  box-shadow: 0 18px 44px rgba(49, 79, 90, 0.08);
}

.page-home .home-onepage-card:hover,
.page-home .home-onepage-flow article:hover,
.page-home .home-onepage-plan:hover,
.page-home .home-onepage-faq article:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--home-teal-rgb) / 0.28);
  box-shadow: 0 22px 58px rgba(49, 79, 90, 0.11);
}

.page-home .home-onepage-pain-card {
  display: grid;
  overflow: hidden;
  border-radius: 24px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.page-home .home-onepage-pain-card figure {
  height: 172px;
  margin: 0;
  overflow: hidden;
}

.page-home .home-onepage-pain-card img,
.page-home .home-onepage-coach-photo img,
.page-home .home-onepage-parent-report img,
.page-home .home-onepage-dashboard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-onepage-pain-card > div {
  display: grid;
  gap: 9px;
  padding: 18px;
}

.page-home .home-onepage-pain-card .icon,
.page-home .home-onepage-flow .icon,
.page-home .home-onepage-plan .icon,
.page-home .home-onepage-role-row .icon,
.page-home .home-onepage-metrics .icon {
  width: 40px;
  height: 40px;
}

.page-home .home-onepage-pain-card h3,
.page-home .home-onepage-flow h3,
.page-home .home-onepage-plan h3,
.page-home .home-onepage-faq h3 {
  margin: 0;
  color: var(--home-ink);
  font-size: 1.08rem;
  line-height: 1.35;
}

.page-home .home-onepage-solution-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(460px, 1.18fr);
  gap: 20px;
  align-items: stretch;
}

.page-home .home-onepage-solution-copy,
.page-home .home-onepage-copy,
.page-home .home-onepage-proof-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
}

.page-home .home-onepage-solution-copy {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(var(--home-teal-rgb) / 0.2);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 251, 250, 0.86)),
    radial-gradient(circle at 8% 10%, rgba(var(--home-teal-rgb) / 0.14), transparent 260px);
  box-shadow: 0 20px 54px rgba(49, 79, 90, 0.08);
}

.page-home .home-onepage-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-home .home-onepage-flow article {
  display: grid;
  gap: 10px;
  min-height: 206px;
  padding: 18px;
  border-radius: 24px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.page-home .home-onepage-flow b,
.page-home .home-onepage-plan > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--home-teal), #239f98);
  font-size: 0.82rem;
  font-weight: 950;
}

.page-home .home-onepage-flow .coral b,
.page-home .home-onepage-plan.coral > span {
  background: linear-gradient(135deg, var(--home-coral), #ef6f7b);
}

.page-home .home-onepage-flow .sky b {
  background: linear-gradient(135deg, var(--home-sky), #4da6d6);
}

.page-home .home-onepage-flow .sand b {
  background: linear-gradient(135deg, var(--home-sand), #c78f4e);
}

.page-home .home-onepage-flow em,
.page-home .home-onepage-plan em {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.11);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.page-home .home-onepage-dashboard {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  gap: 18px;
  min-height: 250px;
  margin: 0;
  padding: 18px;
  border-radius: 30px;
  overflow: hidden;
}

.page-home .home-onepage-dashboard img {
  min-height: 260px;
  border-radius: 22px;
  object-position: center;
}

.page-home .home-onepage-dashboard figcaption,
.page-home .home-onepage-coach-photo figcaption,
.page-home .home-onepage-parent-report figcaption {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
}

.page-home .home-onepage-dashboard strong,
.page-home .home-onepage-coach-photo strong,
.page-home .home-onepage-parent-report b {
  color: var(--home-ink);
  font-size: 1.14rem;
  line-height: 1.4;
}

.page-home .home-onepage-dashboard span,
.page-home .home-onepage-coach-photo span,
.page-home .home-onepage-parent-report span {
  color: var(--home-muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7;
}

.page-home .home-onepage-split {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(420px, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

.page-home .home-onepage-split.reverse {
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.78fr);
}

.page-home .home-onepage-actions,
.page-home .home-onepage-center-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-home .home-onepage-center-action {
  justify-content: center;
  margin-top: 18px;
}

.page-home .home-onepage-diagnosis-board {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 16px;
  min-height: 370px;
  margin: 0;
  padding: 18px;
  border-radius: 30px;
}

.page-home .home-device-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(245, 250, 251, 0.92);
  color: #71808b;
  font-size: 0.76rem;
  font-weight: 900;
}

.page-home .home-device-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--home-teal-rgb) / 0.55);
}

.page-home .home-device-bar span {
  margin-left: 4px;
}

.page-home .home-diagnosis-score {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 150px;
  border-radius: 24px;
  background: rgba(var(--home-teal-rgb) / 0.1);
}

.page-home .home-diagnosis-score strong {
  color: var(--home-teal);
  font-size: clamp(3rem, 5vw, 4.8rem);
  line-height: 1;
  font-weight: 950;
}

.page-home .home-diagnosis-score span,
.page-home .home-diagnosis-score em {
  color: var(--home-muted);
  font-style: normal;
  font-weight: 850;
}

.page-home .home-diagnosis-radar {
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
}

.page-home .home-diagnosis-radar svg {
  width: min(100%, 210px);
  fill: rgba(var(--home-teal-rgb) / 0.16);
  stroke: var(--home-teal);
  stroke-width: 2;
}

.page-home .home-diagnosis-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-home .home-diagnosis-list span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(246, 250, 251, 0.9);
}

.page-home .home-diagnosis-list span.hot {
  background: rgba(var(--home-coral-rgb) / 0.1);
}

.page-home .home-diagnosis-list b {
  color: var(--home-ink);
}

.page-home .home-diagnosis-list em {
  color: var(--home-muted);
  font-style: normal;
  font-weight: 750;
}

.page-home .home-onepage-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.page-home .home-onepage-plan {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.page-home .home-onepage-plan strong {
  color: var(--home-ink);
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  line-height: 1.3;
}

.page-home .home-onepage-plan > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.page-home .home-onepage-plan.coral em {
  color: var(--home-coral);
  background: rgba(var(--home-coral-rgb) / 0.1);
}

.page-home .home-onepage-coach-photo,
.page-home .home-onepage-parent-report {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 14px;
  border-radius: 30px;
  overflow: hidden;
}

.page-home .home-onepage-coach-photo img {
  min-height: 360px;
  border-radius: 22px;
  object-position: center;
}

.page-home .home-onepage-role-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.page-home .home-onepage-role-row article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(216, 231, 235, 0.86);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}

.page-home .home-onepage-role-row strong {
  color: var(--home-ink);
}

.page-home .home-onepage-role-row span {
  color: var(--home-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: 700;
}

.page-home .home-onepage-proof-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(420px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.page-home .home-onepage-proof-copy {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(var(--home-sky-rgb) / 0.2);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.84)),
    radial-gradient(circle at 16% 12%, rgba(var(--home-sky-rgb) / 0.15), transparent 220px);
  box-shadow: 0 18px 44px rgba(49, 79, 90, 0.08);
}

.page-home .home-onepage-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-home .home-onepage-metrics article {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
}

.page-home .home-onepage-metrics strong {
  color: var(--home-ink);
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
  line-height: 1;
}

.page-home .home-onepage-metrics span {
  color: var(--home-muted);
  font-weight: 750;
}

.page-home .home-onepage-parent-report {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  align-items: center;
}

.page-home .home-onepage-parent-report img {
  height: 260px;
  object-fit: contain;
}

.page-home .home-onepage-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.page-home .home-onepage-faq article {
  display: grid;
  gap: 10px;
  min-height: 180px;
  padding: 22px;
  border-radius: 26px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

@media (max-width: 1439px) {
  .page-home .home-onepage-pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-onepage-solution-shell,
  .page-home .home-onepage-split,
  .page-home .home-onepage-split.reverse,
  .page-home .home-onepage-proof-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-home .home-onepage-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .page-home .home-onepage-pain-grid,
  .page-home .home-onepage-flow,
  .page-home .home-onepage-plan-grid,
  .page-home .home-onepage-metrics,
  .page-home .home-onepage-faq-grid,
  .page-home .home-onepage-dashboard,
  .page-home .home-onepage-parent-report {
    grid-template-columns: 1fr;
  }

  .page-home .home-onepage-dashboard img,
  .page-home .home-onepage-coach-photo img {
    min-height: 260px;
  }

  .page-home .home-onepage-diagnosis-board,
  .page-home .home-diagnosis-list,
  .page-home .home-onepage-role-row {
    grid-template-columns: 1fr;
  }

  .page-home .home-onepage-actions,
  .page-home .home-onepage-actions .btn,
  .page-home .home-onepage-center-action .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .page-home .home-onepage-head,
  .page-home .home-onepage-solution-shell,
  .page-home .home-onepage-split,
  .page-home .home-onepage-proof-shell,
  .page-home .home-onepage-faq-grid,
  .page-home .home-onepage-plan-grid,
  .page-home .home-onepage-pain-grid {
    width: calc(100% - 32px);
  }

  .page-home .home-onepage-card p,
  .page-home .home-onepage-plan p,
  .page-home .home-onepage-faq p {
    font-size: 0.9rem;
  }

  .page-home .home-onepage-pain-card figure {
    height: 150px;
  }
}

.page-home .home-screen-section {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(56px, 7vh, 96px) var(--page-gutter);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 16%, rgba(88, 197, 189, 0.09), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(115, 185, 223, 0.08), transparent 36rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.9));
}

.page-home .home-screen-section:nth-of-type(even) {
  background:
    radial-gradient(circle at 82% 12%, rgba(242, 127, 135, 0.08), transparent 32rem),
    radial-gradient(circle at 12% 86%, rgba(215, 173, 121, 0.08), transparent 30rem),
    linear-gradient(180deg, rgba(253, 255, 255, 0.98), rgba(246, 251, 252, 0.92));
}

.page-home .home-screen-section::before {
  content: "";
  position: absolute;
  inset: 22px var(--page-gutter);
  border: 1px solid rgba(218, 233, 236, 0.56);
  border-radius: clamp(26px, 3vw, 42px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.page-home .home-screen-shell,
.page-home .home-screen-conversion-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
  width: 100%;
  max-width: min(1480px, calc(100vw - var(--page-gutter) * 2));
  margin: 0 auto;
}

.page-home .home-screen-shell.reverse {
  grid-template-columns: minmax(560px, 1.15fr) minmax(320px, 0.85fr);
}

.page-home .home-screen-copy {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 1.8vw, 24px);
}

.page-home .home-screen-copy h2,
.page-home .home-conversion-preview h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(2.45rem, 4.3vw, 5.35rem);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-home .home-screen-copy p,
.page-home .home-conversion-preview p {
  max-width: 40rem;
  margin: 0;
  color: var(--home-muted);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.85;
  font-weight: 720;
}

.page-home .home-screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-home .home-screen-card,
.page-home .home-screen-flow article,
.page-home .home-os-problem-card,
.page-home .home-os-loop-node,
.page-home .home-os-dashboard-card,
.page-home .home-os-value-panel,
.page-home .home-os-mini-report,
.page-home .home-screen-dashboard,
.page-home .home-screen-diagnosis-board,
.page-home .home-screen-photo-card,
.page-home .home-screen-parent-report,
.page-home .home-conversion-form,
.page-home .home-test-timeline article {
  border: 1px solid rgba(216, 231, 235, 0.86);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 253, 0.86)),
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 8%), rgba(var(--home-teal-rgb) / 0.12), transparent 240px);
  box-shadow:
    0 24px 70px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-home .home-screen-card,
.page-home .home-screen-flow article,
.page-home .home-os-problem-card,
.page-home .home-os-loop-node,
.page-home .home-os-dashboard-card,
.page-home .home-os-value-panel,
.page-home .home-os-mini-report,
.page-home .home-screen-photo-card,
.page-home .home-screen-dashboard,
.page-home .home-screen-parent-report,
.page-home .home-test-timeline article {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.page-home .home-screen-card:hover,
.page-home .home-screen-flow article:hover,
.page-home .home-os-problem-card:hover,
.page-home .home-os-loop-node:hover,
.page-home .home-os-value-panel:hover,
.page-home .home-os-mini-report:hover,
.page-home .home-screen-photo-card:hover,
.page-home .home-test-timeline article:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--home-teal-rgb) / 0.3);
  box-shadow: 0 30px 84px rgba(49, 79, 90, 0.13);
}

.page-home .home-os-position-card {
  display: grid;
  gap: 6px;
  width: min(100%, 460px);
  padding: 18px 20px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.2);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 251, 250, 0.84)),
    radial-gradient(circle at 12% 8%, rgba(var(--home-teal-rgb) / 0.14), transparent 210px);
  box-shadow: 0 18px 44px rgba(49, 79, 90, 0.08);
}

.page-home .home-os-position-card strong {
  color: var(--home-ink);
  font-size: 1.08rem;
  font-weight: 950;
}

.page-home .home-os-position-card span {
  color: var(--home-muted);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.6;
}

.page-home .home-os-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.page-home .home-os-problem-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  min-height: 244px;
  padding: clamp(20px, 2.3vw, 30px);
  border-radius: 30px;
}

.page-home .home-os-problem-card b,
.page-home .home-os-loop-node b {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--home-teal), #239f98);
  font-size: 0.82rem;
  font-weight: 950;
}

.page-home .home-os-problem-card.coral b,
.page-home .home-os-loop-node.node-2 b {
  background: linear-gradient(135deg, var(--home-coral), #ef6f7b);
}

.page-home .home-os-problem-card.sky b,
.page-home .home-os-loop-node.node-3 b {
  background: linear-gradient(135deg, var(--home-sky), #4da6d6);
}

.page-home .home-os-problem-card.sand b,
.page-home .home-os-loop-node.node-4 b,
.page-home .home-os-loop-node.node-5 b {
  background: linear-gradient(135deg, var(--home-sand), #c78f4e);
}

.page-home .home-os-problem-card .icon,
.page-home .home-os-loop-node .icon {
  width: 44px;
  height: 44px;
}

.page-home .home-os-problem-card h3 {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--home-ink);
  font-size: 1.55rem;
  line-height: 1.18;
  font-weight: 950;
}

.page-home .home-os-problem-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--home-muted);
  font-size: 0.94rem;
  line-height: 1.72;
  font-weight: 720;
}

.page-home .home-os-loop-board {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.page-home .home-os-loop-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.page-home .home-os-loop-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 252px;
  padding: 18px;
  border-radius: 26px;
}

.page-home .home-os-loop-node::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -18px;
  z-index: 2;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--home-teal-rgb) / 0.4), rgba(var(--home-coral-rgb) / 0.36));
}

.page-home .home-os-loop-node:last-child::after {
  display: none;
}

.page-home .home-os-loop-node strong {
  color: var(--home-ink);
  font-size: 1.14rem;
  font-weight: 950;
}

.page-home .home-os-loop-node span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.1);
  font-size: 0.76rem;
  font-weight: 900;
}

.page-home .home-os-loop-node p {
  margin: 0;
  color: var(--home-muted);
  font-size: 0.86rem;
  line-height: 1.62;
  font-weight: 720;
}

.page-home .home-os-dashboard-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 32px;
}

.page-home .home-os-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-home .home-os-dashboard-grid article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(216, 231, 235, 0.76);
}

.page-home .home-os-dashboard-grid span,
.page-home .home-os-dashboard-grid em {
  color: var(--home-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 780;
}

.page-home .home-os-dashboard-grid strong {
  color: var(--home-ink);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 950;
}

.page-home .home-os-progress-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.page-home .home-os-progress-line i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--home-teal-rgb) / 0.66), rgba(var(--home-sky-rgb) / 0.42));
}

.page-home .home-os-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-home .home-os-value-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 460px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 34px;
}

.page-home .home-os-value-panel.parent {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 251, 250, 0.84)),
    radial-gradient(circle at 10% 0%, rgba(var(--home-teal-rgb) / 0.18), transparent 240px);
}

.page-home .home-os-value-panel.student {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 248, 0.84)),
    radial-gradient(circle at 88% 0%, rgba(var(--home-coral-rgb) / 0.15), transparent 240px);
}

.page-home .home-os-value-panel > span {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.1);
  font-size: 0.76rem;
  font-weight: 950;
}

.page-home .home-os-value-panel.student > span {
  color: var(--home-coral);
  background: rgba(var(--home-coral-rgb) / 0.1);
}

.page-home .home-os-value-panel h3 {
  margin: 0;
  color: var(--home-ink);
  font-size: 1.7rem;
  line-height: 1.22;
  font-weight: 950;
}

.page-home .home-os-value-panel div {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-top: 1px solid rgba(216, 231, 235, 0.72);
}

.page-home .home-os-value-panel strong {
  color: var(--home-ink);
  font-size: 1rem;
  font-weight: 920;
}

.page-home .home-os-value-panel p {
  margin: 0;
  color: var(--home-muted);
  font-size: 0.9rem;
  line-height: 1.68;
  font-weight: 720;
}

.page-home .home-os-mini-report {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-radius: 28px;
}

.page-home .home-os-mini-report strong {
  color: var(--home-ink);
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 950;
}

.page-home .home-os-mini-report div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(216, 231, 235, 0.7);
}

.page-home .home-os-mini-report b {
  color: var(--home-teal);
  font-size: 0.82rem;
  font-weight: 950;
}

.page-home .home-os-mini-report span {
  color: var(--home-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  font-weight: 720;
}

.page-home .home-screen-pain-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.page-home .home-screen-pain-card {
  display: grid;
  min-height: 330px;
  overflow: hidden;
  border-radius: 30px;
}

.page-home .home-screen-pain-card:nth-child(even) {
  transform: translateY(34px);
}

.page-home .home-screen-pain-card:hover:nth-child(even) {
  transform: translateY(28px);
}

.page-home .home-screen-pain-card figure,
.page-home .home-screen-photo-card,
.page-home .home-screen-dashboard,
.page-home .home-screen-parent-report {
  margin: 0;
  overflow: hidden;
}

.page-home .home-screen-pain-card figure {
  height: clamp(150px, 15vw, 210px);
}

.page-home .home-screen-pain-card img,
.page-home .home-screen-photo-card img,
.page-home .home-screen-dashboard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-screen-pain-card > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  padding: clamp(18px, 2vw, 26px);
}

.page-home .home-screen-pain-card b,
.page-home .home-screen-flow b,
.page-home .home-screen-plan > span,
.page-home .home-test-timeline b {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--home-teal), #239f98);
  font-size: 0.82rem;
  font-weight: 950;
}

.page-home .home-screen-pain-card .icon {
  width: 40px;
  height: 40px;
}

.page-home .home-screen-pain-card h3,
.page-home .home-screen-plan h3,
.page-home .home-screen-flow h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.1rem, 1.4vw, 1.38rem);
  line-height: 1.35;
}

.page-home .home-screen-pain-card p,
.page-home .home-screen-plan p,
.page-home .home-screen-flow p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--home-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  font-weight: 700;
}

.page-home .home-screen-solution .home-screen-shell {
  grid-template-columns: minmax(300px, 0.68fr) minmax(620px, 1.32fr);
}

.page-home .home-screen-solution .home-screen-copy {
  grid-row: 1 / span 2;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid rgba(var(--home-teal-rgb) / 0.18);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 251, 250, 0.88)),
    radial-gradient(circle at 12% 12%, rgba(var(--home-teal-rgb) / 0.16), transparent 240px);
  box-shadow: 0 22px 64px rgba(49, 79, 90, 0.09);
}

.page-home .home-screen-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.page-home .home-screen-flow article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 18px;
  border-radius: 24px;
}

.page-home .home-screen-flow .coral b,
.page-home .home-screen-plan.coral > span {
  background: linear-gradient(135deg, var(--home-coral), #ef6f7b);
}

.page-home .home-screen-flow .sky b {
  background: linear-gradient(135deg, var(--home-sky), #4da6d6);
}

.page-home .home-screen-flow .sand b {
  background: linear-gradient(135deg, var(--home-sand), #c78f4e);
}

.page-home .home-screen-flow .icon,
.page-home .home-screen-plan .icon,
.page-home .home-screen-role-row .icon,
.page-home .home-screen-metrics .icon {
  width: 42px;
  height: 42px;
}

.page-home .home-screen-flow em,
.page-home .home-screen-plan em {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.11);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.page-home .home-screen-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  gap: 18px;
  min-height: 300px;
  padding: 18px;
  border-radius: 34px;
}

.page-home .home-screen-dashboard-image {
  min-height: 290px;
  border-radius: 24px;
  object-position: center;
}

.page-home .home-screen-dashboard figcaption,
.page-home .home-screen-photo-card figcaption,
.page-home .home-screen-parent-report figcaption {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
}

.page-home .home-screen-dashboard strong,
.page-home .home-screen-photo-card strong,
.page-home .home-screen-parent-report b {
  color: var(--home-ink);
  font-size: 1.18rem;
  line-height: 1.4;
  font-weight: 950;
}

.page-home .home-screen-dashboard span,
.page-home .home-screen-photo-card span,
.page-home .home-screen-parent-report span {
  color: var(--home-muted);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.72;
}

.page-home .home-screen-diagnosis-board {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 18px;
  min-height: min(62vh, 560px);
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 38px;
}

.page-home .home-screen-diagnosis-board .home-device-bar,
.page-home .home-screen-diagnosis-board .home-diagnosis-list {
  grid-column: 1 / -1;
}

.page-home .home-screen-diagnosis-board .home-diagnosis-score {
  min-height: 240px;
}

.page-home .home-screen-diagnosis-board .home-diagnosis-radar svg {
  width: min(100%, 300px);
}

.page-home .home-screen-plan-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.page-home .home-screen-plan {
  display: grid;
  gap: 14px;
  min-height: min(58vh, 520px);
  padding: clamp(24px, 3vw, 42px);
  border-radius: 34px;
}

.page-home .home-screen-plan strong {
  color: var(--home-ink);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.28;
  font-weight: 950;
}

.page-home .home-screen-plan > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}

.page-home .home-screen-plan.coral em {
  color: var(--home-coral);
  background: rgba(var(--home-coral-rgb) / 0.1);
}

.page-home .home-screen-photo-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 38px;
}

.page-home .home-screen-photo-card img {
  min-height: min(58vh, 540px);
  border-radius: 28px;
  object-position: center;
}

.page-home .home-screen-role-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.page-home .home-screen-role-row article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(216, 231, 235, 0.86);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.page-home .home-screen-role-row strong {
  color: var(--home-ink);
}

.page-home .home-screen-role-row span {
  color: var(--home-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: 700;
}

.page-home .home-screen-proof-stage {
  display: grid;
  gap: 18px;
}

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

.page-home .home-screen-metrics article {
  display: grid;
  gap: 8px;
  min-height: 158px;
  padding: 18px;
  border: 1px solid rgba(216, 231, 235, 0.86);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 40px rgba(49, 79, 90, 0.07);
}

.page-home .home-screen-metrics strong {
  color: var(--home-ink);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1;
  font-weight: 950;
}

.page-home .home-screen-metrics span {
  color: var(--home-muted);
  font-weight: 750;
}

.page-home .home-screen-parent-report {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 34px;
}

.page-home .home-screen-parent-report img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.page-home .home-screen-faq-mini {
  display: grid;
  gap: 10px;
  width: min(100%, 560px);
  margin-top: 4px;
}

.page-home .home-screen-faq-mini details {
  border: 1px solid rgba(216, 231, 235, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(49, 79, 90, 0.05);
}

.page-home .home-screen-faq-mini summary {
  cursor: pointer;
  padding: 13px 16px;
  color: var(--home-ink);
  font-weight: 900;
}

.page-home .home-screen-faq-mini p {
  padding: 0 16px 14px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.page-home .home-screen-conversion {
  background:
    radial-gradient(circle at 10% 18%, rgba(88, 197, 189, 0.18), transparent 34rem),
    radial-gradient(circle at 88% 22%, rgba(242, 127, 135, 0.14), transparent 34rem),
    linear-gradient(135deg, #f8fdfd, #fff7f8 54%, #f5fbff);
}

.page-home .home-screen-conversion-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(1180px, calc(100vw - var(--page-gutter) * 2));
  justify-items: stretch;
}

.page-home .home-screen-ai-test {
  background:
    radial-gradient(circle at 12% 18%, rgba(88, 197, 189, 0.16), transparent 34rem),
    radial-gradient(circle at 88% 72%, rgba(115, 185, 223, 0.12), transparent 34rem),
    linear-gradient(135deg, #f8fdfd, #f5fbff);
}

.page-home .home-screen-lead-form {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 22%, rgba(245, 119, 131, 0.1), transparent 18rem),
    radial-gradient(circle at 93% 18%, rgba(54, 185, 176, 0.12), transparent 22rem),
    radial-gradient(circle at 18% 98%, rgba(94, 180, 223, 0.16), transparent 24rem),
    linear-gradient(135deg, #fbfefe 0%, #fffafa 52%, #f5fbff 100%);
}

.page-home .home-screen-lead-form::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.62)),
    radial-gradient(circle at 2rem 78%, rgba(255, 255, 255, 0) 0 8rem, rgba(94, 180, 223, 0.12) 8.1rem 17rem, transparent 17.1rem),
    radial-gradient(circle at calc(100% - 3rem) 8%, rgba(245, 119, 131, 0.12), transparent 13rem);
  pointer-events: none;
}

.page-home .home-diagnosis-artboard {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  width: min(1680px, calc(100vw - var(--page-gutter) * 2));
  min-height: min(860px, calc(100svh - var(--header-height) - 34px));
  margin: 0 auto;
  padding: 36px 44px 32px;
  border: 1px solid rgba(210, 230, 234, 0.86);
  border-radius: 44px;
  background:
    radial-gradient(circle at var(--pointer-x, 58%) var(--pointer-y, 28%), rgba(54, 185, 176, 0.08), transparent 22rem),
    radial-gradient(circle at 72% 2%, rgba(245, 119, 131, 0.12), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(252, 255, 255, 0.88) 48%, rgba(255, 248, 249, 0.9));
  box-shadow:
    0 34px 100px rgba(50, 86, 102, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(22px);
}

.page-home .home-diagnosis-artboard::before,
.page-home .home-diagnosis-artboard::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.page-home .home-diagnosis-artboard::before {
  left: -110px;
  bottom: -115px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0) 42%, rgba(94, 180, 223, 0.16) 43% 64%, transparent 65%),
    radial-gradient(circle, rgba(54, 185, 176, 0.08), transparent 70%);
}

.page-home .home-diagnosis-artboard::after {
  right: -42px;
  top: -54px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 119, 131, 0.13), transparent 70%);
}

.page-home .home-art-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
}

.page-home .home-art-brand .brand {
  min-width: 0;
}

.page-home .home-art-brand .brand-logo {
  width: 150px;
}

.page-home .home-art-brand > span {
  width: 1px;
  height: 24px;
  background: rgba(122, 143, 153, 0.28);
}

.page-home .home-art-brand strong {
  color: #51606b;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.page-home .home-art-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(560px, 1.08fr);
  align-items: center;
  gap: 36px;
  min-height: 420px;
}

.page-home .home-art-copy {
  position: relative;
  display: grid;
  gap: 22px;
  max-width: 720px;
}

.page-home .home-art-copy::before,
.page-home .home-art-copy::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-home .home-art-copy::before {
  left: -62px;
  top: 88px;
  width: 44px;
  height: 44px;
  border: 4px solid rgba(var(--home-coral-rgb) / 0.46);
  clip-path: polygon(50% 0, 62% 36%, 100% 42%, 68% 62%, 76% 100%, 50% 78%, 24% 100%, 32% 62%, 0 42%, 38% 36%);
  transform: rotate(-15deg);
}

.page-home .home-art-copy::after {
  right: 8px;
  top: 116px;
  width: 90px;
  height: 48px;
  border-top: 5px solid rgba(var(--home-teal-rgb) / 0.62);
  border-left: 5px solid rgba(var(--home-teal-rgb) / 0.62);
  border-radius: 62px 0 0 0;
  transform: rotate(14deg);
}

.page-home .home-art-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 20px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--home-teal);
  box-shadow:
    0 16px 34px rgba(54, 185, 176, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: 950;
  backdrop-filter: blur(14px);
}

.page-home .home-art-pill .icon {
  width: 30px;
  height: 30px;
  background: rgba(var(--home-teal-rgb) / 0.14);
}

.page-home .home-art-copy h2 {
  margin: 0;
  color: #182536;
  font-size: 4.6rem;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.page-home .home-art-copy h2 b {
  color: var(--home-teal);
  font-weight: inherit;
}

.page-home .home-art-copy h2 b:last-child {
  position: relative;
  display: inline-block;
}

.page-home .home-art-copy h2 b:last-child::after {
  content: "";
  position: absolute;
  left: 2px;
  right: -6px;
  bottom: -4px;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--home-teal-rgb) / 0.28);
  transform: rotate(-2deg);
}

.page-home .home-art-copy p {
  max-width: 650px;
  margin: 0;
  color: #5d6b78;
  font-size: 1.12rem;
  line-height: 1.85;
  font-weight: 760;
}

.page-home .home-art-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .home-art-checks li {
  position: relative;
  padding-left: 28px;
  color: #596775;
  font-size: 0.98rem;
  font-weight: 900;
}

.page-home .home-art-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, transparent 46%, #fff 47% 58%, transparent 59%),
    var(--home-teal);
  box-shadow: 0 8px 16px rgba(var(--home-teal-rgb) / 0.2);
}

.page-home .home-art-visual {
  position: relative;
  min-height: 430px;
  border-radius: 38px;
}

.page-home .home-art-child {
  position: absolute;
  right: -44px;
  bottom: -18px;
  width: min(760px, 100%);
  height: 410px;
  margin: 0;
  overflow: hidden;
  border-radius: 42px;
  background: #eef8f8;
  box-shadow:
    0 28px 72px rgba(50, 86, 102, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-home .home-art-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.14) 36%, rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, 0.82));
}

.page-home .home-art-child img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 48%;
  filter: saturate(0.98) brightness(1.05);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-home .home-diagnosis-artboard:hover .home-art-child img {
  transform: scale(1.025);
}

.page-home .home-art-report {
  position: absolute;
  left: 0;
  top: 18px;
  z-index: 2;
  display: grid;
  gap: 18px;
  width: min(560px, 78%);
  padding: 22px;
  border: 1px solid rgba(210, 230, 234, 0.92);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 22px 58px rgba(50, 86, 102, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  animation: cardBreathe 5.6s ease-in-out infinite;
}

.page-home .home-art-report-head,
.page-home .home-art-report-grid,
.page-home .home-art-route ol,
.page-home .home-art-actions {
  display: flex;
  align-items: center;
}

.page-home .home-art-report-head {
  justify-content: space-between;
  gap: 16px;
}

.page-home .home-art-report-head strong,
.page-home .home-art-priority strong,
.page-home .home-art-route strong {
  color: var(--home-ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.page-home .home-art-report-head button {
  min-height: 32px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 248, 250, 0.9);
  color: #66727d;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
}

.page-home .home-art-report-grid {
  align-items: stretch;
  gap: 14px;
}

.page-home .home-art-score {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 150px;
  min-height: 146px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(223, 235, 238, 0.82);
}

.page-home .home-art-score::before {
  content: "";
  position: absolute;
}

.page-home .home-art-score span {
  color: #5c6874;
  font-size: 0.76rem;
  font-weight: 900;
}

.page-home .home-art-score b {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(var(--home-teal) 0 78%, rgba(223, 236, 238, 0.9) 78% 100%);
  color: var(--home-ink);
  font-size: 1.28rem;
  font-weight: 950;
}

.page-home .home-art-score em {
  color: #e6a95b;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 950;
}

.page-home .home-art-priority {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

.page-home .home-art-priority div {
  display: grid;
  grid-template-columns: minmax(76px, 0.75fr) minmax(70px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #66727f;
  font-size: 0.76rem;
  font-weight: 880;
}

.page-home .home-art-priority i {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3f4;
}

.page-home .home-art-priority i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  border-radius: inherit;
  background: linear-gradient(90deg, #f57f8b, #efbd63);
}

.page-home .home-art-priority div:nth-of-type(3) i::after {
  background: linear-gradient(90deg, var(--home-teal), #7cded5);
}

.page-home .home-art-priority b {
  color: #e0a654;
  font-size: 0.72rem;
  font-weight: 950;
}

.page-home .home-art-priority div:nth-of-type(3) b {
  color: var(--home-teal);
}

.page-home .home-art-route {
  display: grid;
  gap: 11px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(223, 235, 238, 0.72);
}

.page-home .home-art-route ol {
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-art-route li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 13px;
  background: rgba(245, 250, 251, 0.96);
  color: #5c6874;
  font-size: 0.76rem;
  font-weight: 900;
}

.page-home .home-art-route li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--home-teal-rgb) / 0.78), rgba(var(--home-sky-rgb) / 0.82));
}

.page-home .home-art-route li + li::after {
  content: "→";
  position: absolute;
  left: -13px;
  color: rgba(125, 151, 161, 0.78);
  font-weight: 950;
}

.page-home .home-art-bubble {
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 3;
  max-width: 178px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #344251;
  box-shadow: 0 18px 45px rgba(50, 86, 102, 0.13);
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 950;
  transform: rotate(-1.5deg);
}

.page-home .home-art-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -12px;
  border: 13px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  border-right: 0;
}

.page-home .home-art-bubble::before {
  content: "♡";
  position: absolute;
  right: 10px;
  top: -48px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 8px 22px rgba(245, 119, 131, 0.24);
  font-size: 2.5rem;
  font-weight: 800;
}

.page-home .home-art-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.page-home .home-art-steps article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 24px;
  border: 1px solid rgba(212, 230, 234, 0.94);
  border-radius: 28px;
  background:
    radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 50%), rgba(54, 185, 176, 0.1), transparent 13rem),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 18px 48px rgba(50, 86, 102, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.page-home .home-art-steps article:nth-child(2) {
  background:
    radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 50%), rgba(94, 180, 223, 0.11), transparent 13rem),
    rgba(255, 255, 255, 0.78);
}

.page-home .home-art-steps article:nth-child(3) {
  background:
    radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 50%), rgba(245, 119, 131, 0.11), transparent 13rem),
    rgba(255, 255, 255, 0.78);
}

.page-home .home-art-steps article:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--home-teal-rgb) / 0.3);
  box-shadow:
    0 26px 62px rgba(50, 86, 102, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.page-home .home-art-steps article::after {
  content: "›";
  position: absolute;
  right: -22px;
  top: 50%;
  color: rgba(120, 146, 154, 0.48);
  font-size: 2.1rem;
  font-weight: 600;
  transform: translateY(-50%);
}

.page-home .home-art-steps article:last-child::after {
  display: none;
}

.page-home .home-art-steps b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--home-teal), #1fa49c);
  color: #fff;
  box-shadow: 0 16px 30px rgba(var(--home-teal-rgb) / 0.25);
  font-size: 0.95rem;
  font-weight: 950;
}

.page-home .home-art-steps article:nth-child(2) b {
  background: linear-gradient(135deg, var(--home-sky), #4a8ee7);
  box-shadow: 0 16px 30px rgba(var(--home-sky-rgb) / 0.22);
}

.page-home .home-art-steps article:nth-child(3) b {
  background: linear-gradient(135deg, #ff8f73, var(--home-coral));
  box-shadow: 0 16px 30px rgba(var(--home-coral-rgb) / 0.22);
}

.page-home .home-art-steps strong {
  display: block;
  margin-bottom: 6px;
  color: var(--home-ink);
  font-size: 1.08rem;
  font-weight: 950;
}

.page-home .home-art-steps span {
  color: #6a7886;
  font-size: 0.86rem;
  line-height: 1.55;
  font-weight: 760;
}

.page-home .home-art-steps i {
  display: block;
  font-style: normal;
}

.page-home .home-art-steps .icon {
  width: 74px;
  height: 74px;
  background: rgba(255, 255, 255, 0.7);
}

.page-home .home-art-actions {
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.page-home .home-art-actions p {
  margin: 0 16px 0 0;
  color: var(--home-teal);
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 950;
}

.page-home .home-art-primary,
.page-home .home-art-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  border-radius: 999px;
  font: inherit;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.page-home .home-art-primary {
  min-width: 360px;
  padding: 17px 36px;
  border: 0;
  background: linear-gradient(135deg, #ff9a78, #f45f71);
  color: #fff;
  box-shadow: 0 20px 46px rgba(245, 119, 131, 0.28);
  font-size: 1.28rem;
}

.page-home .home-art-primary:hover,
.page-home .home-art-secondary:hover {
  transform: translateY(-2px);
}

.page-home .home-art-primary:hover {
  box-shadow: 0 26px 58px rgba(245, 119, 131, 0.34);
}

.page-home .home-art-secondary {
  min-width: 198px;
  padding: 14px 22px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.3);
  background: rgba(255, 255, 255, 0.72);
  color: var(--home-teal);
  box-shadow: 0 14px 34px rgba(50, 86, 102, 0.08);
}

.page-home .home-art-lead-panel {
  width: min(860px, 100%);
  min-height: auto;
  justify-self: center;
  margin-top: -4px;
  border: 1px solid rgba(211, 229, 233, 0.92);
  box-shadow:
    0 26px 72px rgba(50, 86, 102, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  animation: revealLeadPanel 260ms ease both;
}

.page-home .home-art-lead-panel[hidden] {
  display: none;
}

.page-home .home-screen-single-shell,
.page-home .home-screen-form-shell {
  grid-template-columns: minmax(0, 1fr);
}

.page-home .home-screen-form-shell {
  position: relative;
  z-index: 2;
  max-width: min(880px, calc(100vw - var(--page-gutter) * 2));
}

.page-home .home-conversion-preview,
.page-home .home-conversion-form {
  min-height: min(62vh, 680px);
}

.page-home .home-conversion-preview {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 2vw, 24px);
  text-align: center;
}

.page-home .home-conversion-preview p {
  margin-inline: auto;
}

.page-home .home-conversion-preview .btn {
  justify-self: center;
}

.page-home .home-test-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.page-home .home-test-timeline article {
  display: grid;
  gap: 9px;
  min-height: 156px;
  padding: 18px;
  border-radius: 24px;
}

.page-home .home-test-timeline strong {
  color: var(--home-ink);
  font-size: 1rem;
  line-height: 1.35;
}

.page-home .home-test-timeline span {
  color: var(--home-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 720;
}

.page-home .home-conversion-form {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 38px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 249, 0.84)),
    radial-gradient(circle at var(--pointer-x, 16%) var(--pointer-y, 10%), rgba(var(--home-coral-rgb) / 0.1), transparent 260px);
  backdrop-filter: blur(18px);
}

.page-home .home-conversion-form-body,
.page-home .home-conversion-success {
  display: grid;
  gap: 14px;
}

.page-home .home-conversion-success[hidden] {
  display: none;
}

.page-home .home-conversion-form-body > span {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--home-teal);
  background: rgba(var(--home-teal-rgb) / 0.1);
  font-size: 0.78rem;
  font-weight: 950;
}

.page-home .home-conversion-form h3 {
  margin: 0 0 4px;
  color: var(--home-ink);
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  line-height: 1.2;
}

.page-home .home-conversion-field {
  display: grid;
  gap: 7px;
}

.page-home .home-conversion-field span {
  color: var(--home-ink);
  font-size: 0.88rem;
  font-weight: 900;
}

.page-home .home-conversion-field input,
.page-home .home-conversion-field select,
.page-home .home-conversion-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(205, 222, 226, 0.96);
  border-radius: 15px;
  outline: 0;
  background: rgba(255, 255, 255, 0.88);
  color: var(--home-ink);
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.page-home .home-conversion-field textarea {
  resize: vertical;
}

.page-home .home-conversion-field input:focus,
.page-home .home-conversion-field select:focus,
.page-home .home-conversion-field textarea:focus {
  border-color: rgba(var(--home-teal-rgb) / 0.7);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--home-teal-rgb) / 0.12);
}

.page-home .home-conversion-field.has-error input,
.page-home .home-conversion-field.has-error select,
.page-home .home-conversion-field.has-error textarea {
  border-color: rgba(var(--home-coral-rgb) / 0.78);
  box-shadow: 0 0 0 4px rgba(var(--home-coral-rgb) / 0.1);
}

.page-home .home-conversion-field.is-nudging {
  animation: fieldNudge 260ms cubic-bezier(0.25, 1, 0.5, 1);
}

.page-home .home-conversion-field small {
  min-height: 18px;
  color: var(--home-coral);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.page-home .home-form-note {
  margin: 0;
  color: #7c8792;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.55;
}

.page-home .home-conversion-form.is-submitted .home-conversion-form-body {
  display: none;
}

.page-home .home-conversion-form.is-submitted::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 28%, rgba(var(--home-teal-rgb) / 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 22%, rgba(var(--home-coral-rgb) / 0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 72%, rgba(102, 183, 222, 0.2) 0 3px, transparent 4px);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .home-conversion-form.is-submitted::after {
    animation: successSparkle 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

.page-home .home-conversion-success {
  justify-items: start;
  align-content: center;
  min-height: 420px;
}

.page-home .home-conversion-success .icon {
  width: 64px;
  height: 64px;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .home-conversion-success .icon {
    animation: successBloom 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

.page-home .home-conversion-success strong {
  color: var(--home-ink);
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.2;
}

.page-home .home-conversion-success p {
  margin: 0;
  color: var(--home-muted);
  font-weight: 730;
  line-height: 1.8;
}

.page-home .home-conversion-success div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@keyframes cardBreathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes revealLeadPanel {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fieldNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

@keyframes successSparkle {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes successBloom {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: scale(0.74) rotate(-7deg);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(0);
  }
}

@media (max-width: 1280px) {
  .page-home .home-screen-flow,
  .page-home .home-screen-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-os-loop-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-os-loop-node::after {
    display: none;
  }

  .page-home .home-diagnosis-artboard {
    padding: 32px;
  }

  .page-home .home-art-copy h2 {
    font-size: 3.8rem;
  }

  .page-home .home-art-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
    gap: 28px;
  }

  .page-home .home-art-child {
    right: -24px;
  }
}

@media (max-width: 1439px) {
  .page-home .home-screen-shell,
  .page-home .home-screen-shell.reverse,
  .page-home .home-screen-solution .home-screen-shell,
  .page-home .home-screen-conversion-shell {
    grid-template-columns: 1fr;
  }

  .page-home .home-screen-solution .home-screen-copy {
    grid-row: auto;
  }

  .page-home .home-conversion-preview,
  .page-home .home-conversion-form {
    min-height: auto;
  }

  .page-home .home-diagnosis-artboard {
    min-height: auto;
  }

  .page-home .home-art-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-home .home-art-copy {
    max-width: 820px;
  }

  .page-home .home-art-copy h2 {
    font-size: 3.35rem;
  }

  .page-home .home-art-visual {
    min-height: 520px;
  }

  .page-home .home-art-child {
    right: 0;
    width: 100%;
    height: 470px;
  }

  .page-home .home-art-report {
    width: min(590px, 72%);
  }
}

@media (max-width: 900px) {
  .page-home .home-screen-section {
    min-height: auto;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-home .home-screen-section::before {
    inset: 12px 14px;
    border-radius: 28px;
  }

  .page-home .home-screen-pain-card:nth-child(even),
  .page-home .home-screen-pain-card:hover:nth-child(even) {
    transform: none;
  }

  .page-home .home-screen-dashboard,
  .page-home .home-screen-parent-report,
  .page-home .home-test-timeline,
  .page-home .home-os-dashboard-grid,
  .page-home .home-os-mini-report {
    grid-template-columns: 1fr;
  }

  .page-home .home-os-value-panel {
    min-height: auto;
  }

  .page-home .home-screen-dashboard-image,
  .page-home .home-screen-photo-card img,
  .page-home .home-screen-parent-report img {
    min-height: 250px;
    height: auto;
  }

  .page-home .home-diagnosis-artboard {
    width: calc(100vw - 28px);
    padding: 24px;
    border-radius: 32px;
  }

  .page-home .home-art-brand {
    gap: 12px;
  }

  .page-home .home-art-brand .brand-logo {
    width: 128px;
  }

  .page-home .home-art-brand strong {
    font-size: 0.82rem;
  }

  .page-home .home-art-copy::before,
  .page-home .home-art-copy::after,
  .page-home .home-art-bubble {
    display: none;
  }

  .page-home .home-art-copy h2 {
    font-size: 2.75rem;
  }

  .page-home .home-art-copy p {
    font-size: 1rem;
  }

  .page-home .home-art-visual {
    min-height: auto;
    display: grid;
    gap: 16px;
  }

  .page-home .home-art-child,
  .page-home .home-art-report {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .page-home .home-art-child {
    height: 310px;
    order: -1;
  }

  .page-home .home-art-report {
    animation: none;
  }

  .page-home .home-art-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-home .home-art-steps article {
    min-height: 116px;
  }

  .page-home .home-art-steps article::after {
    display: none;
  }

  .page-home .home-art-actions {
    display: grid;
    justify-items: stretch;
  }

  .page-home .home-art-actions p {
    margin: 0;
    text-align: center;
  }

  .page-home .home-art-primary,
  .page-home .home-art-secondary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .page-home .home-screen-shell,
  .page-home .home-screen-conversion-shell {
    max-width: calc(100vw - 32px);
    gap: 22px;
  }

  .page-home .home-screen-copy h2,
  .page-home .home-conversion-preview h2 {
    font-size: clamp(2.05rem, 11vw, 3.1rem);
  }

  .page-home .home-screen-pain-wall,
  .page-home .home-screen-flow,
  .page-home .home-os-problem-grid,
  .page-home .home-os-loop-track,
  .page-home .home-os-family-grid,
  .page-home .home-screen-plan-stage,
  .page-home .home-screen-role-row,
  .page-home .home-screen-metrics,
  .page-home .home-diagnosis-list {
    grid-template-columns: 1fr;
  }

  .page-home .home-os-mini-report {
    grid-column: auto;
  }

  .page-home .home-screen-diagnosis-board {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 28px;
  }

  .page-home .home-screen-plan {
    min-height: auto;
  }

  .page-home .home-screen-actions,
  .page-home .home-screen-actions .btn,
  .page-home .home-conversion-preview > .btn,
  .page-home .home-conversion-form .btn {
    width: 100%;
  }

  .page-home .home-conversion-success div {
    width: 100%;
  }

  .page-home .home-art-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-home .home-art-brand > span {
    display: none;
  }

  .page-home .home-art-report-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-home .home-art-score {
    width: 100%;
  }

  .page-home .home-art-route ol {
    flex-wrap: wrap;
  }

  .page-home .home-art-steps article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .page-home .home-art-steps article i {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .page-home .home-art-steps .icon {
    width: 54px;
    height: 54px;
  }

  .page-home .home-art-primary {
    font-size: 1.05rem;
  }
}

@media (max-width: 520px) {
  .page-home .home-screen-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .page-home .home-screen-section::before {
    display: none;
  }

  .page-home .home-screen-copy p,
  .page-home .home-conversion-preview p {
    font-size: 0.94rem;
  }

  .page-home .home-screen-pain-card,
  .page-home .home-screen-flow article,
  .page-home .home-os-problem-card,
  .page-home .home-os-loop-node,
  .page-home .home-os-dashboard-card,
  .page-home .home-os-value-panel,
  .page-home .home-os-mini-report,
  .page-home .home-screen-plan,
  .page-home .home-conversion-form {
    border-radius: 24px;
  }

  .page-home .home-test-timeline article,
  .page-home .home-screen-metrics article {
    min-height: 126px;
  }

  .page-home .home-diagnosis-artboard {
    width: calc(100vw - 24px);
    padding: 18px;
    border-radius: 28px;
  }

  .page-home .home-art-copy h2 {
    font-size: 2.2rem;
  }

  .page-home .home-art-copy p,
  .page-home .home-art-checks li,
  .page-home .home-art-steps span {
    font-size: 0.9rem;
  }

  .page-home .home-art-child {
    height: 240px;
    border-radius: 24px;
  }

  .page-home .home-art-report,
  .page-home .home-art-steps article,
  .page-home .home-art-lead-panel {
    border-radius: 22px;
  }

  .page-home .home-art-priority div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .page-home .home-art-primary,
  .page-home .home-art-secondary {
    min-height: 52px;
  }
}

.page-about .about-interactive-section,
.page-about .about-loop-section,
.page-about .about-proof-section {
  padding-top: 38px;
  padding-bottom: 38px;
}

.page-about .about-section-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: start;
  max-width: 680px;
}

.page-about .about-panel-kicker {
  width: fit-content;
  justify-self: start;
}

.page-about .about-section-head.centered {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}

.page-about .about-section-head h2,
.page-about .about-proof-copy h2 {
  margin: 0;
  color: #202a36;
  font-size: 2.35rem;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.page-about .about-section-head p,
.page-about .about-proof-copy p {
  max-width: 620px;
  margin: 0;
  color: #667482;
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 720;
}

.about-interactive-shell,
.about-loop-shell,
.about-proof-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(202, 228, 231, 0.82);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(235, 250, 250, 0.9), rgba(255, 255, 255, 0.98) 44%, rgba(255, 244, 245, 0.82)),
    linear-gradient(90deg, rgba(88, 197, 189, 0.08), rgba(115, 185, 223, 0.05), rgba(242, 127, 135, 0.06));
  box-shadow:
    0 30px 82px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.about-interactive-shell::before,
.about-loop-shell::before,
.about-proof-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 185, 223, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04) 55%, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

.about-interactive-shell,
.about-loop-shell,
.about-proof-shell {
  padding: 34px;
}

.about-interactive-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
  gap: 22px;
  margin-top: 26px;
}

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

.about-path-button,
.about-loop-tab,
.about-orbit-node,
.about-proof-tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.about-path-button {
  display: grid;
  grid-template-columns: 42px 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(221, 234, 237, 0.94);
  border-radius: 22px;
  color: #2c3846;
  text-align: left;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 15px 34px rgba(49, 79, 90, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.about-path-button:hover,
.about-path-button.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.46);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 22px 46px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-path-button.coral:hover,
.about-path-button.coral.is-active {
  border-color: rgba(242, 127, 135, 0.42);
}

.about-path-button.sky:hover,
.about-path-button.sky.is-active {
  border-color: rgba(115, 185, 223, 0.48);
}

.about-path-button.sand:hover,
.about-path-button.sand.is-active {
  border-color: rgba(215, 173, 121, 0.5);
}

.about-path-button:focus-visible,
.about-loop-tab:focus-visible,
.about-orbit-node:focus-visible,
.about-proof-tab:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.28);
  outline-offset: 3px;
}

.about-path-button b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.78rem;
  font-weight: 950;
}

.about-path-button.coral b {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.12);
}

.about-path-button.sky b {
  color: #4fa7d3;
  background: rgba(115, 185, 223, 0.14);
}

.about-path-button.sand b {
  color: #b98445;
  background: rgba(215, 173, 121, 0.14);
}

.about-path-button .icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.about-path-button strong,
.about-path-button em {
  display: block;
}

.about-path-button strong {
  color: #263343;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 950;
}

.about-path-button em {
  margin-top: 3px;
  color: #73818d;
  font-size: 0.78rem;
  line-height: 1.45;
  font-style: normal;
  font-weight: 780;
}

.about-stage {
  min-width: 0;
}

.about-stage-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.44fr) minmax(0, 0.56fr);
  gap: 20px;
  min-height: 430px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 253, 253, 0.9)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.12), rgba(115, 185, 223, 0.08));
  box-shadow:
    0 24px 58px rgba(49, 79, 90, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-stage-panel[hidden],
.about-loop-detail[hidden],
.about-proof-card[hidden] {
  display: none;
}

.about-stage-panel.coral {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 247, 0.9)),
    linear-gradient(135deg, rgba(242, 127, 135, 0.12), rgba(88, 197, 189, 0.05));
}

.about-stage-panel.sky {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 255, 0.92)),
    linear-gradient(135deg, rgba(115, 185, 223, 0.14), rgba(88, 197, 189, 0.05));
}

.about-stage-panel.sand {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 242, 0.92)),
    linear-gradient(135deg, rgba(215, 173, 121, 0.14), rgba(88, 197, 189, 0.05));
}

.about-stage-copy {
  display: grid;
  align-content: center;
}

.about-stage-copy span {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
}

.about-stage-panel.coral .about-stage-copy span {
  color: var(--coral);
}

.about-stage-panel.sky .about-stage-copy span {
  color: #4fa7d3;
}

.about-stage-panel.sand .about-stage-copy span {
  color: #b98445;
}

.about-stage-copy h3 {
  margin: 10px 0 0;
  color: #202a36;
  font-size: 2rem;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.about-stage-copy p {
  margin: 14px 0 0;
  color: #62707d;
  font-size: 0.98rem;
  line-height: 1.9;
  font-weight: 740;
}

.about-stage-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.about-stage-copy em {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(88, 197, 189, 0.18);
  border-radius: 999px;
  color: #3d7f7a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.about-stage-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 360px;
  margin: 0;
}

.about-device,
.about-coach-chat,
.about-report-phone {
  position: relative;
  width: min(100%, 430px);
  border: 1px solid rgba(214, 230, 234, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 22px 54px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.about-device {
  padding: 18px;
}

.about-device-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 0 4px;
  color: #64717d;
  font-size: 0.75rem;
  font-weight: 850;
}

.about-device-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(88, 197, 189, 0.38);
}

.about-device-bar i:nth-child(2) {
  background: rgba(242, 127, 135, 0.38);
}

.about-device-bar i:nth-child(3) {
  background: rgba(115, 185, 223, 0.42);
}

.about-radar-card,
.about-plan-route,
.about-plan-score,
.about-signal-list span,
.about-chat-thread p,
.about-avatar-card,
.about-phone-metrics article,
.about-report-note {
  border: 1px solid rgba(222, 234, 237, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.about-radar-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
}

.about-radar-card strong {
  color: #263343;
  font-size: 0.9rem;
  font-weight: 950;
}

.about-radar-card svg {
  width: min(100%, 190px);
  height: auto;
}

.about-radar-card polygon:first-child {
  fill: rgba(88, 197, 189, 0.08);
  stroke: rgba(88, 197, 189, 0.38);
  stroke-width: 2;
}

.about-radar-card polygon:nth-child(2) {
  fill: rgba(88, 197, 189, 0.25);
  stroke: rgba(49, 170, 161, 0.72);
  stroke-width: 3;
}

.about-radar-card line {
  stroke: rgba(181, 202, 208, 0.6);
  stroke-width: 1;
}

.about-signal-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.about-signal-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.about-signal-list b,
.about-signal-list em {
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.about-signal-list b {
  color: #667482;
}

.about-signal-list em {
  color: var(--teal-strong);
}

.about-plan-route {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.about-plan-route article {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 54px;
}

.about-plan-route b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #b98445;
  background: rgba(215, 173, 121, 0.14);
  font-size: 0.74rem;
  font-weight: 950;
}

.about-plan-route span {
  color: #263343;
  font-size: 0.92rem;
  font-weight: 900;
}

.about-plan-route em {
  grid-column: 2;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(215, 173, 121, 0.72), rgba(88, 197, 189, 0.34));
}

.about-plan-score {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 16px;
}

.about-plan-score strong {
  color: #202a36;
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 950;
}

.about-plan-score span {
  color: #667482;
  font-size: 0.78rem;
  font-weight: 850;
}

.about-coach-chat {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.about-avatar-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 16px 10px;
  text-align: center;
}

.about-avatar-card .icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
}

.about-avatar-card strong {
  color: #263343;
  font-size: 1rem;
  font-weight: 950;
}

.about-avatar-card span {
  color: var(--coral);
  font-size: 0.75rem;
  font-weight: 850;
}

.about-chat-thread {
  display: grid;
  align-content: center;
  gap: 10px;
}

.about-chat-thread p {
  margin: 0;
  padding: 12px 14px;
  color: #53616f;
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 780;
}

.about-chat-thread p.student {
  justify-self: end;
  color: #9a4f56;
  background: rgba(255, 240, 242, 0.86);
}

.about-report-phone {
  max-width: 330px;
  padding: 18px;
}

.about-phone-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: #667482;
  font-size: 0.75rem;
  font-weight: 850;
}

.about-phone-head b {
  color: #263343;
}

.about-phone-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about-phone-metrics article {
  padding: 14px;
}

.about-phone-metrics strong {
  display: block;
  color: #202a36;
  font-size: 1.36rem;
  line-height: 1;
  font-weight: 950;
}

.about-phone-metrics span {
  display: block;
  margin-top: 6px;
  color: #667482;
  font-size: 0.72rem;
  font-weight: 820;
}

.about-report-phone svg {
  display: block;
  width: 100%;
  margin: 18px 0 12px;
}

.about-report-phone svg path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 8;
  stroke-linecap: round;
}

.about-report-note {
  padding: 13px 14px;
  color: #3d7f7a;
  font-size: 0.78rem;
  font-weight: 850;
}

.about-loop-tablist {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 880px;
  margin: 28px auto 0;
}

.about-loop-tab {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 128px;
  padding: 18px 14px;
  border: 1px solid rgba(222, 234, 237, 0.94);
  border-radius: 22px;
  color: #263343;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 34px rgba(49, 79, 90, 0.06);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.about-loop-tab:hover,
.about-loop-tab.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.45);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 48px rgba(49, 79, 90, 0.11);
}

.about-loop-tab.coral:hover,
.about-loop-tab.coral.is-active {
  border-color: rgba(242, 127, 135, 0.42);
}

.about-loop-tab.sky:hover,
.about-loop-tab.sky.is-active {
  border-color: rgba(115, 185, 223, 0.48);
}

.about-loop-tab b {
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 950;
}

.about-loop-tab.coral b {
  color: var(--coral);
}

.about-loop-tab.sky b {
  color: #4fa7d3;
}

.about-loop-tab .icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.about-loop-tab strong {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 950;
}

.about-loop-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(390px, 0.56fr) minmax(300px, 0.44fr);
  align-items: center;
  gap: 24px;
  margin-top: 26px;
}

.about-loop-diagram {
  display: grid;
  place-items: center;
  min-height: 460px;
  margin: 0;
}

.about-orbit-system {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
}

.about-orbit-ring,
.about-orbit-line,
.about-orbit-node,
.about-orbit-core {
  position: absolute;
}

.about-orbit-ring {
  inset: 8%;
  border: 1px solid rgba(88, 197, 189, 0.28);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 24px rgba(255, 255, 255, 0.26),
    0 28px 70px rgba(49, 79, 90, 0.08);
}

.about-orbit-line {
  inset: 15%;
  border-radius: 999px;
  background: conic-gradient(from -60deg, rgba(88, 197, 189, 0.08), rgba(88, 197, 189, 0.64), rgba(115, 185, 223, 0.56), rgba(242, 127, 135, 0.6), rgba(88, 197, 189, 0.08));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67%);
  animation: loopSpin 18s linear infinite;
}

.about-orbit-node {
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 136px;
  min-height: 124px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  color: #263343;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 20px 46px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.about-orbit-node:hover,
.about-orbit-node.is-active {
  transform: translateY(-4px);
  border-color: rgba(88, 197, 189, 0.48);
  box-shadow: 0 26px 54px rgba(49, 79, 90, 0.14);
}

.about-orbit-node.coral:hover,
.about-orbit-node.coral.is-active {
  border-color: rgba(242, 127, 135, 0.46);
}

.about-orbit-node.sky:hover,
.about-orbit-node.sky.is-active {
  border-color: rgba(115, 185, 223, 0.52);
}

.about-orbit-node .icon {
  width: 54px;
  height: 54px;
  border-radius: 19px;
}

.about-orbit-node strong {
  color: #334050;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 950;
}

.about-orbit-node.node-1 {
  left: 3%;
  top: 16%;
}

.about-orbit-node.node-2 {
  right: 2%;
  top: 18%;
}

.about-orbit-node.node-3 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.about-orbit-node.node-3:hover,
.about-orbit-node.node-3.is-active {
  transform: translateX(-50%) translateY(-4px);
}

.about-orbit-core {
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 206px;
  min-height: 206px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 247, 0.91)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.15), rgba(242, 127, 135, 0.14));
  box-shadow:
    0 24px 58px rgba(49, 79, 90, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  text-align: center;
  transform: translate(-50%, -50%);
}

.about-orbit-core .icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 20px;
}

.about-orbit-core strong,
.about-orbit-core span {
  display: block;
}

.about-orbit-core strong {
  color: #202a36;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 950;
}

.about-orbit-core span {
  margin-top: 5px;
  color: #667482;
  font-size: 0.75rem;
  font-weight: 820;
}

.about-loop-details {
  display: grid;
}

.about-loop-detail {
  min-height: 360px;
  padding: 28px;
  border: 1px solid rgba(222, 234, 237, 0.92);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 20px 48px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-loop-detail span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.12);
  font-size: 0.75rem;
  font-weight: 900;
}

.about-loop-detail.coral span {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.12);
}

.about-loop-detail.sky span {
  color: #4fa7d3;
  background: rgba(115, 185, 223, 0.14);
}

.about-loop-detail h3 {
  margin: 18px 0 0;
  color: #202a36;
  font-size: 1.85rem;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: 0;
}

.about-loop-detail p {
  margin: 14px 0 0;
  color: #62707d;
  font-size: 0.98rem;
  line-height: 1.9;
  font-weight: 740;
}

.about-loop-detail ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.about-loop-detail li {
  position: relative;
  min-height: 34px;
  padding: 7px 12px 7px 34px;
  border: 1px solid rgba(222, 234, 237, 0.8);
  border-radius: 14px;
  color: #4d5c68;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
  font-weight: 820;
}

.about-loop-detail li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.page-about .about-proof-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: start;
  max-width: 720px;
}

.about-proof-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.about-proof-tab {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(222, 234, 237, 0.94);
  border-radius: 999px;
  color: #4d5c68;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(49, 79, 90, 0.055);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.about-proof-tab:hover,
.about-proof-tab.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.48);
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.92);
}

.about-proof-tab.coral:hover,
.about-proof-tab.coral.is-active {
  border-color: rgba(242, 127, 135, 0.46);
  color: var(--coral);
  background: rgba(255, 240, 242, 0.9);
}

.about-proof-tab.sky:hover,
.about-proof-tab.sky.is-active {
  border-color: rgba(115, 185, 223, 0.5);
  color: #4fa7d3;
  background: rgba(238, 248, 255, 0.94);
}

.about-proof-dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(280px, 0.34fr);
  align-items: stretch;
  gap: 22px;
  margin-top: 26px;
}

.about-proof-card {
  min-height: 500px;
  padding: 24px;
  border: 1px solid rgba(222, 234, 237, 0.92);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 253, 253, 0.92)),
    linear-gradient(135deg, rgba(88, 197, 189, 0.12), rgba(115, 185, 223, 0.06));
  box-shadow:
    0 22px 54px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-proof-card.coral {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 247, 0.91)),
    linear-gradient(135deg, rgba(242, 127, 135, 0.13), rgba(88, 197, 189, 0.05));
}

.about-proof-card.sky {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 255, 0.92)),
    linear-gradient(135deg, rgba(115, 185, 223, 0.13), rgba(88, 197, 189, 0.05));
}

.about-proof-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.about-proof-card-head span {
  color: #667482;
  font-size: 0.78rem;
  font-weight: 850;
}

.about-proof-card-head strong {
  max-width: 420px;
  color: #263343;
  font-size: 1.55rem;
  line-height: 1.32;
  font-weight: 950;
  text-align: right;
}

.about-proof-score {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 22px;
  border: 1px solid rgba(222, 234, 237, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
}

.about-proof-score b {
  color: #202a36;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 950;
}

.about-proof-score span {
  color: #667482;
  font-size: 0.85rem;
  font-weight: 850;
}

.about-proof-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.about-proof-metrics article {
  min-height: 98px;
  padding: 15px;
  border: 1px solid rgba(222, 234, 237, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.about-proof-metrics strong {
  display: block;
  color: #263343;
  font-size: 1.18rem;
  line-height: 1.15;
  font-weight: 950;
}

.about-proof-metrics span {
  display: block;
  margin-top: 6px;
  color: #667482;
  font-size: 0.75rem;
  font-weight: 820;
}

.about-proof-bars {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.about-proof-bars div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
}

.about-proof-bars span,
.about-proof-bars b {
  color: #4d5c68;
  font-size: 0.78rem;
  font-weight: 850;
}

.about-proof-bars i {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(220, 232, 235, 0.8);
}

.about-proof-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.about-proof-card.coral .about-proof-bars em {
  background: linear-gradient(90deg, var(--coral), var(--sand));
}

.about-proof-card.sky .about-proof-bars em {
  background: linear-gradient(90deg, var(--sky), var(--teal));
}

.about-proof-card p {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(222, 234, 237, 0.8);
  border-radius: 18px;
  color: #3d7f7a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 850;
}

.about-parent-view {
  display: grid;
  align-items: stretch;
  min-width: 0;
  margin: 0;
}

.about-parent-phone {
  display: grid;
  align-content: start;
  padding: 22px;
  border: 1px solid rgba(222, 234, 237, 0.92);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 22px 54px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-parent-phone ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.about-parent-phone li {
  position: relative;
  padding-left: 24px;
  color: #4d5c68;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 820;
}

.about-parent-phone li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.about-phone-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(88, 197, 189, 0.2);
  border-radius: 18px;
  color: var(--teal-strong);
  background: rgba(234, 250, 250, 0.82);
  font-size: 0.86rem;
  font-weight: 900;
}

.about-phone-alert .icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  flex: 0 0 auto;
}

@media (max-width: 1439px) {
  .about-interactive-layout,
  .about-loop-grid,
  .about-proof-dashboard {
    grid-template-columns: 1fr;
  }

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

  .about-loop-diagram {
    min-height: 420px;
  }

  .about-parent-phone {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .page-about .about-interactive-section,
  .page-about .about-loop-section,
  .page-about .about-proof-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .about-interactive-shell,
  .about-loop-shell,
  .about-proof-shell {
    padding: 24px;
    border-radius: 26px;
  }

  .about-interactive-shell::before,
  .about-loop-shell::before,
  .about-proof-shell::before {
    inset: 12px;
    border-radius: 20px;
    background-size: 34px 34px;
  }

  .page-about .about-section-head h2,
  .page-about .about-proof-copy h2 {
    font-size: 1.8rem;
  }

  .about-stage-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-stage-visual {
    min-height: 300px;
  }

  .about-loop-tablist,
  .about-proof-metrics {
    grid-template-columns: 1fr;
  }

  .about-loop-diagram {
    min-height: 360px;
  }

  .about-orbit-system {
    width: min(100%, 360px);
  }

  .about-orbit-node {
    width: 108px;
    min-height: 102px;
    padding: 10px 8px;
    border-radius: 18px;
  }

  .about-orbit-node .icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .about-orbit-node strong {
    font-size: 0.72rem;
  }

  .about-orbit-core {
    width: 156px;
    min-height: 156px;
    padding: 16px;
  }

  .about-orbit-core .icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .about-orbit-core strong {
    font-size: 0.92rem;
  }

  .about-orbit-core span {
    font-size: 0.68rem;
  }

  .about-proof-card {
    min-height: 0;
  }

  .about-proof-card-head {
    display: grid;
  }

  .about-proof-card-head strong {
    text-align: left;
  }
}

@media (max-width: 580px) {
  .about-interactive-shell,
  .about-loop-shell,
  .about-proof-shell {
    padding: 20px;
    border-radius: 24px;
  }

  .about-path-list {
    grid-template-columns: 1fr;
  }

  .about-path-button {
    grid-template-columns: 36px 42px minmax(0, 1fr);
    min-height: 82px;
    padding: 12px;
    border-radius: 18px;
  }

  .about-path-button b {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .about-path-button .icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .about-stage-panel,
  .about-loop-detail,
  .about-proof-card,
  .about-parent-phone {
    padding: 18px;
    border-radius: 22px;
  }

  .about-stage-copy h3,
  .about-loop-detail h3 {
    font-size: 1.48rem;
  }

  .about-device,
  .about-coach-chat,
  .about-report-phone {
    width: 100%;
  }

  .about-coach-chat {
    grid-template-columns: 1fr;
  }

  .about-avatar-card {
    min-height: 132px;
  }

  .about-loop-diagram {
    min-height: 330px;
  }

  .about-orbit-system {
    width: min(100%, 318px);
  }

  .about-orbit-node {
    width: 92px;
    min-height: 88px;
  }

  .about-orbit-node.node-1 {
    left: -1%;
    top: 13%;
  }

  .about-orbit-node.node-2 {
    right: -1%;
    top: 14%;
  }

  .about-orbit-node.node-3 {
    bottom: 0;
  }

  .about-orbit-core {
    width: 136px;
    min-height: 136px;
    padding: 14px;
  }

  .about-orbit-core .icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
  }

  .about-orbit-core span {
    display: none;
  }

  .about-proof-score b {
    font-size: 2.45rem;
  }

  .about-proof-bars div {
    grid-template-columns: 60px minmax(0, 1fr) 40px;
    gap: 8px;
  }
}

.page-parent .parent-story-shell {
  overflow: hidden;
  background:
    radial-gradient(circle at var(--pointer-x, 16%) var(--pointer-y, 10%), rgba(88, 197, 189, 0.16), transparent 24rem),
    linear-gradient(135deg, rgba(246, 253, 253, 0.98), rgba(255, 255, 255, 0.98) 52%, rgba(255, 244, 246, 0.86));
}

.page-parent .section {
  opacity: 1;
  transform: none;
}

.page-parent .parent-story-shell::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 185, 223, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.03) 62%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.page-parent .parent-story-shell > * {
  position: relative;
  z-index: 1;
}

.parent-concern-redesign {
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
  gap: 22px;
}

.page-parent .parent-worry-stack {
  display: grid;
  gap: 12px;
}

.page-parent .parent-worry-card,
.page-parent .parent-feedback-card,
.page-parent .parent-weekly-step {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.page-parent .parent-worry-card {
  grid-template-columns: 38px 48px minmax(0, 1fr);
  min-height: 112px;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.page-parent .parent-worry-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 17px;
}

.page-parent .parent-worry-card em {
  grid-column: 2 / 4;
  justify-self: start;
  min-height: 28px;
  margin-top: 0;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
}

.page-parent .parent-worry-card.coral em {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.11);
}

.page-parent .parent-worry-card.sky em {
  color: #4fa7d3;
  background: rgba(115, 185, 223, 0.12);
}

.page-parent .parent-worry-card.sand em {
  color: #b98445;
  background: rgba(215, 173, 121, 0.12);
}

.page-parent .parent-worry-card:hover,
.page-parent .parent-worry-card:focus-visible,
.page-parent .parent-worry-card.is-active,
.page-parent .parent-feedback-card:hover,
.page-parent .parent-feedback-card:focus-visible,
.page-parent .parent-feedback-card.is-active,
.page-parent .parent-weekly-step:hover,
.page-parent .parent-weekly-step:focus-visible,
.page-parent .parent-weekly-step.is-active {
  transform: translateY(-2px);
  border-color: rgba(88, 197, 189, 0.46);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 58px rgba(49, 79, 90, 0.12);
  outline: none;
}

.page-parent .parent-worry-card:focus-visible,
.page-parent .parent-care-tab:focus-visible,
.page-parent .parent-feedback-card:focus-visible,
.page-parent .parent-weekly-step:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.28);
  outline-offset: 3px;
}

.parent-concern-panels {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.parent-concern-panel {
  display: grid;
  grid-template-columns: minmax(320px, 0.52fr) minmax(280px, 0.48fr);
  gap: 18px;
  min-height: 580px;
  padding: 18px;
  border: 1px solid rgba(216, 231, 235, 0.92);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 24px 60px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.parent-concern-panel[hidden],
.parent-featured-quote[hidden],
.parent-week-panel[hidden] {
  display: none !important;
}

.parent-photo-board,
.parent-feedback-photo {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(216, 231, 235, 0.92);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(49, 79, 90, 0.1);
}

.parent-photo-board img,
.parent-feedback-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.parent-photo-board::after,
.parent-feedback-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(255, 255, 255, 0.86) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.68), transparent 52%);
  pointer-events: none;
}

.parent-photo-board figcaption,
.parent-feedback-photo figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  color: #2f4856;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px rgba(49, 79, 90, 0.13);
  backdrop-filter: blur(12px);
  font-weight: 920;
}

.parent-photo-board figcaption .icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  flex: 0 0 auto;
}

.parent-answer-console {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(216, 231, 235, 0.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 253, 253, 0.88)),
    radial-gradient(circle at 100% 0%, rgba(88, 197, 189, 0.12), transparent 13rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.parent-answer-copy {
  padding: 18px;
  border: 1px solid rgba(222, 234, 237, 0.88);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
}

.parent-answer-copy small {
  color: var(--teal-strong);
  font-size: 0.76rem;
  font-weight: 900;
}

.parent-answer-copy h3 {
  margin: 8px 0 0;
  color: #253040;
  font-size: clamp(1.42rem, 2.2vw, 2rem);
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: 0;
}

.parent-answer-copy p {
  margin: 12px 0 0;
  color: #607080;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.75;
}

.parent-answer-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.parent-answer-copy span {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 30px;
}

.parent-console-message {
  border: 1px solid rgba(216, 231, 235, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.parent-care-redesign {
  grid-template-columns: minmax(230px, 0.28fr) minmax(0, 0.72fr);
}

.page-parent .parent-care-panel {
  grid-template-columns: minmax(480px, 1fr) minmax(260px, 0.42fr);
  min-height: 560px;
}

.page-parent .parent-care-device-grid {
  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr);
}

.parent-system-phone {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(219, 233, 236, 0.92);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 185, 223, 0.12), transparent 11rem),
    rgba(255, 255, 255, 0.78);
}

.parent-system-phone small {
  color: var(--teal-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.parent-system-phone strong {
  color: #253040;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 950;
}

.parent-system-phone p {
  margin: 0;
  color: #657482;
  font-size: 0.82rem;
  font-weight: 760;
}

.page-parent .parent-feedback-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(330px, 0.8fr) minmax(280px, 0.68fr);
}

.parent-feedback-photo {
  min-height: 560px;
}

.parent-feedback-photo figcaption {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.parent-feedback-photo figcaption strong {
  color: #253040;
  font-size: 1.52rem;
  line-height: 1;
}

.parent-feedback-photo figcaption span {
  color: #667482;
  font-size: 0.78rem;
  font-weight: 850;
}

.parent-feedback-panels {
  display: grid;
  min-width: 0;
}

.page-parent .parent-featured-quote {
  min-height: 560px;
  align-content: center;
}

.page-parent .parent-featured-quote.teal {
  background:
    radial-gradient(circle at 88% 10%, rgba(88, 197, 189, 0.16), transparent 16rem),
    rgba(255, 255, 255, 0.82);
}

.page-parent .parent-featured-quote.coral {
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 127, 135, 0.16), transparent 16rem),
    rgba(255, 255, 255, 0.82);
}

.page-parent .parent-featured-quote.sky {
  background:
    radial-gradient(circle at 88% 10%, rgba(115, 185, 223, 0.16), transparent 16rem),
    rgba(255, 255, 255, 0.82);
}

.page-parent .parent-feedback-card {
  width: 100%;
  text-align: left;
}

.page-parent .parent-feedback-card p {
  margin: 4px 0 0;
}

.page-parent .parent-weekly-timeline {
  align-content: start;
}

.page-parent .parent-weekly-step {
  width: 100%;
  color: inherit;
  text-align: left;
}

.page-parent .parent-weekly-step h3,
.page-parent .parent-worry-card span {
  color: #253040;
  font-weight: 950;
}

.page-parent .parent-weekly-step p,
.page-parent .parent-worry-card p {
  color: #5f6f7d;
  font-weight: 760;
}

.page-parent .parent-weekly-step em {
  grid-column: 2 / 4;
  justify-self: start;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
}

.page-parent .parent-weekly-step.coral em {
  color: var(--coral);
  background: rgba(242, 127, 135, 0.11);
}

.page-parent .parent-weekly-step.sky em {
  color: #4fa7d3;
  background: rgba(115, 185, 223, 0.12);
}

.page-parent .parent-weekly-step.sand em {
  color: #b98445;
  background: rgba(215, 173, 121, 0.12);
}

.parent-week-panel {
  display: grid;
  gap: 12px;
}

.page-parent .parent-weekly-screen main {
  align-content: center;
}

@media (max-width: 1439px) {
  .parent-concern-redesign,
  .parent-care-redesign,
  .page-parent .parent-care-panel,
  .page-parent .parent-feedback-layout,
  .page-parent .parent-weekly-layout {
    grid-template-columns: 1fr;
  }

  .page-parent .parent-worry-stack,
  .page-parent .parent-care-tabs,
  .page-parent .parent-weekly-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-feedback-photo,
  .page-parent .parent-featured-quote {
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  .page-parent .parent-story-shell {
    border-radius: 24px;
  }

  .page-parent .parent-story-shell::after {
    inset: 12px;
    border-radius: 18px;
    background-size: 34px 34px;
  }

  .page-parent .parent-worry-stack,
  .page-parent .parent-care-tabs,
  .page-parent .parent-weekly-timeline,
  .parent-concern-panel,
  .page-parent .parent-care-device-grid {
    grid-template-columns: 1fr;
  }

  .page-parent .parent-worry-card,
  .page-parent .parent-weekly-step {
    grid-template-columns: 34px 42px minmax(0, 1fr);
    min-height: 94px;
    padding: 12px;
  }

  .page-parent .parent-worry-card .icon {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }

  .parent-concern-panel,
  .parent-answer-console,
  .page-parent .parent-care-panel {
    min-height: 0;
    padding: 14px;
    border-radius: 22px;
  }

  .parent-photo-board img,
  .parent-feedback-photo img {
    min-height: 280px;
  }

  .parent-feedback-photo,
  .page-parent .parent-featured-quote {
    min-height: 0;
  }

  .page-parent .parent-featured-quote {
    padding: 22px;
  }
}

@media (max-width: 480px) {
  .page-parent .parent-worry-card,
  .page-parent .parent-weekly-step {
    grid-template-columns: 1fr;
  }

  .page-parent .parent-worry-card em,
  .page-parent .parent-weekly-step em {
    grid-column: 1;
  }

  .parent-photo-board figcaption,
  .parent-feedback-photo figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

/* Parent page 2026 full redesign */
.page-parent {
  --parent-ink: #24313f;
  --parent-muted: #647382;
  --parent-line: rgba(216, 231, 235, 0.92);
  --parent-panel: rgba(255, 255, 255, 0.86);
  --parent-soft: #f7fcfc;
}

.page-parent .parent-2026-section {
  padding-block: clamp(38px, 5.4vw, 78px);
}

.page-parent .parent-2026-shell {
  position: relative;
  width: min(100%, 1360px);
  max-width: 1360px;
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(218, 232, 236, 0.92);
  border-radius: clamp(26px, 3vw, 38px);
  background:
    radial-gradient(circle at var(--pointer-x, 16%) var(--pointer-y, 10%), rgba(88, 197, 189, 0.14), transparent 24rem),
    radial-gradient(circle at 95% 8%, rgba(242, 127, 135, 0.08), transparent 20rem),
    linear-gradient(135deg, rgba(247, 253, 253, 0.98), rgba(255, 255, 255, 0.98) 52%, rgba(255, 247, 248, 0.88));
  box-shadow:
    0 30px 86px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-parent .parent-2026-shell::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: clamp(20px, 2.4vw, 30px);
  background-image:
    linear-gradient(rgba(88, 197, 189, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 185, 223, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.02) 58%, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

.page-parent .parent-2026-shell > * {
  position: relative;
  z-index: 1;
}

.page-parent :is(.parent-assurance-panel, .parent-assurance-tab, .parent-command-tab, .parent-command-panel, .parent-trust-card, .parent-voice-panel, .parent-voice-card, .parent-week-tab, .parent-week-panel) {
  --tone: var(--teal-strong);
  --tone-rgb: 88 197 189;
}

.page-parent :is(.parent-assurance-panel, .parent-assurance-tab, .parent-command-tab, .parent-command-panel, .parent-trust-card, .parent-voice-panel, .parent-voice-card, .parent-week-tab, .parent-week-panel).coral {
  --tone: var(--coral);
  --tone-rgb: 242 127 135;
}

.page-parent :is(.parent-assurance-panel, .parent-assurance-tab, .parent-command-tab, .parent-command-panel, .parent-trust-card, .parent-voice-panel, .parent-voice-card, .parent-week-tab, .parent-week-panel).sky {
  --tone: #4fa7d3;
  --tone-rgb: 115 185 223;
}

.page-parent :is(.parent-assurance-panel, .parent-assurance-tab, .parent-command-tab, .parent-command-panel, .parent-trust-card, .parent-voice-panel, .parent-voice-card, .parent-week-tab, .parent-week-panel).sand {
  --tone: #b98445;
  --tone-rgb: 215 173 121;
}

.page-parent :is(.parent-assurance-panel, .parent-command-panel, .parent-voice-panel, .parent-week-panel)[hidden] {
  display: none !important;
}

.page-parent :is(.parent-assurance-tab, .parent-command-tab, .parent-voice-card, .parent-week-tab) {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.page-parent :is(.parent-assurance-tab, .parent-command-tab, .parent-voice-card, .parent-week-tab):focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.28);
  outline-offset: 3px;
}

.parent-assurance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}

.parent-assurance-stage {
  display: grid;
  min-width: 0;
}

.parent-assurance-panel {
  display: grid;
  grid-template-columns: minmax(360px, 0.55fr) minmax(300px, 0.45fr);
  gap: 18px;
  min-height: 620px;
  padding: 18px;
  border: 1px solid rgb(var(--tone-rgb) / 0.28);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--tone-rgb) / 0.14), transparent 18rem),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 24px 68px rgba(49, 79, 90, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.parent-assurance-photo,
.parent-voices-photo,
.parent-trust-hero figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--parent-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 58px rgba(49, 79, 90, 0.11);
}

.parent-assurance-photo img,
.parent-voices-photo img,
.parent-trust-hero img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.parent-assurance-photo::after,
.parent-voices-photo::after,
.parent-trust-hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 46%, rgba(255, 255, 255, 0.88) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.54), transparent 52%);
  pointer-events: none;
}

.parent-assurance-photo figcaption,
.parent-voices-photo figcaption,
.parent-trust-hero figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 40px rgba(49, 79, 90, 0.13);
  backdrop-filter: blur(12px);
}

.parent-assurance-photo small,
.parent-voices-photo span {
  color: #657482;
  font-size: 0.76rem;
  font-weight: 850;
}

.parent-assurance-photo strong,
.parent-voices-photo strong {
  color: var(--parent-ink);
  font-size: 1.42rem;
  line-height: 1;
  font-weight: 950;
}

.parent-assurance-console,
.parent-command-board,
.parent-week-device,
.parent-voices-system,
.parent-trust-system {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--parent-line);
  border-radius: 26px;
  background:
    linear-gradient(rgba(88, 197, 189, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 185, 223, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.9);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow:
    0 22px 58px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.parent-assurance-console {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.parent-assurance-copy,
.parent-assurance-list,
.parent-command-score,
.parent-command-chart,
.parent-command-queue,
.parent-command-phone,
.parent-week-summary,
.parent-week-panels,
.parent-week-phone,
.parent-voice-panel,
.parent-voices-metrics article {
  border: 1px solid rgba(222, 234, 237, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.06);
}

.parent-assurance-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}

.parent-assurance-copy .icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.parent-assurance-copy span,
.parent-command-copy > span,
.parent-trust-hero div > span {
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--tone, var(--teal-strong));
  background: rgb(var(--tone-rgb, 88 197 189) / 0.12);
  font-size: 0.75rem;
  font-weight: 920;
  line-height: 30px;
}

.parent-assurance-copy h3,
.parent-command-copy h3,
.parent-trust-hero h3 {
  margin: 0;
  color: var(--parent-ink);
  font-size: clamp(1.42rem, 2.3vw, 2.18rem);
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: 0;
}

.parent-assurance-copy p,
.parent-command-copy p,
.parent-trust-hero p,
.parent-trust-system p,
.parent-week-message p,
.parent-week-phone p {
  margin: 0;
  color: var(--parent-muted);
  font-size: 0.93rem;
  font-weight: 740;
  line-height: 1.78;
}

.parent-assurance-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.parent-assurance-list div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgb(var(--tone-rgb) / 0.08);
}

.parent-assurance-list b {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--tone);
}

.parent-assurance-list span,
.parent-assurance-tags span,
.parent-command-queue span,
.parent-week-next span,
.parent-week-next em,
.parent-week-message small,
.parent-voice-actions span,
.parent-voices-tags span,
.parent-trust-flow span {
  color: #657482;
  font-size: 0.76rem;
  font-weight: 850;
}

.parent-assurance-tags,
.parent-voices-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-assurance-tags span,
.parent-voices-tags span {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  line-height: 30px;
}

.parent-assurance-tabs {
  display: grid;
  gap: 12px;
  align-content: start;
}

.parent-assurance-tab,
.parent-command-tab,
.parent-voice-card,
.parent-week-tab {
  position: relative;
  border: 1px solid rgba(220, 233, 236, 0.92);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(49, 79, 90, 0.055);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.parent-assurance-tab:hover,
.parent-assurance-tab.is-active,
.parent-command-tab:hover,
.parent-command-tab.is-active,
.parent-voice-card:hover,
.parent-voice-card.is-active,
.parent-week-tab:hover,
.parent-week-tab.is-active {
  transform: translateY(-2px);
  border-color: rgb(var(--tone-rgb) / 0.48);
  background:
    radial-gradient(circle at var(--pointer-x, 20%) var(--pointer-y, 0%), rgb(var(--tone-rgb) / 0.12), transparent 11rem),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 52px rgba(49, 79, 90, 0.11);
}

.parent-assurance-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 122px;
  padding: 16px;
  border-radius: 22px;
  text-align: left;
}

.parent-assurance-tab em {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 15px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.12);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
}

.parent-assurance-tab b,
.parent-command-tab b,
.parent-voice-card span,
.parent-week-tab h3 {
  display: block;
  color: var(--parent-ink);
  font-weight: 940;
  line-height: 1.35;
}

.parent-assurance-tab span,
.parent-voice-card p,
.parent-week-tab p {
  display: block;
  margin-top: 4px;
  color: var(--parent-muted);
  font-size: 0.8rem;
  font-weight: 740;
  line-height: 1.58;
}

.parent-assurance-tab strong {
  grid-column: 2;
  justify-self: start;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.72rem;
  line-height: 28px;
}

.parent-assurance-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(88, 197, 189, 0.22);
  border-radius: 22px;
  background: rgba(237, 253, 252, 0.76);
}

.parent-assurance-note .icon {
  width: 46px;
  height: 46px;
  border-radius: 17px;
}

.parent-assurance-note p {
  margin: 0;
  color: #526271;
  font-size: 0.85rem;
  font-weight: 780;
  line-height: 1.7;
}

.parent-command-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.parent-command-tab {
  display: grid;
  justify-items: start;
  gap: 9px;
  min-height: 158px;
  padding: 18px;
  border-radius: 24px;
  text-align: left;
}

.parent-command-tab .icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.parent-command-tab span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 28px;
}

.parent-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(280px, 0.32fr);
  gap: 20px;
  padding: 18px;
  border: 1px solid rgb(var(--tone-rgb) / 0.28);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgb(var(--tone-rgb) / 0.12), transparent 18rem),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 62px rgba(49, 79, 90, 0.09);
}

.parent-command-dashboard {
  display: grid;
  grid-template-columns: minmax(170px, 0.78fr) minmax(240px, 1.22fr);
  gap: 14px;
  padding: 18px;
}

.parent-command-score,
.parent-command-chart,
.parent-command-queue,
.parent-command-phone {
  padding: 16px;
}

.parent-command-score {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 230px;
}

.parent-command-score .icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.parent-command-score strong {
  color: var(--tone);
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  line-height: 0.95;
}

.parent-command-score span,
.parent-command-chart b,
.parent-command-queue b,
.parent-command-phone small {
  color: #647482;
  font-size: 0.78rem;
  font-weight: 880;
}

.parent-command-chart {
  min-height: 230px;
}

.parent-command-queue {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.parent-command-queue span {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.09);
  line-height: 38px;
  text-align: center;
}

.parent-command-phone {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 253, 253, 0.86)),
    radial-gradient(circle at 100% 0%, rgb(var(--tone-rgb) / 0.13), transparent 12rem);
}

.parent-command-phone strong {
  color: var(--parent-ink);
  font-size: 1.28rem;
  line-height: 1.25;
}

.parent-command-phone p {
  margin: 0;
  color: var(--parent-muted);
  font-size: 0.84rem;
  font-weight: 740;
  line-height: 1.65;
}

.parent-command-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.parent-command-copy div {
  display: grid;
  grid-template-columns: auto 42px auto 42px auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.parent-command-copy b {
  color: var(--parent-ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.parent-command-copy i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--tone-rgb) / 0.2), var(--tone));
}

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

.parent-trust-hero,
.parent-trust-card,
.parent-trust-system {
  border: 1px solid var(--parent-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(49, 79, 90, 0.075);
}

.parent-trust-hero {
  grid-column: span 6;
  grid-row: span 2;
  display: grid;
  grid-template-rows: minmax(300px, 0.68fr) auto;
  gap: 18px;
  min-height: 590px;
  padding: 18px;
}

.parent-trust-hero figure {
  min-height: 320px;
}

.parent-trust-hero img {
  min-height: 320px;
}

.parent-trust-hero div {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 4px 4px 8px;
}

.parent-trust-hero div > span {
  --tone: var(--teal-strong);
  --tone-rgb: 88 197 189;
}

.parent-trust-card {
  grid-column: span 3;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 288px;
  padding: 20px;
  background:
    radial-gradient(circle at 85% 8%, rgb(var(--tone-rgb) / 0.13), transparent 12rem),
    rgba(255, 255, 255, 0.84);
}

.parent-trust-card .icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}

.parent-trust-card strong {
  color: var(--tone);
  font-size: 1.28rem;
  line-height: 1.2;
  font-weight: 950;
}

.parent-trust-card h3 {
  margin: 0;
  color: var(--parent-ink);
  font-size: 1.06rem;
  line-height: 1.4;
}

.parent-trust-card p {
  margin: 0;
  color: var(--parent-muted);
  font-size: 0.84rem;
  font-weight: 730;
  line-height: 1.68;
}

.parent-trust-meter {
  align-self: end;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 236, 239, 0.88);
}

.parent-trust-meter i {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--tone-rgb) / 0.55), var(--tone));
}

.parent-trust-system {
  grid-column: span 6;
  overflow: hidden;
}

.parent-trust-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 18px 10px;
}

.parent-trust-flow span {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
}

.parent-trust-flow i {
  display: none;
}

.parent-trust-system p {
  padding: 0 18px 18px;
}

.parent-voices-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(320px, 0.76fr) minmax(300px, 0.7fr);
  gap: 16px;
}

.parent-voices-main {
  display: grid;
  min-width: 0;
}

.parent-voice-panel {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 520px;
  padding: clamp(24px, 3vw, 42px);
  background:
    radial-gradient(circle at 85% 8%, rgb(var(--tone-rgb) / 0.16), transparent 18rem),
    rgba(255, 255, 255, 0.82);
}

.parent-voice-score {
  display: inline-grid;
  justify-self: start;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
}

.parent-voice-score strong {
  color: var(--tone);
  font-size: 1.42rem;
  line-height: 1;
}

.parent-voice-score span {
  color: #657482;
  font-size: 0.76rem;
  font-weight: 880;
}

.parent-voice-panel p {
  margin: 0;
  color: var(--parent-ink);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1.58;
}

.parent-voice-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.parent-voice-author b,
.parent-voice-card > b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--tone-rgb) / 0.76), var(--tone));
}

.parent-voice-author span {
  color: #627382;
  font-size: 0.9rem;
  font-weight: 850;
}

.parent-voice-actions {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 430px;
}

.parent-voice-actions i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--tone-rgb) / 0.25), var(--tone));
}

.parent-voices-photo {
  min-height: 520px;
}

.parent-voices-photo img {
  min-height: 520px;
}

.parent-voices-controls {
  display: grid;
  gap: 10px;
  align-content: start;
}

.parent-voice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 126px;
  padding: 14px;
  border-radius: 20px;
  text-align: left;
}

.parent-voice-card em {
  display: inline-flex;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 26px;
}

.parent-voices-system {
  grid-column: 1 / -1;
}

.parent-voices-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.parent-voices-metrics article {
  display: grid;
  gap: 6px;
  min-height: 94px;
  padding: 18px;
}

.parent-voices-metrics strong {
  color: var(--teal-strong);
  font-size: 2rem;
  line-height: 1;
}

.parent-voices-metrics span {
  color: #667482;
  font-size: 0.78rem;
  font-weight: 860;
}

.parent-voices-tags {
  padding: 0 18px 18px;
}

.parent-week-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(18px, 2.4vw, 30px);
}

.parent-week-tabs {
  display: grid;
  gap: 12px;
  align-content: start;
}

.parent-week-tab {
  display: grid;
  grid-template-columns: 54px 50px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 122px;
  padding: 15px;
  border-radius: 22px;
  text-align: left;
}

.parent-week-tab > em:first-child {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.11);
  font-style: normal;
  font-weight: 950;
}

.parent-week-tab .icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.parent-week-tab > em:last-child {
  grid-column: 3;
  justify-self: start;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 28px;
}

.parent-week-device {
  margin: 0;
}

.parent-week-screen {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 0.46fr) minmax(190px, 0.26fr);
  gap: 14px;
  padding: 18px;
}

.parent-week-summary,
.parent-week-panels,
.parent-week-phone {
  padding: 16px;
}

.parent-week-summary {
  display: grid;
  align-content: start;
  gap: 10px;
}

.parent-week-summary strong {
  color: var(--parent-ink);
  font-size: 1rem;
}

.parent-week-summary div {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(237, 253, 252, 0.8);
}

.parent-week-summary span {
  color: #657482;
  font-size: 0.72rem;
  font-weight: 840;
}

.parent-week-summary b {
  color: var(--teal-strong);
  font-size: 1.28rem;
  line-height: 1;
}

.parent-week-panels {
  display: grid;
  align-content: center;
  gap: 12px;
}

.parent-week-panel {
  display: grid;
  gap: 12px;
}

.parent-week-message,
.parent-week-next {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgb(var(--tone-rgb) / 0.08);
}

.parent-week-message b {
  color: var(--parent-ink);
  font-size: 1rem;
}

.parent-week-next {
  border: 1px solid rgb(var(--tone-rgb) / 0.18);
  background: rgba(255, 255, 255, 0.78);
}

.parent-week-next strong {
  color: var(--tone);
  font-size: 1.5rem;
  line-height: 1.1;
}

.parent-week-phone {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 7px;
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 127, 135, 0.11), transparent 10rem),
    rgba(255, 255, 255, 0.86);
}

.parent-week-phone small {
  color: var(--coral);
  font-size: 0.74rem;
  font-weight: 900;
}

.parent-week-phone strong {
  color: var(--parent-ink);
  font-size: 1.16rem;
  line-height: 1.3;
}

.page-parent .taste-loop-strip {
  width: min(calc(100% - (var(--page-gutter) * 2)), 1360px);
  max-width: 1360px;
  margin: clamp(18px, 3vw, 34px) auto 0;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(218, 232, 236, 0.92);
  border-radius: 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 12%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.14), transparent 18rem),
    linear-gradient(135deg, rgba(247, 253, 253, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 22px 60px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-parent .taste-loop-copy span {
  color: var(--teal-strong);
}

.page-parent .taste-loop-copy strong {
  color: var(--parent-ink);
  font-size: clamp(1.4rem, 2.2vw, 2.15rem);
}

.page-parent .taste-loop-copy p {
  color: var(--parent-muted);
}

.page-parent .taste-loop-step {
  min-height: 164px;
  border-color: rgba(220, 233, 236, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(49, 79, 90, 0.055);
}

.page-parent .taste-loop-step strong {
  color: var(--parent-ink);
}

.page-parent .taste-loop-step p {
  color: var(--parent-muted);
}

.page-parent .product-lens {
  padding-block: clamp(34px, 5vw, 68px);
}

.page-parent .product-lens .lens-shell {
  width: min(100%, 1360px);
  max-width: 1360px;
  border: 1px solid rgba(218, 232, 236, 0.92);
  border-radius: clamp(28px, 3vw, 38px);
  background:
    radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 8%), rgba(115, 185, 223, 0.12), transparent 22rem),
    radial-gradient(circle at 8% 12%, rgba(88, 197, 189, 0.12), transparent 19rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 253, 0.94));
  box-shadow:
    0 30px 82px rgba(49, 79, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-parent .product-lens .lens-label {
  color: var(--teal-strong);
  background: rgba(88, 197, 189, 0.1);
}

.page-parent .product-lens .lens-copy h2 {
  color: var(--parent-ink);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
}

.page-parent .product-lens .lens-copy p,
.page-parent .product-lens .lens-detail p,
.page-parent .product-lens .lens-takeaways p,
.page-parent .product-lens .lens-takeaway-list em {
  color: var(--parent-muted);
}

.page-parent .product-lens .lens-tab,
.page-parent .product-lens .lens-detail,
.page-parent .product-lens .lens-takeaways,
.page-parent .product-lens .lens-stage,
.page-parent .product-lens .lens-proof {
  border-color: rgba(220, 233, 236, 0.92);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(49, 79, 90, 0.06);
}

.page-parent .product-lens .lens-tab.is-active,
.page-parent .product-lens .lens-tab:hover,
.page-parent .product-lens .lens-proof.is-active,
.page-parent .product-lens .lens-proof:hover {
  border-color: rgba(88, 197, 189, 0.45);
  background:
    radial-gradient(circle at var(--pointer-x, 24%) var(--pointer-y, 0%), rgba(88, 197, 189, 0.12), transparent 10rem),
    rgba(255, 255, 255, 0.96);
}

.page-parent .product-lens .lens-stage-caption {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
}

/* Parent compact + interactive refinement */
.page-parent :is(.parent-trust-panel) {
  --tone: var(--teal-strong);
  --tone-rgb: 88 197 189;
}

.page-parent :is(.parent-trust-panel).coral {
  --tone: var(--coral);
  --tone-rgb: 242 127 135;
}

.page-parent :is(.parent-trust-panel).sky {
  --tone: #4fa7d3;
  --tone-rgb: 115 185 223;
}

.page-parent :is(.parent-trust-panel).sand {
  --tone: #b98445;
  --tone-rgb: 215 173 121;
}

.page-parent :is(.parent-trust-panel)[hidden] {
  display: none !important;
}

.page-parent .parent-2026-section {
  padding-block: clamp(22px, 3.4vw, 50px);
}

.page-parent .parent-2026-shell {
  padding: clamp(16px, 2vw, 28px);
  border-radius: clamp(22px, 2.4vw, 30px);
  box-shadow:
    0 22px 58px rgba(49, 79, 90, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-parent .parent-2026-shell::before {
  inset: 12px;
  border-radius: 22px;
  background-size: 38px 38px;
}

.page-parent .parent-block-heading {
  gap: 7px;
  max-width: 690px;
  margin-bottom: clamp(14px, 2vw, 24px);
}

.page-parent .parent-block-heading > span {
  min-height: 26px;
  padding-inline: 10px;
  font-size: 0.7rem;
}

.page-parent .parent-block-heading h2 {
  font-size: clamp(1.5rem, 2.45vw, 2.35rem);
}

.page-parent .parent-block-heading p {
  font-size: clamp(0.84rem, 0.95vw, 0.94rem);
  line-height: 1.62;
}

.page-parent .taste-loop-strip {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  margin-top: clamp(12px, 2vw, 22px);
  padding: clamp(14px, 1.8vw, 22px);
  border-radius: 24px;
}

.page-parent .taste-loop-copy {
  gap: 6px;
  padding: 6px;
}

.page-parent .taste-loop-copy strong {
  font-size: clamp(1.18rem, 1.7vw, 1.68rem);
}

.page-parent .taste-loop-step {
  min-height: 126px;
  padding: 14px;
  border-radius: 18px;
}

.page-parent .taste-loop-step span {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.page-parent .product-lens {
  padding-block: clamp(22px, 3.4vw, 46px);
}

.page-parent .product-lens .lens-shell {
  padding: clamp(16px, 2vw, 26px);
  border-radius: clamp(22px, 2.4vw, 30px);
}

.parent-assurance-grid {
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.64fr);
  gap: clamp(14px, 1.8vw, 22px);
}

.parent-assurance-panel {
  gap: 14px;
  min-height: 470px;
  padding: 14px;
  border-radius: 24px;
}

.parent-assurance-photo,
.parent-voices-photo,
.parent-trust-hero figure,
.parent-assurance-console,
.parent-command-board,
.parent-week-device,
.parent-voices-system,
.parent-trust-system {
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(49, 79, 90, 0.075);
}

.parent-assurance-photo img,
.parent-voices-photo img {
  min-height: 350px;
}

.parent-trust-hero img {
  min-height: 225px;
}

.parent-assurance-photo figcaption,
.parent-voices-photo figcaption,
.parent-trust-hero figcaption {
  left: 12px;
  right: 12px;
  bottom: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
}

.parent-assurance-console {
  gap: 10px;
  padding: 12px;
}

.parent-assurance-copy,
.parent-assurance-list,
.parent-command-score,
.parent-command-chart,
.parent-command-queue,
.parent-command-phone,
.parent-week-summary,
.parent-week-panels,
.parent-week-phone,
.parent-voice-panel,
.parent-voices-metrics article {
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(49, 79, 90, 0.05);
}

.parent-assurance-copy {
  gap: 8px;
  padding: 14px;
}

.parent-assurance-copy .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-assurance-copy h3,
.parent-command-copy h3,
.parent-trust-hero h3 {
  font-size: clamp(1.22rem, 1.9vw, 1.72rem);
}

.parent-assurance-copy p,
.parent-command-copy p,
.parent-trust-hero p,
.parent-trust-system p,
.parent-week-message p,
.parent-week-phone p {
  font-size: 0.84rem;
  line-height: 1.62;
}

.parent-assurance-list {
  gap: 8px;
  padding: 10px;
}

.parent-assurance-list div {
  min-height: 34px;
  border-radius: 12px;
}

.parent-assurance-tags span,
.parent-voices-tags span {
  min-height: 26px;
  line-height: 26px;
}

.parent-assurance-tabs {
  gap: 9px;
}

.parent-assurance-tab {
  min-height: 92px;
  padding: 12px;
  border-radius: 18px;
}

.parent-assurance-tab em {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.parent-assurance-tab strong {
  min-height: 25px;
  line-height: 25px;
}

.parent-assurance-note {
  padding: 12px;
  border-radius: 18px;
}

.parent-command-tabs {
  gap: 10px;
  margin-bottom: 14px;
}

.parent-command-tab {
  min-height: 112px;
  padding: 14px;
  border-radius: 20px;
}

.parent-command-tab .icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.parent-command-panel {
  gap: 14px;
  padding: 14px;
  border-radius: 24px;
}

.parent-command-dashboard {
  gap: 10px;
  padding: 12px;
}

.parent-command-score,
.parent-command-chart,
.parent-command-queue,
.parent-command-phone {
  padding: 12px;
}

.parent-command-score,
.parent-command-chart {
  min-height: 168px;
}

.parent-command-score .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-command-score strong {
  font-size: clamp(2rem, 3.2vw, 3.35rem);
}

.parent-mini-chart {
  min-height: 104px;
}

.parent-command-queue {
  gap: 8px;
}

.parent-command-queue span {
  min-height: 32px;
  border-radius: 12px;
  line-height: 32px;
}

.parent-command-copy {
  gap: 10px;
  padding: clamp(14px, 1.8vw, 22px);
}

.parent-trust-grid {
  gap: 12px;
}

.parent-trust-hero {
  gap: 12px;
  min-height: 430px;
  padding: 14px;
  border-radius: 22px;
}

.parent-trust-hero figure {
  min-height: 230px;
}

.parent-trust-card {
  position: relative;
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.parent-trust-card {
  gap: 9px;
  min-height: 208px;
  padding: 16px;
  border-radius: 20px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.parent-trust-card:hover,
.parent-trust-card:focus-visible,
.parent-trust-card.is-active {
  transform: translateY(-2px);
  border-color: rgb(var(--tone-rgb) / 0.48);
  background:
    radial-gradient(circle at var(--pointer-x, 80%) var(--pointer-y, 0%), rgb(var(--tone-rgb) / 0.15), transparent 12rem),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 46px rgba(49, 79, 90, 0.1);
  outline: none;
}

.parent-trust-card:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.28);
  outline-offset: 3px;
}

.parent-trust-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-trust-card strong {
  font-size: 1.06rem;
}

.parent-trust-card h3 {
  font-size: 0.96rem;
}

.parent-trust-card p {
  font-size: 0.78rem;
  line-height: 1.55;
}

.parent-trust-detail {
  padding: 14px;
}

.parent-trust-panel {
  display: grid;
  gap: 10px;
}

.parent-trust-panel h3 {
  margin: 0;
  color: var(--parent-ink);
  font-size: 1.12rem;
  line-height: 1.35;
}

.parent-trust-panel p {
  margin: 0;
  padding: 0;
}

.parent-trust-panel > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-trust-panel > div:last-child span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 28px;
}

.parent-trust-flow {
  gap: 8px;
  padding: 0;
}

.parent-trust-flow span {
  min-height: 42px;
  border-radius: 14px;
}

.parent-voices-grid {
  grid-template-columns: minmax(300px, 0.9fr) minmax(280px, 0.72fr) minmax(280px, 0.72fr);
  gap: 12px;
}

.parent-voice-panel {
  gap: 14px;
  min-height: 386px;
  padding: clamp(18px, 2.2vw, 28px);
}

.parent-voice-score {
  padding: 11px 13px;
  border-radius: 15px;
}

.parent-voice-panel p {
  font-size: clamp(1.12rem, 1.75vw, 1.56rem);
  line-height: 1.5;
}

.parent-voices-photo,
.parent-voices-photo img {
  min-height: 386px;
}

.parent-voices-controls {
  gap: 8px;
}

.parent-voice-card {
  min-height: 104px;
  padding: 12px;
  border-radius: 17px;
}

.parent-voice-author b,
.parent-voice-card > b {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.parent-voices-metrics {
  gap: 10px;
  padding: 12px;
}

.parent-voices-metrics article {
  min-height: 74px;
  padding: 14px;
}

.parent-voices-metrics strong {
  font-size: 1.55rem;
}

.parent-week-grid {
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(14px, 1.8vw, 22px);
}

.parent-week-tabs {
  gap: 9px;
}

.parent-week-tab {
  min-height: 94px;
  padding: 12px;
  border-radius: 18px;
}

.parent-week-tab > em:first-child {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.parent-week-tab .icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.parent-week-screen {
  grid-template-columns: minmax(180px, 0.33fr) minmax(0, 0.67fr);
  grid-template-areas:
    "summary panels"
    "feed phone";
  align-items: stretch;
  gap: 10px;
  padding: 12px;
}

.parent-week-summary,
.parent-week-panels,
.parent-week-feed,
.parent-week-phone {
  padding: 12px;
}

.parent-week-summary {
  grid-area: summary;
}

.parent-week-panels {
  grid-area: panels;
}

.parent-week-feed {
  grid-area: feed;
}

.parent-week-phone {
  grid-area: phone;
}

.parent-week-summary div {
  min-height: 52px;
  padding: 10px;
}

.parent-week-message,
.parent-week-next {
  padding: 12px;
  border-radius: 15px;
}

.parent-week-progress {
  min-height: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 999px !important;
  background: rgba(226, 236, 239, 0.92) !important;
}

.parent-week-progress i {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sky));
}

.parent-week-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.parent-week-checks span {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.09);
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 30px;
  text-align: center;
}

.parent-week-feed {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid rgba(222, 234, 237, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(49, 79, 90, 0.05);
}

.parent-week-feed > strong {
  color: var(--parent-ink);
  font-size: 0.9rem;
}

.parent-week-feed-item {
  --tone: var(--teal-strong);
  --tone-rgb: 88 197 189;
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  width: 100%;
  min-height: 48px;
  padding: 9px;
  border: 1px solid rgba(222, 234, 237, 0.88);
  border-radius: 13px;
  color: inherit;
  background: rgba(247, 253, 253, 0.68);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.parent-week-feed-item.coral {
  --tone: var(--coral);
  --tone-rgb: 242 127 135;
}

.parent-week-feed-item.sky {
  --tone: #4fa7d3;
  --tone-rgb: 115 185 223;
}

.parent-week-feed-item.sand {
  --tone: #b98445;
  --tone-rgb: 215 173 121;
}

.parent-week-feed-item:hover,
.parent-week-feed-item:focus-visible,
.parent-week-feed-item.is-active {
  transform: translateY(-1px);
  border-color: rgb(var(--tone-rgb) / 0.42);
  background: rgb(var(--tone-rgb) / 0.08);
  outline: none;
}

.parent-week-feed-item:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.25);
  outline-offset: 2px;
}

.parent-week-feed-item b {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 12px;
  color: var(--tone);
  background: rgb(var(--tone-rgb) / 0.1);
  font-size: 0.72rem;
}

.parent-week-feed-item span {
  color: var(--parent-muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.45;
}

.parent-week-phone div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.parent-week-phone div span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--coral);
  background: rgba(242, 127, 135, 0.1);
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 28px;
}

.page-parent :is(.parent-assurance-tab, .parent-command-tab, .parent-voice-card, .parent-week-tab, .parent-week-feed-item, .parent-trust-card).is-pressing {
  transform: translateY(0) scale(0.985);
}

.page-parent :is(.parent-assurance-panel.is-active, .parent-command-panel.is-active, .parent-voice-panel.is-active, .parent-week-panel.is-active, .parent-trust-panel.is-active) {
  animation: parentPanelIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-parent .parent-2026-shell.is-switching :is(.parent-command-score strong, .parent-week-next strong, .parent-voice-score strong) {
  animation: parentMetricPop 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.page-parent :is(.parent-trust-card.is-active, .parent-assurance-tab.is-active, .parent-command-tab.is-active, .parent-voice-card.is-active, .parent-week-tab.is-active)::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--tone-rgb) / 0.3), var(--tone), rgb(var(--tone-rgb) / 0.3));
  transform-origin: left;
  animation: parentActiveLine 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.parent-trust-card.is-active .parent-trust-meter i {
  animation: parentMeterPulse 600ms ease;
}

@keyframes parentPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes parentMetricPop {
  0% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes parentActiveLine {
  from {
    transform: scaleX(0.24);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes parentMeterPulse {
  0% {
    filter: saturate(0.82);
    transform: scaleX(0.72);
  }
  100% {
    filter: saturate(1);
    transform: scaleX(1);
  }
}

@media (max-width: 1439px) {
  .parent-assurance-grid,
  .parent-command-panel,
  .parent-week-grid {
    grid-template-columns: 1fr;
  }

  .parent-assurance-tabs,
  .parent-command-tabs,
  .parent-week-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-assurance-panel {
    min-height: 0;
  }

  .parent-trust-hero {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
  }

  .parent-trust-card {
    grid-column: span 6;
  }

  .parent-trust-system {
    grid-column: 1 / -1;
  }

  .parent-voices-grid {
    grid-template-columns: 1fr 1fr;
  }

  .parent-voices-controls,
  .parent-voices-system {
    grid-column: 1 / -1;
  }

  .parent-voices-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-parent .taste-loop-strip {
    grid-template-columns: 1fr;
  }

  .page-parent .product-lens .lens-shell {
    border-radius: 26px;
  }

  .page-parent .parent-2026-shell {
    padding: 18px;
    border-radius: 26px;
  }

  .page-parent .parent-2026-shell::before {
    inset: 12px;
    border-radius: 20px;
    background-size: 34px 34px;
  }

  .parent-assurance-panel,
  .parent-command-dashboard,
  .parent-week-screen,
  .parent-voices-grid {
    grid-template-columns: 1fr;
  }

  .parent-week-screen {
    grid-template-areas:
      "summary"
      "panels"
      "feed"
      "phone";
  }

  .parent-assurance-tabs,
  .parent-command-tabs,
  .parent-week-tabs,
  .parent-voices-controls,
  .parent-voices-metrics {
    grid-template-columns: 1fr;
  }

  .parent-assurance-photo img,
  .parent-voices-photo img {
    min-height: 300px;
  }

  .parent-assurance-photo,
  .parent-voices-photo {
    min-height: 300px;
  }

  .parent-command-queue {
    grid-template-columns: 1fr;
  }

  .parent-command-queue span {
    text-align: left;
  }

  .parent-week-checks {
    grid-template-columns: 1fr;
  }

  .parent-command-copy div,
  .parent-voice-actions {
    grid-template-columns: 1fr;
  }

  .parent-command-copy i,
  .parent-voice-actions i {
    width: 2px;
    height: 22px;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .page-parent .parent-2026-section {
    padding-block: 28px;
  }

  .parent-assurance-panel,
  .parent-command-panel {
    padding: 12px;
    border-radius: 22px;
  }

  .parent-assurance-tab,
  .parent-week-tab {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .parent-assurance-tab strong,
  .parent-week-tab > em:last-child {
    grid-column: 1;
  }

  .parent-command-tab {
    min-height: 0;
  }

  .parent-trust-grid {
    grid-template-columns: 1fr;
  }

  .parent-trust-card,
  .parent-trust-hero,
  .parent-trust-system {
    grid-column: auto;
  }

  .parent-trust-flow {
    grid-template-columns: 1fr;
  }

  .parent-voice-panel {
    min-height: 0;
    padding: 22px;
  }

  .parent-voice-panel p {
    font-size: 1.18rem;
  }
}

.page-parent .parent-home-skin.home-redesign-entry,
.page-parent .parent-home-skin.home-advantage-redesign,
.page-parent .parent-home-skin.home-choice-section,
.page-parent .parent-home-skin.home-course-section,
.page-parent .parent-home-skin.home-stats-section {
  padding-top: clamp(26px, 4vw, 54px);
  padding-bottom: clamp(20px, 3.8vw, 48px);
  background:
    radial-gradient(circle at 12% 8%, rgba(54, 185, 176, 0.06), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 252, 252, 0.44));
}

.page-parent .parent-home-skin.home-redesign-entry {
  padding-top: clamp(18px, 3vw, 34px);
}

.page-parent .parent-home-skin .home-reference-shell,
.page-parent .parent-home-skin .home-quick-guide,
.page-parent .parent-home-skin .home-system-panel,
.page-parent .parent-home-skin .home-parent-tracker,
.page-parent .parent-home-skin .home-choice-band,
.page-parent .parent-home-skin .home-course-card,
.page-parent .parent-home-skin .home-stat-row {
  max-width: 1360px;
}

.page-parent .parent-home-skin .home-guide-intro h2,
.page-parent .parent-home-skin .home-system-copy h2,
.page-parent .parent-home-skin .home-section-head h2,
.page-parent .parent-home-skin .home-choice-copy h2,
.page-parent .parent-home-skin .home-course-section h2 {
  color: #202a36;
}

.page-parent .parent-home-skin .home-system-panel {
  min-height: clamp(460px, 45vw, 600px);
}

.page-parent .parent-home-skin .home-system-photo img {
  object-position: 68% center;
}

.page-parent .parent-home-skin .home-system-tablet img {
  object-position: center;
}

.page-parent .parent-home-skin .home-adv-card figure {
  min-height: 172px;
}

.page-parent .parent-home-skin .home-adv-card:nth-child(2) figure img {
  object-position: 62% 58%;
}

.page-parent .parent-home-skin .home-adv-card:nth-child(3) figure img {
  object-position: 72% 54%;
}

.page-parent .parent-home-skin .home-adv-card:nth-child(4) figure img {
  object-position: 56% 62%;
}

.page-parent .parent-home-skin .home-pain-card figure::after {
  background:
    linear-gradient(180deg, transparent 26%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.95) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 46%);
}

.page-parent .parent-home-skin .home-choice-band img {
  object-position: 60% center;
}

.page-parent .parent-home-skin .home-course-card:nth-child(1) .home-course-visual img {
  object-position: 54% 70%;
}

.page-parent .parent-home-skin .home-course-card:nth-child(2) .home-course-visual img {
  object-position: 58% 72%;
}

.page-parent .parent-home-skin.home-stats-section {
  padding-top: clamp(12px, 2vw, 24px);
  padding-bottom: clamp(18px, 3vw, 36px);
}

.page-parent .cta-parent {
  width: min(calc(100% - (var(--page-gutter) * 2)), 1360px);
  max-width: 1360px;
  min-height: 92px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  border-radius: 22px;
  background: linear-gradient(100deg, #31aaa1 0%, #64cbc5 42%, #f4a7b0 100%);
  box-shadow: 0 22px 58px rgba(49, 79, 90, 0.12);
}

@media (max-width: 680px) {
  .page-parent .parent-home-skin.home-redesign-entry,
  .page-parent .parent-home-skin.home-advantage-redesign,
  .page-parent .parent-home-skin.home-choice-section,
  .page-parent .parent-home-skin.home-course-section,
  .page-parent .parent-home-skin.home-stats-section {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

@media (min-width: 1440px) {
  .page-parent .page-guide {
    width: 74px;
    padding: 10px 9px;
    border-color: rgba(88, 197, 189, 0.26);
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 22px 54px rgba(49, 79, 90, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  .page-parent .page-guide:hover,
  .page-parent .page-guide:focus-within {
    width: 152px;
  }

  .page-parent .page-guide-dot {
    min-height: 38px;
  }

  .page-parent .page-guide-dot span {
    width: 32px;
    height: 32px;
    font-size: 0.62rem;
  }
}

.hero.hero-carousel {
  display: block;
  padding: 0;
  background: #f9fdff;
}

.hero.hero-carousel::after {
  content: none;
}

.hero-carousel-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-carousel .hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(480px, 1.14fr);
  align-items: center;
  padding: 58px var(--page-gutter) 42px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(2.2%, 0, 0) scale(0.992);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 760ms step-end;
  visibility: hidden;
}

.hero-carousel .hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.86), transparent 26rem),
    radial-gradient(circle at 86% 22%, rgba(116, 187, 225, 0.16), transparent 30rem);
  pointer-events: none;
}

.hero-carousel .hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms;
  visibility: visible;
}

.hero-carousel .hero-slide.page-home {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 39%, rgba(228, 246, 255, 0.8) 100%),
    radial-gradient(circle at 84% 22%, rgba(115, 185, 223, 0.22), transparent 22rem);
}

.hero-carousel .hero-slide.page-about,
.hero-carousel .hero-slide.page-system,
.hero-carousel .hero-slide.page-programs,
.hero-carousel .hero-slide.page-diagnosis,
.hero-carousel .hero-slide.page-progress {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 46%, rgba(231, 246, 255, 0.82) 100%),
    radial-gradient(circle at 88% 20%, rgba(114, 185, 223, 0.22), transparent 22rem),
    radial-gradient(circle at 12% 80%, rgba(88, 197, 189, 0.11), transparent 20rem);
}

.hero-carousel .hero-slide.page-coach {
  background: #fff;
}

.hero-carousel .hero-slide.page-coach::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -92px;
  left: -8%;
  z-index: 0;
  height: 168px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(64% 100% at 22% 30%, rgba(226, 249, 249, 0.9), transparent 66%),
    radial-gradient(58% 96% at 78% 38%, rgba(255, 238, 229, 0.84), transparent 70%);
  pointer-events: none;
}

.hero-carousel .hero-slide.page-parent {
  background:
    radial-gradient(900px 620px at 86% 8%, rgba(167, 211, 237, 0.78), rgba(224, 245, 252, 0.56) 48%, transparent 49%),
    linear-gradient(90deg, #fff 0%, #fff 42%, rgba(232, 248, 253, 0.68) 100%);
}

.hero-carousel .hero-slide .hero-content {
  position: relative;
  z-index: 4;
  max-width: clamp(540px, 41vw, 760px);
  transform: none;
}

.hero-carousel .hero-slide .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  pointer-events: none;
}

.hero-carousel .hero-slide .photo-card {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: auto;
  height: auto;
  min-width: min(100vw, calc(var(--hero-stage-height, 620px) * var(--hero-image-ratio, 1.555)));
  max-width: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-carousel .hero-slide .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 18%, rgba(255, 255, 255, 0.3) 34%, transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 68%, rgba(255, 255, 255, 0.38));
}

.hero-carousel .hero-slide.page-home .photo-card::after,
.hero-carousel .hero-slide.page-parent .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.84) 27%, rgba(255, 255, 255, 0.34) 48%, transparent 68%),
    linear-gradient(180deg, transparent 76%, rgba(255, 255, 255, 0.42));
}

.hero-carousel .hero-slide.page-progress .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.12) 28%, transparent 54%),
    linear-gradient(180deg, transparent 78%, rgba(255, 255, 255, 0.55));
}

.hero-carousel .hero-slide.page-coach .photo-card::after {
  background: none;
}

.hero-carousel .hero-slide .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(1.03) contrast(1.02);
  transform: none;
  animation: none;
}

.hero-carousel .hero-slide.page-coach .photo-card img {
  object-fit: contain;
  object-position: right bottom;
}

.hero-carousel .hero-slide .eyebrow {
  display: inline-flex;
}

.hero-carousel .hero-slide.page-home .eyebrow,
.hero-carousel .hero-slide.page-about .eyebrow,
.hero-carousel .hero-slide.page-programs .eyebrow,
.hero-carousel .hero-slide.page-progress .eyebrow,
.hero-carousel .hero-slide.page-diagnosis .eyebrow,
.hero-carousel .hero-slide.page-system .eyebrow,
.hero-carousel .hero-slide.page-coach .eyebrow,
.hero-carousel .hero-slide.page-parent .eyebrow {
  display: none;
}

.hero-carousel .hero-slide .micro-layer {
  z-index: 2;
}

@media (min-width: 941px) {
  .hero.hero-carousel {
    --hero-fit-vw: 52vw;
    --hero-min-height: 520px;
    --hero-max-height: 940px;
    --hero-image-ratio: 1.555;
    --hero-aspect-height: calc(100vw / var(--hero-image-ratio));
    --hero-vh-fit: calc(100svh - var(--header-height) - clamp(34px, 4.8vh, 64px));
    --hero-stage-height: clamp(var(--hero-min-height), min(var(--hero-fit-vw), var(--hero-vh-fit)), var(--hero-max-height));
    height: var(--hero-stage-height);
    min-height: var(--hero-stage-height);
  }

  .hero-carousel .hero-slide {
    grid-template-columns: minmax(540px, 48vw) 1fr;
    padding: clamp(46px, 5.2vw, 88px) clamp(46px, 6.8vw, 124px) clamp(38px, 4.8vw, 76px);
  }

  .hero-carousel .hero-slide .hero-content,
  .hero-carousel .hero-slide h1,
  .hero-carousel .hero-slide .hero-copy {
    max-width: clamp(560px, 42vw, 760px);
  }

  .hero-carousel .hero-slide.page-progress .hero-widget.one {
    top: clamp(68px, 9vw, 138px);
    right: clamp(320px, 38vw, 720px);
    bottom: auto;
    left: auto;
  }

  .hero-carousel .hero-slide.page-progress .hero-widget.two {
    top: clamp(72px, 9.5vw, 150px);
    right: clamp(40px, 7vw, 132px);
  }

  .hero-carousel .hero-slide.page-progress .hero-widget.three {
    right: clamp(70px, 10vw, 172px);
    bottom: clamp(58px, 8vw, 122px);
  }

  .hero-carousel .hero-slide.page-diagnosis .hero-widget.one {
    top: clamp(190px, 22vw, 330px);
    right: clamp(310px, 37vw, 690px);
    bottom: auto;
    left: auto;
  }

  .hero-carousel .hero-slide.page-diagnosis .hero-widget.two {
    top: clamp(86px, 10vw, 160px);
    right: clamp(46px, 7vw, 136px);
  }

  .hero-carousel .hero-slide.page-diagnosis .hero-widget.three {
    right: clamp(78px, 11vw, 190px);
    bottom: clamp(48px, 8vw, 118px);
  }
}

@media (min-width: 941px) and (max-width: 1199px) {
  .hero.hero-carousel {
    --hero-min-height: 460px;
    --hero-max-height: 620px;
  }

  .hero-carousel .hero-slide {
    grid-template-columns: minmax(390px, 46vw) 1fr;
    padding: 42px 52px 34px;
  }

  .hero-carousel .hero-slide .hero-content,
  .hero-carousel .hero-slide h1,
  .hero-carousel .hero-slide .hero-copy {
    max-width: 430px;
  }

  .hero-carousel .hero-slide h1 {
    font-size: 2.08rem;
    line-height: 1.08;
  }
}

@media (min-width: 1600px) {
  .hero.hero-carousel {
    --hero-min-height: 620px;
    --hero-max-height: 1080px;
  }

  .hero-carousel .hero-slide {
    grid-template-columns: minmax(720px, 46vw) 1fr;
    padding: clamp(46px, 5.2vw, 88px) clamp(96px, 7vw, 148px) clamp(42px, 4.8vw, 76px);
  }

  .hero-carousel .hero-slide .hero-content,
  .hero-carousel .hero-slide h1,
  .hero-carousel .hero-slide .hero-copy {
    max-width: clamp(620px, 42vw, 860px);
  }
}

@media (max-width: 940px) {
  .hero.hero-carousel {
    height: auto;
    min-height: 0;
  }

  .hero-carousel-stage {
    position: relative;
    min-height: 0;
  }

  .hero-carousel .hero-slide {
    position: relative;
    display: none;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 34px 22px 30px;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .hero-carousel .hero-slide.is-active {
    display: grid;
  }

  .hero-carousel .hero-slide .hero-visual {
    position: relative;
    inset: auto;
    min-height: 300px;
    margin-top: 22px;
  }

  .hero-carousel .hero-slide .photo-card {
    right: -22px;
    width: calc(100% + 22px);
    min-width: 0;
    height: 300px;
  }

  .hero-carousel .hero-slide .hero-widget,
  .hero-carousel .hero-slide .hero-preview-wall {
    display: none;
  }

}

@media (max-width: 520px) {
  .hero-carousel .hero-slide {
    padding: 28px 22px 34px;
  }

  .hero-carousel .hero-slide h1 {
    font-size: clamp(1.86rem, 9vw, 2.28rem);
    line-height: 1.12;
  }

  .hero-carousel .hero-slide .hero-title-main {
    font-size: 1.08em;
  }

  .hero-carousel .hero-slide .hero-title-sub {
    font-size: 0.74em;
  }

  .hero-carousel .hero-slide .hero-points {
    gap: 14px;
  }

  .hero-carousel .hero-slide .hero-point {
    width: calc(50% - 7px);
  }
}

/* Shared home footer, normalized across every page and viewport. */
.footer,
.footer.footer-home {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(34px, 4vw, 58px) var(--page-gutter) clamp(28px, 3.2vw, 44px);
  border-top: 1px solid rgba(216, 230, 232, 0.82);
  color: #66717c;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #fff 100%),
    radial-gradient(circle at 15% 0%, rgba(88, 197, 189, 0.1), transparent 30rem),
    radial-gradient(circle at 85% 15%, rgba(242, 127, 135, 0.08), transparent 28rem);
  font-size: clamp(0.78rem, 0.7vw, 0.88rem);
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(132px, 1fr));
  align-items: start;
  gap: clamp(18px, 2.2vw, 34px);
  width: min(100%, var(--content-max));
  margin: 0 auto;
}

.footer-brand,
.footer-group {
  min-width: 0;
}

.footer-brand p {
  max-width: 28rem;
  margin: 0;
  color: #5f6b76;
  font-weight: 600;
  line-height: 1.85;
}

.footer .brand {
  margin-bottom: 14px;
}

.footer h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(0.86rem, 0.78vw, 0.98rem);
  line-height: 1.3;
}

.footer p,
.footer a,
.footer-group span {
  margin-bottom: 8px;
  line-height: 1.55;
}

.footer a,
.footer-group span {
  width: fit-content;
  color: #5f6b76;
}

.footer-group span {
  display: block;
  font-weight: 700;
}

.footer a {
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.footer a:hover {
  color: var(--teal-strong);
  transform: translateX(2px);
}

.footer-bottom {
  --footer-bottom-text-size: 0.78rem;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  grid-column: 1 / -1;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(2px, 0.7vw, 10px);
  padding-top: clamp(14px, 1.3vw, 22px);
  border-top: 1px solid rgba(224, 235, 237, 0.88);
  font-size: var(--footer-bottom-text-size);
}

.footer-bottom > span {
  justify-self: start;
  color: #66727d;
  font-size: var(--footer-bottom-text-size);
  font-weight: 700;
  line-height: 1;
}

.footer-bottom .footer-legal {
  justify-self: center;
  font-size: var(--footer-bottom-text-size);
}

.footer-bottom .footer-legal a {
  font-size: var(--footer-bottom-text-size);
  line-height: 1;
}

.footer-legal,
.footer-social {
  flex-wrap: wrap;
}

.footer-social a {
  width: auto;
  min-width: 30px;
  height: 30px;
  margin: 0;
}

.footer-social {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  max-width: 100%;
  padding: 6px 7px 6px 14px;
  border: 1px solid rgba(215, 229, 232, 0.92);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 252, 0.92)),
    radial-gradient(circle at 18% 18%, rgba(88, 197, 189, 0.12), transparent 16rem);
  box-shadow:
    0 16px 34px rgba(49, 79, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.footer-social-label {
  color: #74818c;
  font-size: var(--footer-bottom-text-size);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.footer-social-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.footer-social .footer-social-link {
  --social-color: var(--teal-strong);
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #596773;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  font-size: 0;
  overflow: visible;
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.footer-social .footer-social-link::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 30%),
    var(--social-color);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.footer-social .footer-social-link::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  padding: 5px 8px;
  border: 1px solid rgba(218, 230, 233, 0.92);
  border-radius: 999px;
  color: #34404b;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(49, 79, 90, 0.1);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.footer-social .footer-social-link svg {
  display: block;
  width: 19px;
  height: 19px;
}

.footer-social .social-line svg {
  width: 23px;
  height: 23px;
}

.footer-social .social-youtube svg,
.footer-social .social-threads svg {
  width: 21px;
  height: 21px;
}

.footer-social .social-facebook {
  --social-color: #1877f2;
}

.footer-social .social-instagram {
  --social-color: #d64b8a;
}

.footer-social .social-line {
  --social-color: #06c755;
}

.footer-social .social-youtube {
  --social-color: #ff0033;
}

.footer-social .social-tiktok {
  --social-color: #151923;
}

.footer-social .social-threads {
  --social-color: #111827;
}

.footer-social .footer-social-link:hover,
.footer-social .footer-social-link:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--social-color) 42%, #fff);
  background: var(--social-color);
  box-shadow:
    0 12px 22px rgba(49, 79, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
}

.footer-social .footer-social-link:hover::before,
.footer-social .footer-social-link:focus-visible::before {
  opacity: 0.18;
  transform: scale(1);
}

.footer-social .footer-social-link:hover::after,
.footer-social .footer-social-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer-social .footer-social-link:focus-visible {
  outline: 3px solid rgba(88, 197, 189, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1439px) {
  .footer-shell {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(150px, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    max-width: 46rem;
  }
}

@media (max-width: 760px) {
  .footer,
  .footer.footer-home {
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .footer-shell {
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
  }

  .footer-brand,
  .footer-bottom {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-bottom .footer-legal,
  .footer-social {
    justify-self: start;
  }

  .footer-social {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .footer-bottom {
    --footer-bottom-text-size: 0.68rem;
  }

  .footer-shell {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-group,
  .footer-bottom {
    grid-column: auto;
  }

  .footer-legal {
    gap: 12px;
  }

  .footer-social a {
    min-width: 28px;
    height: 28px;
  }

  .footer-social {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
  }

  .footer-social-label {
    padding-left: 2px;
  }

  .footer-social-links {
    width: 100%;
    justify-content: space-between;
    gap: 3px;
  }

  .footer-social .footer-social-link {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .footer-social .footer-social-link svg {
    width: 18px;
    height: 18px;
  }

  .footer-social .social-line svg {
    width: 22px;
    height: 22px;
  }

  .footer-social .footer-social-link::after {
    display: none;
  }
}

/* Premium International EdTech refresh */
:root {
  --ink: #172232;
  --muted: #5c6876;
  --line: #dbe8ec;
  --shadow: 0 24px 70px rgba(37, 72, 84, 0.11);
  --soft-shadow: 0 14px 34px rgba(37, 72, 84, 0.08);
}

.site-header {
  border-bottom-color: rgba(216, 231, 235, 0.78);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.site-nav {
  color: #2c3745;
  font-weight: 850;
}

.btn {
  min-height: 46px;
  font-weight: 920;
  box-shadow: 0 16px 34px rgba(49, 170, 161, 0.22);
}

.btn.secondary {
  border-color: rgba(44, 80, 96, 0.14);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(37, 72, 84, 0.07);
}

.page-main:not(.page-home) .hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(88, 197, 189, 0.1), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(115, 185, 223, 0.09), transparent 34rem),
    linear-gradient(135deg, #ffffff 0%, #f4fbfc 52%, #ffffff 100%);
}

.page-main:not(.page-home) .hero .photo-card {
  border: 1px solid rgba(212, 229, 233, 0.82);
  border-radius: clamp(24px, 2.4vw, 40px);
  box-shadow: 0 28px 90px rgba(35, 66, 80, 0.13);
}

.page-main:not(.page-home) .section-title {
  color: var(--ink);
  letter-spacing: 0;
}

.page-main:not(.page-home) .section-subtitle {
  color: var(--muted);
}

.page-home {
  --home-ink: #172232;
  --home-muted: #5c6876;
  --home-soft: #f5fafb;
  --home-teal: #25b8ad;
  --home-teal-rgb: 37 184 173;
  --home-coral: #f07180;
  --home-coral-rgb: 240 113 128;
  --home-sky: #4fa7dc;
  --home-sky-rgb: 79 167 220;
  --home-sand: #c79a62;
  --home-sand-rgb: 199 154 98;
  --premium-line: rgba(207, 226, 231, 0.82);
  --premium-glass: rgba(255, 255, 255, 0.78);
  --premium-shadow: 0 28px 90px rgba(35, 66, 80, 0.13);
  --premium-shadow-strong: 0 38px 110px rgba(28, 56, 76, 0.18);
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--home-teal-rgb) / 0.12), transparent 42rem),
    radial-gradient(circle at 88% 6%, rgba(var(--home-sky-rgb) / 0.1), transparent 40rem),
    linear-gradient(180deg, #fbfefe 0%, #f5fbfc 56%, #ffffff 100%);
}

.page-home .hero {
  border-bottom: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--home-teal-rgb) / 0.12), transparent 34rem),
    radial-gradient(circle at 88% 16%, rgba(var(--home-coral-rgb) / 0.09), transparent 38rem),
    linear-gradient(135deg, #ffffff 0%, #f3fbfc 48%, #ffffff 100%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  inset: auto 5vw 4vh auto;
  width: clamp(180px, 18vw, 340px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: conic-gradient(from 160deg, rgba(var(--home-teal-rgb) / 0.2), rgba(var(--home-sky-rgb) / 0.08), transparent 58%, rgba(var(--home-coral-rgb) / 0.12));
  filter: blur(10px);
  opacity: 0.52;
  pointer-events: none;
}

.page-home .hero .photo-card {
  border-radius: clamp(26px, 2.8vw, 42px);
  border: 1px solid rgba(212, 229, 233, 0.82);
  box-shadow: var(--premium-shadow-strong);
}

.page-home .hero .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 42%),
    linear-gradient(180deg, transparent 58%, rgba(246, 251, 252, 0.66));
}

.page-home .hero h1 {
  max-width: 12ch;
  color: var(--home-ink);
  letter-spacing: 0;
}

.page-home .hero-copy {
  max-width: 44rem;
  color: var(--home-muted);
  font-weight: 720;
}

.page-home .premium-home-section {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(72px, 8vh, 118px) var(--page-gutter);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 16%, rgba(var(--home-teal-rgb) / 0.08), transparent 36rem),
    radial-gradient(circle at 92% 12%, rgba(var(--home-sky-rgb) / 0.08), transparent 38rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 253, 0.9));
}

.page-home .premium-home-section:nth-of-type(even) {
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--home-coral-rgb) / 0.08), transparent 36rem),
    radial-gradient(circle at 8% 88%, rgba(var(--home-sand-rgb) / 0.07), transparent 34rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.9));
}

.page-home .premium-home-section::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 2vw, 34px) var(--page-gutter);
  z-index: -1;
  border: 1px solid rgba(213, 231, 235, 0.72);
  border-radius: clamp(30px, 3.2vw, 54px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.16)),
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.86), transparent 24rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.page-home .premium-home-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.34;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 97, 116, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 97, 116, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 74%);
}

.page-home .premium-home-shell,
.page-home .premium-conversion-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(340px, 0.76fr) minmax(560px, 1.24fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: center;
  width: 100%;
  max-width: min(1560px, calc(100vw - var(--page-gutter) * 2));
  margin: 0 auto;
}

.page-home .premium-home-shell.reverse {
  grid-template-columns: minmax(600px, 1.2fr) minmax(340px, 0.8fr);
}

.page-home .premium-home-shell.reverse .premium-home-copy {
  order: 2;
}

.page-home .premium-home-copy,
.page-home .premium-conversion-copy {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 1.8vw, 24px);
  min-width: 0;
}

.page-home .premium-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 7px 13px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--home-teal);
  box-shadow: 0 12px 30px rgba(32, 83, 91, 0.06);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.page-home .premium-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(var(--home-teal-rgb) / 0.1);
}

.page-home .premium-home-copy h2,
.page-home .premium-conversion-copy h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(2.45rem, 4.2vw, 4.9rem);
  font-weight: 950;
  line-height: 1.03;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-home .premium-home-copy p,
.page-home .premium-conversion-copy p {
  max-width: 44rem;
  margin: 0;
  color: var(--home-muted);
  font-size: clamp(1rem, 1.08vw, 1.22rem);
  font-weight: 720;
  line-height: 1.86;
}

.page-home .premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-home [data-premium-tilt] {
  transform:
    perspective(1200px)
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg))
    translate3d(var(--tilt-x, 0), var(--tilt-y, 0), 0);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.page-home [data-premium-tilt]:hover {
  box-shadow: var(--premium-shadow-strong);
}

.page-home .premium-problem-stage,
.page-home .premium-diagnosis-stage,
.page-home .premium-coach-stage,
.page-home .premium-plan-card,
.page-home .premium-problem-card,
.page-home .premium-value-row article,
.page-home .premium-proof-strip article,
.page-home .premium-test-steps article,
.page-home .premium-lead-form {
  border: 1px solid var(--premium-line);
  background:
    radial-gradient(circle at var(--pointer-x, 18%) var(--pointer-y, 12%), rgba(var(--home-teal-rgb) / 0.11), transparent 260px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(249, 253, 253, 0.76));
  box-shadow:
    0 24px 76px rgba(37, 72, 84, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.page-home .premium-problem-stage {
  position: relative;
  min-height: min(66vh, 660px);
  overflow: hidden;
  border-radius: clamp(28px, 3vw, 46px);
}

.page-home .premium-problem-stage figure,
.page-home .premium-product-photo,
.page-home .premium-coach-stage figure,
.page-home .premium-conversion-hero figure {
  margin: 0;
  overflow: hidden;
}

.page-home .premium-problem-stage figure,
.page-home .premium-problem-stage img,
.page-home .premium-product-photo,
.page-home .premium-product-photo img,
.page-home .premium-coach-stage figure,
.page-home .premium-coach-stage img,
.page-home .premium-conversion-hero figure,
.page-home .premium-conversion-hero figure img {
  width: 100%;
  height: 100%;
}

.page-home .premium-problem-stage img,
.page-home .premium-product-photo img,
.page-home .premium-coach-stage img,
.page-home .premium-conversion-hero figure img {
  display: block;
  object-fit: cover;
}

.page-home .premium-problem-stage::after,
.page-home .premium-coach-stage::after,
.page-home .premium-conversion-hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 54%, rgba(247, 252, 253, 0.56)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 44%);
}

.page-home .premium-floating-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 5px;
  width: min(220px, 44%);
  padding: 16px 18px;
  border: 1px solid rgba(218, 233, 236, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 52px rgba(30, 62, 78, 0.13);
  backdrop-filter: blur(16px);
  animation: premiumFloat 5.6s ease-in-out infinite;
}

.page-home .premium-floating-card strong {
  color: var(--home-ink);
  font-size: 0.98rem;
  font-weight: 950;
}

.page-home .premium-floating-card span {
  color: var(--home-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.55;
}

.page-home .premium-floating-card.card-a {
  top: 8%;
  left: 7%;
}

.page-home .premium-floating-card.card-b {
  right: 7%;
  bottom: 9%;
  animation-delay: -1.7s;
}

.page-home .premium-problem-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.page-home .premium-problem-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 210px;
  padding: clamp(20px, 2.1vw, 28px);
  border-radius: 28px;
}

.page-home .premium-problem-card b,
.page-home .premium-loop-node b,
.page-home .premium-plan-card b,
.page-home .premium-test-steps b {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--home-teal), #159d96);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(var(--home-teal-rgb) / 0.22);
}

.page-home .premium-problem-card .icon,
.page-home .premium-loop-node .icon,
.page-home .premium-plan-card .icon,
.page-home .premium-proof-strip .icon {
  width: 46px;
  height: 46px;
}

.page-home .premium-problem-card strong,
.page-home .premium-plan-card h3,
.page-home .premium-plan-card strong,
.page-home .premium-test-steps strong {
  color: var(--home-ink);
  line-height: 1.25;
  font-weight: 950;
}

.page-home .premium-problem-card strong {
  font-size: 1.36rem;
}

.page-home .premium-problem-card span,
.page-home .premium-plan-card p,
.page-home .premium-test-steps span {
  color: var(--home-muted);
  font-size: 0.92rem;
  line-height: 1.68;
  font-weight: 720;
}

.page-home .premium-loop-board {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  min-width: 0;
}

.page-home .premium-loop-orbit {
  position: absolute;
  inset: 16% 8% auto auto;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, transparent 0 44%, rgba(var(--home-teal-rgb) / 0.09) 45% 46%, transparent 47%),
    conic-gradient(from 90deg, rgba(var(--home-teal-rgb) / 0.14), rgba(var(--home-sky-rgb) / 0.06), rgba(var(--home-coral-rgb) / 0.12), rgba(var(--home-teal-rgb) / 0.14));
  filter: blur(1px);
  opacity: 0.72;
  pointer-events: none;
  animation: premiumOrbit 18s linear infinite;
}

.page-home .premium-loop-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.page-home .premium-loop-node {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-height: 230px;
  padding: 18px;
  border: 1px solid rgba(212, 229, 233, 0.86);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 54px rgba(37, 72, 84, 0.08);
  transform: translateY(0);
}

.page-home .premium-loop-node::after {
  content: "";
  position: absolute;
  top: 42px;
  right: -17px;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--home-teal-rgb) / 0.45), rgba(var(--home-coral-rgb) / 0.3));
}

.page-home .premium-loop-node:last-child::after {
  display: none;
}

.page-home .premium-loop-node strong {
  color: var(--home-ink);
  font-size: 1.08rem;
  line-height: 1.25;
  font-weight: 950;
}

.page-home .premium-loop-node span {
  color: var(--home-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 760;
}

.page-home .premium-loop-node.is-active {
  border-color: rgba(var(--home-teal-rgb) / 0.38);
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--home-teal-rgb) / 0.15), transparent 180px),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 26px 70px rgba(37, 72, 84, 0.13);
  transform: translateY(-6px);
}

.page-home .premium-loop-node.is-active b {
  animation: premiumPulse 1.8s ease-in-out infinite;
}

.page-home .premium-loop-panel-wrap {
  position: relative;
  min-height: 176px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--premium-line);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(242, 250, 251, 0.82)),
    radial-gradient(circle at 12% 12%, rgba(var(--home-sky-rgb) / 0.12), transparent 220px);
  box-shadow: var(--premium-shadow);
}

.page-home .premium-loop-panel {
  display: grid;
  gap: 8px;
}

.page-home .premium-loop-panel[hidden] {
  display: none;
}

.page-home .premium-loop-panel span,
.page-home .premium-report-panels span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--home-teal-rgb) / 0.1);
  color: var(--home-teal);
  font-size: 0.76rem;
  font-weight: 950;
}

.page-home .premium-loop-panel strong,
.page-home .premium-report-panels strong {
  color: var(--home-ink);
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  line-height: 1.2;
  font-weight: 950;
}

.page-home .premium-loop-panel p,
.page-home .premium-report-panels p {
  max-width: 54rem;
  margin: 0;
  color: var(--home-muted);
  font-weight: 730;
  line-height: 1.76;
}

.page-home .premium-value-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-home .premium-value-row article {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 20px;
  border-radius: 26px;
}

.page-home .premium-value-row strong {
  color: var(--home-ink);
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 950;
}

.page-home .premium-value-row span {
  color: var(--home-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  font-weight: 720;
}

.page-home .premium-diagnosis-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.58fr);
  gap: 18px;
  min-height: min(68vh, 680px);
  padding: clamp(16px, 2vw, 28px);
  border-radius: clamp(30px, 3vw, 48px);
}

.page-home .premium-product-photo {
  min-height: 420px;
  border-radius: 30px;
  background: #eff7f8;
}

.page-home .premium-report-card {
  display: grid;
  gap: 16px;
  align-content: center;
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(215, 231, 235, 0.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 8%, rgba(var(--home-coral-rgb) / 0.12), transparent 220px),
    rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
}

.page-home .premium-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-home .premium-report-head span {
  color: var(--home-ink);
  font-weight: 950;
}

.page-home .premium-report-head b {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 53%, transparent 54%),
    conic-gradient(var(--home-teal) 0 78%, #e4eef1 78% 100%);
  color: var(--home-ink);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 950;
}

.page-home .premium-report-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.page-home .premium-report-tabs button {
  min-height: 42px;
  border: 1px solid rgba(214, 230, 234, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--home-muted);
  cursor: pointer;
  font-weight: 900;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

.page-home .premium-report-tabs button.is-active,
.page-home .premium-report-tabs button:hover {
  border-color: rgba(var(--home-teal-rgb) / 0.36);
  background: rgba(var(--home-teal-rgb) / 0.1);
  color: var(--home-teal);
  transform: translateY(-1px);
}

.page-home .premium-report-panels article {
  display: grid;
  gap: 8px;
}

.page-home .premium-report-panels article[hidden] {
  display: none;
}

.page-home .premium-report-visual {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 116px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(242, 249, 250, 0.82)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(132, 158, 168, 0.08) 23px);
}

.page-home .premium-report-visual i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, var(--home-teal), rgba(var(--home-sky-rgb) / 0.7));
  box-shadow: 0 12px 28px rgba(var(--home-teal-rgb) / 0.18);
}

.page-home .premium-plan-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.page-home .premium-plan-card {
  display: grid;
  gap: 14px;
  min-height: min(62vh, 560px);
  padding: clamp(24px, 3vw, 42px);
  border-radius: 36px;
}

.page-home .premium-plan-card.coral {
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--home-coral-rgb) / 0.14), transparent 230px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 249, 0.8));
}

.page-home .premium-plan-card.coral b {
  background: linear-gradient(135deg, var(--home-coral), #ec6070);
  box-shadow: 0 14px 28px rgba(var(--home-coral-rgb) / 0.2);
}

.page-home .premium-plan-card h3 {
  margin: 8px 0 0;
  font-size: clamp(1.55rem, 2.6vw, 2.5rem);
}

.page-home .premium-plan-card strong {
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
}

.page-home .premium-plan-card > div {
  display: flex;
  flex-wrap: wrap;
  align-self: end;
  gap: 8px;
  padding-top: 8px;
}

.page-home .premium-plan-card > div span {
  padding: 7px 11px;
  border: 1px solid rgba(var(--home-teal-rgb) / 0.18);
  border-radius: 999px;
  background: rgba(var(--home-teal-rgb) / 0.08);
  color: var(--home-teal);
  font-size: 0.78rem;
  font-weight: 900;
}

.page-home .premium-plan-card.coral > div span {
  border-color: rgba(var(--home-coral-rgb) / 0.2);
  background: rgba(var(--home-coral-rgb) / 0.08);
  color: var(--home-coral);
}

.page-home .premium-coach-stage {
  position: relative;
  display: grid;
  min-height: min(66vh, 650px);
  overflow: hidden;
  border-radius: clamp(30px, 3vw, 48px);
}

.page-home .premium-coach-note {
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: 3;
  display: grid;
  gap: 6px;
  width: min(390px, calc(100% - 36px));
  padding: 20px 22px;
  border: 1px solid rgba(215, 231, 235, 0.82);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 24px 70px rgba(28, 56, 76, 0.16);
  backdrop-filter: blur(16px);
}

.page-home .premium-coach-note strong {
  color: var(--home-ink);
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 950;
}

.page-home .premium-coach-note span {
  color: var(--home-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 740;
}

.page-home .premium-proof-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-home .premium-proof-strip article {
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 156px;
  padding: 20px;
  border-radius: 26px;
}

.page-home .premium-proof-strip strong {
  color: var(--home-ink);
  font-size: clamp(1.7rem, 2.8vw, 2.65rem);
  line-height: 1;
  font-weight: 950;
}

.page-home .premium-proof-strip span {
  color: var(--home-muted);
  font-size: 0.9rem;
  font-weight: 780;
}

.page-home .premium-conversion-section {
  background:
    radial-gradient(circle at 12% 14%, rgba(var(--home-teal-rgb) / 0.12), transparent 38rem),
    radial-gradient(circle at 86% 18%, rgba(var(--home-coral-rgb) / 0.1), transparent 36rem),
    linear-gradient(180deg, #f9fdfd 0%, #ffffff 100%);
}

.page-home .premium-conversion-shell {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
}

.page-home .premium-conversion-hero {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
  min-height: min(74vh, 760px);
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid var(--premium-line);
  border-radius: clamp(32px, 3.4vw, 54px);
  background:
    radial-gradient(circle at 24% 10%, rgba(var(--home-teal-rgb) / 0.11), transparent 280px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(249, 253, 253, 0.76));
  box-shadow: var(--premium-shadow);
}

.page-home .premium-conversion-hero figure {
  position: relative;
  min-height: min(62vh, 600px);
  border: 1px solid rgba(214, 230, 234, 0.86);
  border-radius: clamp(26px, 3vw, 42px);
  background: #edf7f8;
  box-shadow: 0 24px 80px rgba(37, 72, 84, 0.11);
}

.page-home .premium-test-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.page-home .premium-test-steps article {
  display: grid;
  gap: 8px;
  min-height: 148px;
  padding: 18px;
  border-radius: 24px;
}

.page-home .premium-lead-form {
  width: min(920px, 100%);
  justify-self: center;
  min-height: auto;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 36px;
  animation: premiumLeadIn 260ms ease both;
}

.page-home .premium-lead-form[hidden] {
  display: none;
}

.page-home .premium-lead-form .home-conversion-form-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-home .premium-lead-form .home-conversion-form-body > span,
.page-home .premium-lead-form .home-conversion-form-body > h3,
.page-home .premium-lead-form .home-conversion-field:nth-of-type(4),
.page-home .premium-lead-form .btn,
.page-home .premium-lead-form .home-form-note {
  grid-column: 1 / -1;
}

.page-home .premium-lead-form .home-conversion-success {
  min-height: 330px;
}

.page-home .btn {
  min-height: 50px;
  border-radius: 999px;
  font-weight: 950;
}

.page-home .btn:not(.secondary) {
  background: linear-gradient(135deg, #28bdb1, #1a9e98);
  box-shadow: 0 18px 40px rgba(var(--home-teal-rgb) / 0.22);
}

.page-home .btn.coral {
  background: linear-gradient(135deg, #ff8f7d, var(--home-coral));
  box-shadow: 0 18px 42px rgba(var(--home-coral-rgb) / 0.24);
}

.page-home .btn.secondary {
  border-color: rgba(44, 80, 96, 0.14);
  background: rgba(255, 255, 255, 0.76);
  color: #233242;
  box-shadow: 0 12px 30px rgba(37, 72, 84, 0.07);
}

@keyframes premiumFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes premiumOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes premiumPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--home-teal-rgb) / 0.22);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--home-teal-rgb) / 0);
  }
}

@keyframes premiumLeadIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 1600px) {
  :root {
    --content-max: 1480px;
  }

  .page-home .premium-home-shell,
  .page-home .premium-conversion-shell {
    max-width: min(1680px, calc(100vw - var(--page-gutter) * 2));
  }

  .page-home .premium-home-copy h2,
  .page-home .premium-conversion-copy h2 {
    font-size: clamp(4.2rem, 3.45vw, 5.25rem);
  }
}

@media (max-width: 1439px) {
  .page-home .premium-loop-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .premium-loop-node::after {
    display: none;
  }

  .page-home .premium-problem-grid,
  .page-home .premium-proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1439px) {
  .page-home .premium-home-section {
    min-height: auto;
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .page-home .premium-home-shell,
  .page-home .premium-home-shell.reverse,
  .page-home .premium-conversion-hero {
    grid-template-columns: 1fr;
  }

  .page-home .premium-home-shell.reverse .premium-home-copy {
    order: 0;
  }

  .page-home .premium-home-copy h2,
  .page-home .premium-conversion-copy h2 {
    max-width: 15ch;
  }

  .page-home .premium-problem-stage,
  .page-home .premium-coach-stage,
  .page-home .premium-conversion-hero figure {
    min-height: 470px;
  }

  .page-home .premium-diagnosis-stage {
    grid-template-columns: 1fr;
  }

  .page-home .premium-product-photo {
    min-height: 430px;
  }

  .page-home .premium-plan-card {
    min-height: 420px;
  }
}

@media (max-width: 900px) {
  .page-home .premium-home-section {
    padding: 46px 18px;
  }

  .page-home .premium-home-section::before {
    inset: 12px;
    border-radius: 30px;
  }

  .page-home .premium-home-shell,
  .page-home .premium-conversion-shell {
    max-width: 100%;
    gap: 24px;
  }

  .page-home [data-premium-tilt],
  .page-home [data-premium-tilt]:hover {
    transform: none !important;
  }

  .page-home .premium-home-copy h2,
  .page-home .premium-conversion-copy h2 {
    font-size: clamp(2.15rem, 9.5vw, 3.6rem);
  }

  .page-home .premium-problem-grid,
  .page-home .premium-loop-track,
  .page-home .premium-value-row,
  .page-home .premium-plan-stage,
  .page-home .premium-proof-strip,
  .page-home .premium-test-steps,
  .page-home .premium-lead-form .home-conversion-form-body {
    grid-template-columns: 1fr;
  }

  .page-home .premium-problem-stage,
  .page-home .premium-coach-stage,
  .page-home .premium-conversion-hero figure,
  .page-home .premium-product-photo {
    min-height: 340px;
  }

  .page-home .premium-loop-node,
  .page-home .premium-problem-card,
  .page-home .premium-plan-card,
  .page-home .premium-test-steps article {
    min-height: auto;
  }

  .page-home .premium-floating-card {
    position: relative;
    inset: auto;
    width: min(320px, calc(100% - 36px));
    margin: -76px auto 0;
  }

  .page-home .premium-floating-card.card-b {
    display: none;
  }

  .page-home .premium-report-tabs {
    grid-template-columns: 1fr;
  }

  .page-home .premium-coach-note {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 28px);
    margin: -92px auto 16px;
  }

  .page-home .premium-conversion-hero {
    min-height: auto;
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .page-home .premium-home-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .page-home .premium-home-section::before,
  .page-home .premium-home-section::after {
    display: none;
  }

  .page-home .premium-kicker {
    font-size: 0.72rem;
  }

  .page-home .motion-home .shine {
    display: none;
  }

  .page-home .premium-home-copy p,
  .page-home .premium-conversion-copy p {
    font-size: 0.94rem;
    line-height: 1.76;
  }

  .page-home .premium-actions,
  .page-home .premium-actions .btn,
  .page-home .premium-lead-form .btn,
  .page-home .premium-lead-form .home-conversion-success div {
    width: 100%;
  }

  .page-home .premium-problem-stage,
  .page-home .premium-diagnosis-stage,
  .page-home .premium-coach-stage,
  .page-home .premium-conversion-hero,
  .page-home .premium-lead-form,
  .page-home .premium-plan-card {
    border-radius: 24px;
  }

  .page-home .premium-problem-stage,
  .page-home .premium-coach-stage,
  .page-home .premium-conversion-hero figure,
  .page-home .premium-product-photo {
    min-height: 280px;
  }

  .page-home .premium-report-card {
    padding: 16px;
    border-radius: 22px;
  }

  .page-home .premium-report-head b {
    width: 66px;
    height: 66px;
  }
}

/* Ideal reference direction: refined white EdTech home */
.site-header {
  min-height: 72px;
}

.site-header .btn.small {
  min-height: 42px;
  padding-inline: 22px;
  background: linear-gradient(135deg, #1c7f7a, #0f6665);
  box-shadow: 0 12px 30px rgba(20, 105, 101, 0.2);
}

.page-home {
  --ideal-ink: #10233c;
  --ideal-teal: #157e7a;
  --ideal-teal-rgb: 21 126 122;
  --ideal-coral: #ee7b86;
  --ideal-line: #dfeaec;
  --ideal-muted: #64707e;
  --ideal-wash: #f6fbfb;
  background: #fff;
}

.page-home .hero {
  height: clamp(500px, 58vh, 640px);
  min-height: clamp(500px, 58vh, 640px);
  grid-template-columns: minmax(350px, 0.88fr) minmax(520px, 1.12fr);
  padding: clamp(34px, 4.8vh, 58px) var(--page-gutter) clamp(28px, 4.2vh, 46px);
  border-bottom: 1px solid rgba(218, 229, 231, 0.68);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(247, 251, 250, 0.56) 100%),
    radial-gradient(circle at 70% 18%, rgba(var(--ideal-teal-rgb) / 0.08), transparent 28rem);
}

.page-home .hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 38%, transparent 64%);
}

.page-home .hero::after {
  display: none;
}

.page-home .hero-content {
  max-width: 620px;
  padding-left: clamp(0px, 2vw, 28px);
}

.page-home .hero .eyebrow {
  display: none;
}

.page-home .hero h1 {
  max-width: 13ch;
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;
  font-size: clamp(2.75rem, 4.1vw, 4.55rem);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: 0;
}

.page-home .hero-title-main,
.page-home .hero-title-sub {
  font-size: 1em;
  line-height: 1.24;
}

.page-home .hero h1 .teal,
.page-home .hero h1 .accent {
  color: var(--ideal-teal);
  font-weight: 720;
}

.page-home .hero-copy {
  max-width: 34rem;
  margin-top: 18px;
  color: #3f4a56;
  font-size: clamp(0.95rem, 0.92vw, 1.05rem);
  font-weight: 650;
  line-height: 1.9;
}

.page-home .hero-actions {
  margin-top: 22px;
}

.page-home .hero-social {
  margin-top: 18px;
}

.page-home .hero-social img {
  width: 104px;
  height: 32px;
  object-fit: cover;
  border-radius: 999px;
}

.page-home .hero-social span {
  color: #697581;
  font-size: 0.82rem;
  font-weight: 760;
}

.page-home .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  align-self: stretch;
  min-width: 0;
  pointer-events: none;
}

.page-home .hero .photo-card {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  min-height: 420px;
  width: min(62vw, 940px);
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-home .hero .photo-card img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(0.98);
}

.page-home .hero .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.64), transparent 46%),
    linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 0.8));
}

.page-home .hero-widget {
  border: 1px solid rgba(218, 229, 231, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 46px rgba(35, 66, 80, 0.12);
  backdrop-filter: blur(12px);
}

.page-home .hero-widget.one {
  top: 4%;
  right: 6%;
  width: 190px;
}

.page-home .hero-widget.two {
  top: 43%;
  right: 4%;
  width: 210px;
}

.page-home .hero-widget.three {
  right: 9%;
  bottom: 9%;
  width: min(330px, 44%);
}

.page-home .hero-widget .widget-label {
  color: #46525e;
}

.page-home .hero-widget .widget-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.page-home .hero-widget .widget-list li {
  color: #586573;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.45;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-content > .eyebrow,
  .page-home .hero-content > h1,
  .page-home .hero-copy,
  .page-home .hero-actions,
  .page-home .hero-social {
    animation: homeHeroCopyIn 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .page-home .hero-content > h1 {
    animation-delay: 70ms;
  }

  .page-home .hero-copy {
    animation-delay: 150ms;
  }

  .page-home .hero-actions {
    animation-delay: 230ms;
  }

  .page-home .hero-social {
    animation-delay: 310ms;
  }

  .page-home .hero .photo-card {
    animation: homeHeroImageIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .page-home .hero-widget {
    animation: homeWidgetIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .page-home .hero-widget.one {
    animation-delay: 420ms;
  }

  .page-home .hero-widget.two {
    animation-delay: 520ms;
  }

  .page-home .hero-widget.three {
    animation-delay: 620ms;
  }
}

@keyframes homeHeroCopyIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes homeHeroImageIn {
  from {
    opacity: 0;
    filter: saturate(0.88) contrast(0.96) blur(10px);
    transform: translate3d(32px, 0, 0) scale(1.025);
  }
  to {
    opacity: 1;
    filter: saturate(0.94) contrast(0.98) blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes homeWidgetIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--hero-widget-x, 0), var(--hero-widget-y, 0), 0) scale(1);
  }
}

.page-home .ideal-home-flow {
  --home-section-y-tight: clamp(38px, 3.3vw, 54px);
  --home-section-y: clamp(48px, 4.4vw, 72px);
  --home-section-y-roomy: clamp(62px, 5.6vw, 92px);
  --home-major-gap: clamp(38px, 5vw, 78px);
  --home-cluster-gap: clamp(22px, 2.7vw, 38px);
  --home-card-gap: clamp(14px, 1.6vw, 22px);
  background:
    linear-gradient(180deg, #fff 0%, #fff 68%, #f8fcfc 100%);
}

.page-home .ideal-home-section {
  position: relative;
  padding: var(--home-section-y) var(--page-gutter);
  overflow: hidden;
  border-bottom: 1px solid rgba(220, 230, 232, 0.68);
  background: #fff;
}

.page-home .ideal-home-section:nth-child(even) {
  background:
    radial-gradient(circle at 92% 10%, rgba(var(--ideal-teal-rgb) / 0.055), transparent 30rem),
    #fff;
}

.page-home .ideal-diagnosis-section {
  padding-block: var(--home-section-y-roomy) var(--home-section-y);
}

.page-home .ideal-shell {
  width: 100%;
  max-width: min(1290px, calc(100vw - var(--page-gutter) * 2));
  margin: 0 auto;
}

.page-home .ideal-diagnosis-row,
.page-home .ideal-engine-shell,
.page-home .ideal-proof-shell,
.page-home .ideal-final-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
  gap: var(--home-major-gap);
  align-items: center;
}

.page-home .ideal-copy,
.page-home .ideal-engine-copy,
.page-home .ideal-outcome-copy,
.page-home .ideal-proof-copy,
.page-home .ideal-final-copy {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.page-home .ideal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ideal-teal);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.page-home .ideal-kicker::before,
.page-home .ideal-kicker::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.page-home .ideal-copy h2,
.page-home .ideal-engine-copy h2,
.page-home .ideal-outcome-copy h2,
.page-home .ideal-proof-copy h2,
.page-home .ideal-final-copy h2,
.page-home .ideal-center-head h2 {
  margin: 0;
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;
  font-size: clamp(2.05rem, 3.15vw, 3.85rem);
  font-weight: 680;
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-home .ideal-copy h2 span,
.page-home .ideal-engine-copy h2 span,
.page-home .ideal-outcome-copy h2 span {
  color: var(--ideal-teal);
}

.page-home .ideal-copy p,
.page-home .ideal-engine-copy p,
.page-home .ideal-outcome-copy p,
.page-home .ideal-proof-copy p,
.page-home .ideal-final-copy p {
  max-width: 35rem;
  margin: 0;
  color: var(--ideal-muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.85;
}

.page-home .ideal-device-stage,
.page-home .ideal-engine-visual,
.page-home .ideal-proof-photo,
.page-home .ideal-final-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(218, 229, 231, 0.86);
  border-radius: 24px;
  background: #f7fbfb;
  box-shadow: 0 24px 72px rgba(38, 70, 82, 0.1);
}

.page-home .ideal-device-stage {
  min-height: 330px;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.page-home .ideal-device-stage figure,
.page-home .ideal-engine-visual figure,
.page-home .ideal-proof-photo,
.page-home .ideal-final-photo {
  margin: 0;
}

.page-home .ideal-device-stage img,
.page-home .ideal-engine-visual img,
.page-home .ideal-proof-photo img,
.page-home .ideal-final-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .ideal-device-stage img {
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(30, 58, 70, 0.12));
}

.page-home .ideal-diagnosis-showcase {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 229, 231, 0.82);
  border-radius: 28px;
  background: #f7fbfb;
  box-shadow: 0 26px 72px rgba(38, 70, 82, 0.1);
}

.page-home .ideal-diagnosis-showcase figure {
  aspect-ratio: 1672 / 941;
}

.page-home .ideal-diagnosis-showcase img {
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  filter: none;
}

.page-home .ideal-floating-check {
  position: absolute;
  right: 5%;
  top: 12%;
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 16px;
  border: 1px solid rgba(218, 229, 231, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: #52616e;
  box-shadow: 0 18px 42px rgba(38, 70, 82, 0.12);
  font-size: 0.8rem;
  font-weight: 820;
}

.page-home .ideal-floating-check strong {
  color: var(--ideal-teal);
  font-size: 2.1rem;
  line-height: 1;
}

.page-home .ideal-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-card-gap);
  margin-top: var(--home-cluster-gap);
}

.page-home .ideal-pain-showcase {
  display: block;
  width: 100%;
  margin: clamp(18px, 2vw, 28px) 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-home .ideal-pain-showcase img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1962 / 801;
  object-fit: contain;
}

.page-home .ideal-pain-card,
.page-home .ideal-plan-card,
.page-home .ideal-stat-card,
.page-home .ideal-benefit-grid article {
  border: 1px solid rgba(218, 229, 231, 0.88);
  border-radius: 20px;
  background:
    radial-gradient(circle at var(--pointer-x, 20%) var(--pointer-y, 0%), rgba(var(--ideal-teal-rgb) / 0.08), transparent 210px),
    #fff;
  box-shadow: 0 18px 46px rgba(38, 70, 82, 0.08);
}

.page-home .ideal-pain-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 206px;
  padding: 24px;
}

.page-home .ideal-pain-card.coral {
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 113, 128, 0.12), transparent 200px),
    #fff;
}

.page-home .ideal-pain-card .icon,
.page-home .ideal-stat-card .icon,
.page-home .ideal-benefit-grid .icon {
  width: 54px;
  height: 54px;
}

.page-home .ideal-pain-card h3,
.page-home .ideal-plan-card h3 {
  margin: 8px 0 0;
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;
  font-size: 1.38rem;
  font-weight: 680;
  line-height: 1.25;
}

.page-home .ideal-pain-card p,
.page-home .ideal-plan-card p,
.page-home .ideal-plan-card li,
.page-home .ideal-stat-card span,
.page-home .ideal-benefit-grid span {
  margin: 0;
  color: var(--ideal-muted);
  font-size: 0.9rem;
  font-weight: 660;
  line-height: 1.68;
}

.page-home .ideal-pain-card a {
  align-self: end;
  color: var(--ideal-teal);
  font-size: 0.82rem;
  font-weight: 850;
}

.page-home .ideal-outcome-section {
  padding-block: var(--home-section-y-roomy);
  background:
    radial-gradient(circle at 88% 18%, rgba(96, 178, 222, 0.12), transparent 26rem),
    radial-gradient(circle at 8% 72%, rgba(var(--ideal-teal-rgb) / 0.1), transparent 24rem),
    linear-gradient(180deg, #fbfefe 0%, #fff 100%);
}

.page-home .ideal-outcome-shell {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(620px, 1.28fr);
  gap: clamp(42px, 5.6vw, 86px);
  align-items: center;
}

.page-home .ideal-outcome-copy .premium-actions {
  margin-top: 6px;
}

.page-home .ideal-outcome-board {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(205, 225, 229, 0.9);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 253, 0.86)),
    radial-gradient(circle at var(--pointer-x, 68%) var(--pointer-y, 12%), rgba(var(--ideal-teal-rgb) / 0.13), transparent 250px);
  box-shadow: 0 28px 86px rgba(29, 67, 83, 0.11);
  isolation: isolate;
}

.page-home .ideal-outcome-board::before {
  content: "";
  position: absolute;
  inset: 22px 44px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--ideal-teal-rgb) / 0.32), transparent);
  transform: translateY(56px);
  z-index: -1;
}

.page-home .ideal-outcome-board::after {
  content: "";
  position: absolute;
  top: 77px;
  left: 52px;
  z-index: -1;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--ideal-teal-rgb) / 0.78), transparent);
  filter: drop-shadow(0 0 12px rgba(var(--ideal-teal-rgb) / 0.34));
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .ideal-outcome-board::after {
    animation: outcomeCurrent 4.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
}

.page-home .ideal-outcome-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.page-home .ideal-outcome-node {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 148px;
  padding: 18px 12px;
  border: 1px solid rgba(214, 227, 230, 0.92);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 252, 0.9));
  color: var(--ideal-muted);
  box-shadow: 0 16px 36px rgba(31, 72, 86, 0.07);
  cursor: pointer;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    color 220ms ease;
}

.page-home .ideal-outcome-node:hover,
.page-home .ideal-outcome-node:focus-visible,
.page-home .ideal-outcome-node.is-active {
  transform: translateY(-6px);
  border-color: rgba(var(--ideal-teal-rgb) / 0.48);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--ideal-teal-rgb) / 0.16), transparent 120px),
    #fff;
  box-shadow: 0 22px 52px rgba(31, 72, 86, 0.13);
  color: var(--ideal-ink);
}

.page-home .ideal-outcome-node:focus-visible {
  outline: 3px solid rgba(var(--ideal-teal-rgb) / 0.28);
  outline-offset: 3px;
}

.page-home .ideal-outcome-node em {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(var(--ideal-teal-rgb) / 0.12);
  color: var(--ideal-teal);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 900;
}

.page-home .ideal-outcome-node em::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .ideal-outcome-node.is-active em::after {
    animation: outcomePulse 1.9s ease-out infinite;
  }
}

.page-home .ideal-outcome-node:nth-child(2) em,
.page-home .ideal-outcome-node:nth-child(4) em {
  background: rgba(240, 113, 128, 0.13);
  color: var(--coral);
}

.page-home .ideal-outcome-node:nth-child(3) em,
.page-home .ideal-outcome-node:nth-child(5) em {
  background: rgba(96, 178, 222, 0.13);
  color: #438fc7;
}

.page-home .ideal-outcome-node strong {
  color: inherit;
  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;
  font-size: 1.15rem;
  font-weight: 720;
  line-height: 1.2;
}

.page-home .ideal-outcome-node span {
  color: var(--ideal-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.page-home .ideal-outcome-panels {
  position: relative;
  margin-top: 20px;
  min-height: 174px;
}

.page-home .ideal-outcome-panel {
  display: grid;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(214, 227, 230, 0.88);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(var(--ideal-teal-rgb) / 0.08), transparent 58%),
    rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: idealOutcomeIn 260ms ease both;
}

.page-home .ideal-outcome-panel[hidden] {
  display: none;
}

.page-home .ideal-outcome-panel span {
  width: max-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--ideal-teal-rgb) / 0.12);
  color: var(--ideal-teal);
  font-size: 0.74rem;
  font-weight: 900;
}

.page-home .ideal-outcome-panel h3 {
  max-width: 34rem;
  margin: 0;
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;
  font-size: clamp(1.45rem, 2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.28;
}

.page-home .ideal-outcome-panel p {
  max-width: 42rem;
  margin: 0;
  color: var(--ideal-muted);
  font-size: 0.92rem;
  font-weight: 680;
  line-height: 1.75;
}

.page-home .ideal-outcome-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.page-home .ideal-outcome-proof article {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid rgba(214, 227, 230, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.page-home .ideal-outcome-proof strong {
  color: var(--ideal-teal);
  font-size: clamp(1.25rem, 1.6vw, 1.8rem);
  font-weight: 780;
  line-height: 1;
}

.page-home .ideal-outcome-proof span {
  color: var(--ideal-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

@keyframes idealOutcomeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes outcomeCurrent {
  0%,
  18% {
    opacity: 0;
    transform: translateX(0);
  }
  28%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(min(515px, 66vw));
  }
}

@keyframes outcomePulse {
  0% {
    opacity: 0.34;
    transform: scale(0.82);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.32);
  }
}

.page-home .ideal-engine-section {
  padding-block: var(--home-section-y-roomy) var(--home-section-y);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(var(--ideal-teal-rgb) / 0.055), transparent 48%),
    linear-gradient(180deg, #fff, #fff);
}

.page-home .ideal-engine-shell {
  grid-template-columns: minmax(440px, 1fr) minmax(500px, 0.95fr);
}

.page-home .ideal-step-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: 10px;
  border: 1px solid rgba(218, 229, 231, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(var(--ideal-teal-rgb) / 0.045), transparent 66%),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 18px 48px rgba(38, 70, 82, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-home .ideal-step-strip article {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 16px 18px;
  border: 0;
  border-radius: 15px;
  background: transparent;
}

.page-home .ideal-step-strip article + article {
  border-left: 1px solid rgba(218, 229, 231, 0.68);
}

.page-home .ideal-step-strip .icon {
  width: 44px;
  height: 44px;
}

.page-home .ideal-step-strip strong {
  color: var(--ideal-ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.page-home .ideal-step-strip span {
  color: var(--ideal-muted);
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.5;
}

.page-home .ideal-engine-visual {
  min-height: 390px;
}

.page-home .ideal-engine-visual img {
  min-height: 390px;
}

.page-home .ideal-report-card {
  position: absolute;
  right: 24px;
  top: 24px;
  width: min(260px, calc(100% - 48px));
  padding: 20px;
  border: 1px solid rgba(218, 229, 231, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 50px rgba(38, 70, 82, 0.14);
  backdrop-filter: blur(14px);
}

.page-home .ideal-report-card > span {
  color: #52616e;
  font-size: 0.78rem;
  font-weight: 900;
}

.page-home .ideal-report-card div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 12px;
  color: var(--ideal-teal);
}

.page-home .ideal-report-card strong {
  font-size: 2.5rem;
  line-height: 1;
}

.page-home .ideal-report-card em {
  color: #667381;
  font-style: normal;
  font-weight: 850;
}

.page-home .ideal-report-card b {
  margin-left: auto;
  color: var(--ideal-teal);
  font-size: 0.82rem;
}

.page-home .ideal-report-card ul {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.page-home .ideal-report-card li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 8px;
  color: #566370;
  font-size: 0.74rem;
  font-weight: 780;
}

.page-home .ideal-report-card i {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ideal-teal) var(--w), #e9f0f1 var(--w));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .ideal-report-card i {
    animation: reportBarGrow 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .page-home .ideal-report-card li:nth-child(2) i {
    animation-delay: 120ms;
  }

  .page-home .ideal-report-card li:nth-child(3) i {
    animation-delay: 220ms;
  }
}

@keyframes reportBarGrow {
  from {
    filter: saturate(0.82);
    transform: scaleX(0.24);
  }

  to {
    filter: saturate(1);
    transform: scaleX(1);
  }
}

.page-home .ideal-report-card p {
  margin: 0;
  color: #667381;
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.55;
}

.page-home .ideal-center-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto clamp(26px, 4vw, 44px);
  text-align: center;
}

.page-home .ideal-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.08fr;
  gap: var(--home-card-gap);
}

.page-home .ideal-programs-section {
  padding-block: var(--home-section-y) var(--home-section-y-roomy);
}

.page-home .ideal-plan-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 13px;
  min-height: 244px;
  padding: 24px;
}

.page-home .ideal-plan-card.coral {
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 113, 128, 0.13), transparent 210px),
    #fff;
}

.page-home .ideal-plan-card.plain {
  background:
    linear-gradient(90deg, rgba(var(--ideal-teal-rgb) / 0.045), transparent 62%),
    #fff;
}

.page-home .ideal-plan-card .icon {
  width: 66px;
  height: 66px;
}

.page-home .ideal-plan-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .ideal-plan-card li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--ideal-teal);
  font-weight: 900;
}

.page-home .ideal-plan-card .btn {
  align-self: end;
  margin-top: auto;
}

.page-home .ideal-programs-showcase-section {
  overflow: hidden;
  padding-block: clamp(56px, 5.2vw, 86px);
  background:
    radial-gradient(circle at 5% 18%, rgba(var(--ideal-teal-rgb) / 0.08), transparent 280px),
    radial-gradient(circle at 94% 0%, rgba(16, 132, 125, 0.055), transparent 320px),
    linear-gradient(180deg, #fff 0%, rgba(250, 254, 254, 0.96) 100%);
}

.page-home .ideal-programs-showcase-shell {
  display: grid;
  gap: clamp(14px, 1.25vw, 22px);
  max-width: min(1760px, calc(100vw - (var(--page-gutter) * 2)));
}

.page-home .ideal-programs-showcase-head {
  margin-bottom: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  justify-items: center;
  text-align: center;
}

.page-home .ideal-programs-showcase-head h2 {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(2.35rem, 3.45vw, 4.15rem);
  line-height: 1.12;
}

.page-home .ideal-programs-heading-accent {
  display: block;
  width: min(100%, 100px);
  height: auto;
  margin-top: -2px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(19, 170, 160, 0.08));
  pointer-events: none;
}

.page-home .ideal-programs-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.5vw, 26px);
  align-items: stretch;
  justify-self: center;
  width: 90%;
}

.page-home .ideal-programs-showcase-card,
.page-home .ideal-programs-trust-strip {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
  transition:
    transform 220ms ease;
}

.page-home .ideal-programs-showcase-card:nth-child(2) {
  border-color: transparent;
}

.page-home .ideal-programs-showcase-card:hover,
.page-home .ideal-programs-trust-strip:hover {
  transform: translateY(-4px);
}

.page-home .ideal-programs-showcase-card img,
.page-home .ideal-programs-trust-strip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-home .ideal-programs-trust-strip img {
  height: auto;
  object-fit: contain;
}

.page-home .ideal-programs-trust-strip {
  justify-self: center;
  width: 90%;
}

.page-home .ideal-proof-section {
  padding-block: var(--home-section-y-tight);
  background: #fff;
}

.page-home .ideal-proof-shell {
  display: block;
  max-width: min(1680px, calc(100vw - var(--page-gutter) * 2));
}

.page-home .ideal-proof-art {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.page-home .ideal-proof-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1983 / 793;
  object-fit: contain;
}

.page-home .ideal-proof-copy {
  align-content: center;
  gap: 20px;
}

.page-home .ideal-proof-copy h2 {
  max-width: 8.8em;
  font-size: clamp(2.4rem, 3.65vw, 3.45rem);
  line-height: 1.28;
}

.page-home .ideal-proof-copy p {
  max-width: 26rem;
}

.page-home .ideal-proof-photo {
  min-height: 0;
  aspect-ratio: 1.42 / 1;
  align-self: center;
  border-radius: 24px;
}

.page-home .ideal-proof-photo img {
  height: 100%;
  object-fit: cover;
}

.page-home .ideal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 20px);
  align-self: center;
}

.page-home .ideal-stat-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 170px;
  padding: 22px 16px;
  text-align: center;
  border-radius: 22px;
}

.page-home .ideal-stat-card strong {
  color: var(--ideal-teal);
  font-size: clamp(2.15rem, 3.25vw, 3.35rem);
  line-height: 1;
  font-weight: 700;
}

.page-home .ideal-final-section {
  padding-block: var(--home-section-y-roomy);
  background: #fff;
}

.page-home .ideal-final-shell {
  grid-template-columns: minmax(360px, 0.82fr) minmax(480px, 1fr);
}

.page-home .ideal-final-photo {
  min-height: 292px;
}

.page-home .ideal-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(218, 229, 231, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(var(--ideal-teal-rgb) / 0.045), rgba(255, 255, 255, 0.74));
  box-shadow:
    0 16px 42px rgba(38, 70, 82, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-home .ideal-benefit-grid article {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  justify-items: start;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 92px;
  padding: 14px 12px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.page-home .ideal-benefit-grid article + article {
  border-left: 1px solid rgba(218, 229, 231, 0.68);
}

.page-home .ideal-benefit-grid .icon {
  grid-row: span 2;
  width: 44px;
  height: 44px;
}

.page-home .ideal-benefit-grid strong {
  color: var(--ideal-ink);
  font-size: 1rem;
  font-weight: 900;
}

.page-home .ideal-lead-form {
  grid-column: 1 / -1;
  width: min(900px, 100%);
  margin: 10px auto 0;
}

@media (min-width: 1600px) {
  .page-home .hero,
  .page-home .ideal-home-section {
    --page-gutter: 90px;
  }

  .page-home .ideal-shell {
    max-width: min(1480px, calc(100vw - var(--page-gutter) * 2));
  }

  .page-home .hero {
    height: 620px;
    min-height: 620px;
  }
}

@media (max-width: 1439px) {
  .site-nav {
    gap: 16px;
    font-size: 0.88rem;
  }

  .page-home .hero,
  .page-home .ideal-diagnosis-row,
  .page-home .ideal-engine-shell,
  .page-home .ideal-outcome-shell,
  .page-home .ideal-proof-shell,
  .page-home .ideal-final-shell {
    grid-template-columns: 1fr;
  }

  .page-home .hero .photo-card {
    min-height: 360px;
  }

  .page-home .ideal-step-strip,
  .page-home .ideal-outcome-track,
  .page-home .ideal-pain-grid,
  .page-home .ideal-stat-grid,
  .page-home .ideal-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .ideal-outcome-board::before {
    display: none;
  }

  .page-home .ideal-outcome-board::after {
    display: none;
  }

  .page-home .ideal-plan-grid {
    grid-template-columns: 1fr;
  }

  .page-home .ideal-programs-showcase-grid {
    grid-template-columns: 1fr;
  }

  .page-home .ideal-programs-showcase-section {
    padding-block: clamp(54px, 13vw, 76px);
  }

  .page-home .ideal-programs-showcase-head h2 {
    white-space: normal;
    font-size: clamp(2.1rem, 9vw, 3.35rem);
  }

  .page-home .ideal-programs-showcase-shell {
    gap: 20px;
    max-width: min(100%, calc(100vw - 32px));
  }

  .page-home .ideal-programs-showcase-card,
  .page-home .ideal-programs-trust-strip {
    border-radius: 0;
  }

  .page-home .ideal-programs-trust-strip {
    aspect-ratio: auto;
  }

  .page-home .ideal-programs-trust-strip img {
    height: auto;
    object-fit: contain;
  }

  .page-home .ideal-step-strip article + article,
  .page-home .ideal-benefit-grid article + article {
    border-left: 0;
  }

  .page-home .ideal-step-strip article:nth-child(even),
  .page-home .ideal-benefit-grid article:nth-child(even) {
    border-left: 1px solid rgba(218, 229, 231, 0.68);
  }

  .page-home .ideal-step-strip article:nth-child(n + 3),
  .page-home .ideal-benefit-grid article:nth-child(n + 3) {
    border-top: 1px solid rgba(218, 229, 231, 0.68);
  }
}

@media (max-width: 900px) {
  .site-header {
    min-height: auto;
  }

  .site-nav {
    display: none;
  }

  .page-home .hero {
    height: auto;
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .page-home .hero h1 {
    font-size: clamp(2.28rem, 9.7vw, 3.35rem);
  }

  .page-home .hero .photo-card {
    position: relative;
    inset: auto;
    height: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 290px;
    border-radius: 22px;
    overflow: hidden;
  }

  .page-home .hero-visual {
    position: relative;
    inset: auto;
    min-height: 0;
    pointer-events: auto;
  }

  .page-home .hero-widget {
    display: none;
  }

  .page-home .ideal-home-section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-home .ideal-device-stage,
  .page-home .ideal-engine-visual,
  .page-home .ideal-proof-photo,
  .page-home .ideal-final-photo {
    min-height: 280px;
  }

  .page-home .ideal-diagnosis-showcase {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .page-home .ideal-home-flow {
    --home-section-y-tight: 34px;
    --home-section-y: 38px;
    --home-section-y-roomy: 44px;
    --home-cluster-gap: 20px;
    --home-card-gap: 12px;
  }

  .page-home .hero,
  .page-home .ideal-home-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .page-home .ideal-home-section {
    padding-top: var(--home-section-y);
    padding-bottom: var(--home-section-y);
  }

  .page-home .hero-content {
    padding-left: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .page-home .hero-actions,
  .page-home .premium-actions {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    flex-wrap: wrap;
  }

  .page-home .hero-actions .btn,
  .page-home .premium-actions .btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .page-home .hero .photo-card {
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    min-height: 258px;
  }

  .page-home .hero-social {
    align-items: flex-start;
  }

  .page-home .ideal-copy h2,
  .page-home .ideal-engine-copy h2,
  .page-home .ideal-outcome-copy h2,
  .page-home .ideal-proof-copy h2,
  .page-home .ideal-final-copy h2,
  .page-home .ideal-center-head h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .page-home .ideal-step-strip,
  .page-home .ideal-outcome-track,
  .page-home .ideal-outcome-proof,
  .page-home .ideal-pain-grid,
  .page-home .ideal-stat-grid,
  .page-home .ideal-benefit-grid {
    grid-template-columns: 1fr;
  }

  .page-home .ideal-outcome-board {
    padding: 16px;
    border-radius: 22px;
  }

  .page-home .ideal-outcome-track {
    gap: 8px;
  }

  .page-home .ideal-outcome-node {
    min-height: 78px;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 5px 10px;
    padding: 10px 12px;
    text-align: left;
  }

  .page-home .ideal-outcome-node em {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
  }

  .page-home .ideal-outcome-node strong {
    font-size: 1.02rem;
  }

  .page-home .ideal-outcome-node span {
    grid-column: 2;
  }

  .page-home .ideal-outcome-panels {
    min-height: 0;
    margin-top: 12px;
  }

  .page-home .ideal-outcome-panel {
    gap: 8px;
    padding: 16px;
  }

  .page-home .ideal-outcome-panel h3 {
    font-size: clamp(1.25rem, 7vw, 1.55rem);
  }

  .page-home .ideal-outcome-proof article {
    padding: 12px;
  }

  .page-home .ideal-step-strip {
    padding: 6px;
  }

  .page-home .ideal-step-strip article {
    min-height: auto;
    padding: 14px;
  }

  .page-home .ideal-step-strip article:nth-child(even),
  .page-home .ideal-benefit-grid article:nth-child(even) {
    border-left: 0;
  }

  .page-home .ideal-step-strip article:nth-child(n + 2),
  .page-home .ideal-benefit-grid article:nth-child(n + 2) {
    border-top: 1px solid rgba(218, 229, 231, 0.68);
  }

  .page-home .ideal-pain-card,
  .page-home .ideal-plan-card,
  .page-home .ideal-stat-card,
  .page-home .ideal-benefit-grid article {
    border-radius: 18px;
  }

  .page-home .ideal-pain-card,
  .page-home .ideal-plan-card {
    min-height: auto;
    padding: 20px;
  }

  .page-home .ideal-benefit-grid {
    padding: 6px;
  }

  .page-home .ideal-benefit-grid article {
    min-height: 82px;
    padding: 12px;
  }

  .page-home .ideal-report-card {
    position: relative;
    inset: auto;
    width: calc(100% - 28px);
    margin: -82px auto 16px;
  }

  .page-home .ideal-floating-check {
    display: none;
  }
}

/* Unified cross-page premium skin: align inner pages with the refined home direction */
.page-main {
  --ideal-ink: #10233c;
  --ideal-teal: #157e7a;
  --ideal-teal-rgb: 21 126 122;
  --ideal-coral: #ee7b86;
  --ideal-sky: #66b7de;
  --ideal-line: #dfeaec;
  --ideal-muted: #64707e;
  --ideal-shadow: 0 24px 70px rgba(38, 70, 82, 0.09);
  --ideal-shadow-strong: 0 32px 88px rgba(38, 70, 82, 0.14);
  --depth-near-y: 0px;
  --depth-mid-y: 0px;
  --depth-far-y: 0px;
  --depth-pointer-x: 0px;
  --depth-pointer-y: 0px;
  --depth-rotate: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 10%, rgba(var(--ideal-teal-rgb) / 0.055), transparent 34rem),
    linear-gradient(180deg, #fff 0%, #fff 62%, #f8fcfc 100%);
}

.page-main > :not(.site-depth-field) {
  position: relative;
  z-index: 1;
}

.site-depth-field {
  position: fixed;
  inset: 72px 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.78;
  contain: strict;
}

.site-depth-field span {
  position: absolute;
  display: block;
  border-radius: 999px;
  transform-style: preserve-3d;
  will-change: transform;
}

.depth-node {
  width: 9px;
  height: 9px;
  background: rgba(var(--ideal-teal-rgb) / 0.34);
  box-shadow:
    0 0 0 10px rgba(var(--ideal-teal-rgb) / 0.055),
    0 0 48px rgba(var(--ideal-teal-rgb) / 0.2);
}

.depth-node-a {
  top: 18%;
  left: 9%;
  transform: translate3d(var(--depth-pointer-x), calc(var(--depth-near-y) + var(--depth-pointer-y)), 0);
}

.depth-node-b {
  top: 42%;
  right: 13%;
  background: rgba(238, 123, 134, 0.28);
  box-shadow:
    0 0 0 12px rgba(238, 123, 134, 0.055),
    0 0 48px rgba(238, 123, 134, 0.14);
  transform: translate3d(calc(0px - var(--depth-pointer-x)), calc(var(--depth-mid-y) - var(--depth-pointer-y)), 0);
}

.depth-node-c {
  bottom: 18%;
  left: 48%;
  background: rgba(102, 183, 222, 0.32);
  transform: translate3d(var(--depth-pointer-x), calc(var(--depth-far-y) + var(--depth-pointer-y)), 0);
}

.depth-orbit {
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(var(--ideal-teal-rgb) / 0.12);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.72), transparent 34%),
    radial-gradient(circle at 60% 70%, rgba(var(--ideal-teal-rgb) / 0.08), transparent 40%);
  filter: blur(0.2px);
}

.depth-orbit-a {
  top: 8%;
  right: -7rem;
  transform: translate3d(calc(0px - var(--depth-pointer-x)), var(--depth-far-y), 0) rotateX(64deg) rotateZ(calc(22deg + var(--depth-rotate)));
}

.depth-orbit-b {
  bottom: 4%;
  left: -9rem;
  width: 30rem;
  height: 30rem;
  border-color: rgba(102, 183, 222, 0.1);
  transform: translate3d(var(--depth-pointer-x), var(--depth-mid-y), 0) rotateX(62deg) rotateZ(calc(-18deg - var(--depth-rotate)));
}

.page-main [data-premium-tilt] {
  transform:
    perspective(1250px)
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg))
    translate3d(var(--tilt-x, 0), var(--tilt-y, 0), 0);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.page-main [data-premium-tilt]:hover {
  border-color: rgba(var(--ideal-teal-rgb) / 0.28);
  box-shadow: var(--ideal-shadow-strong);
}

.page-main [data-premium-tilt].has-premium-tilt {
  --pointer-x: 50%;
  --pointer-y: 50%;
}

.page-main [data-premium-tilt].has-premium-tilt::before {
  background-position: var(--pointer-x) var(--pointer-y);
}

.page-main :is(
  .about-ref-team-card,
  .about-ref-news-card,
  .about-ref-role-card,
  .p122-why-grid article,
  .p122-proof-grid article,
  .p122-feedback-grid article,
  .faq-ref-category,
  .faq-ref-side-card,
  .faq-ref-concern,
  .trust-metric,
  .choice-feature
) {
  transition:
    translate 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease;
}

.page-main :is(
  .about-ref-team-card,
  .about-ref-news-card,
  .about-ref-role-card,
  .p122-why-grid article,
  .p122-proof-grid article,
  .p122-feedback-grid article,
  .faq-ref-category,
  .faq-ref-side-card,
  .faq-ref-concern,
  .trust-metric,
  .choice-feature
):hover {
  translate: 0 -3px;
  filter: saturate(1.02);
  box-shadow: 0 22px 52px rgba(38, 70, 82, 0.11);
}

.page-main :is(.icon, .faq-ref-category img, .p122-why-grid span, .p122-proof-grid span) {
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 220ms ease,
    box-shadow 220ms ease;
}

.page-main :is(a, button, article, details):hover > .icon,
.page-main :is(a, button, article):hover :is(.faq-ref-category img, .p122-why-grid span) {
  transform: translateY(-2px) scale(1.035);
}

.page-main:not(.page-home) .hero {
  height: clamp(560px, 64vh, 700px);
  min-height: clamp(560px, 64vh, 700px);
  grid-template-columns: minmax(350px, 0.9fr) minmax(520px, 1.1fr);
  padding: clamp(36px, 4.8vh, 58px) var(--page-gutter) clamp(30px, 4.2vh, 48px);
  border-bottom: 1px solid rgba(218, 229, 231, 0.68);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(247, 251, 250, 0.56) 100%),
    radial-gradient(circle at 72% 18%, rgba(var(--ideal-teal-rgb) / 0.08), transparent 28rem);
}

.page-main:not(.page-home) .hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.76) 34%, transparent 64%),
    linear-gradient(180deg, transparent 74%, rgba(255, 255, 255, 0.62));
}

.page-main:not(.page-home) .hero::after {
  display: none;
}

.page-main:not(.page-home) .hero-content {
  z-index: 4;
  max-width: min(680px, 54vw);
  padding-left: clamp(0px, 2vw, 28px);
}

.page-main:not(.page-home) .hero-taste-badge,
.page-main:not(.page-home) .hero-flow-command {
  display: none;
}

.page-main:not(.page-home) .hero .eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ideal-teal);
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.page-main:not(.page-home) .hero .eyebrow::before,
.page-main:not(.page-home) .hero .eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.page-main:not(.page-home) .hero h1 {
  max-width: min(11.8em, 680px);
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;
  font-size: clamp(2.55rem, 3.55vw, 4.05rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

.page-main:not(.page-home) .hero-title-main,
.page-main:not(.page-home) .hero-title-sub {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 1em;
  line-height: 1.2;
}

@media (min-width: 901px) {
  .page-main:not(.page-home) .hero-title-main,
  .page-main:not(.page-home) .hero-title-sub {
    white-space: nowrap;
  }
}

.page-about .hero h1,
.page-diagnosis .hero h1,
.page-coach .hero h1,
.page-parent .hero h1 {
  max-width: min(12.4em, 720px);
}

.page-system .hero h1,
.page-programs .hero h1,
.page-progress .hero h1,
.page-pricing .hero h1 {
  max-width: min(10.8em, 640px);
}

.page-main:not(.page-home) .hero h1 .teal,
.page-main:not(.page-home) .hero h1 .accent {
  font-weight: 720;
}

.page-main:not(.page-home) .hero h1 .teal {
  color: var(--ideal-teal);
}

.page-main:not(.page-home) .hero h1 .accent {
  color: var(--ideal-coral);
}

.page-main:not(.page-home) .hero-copy {
  max-width: 40rem;
  margin-top: 18px;
  color: #3f4a56;
  font-size: clamp(0.95rem, 0.92vw, 1.05rem);
  font-weight: 650;
  line-height: 1.86;
}

.page-main:not(.page-home) .hero-actions {
  margin-top: 22px;
}

.page-main:not(.page-home) .hero-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  max-width: min(640px, 100%);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 3vw, 34px);
}

.page-main:not(.page-home) .hero-point {
  display: grid;
  gap: 8px;
  width: clamp(122px, 12vw, 170px);
  color: var(--ideal-ink);
  font-size: 0.82rem;
  font-weight: 760;
}

.page-main:not(.page-home) .hero-point .icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 14px 34px rgba(38, 70, 82, 0.06);
}

.page-main:not(.page-home) .hero-point strong {
  font-size: 0.9rem;
  font-weight: 900;
}

.page-main:not(.page-home) .hero-point span {
  color: var(--ideal-muted);
  line-height: 1.55;
}

.page-main:not(.page-home) .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  pointer-events: none;
}

.page-main:not(.page-home) .photo-card {
  position: absolute;
  inset: 0 0 0 auto;
  pointer-events: auto;
  width: min(62vw, 940px) !important;
  min-width: 0 !important;
  height: 100% !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-main:not(.page-home) .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.83) 29%, rgba(255, 255, 255, 0.34) 50%, transparent 70%),
    linear-gradient(180deg, transparent 76%, rgba(255, 255, 255, 0.48));
}

.page-main:not(.page-home) .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.96) contrast(0.98);
  animation: none;
  transform: none;
}

.page-main:not(.page-home) .hero-widget {
  pointer-events: auto;
  border: 1px solid rgba(218, 229, 231, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 46px rgba(35, 66, 80, 0.12);
  backdrop-filter: blur(12px);
}

.page-main:not(.page-home) .hero-widget strong {
  color: var(--ideal-teal);
}

.page-main:not(.page-home) .taste-loop-strip {
  max-width: min(1290px, calc(100vw - var(--page-gutter) * 2));
  margin: clamp(28px, 3.4vw, 44px) auto 10px;
  padding: 18px;
  border: 1px solid rgba(218, 229, 231, 0.86);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--pointer-x, 20%) var(--pointer-y, 0%), rgba(var(--ideal-teal-rgb) / 0.08), transparent 260px),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--ideal-shadow);
  backdrop-filter: blur(16px);
}

.page-main:not(.page-home) .taste-loop-copy strong,
.page-main:not(.page-home) .section-title,
.page-main:not(.page-home) .lens-copy h2,
.page-main:not(.page-home) :is(.about-interactive-section, .programs-compare-section, .diagnosis-process-section, .coach-reference-section, .progress-command-section, .system-showcase, .parent-2026-section) h2 {
  color: var(--ideal-ink);
  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;
  letter-spacing: 0;
}

.page-main:not(.page-home) .section {
  padding: clamp(38px, 4.4vw, 66px) var(--page-gutter);
  border-bottom: 1px solid rgba(220, 230, 232, 0.66);
  background:
    radial-gradient(circle at 90% 8%, rgba(var(--ideal-teal-rgb) / 0.045), transparent 30rem),
    #fff;
}

.page-main:not(.page-home) .section:nth-of-type(even) {
  background:
    radial-gradient(circle at 10% 12%, rgba(102, 183, 222, 0.055), transparent 28rem),
    #fff;
}

.page-main:not(.page-home) .section::after,
.page-main:not(.page-home) .taste-loop-strip::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(var(--ideal-teal-rgb) / 0.1);
  border-radius: 30px;
  opacity: 0;
  transform: translate3d(0, 8px, -1px);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.page-main:not(.page-home) .section.is-depth-current::after,
.page-main:not(.page-home) .taste-loop-strip.is-depth-current::after {
  opacity: 0.52;
  transform: translate3d(0, 0, -1px);
}

.page-main:not(.page-home) .section-title {
  font-size: clamp(2rem, 3vw, 3.35rem);
  font-weight: 680;
  line-height: 1.25;
  text-align: center;
}

.page-main:not(.page-home) .section-title::before,
.page-main:not(.page-home) .section-title::after {
  display: none !important;
}

.page-main:not(.page-home) .section-subtitle,
.page-main:not(.page-home) .lens-copy p,
.page-main:not(.page-home) p {
  letter-spacing: 0;
}

.page-main:not(.page-home) :is(
  .lens-shell,
  .lens-detail,
  .lens-node,
  .taste-loop-step,
  .feature-panel,
  .advantage-card,
  .formula-card,
  .stat,
  .card,
  .metric-card,
  .plan-card,
  .program-plan,
  .programs-plan-tab,
  .programs-persona-card,
  .recommend-choice,
  .trust-metric,
  .diagnosis-process-step,
  .diagnosis-report-shell,
  .diagnosis-weakness-shell,
  .diagnosis-plan-shell,
  .diagnosis-partner-shell,
  .weakness-hotspot,
  .progress-metric-tile,
  .progress-insight-card,
  .progress-value-card,
  .coach-role-card,
  .coach-dual-card,
  .weekly-flow-card,
  .coach-reassure-card,
  .system-showcase-card,
  .system-data-card,
  .parent-assurance-panel,
  .parent-command-panel,
  .parent-trust-card,
  .parent-voice-card,
  .parent-week-device,
  .home-step-card,
  .home-system-panel,
  .home-adv-card,
  .home-course-card,
  .home-stat-tile
) {
  border-color: rgba(218, 229, 231, 0.88);
  border-radius: 22px;
  background:
    radial-gradient(circle at var(--pointer-x, 20%) var(--pointer-y, 0%), rgba(var(--ideal-teal-rgb) / 0.08), transparent 220px),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 52px rgba(38, 70, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.page-main:not(.page-home) :is(.lens-shell, .diagnosis-report-shell, .programs-compare-shell, .progress-command-shell, .coach-reference-shell, .system-showcase, .parent-2026-shell) {
  box-shadow: 0 24px 76px rgba(38, 70, 82, 0.1);
}

.page-main:not(.page-home) :is(.lens-shell, .programs-compare-shell, .diagnosis-report-shell, .progress-command-shell, .coach-reference-shell, .system-showcase, .parent-2026-shell) img {
  filter: saturate(0.96) contrast(0.99);
}

.page-main:not(.page-home) .cta-band {
  width: min(1290px, calc(100vw - var(--page-gutter) * 2));
  margin: clamp(28px, 4vw, 54px) auto;
  border: 1px solid rgba(218, 229, 231, 0.86);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(var(--ideal-teal-rgb) / 0.11), transparent 18rem),
    radial-gradient(circle at 88% 30%, rgba(238, 123, 134, 0.09), transparent 20rem),
    #fff;
  box-shadow: var(--ideal-shadow);
}

@media (min-width: 1600px) {
  .page-main:not(.page-home) .hero {
    height: 780px;
    min-height: 780px;
  }

  .page-main:not(.page-home) .taste-loop-strip {
    max-width: min(1480px, calc(100vw - var(--page-gutter) * 2));
  }
}

@media (max-width: 1439px) {
  .page-main:not(.page-home) .hero h1 {
    font-size: clamp(2.35rem, 5vw, 3.4rem);
  }

  .page-main:not(.page-home) .hero-points {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .site-depth-field {
    display: none;
  }

  .page-main:not(.page-home) .hero {
    height: auto !important;
    min-height: auto !important;
    grid-template-columns: 1fr;
    padding: 34px 18px 28px;
  }

  .page-main:not(.page-home) .hero-content {
    max-width: 100%;
    padding-left: 0;
  }

  .page-main:not(.page-home) .hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 8.65vw, 3rem);
  }

  .page-main:not(.page-home) .hero .eyebrow {
    margin-bottom: 12px;
  }

  .page-main:not(.page-home) .hero-copy {
    margin-top: 14px;
    line-height: 1.72;
  }

  .page-main:not(.page-home) .hero-actions {
    margin-top: 18px;
  }

  .page-main:not(.page-home) .hero-visual {
    position: relative;
    inset: auto;
    min-height: 0;
    margin-top: 24px;
    pointer-events: auto;
  }

  .page-main:not(.page-home) .photo-card {
    position: relative;
    inset: auto;
    width: 100% !important;
    height: auto !important;
    min-height: 258px;
    max-height: 340px;
    border-radius: 22px;
    overflow: hidden;
  }

  .page-main:not(.page-home) .photo-card img {
    min-height: 258px;
  }

  .page-main:not(.page-home) .hero-widget {
    display: none;
  }

  .page-main:not(.page-home) .hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .page-main:not(.page-home) .hero-point {
    justify-items: center;
    width: 100%;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid rgba(218, 229, 231, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    box-shadow: 0 12px 30px rgba(38, 70, 82, 0.07);
  }

  .page-main:not(.page-home) .hero-point .icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .page-main:not(.page-home) .hero-point strong {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .page-main:not(.page-home) .hero-point span {
    display: none;
  }

  .page-main:not(.page-home) .taste-loop-strip,
  .page-main:not(.page-home) .section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .page-main [data-premium-tilt],
  .page-main [data-premium-tilt]:hover {
    transform: none !important;
  }
}

@media (min-width: 1440px) {
  .site-scale-viewport[data-desktop-scale] > .site {
    --content-max: 1480px;
    --page-gutter: 86px;
  }

  .site-scale-viewport[data-desktop-scale] .brand {
    min-width: 176px;
  }

  .site-scale-viewport[data-desktop-scale] .brand-logo {
    width: 176px;
  }

  .site-scale-viewport.is-desktop-stage > .site {
    --content-max: 1480px;
    --page-gutter: 86px;
  }

  .site-scale-viewport.is-desktop-stage .brand {
    min-width: 176px;
  }

  .site-scale-viewport.is-desktop-stage .brand-logo {
    width: 176px;
  }

  .site-scale-viewport.is-desktop-stage .page-guide {
    display: block;
  }

  .site-scale-viewport.is-desktop-stage .page-home .hero {
    --page-gutter: 90px;
    height: 620px;
    min-height: 620px;
    grid-template-columns: minmax(350px, 0.88fr) minmax(520px, 1.12fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-home-section {
    --page-gutter: 90px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .hero {
    height: 780px;
    min-height: 780px;
    grid-template-columns: minmax(350px, 0.9fr) minmax(520px, 1.1fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .hero .photo-card,
  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .photo-card {
    width: 940px !important;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-shell {
    max-width: 1480px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-programs-showcase-shell {
    max-width: 1760px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-programs-showcase-grid,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-programs-trust-strip {
    width: 90%;
    justify-self: center;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-diagnosis-row,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-engine-shell,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-outcome-shell,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-proof-shell,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-final-shell {
    gap: 70px;
    grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-outcome-shell {
    grid-template-columns: minmax(360px, 0.72fr) minmax(620px, 1.28fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-engine-shell {
    grid-template-columns: minmax(440px, 1fr) minmax(500px, 0.95fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-proof-shell {
    display: block;
    max-width: 1680px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-final-shell {
    grid-template-columns: minmax(360px, 0.82fr) minmax(480px, 1fr);
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-pain-grid,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-step-strip,
  .site-scale-viewport.is-desktop-stage .page-home .ideal-outcome-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-outcome-track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-plan-grid {
    grid-template-columns: 1fr 1fr 1.08fr;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .taste-loop-strip {
    max-width: 1480px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .cta-band {
    width: 1290px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .premium-home-shell,
  .site-scale-viewport.is-desktop-stage .page-home .premium-conversion-shell {
    max-width: 1680px;
  }
}

.page-about {
  background:
    radial-gradient(circle at 14% 18%, rgba(72, 190, 184, 0.12), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(244, 128, 139, 0.1), transparent 30%),
    linear-gradient(180deg, #fbfdfc 0%, #f7fbfb 46%, #ffffff 100%);
}

.about-ref-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(620px, 1.05fr);
  align-items: center;
  min-height: 690px;
  height: 690px;
  padding: 72px 96px 58px;
  overflow: hidden;
  border-bottom: 1px solid rgba(17, 80, 85, 0.08);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 43%, rgba(246, 252, 251, 0.42) 100%),
    radial-gradient(circle at 70% 20%, rgba(255, 240, 232, 0.8), transparent 35%);
}

.about-ref-hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -38% -10%;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(68, 181, 176, 0.12), transparent 66%);
  pointer-events: none;
}

.about-ref-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.about-ref-eyebrow,
.about-ref-section-head span,
.about-ref-join-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #178f8a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.about-ref-eyebrow::before,
.about-ref-section-head span::before,
.about-ref-section-head span::after,
.about-ref-join-copy > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #42c2bd;
  box-shadow: 0 0 0 6px rgba(66, 194, 189, 0.12);
}

.about-ref-section-head span::after {
  background: #f37f8d;
  box-shadow: 0 0 0 6px rgba(243, 127, 141, 0.1);
}

.about-ref-copy h1 {
  margin: 26px 0 24px;
  color: #12253b;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.about-ref-copy h1 span {
  color: #238f89;
  font-size: 45px;
  line-height: 1.34;
}

.about-ref-copy p {
  max-width: 510px;
  margin: 0;
  color: #536375;
  font-size: 19px;
  font-weight: 650;
  line-height: 2;
}

.about-ref-pill-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 46px;
}

.about-ref-promise {
  min-height: 150px;
  padding: 24px 18px;
  text-align: center;
  border-right: 1px solid rgba(17, 80, 85, 0.1);
}

.about-ref-promise:last-child {
  border-right: 0;
}

.about-ref-promise .icon,
.about-ref-value-card .icon,
.about-ref-role-card .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: #16938d;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.98), rgba(221, 247, 245, 0.92));
  box-shadow: 0 16px 34px rgba(30, 120, 122, 0.13);
}

.about-ref-promise strong,
.about-ref-promise span {
  display: block;
}

.about-ref-promise strong {
  color: #26364a;
  font-size: 17px;
  font-weight: 850;
}

.about-ref-promise span {
  margin-top: 8px;
  color: #6d7a88;
  font-size: 13px;
  line-height: 1.65;
}

.about-ref-visual {
  position: relative;
  min-height: 560px;
  border-radius: 0 0 0 140px;
}

.about-ref-visual > img {
  position: absolute;
  inset: 0 -96px 0 0;
  width: calc(100% + 96px);
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) brightness(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.92) 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.92) 18%, #000 100%);
}

.about-ref-score-card,
.about-ref-trend-card,
.about-ref-ai-card {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(192, 220, 221, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 70px rgba(25, 65, 79, 0.14);
  backdrop-filter: blur(18px);
}

.about-ref-score-card {
  top: 32px;
  right: 44px;
  width: 218px;
  padding: 20px;
}

.about-ref-score-card small,
.about-ref-trend-card small {
  display: block;
  color: #647386;
  font-weight: 800;
}

.about-ref-score-card > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 12px 0 16px;
  color: #168f8a;
}

.about-ref-score-card strong {
  font-size: 52px;
  line-height: 1;
}

.about-ref-score-card p {
  display: grid;
  grid-template-columns: 52px 1fr 26px;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  color: #526172;
  font-size: 12px;
  font-weight: 700;
}

.about-ref-score-card i,
.about-ref-news-card time,
.about-ref-trend-card svg path {
  display: block;
}

.about-ref-score-card i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #45c6bf, #7fc6ee);
}

.about-ref-trend-card {
  right: 70px;
  bottom: 166px;
  width: 212px;
  padding: 18px;
}

.about-ref-trend-card b {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #178f8a;
  font-size: 14px;
}

.about-ref-trend-card svg {
  width: 100%;
  height: 78px;
  margin-top: 8px;
}

.about-ref-trend-card svg path {
  fill: none;
  stroke: #45bab6;
  stroke-width: 5;
  stroke-linecap: round;
}

.about-ref-trend-card svg circle {
  fill: #45bab6;
}

.about-ref-ai-card {
  right: 12px;
  bottom: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 340px;
  padding: 18px 20px;
}

.about-ref-ai-card .icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  color: #158f8a;
  background: #e8f8f6;
  border-radius: 18px;
}

.about-ref-ai-card strong,
.about-ref-ai-card span {
  display: block;
}

.about-ref-ai-card strong {
  color: #26364a;
  font-weight: 900;
}

.about-ref-ai-card span {
  margin-top: 4px;
  color: #667486;
  font-size: 13px;
  line-height: 1.5;
}

.about-ref-section {
  padding: 72px 82px;
}

.about-ref-section-head {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.about-ref-section-head h2,
.about-ref-join-copy h2 {
  margin: 18px 0 0;
  color: #172942;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 42px;
  line-height: 1.35;
  letter-spacing: 0;
}

.about-ref-section-head p {
  margin: 14px auto 0;
  max-width: 660px;
  color: #647386;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.9;
}

.about-ref-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
}

.about-ref-value-card {
  min-height: 260px;
  padding: 38px 28px 32px;
  text-align: center;
  border: 1px solid rgba(196, 220, 223, 0.76);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 252, 0.86));
  box-shadow: 0 24px 64px rgba(31, 83, 90, 0.1);
}

.about-ref-value-card:nth-child(2) .icon,
.about-ref-value-card:nth-child(4) .icon {
  color: #ef7480;
  background: radial-gradient(circle at 35% 25%, #fff, #fff0f2);
}

.about-ref-value-card h3,
.about-ref-team-card h3,
.about-ref-news-card h3,
.about-ref-role-card h3 {
  margin: 0;
  color: #1f3045;
  font-weight: 900;
  letter-spacing: 0;
}

.about-ref-value-card h3 {
  margin-top: 18px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 28px;
}

.about-ref-value-card p {
  margin: 16px 0 0;
  color: #657485;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.85;
}

.about-ref-founder {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(44, 184, 176, 0.13), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(246, 122, 135, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(247, 252, 251, 0.92), rgba(255, 255, 255, 0.98));
}

.about-ref-founder::before {
  content: "";
  position: absolute;
  inset: 18px 52px;
  pointer-events: none;
  border: 1px solid rgba(38, 150, 145, 0.12);
  border-radius: 34px;
}

.about-founder-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 42px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}

.about-founder-lead {
  padding: 36px 18px 36px 0;
}

.about-founder-lead span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #178f8a;
  font-size: 14px;
  font-weight: 900;
}

.about-founder-lead span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 8px rgba(43, 184, 176, 0.11);
}

.about-founder-lead h2 {
  margin: 22px 0 0;
  color: #172942;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(42px, 4vw, 64px);
  font-weight: 760;
  line-height: 1.28;
  letter-spacing: 0;
}

.about-founder-lead p {
  display: inline-flex;
  margin: 28px 0 0;
  padding: 12px 18px;
  color: #168e88;
  font-size: 17px;
  font-weight: 900;
  border: 1px solid rgba(37, 169, 161, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(31, 83, 90, 0.08);
}

.about-founder-letter {
  position: relative;
  padding: 42px 48px 38px;
  border: 1px solid rgba(196, 220, 223, 0.9);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 252, 0.92)),
    radial-gradient(circle at 92% 8%, rgba(246, 122, 135, 0.12), transparent 32%);
  box-shadow: 0 30px 86px rgba(31, 83, 90, 0.12);
}

.about-founder-letter::before {
  content: "“";
  position: absolute;
  top: 14px;
  right: 34px;
  color: rgba(37, 169, 161, 0.16);
  font-family: Georgia, serif;
  font-size: 112px;
  line-height: 1;
}

.about-founder-letter p {
  position: relative;
  margin: 0;
  color: #536273;
  font-size: 17px;
  font-weight: 650;
  line-height: 2;
}

.about-founder-letter p + p {
  margin-top: 14px;
}

.about-founder-letter footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(17, 80, 85, 0.1);
}

.about-founder-letter strong {
  color: #172942;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 24px;
  letter-spacing: 0;
}

.about-founder-letter span {
  color: #7c8a9b;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.about-ref-team {
  background: linear-gradient(180deg, rgba(247, 252, 251, 0.65), rgba(255, 255, 255, 0.96));
}

.about-ref-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
}

.about-ref-team-card {
  overflow: hidden;
  border: 1px solid rgba(196, 220, 223, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 56px rgba(31, 83, 90, 0.1);
}

.about-ref-team-photo {
  height: 190px;
  background: #edf8f7;
  overflow: hidden;
}

.about-ref-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 0.55s ease;
}

/* 四格環境拼貼卡片：方形容器完整顯示整張方形拼貼（不裁切、不變形）。 */
.about-ref-team-photo--grid {
  height: auto;
  aspect-ratio: 1 / 1;
}

.about-ref-team-photo--grid img {
  object-position: center;
}

.about-ref-team-card:hover .about-ref-team-photo img,
.about-ref-news-card:hover img {
  transform: scale(1.045);
}

.about-ref-team-copy {
  padding: 24px 24px 26px;
}

.about-ref-team-copy > span {
  color: #178f8a;
  font-size: 14px;
  font-weight: 900;
}

.about-ref-team-card h3 {
  margin-top: 6px;
  font-size: 22px;
}

.about-ref-team-card p {
  margin: 12px 0 18px;
  color: #647386;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.75;
}

.about-ref-team-card ul,
.about-ref-role-card p,
.about-ref-news-card p {
  margin: 0;
}

.about-ref-team-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  color: #425569;
  font-size: 13px;
  font-weight: 750;
}

.about-ref-team-card li {
  position: relative;
  padding-left: 16px;
}

.about-ref-team-card li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #32b7b1;
}

.about-ref-row-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  max-width: 1320px;
  text-align: left;
}

.about-ref-row-head h2 {
  max-width: 600px;
}

.about-ref-row-head a,
.about-ref-news-card a,
.about-ref-role-card a {
  color: #178f8a;
  font-weight: 900;
  text-decoration: none;
}

.about-ref-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1320px;
  margin: 0 auto;
}

.about-ref-news-card {
  overflow: hidden;
  border: 1px solid rgba(196, 220, 223, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 62px rgba(31, 83, 90, 0.1);
}

.about-ref-news-image {
  position: relative;
  height: 205px;
  overflow: hidden;
}

.about-ref-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.about-ref-news-card time {
  position: absolute;
  left: 18px;
  bottom: 16px;
  min-width: 78px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid rgba(184, 219, 220, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 36px rgba(31, 83, 90, 0.12);
}

.about-ref-news-card time small {
  display: block;
  color: #8aa3a8;
  font-weight: 850;
}

.about-ref-news-card time strong {
  color: #325267;
  font-size: 20px;
}

.about-ref-news-body {
  padding: 24px 26px 28px;
}

.about-ref-news-card h3 {
  font-size: 22px;
}

.about-ref-news-card p,
.about-ref-role-card p {
  color: #647386;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.75;
}

.about-ref-news-card p {
  margin-top: 10px;
}

.about-ref-news-card a {
  display: inline-flex;
  margin-top: 18px;
}

.about-ref-join {
  padding-bottom: 88px;
  background:
    linear-gradient(90deg, rgba(235, 250, 249, 0.8), rgba(255, 248, 246, 0.72)),
    radial-gradient(circle at 88% 24%, rgba(242, 190, 151, 0.22), transparent 36%);
}

.about-ref-join-shell {
  display: grid;
  grid-template-columns: minmax(650px, 1.16fr) minmax(420px, 0.84fr);
  gap: 38px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: stretch;
}

.about-ref-join-copy {
  padding: 44px 0 0;
}

.about-ref-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 28px;
}

.about-ref-role-card {
  min-height: 220px;
  padding: 28px 22px;
  text-align: center;
  border: 1px solid rgba(196, 220, 223, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 54px rgba(31, 83, 90, 0.1);
}

.about-ref-role-card h3 {
  font-size: 22px;
}

.about-ref-role-card p {
  margin-top: 12px;
}

.about-ref-role-card a {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 20px;
  border: 1px solid rgba(23, 143, 138, 0.45);
  border-radius: 999px;
}

.about-ref-join-scene {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border-radius: 30px 0 0 30px;
}

.about-ref-join-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) brightness(1.07);
}

.about-ref-join-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.48));
}

/* 賦有門面：COSTUDY 伴學伴圓招牌在照片上半部，caption 下移至底部避免遮擋。
   兩個 class 同時指定以提高優先權，蓋過後面的 base `.about-ref-join-scene blockquote{top:52px}`。 */
.about-ref-join-scene.about-ref-join-scene--caption-bottom blockquote {
  top: auto;
  bottom: 40px;
}

.about-ref-join-scene blockquote {
  position: absolute;
  z-index: 2;
  top: 52px;
  right: 44px;
  width: 250px;
  margin: 0;
  padding: 30px 28px;
  color: #27384d;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.75;
  border: 1px solid rgba(205, 214, 203, 0.75);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 70px rgba(56, 67, 72, 0.16);
}

.about-ref-join-scene cite {
  display: block;
  margin-top: 10px;
  color: #178f8a;
  font-size: 13px;
  font-style: normal;
  text-align: right;
}

@media (min-width: 1440px) {
  .site-scale-viewport.is-desktop-stage .page-about .about-ref-hero {
    height: 690px;
    min-height: 690px;
  }

  .site-scale-viewport.is-desktop-stage .page-about .about-ref-section {
    padding-left: 82px;
    padding-right: 82px;
  }
}

@media (max-width: 1439px) {
  .about-ref-hero {
    display: block;
    height: auto;
    min-height: 0;
    padding: 72px 22px 34px;
  }

  .about-ref-copy h1 {
    font-size: clamp(42px, 12vw, 64px);
  }

  .about-ref-copy h1 span {
    font-size: clamp(28px, 7.4vw, 40px);
  }

  .about-ref-copy p {
    font-size: 16px;
  }

  .about-ref-pill-row,
  .about-ref-value-grid,
  .about-ref-team-grid,
  .about-ref-news-grid,
  .about-ref-role-grid,
  .about-founder-shell,
  .about-ref-join-shell {
    grid-template-columns: 1fr;
  }

  .about-ref-promise {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 80, 85, 0.1);
  }

  .about-ref-promise:last-child {
    border-bottom: 0;
  }

  .about-ref-visual {
    min-height: 430px;
    margin-top: 28px;
    border-radius: 30px;
    overflow: hidden;
  }

  .about-ref-visual > img {
    inset: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }

  .about-ref-score-card {
    top: 18px;
    right: 16px;
    width: 176px;
    padding: 14px;
  }

  .about-ref-score-card strong {
    font-size: 38px;
  }

  .about-ref-score-card p {
    grid-template-columns: 42px 1fr 22px;
    font-size: 10px;
  }

  .about-ref-trend-card {
    left: 16px;
    right: auto;
    bottom: 92px;
    width: 166px;
  }

  .about-ref-ai-card {
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
  }

  .about-ref-section {
    padding: 54px 22px;
  }

  .about-ref-section-head {
    margin-bottom: 28px;
  }

  .about-ref-section-head h2,
  .about-ref-join-copy h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .about-ref-value-card {
    min-height: 0;
  }

  .about-ref-founder::before {
    inset: 14px;
    border-radius: 26px;
  }

  .about-founder-lead {
    padding: 0;
  }

  .about-founder-lead h2 {
    font-size: clamp(32px, 9vw, 46px);
  }

  .about-founder-letter {
    padding: 30px 24px 26px;
    border-radius: 24px;
  }

  .about-founder-letter p {
    font-size: 15px;
    line-height: 1.9;
  }

  .about-founder-letter footer {
    display: block;
  }

.about-founder-letter span {
    display: block;
    margin-top: 8px;
  }

  .about-ref-team-photo,
  .about-ref-news-image {
    height: 220px;
  }

  .about-ref-row-head {
    display: block;
  }

  .about-ref-row-head a {
    display: inline-flex;
    margin-top: 16px;
  }

  .about-ref-join-copy {
    padding-top: 0;
  }

  .about-ref-join-scene {
    min-height: 360px;
    border-radius: 28px;
  }

  .about-ref-join-scene blockquote {
    top: 26px;
    right: 22px;
    width: 220px;
    font-size: 20px;
  }
}

/* Progress 122 redesign */
.page-progress-122 {
  color: #17304b;
  background:
    radial-gradient(circle at 10% 8%, rgba(50, 190, 181, 0.08), transparent 30%),
    radial-gradient(circle at 92% 36%, rgba(244, 126, 141, 0.08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8fcfc 48%, #fff 100%);
  overflow-x: clip;
}

.p122-shell {
  width: min(100% - 88px, 1360px);
  margin: 0 auto;
}

.page-progress-122 .section {
  padding: 36px 0;
}

.p122-hero {
  padding-top: 54px !important;
}

.p122-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
}

.p122-hero-grid > *,
.p122-dashboard-grid > *,
.p122-final-panel > * {
  min-width: 0;
}

.p122-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #168f89;
  font-size: 14px;
  font-weight: 900;
}

.p122-kicker::before,
.p122-kicker::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.p122-hero-copy h1,
.p122-section-head h2,
.p122-final h2 {
  margin: 0;
  color: #142944;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-weight: 760;
  letter-spacing: 0;
}

.p122-hero-copy h1 {
  max-width: 620px;
  font-size: clamp(52px, 4.4vw, 70px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.p122-hero-copy > p {
  max-width: 620px;
  margin: 24px 0 0;
  color: #52677a;
  font-size: 18px;
  font-weight: 680;
  line-height: 1.9;
}

.p122-metric-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.p122-metric-cards article,
.p122-why-grid article,
.p122-side-stats article,
.p122-proof-grid article,
.p122-feedback-grid article,
.p122-story-card,
.p122-soft-panel,
.p122-final-panel {
  border: 1px solid rgba(196, 220, 223, 0.78);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 70px rgba(31, 83, 90, 0.09);
}

.p122-metric-cards article {
  min-height: 142px;
  padding: 18px 16px 16px;
  border-radius: 18px;
}

.p122-metric-cards i,
.p122-why-grid span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #16a59d;
  font-style: normal;
  border-radius: 14px;
  background: linear-gradient(135deg, #eefdfb, #fff);
}

.p122-metric-cards span,
.p122-side-stats b,
.p122-proof-grid small {
  display: block;
  margin-top: 12px;
  color: #52677a;
  font-size: 13px;
  font-weight: 850;
}

.p122-metric-cards strong {
  display: block;
  margin-top: 6px;
  color: #149991;
  font-size: 34px;
  line-height: 1;
}

.p122-metric-cards em {
  margin-left: 2px;
  font-size: 15px;
  font-style: normal;
}

.p122-metric-cards small {
  display: block;
  margin-top: 8px;
  color: #7a8797;
  font-size: 11px;
  font-weight: 750;
}

.p122-actions,
.p122-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.p122-hero-art {
  position: relative;
  min-height: 520px;
  margin: 0;
  border-radius: 30px;
  overflow: visible;
}

.p122-hero-photo {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  box-shadow: 0 30px 90px rgba(31, 83, 90, 0.12);
}

.p122-float {
  position: absolute;
  z-index: 2;
  width: 190px;
  border-radius: 18px;
  filter: drop-shadow(0 20px 40px rgba(31, 83, 90, 0.14));
}

.p122-float-trend {
  top: 52px;
  left: -36px;
}

.p122-float-days {
  top: 78px;
  right: 22px;
}

.p122-float-donut {
  right: -22px;
  bottom: 28px;
  width: 225px;
}

.p122-soft-panel,
.p122-final-panel {
  padding: 42px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 10%, rgba(45, 185, 177, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.86);
}

.p122-section-head {
  margin-bottom: 26px;
}

.p122-section-head.center {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.p122-section-head h2 {
  font-size: 38px;
  line-height: 1.35;
}

.p122-section-head p {
  margin: 10px 0 0;
  color: #66788a;
  font-size: 16px;
  font-weight: 720;
}

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

.p122-why-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  min-height: 130px;
  padding: 22px;
  border-radius: 20px;
}

.p122-why-grid h3 {
  margin: 0;
  align-self: center;
  color: #20364f;
  font-size: 18px;
}

.p122-why-grid p {
  grid-column: 2;
  margin: 0;
  color: #6b7b8d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.75;
}

.p122-dashboard-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.p122-side-stats {
  display: grid;
  gap: 12px;
}

.p122-side-stats article {
  padding: 18px;
  border-radius: 18px;
}

.p122-side-stats span {
  color: #13a29b;
  font-size: 18px;
}

.p122-side-stats strong {
  display: block;
  margin-top: 4px;
  color: #149991;
  font-size: 28px;
}

.p122-side-stats small {
  color: #7c8a9a;
  font-size: 12px;
  font-weight: 700;
}

.p122-dashboard-img {
  margin: 0;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(196, 220, 223, 0.78);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 70px rgba(31, 83, 90, 0.09);
}

.p122-dashboard-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 20px;
}

.p122-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.p122-story-card {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  overflow: hidden;
}

.p122-story-card > img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  background: #f7fbfb;
}

.p122-story-card span {
  color: #149991;
  font-size: 12px;
  font-weight: 900;
}

.p122-story-card h3 {
  margin: 8px 0 0;
  color: #20364f;
  font-size: 28px;
}

.p122-story-card p {
  margin: 8px 0 0;
  color: #657485;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.75;
}

.p122-score-row {
  display: grid;
  grid-template-columns: 1fr 20px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.p122-score-row b {
  padding: 10px;
  color: #52677a;
  font-size: 12px;
  text-align: center;
  border-radius: 12px;
  background: #f4f9f9;
}

.p122-score-row i {
  height: 1px;
  background: #b7cacc;
}

.p122-score-row em {
  padding: 9px 10px;
  color: #ef7480;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  border-radius: 999px;
  background: #fff1f3;
}

.p122-story-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.p122-story-card footer small {
  color: #149991;
  font-size: 11px;
  font-weight: 800;
}

.p122-proof-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.p122-proof-grid article {
  padding: 24px 14px;
  border-radius: 18px;
  text-align: center;
}

.p122-proof-grid span {
  display: block;
  color: #13a29b;
  font-size: 32px;
  font-weight: 950;
}

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

.p122-feedback-grid article {
  padding: 24px;
  border-radius: 22px;
}

.p122-feedback-grid p {
  margin: 0;
  color: #5d6e80;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.9;
}

.p122-feedback-grid p::before {
  content: "“";
  display: block;
  color: #48bbb3;
  font-size: 34px;
  line-height: 0.8;
}

.p122-feedback-grid footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.p122-feedback-grid img,
.p122-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  background: #eefafa;
}

.p122-avatar {
  display: grid;
  place-items: center;
  color: #168f89;
  font-weight: 900;
}

.p122-feedback-grid b {
  display: block;
  color: #20364f;
}

.p122-feedback-grid small {
  color: #7c8a9a;
  font-weight: 700;
}

.p122-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.p122-dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c7d8da;
}

.p122-dots i:first-child {
  background: #24aaa2;
}

.p122-final-panel {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 28px 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 12%, rgba(239, 116, 128, 0.13), transparent 36%),
    linear-gradient(110deg, rgba(237, 250, 249, 0.94), rgba(255, 255, 255, 0.96));
}

.p122-final figure {
  position: relative;
  margin: 0;
}

.p122-final figure > img:first-child {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: right center;
  border-radius: 22px;
}

.p122-final-child {
  position: absolute;
  right: -18px;
  bottom: -12px;
  width: 86px;
  border-radius: 999px;
  filter: drop-shadow(0 14px 28px rgba(31, 83, 90, 0.16));
}

.p122-final h2 {
  font-size: 34px;
  line-height: 1.35;
}

.p122-final h2 span {
  color: #149991;
}

.p122-final p {
  margin: 10px 0 0;
  color: #66788a;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1439px) {
  .p122-shell {
    width: min(100% - 36px, 720px);
  }

  .page-progress-122 .section {
    padding: 28px 0;
  }

  .p122-hero-grid,
  .p122-dashboard-grid,
  .p122-final-panel {
    grid-template-columns: 1fr;
  }

  .p122-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .p122-metric-cards,
  .p122-why-grid,
  .p122-story-grid,
  .p122-proof-grid,
  .p122-feedback-grid {
    grid-template-columns: 1fr;
  }

  .p122-hero-art,
  .p122-hero-photo {
    min-height: 360px;
    height: 360px;
  }

  .p122-float {
    width: 138px;
  }

  .p122-float-trend {
    top: 20px;
    left: 10px;
  }

  .p122-float-days {
    top: 28px;
    right: 10px;
  }

  .p122-float-donut {
    right: 12px;
    bottom: 16px;
    width: 160px;
  }

  .p122-soft-panel,
  .p122-final-panel {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .p122-section-head h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .p122-story-card {
    grid-template-columns: 1fr;
  }

  .p122-story-card > img {
    height: 280px;
  }

  .p122-final-actions {
    margin-top: 0;
  }

  .p122-actions .btn,
  .p122-final-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .site-header {
    gap: 12px;
    padding-right: 18px;
    padding-left: 18px;
    overflow: visible;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .brand-logo {
    width: 124px;
  }

  .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .header-actions .btn.small {
    min-width: 0;
    max-width: 148px;
    padding-right: 13px;
    padding-left: 13px;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .site-nav,
  .site-header .header-actions {
    display: none !important;
  }

  .mobile-nav-toggle {
    position: relative;
    z-index: 32;
    display: inline-grid;
    grid-template-columns: 20px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #183040;
    background: transparent;
    cursor: pointer;
    font: inherit;
  }

  .mobile-nav-toggle b {
    display: none;
  }

  .mobile-nav-toggle span {
    grid-column: 1;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition:
      transform 180ms ease,
      opacity 180ms ease;
  }

  .mobile-nav-toggle span + span {
    margin-top: -6px;
  }

  .mobile-nav-toggle b {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .mobile-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .mobile-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 18px;
    left: 18px;
    z-index: 31;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(211, 232, 234, 0.92);
    border-radius: 24px;
    background:
      radial-gradient(circle at 12% 0%, rgba(80, 197, 187, 0.14), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 253, 0.94));
    box-shadow: 0 24px 60px rgba(30, 69, 78, 0.16);
    backdrop-filter: blur(18px);
  }

  .mobile-nav-panel[hidden] {
    display: none;
  }

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

  .mobile-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(225, 237, 239, 0.86);
    border-radius: 16px;
    color: #203242;
    background: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 900;
  }

  .mobile-nav-list a::after {
    content: "→";
    color: var(--teal-strong);
    font-weight: 900;
  }

  .mobile-nav-list a[aria-current="page"] {
    color: var(--teal-strong);
    background: rgba(80, 197, 187, 0.1);
    border-color: rgba(80, 197, 187, 0.34);
  }

  .mobile-nav-cta {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .site-header .header-actions {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .site-header .header-actions {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .section,
  .taste-loop-strip,
  .cta-band,
  .footer {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* FAQ reference page */
.page-faq {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 20%, rgba(88, 197, 189, 0.12), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgba(242, 127, 135, 0.08), transparent 30rem),
    linear-gradient(180deg, #ffffff 0%, #f8fcfc 58%, #ffffff 100%);
}

.page-faq::before {
  content: "";
  position: absolute;
  inset: 72px 0 auto;
  height: 620px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 44%, rgba(255, 255, 255, 0.06) 100%),
    radial-gradient(circle at 72% 28%, rgba(88, 197, 189, 0.08), transparent 30rem);
  z-index: 0;
}

.page-faq > * {
  position: relative;
  z-index: 1;
}

.faq-ref-hero {
  width: min(100% - 120px, 1410px);
  min-height: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(430px, 0.82fr) minmax(620px, 1.18fr);
  align-items: center;
  gap: 46px;
  padding: 72px 0 50px;
}

.faq-ref-eyebrow,
.faq-ref-section-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #158e88;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.faq-ref-eyebrow::before,
.faq-ref-section-head > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal-strong);
  box-shadow: 0 0 0 8px rgba(88, 197, 189, 0.14);
}

.faq-ref-hero h1 {
  margin: 0;
  max-width: 680px;
  color: #162a43;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(3.4rem, 6vw, 6.9rem);
  line-height: 1.14;
  letter-spacing: 0;
  font-weight: 800;
}

.faq-ref-hero p {
  max-width: 590px;
  margin: 24px 0 32px;
  color: #526273;
  font-size: 1.15rem;
  line-height: 2;
  font-weight: 600;
}

.faq-ref-hero-media {
  position: relative;
  min-height: 470px;
  border-radius: 38px;
  isolation: isolate;
  transform-style: preserve-3d;
}

.faq-ref-hero-media > img:first-child {
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
  border-radius: 38px;
  filter: saturate(1.02) contrast(1.02);
  box-shadow: 0 26px 78px rgba(52, 89, 98, 0.16);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
}

.faq-ref-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 30%);
  pointer-events: none;
}

.faq-ref-float {
  position: absolute;
  z-index: 2;
  width: 270px;
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(34, 63, 72, 0.15);
  animation: faqFloat 5.5s ease-in-out infinite;
}

.faq-ref-float-a {
  top: 86px;
  right: -18px;
}

.faq-ref-float-b {
  right: 54px;
  bottom: 44px;
  animation-delay: -1.8s;
}

.faq-ref-category-grid {
  width: min(100% - 120px, 1320px);
  margin: 6px auto 82px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.faq-ref-category {
  min-height: 240px;
  padding: 26px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(207, 224, 228, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(50, 84, 94, 0.08);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.faq-ref-category:hover,
.faq-ref-category.is-active {
  transform: translateY(-8px);
  border-color: rgba(49, 170, 161, 0.42);
  background: linear-gradient(180deg, #fff, rgba(237, 250, 249, 0.95));
  box-shadow: 0 24px 64px rgba(49, 170, 161, 0.15);
}

.faq-ref-category img {
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
  border-radius: 999px;
  object-fit: cover;
  transition: transform 220ms ease;
}

.faq-ref-category:hover img,
.faq-ref-category.is-active img {
  transform: scale(1.08) rotate(-2deg);
}

.faq-ref-category strong {
  color: #1d2e47;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 1.55rem;
  line-height: 1.25;
}

.faq-ref-category span {
  min-height: 48px;
  margin-top: 12px;
  color: #657180;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.65;
}

.faq-ref-category i {
  margin-top: auto;
  color: #26425f;
  font-style: normal;
  font-size: 1.25rem;
}

.faq-ref-main-section,
.faq-ref-concerns,
.faq-ref-cta {
  width: min(100% - 120px, 1320px);
  margin: 0 auto;
}

.faq-ref-section-head {
  margin-bottom: 26px;
}

.faq-ref-section-head h2 {
  margin: 0;
  color: #18304d;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 2.7rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.faq-ref-section-head p {
  margin: 12px 0 0;
  color: #6b7684;
  font-size: 1.05rem;
  font-weight: 700;
}

.faq-ref-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 56px;
  align-items: start;
}

.faq-ref-list {
  display: grid;
  gap: 10px;
}

.faq-ref-list details {
  overflow: hidden;
  border: 1px solid rgba(212, 226, 230, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(43, 73, 82, 0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.faq-ref-list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(43, 73, 82, 0.08);
}

.faq-ref-list details[open] {
  border-color: rgba(49, 170, 161, 0.4);
  box-shadow: 0 22px 58px rgba(49, 170, 161, 0.12);
}

.faq-ref-list summary {
  min-height: 64px;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #20344e;
  font-size: 1.18rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-ref-list summary::-webkit-details-marker {
  display: none;
}

.faq-ref-list summary span {
  color: var(--teal-strong);
  font-weight: 900;
}

.faq-ref-list summary::after {
  content: "⌄";
  margin-left: auto;
  color: #35506c;
  transition: transform 180ms ease;
}

.faq-ref-list details[open] summary::after {
  transform: rotate(180deg);
}

.faq-ref-list p {
  margin: 0;
  padding: 0 34px 28px 72px;
  color: #5d6a78;
  font-size: 1rem;
  line-height: 1.95;
  font-weight: 650;
}

.faq-ref-side {
  display: grid;
  gap: 36px;
}

.faq-ref-side-card {
  overflow: hidden;
  border: 1px solid rgba(212, 226, 230, 0.92);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(43, 73, 82, 0.08);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}

.faq-ref-side-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(43, 73, 82, 0.13);
}

.faq-ref-side-card img {
  display: block;
  width: 100%;
  height: auto;
}

.faq-ref-side-card.contact {
  padding-bottom: 28px;
  text-align: center;
}

.faq-ref-side-card.contact .btn {
  width: 70%;
  justify-content: center;
}

.faq-ref-concerns {
  margin-top: 78px;
}

.faq-ref-concern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.faq-ref-concern-grid article {
  min-height: 190px;
  padding: 28px 24px 22px;
  text-align: center;
  border: 1px solid rgba(212, 226, 230, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(43, 73, 82, 0.07);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}

.faq-ref-concern-grid article:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 64px rgba(43, 73, 82, 0.12);
}

.faq-ref-concern-grid img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px;
}

.faq-ref-concern-grid strong {
  display: block;
  margin-top: 14px;
  color: #243953;
  font-size: 1.08rem;
  font-weight: 900;
}

.faq-ref-concern-grid p {
  margin: 10px 0 0;
  color: #667483;
  font-size: 0.92rem;
  line-height: 1.7;
  font-weight: 650;
}

.faq-ref-concern-grid article::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: var(--teal-strong);
}

.faq-ref-concern-overview {
  display: none;
}

.faq-ref-cta {
  position: relative;
  min-height: 190px;
  margin-top: 72px;
  margin-bottom: 56px;
  padding: 48px 340px 46px 150px;
  display: flex;
  align-items: center;
  gap: 34px;
  overflow: hidden;
  border: 1px solid rgba(181, 224, 224, 0.95);
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(235, 252, 250, 0.95) 0%, rgba(255, 255, 255, 0.94) 52%, rgba(255, 242, 244, 0.9) 100%);
  box-shadow: 0 24px 64px rgba(49, 170, 161, 0.12);
}

.faq-ref-cta-icon {
  position: absolute;
  left: 46px;
  top: 48px;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(43, 73, 82, 0.12);
}

.faq-ref-cta-icon img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.faq-ref-cta h2 {
  margin: 0 0 10px;
  color: #1b314d;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 2rem;
  line-height: 1.25;
}

.faq-ref-cta p {
  margin: 0;
  color: #667483;
  font-weight: 750;
}

.faq-ref-cta .btn {
  margin-left: auto;
  white-space: nowrap;
}

.faq-ref-cta-family {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 330px;
  height: 190px;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
}

.page-faq .footer {
  border-top: 1px solid rgba(221, 234, 236, 0.9);
}

.faq-ref-hero,
.faq-ref-category,
.faq-ref-main-section,
.faq-ref-side-card,
.faq-ref-concerns,
.faq-ref-cta {
  animation: faqRise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.faq-ref-category:nth-child(2) { animation-delay: 60ms; }
.faq-ref-category:nth-child(3) { animation-delay: 120ms; }
.faq-ref-category:nth-child(4) { animation-delay: 180ms; }
.faq-ref-category:nth-child(5) { animation-delay: 240ms; }
.faq-ref-category:nth-child(6) { animation-delay: 300ms; }

@keyframes faqRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes faqFloat {
  0%, 100% { transform: translate3d(0, 0, 30px); }
  50% { transform: translate3d(0, -12px, 30px); }
}

@media (min-width: 1440px) {
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-hero,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-category-grid,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-main-section,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-concerns,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-cta {
    width: min(100% - 172px, 1370px);
  }

  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-hero {
    min-height: 560px;
  }
}

@media (max-width: 1439px) {
  .page-faq::before { height: 520px; }

  .faq-ref-hero,
  .faq-ref-category-grid,
  .faq-ref-main-section,
  .faq-ref-concerns,
  .faq-ref-cta {
    width: min(100% - 36px, 820px);
  }

  .faq-ref-hero {
    grid-template-columns: 1fr;
    padding: 48px 0 32px;
  }

  .faq-ref-hero h1 {
    font-size: clamp(2.55rem, 9vw, 4.4rem);
  }

  .faq-ref-hero-media { min-height: 360px; }

  .faq-ref-hero-media > img:first-child {
    height: 360px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  }

  .faq-ref-float { width: 210px; }

  .faq-ref-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 56px;
  }

  .faq-ref-main-grid { grid-template-columns: 1fr; }
  .faq-ref-side { grid-template-columns: 1fr 1fr; }
  .faq-ref-concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .faq-ref-cta {
    display: grid;
    grid-template-columns: 82px 1fr;
    padding: 32px;
  }

  .faq-ref-cta-icon { position: static; }

  .faq-ref-cta .btn {
    grid-column: 1 / -1;
    margin-left: 0;
    justify-content: center;
  }

  .faq-ref-cta-family { display: none; }
}

@media (max-width: 640px) {
  .faq-ref-hero p { font-size: 1rem; }
  .faq-ref-hero-media { min-height: 300px; }

  .faq-ref-hero-media > img:first-child {
    height: 300px;
    border-radius: 24px;
  }

  .faq-ref-float { display: none; }

  .faq-ref-category-grid,
  .faq-ref-side,
  .faq-ref-concern-grid {
    grid-template-columns: 1fr;
  }

  .faq-ref-side-card.hot {
    display: none;
  }

  .faq-ref-category { min-height: 190px; }
  .faq-ref-main-grid { gap: 30px; }
  .faq-ref-section-head h2 { font-size: 2.05rem; }

  .faq-ref-list summary {
    min-height: 58px;
    padding: 16px 18px;
    gap: 12px;
    font-size: 1rem;
  }

  .faq-ref-list p {
    padding: 0 20px 22px 54px;
    font-size: 0.94rem;
  }

  .faq-ref-cta {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 22px;
  }

  .faq-ref-cta-icon { margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-ref-hero,
  .faq-ref-category,
  .faq-ref-main-section,
  .faq-ref-side-card,
  .faq-ref-concerns,
  .faq-ref-cta,
  .faq-ref-float {
    animation: none !important;
  }
}

.page-faq .faq-ref-hero {
  grid-template-columns: minmax(520px, 0.96fr) minmax(560px, 1.04fr);
}

.page-faq .faq-ref-hero h1 {
  max-width: 760px;
  font-size: clamp(3.2rem, 4.2vw, 4.65rem);
}

.page-faq .faq-ref-side-card.contact {
  position: relative;
  min-height: 310px;
  padding: 34px 28px;
  display: grid;
  place-items: center;
  text-align: center;
}

.page-faq .faq-ref-side-card.contact img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.13;
}

.page-faq .faq-ref-side-card.contact .btn {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 210px;
  min-height: 42px;
  opacity: 1;
  margin-top: 22px;
}

.faq-ref-contact-content {
  position: relative;
  z-index: 2;
}

.faq-ref-contact-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(237, 250, 249, 0.95);
  box-shadow: 0 14px 34px rgba(49, 170, 161, 0.14);
}

.page-faq .faq-ref-side-card.contact .faq-ref-contact-icon img {
  position: static;
  width: 56px;
  height: 56px;
  opacity: 1;
  object-fit: cover;
  border-radius: 999px;
}

.faq-ref-contact-content h3 {
  margin: 0;
  color: #18304d;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 1.55rem;
  line-height: 1.28;
}

.faq-ref-contact-content p {
  margin: 14px 0 0;
  color: #627080;
  font-weight: 750;
  line-height: 1.8;
}

.page-faq .faq-ref-concern-grid img {
  transform: scale(1.22);
  filter: saturate(1.08) contrast(1.04);
}

.page-programs .faq-ref-cta-family,
.page-parent .faq-ref-cta-family,
.page-faq .faq-ref-cta-family {
  width: 520px;
  opacity: 1;
  filter: saturate(1.08) contrast(1.04);
}

@media (max-width: 1439px) {
  .page-faq .faq-ref-hero {
    grid-template-columns: 1fr;
  }

  .page-faq .faq-ref-hero h1 {
    max-width: 760px;
    font-size: clamp(2.55rem, 9vw, 4.4rem);
  }
}

/* FAQ aligned with the Home visual system */
.page-faq {
  background:
    radial-gradient(circle at 14% 4%, rgba(88, 197, 189, 0.1), transparent 30rem),
    radial-gradient(circle at 86% 10%, rgba(242, 127, 135, 0.09), transparent 34rem),
    linear-gradient(180deg, #fff 0%, #f7fbfc 58%, #fff 100%);
}

.page-faq::before {
  display: none;
}

.page-faq .faq-ref-hero {
  width: 100%;
  position: relative;
  min-height: 520px;
  margin: 0;
  grid-template-columns: minmax(360px, 0.86fr) minmax(480px, 1.14fr);
  gap: 46px;
  padding: 58px var(--page-gutter) 42px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 46%, rgba(231, 246, 255, 0.82) 100%),
    radial-gradient(circle at 88% 20%, rgba(114, 185, 223, 0.22), transparent 22rem),
    radial-gradient(circle at 12% 80%, rgba(88, 197, 189, 0.11), transparent 20rem);
}

.page-faq .faq-ref-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, 0.52) 48%, transparent 62%),
    radial-gradient(circle at 76% 72%, rgba(255, 255, 255, 0.7), transparent 18rem);
  pointer-events: none;
}

.page-faq .faq-ref-hero-copy,
.page-faq .faq-ref-hero-media {
  position: relative;
  z-index: 1;
}

.page-faq .faq-ref-eyebrow {
  display: none;
}

.page-faq .faq-ref-hero h1 {
  max-width: 650px;
  color: #17243a;
  font-size: 4.02rem;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-faq .faq-ref-hero p {
  max-width: 560px;
  margin: 22px 0 30px;
  color: #56616f;
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 750;
}

.page-faq .faq-ref-hero-media {
  min-height: 430px;
  transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-faq .faq-ref-hero-media > img:first-child {
  height: 430px;
  border-radius: 0 0 0 72px;
  box-shadow: -24px 26px 68px rgba(65, 107, 123, 0.18);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, #000 16%, #000 100%);
}

.page-faq .faq-ref-hero-media::after {
  border-radius: 0 0 0 72px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.8));
}

.page-faq .faq-ref-float {
  width: 250px;
  border: 1px solid rgba(215, 231, 234, 0.72);
  box-shadow: 0 18px 50px rgba(43, 73, 82, 0.14);
}

.page-faq .faq-ref-category-grid,
.page-faq .faq-ref-main-section,
.page-faq .faq-ref-concerns,
.page-faq .faq-ref-cta {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: 1364px;
}

.page-faq .faq-ref-category-grid {
  margin-top: 54px;
  margin-bottom: 74px;
  gap: 18px;
}

.page-faq .faq-ref-category,
.page-faq .faq-ref-list details,
.page-faq .faq-ref-side-card,
.page-faq .faq-ref-concern-grid article {
  border-color: rgba(214, 228, 232, 0.86);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 45px rgba(49, 79, 90, 0.08);
  backdrop-filter: blur(14px);
}

.page-faq .faq-ref-category {
  min-height: 214px;
  padding: 24px 17px 18px;
  border-radius: 24px;
}

.page-faq .faq-ref-category img {
  width: 82px;
  height: 82px;
  margin-bottom: 17px;
}

.page-faq .faq-ref-category strong {
  color: #17243a;
  font-size: 1.34rem;
  line-height: 1.28;
}

.page-faq .faq-ref-category span {
  min-height: 42px;
  color: #687381;
  font-size: 0.86rem;
  line-height: 1.6;
}

.page-faq .faq-ref-section-head h2 {
  color: #17243a;
  font-size: 2.42rem;
  text-wrap: balance;
}

.page-faq .faq-ref-main-grid {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 42px;
}

.page-faq .faq-ref-list details {
  border-radius: 18px;
}

.page-faq .faq-ref-list details[open] {
  border-color: rgba(49, 170, 161, 0.34);
  box-shadow: 0 22px 58px rgba(49, 170, 161, 0.11);
}

.page-faq .faq-ref-list summary {
  min-height: 62px;
  padding: 17px 24px;
  color: #17243a;
  font-size: 1.06rem;
}

.page-faq .faq-ref-list p {
  padding: 0 32px 26px 68px;
  color: #596675;
  font-size: 0.96rem;
  line-height: 1.9;
}

.page-faq .faq-ref-side {
  gap: 28px;
}

.page-faq .faq-ref-concerns {
  margin-top: 76px;
}

.page-faq .faq-ref-concern-grid {
  gap: 22px;
}

.page-faq .faq-ref-concern-grid article {
  min-height: 176px;
  border-radius: 22px;
}

.page-programs .faq-ref-cta,
.page-parent .faq-ref-cta,
.page-faq .faq-ref-cta {
  min-height: 184px;
  margin-top: 70px;
  margin-bottom: 54px;
  border-radius: 30px;
  box-shadow: 0 24px 64px rgba(49, 170, 161, 0.12);
}

@media (min-width: 1440px) {
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-hero,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-category-grid,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-main-section,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-concerns,
  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-cta,
  .site-scale-viewport.is-desktop-stage .page-programs .faq-ref-cta,
  .site-scale-viewport.is-desktop-stage .page-parent .faq-ref-cta {
    width: calc(100% - var(--page-gutter) * 2);
  }

  .site-scale-viewport.is-desktop-stage .page-faq .faq-ref-hero {
    width: 100%;
  }
}

@media (max-width: 1439px) {
  .page-faq .faq-ref-hero {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 42px var(--page-gutter) 32px;
  }

  .page-faq .faq-ref-hero h1 {
    max-width: 760px;
    font-size: clamp(2.55rem, 9vw, 4.4rem);
  }

  .page-faq .faq-ref-hero-media > img:first-child,
  .page-faq .faq-ref-hero-media::after {
    border-radius: 28px;
  }

  .page-faq .faq-ref-category-grid,
  .page-faq .faq-ref-main-section,
  .page-faq .faq-ref-concerns,
  .page-faq .faq-ref-cta,
  .page-programs .faq-ref-cta,
  .page-parent .faq-ref-cta {
    width: calc(100% - var(--page-gutter) * 2);
  }
}

@media (max-width: 640px) {
  .page-faq .faq-ref-hero {
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .page-faq .faq-ref-hero-media {
    min-height: 260px;
  }

  .page-faq .faq-ref-hero-media > img:first-child {
    height: 260px;
  }
}

/* System page final AI diagnosis CTA */
.system-ai-cta {
  position: relative;
  isolation: isolate;
  width: calc(100% - var(--page-gutter) * 2);
  max-width: 1468px;
  min-height: 680px;
  margin: 70px auto 54px;
  padding: 48px 64px 28px;
  overflow: hidden;
  border: 1px solid rgba(213, 232, 236, 0.72);
  border-radius: 42px;
  background:
    radial-gradient(circle at 69% 13%, rgba(255, 203, 196, 0.34), transparent 20rem),
    radial-gradient(circle at 9% 92%, rgba(218, 243, 250, 0.76), transparent 28rem),
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 241, 238, 0.78) 100%);
  box-shadow: 0 34px 90px rgba(54, 95, 108, 0.12);
  --cta-x: 0px;
  --cta-y: 0px;
  --cta-r: 0deg;
}

.system-ai-cta::before,
.system-ai-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.system-ai-cta::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), transparent 54%),
    radial-gradient(circle at 78% 76%, rgba(255, 255, 255, 0.72), transparent 24rem);
}

.system-ai-cta::after {
  right: -120px;
  bottom: -150px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px solid rgba(130, 194, 211, 0.18);
}

.system-ai-cta-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(620px, 0.98fr) minmax(560px, 1.02fr);
  gap: 44px;
  align-items: center;
  min-height: 300px;
}

.system-ai-cta-copy {
  padding: 0 0 0 72px;
}

.system-ai-cta h2 {
  max-width: 760px;
  margin: 0;
  color: #17243a;
  font-size: clamp(2.9rem, 3.55vw, 4rem);
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 950;
  text-wrap: normal;
}

.system-ai-cta h2 span {
  color: var(--teal-strong);
  white-space: nowrap;
}

.system-ai-cta h2 .system-ai-cta-title-line {
  color: inherit;
  white-space: nowrap;
}

.system-ai-cta h2 .system-ai-cta-title-line span {
  color: var(--teal-strong);
}

.system-ai-cta-copy p {
  max-width: 660px;
  margin: 18px 0 18px;
  color: #5c6979;
  font-size: 1.08rem;
  line-height: 1.9;
  font-weight: 750;
}

.system-ai-cta-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-ai-cta-checks li {
  position: relative;
  padding-left: 34px;
  color: #5c6979;
  font-weight: 900;
  font-size: 1.03rem;
}

.system-ai-cta-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  font-size: 0.78rem;
  box-shadow: 0 10px 22px rgba(49, 170, 161, 0.2);
}

.system-ai-cta-visual {
  position: relative;
  min-height: 300px;
  transform: translate3d(var(--cta-x), var(--cta-y), 0) rotate(var(--cta-r));
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.system-ai-cta-stack {
  isolation: isolate;
}

.system-ai-cta-bg {
  position: absolute;
  right: -96px;
  top: -50px;
  z-index: 1;
  width: min(450px, 66%);
  height: auto;
  aspect-ratio: 720 / 960;
  border-radius: 34px;
  opacity: 0.92;
  filter: saturate(1.02) drop-shadow(0 28px 58px rgba(69, 87, 92, 0.09));
  animation: systemCtaFloat 8s ease-in-out infinite reverse;
}

.system-ai-cta-child {
  position: absolute;
  right: -74px;
  bottom: -140px;
  z-index: 3;
  width: min(330px, 49%);
  height: auto;
  aspect-ratio: 560 / 746;
  max-width: 48%;
  border-radius: 32px;
  filter: drop-shadow(0 32px 62px rgba(68, 87, 92, 0.16));
}

.system-ai-cta-report {
  position: absolute;
  left: -10px;
  top: 34px;
  z-index: 2;
  width: min(520px, 74%);
  height: auto;
  aspect-ratio: 800 / 600;
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(49, 79, 90, 0.13);
  animation: systemCtaFloat 6.5s ease-in-out infinite;
}

.system-ai-cta-bubble {
  position: absolute;
  right: 12px;
  top: -2px;
  z-index: 4;
  width: min(210px, 32%);
  height: auto;
  aspect-ratio: 420 / 282;
  filter: drop-shadow(0 22px 42px rgba(49, 79, 90, 0.14));
  animation: systemCtaFloat 7s ease-in-out infinite reverse;
}

.system-ai-cta-heart {
  position: absolute;
  right: -6px;
  top: -36px;
  width: 74px;
  opacity: 0.9;
  animation: systemCtaPulse 2.8s ease-in-out infinite;
}

.system-ai-cta-steps {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 2px auto 0;
  max-width: 1120px;
}

.system-ai-cta-steps article {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease;
}

.system-ai-cta-steps article:hover,
.system-ai-cta-steps article.is-active {
  transform: translateY(-5px);
  box-shadow: none;
}

.system-ai-cta-steps article img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 273;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(49, 79, 90, 0.08));
}

.system-ai-cta-steps article div {
  display: none;
}

.system-ai-cta-steps strong {
  display: block;
  color: #17243a;
  font-size: 1.12rem;
  font-weight: 950;
}

.system-ai-cta-steps span {
  display: block;
  margin-top: 6px;
  color: #667483;
  font-size: 0.9rem;
  font-weight: 750;
}

.system-ai-cta-steps > i {
  width: 18px;
  height: 18px;
  justify-self: center;
  border-top: 2px solid rgba(69, 91, 105, 0.35);
  border-right: 2px solid rgba(69, 91, 105, 0.35);
  transform: rotate(45deg);
}

.system-ai-cta-action {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 20px;
}

.system-ai-cta-note {
  position: absolute;
  left: calc(50% - 455px);
  top: -16px;
  width: 255px;
  height: auto;
  aspect-ratio: 520 / 130;
  transform: rotate(-4deg);
  opacity: 0.95;
  filter: drop-shadow(0 18px 34px rgba(31, 147, 139, 0.11));
}

.system-ai-cta-button {
  position: relative;
  min-width: 500px;
  min-height: 70px;
  padding: 0 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff9b7f 0%, #f95f72 100%);
  box-shadow: 0 22px 52px rgba(249, 95, 114, 0.32);
  font-size: 1.82rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.system-ai-cta-button:hover {
  transform: translateY(-3px) scale(1.01);
  filter: saturate(1.06);
  box-shadow: 0 28px 68px rgba(249, 95, 114, 0.4);
}

.system-ai-cta-button:active {
  transform: translateY(-1px) scale(0.99);
}

.system-ai-cta-action p {
  margin: 0;
  color: #7a8492;
  font-size: 0.9rem;
  font-weight: 800;
}

.system-ai-cta-action p::before {
  content: "▣";
  margin-right: 6px;
  color: #7a8492;
}

.system-ai-cta-art span {
  position: absolute;
  pointer-events: none;
}

.system-ai-cta-art .star-a {
  left: 74px;
  top: 206px;
  width: 48px;
  height: 48px;
  opacity: 0.72;
  transform: rotate(-18deg);
}

.system-ai-cta-art .star-a::before {
  content: "☆";
  color: rgba(242, 127, 135, 0.62);
  font-size: 56px;
  line-height: 1;
}

.system-ai-cta-art .spark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgba(88, 197, 189, 0.9);
  border-left-color: rgba(88, 197, 189, 0.9);
}

.system-ai-cta-art .spark-a {
  left: 51%;
  top: 132px;
  transform: rotate(15deg);
}

.system-ai-cta-art .spark-b {
  left: 57%;
  top: 150px;
  transform: rotate(-18deg) scale(0.72);
}

.system-ai-cta-art .wave-a {
  left: 54%;
  bottom: 192px;
  width: 120px;
  height: 44px;
  border-bottom: 5px solid rgba(115, 185, 223, 0.75);
  border-radius: 50%;
  transform: rotate(-24deg);
}

@keyframes systemCtaFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}

@keyframes systemCtaPulse {
  0%, 100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 1439px) {
  .system-ai-cta {
    width: calc(100% - var(--page-gutter) * 2);
    min-height: auto;
    margin-top: 54px;
    padding: 32px 24px;
    border-radius: 30px;
  }

  .system-ai-cta-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 0;
  }

  .system-ai-cta-copy {
    padding: 22px 0 0;
  }

  .system-ai-cta h2 {
    font-size: clamp(2.55rem, 9vw, 4.7rem);
  }

  .system-ai-cta-copy p {
    font-size: 1rem;
  }

  .system-ai-cta-visual {
    min-height: 390px;
  }

  .system-ai-cta-bg {
    right: -12px;
    top: -20px;
    width: 52%;
  }

  .system-ai-cta-report {
    left: 4px;
    top: 70px;
    width: 74%;
  }

  .system-ai-cta-child {
    right: -12px;
    bottom: -18px;
    width: 310px;
    max-width: 58%;
  }

  .system-ai-cta-bubble {
    right: 6px;
    top: 26px;
    width: 170px;
  }

  .system-ai-cta-steps {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 14px;
  }

  .system-ai-cta-steps > i {
    width: 14px;
    height: 14px;
    transform: rotate(135deg);
  }

  .system-ai-cta-note {
    position: static;
    width: 220px;
    transform: rotate(-3deg);
    justify-self: start;
    margin-left: 4px;
  }

  .system-ai-cta-button {
    min-width: min(100%, 420px);
    min-height: 64px;
    font-size: 1.45rem;
  }
}

@media (max-width: 640px) {
  .system-ai-cta {
    padding: 26px 18px 28px;
    border-radius: 24px;
  }

  .system-ai-cta-checks {
    display: grid;
    gap: 12px;
  }

  .system-ai-cta-visual {
    min-height: 330px;
  }

  .system-ai-cta-bg {
    right: -42px;
    top: -4px;
    width: 64%;
    opacity: 0.78;
  }

  .system-ai-cta-report {
    left: -8px;
    top: 58px;
    width: 84%;
  }

  .system-ai-cta-child {
    right: -20px;
    bottom: 0;
    width: 235px;
  }

  .system-ai-cta-heart,
  .system-ai-cta-art {
    display: none;
  }

  .system-ai-cta-bubble {
    right: 0;
    top: 22px;
    width: 138px;
  }

  .system-ai-cta-steps article div {
    left: 98px;
    top: 42px;
    max-width: calc(100% - 116px);
  }

  .system-ai-cta-steps strong {
    font-size: 1rem;
  }

  .system-ai-cta-steps span {
    font-size: 0.82rem;
  }

  .system-ai-cta-button {
    width: 100%;
    min-width: 0;
    padding: 0 24px;
    font-size: 1.25rem;
  }
}

/* Impeccable layout pass: shared rhythm, grouping, and hierarchy. */
:root {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --layout-section-y-tight: clamp(36px, 3.4vw, 56px);
  --layout-section-y: clamp(52px, 4.8vw, 82px);
  --layout-section-y-roomy: clamp(64px, 5.8vw, 104px);
  --layout-cluster-gap: clamp(18px, 1.8vw, 28px);
  --layout-grid-gap: clamp(18px, 2.1vw, 34px);
  --layout-major-gap: clamp(34px, 4.2vw, 72px);
  --layout-copy-width: 66ch;
}

html {
  scroll-padding-top: calc(var(--header-height) + var(--space-lg));
}

:where(.hero h1, .section-title, .lens-copy h2, .about-ref-section-head h2, .about-ref-join-copy h2, .faq-ref-hero h1, .p122-hero h1, .system-ai-cta h2) {
  text-wrap: balance;
}

:where(.hero-copy, .section-subtitle, .lens-copy p, .about-ref-section-head p, .faq-ref-hero p, .p122-hero p, .system-ai-cta-copy p) {
  width: min(100%, var(--layout-copy-width));
  max-width: var(--layout-copy-width);
  text-wrap: pretty;
}

:where(.section, .taste-loop-strip, .product-lens, .lens-shell, .cta-band, .faq-ref-hero, .faq-ref-category-grid, .faq-ref-main-section, .faq-ref-concerns, .faq-ref-cta) {
  position: relative;
}

:where(.section, .taste-loop-strip, .cta-band) {
  isolation: isolate;
}

.section {
  padding-block: var(--layout-section-y);
}

.section.flush-top {
  padding-top: var(--layout-section-y-tight);
}

.section > * {
  max-width: var(--content-max);
}

.section-title {
  margin-bottom: var(--space-lg);
  letter-spacing: 0;
}

.section-subtitle {
  margin-top: calc(var(--space-sm) * -1);
  margin-bottom: var(--space-xl);
  line-height: 1.78;
}

.grid {
  gap: var(--layout-grid-gap);
}

.hero-content {
  display: grid;
  align-content: center;
  justify-items: start;
}

.hero-actions,
.cta-actions {
  gap: var(--space-md);
}

.hero-points {
  row-gap: var(--space-lg);
}

.taste-loop-strip {
  gap: var(--layout-grid-gap);
  padding: clamp(18px, 2.2vw, 30px);
}

.taste-loop-rail {
  gap: var(--layout-cluster-gap);
}

.taste-loop-copy,
.lens-copy,
.system-showcase-copy,
.ideal-copy,
.ideal-engine-copy,
.ideal-outcome-copy,
.ideal-proof-copy,
.ideal-final-copy,
.about-ref-section-head,
.faq-ref-hero-copy,
.p122-hero-copy {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.product-lens {
  padding-block: var(--layout-section-y-tight);
}

.lens-shell {
  gap: var(--layout-grid-gap);
  padding: clamp(26px, 3vw, 44px);
}

.lens-map-tabs,
.lens-proof-grid,
.lens-detail-grid,
.diagnosis-stepper,
.programs-plan-tabs,
.recommend-choice-list,
.weekly-flow-track,
.coach-role-grid,
.about-ref-value-grid,
.about-ref-team-grid,
.about-ref-news-grid,
.p122-why-grid,
.p122-proof-grid,
.p122-feedback-grid,
.faq-ref-category-grid,
.faq-ref-concern-grid {
  gap: var(--layout-grid-gap);
}

.cta-band {
  margin-block: var(--layout-section-y-tight);
  padding: clamp(28px, 3vw, 46px) clamp(30px, 4vw, 64px);
}

.cta-band.has-mark {
  padding-left: clamp(96px, 8vw, 132px);
}

.footer {
  gap: var(--layout-grid-gap);
  padding-block: var(--layout-section-y-tight);
}

.footer-bottom {
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
}

.hero h1,
.section-title,
.system-ai-cta h2 {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (min-width: 1440px) {
  .site-scale-viewport.is-desktop-stage > .site,
  .site-scale-viewport[data-desktop-scale] > .site {
    --content-max: 1440px;
    --page-gutter: 72px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .hero {
    --page-gutter: 78px;
    height: 640px;
    min-height: 640px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .hero {
    height: 720px;
    min-height: 720px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .section {
    padding-block: 70px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-home-flow {
    --home-section-y-tight: 46px;
    --home-section-y: 62px;
    --home-section-y-roomy: 78px;
    --home-major-gap: 60px;
    --home-cluster-gap: 30px;
    --home-card-gap: 20px;
  }

  .site-scale-viewport.is-desktop-stage .page-home .ideal-home-section {
    --page-gutter: 78px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .taste-loop-strip,
  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .cta-band,
  .site-scale-viewport.is-desktop-stage .lens-shell,
  .site-scale-viewport.is-desktop-stage .system-showcase-shell {
    max-width: 1440px;
  }

  .site-scale-viewport.is-desktop-stage .page-main:not(.page-home) .cta-band {
    width: min(1440px, calc(100% - var(--page-gutter) * 2));
  }
}

@media (max-width: 1439px) {
  :root {
    --layout-section-y-tight: 34px;
    --layout-section-y: 44px;
    --layout-section-y-roomy: 54px;
    --layout-cluster-gap: 16px;
    --layout-grid-gap: 18px;
    --layout-major-gap: 26px;
  }

  .section,
  .page-main:not(.page-home) .section,
  .page-home .ideal-home-section {
    padding-block: var(--layout-section-y);
  }

  .hero-content {
    align-content: start;
  }

  .lens-shell,
  .taste-loop-strip,
  .cta-band {
    border-radius: 20px;
  }

  .cta-band,
  .cta-band.has-mark {
    grid-template-columns: 1fr;
    width: calc(100% - var(--page-gutter) * 2);
    padding: 28px 22px;
  }

  .system-ai-cta {
    margin-top: var(--layout-section-y);
    margin-bottom: var(--layout-section-y);
    padding: 30px 24px;
    border-radius: 28px;
  }

  .system-ai-cta-grid {
    gap: var(--layout-major-gap);
  }

  .system-ai-cta-copy {
    padding: 0;
  }

  .system-ai-cta h2 {
    font-size: clamp(2.1rem, 7vw, 3.45rem);
    line-height: 1.14;
  }

  .system-ai-cta h2 .system-ai-cta-title-line {
    white-space: normal;
  }

  .system-ai-cta-copy p {
    margin: 12px 0 16px;
    font-size: 1rem;
    line-height: 1.72;
  }

  .system-ai-cta-visual {
    min-height: clamp(270px, 58vw, 380px);
  }

  .system-ai-cta-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
  }

  .system-ai-cta-steps > i {
    display: none;
  }

  .system-ai-cta-action {
    margin-top: 14px;
  }

  .system-ai-cta-button {
    min-height: 60px;
    font-size: 1.24rem;
  }

  .cta-mark {
    display: none;
  }

  .footer {
    gap: 22px;
  }

  .page-progress-122 .p122-hero {
    padding-top: 34px !important;
    padding-bottom: 38px;
  }

  .page-progress-122 .p122-hero-grid {
    gap: 24px;
  }

  .page-progress-122 .p122-hero-copy {
    gap: 12px;
  }

  .page-progress-122 .p122-hero-copy > p {
    margin-top: 8px;
    line-height: 1.68;
  }

  .page-progress-122 .p122-metric-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .page-progress-122 .p122-metric-cards article {
    min-height: 104px;
    padding: 14px 12px;
    border-radius: 16px;
  }

  .page-progress-122 .p122-metric-cards i {
    width: 30px;
    height: 30px;
    border-radius: 12px;
  }

  .page-progress-122 .p122-metric-cards span {
    margin-top: 8px;
  }

  .page-progress-122 .p122-metric-cards strong {
    font-size: 28px;
  }

  .page-progress-122 .p122-metric-cards small {
    margin-top: 5px;
  }

  .page-progress-122 .p122-actions {
    margin-top: 18px;
  }

  .page-progress-122 .p122-hero-art,
  .page-progress-122 .p122-hero-photo {
    height: clamp(300px, 48vw, 360px);
    min-height: clamp(300px, 48vw, 360px);
  }

  .page-progress-122 .p122-hero-art {
    overflow: hidden;
    border-radius: 24px;
  }

  .page-progress-122 .p122-hero-photo {
    border-radius: 24px;
  }

  .page-progress-122 .p122-float {
    width: clamp(104px, 22vw, 138px);
  }

  .page-progress-122 .p122-float-donut {
    width: clamp(124px, 26vw, 160px);
  }
}

@media (min-width: 700px) and (max-width: 1439px) {
  .page-progress-122 .p122-hero-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: 22px;
    align-items: center;
  }

  .page-progress-122 .p122-hero-copy h1 {
    font-size: clamp(34px, 4.7vw, 40px);
  }

  .page-progress-122 .p122-hero-copy > p {
    font-size: 15px;
    line-height: 1.62;
  }

  .page-progress-122 .p122-metric-cards {
    gap: 10px;
  }

  .page-progress-122 .p122-metric-cards article {
    min-height: 92px;
    padding: 12px 10px;
  }

  .page-progress-122 .p122-metric-cards strong {
    font-size: 25px;
  }

  .page-progress-122 .p122-metric-cards small {
    font-size: 10px;
  }

  .page-progress-122 .p122-actions {
    gap: 10px;
  }

  .page-progress-122 .p122-actions .btn {
    min-height: 48px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .page-progress-122 .p122-hero-art,
  .page-progress-122 .p122-hero-photo {
    height: 350px;
    min-height: 350px;
  }

  .system-ai-cta-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
    align-items: center;
  }

  .system-ai-cta h2 {
    font-size: clamp(2.25rem, 4.4vw, 3.05rem);
  }

  .system-ai-cta-visual {
    min-height: 320px;
  }

  .system-ai-cta-checks {
    gap: 12px 18px;
  }

  .system-ai-cta-button {
    min-width: min(100%, 360px);
  }
}

@media (max-width: 640px) {
  :root {
    --layout-section-y-tight: 28px;
    --layout-section-y: 36px;
    --layout-section-y-roomy: 44px;
    --layout-grid-gap: 14px;
    --layout-major-gap: 22px;
  }

  .section-title {
    margin-bottom: 18px;
  }

  .section-subtitle {
    margin-bottom: 22px;
  }

  .hero h1,
  .faq-ref-hero h1,
  .p122-hero h1,
  .system-ai-cta h2 {
    font-size: clamp(2rem, 8.2vw, 3rem);
    line-height: 1.16;
  }

  .system-ai-cta {
    padding: 24px 18px 26px;
  }

  .system-ai-cta-visual {
    min-height: 280px;
  }

  .system-ai-cta-steps {
    gap: 8px;
  }

  .page-progress-122 .p122-shell {
    width: min(100% - 28px, 720px);
  }

  .page-progress-122 .p122-hero {
    padding-top: 28px !important;
  }

  .page-progress-122 .p122-kicker {
    margin-bottom: 8px;
  }

  .page-progress-122 .p122-hero-copy h1 {
    font-size: clamp(30px, 8.3vw, 36px);
    line-height: 1.18;
  }

  .page-progress-122 .p122-hero-copy > p {
    font-size: 15px;
  }

  .page-progress-122 .p122-metric-cards {
    gap: 10px;
  }

  .page-progress-122 .p122-metric-cards article {
    min-height: 94px;
    padding: 12px 10px;
  }

  .page-progress-122 .p122-metric-cards span {
    font-size: 12px;
  }

  .page-progress-122 .p122-metric-cards strong {
    font-size: 24px;
  }

  .page-progress-122 .p122-metric-cards small {
    font-size: 10px;
  }

  .page-progress-122 .p122-hero-art,
  .page-progress-122 .p122-hero-photo {
    height: 276px;
    min-height: 276px;
  }

  .page-progress-122 .p122-float-trend {
    top: 14px;
    left: 10px;
  }

  .page-progress-122 .p122-float-days {
    top: 14px;
    right: 10px;
  }

  .page-progress-122 .p122-float-donut {
    right: 10px;
    bottom: 12px;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: var(--space-md);
  }
}

/* Unified hero standard: about page is the source of truth. */
.page-main .hero {
  border-bottom: 1px solid rgba(218, 229, 231, 0.68);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(247, 251, 250, 0.56) 100%),
    radial-gradient(circle at 72% 18%, rgba(var(--ideal-teal-rgb) / 0.08), transparent 28rem);
}

.page-main .hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.76) 34%, transparent 64%),
    linear-gradient(180deg, transparent 74%, rgba(255, 255, 255, 0.62));
}

.page-main .hero::after {
  display: none;
}

.page-main .hero-content {
  z-index: 4;
  align-content: center;
  max-width: min(680px, 54vw);
  padding-left: clamp(0px, 2vw, 28px);
}

.page-main .hero-taste-badge {
  display: inline-flex !important;
  margin-bottom: 14px;
}

.page-main .hero .eyebrow,
.page-home .hero .eyebrow,
.page-coach .hero .eyebrow,
.page-parent .hero .eyebrow {
  display: inline-flex !important;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ideal-teal);
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.page-main .hero .eyebrow::before,
.page-main .hero .eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.page-main .hero h1 {
  max-width: min(12.4em, 720px) !important;
  color: var(--ideal-ink);
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(2.55rem, 3.55vw, 4.05rem);
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

.page-main .hero-title-main,
.page-main .hero-title-sub {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 1em;
  line-height: 1.2;
  white-space: normal;
}

.page-main .hero h1 .teal {
  color: var(--ideal-teal);
  font-weight: 720;
}

.page-main .hero h1 .accent {
  color: var(--ideal-coral);
  font-weight: 720;
}

.page-main .hero-copy {
  max-width: 40rem;
  margin-top: 18px;
  color: #3f4a56;
  font-size: clamp(0.95rem, 0.92vw, 1.05rem);
  font-weight: 650;
  line-height: 1.86;
}

.page-main .hero-actions {
  margin-top: 22px;
}

.page-main .hero-social,
.page-main .hero-widget {
  display: none !important;
}

.page-main .hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  max-width: min(640px, 100%);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 3vw, 34px);
}

.page-main .hero-point {
  display: grid;
  gap: 8px;
  width: clamp(122px, 12vw, 170px);
  color: var(--ideal-ink);
  font-size: 0.82rem;
  font-weight: 760;
}

.page-main .hero-point .icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 14px 34px rgba(38, 70, 82, 0.06);
}

.page-main .hero-point strong {
  font-size: 0.9rem;
  font-weight: 900;
}

.page-main .hero-point span {
  color: var(--ideal-muted);
  line-height: 1.55;
}

.page-main .hero-flow-command {
  display: grid !important;
  width: min(640px, 100%);
  margin-top: clamp(18px, 2.1vw, 28px);
}

.page-main .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  pointer-events: none;
}

.page-main .hero .photo-card {
  position: absolute;
  inset: 0 0 0 auto;
  pointer-events: auto;
  width: min(62vw, 940px) !important;
  min-width: 0 !important;
  max-width: none;
  height: 100% !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-main .hero .photo-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.83) 29%, rgba(255, 255, 255, 0.34) 50%, transparent 70%),
    linear-gradient(180deg, transparent 76%, rgba(255, 255, 255, 0.48));
}

.page-main .hero .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.96) contrast(0.98);
  animation: none;
  transform: none;
}

.page-main .hero-preview-wall {
  display: block;
  pointer-events: auto;
}

@media (min-width: 1440px) {
  .site-scale-viewport.is-desktop-stage .page-main .hero {
    height: 720px;
    min-height: 720px;
    grid-template-columns: minmax(350px, 0.9fr) minmax(520px, 1.1fr);
    padding-block: 58px 48px;
  }

  .site-scale-viewport.is-desktop-stage .page-main .hero h1 {
    font-size: clamp(3.85rem, 3.7vw, 4.55rem);
    line-height: 1.1;
  }
}

@media (max-width: 1023px) {
  .site .page-main .hero,
  .site .page-main:not(.page-home) .hero,
  .site .page-home .hero {
    min-height: auto;
    height: auto;
    grid-template-columns: 1fr;
    padding: 44px var(--page-gutter) 34px;
    overflow: hidden;
  }

  .site .page-main .hero-content,
  .site .page-main:not(.page-home) .hero-content,
  .site .page-home .hero-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
  }

  .site .page-main .hero h1,
  .site .page-main:not(.page-home) .hero h1,
  .site .page-home .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.05rem, 6.1vw, 3.15rem);
    line-height: 1.16;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .site .page-main .hero-copy,
  .site .page-main:not(.page-home) .hero-copy,
  .site .page-home .hero-copy {
    max-width: 100%;
    line-height: 1.72;
  }

  .site .page-main .hero-points,
  .site .page-main:not(.page-home) .hero-points,
  .site .page-home .hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    align-items: start;
    max-width: 100%;
    gap: 8px 14px;
    margin-top: 18px;
  }

  .site .page-main .hero-point,
  .site .page-main:not(.page-home) .hero-point,
  .site .page-home .hero-point {
    width: auto;
    min-width: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  .site .page-main .hero-point .icon,
  .site .page-main:not(.page-home) .hero-point .icon,
  .site .page-home .hero-point .icon {
    display: none !important;
  }

  .site .page-main .hero-point strong,
  .site .page-main:not(.page-home) .hero-point strong,
  .site .page-home .hero-point strong {
    font-size: 0.84rem;
    line-height: 1.32;
  }

  .site .page-main .hero-point span:not(.icon),
  .site .page-main:not(.page-home) .hero-point span:not(.icon),
  .site .page-home .hero-point span:not(.icon) {
    display: none;
  }

  .site .page-main .hero-visual,
  .site .page-main:not(.page-home) .hero-visual,
  .site .page-home .hero-visual {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    min-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
    overflow: visible;
    pointer-events: none;
  }

  .site .page-main .hero .photo-card,
  .site .page-main:not(.page-home) .hero .photo-card,
  .site .page-home .hero .photo-card {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
  }

  .site .page-main .hero .photo-card img,
  .site .page-main:not(.page-home) .hero .photo-card img,
  .site .page-home .hero .photo-card img {
    object-position: center;
  }

  .site .page-main .hero-preview-wall,
  .site .page-main:not(.page-home) .hero-preview-wall,
  .site .page-home .hero-preview-wall {
    display: none;
  }
}

@media (max-width: 640px) {
  .site .page-main .hero,
  .site .page-main:not(.page-home) .hero,
  .site .page-home .hero {
    padding-top: 32px;
  }

  .site .page-main .hero-points,
  .site .page-main:not(.page-home) .hero-points,
  .site .page-home .hero-points {
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 8px 10px;
  }

  .site .page-main .hero-flow-command,
  .site .page-main:not(.page-home) .hero-flow-command,
  .site .page-home .hero-flow-command {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready :is(
    .faq-ref-category-grid,
    .faq-ref-main-section,
    .faq-ref-concerns,
    .faq-ref-cta,
    .taste-loop-strip,
    .section,
    .cta-band,
    .footer
  ):not(.is-visible),
  .motion-child,
  html.motion-ready :is(.hero, .faq-ref-hero, .faq-ref-category-grid, .faq-ref-main-section, .faq-ref-concerns, .faq-ref-cta, .taste-loop-strip, .section, .cta-band, .footer):not(.is-visible) .motion-child {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  .is-switching,
  .faq details.is-opening,
  html.motion-ready :is(.hero, .faq-ref-hero).is-visible .motion-child,
  .page-main :is(.icon, .faq-ref-category img, .p122-why-grid span, .p122-proof-grid span),
  .page-main :is(
    .about-ref-team-card,
    .about-ref-news-card,
    .about-ref-role-card,
    .p122-why-grid article,
    .p122-proof-grid article,
    .p122-feedback-grid article,
    .faq-ref-category,
    .faq-ref-side-card,
    .faq-ref-concern,
    .trust-metric,
    .choice-feature
  ) {
    animation: none !important;
    transition: none !important;
  }

  .page-main [data-premium-tilt],
  .page-main [data-premium-tilt]:hover {
    transform: none !important;
  }

  .system-ai-cta *,
  .system-ai-cta *::before,
  .system-ai-cta *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   P0 redesign additions — dropdown navigation + language switch
   (DESIGN.md 補強清單 item 1)
   ============================================================ */
.site-nav .nav-item { position: relative; display: flex; align-items: center; }
.site-nav .nav-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 23px 0;
  transition: color 160ms ease;
}
.site-nav .nav-item:hover .nav-toggle,
.site-nav .nav-item:focus-within .nav-toggle { color: var(--teal-strong); }
.nav-caret { font-size: 0.72em; line-height: 1; transition: transform 200ms ease, color 200ms ease; }
.site-nav .nav-item:hover .nav-caret,
.site-nav .nav-item:focus-within .nav-caret { transform: rotate(180deg); color: var(--coral); }

.site-nav .nav-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  min-width: 214px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 80;
}
.site-nav .nav-item:hover .nav-menu,
.site-nav .nav-item:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* dropdown items override the inline-link styling inherited from .site-nav a */
.site-nav .nav-menu a {
  padding: 10px 14px; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.site-nav .nav-menu a::after { display: none !important; }
.site-nav .nav-menu a:hover { background: var(--teal-soft); color: var(--teal-strong); }

/* language switcher */
.lang-switch { position: relative; }
.lang-toggle {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  font: inherit; font-size: 0.8rem; font-weight: 700;
  transition: border-color 140ms ease, color 140ms ease;
}
.lang-toggle:hover { border-color: var(--teal); color: var(--teal-strong); }
.lang-menu {
  position: absolute; top: 100%; right: 0; transform: translateY(8px);
  min-width: 144px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 80;
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.lang-menu button {
  appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 9px 12px; border-radius: 9px;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--ink);
}
.lang-menu button:hover { background: var(--teal-soft); color: var(--teal-strong); }

@media (max-width: 900px) {
  .lang-switch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-menu, .lang-menu, .nav-caret { transition: none; }
}

/* header login dropdown (groups 學生 + 機構／老師 logins) */
.login-switch { position: relative; }
.login-switch .login-toggle {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; gap: 4px;
}
.login-switch .login-toggle .nav-caret {
  font-size: 0.72rem; line-height: 1; transition: transform 180ms ease;
}
.login-switch:hover .login-toggle .nav-caret,
.login-switch:focus-within .login-toggle .nav-caret { transform: rotate(180deg); }
.login-menu {
  position: absolute; top: 100%; right: 0; transform: translateY(8px);
  min-width: 200px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 80;
}
.login-switch:hover .login-menu,
.login-switch:focus-within .login-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.login-menu a {
  text-decoration: none; text-align: left; padding: 10px 12px; border-radius: 9px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.login-menu a:hover { background: var(--teal-soft); color: var(--teal-strong); }
.login-menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .login-menu, .login-switch .login-toggle .nav-caret { transition: none; }
}


/* === UI fix: cta-band primary button contrast (white bg + teal text) ===
   beats .page-home .btn:not(.secondary) which set a teal gradient bg with no text color,
   producing teal-on-teal (invisible) on pages that carry page-home + a .cta-band (e.g. k12). */
.page-home .cta-band .btn:not(.secondary),
.cta-band .cta-actions .btn:not(.secondary),
.cta-band .btn:not(.secondary) {
  background: #fff;
  color: var(--teal-strong);
  box-shadow: 0 16px 32px rgba(42, 113, 121, 0.18);
}
/* nav dropdown items: solid readable ink */
.site-nav .nav-menu a { color: var(--ink); font-weight: 700; }


/* === cta-band: force readable contrast across all breakpoints (overrides template responsive variants) === */
.site .cta-band {
  background: linear-gradient(110deg, #178f8a 0%, #2aa39b 45%, #df6675 100%) !important;
}
.site .cta-band h2,
.site .cta-band p,
.site .cta-band small { color: #fff !important; }
.site .cta-band p { color: rgba(255, 255, 255, 0.95) !important; }
.site .cta-band .btn:not(.secondary) {
  background: #fff !important;
  color: var(--teal-strong) !important;
}


/* download hero: move the 支援平台 metric card into the empty mid-zone so it no longer overlaps the main card (download preview-metric reposition) */
.page-download .hero-preview-wall .preview-metric { top: 232px !important; right: -4px !important; }

/* download hero: the main preview card holds a SQUARE app icon, not a wide photo.
   The template figure stretches taller-than-wide + object-fit:cover, which crops the
   icon's sides ("被切到了"). Make the figure square so the 512x512 icon shows in full. */
.page-download .preview-main { align-items: center; }
.page-download .preview-main figure { align-self: center; aspect-ratio: 1 / 1; height: auto; }
.page-download .preview-main img { object-fit: contain; object-position: center; }


/* header 學生登入入口 */
.header-actions .nav-login{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;font-size:.92rem;font-weight:800;color:var(--teal-strong);border:1px solid var(--line);background:rgba(255,255,255,.7);transition:border-color .14s ease,color .14s ease,background .14s ease;white-space:nowrap}
.header-actions .nav-login:hover{border-color:var(--teal);background:var(--teal-soft)}
@media (max-width:520px){.header-actions .nav-login{display:none}}