:root {
  --primary: #0f5b3a;
  --bg: #06110b;
  --secondary: #c8a24a;
  --surface: #0b1f15;
  --surface-2: #10281b;
  --text: #f7f1e1;
  --muted: rgba(247, 241, 225, .7);
  --faint: rgba(247, 241, 225, .48);
  --line: rgba(200, 162, 74, .2);
  --shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

/* Master Class redesigned sales page */
.class-page { overflow: hidden; }

.class-story-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(8rem, 12vw, 10.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.class-story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--primary) 36%, transparent), transparent 22rem),
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 24rem),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.34));
}

.class-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.class-quote h1,
.choice-copy h2 {
  margin: .8rem 0 1rem;
  color: var(--text);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(3.2rem, 7.8vw, 8.5rem);
  font-weight: 950;
  line-height: .88;
  letter-spacing: 0;
}

.class-quote h1 span,
.choice-copy h2 span {
  display: block;
  color: transparent;
  background:
    linear-gradient(115deg, transparent 0 14%, rgba(24,185,121,.95) 25%, rgba(221,255,238,.9) 33%, transparent 45% 100%),
    linear-gradient(90deg, #efe2b8, #fff, #28cf86, #d6d6d6);
  background-size: 230% 100%, 100% 100%;
  background-position: -120% center, center;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-word-scan 5.8s ease-in-out infinite;
}

.class-quote .lead {
  max-width: 760px;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.class-hero-actions,
.choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.class-video-shell {
  position: relative;
  min-height: min(68svh, 620px);
  display: grid;
  place-items: center;
}

.class-video-shell::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 17rem),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  filter: blur(10px);
}

.class-video-frame {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    linear-gradient(rgba(247,241,225,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,241,225,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.12), transparent 18rem),
    linear-gradient(160deg, #101b15, #030604 70%);
  background-size: 46px 46px, 46px 46px, auto, auto;
  box-shadow: 0 36px 110px rgba(0,0,0,.44), 0 0 72px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px rgba(255,255,255,.14);
  text-align: center;
}

.video-status {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 999px;
  padding: .42rem .7rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-family: "Space Grotesk", sans-serif;
  font-size: .78rem;
  font-weight: 900;
}

.play-orb {
  width: clamp(74px, 9vw, 112px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3efe4, #7ed39d 46%, #c8a24a);
  box-shadow: 0 0 48px color-mix(in srgb, var(--accent) 36%, transparent), inset 0 -10px 24px rgba(0,0,0,.18);
}

.play-orb::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 32% 0 0 39%;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid #06110b;
}

.class-video-frame p {
  max-width: 280px;
  margin: 1rem auto .2rem;
  color: var(--text);
  font-weight: 900;
}

.class-video-frame small {
  color: var(--muted);
  font-weight: 700;
}

.class-conversation,
.class-change,
.class-reviews-showcase,
.class-detail-section,
.class-final-choice {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.life-flow-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(6rem, 10vw, 9rem) 0;
}

.life-flow-card {
  position: relative;
  width: min(980px, 100%);
  min-height: clamp(520px, 64vh, 680px);
  display: grid;
  align-items: center;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--secondary) 10%);
  border-radius: 32px;
  padding: clamp(1.4rem, 4vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 17rem),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow:
    0 34px 110px rgba(0,0,0,.34),
    inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

.life-progress {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.life-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 55%, transparent);
  transition: width .32s ease;
}

.life-step {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 820px;
  animation: life-step-in .42s ease both;
}

.life-step[hidden] {
  display: none !important;
}

.life-step h2 {
  max-width: 860px;
  margin: 0;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(2.35rem, 5.8vw, 6.3rem);
  font-weight: 950;
  line-height: .96;
  text-wrap: balance;
}

.life-step p {
  max-width: 740px;
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
  font-weight: 800;
  line-height: 1.7;
}

.life-name-field {
  display: grid;
  gap: .7rem;
  max-width: 520px;
  color: var(--text);
  font-weight: 900;
}

.life-name-field input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 999px;
  padding: 1rem 1.15rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  font: inherit;
  outline: none;
}

.life-name-field input:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.life-options,
.life-checks {
  display: grid;
  gap: .85rem;
  max-width: 720px;
}

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

.life-options button,
.life-checks label,
.life-next {
  min-height: 56px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--secondary) 12%);
  border-radius: 999px;
  padding: .92rem 1.1rem;
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 74%, transparent));
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.life-options button:hover,
.life-checks label:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 56%, var(--secondary) 22%);
  background:
    radial-gradient(circle at 14% 30%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 9rem),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.life-next {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.life-next.primary {
  color: #06110b;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent);
}

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

.life-checks label {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-radius: 20px;
}

.life-checks input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.life-pause {
  max-width: 900px;
  min-height: 420px;
  place-content: center;
  text-align: center;
}

.life-pause h2 {
  font-size: clamp(2rem, 4.8vw, 5.4rem);
}

.life-wait-bar {
  width: min(520px, 100%);
  height: 4px;
  margin: 1rem auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.life-wait-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform-origin: left;
  animation: life-wait 5s linear both;
}

.life-summary {
  max-width: 880px;
}

.life-reflection,
.life-truth {
  border-left: 4px solid var(--primary);
  border-radius: 0 24px 24px 0;
  padding: 1rem 1.15rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 13%, transparent), transparent);
}

.life-reflection ul {
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-weight: 850;
  line-height: 1.75;
}

.life-truth {
  border-left-color: var(--secondary);
  background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 13%, transparent), transparent);
}

.life-truth strong {
  display: block;
  margin-bottom: .65rem;
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 950;
}

@keyframes life-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes life-wait {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 700px) {
  .life-flow-card {
    min-height: 560px;
    border-radius: 24px;
    padding: 1.25rem;
  }

  .life-options,
  .life-checks {
    grid-template-columns: 1fr;
  }

  .life-step h2 {
    font-size: clamp(2rem, 12vw, 3.8rem);
  }
}

.talk-block { max-width: 980px; }

.talk-block h2,
.class-change h2,
.class-detail-section h2,
.class-reviews-showcase h2 {
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 6.4rem);
  font-weight: 950;
  line-height: .95;
}

.talk-block p:not(.eyebrow) {
  max-width: 820px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
}

.talk-belief {
  max-width: 1180px;
  text-wrap: balance;
}

.talk-belief span {
  display: inline-block;
  color: transparent;
  background:
    linear-gradient(115deg, transparent 0 14%, rgba(24,185,121,.95) 25%, rgba(221,255,238,.9) 33%, transparent 45% 100%),
    linear-gradient(90deg, #efe2b8, #fff, #28cf86, #d6d6d6);
  background-size: 230% 100%, 100% 100%;
  background-position: -120% center, center;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--primary) 22%, transparent));
  animation: hero-word-scan 5.8s ease-in-out infinite;
}

.talk-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.talk-reasons p {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 999px;
  padding: .78rem 1rem;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 8rem),
    color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  font-size: clamp(.98rem, 1.35vw, 1.12rem) !important;
  font-weight: 900 !important;
  line-height: 1.25;
}

.talk-reality {
  position: relative;
  max-width: 900px !important;
  margin-top: clamp(1rem, 2.6vw, 1.7rem);
  border-left: 4px solid var(--secondary);
  border-radius: 0 22px 22px 0;
  padding: .95rem 1.1rem;
  color: color-mix(in srgb, var(--text) 88%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 12%, transparent), transparent);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  font-weight: 900 !important;
}

.talk-reality.strong-question {
  max-width: 980px !important;
  border-left-color: var(--primary);
  color: var(--text) !important;
  background:
    radial-gradient(circle at 14% 30%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 12rem),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--secondary) 8%, transparent));
  box-shadow: 0 22px 58px color-mix(in srgb, var(--primary) 8%, transparent);
}

.reason-rows {
  display: grid;
  gap: .75rem;
  margin-top: clamp(1.6rem, 4vw, 3rem);
}

.reason-rows article {
  display: grid;
  grid-template-columns: auto minmax(0, .54fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  padding: .9rem 1rem;
  color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface-2) 56%, transparent));
}

.reason-rows span,
.detail-list span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 900;
}

.reason-rows b { font-size: clamp(1rem, 1.7vw, 1.35rem); }

.reason-rows small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  padding-top: 1.2rem;
}

.inline-cta p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.change-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.change-panels article,
.class-detail-grid,
.class-final-choice .shell {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 30px;
  background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 17rem), linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent));
  box-shadow: var(--soft-glow);
}

.change-panels article { padding: clamp(1.2rem, 3vw, 2rem); }

.change-panels .after {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 18rem), linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--primary) 18%, var(--surface-2)));
}

.change-panels h3 {
  margin-top: 0;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.change-panels ul {
  display: grid;
  gap: .8rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-weight: 800;
}

.class-difference-table {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 980px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 19rem),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 34px 110px rgba(0,0,0,.36),
    0 0 72px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
}

.class-difference-table::before {
  content: "";
  position: absolute;
  inset: -35% 35% -35% auto;
  z-index: -1;
  width: 42%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(18px);
  transform: skewX(-12deg);
  animation: class-table-scan 7s ease-in-out infinite;
}

.diff-row {
  display: grid;
  grid-template-columns: .9fr 1.15fr 1.15fr;
  min-height: 82px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}

.diff-row > div {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-right: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  padding: 1rem 1.15rem;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-weight: 900;
  line-height: 1.35;
}

.diff-row > div:last-child {
  border-right: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.diff-head {
  min-height: 78px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
}

.diff-head > div {
  color: var(--text);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
}

.diff-row:not(.diff-head) > div:first-child {
  color: var(--accent);
  font-family: "Space Grotesk", "Kanit", sans-serif;
  text-transform: uppercase;
}

.diff-row:not(.diff-head) > div:nth-child(2) {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.diff-row:not(.diff-head) > div:nth-child(3) {
  color: var(--text);
}

.diff-bad,
.diff-good {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 900;
}

.diff-bad {
  color: color-mix(in srgb, var(--text) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: rgba(255,255,255,.04);
}

.diff-good {
  color: #06110b;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 26%, transparent);
}

.diff-foot {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
  font-family: "Space Grotesk", "Kanit", sans-serif;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.diff-foot i {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

@keyframes class-table-scan {
  0%, 34% { transform: translateX(-150%) skewX(-12deg); opacity: 0; }
  48% { opacity: 1; }
  76%, 100% { transform: translateX(190%) skewX(-12deg); opacity: 0; }
}

.review-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(190px, 1fr));
  gap: .85rem;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  overflow-x: auto;
  padding-bottom: .8rem;
  scroll-snap-type: x mandatory;
}

.review-flow figure {
  min-width: 190px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--soft-glow);
  scroll-snap-align: start;
}

.review-flow img {
  display: block;
  width: 100%;
  height: auto;
}

.review-marquee {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.featured-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(1120px, 100%);
  margin: clamp(1.8rem, 4vw, 3rem) auto clamp(1.4rem, 3vw, 2.2rem);
  align-items: stretch;
}

.featured-review-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--primary) 18%);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 14rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--bg) 86%, transparent));
  box-shadow:
    0 20px 48px color-mix(in srgb, #000 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.featured-review-card.is-featured {
  border-color: color-mix(in srgb, var(--text) 50%, var(--primary));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 16rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  box-shadow:
    0 28px 72px color-mix(in srgb, #000 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--secondary) 20%, transparent),
    0 0 54px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-10px);
}

.featured-review-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--primary));
  box-shadow:
    0 26px 70px color-mix(in srgb, #000 34%, transparent),
    0 0 62px color-mix(in srgb, var(--primary) 18%, transparent);
}

.featured-review-card.is-featured:hover {
  transform: translateY(-14px);
}

.featured-review-card figure {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.featured-review-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.featured-review-card:hover img {
  transform: scale(1.045);
}

.featured-review-card > div {
  display: grid;
  min-height: 210px;
  gap: .65rem;
  align-content: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  text-align: center;
}

.featured-review-card h3 {
  max-width: 260px;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(1.22rem, 1.75vw, 1.58rem);
  line-height: 1.22;
  font-weight: 920;
  letter-spacing: 0;
}

.featured-review-card p {
  max-width: 280px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: .92rem;
  line-height: 1.65;
  font-weight: 700;
}

.featured-review-card .review-meta {
  width: fit-content;
  margin-inline: auto;
  border-radius: 999px;
  padding: .28rem .65rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.featured-review-card .review-meta span {
  display: inline-block;
  margin-right: .32rem;
  border-radius: 999px;
  padding: .12rem .44rem;
  background: var(--text);
  color: var(--bg);
}

.featured-review-card > a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--secondary) 16%, transparent);
  transition: transform .22s ease, filter .22s ease;
}

.featured-review-card:not(.is-featured) > a {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: none;
}

.featured-review-card > a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.featured-review-card {
  display: flex;
  grid-template-rows: none;
  flex-direction: column;
  gap: .85rem;
  padding: .55rem .55rem 1rem;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--secondary) 18%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 84%, transparent));
  box-shadow:
    0 20px 50px color-mix(in srgb, #000 26%, transparent),
    0 0 44px color-mix(in srgb, var(--primary) 12%, transparent);
}

.featured-review-card:nth-child(2) {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--primary));
  box-shadow:
    0 24px 60px color-mix(in srgb, #000 30%, transparent),
    0 0 58px color-mix(in srgb, var(--accent) 16%, transparent);
}

.featured-review-card:hover,
.featured-review-card.is-featured:hover {
  transform: translateY(-5px);
}

.featured-review-card > div {
  min-height: 0;
  gap: .45rem;
  padding: 0 .35rem;
  border-bottom: 0;
  text-align: left;
}

.featured-review-card h3 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.35;
  font-weight: 850;
}

.featured-review-card p {
  max-width: none;
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
}

.featured-review-card .review-meta {
  margin-inline: 0;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: .78rem;
  font-weight: 900;
}

.review-follow-copy {
  margin-top: clamp(1rem, 3vw, 2rem);
}

.review-marquee::before,
.review-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 3;
  width: min(16vw, 10rem);
  height: 100%;
  pointer-events: none;
}

.review-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.review-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

.review-marquee-row {
  overflow: hidden;
  padding: .35rem 0;
}

.review-marquee-track {
  display: flex;
  width: max-content;
  min-width: 200%;
  gap: 1rem;
  animation: review-marquee-scroll 34s linear infinite;
  will-change: transform;
}

.review-marquee-row.reverse .review-marquee-track {
  animation-direction: reverse;
  animation-duration: 38s;
}

.review-marquee:hover .review-marquee-track {
  animation-play-state: paused;
}

.review-marquee figure {
  width: clamp(220px, 22vw, 320px);
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--secondary) 14%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--bg) 72%, transparent));
  box-shadow:
    0 16px 38px color-mix(in srgb, #000 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent),
    0 0 34px color-mix(in srgb, var(--primary) 9%, transparent);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.review-marquee figure:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--primary));
  box-shadow:
    0 22px 48px color-mix(in srgb, #000 28%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 15%, transparent);
}

.review-marquee img {
  display: block;
  width: 100%;
  height: auto;
}

.review-trust-note {
  max-width: 980px;
  margin-inline: auto;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--primary) 18%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 62%, transparent), color-mix(in srgb, var(--bg) 86%, transparent));
}

.review-trust-note p {
  max-width: 820px;
}

@keyframes review-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - .5rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .review-marquee-track {
    animation: none;
    transform: none;
  }

  .review-marquee {
    overflow-x: auto;
    padding-bottom: .75rem;
  }
}

@media (max-width: 760px) {
  .featured-reviews {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
  }

  .featured-review-card:nth-child(2) {
    transform: none;
  }

  .featured-review-card.is-featured,
  .featured-review-card.is-featured:hover {
    transform: none;
  }

  .class-offer-panel {
    grid-template-columns: 1fr !important;
  }

  .class-offer-main {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  }

  .offer-actions .btn {
    width: 100%;
  }
}

.class-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.4rem, 4vw, 3rem);
}

.class-detail-grid > div > p {
  color: var(--muted);
  font-weight: 700;
}

.class-detail-grid small {
  display: block;
  margin-top: .8rem;
  color: var(--accent);
  font-weight: 900;
}

.detail-list { display: grid; gap: .8rem; }

.detail-list article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  padding: .85rem 0;
}

.detail-list article:last-child { border-bottom: 0; }
.detail-list h3,
.detail-list p { margin: 0; }

.detail-list p {
  grid-column: 2;
  color: var(--muted);
  font-weight: 700;
}

.masterclass-stack {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.masterclass-intro,
.masterclass-benefits,
.masterclass-afterpay > article {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 18rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent));
  box-shadow: var(--soft-glow);
}

.masterclass-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .42fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 4vw, 3rem);
}

.masterclass-intro h2,
.masterclass-benefits h2 {
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem);
  font-weight: 950;
  line-height: .92;
}

.masterclass-intro p {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 800;
}

.masterclass-price-card {
  display: grid;
  gap: .6rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 44%, transparent);
  border-radius: 26px;
  padding: clamp(1rem, 3vw, 1.5rem);
  background:
    radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 10rem),
    color-mix(in srgb, var(--bg) 44%, transparent);
  box-shadow: 0 22px 58px rgba(0,0,0,.26);
}

.masterclass-price-card small {
  color: var(--muted);
  font-weight: 900;
}

.masterclass-price-card s {
  color: color-mix(in srgb, var(--text) 50%, transparent);
}

.masterclass-price-card strong {
  color: transparent;
  background: linear-gradient(90deg, #efe2b8, #fff, #28cf86, #d6d6d6);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: .9;
}

.masterclass-price-card span {
  color: var(--accent);
  font-weight: 900;
}

.class-offer-panel {
  grid-template-columns: minmax(0, .95fr) minmax(320px, .9fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--bg) 74%, transparent)) !important;
}

.class-offer-main,
.class-offer-features {
  min-height: 100%;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.class-offer-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.offer-badge {
  width: fit-content;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px;
  padding: .42rem .75rem;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text) !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
}

.class-offer-main h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem) !important;
  line-height: .98 !important;
}

.class-offer-main > p {
  max-width: 580px;
  margin: 0;
}

.offer-price-line {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
}

.offer-price-line strong {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 900;
  line-height: .88;
}

.offer-price-line s {
  color: color-mix(in srgb, var(--text) 48%, transparent);
  font-size: 1.18rem;
  font-weight: 800;
}

.offer-price-line span {
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 999px;
  padding: .3rem .65rem;
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: .85rem;
  font-weight: 900;
}

.offer-mini-list,
.class-offer-features ul {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-mini-list li,
.class-offer-features li {
  position: relative;
  padding-left: 2rem;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-weight: 750;
  line-height: 1.5;
}

.offer-mini-list li::before,
.class-offer-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .02rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  color: #06110b;
  background: linear-gradient(135deg, color-mix(in srgb, var(--text) 86%, var(--primary)), var(--secondary));
  font-size: .78rem;
  font-weight: 950;
}

.offer-actions {
  display: grid;
  gap: .8rem;
  margin-top: auto;
}

.offer-actions .btn {
  width: min(360px, 100%);
  justify-content: space-between;
}

.purchase-btn::after {
  content: "→";
  margin-left: .8rem;
}

.class-offer-features {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.class-offer-features h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 900;
}

.feature-group-label {
  width: fit-content;
  margin: .4rem 0 -.15rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 999px;
  padding: .34rem .68rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .02em;
}

.class-offer-features ul + .feature-group-label {
  margin-top: .85rem;
}

.class-offer-features li strong {
  color: color-mix(in srgb, var(--text) 92%, var(--secondary));
}

.class-offer-features li span {
  display: block;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  font-size: .92rem;
  font-weight: 700;
}

.offer-proof-card {
  display: grid;
  gap: .75rem;
  margin-top: .5rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 18px;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
}

.offer-proof-card div {
  display: grid;
  gap: .15rem;
}

.offer-proof-card strong {
  color: var(--text);
  font-weight: 900;
}

.offer-proof-card span,
.offer-proof-card p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-weight: 700;
}

.offer-proof-card p {
  font-style: italic;
}

.masterclass-benefits {
  padding: clamp(1.4rem, 4vw, 3rem);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.benefit-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface-2) 52%, transparent));
}

.benefit-grid article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}

.benefit-grid span {
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 900;
}

.benefit-grid h3 {
  margin: .35rem 0;
  color: var(--text);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
}

.benefit-grid p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.masterclass-afterpay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .56fr);
  gap: 1rem;
}

.masterclass-afterpay > article {
  padding: clamp(1.2rem, 3vw, 2rem);
}

.masterclass-afterpay h3 {
  margin-top: 0;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
}

.masterclass-afterpay ul {
  display: grid;
  gap: .72rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-weight: 800;
}

.masterclass-afterpay p {
  margin: 1rem 0 0;
  color: var(--accent);
  font-weight: 900;
}

.payment-card {
  border-color: color-mix(in srgb, var(--secondary) 42%, transparent) !important;
}

.payment-card dl {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 1.2rem;
}

.payment-card dl div {
  display: grid;
  grid-template-columns: .42fr 1fr;
  gap: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  padding-bottom: .65rem;
}

.payment-card dt {
  color: var(--muted);
  font-weight: 800;
}

.payment-card dd {
  margin: 0;
  color: var(--text);
  font-weight: 950;
}

.class-final-choice .shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.choice-copy p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 800;
}

.choice-actions { align-content: center; }

.class-final-choice {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.class-final-choice .shell {
  width: min(1180px, calc(100% - 2rem));
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.4rem);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 20rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--bg) 72%, transparent));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

.choice-copy {
  max-width: 760px;
  margin-inline: auto;
}

.choice-copy h2 {
  max-width: 760px;
  margin: .8rem auto .7rem;
  font-size: clamp(2.45rem, 6vw, 5.2rem) !important;
  line-height: .9 !important;
  text-wrap: balance;
}

.choice-copy p:not(.eyebrow) {
  max-width: 680px;
  margin-inline: auto;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.65;
}

.choice-actions {
  display: grid;
  width: min(640px, 100%);
  margin: 0 auto;
  gap: .85rem;
}

.choice-guide {
  width: fit-content;
  max-width: min(720px, 100%);
  margin: -.35rem auto .15rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  padding: .55rem 1rem;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(.92rem, 1.25vw, 1.04rem);
  font-weight: 850;
  line-height: 1.35;
}

.choice-actions .hero-choice {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  flex-direction: column;
  gap: .18rem;
  border-radius: 24px;
  padding: 1rem 1.35rem;
}

.choice-actions .hero-choice span {
  display: block;
  font-size: clamp(1.04rem, 2vw, 1.28rem);
}

.choice-actions .hero-choice small {
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  font-size: .88rem;
  font-weight: 750;
}

.choice-actions .hero-choice.secondary small {
  color: color-mix(in srgb, var(--secondary) 76%, var(--text));
}

.class-final-choice .choice-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1100px, 100%);
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
}

.class-final-choice .hero-choice {
  min-height: 300px;
  align-items: stretch;
  justify-content: space-between;
  border-radius: 22px;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  text-align: left;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 13rem) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--text) 16%, transparent), color-mix(in srgb, var(--primary) 28%, transparent)) border-box;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .28),
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.class-final-choice .hero-choice::before,
.class-final-choice .hero-choice::after {
  opacity: .08;
}

.class-final-choice .hero-choice.income {
  min-height: 328px;
  border-color: color-mix(in srgb, var(--text) 45%, var(--primary));
  transform: translateY(-12px);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 15rem) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--text) 52%, transparent), color-mix(in srgb, var(--accent) 44%, transparent)) border-box;
  box-shadow:
    0 30px 78px rgba(0, 0, 0, .34),
    0 0 56px color-mix(in srgb, var(--accent) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

.class-final-choice .hero-choice span {
  max-width: 14rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
  line-height: 1.05;
  text-align: left;
}

.class-final-choice .hero-choice small {
  max-width: 16.5rem;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  text-align: left;
}

.class-final-choice .hero-choice span::before {
  content: "";
  display: block;
  width: fit-content;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  padding: .3rem .7rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: .78rem;
  line-height: 1;
}

.class-final-choice .hero-choice.primary span::before {
  content: "Basic";
}

.class-final-choice .hero-choice.income span::before {
  content: "Most helpful";
  background: var(--text);
  color: var(--bg);
}

.class-final-choice .hero-choice.secondary span::before {
  content: "TMC";
}

.class-final-choice .hero-choice small::after {
  content: "เลือกทางนี้ →";
  display: grid;
  min-height: 46px;
  place-items: center;
  margin-top: 1.5rem;
  border-radius: 12px;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-size: .95rem;
  font-weight: 900;
}

.class-final-choice .hero-choice.primary small::after {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.class-final-choice .hero-choice.secondary small::after {
  content: "ดู TMC Program →";
}

@media (max-width: 980px) {
  .class-story-grid,
  .masterclass-intro,
  .masterclass-afterpay,
  .class-detail-grid,
  .class-final-choice .shell,
  .change-panels {
    grid-template-columns: 1fr;
  }

  .class-final-choice .choice-actions {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
  }

  .class-final-choice .hero-choice,
  .class-final-choice .hero-choice.income {
    min-height: 230px;
    transform: none;
  }

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

  .class-difference-table {
    border-radius: 22px;
  }

  .diff-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .diff-row > div {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  }

  .diff-row > div:last-child {
    border-bottom: 0;
  }

  .diff-head {
    display: none;
  }

  .diff-row:not(.diff-head) > div:first-child {
    min-height: 46px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .class-video-shell { min-height: auto; }
  .class-video-frame { aspect-ratio: 16 / 10; }

  .reason-rows article {
    grid-template-columns: auto 1fr;
    border-radius: 22px;
  }

  .reason-rows small { grid-column: 2; }

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

/* TMC Program redesign */
.tmc-page {
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 34rem),
    radial-gradient(circle at 12% 30%, rgba(200, 162, 74, .11), transparent 30rem),
    var(--bg);
}

.tmc-page .topbar {
  backdrop-filter: blur(20px);
}

.tmc-page .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.tmc-hero {
  min-height: calc(100svh - 86px);
  display: grid;
  align-items: center;
  padding: clamp(6rem, 10vw, 9rem) 0 clamp(4rem, 7vw, 7rem);
  overflow: hidden;
}

.tmc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.tmc-hero-copy h1 {
  max-width: 980px;
  margin: .45rem 0 1rem;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(3.4rem, 8.4vw, 9.4rem);
  font-weight: 950;
  line-height: .82;
  letter-spacing: 0;
  color: transparent;
  background:
    linear-gradient(115deg, transparent 0 12%, rgba(126, 211, 157, .88) 24%, rgba(255, 255, 255, .95) 34%, transparent 48% 100%),
    linear-gradient(180deg, #fffef5 0%, #e8dec0 22%, #f5f5f5 44%, #a1d8be 64%, #545a56 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: -120% center, center;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.42));
  animation: hero-word-scan 5.8s ease-in-out infinite;
}

.tmc-hero-copy .lead {
  max-width: 760px;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}

.tmc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.7rem;
}

.tmc-diagnostic-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: 28px;
  padding: clamp(1rem, 2vw, 1.4rem);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--primary) 11%, transparent)),
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 40%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.08);
}

.tmc-diagnostic-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 120deg, transparent, color-mix(in srgb, var(--primary) 58%, transparent), transparent, color-mix(in srgb, var(--secondary) 42%, transparent), transparent);
  opacity: .36;
  filter: blur(14px);
  animation: tmc-spin 10s linear infinite;
}

.tmc-diagnostic-panel > div {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .45rem;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 22px;
  padding: 1rem;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 58%),
    rgba(255,255,255,.035);
}

.tmc-diagnostic-panel small {
  color: var(--muted);
  font-weight: 800;
}

.tmc-diagnostic-panel strong {
  color: var(--text);
  font-family: "Space Grotesk", "Kanit", sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
  line-height: 1;
}

.panel-orbit {
  position: absolute;
  inset: 18%;
  z-index: -1;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--secondary) 28%, transparent);
  opacity: .45;
  animation: tmc-spin 16s linear infinite reverse;
}

.tmc-diagnosis-section,
.tmc-roadmap-section {
  position: relative;
  overflow: hidden;
}

.tmc-problem-list {
  display: grid;
  gap: .7rem;
}

.tmc-problem-row {
  grid-template-columns: 72px minmax(210px, .8fr) minmax(280px, 1fr) auto;
  min-height: 96px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--primary) 7%, transparent)),
    rgba(255,255,255,.02);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.tmc-problem-row:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 46%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,.28), 0 0 32px color-mix(in srgb, var(--primary) 12%, transparent);
}

.tmc-problem-row .problem-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: color-mix(in srgb, var(--bg) 88%, #000);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  font-weight: 950;
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

.tmc-problem-row .problem-meta strong {
  color: var(--text);
}

.tmc-problem-row .problem-title {
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.tmc-difference-section {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 35rem),
    color-mix(in srgb, var(--surface) 32%, transparent);
}

.tmc-compare-table {
  display: grid;
  grid-template-columns: .72fr 1fr 1fr;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 26px 82px rgba(0,0,0,.32);
}

.tmc-compare-table > div {
  min-height: 84px;
  display: flex;
  align-items: center;
  border-right: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  padding: 1.15rem 1.25rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 800;
}

.tmc-compare-table > div:nth-child(3n) {
  border-right: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary) 7%, transparent));
  color: var(--text);
}

.tmc-compare-table .compare-head {
  color: var(--accent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: "Space Grotesk", "Kanit", sans-serif;
}

.tmc-compare-table .highlight {
  color: var(--text);
}

.tmc-roadmap-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  padding: 4.4rem 0 1rem;
}

.tmc-roadmap-flow .flow-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 2.35rem;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 38%, transparent), color-mix(in srgb, var(--secondary) 30%, transparent), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.tmc-roadmap-flow .flow-runner {
  position: absolute;
  top: calc(2.35rem - 4px);
  left: 8%;
  width: 76px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, var(--primary), transparent);
  filter: blur(.4px) drop-shadow(0 0 16px var(--primary));
  animation: tmc-flow-runner 9.5s cubic-bezier(.66, 0, .34, 1) infinite;
}

.tmc-roadmap-flow article {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 26px;
  padding: 4.2rem 1.2rem 1.25rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)),
    radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--secondary) 11%, transparent), transparent 44%);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  overflow: hidden;
  animation: tmc-road-card 9.5s ease-in-out infinite;
}

.tmc-roadmap-flow article:nth-of-type(2) { animation-delay: 2.35s; }
.tmc-roadmap-flow article:nth-of-type(3) { animation-delay: 4.7s; }
.tmc-roadmap-flow article:nth-of-type(4) { animation-delay: 7.05s; }

.flow-dot {
  position: absolute;
  left: 50%;
  top: -4.35rem;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--bg) 88%, #000);
  background:
    radial-gradient(circle at 30% 18%, #fff 0 9%, transparent 23%),
    linear-gradient(135deg, #dfffe9, var(--primary) 58%, var(--secondary));
  box-shadow: 0 0 38px color-mix(in srgb, var(--primary) 38%, transparent);
  font-weight: 950;
}

.flow-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 4.35rem;
  background: color-mix(in srgb, var(--primary) 42%, transparent);
}

.tmc-roadmap-flow small {
  display: inline-flex;
  margin-bottom: .8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  padding: .32rem .62rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-weight: 950;
  text-transform: uppercase;
}

.tmc-roadmap-flow h3 {
  margin: 0 0 .65rem;
  color: var(--text);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
}

.tmc-roadmap-flow p,
.tmc-roadmap-flow strong {
  color: color-mix(in srgb, var(--text) 72%, transparent);
  line-height: 1.72;
}

.tmc-roadmap-flow strong {
  display: block;
  margin-top: auto;
  color: var(--text);
}

.tmc-final-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 30px;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 26rem),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 28px 90px rgba(0,0,0,.36);
}

.tmc-final-card h2 {
  max-width: 820px;
  margin: .2rem 0 .8rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: .98;
}

.tmc-final-card p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
}

.tmc-final-card {
  grid-template-columns: 1fr !important;
}

.tmc-final-head {
  text-align: center;
}

.tmc-final-head .eyebrow {
  margin-inline: auto;
}

.tmc-final-head h2 {
  margin-left: auto;
  margin-right: auto;
}

.tmc-diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
}

.tmc-diagnosis-grid article {
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: 22px;
  padding: clamp(1rem, 2vw, 1.4rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), color-mix(in srgb, var(--primary) 7%, transparent));
}

.tmc-diagnosis-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, transparent);
  border-radius: 999px;
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 9%, transparent);
  font-family: var(--font-number);
  font-size: .95rem;
  font-weight: 900;
}

.tmc-diagnosis-grid h3 {
  margin: .9rem 0 .55rem;
  color: var(--text);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  font-weight: 900;
}

.tmc-diagnosis-grid p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 70%, transparent) !important;
  font-size: .98rem;
  line-height: 1.65;
}

.tmc-final-summary {
  width: min(880px, 100%);
  margin-inline: auto;
  text-align: center;
}

.tmc-final-summary p {
  margin: 0 auto 1.25rem;
  color: color-mix(in srgb, var(--text) 82%, transparent) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  font-weight: 850;
  line-height: 1.7;
}

.tmc-final-summary .contact-actions {
  width: min(680px, 100%);
  margin-inline: auto;
}

.tmc-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 30px;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 24rem),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.tmc-offer-card h2 {
  margin: .25rem 0 .65rem;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
}

.tmc-offer-card p:not(.eyebrow) {
  max-width: 700px;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

@media (max-width: 900px) {
  .tmc-diagnosis-grid,
  .tmc-offer-card {
    grid-template-columns: 1fr;
  }

  .tmc-offer-card .contact-actions {
    width: 100%;
  }
}

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

@keyframes tmc-flow-runner {
  0%, 12% { left: 8%; opacity: .35; }
  20%, 30% { left: 31.5%; opacity: 1; }
  42%, 52% { left: 55%; opacity: 1; }
  64%, 74% { left: 78%; opacity: 1; }
  88%, 100% { left: 8%; opacity: .35; }
}

@keyframes tmc-road-card {
  0%, 18%, 100% {
    transform: translateY(0) scale(1);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
  }
  7%, 12% {
    transform: translateY(-10px) scale(1.025);
    border-color: color-mix(in srgb, var(--secondary) 70%, transparent);
    box-shadow:
      0 28px 80px rgba(0,0,0,.38),
      0 0 54px color-mix(in srgb, var(--secondary) 28%, transparent);
  }
}

@media (max-width: 980px) {
  .tmc-hero-grid,
  .tmc-final-card {
    grid-template-columns: 1fr;
  }

  .tmc-diagnostic-panel {
    max-width: 680px;
  }

  .tmc-problem-row {
    grid-template-columns: 60px 1fr auto;
  }

  .tmc-problem-row .problem-title {
    grid-column: 2 / -1;
  }

  .tmc-compare-table {
    grid-template-columns: 1fr;
  }

  .tmc-compare-table > div,
  .tmc-compare-table > div:nth-child(3n) {
    border-right: 0;
  }

  .tmc-roadmap-flow {
    grid-template-columns: 1fr 1fr;
    row-gap: 5.4rem;
  }

  .tmc-roadmap-flow .flow-line,
  .tmc-roadmap-flow .flow-runner {
    display: none;
  }
}

@media (max-width: 700px) {
  .tmc-hero {
    min-height: auto;
    padding-top: 5.5rem;
  }

  .tmc-hero-copy h1 {
    font-size: clamp(3.35rem, 17vw, 5.6rem);
  }

  .tmc-diagnostic-panel,
  .tmc-roadmap-flow {
    grid-template-columns: 1fr;
  }

  .tmc-problem-row {
    grid-template-columns: 52px 1fr;
    gap: .75rem;
    padding: .9rem;
  }

  .tmc-problem-row .problem-title,
  .tmc-problem-row .problem-action {
    grid-column: 1 / -1;
  }

  .tmc-roadmap-flow {
    padding-top: 1rem;
    gap: 1rem;
  }

  .flow-dot {
    position: static;
    transform: none;
    width: 54px;
    height: 54px;
    margin-bottom: .4rem;
  }

  .flow-dot::after {
    display: none;
  }

  .tmc-roadmap-flow article {
    min-height: auto;
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .class-story-hero { padding-top: 7rem; }

  .class-quote h1 {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
  }

  .talk-reasons {
    display: grid;
  }

  .talk-reasons p {
    border-radius: 18px;
  }

  .class-hero-actions .hero-choice,
  .choice-actions .hero-choice,
  .inline-cta .btn {
    width: 100%;
  }

  .review-flow {
    grid-template-columns: repeat(6, minmax(230px, 78vw));
  }

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

  .payment-card dl div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}

@media (max-width: 760px) {
  .masterclass-stack {
    gap: 1rem;
  }

  .class-offer-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100% - 1rem, 460px);
    margin-inline: auto;
  }

  .class-offer-main,
  .class-offer-features {
    min-width: 0;
    padding: clamp(1.25rem, 6vw, 1.6rem);
  }

  .class-offer-main {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  }

  .offer-badge {
    max-width: 100%;
    white-space: normal;
  }

  .class-offer-main h2 {
    max-width: 100%;
    font-size: clamp(2.45rem, 13vw, 3.45rem) !important;
    line-height: .9 !important;
    word-break: normal;
    overflow-wrap: normal;
  }

  .class-offer-main > p,
  .offer-mini-list li,
  .class-offer-features li {
    font-size: .98rem;
  }

  .offer-price-line strong {
    font-size: clamp(3.1rem, 15vw, 4.4rem);
  }

  .class-offer-features h3 {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
  }

  .class-offer-features ul {
    gap: .65rem;
  }

  .offer-actions .btn {
    width: 100%;
  }
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: "Noto Sans Thai", sans-serif;
  background:
    radial-gradient(circle at 50% -12%, rgba(15, 91, 58, .76), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(200, 162, 74, .18), transparent 25rem),
    linear-gradient(180deg, var(--bg), #07160e 45%, #030705);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(rgba(247, 241, 225, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 241, 225, .02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.sparkles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;
}

@media (max-width: 760px) {
  .sparkles-canvas {
    display: none !important;
  }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
p { color: var(--muted); line-height: 1.72; }

.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.section { position: relative; z-index: 1; padding: clamp(4rem, 8vw, 8rem) 0; }
.dark { border-block: 1px solid rgba(200, 162, 74, .12); background: rgba(255,255,255,.018); }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .8rem clamp(1rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 17, 11, .88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 900; }
.brand span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--bg);
  background: linear-gradient(135deg, #f4dda1, var(--secondary));
  font-family: "Space Grotesk", sans-serif;
}
.topbar nav { display: flex; justify-content: center; gap: .4rem; }
.topbar nav a,
.nav-cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .62rem .9rem;
  background: rgba(255,255,255,.04);
  color: rgba(247,241,225,.82);
  font-weight: 800;
}
.nav-cta,
.btn.primary,
.sticky a,
.plans a,
.addon-card a {
  color: var(--bg);
  background: linear-gradient(135deg, #f4dda1, var(--secondary));
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}

.menu-toggle span + span {
  margin-top: 4px;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 7rem 0 4rem;
}

.hero-statement {
  display: grid;
  justify-items: center;
  text-align: center;
  width: 100vw;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  margin-left: calc(50% - 50vw);
  isolation: isolate;
}

.hero-statement-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.7rem);
  padding: .7rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .66);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 55px rgba(0,0,0,.34);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(.68rem, 1vw, .86rem);
  font-weight: 900;
}

.hero-statement-pill span {
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: #b9f7d4;
  box-shadow: 0 0 18px rgba(24, 185, 121, .9);
}

.hero-statement-title {
  position: relative;
  margin: 0;
  max-width: min(12ch, calc(100vw - 1.2rem));
  color: #fff;
  font-family: "Space Grotesk", "Noto Sans Thai", sans-serif;
  font-size: clamp(4.8rem, 15vw, 13.5rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: 0;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 28% 34%, rgba(38, 233, 151, .95), transparent 0 11%, transparent 18%),
    linear-gradient(115deg, transparent 0 18%, rgba(24, 185, 121, .95) 25%, rgba(210, 255, 232, .9) 31%, transparent 40% 100%),
    linear-gradient(180deg, #fff 0%, #f8fff9 42%, #73dba7 54%, #8d9290 69%, #111 89%),
    linear-gradient(90deg, #eadfb7 0%, #fff 34%, #31d88c 52%, #b9b9b9 74%, #f3f0dd 100%);
  background-size: 100% 100%, 240% 100%, 100% 100%, 100% 100%;
  background-position: center, -130% center, center, center;
  background-blend-mode: screen, screen, multiply, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 18px 22px rgba(0,0,0,.78),
    0 42px 40px rgba(0,0,0,.42);
  filter: drop-shadow(0 0 22px rgba(255,255,255,.08));
  animation: statement-shine 5.5s ease-in-out infinite, statement-green-sweep 4.8s ease-in-out infinite;
}

.hero-statement-title::before {
  content: attr(aria-label);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(0, 0, 0, .55);
  transform: translateY(.13em) scaleY(.72);
  filter: blur(12px);
  opacity: .7;
}

.hero-statement-title span {
  background:
    linear-gradient(115deg, transparent 0 15%, rgba(24, 185, 121, .9) 25%, rgba(221, 255, 238, .9) 32%, transparent 43% 100%),
    linear-gradient(90deg, #efe2b8, #fff, #28cf86, #d6d6d6);
  background-size: 230% 100%, 100% 100%;
  background-position: -120% center, center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: statement-green-sweep-span 4.8s ease-in-out infinite;
}

.hero-statement-sub {
  margin-top: clamp(1rem, 2vw, 1.45rem);
  color: rgba(247, 241, 225, .55);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(.9rem, 1.4vw, 1.15rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@keyframes statement-shine {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255,255,255,.08)); }
  50% { filter: drop-shadow(0 0 34px rgba(24,185,121,.22)); }
}

@keyframes statement-green-sweep {
  0%, 18% { background-position: center, -130% center, center, center; }
  56%, 100% { background-position: center, 135% center, center, center; }
}

@keyframes statement-green-sweep-span {
  0%, 18% { background-position: -120% center, center; }
  56%, 100% { background-position: 130% center, center; }
}
.hero-grid,
.solution-layout,
.founder-layout,
.class-grid,
.price-grid,
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.eyebrow {
  margin-bottom: .85rem;
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1 {
  max-width: 900px;
  margin-bottom: 1.2rem;
  font-size: clamp(2.8rem, 6.5vw, 7.2rem);
  line-height: .92;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.7vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0;
}
h3 {
  margin-bottom: .6rem;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.18;
}
.lead {
  max-width: 740px;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
}
.pain-strip,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.pain-strip { margin: 1.6rem 0 2rem; }
.pain-strip span,
.tool-tags span {
  border: 1px solid rgba(200, 162, 74, .18);
  border-radius: 999px;
  padding: .5rem .75rem;
  color: rgba(247,241,225,.78);
  background: rgba(255,255,255,.04);
  font-weight: 800;
}
.btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem 1.15rem;
  font-weight: 900;
}
.btn.ghost { background: rgba(255,255,255,.055); }

article,
.diagnosis-panel,
.photo-card,
.founder-mark,
.price-card,
.contact-card,
.final-card,
details {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(11,31,21,.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.diagnosis-panel { padding: 1rem; }
.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem .2rem .9rem;
  color: var(--muted);
  font-weight: 900;
}
.panel-top b {
  border-radius: 999px;
  padding: .25rem .55rem;
  color: #06110b;
  background: #f07272;
}
.loss-card {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(200,162,74,.16);
  padding: 1.2rem;
  background: radial-gradient(circle at 50% 0%, rgba(200,162,74,.18), transparent 14rem), #08170f;
}
.loss-card small { color: var(--secondary); font-weight: 900; }
.loss-card strong { display: block; margin-top: .4rem; font-size: 1.8rem; line-height: 1.12; }
.loss-bars {
  height: 190px;
  display: flex;
  align-items: end;
  gap: .7rem;
  margin-top: 1.4rem;
}
.loss-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #f4dda1, #a34638);
}
.checklist { display: grid; gap: .55rem; margin-top: .9rem; }
.checklist p {
  margin: 0;
  border: 1px solid rgba(200,162,74,.12);
  border-radius: 12px;
  padding: .8rem;
  background: rgba(255,255,255,.035);
}
.checklist b { color: var(--secondary); }

.section-head.narrow { max-width: 900px; }
.section-head.center { max-width: 930px; margin-inline: auto; text-align: center; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.beginner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.problem-accordion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 2rem;
}

.problem-accordion details {
  padding: 0;
}

.problem-accordion summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  min-height: 66px;
  padding: .9rem 1rem;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 900;
  line-height: 1.25;
}

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

.problem-accordion summary::after {
  content: "+";
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 1px solid rgba(24, 185, 121, .28);
  border-radius: 999px;
  color: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
}

.problem-accordion details[open] summary::after {
  content: "-";
}

.problem-accordion summary span {
  margin: 0;
  color: var(--primary);
}

.problem-accordion p,
.problem-accordion blockquote {
  margin-inline: 1rem;
}

.problem-accordion p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.problem-accordion blockquote {
  margin-top: 0;
  margin-bottom: .7rem;
  border-left: 3px solid var(--primary);
  padding-left: .8rem;
  color: var(--text);
  font-weight: 900;
  line-height: 1.55;
}

.problem-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: 2rem;
}

.problem-stage {
  position: sticky;
  top: 112px;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 18rem),
    radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
  box-shadow:
    inset 0 0 80px color-mix(in srgb, var(--primary) 9%, transparent),
    0 34px 110px rgba(0,0,0,.34);
}

.problem-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 42% 40%, black 0 18rem, transparent 34rem);
}

.problem-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.problem-orbit span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 22%, transparent));
  animation: problem-orbit 12s linear infinite;
}

.problem-orbit span:nth-child(1) {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
}

.problem-orbit span:nth-child(2) {
  width: 26rem;
  height: 26rem;
  right: -10rem;
  bottom: -8rem;
  animation-duration: 16s;
  animation-direction: reverse;
}

.problem-orbit span:nth-child(3) {
  width: 9rem;
  height: 9rem;
  right: 18%;
  top: 15%;
  border-color: color-mix(in srgb, var(--secondary) 28%, transparent);
  animation-duration: 9s;
}

.problem-focus {
  position: absolute;
  inset: auto clamp(1.2rem, 4vw, 2.2rem) clamp(1.2rem, 4vw, 2.2rem);
  display: grid;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 24px;
  padding: clamp(1.3rem, 3vw, 2rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 76%, transparent), color-mix(in srgb, var(--surface) 66%, transparent)),
    color-mix(in srgb, var(--bg) 78%, #000);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 0 42px color-mix(in srgb, var(--primary) 8%, transparent);
}

.problem-focus.is-changing {
  animation: problem-card-in .34s ease;
}

.problem-focus-number {
  display: inline-grid;
  width: 5.2rem;
  height: 5.2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 56%, transparent);
  border-radius: 1.4rem;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--primary) 10%, transparent),
    0 18px 50px color-mix(in srgb, var(--primary) 18%, transparent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.65rem;
  font-weight: 900;
}

.problem-focus h3 {
  margin: 0;
  max-width: 12ch;
  color: var(--text);
  font-size: clamp(2rem, 4.5vw, 4.8rem);
  line-height: .95;
  letter-spacing: 0;
}

.problem-focus p {
  max-width: 58ch;
  margin: 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.78;
}

.problem-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.problem-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  min-height: 74px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 20px;
  padding: .85rem 1rem;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent)),
    color-mix(in srgb, var(--bg) 80%, #000);
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--primary) 4%, transparent);
  font: inherit;
  font-size: clamp(.95rem, 1.22vw, 1.1rem);
  font-weight: 900;
  line-height: 1.28;
  text-align: left;
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.problem-tabs button::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
  opacity: 0;
  transform: translateX(-45%);
  transition: opacity .2s ease, transform .42s ease;
}

.problem-tabs button span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  min-width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-family: "Space Grotesk", sans-serif;
}

.problem-tabs button:hover,
.problem-tabs button:focus-visible,
.problem-tabs button.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 54%, var(--primary));
  color: var(--text);
  box-shadow:
    0 18px 46px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 0 42px color-mix(in srgb, var(--primary) 8%, transparent);
}

.problem-tabs button:hover::after,
.problem-tabs button:focus-visible::after,
.problem-tabs button.is-active::after {
  opacity: 1;
  transform: translateX(45%);
}

.problem-tabs button.is-active span {
  color: var(--bg);
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 34%, transparent);
}

.problem-directory {
  margin-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}

.problem-row {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(150px, .56fr) minmax(0, 1fr) auto;
  gap: clamp(.9rem, 2vw, 1.8rem);
  align-items: center;
  width: 100%;
  min-height: 104px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  padding: 1.2rem 1rem;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.problem-row::before {
  content: "";
  position: absolute;
  inset: .55rem 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--surface) 68%, transparent), color-mix(in srgb, var(--surface-2) 42%, transparent)) padding-box,
    linear-gradient(120deg, transparent, color-mix(in srgb, var(--primary) 42%, transparent), color-mix(in srgb, var(--secondary) 36%, transparent), transparent) border-box;
  opacity: 0;
  transform: scaleX(.985);
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.problem-row:hover,
.problem-row:focus-visible {
  transform: translateX(6px);
}

.problem-row:hover::before,
.problem-row:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.problem-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 16px;
  color: var(--primary);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 72%, transparent)),
    color-mix(in srgb, var(--bg) 76%, #000);
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--primary) 6%, transparent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
}

.problem-row:hover .problem-icon,
.problem-row:focus-visible .problem-icon {
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent);
}

.problem-meta {
  display: grid;
  gap: .2rem;
}

.problem-meta strong {
  color: var(--text);
  font-weight: 900;
  line-height: 1.22;
}

.problem-meta small {
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: .86rem;
  font-weight: 700;
}

.problem-title {
  color: var(--text);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1.25;
}

.problem-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .55rem;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  padding: .7rem 1rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  font-size: .9rem;
  font-weight: 900;
  white-space: nowrap;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.problem-row:hover .problem-action,
.problem-row:focus-visible .problem-action {
  border-color: transparent;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  transform: translateX(3px);
}

.problem-modal[hidden] {
  display: none;
}

.problem-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.4rem);
}

.problem-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 28rem),
    rgba(0, 0, 0, .72);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.problem-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-radius: 28px;
  padding: clamp(1.25rem, 4vw, 2.2rem);
  color: var(--text);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--primary) 16%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 78%, transparent)),
    color-mix(in srgb, var(--bg) 88%, #000);
  box-shadow:
    0 38px 120px rgba(0,0,0,.56),
    inset 0 0 60px color-mix(in srgb, var(--primary) 8%, transparent);
  animation: problem-modal-in .24s ease;
}

.problem-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.problem-modal-kicker {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 999px;
  padding: .35rem .7rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: .78rem;
  font-weight: 900;
}

.problem-modal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1.15rem;
}

.problem-modal-number {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 20px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 16px 46px color-mix(in srgb, var(--primary) 22%, transparent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
}

.problem-modal-card h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.03;
}

.problem-modal-card p {
  margin: 1.25rem 0 0;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.85;
}

.problem-modal-quote {
  margin: 1.35rem 0 0;
  border-left: 4px solid color-mix(in srgb, var(--primary) 80%, var(--secondary));
  border-radius: 16px;
  padding: 1rem 1rem 1rem 1.15rem;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  font-weight: 900;
  line-height: 1.65;
}

.problem-modal-quote[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

@keyframes problem-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes problem-orbit {
  to {
    rotate: 360deg;
  }
}

@keyframes problem-card-in {
  from {
    opacity: .45;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.story-grid article,
.beginner-grid article,
.process-map article,
.founder-points article {
  padding: 1.15rem;
}
article span,
article small {
  display: inline-flex;
  margin-bottom: .7rem;
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.process-map { display: grid; gap: 1rem; }
.process-map article {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}
.process-map span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--bg);
  background: linear-gradient(135deg, #f4dda1, var(--secondary));
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.roadmap article {
  overflow: hidden;
  padding: 0;
}

.roadmap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.roadmap-copy {
  padding: 1rem;
}

.roadmap-copy p {
  margin-bottom: .8rem;
}

.roadmap ul {
  display: grid;
  gap: .45rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}

.roadmap li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.roadmap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: var(--primary);
}

.roadmap strong {
  display: block;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.55;
}

.outcome-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(24, 185, 121, .045)),
    rgba(5, 8, 6, .94);
}

.change-table {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(11, 18, 14, .82);
}

.change-head,
.change-cell {
  border-bottom: 1px solid rgba(24, 185, 121, .15);
  padding: 1rem 1.1rem;
}

.change-head {
  color: var(--primary);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(24, 185, 121, .06);
}

.change-cell {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.62;
}

.change-cell.before {
  border-right: 1px solid rgba(24, 185, 121, .14);
}

.change-cell.after {
  color: var(--text);
  background: rgba(24, 185, 121, .06);
}

.change-cell span {
  display: inline-grid;
  min-width: 1.5rem;
  margin-right: .45rem;
  color: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 900;
}

.change-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.title-icon {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: .55rem;
  place-items: center;
  border-radius: 999px;
  color: #041008;
  background: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  vertical-align: .12em;
}

.reviews-section {
  background:
    radial-gradient(circle at 84% 10%, rgba(24, 185, 121, .12), transparent 22rem),
    rgba(255, 255, 255, .018);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.reviews-grid figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(11, 18, 14, .86);
}

.reviews-grid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.paid-tools {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.tools-more {
  padding: 0;
}

.tools-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 1rem 1.15rem;
  color: var(--text);
  font-weight: 900;
  list-style: none;
}

.tools-more > summary::-webkit-details-marker {
  display: none;
}

.tools-more > summary::after {
  content: "+";
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  color: #041008;
  background: var(--primary);
  font-family: "Space Grotesk", sans-serif;
}

.tools-more[open] > summary::after {
  content: "-";
}

.tools-more > .product-card,
.tools-more > .addon-grid,
.tools-more > .free-tool-grid {
  margin: 0 1rem 1rem;
}

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

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

.compact-free a {
  display: grid;
  gap: .65rem;
  min-height: 0;
  align-content: space-between;
}

.compact-free img {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.compact-free h3 {
  min-height: 0;
  margin: 0;
  font-size: .95rem;
  line-height: 1.25;
}

.compact-free a span {
  width: fit-content;
}

.product-card {
  display: grid;
  grid-template-columns: minmax(260px, .52fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 1.4rem);
}
.featured-tool { border-color: rgba(200,162,74,.34); }
.product-card > img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(200,162,74,.14);
  background: #07120c;
}
.product-copy { display: flex; min-width: 0; flex-direction: column; }
.product-copy h3 { font-size: clamp(1.65rem, 3vw, 3rem); }
.tool-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.tool-tags span {
  border-radius: 8px;
  font-size: .84rem;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
}
.plans article {
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  box-shadow: none;
}
.plans em {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  padding: .35rem .7rem;
  background: #078547;
  color: white;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.plans .best em { background: #10234a; }
.plans strong {
  display: block;
  margin: .35rem 0;
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2.3rem);
  line-height: 1;
}
.plans small {
  min-height: 42px;
  color: var(--muted);
}
.plans a,
.addon-card a {
  display: inline-flex;
  justify-content: center;
  margin-top: auto;
  border-radius: 12px;
  padding: .75rem 1rem;
  font-weight: 900;
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.addon-card {
  padding: .9rem;
  display: flex;
  flex-direction: column;
}
.addon-card img,
.free-tool-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid rgba(200,162,74,.14);
}
.addon-card strong {
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.4rem;
}
.free-tool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.free-tool-grid article,
.free-tool-grid a {
  overflow: hidden;
  padding: .75rem;
  color: inherit;
}
.free-tool-grid h3 {
  min-height: 48px;
  margin-top: .8rem;
  font-size: 1rem;
}

.free-tool-grid a {
  display: block;
  transition: transform .2s ease, border-color .2s ease;
}

.free-tool-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 185, 121, .42);
}

.free-tool-grid a span {
  display: inline-flex;
  margin-top: .2rem;
  border-radius: 999px;
  padding: .28rem .55rem;
  color: #041008;
  background: var(--primary);
  font-size: .78rem;
  font-weight: 900;
}

.founder-layout { align-items: stretch; }
.founder-mark {
  min-height: 420px;
  display: grid;
  align-content: center;
  padding: 2rem;
  background: radial-gradient(circle at 50% 35%, rgba(200,162,74,.24), transparent 12rem), var(--surface);
}
.founder-mark span {
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4.5rem, 14vw, 10rem);
  font-weight: 900;
  line-height: .9;
}
.founder-points { display: grid; gap: .8rem; margin-top: 1.4rem; }
.founder-points article { box-shadow: none; }

.photo-card {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.photo-card figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(6,17,11,.82);
  font-weight: 900;
}
.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: 0;
  list-style: none;
}
.check-list li {
  border: 1px solid rgba(200,162,74,.16);
  border-radius: 14px;
  padding: .8rem;
  background: rgba(255,255,255,.035);
  color: rgba(247,241,225,.78);
  font-weight: 800;
}
.check-list li::before { content: "✓ "; color: var(--secondary); }

.class-offer {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.class-visual {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.class-visual img {
  width: 100%;
  aspect-ratio: 4 / 5.3;
  object-fit: cover;
  filter: saturate(.9) contrast(1.02);
}

.class-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 58%);
}

.class-save {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  border-radius: 999px;
  padding: .5rem .85rem;
  color: #041008;
  background: var(--primary);
  font-weight: 900;
}

.class-visual figcaption {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.5rem;
  z-index: 2;
  text-align: center;
}

.class-visual figcaption strong {
  display: block;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .98;
}

.class-visual figcaption small {
  display: block;
  margin-top: .8rem;
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
}

.class-copy .proof-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 999px;
  padding: .5rem .85rem;
  color: var(--text);
  background: rgba(24, 185, 121, .12);
  font-weight: 900;
}

.proof-pill span {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--primary);
}

.class-copy h2 {
  margin-top: 1.4rem;
}

.class-checks {
  display: grid;
  gap: .75rem;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.class-checks li {
  position: relative;
  padding-left: 2rem;
  color: var(--muted);
  font-weight: 800;
}

.class-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .05rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  color: #041008;
  background: var(--primary);
  font-size: .8rem;
  font-weight: 900;
}

.class-price {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-top: .5rem;
}

.class-price strong {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1;
}

.class-price s {
  color: var(--faint);
  font-size: 1.25rem;
}

.class-note {
  margin-bottom: 1.2rem;
  font-size: .92rem;
}

.class-cta {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #041008;
  background: var(--primary);
  font-size: 1.05rem;
  font-weight: 900;
}

.class-rating {
  margin-top: 1rem;
  color: var(--primary);
  font-size: .95rem;
  font-weight: 900;
}

.class-rating span {
  margin-left: .6rem;
  color: var(--muted);
  font-weight: 700;
}

.apps-section {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 18%, rgba(24, 185, 121, .14), transparent 24rem),
    rgba(255, 255, 255, .02);
}

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

.app-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .55rem;
  min-height: 100%;
  padding: .8rem;
  border-radius: 18px;
}

.app-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(24, 185, 121, .22);
  border-radius: 14px;
  background: rgba(247, 255, 249, .95);
}

.app-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.app-copy small {
  color: var(--primary);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.app-copy h3 {
  margin: .15rem 0 .25rem;
  font-size: 1.15rem;
}

.app-copy p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
}

.app-card a {
  align-self: end;
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .32rem .62rem;
  color: #041008;
  background: var(--primary);
  font-size: .76rem;
  font-weight: 900;
}

.price-card { padding: clamp(1.4rem,3vw,2.4rem); }
.price-card s { display: block; color: var(--faint); font-size: 1.4rem; }
.price-card strong {
  display: block;
  margin: .5rem 0 1rem;
  color: var(--secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3rem,6vw,5rem);
}
.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.contact-actions { display: grid; gap: .8rem; min-width: 240px; }

.follow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.follow-card {
  display: block;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.15rem;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    rgba(11, 18, 14, .86);
  transition: transform .2s ease, border-color .2s ease;
}

.follow-card > img {
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: .8rem;
  border-radius: 12px;
  background: rgba(247, 255, 249, .95);
  object-fit: contain;
}

.follow-card:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 185, 121, .42);
}

.follow-card[aria-disabled="true"] {
  cursor: default;
  opacity: .72;
}

.follow-card[aria-disabled="true"]:hover {
  transform: none;
  border-color: var(--line);
}

.follow-card span {
  display: inline-flex;
  border-radius: 999px;
  padding: .32rem .58rem;
  color: #041008;
  background: var(--primary);
  font-size: .78rem;
  font-weight: 900;
}

.follow-card h3 {
  margin: .85rem 0 .45rem;
}

.follow-card p {
  margin: 0;
  font-size: .95rem;
}

.faq { display: grid; gap: .8rem; }
details { padding: 1rem; }
summary { cursor: pointer; font-weight: 900; }

.final { position: relative; z-index: 1; padding: clamp(4rem,8vw,8rem) 0 2rem; }
.final-card {
  max-width: 980px;
  padding: clamp(2rem,5vw,4.2rem);
  text-align: center;
}
.disclaimer { position: relative; z-index: 1; padding: 2rem 0 7rem; }
.disclaimer p {
  border: 1px solid rgba(200,162,74,.14);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(0,0,0,.16);
  color: rgba(247,241,225,.62);
}
.sticky {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 50;
  width: min(620px, calc(100% - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateX(-50%);
  border: 1px solid rgba(200,162,74,.24);
  border-radius: 16px;
  padding: .6rem .65rem .6rem 1rem;
  background: rgba(6,17,11,.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  font-weight: 900;
}
.sticky a {
  border-radius: 12px;
  padding: .75rem 1rem;
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .brand b,
  .topbar nav { display: none; }
  .hero-grid,
  .solution-layout,
  .founder-layout,
  .class-grid,
  .price-grid,
  .two-col,
  .story-grid,
  .roadmap,
  .problem-accordion,
  .product-card,
  .plans,
  .addon-grid,
  .free-tool-grid,
  .apps-grid,
  .change-table,
  .reviews-grid,
  .contact-card,
  .follow-grid,
  .class-offer {
    grid-template-columns: 1fr;
  }
  .hero { min-height: auto; }
  .product-card > img { min-height: 0; aspect-ratio: 4 / 3; }
  .contact-actions { min-width: 0; }
  .check-list { grid-template-columns: 1fr; }
  .change-head.after {
    display: none;
  }
  .change-cell.before {
    border-right: 0;
    border-bottom: 0;
    padding-bottom: .35rem;
  }
  .change-cell.after {
    padding-top: .35rem;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .apps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compact-free {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 1rem, 1180px); }
  h1 { font-size: clamp(2.45rem, 14vw, 4.4rem); }
  .actions,
  .btn,
  .sticky { width: 100%; }
  .sticky { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Editorial light restyle */
:root {
  --primary: #6f7754;
  --bg: #f6f2e9;
  --secondary: #b66f38;
  --surface: #fffdf7;
  --surface-2: #ebe4d7;
  --text: #171711;
  --muted: rgba(23, 23, 17, .68);
  --faint: rgba(23, 23, 17, .46);
  --line: rgba(23, 23, 17, .12);
  --shadow: 0 26px 70px rgba(54, 45, 29, .13);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 4%, rgba(182, 111, 56, .12), transparent 30rem),
    linear-gradient(180deg, #fbfaf6 0%, var(--bg) 42%, #f0eadf 100%);
}

body::before {
  display: none;
}

p {
  color: var(--muted);
}

.topbar {
  position: sticky;
  inset: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 246, .9);
  box-shadow: none;
}

.brand {
  color: var(--text);
}

.brand span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #fffdf7;
  background: var(--text);
}

.topbar nav a,
.nav-cta {
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
}

.nav-cta {
  border: 1px solid var(--line);
  background: #fffdf7;
}

.hero {
  min-height: auto;
  padding: 3rem 0 5rem;
}

.hero-frame {
  position: relative;
  min-height: min(690px, calc(100svh - 8rem));
  overflow: hidden;
  border-radius: 30px;
  background: #111;
  box-shadow: 0 30px 90px rgba(54, 45, 29, .2);
}

.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .24) 48%, rgba(0, 0, 0, .05)),
    linear-gradient(0deg, rgba(0, 0, 0, .52), transparent 52%);
}

.hero-frame img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(.84) contrast(1.02);
}

.hero-overlay {
  position: absolute;
  left: clamp(1.4rem, 5vw, 4.6rem);
  right: clamp(1.4rem, 5vw, 4.6rem);
  bottom: clamp(1.4rem, 5vw, 4rem);
  z-index: 1;
  max-width: 820px;
  color: #fffdf7;
}

.hero-overlay .eyebrow,
.hero-overlay .lead,
.hero-overlay h1 {
  color: #fffdf7;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .32);
}

.hero-overlay h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 6.2vw, 6.4rem);
  line-height: .95;
}

.hero-overlay .lead {
  max-width: 760px;
  color: rgba(255, 253, 247, .82);
}

.hero-overlay .pain-strip span {
  border-color: rgba(255, 253, 247, .24);
  color: rgba(255, 253, 247, .88);
  background: rgba(255, 253, 247, .12);
  backdrop-filter: blur(12px);
}

.btn {
  border-radius: 999px;
  padding-inline: 1.35rem;
}

.nav-cta,
.btn.primary,
.sticky a,
.plans a,
.addon-card a {
  color: #fffdf7;
  background: var(--text);
}

.btn.ghost {
  color: #fffdf7;
  border-color: rgba(255, 253, 247, .3);
  background: rgba(255, 253, 247, .12);
}

.section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.dark {
  border-block: 1px solid var(--line);
  background: rgba(255, 253, 247, .52);
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
}

.eyebrow,
article span,
article small,
.free-tool-grid span,
.addon-card strong,
.plans strong,
.price-card strong {
  color: var(--secondary);
}

article,
.founder-mark,
.photo-card,
.price-card,
.contact-card,
.final-card,
details {
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, .78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.story-grid article,
.process-map article,
.product-card,
.addon-card,
.free-tool-grid article,
.free-tool-grid a {
  border-radius: 18px;
}

.process-map span {
  color: #fffdf7;
  background: var(--primary);
}

.tool-tags span {
  border-color: var(--line);
  color: var(--text);
  background: rgba(111, 119, 84, .1);
}

.plans em {
  background: var(--primary);
}

.plans .best em {
  background: var(--text);
}

.plans article {
  background: #f7f1e6;
}

.product-card > img,
.addon-card img,
.free-tool-grid img {
  background: #efe6d8;
}

.founder-mark {
  background:
    radial-gradient(circle at 50% 35%, rgba(182, 111, 56, .18), transparent 12rem),
    #fffdf7;
}

.founder-mark span {
  color: var(--text);
}

.check-list li,
.checklist p {
  border-color: var(--line);
  background: rgba(255, 253, 247, .78);
  color: var(--text);
}

.photo-card figcaption {
  color: #fffdf7;
  border-color: rgba(255, 253, 247, .22);
  background: rgba(23, 23, 17, .72);
}

.disclaimer p {
  background: rgba(255, 253, 247, .62);
  color: var(--faint);
}

.sticky {
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, .9);
  color: var(--text);
}

@media (max-width: 980px) {
  .topbar {
    position: fixed;
  }

  .hero {
    padding-top: 6rem;
  }
}

@media (max-width: 640px) {
  .hero-frame {
    min-height: 720px;
    border-radius: 22px;
  }

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

/* Black / white / green palette pass */
:root {
  --primary: #0f8f5f;
  --bg: #f7f8f5;
  --secondary: #0f8f5f;
  --surface: #ffffff;
  --surface-2: #eef5ef;
  --text: #070a08;
  --muted: rgba(7, 10, 8, .68);
  --faint: rgba(7, 10, 8, .46);
  --line: rgba(7, 10, 8, .12);
  --shadow: 0 26px 70px rgba(0, 0, 0, .12);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 4%, rgba(15, 143, 95, .12), transparent 30rem),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 42%, #edf3ee 100%);
}

.topbar {
  background: rgba(255, 255, 255, .92);
}

.brand span,
.nav-cta,
.btn.primary,
.sticky a,
.plans a,
.addon-card a {
  color: #fff;
  background: #070a08;
}

.hero-overlay .eyebrow,
.hero-overlay .lead,
.hero-overlay h1 {
  color: #fff;
}

.hero-overlay .lead {
  color: rgba(255, 255, 255, .82);
}

.btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
}

article,
.founder-mark,
.photo-card,
.price-card,
.contact-card,
.final-card,
details {
  background: rgba(255, 255, 255, .84);
}

.dark {
  background: rgba(255, 255, 255, .58);
}

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

.story-grid article {
  min-height: 0;
  padding: 1rem;
}

.beginner-grid article {
  min-height: 0;
  padding: 1rem;
}

.story-grid article h3 {
  font-size: clamp(1.08rem, 1.45vw, 1.36rem);
  line-height: 1.18;
}

.story-grid article p {
  font-size: .92rem;
  line-height: 1.6;
}

.beginner-grid article h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.18;
}

.beginner-grid article p {
  font-size: .95rem;
  line-height: 1.65;
}

.story-grid blockquote {
  margin: .65rem 0;
  border-left: 3px solid var(--primary);
  padding-left: .7rem;
  color: var(--text);
  font-weight: 900;
  font-size: .9rem;
  line-height: 1.48;
}

.plans article,
.check-list li,
.checklist p,
.disclaimer p {
  background: rgba(255, 255, 255, .78);
}

.product-card > img,
.addon-card img,
.free-tool-grid img {
  background: #eef5ef;
}

.founder-mark {
  background:
    radial-gradient(circle at 50% 35%, rgba(15, 143, 95, .18), transparent 12rem),
    #fff;
}

.sticky {
  background: rgba(255, 255, 255, .94);
  color: var(--text);
}

@media (max-width: 980px) {
  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .beginner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .problem-accordion {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .beginner-grid {
    grid-template-columns: 1fr;
  }
  .compact-free,
  .compact-feature .plans {
    grid-template-columns: 1fr;
  }
}

/* Dark 80 / white text / green accent */
:root {
  --primary: #18b979;
  --bg: #050806;
  --secondary: #18b979;
  --surface: #0b120e;
  --surface-2: #101b15;
  --text: #f7fff9;
  --muted: rgba(247, 255, 249, .72);
  --faint: rgba(247, 255, 249, .48);
  --line: rgba(24, 185, 121, .22);
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% -8%, rgba(24, 185, 121, .22), transparent 34rem),
    linear-gradient(180deg, #050806 0%, #08110c 46%, #030504 100%);
}

p {
  color: var(--muted);
}

.topbar,
.sticky {
  background: rgba(5, 8, 6, .88);
  color: var(--text);
}

.topbar nav a,
.nav-cta {
  color: rgba(247, 255, 249, .86);
}

.brand span,
.nav-cta,
.btn.primary,
.sticky a,
.plans a,
.addon-card a,
.app-card a {
  color: #041008;
  background: var(--primary);
}

.dark {
  border-block-color: rgba(24, 185, 121, .16);
  background: rgba(255, 255, 255, .025);
}

article,
.founder-mark,
.photo-card,
.price-card,
.contact-card,
.final-card,
.app-card,
details {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    rgba(11, 18, 14, .86);
  color: var(--text);
}

h1,
h2,
h3 {
  color: var(--text);
}

.eyebrow,
article span,
article small,
.free-tool-grid span,
.addon-card strong,
.plans strong,
.price-card strong {
  color: var(--primary);
}

.plans article,
.check-list li,
.checklist p,
.disclaimer p {
  border-color: var(--line);
  background: rgba(11, 18, 14, .86);
  color: var(--text);
}

.tool-tags span {
  border-color: rgba(24, 185, 121, .24);
  color: rgba(247, 255, 249, .86);
  background: rgba(24, 185, 121, .08);
}

.process-map span,
.plans em {
  color: #041008;
  background: var(--primary);
}

.plans .best em {
  color: #041008;
  background: #f7fff9;
}

.product-card > img,
.addon-card img,
.free-tool-grid img {
  background: #0b120e;
}

.founder-mark {
  background:
    radial-gradient(circle at 50% 35%, rgba(24, 185, 121, .16), transparent 12rem),
    rgba(11, 18, 14, .88);
}

.founder-mark span {
  color: var(--primary);
}

.photo-card figcaption {
  border-color: rgba(24, 185, 121, .22);
  background: rgba(5, 8, 6, .78);
  color: var(--text);
}

.hero-frame {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.hero-frame::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .1)),
    linear-gradient(0deg, rgba(0, 0, 0, .58), transparent 52%);
}

.btn.ghost {
  color: var(--text);
  border-color: rgba(24, 185, 121, .28);
  background: rgba(24, 185, 121, .08);
}

/* Premium visual polish */
:root {
  --glow: 0 0 0 1px rgba(24, 185, 121, .18), 0 28px 80px rgba(0, 0, 0, .38);
  --soft-glow: 0 18px 48px rgba(24, 185, 121, .08);
}

html {
  scroll-padding-top: 96px;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(24, 185, 121, .18), transparent 28rem),
    radial-gradient(circle at 92% 24%, rgba(255, 255, 255, .055), transparent 20rem),
    radial-gradient(circle at 40% 82%, rgba(24, 185, 121, .10), transparent 30rem),
    linear-gradient(180deg, #030504 0%, #07110c 42%, #030504 100%);
}

body::before {
  display: block;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.topbar {
  top: .75rem;
  width: min(1180px, calc(100% - 1.5rem));
  border: 1px solid rgba(24, 185, 121, .20);
  border-radius: 999px;
  padding: .55rem .7rem;
  background: rgba(5, 8, 6, .72);
  box-shadow: 0 16px 60px rgba(0, 0, 0, .34);
}

.brand span {
  box-shadow: 0 0 24px rgba(24, 185, 121, .24);
}

.topbar nav a {
  border-radius: 999px;
}

.topbar nav a:hover {
  color: #041008;
  background: var(--primary);
}

.hero {
  padding-top: 6rem;
}

.hero-frame {
  border: 1px solid rgba(24, 185, 121, .22);
  border-radius: 34px;
  min-height: min(720px, calc(100vh - 8rem));
  box-shadow: 0 40px 120px rgba(0, 0, 0, .58), 0 0 0 1px rgba(24, 185, 121, .12);
}

.hero-frame img {
  transform: scale(1.02);
  filter: saturate(.82) contrast(1.08);
}

.hero-overlay {
  max-width: 820px;
}

h1,
h2 {
  text-wrap: balance;
}

.section {
  padding-block: clamp(4.2rem, 8vw, 7.5rem);
}

.section-head {
  margin-bottom: 0;
}

.eyebrow {
  width: fit-content;
  border: 1px solid rgba(24, 185, 121, .22);
  border-radius: 999px;
  padding: .34rem .68rem;
  background: rgba(24, 185, 121, .09);
  font-size: .75rem;
  letter-spacing: .08em;
}

.section-head.center .eyebrow,
.final-card .eyebrow {
  margin-inline: auto;
}

article,
details,
.contact-card,
.final-card,
.founder-mark,
.photo-card,
.app-card,
.follow-card,
.reviews-grid figure {
  box-shadow: var(--soft-glow);
}

article:hover,
.app-card:hover,
.follow-card:hover,
.reviews-grid figure:hover,
.free-tool-grid a:hover {
  box-shadow: var(--glow);
}

.problem-accordion details,
.tools-more,
.faq details {
  overflow: hidden;
  border-radius: 18px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.problem-accordion details:hover,
.tools-more:hover,
.faq details:hover {
  border-color: rgba(24, 185, 121, .38);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

.problem-accordion summary span,
article span,
article small {
  min-width: 2.3rem;
  justify-content: center;
  border: 1px solid rgba(24, 185, 121, .24);
  border-radius: 999px;
  padding: .2rem .5rem;
  background: rgba(24, 185, 121, .09);
}

.class-visual,
.product-card > img,
.roadmap img,
.reviews-grid figure,
.free-tool-grid img {
  filter: saturate(.92) contrast(1.03);
}

.class-visual {
  border: 1px solid rgba(24, 185, 121, .20);
}

.class-save,
.proof-pill,
.class-cta,
.btn.primary,
.nav-cta,
.sticky a,
.plans a,
.addon-card a,
.app-card a,
.free-tool-grid a span,
.follow-card span {
  box-shadow: 0 10px 28px rgba(24, 185, 121, .22);
}

.apps-grid {
  align-items: stretch;
}

.app-card,
.follow-card {
  position: relative;
  overflow: hidden;
}

.app-card::after,
.follow-card::after,
.product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(24,185,121,.18), transparent 38%, rgba(255,255,255,.06));
  opacity: 0;
  transition: opacity .2s ease;
}

.app-card:hover::after,
.follow-card:hover::after,
.product-card:hover::after {
  opacity: 1;
}

.reviews-grid {
  align-items: start;
}

.reviews-grid figure {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.reviews-grid figure:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(24, 185, 121, .38);
}

.change-table {
  box-shadow: var(--glow);
}

.change-head.after,
.change-cell.after {
  background: rgba(24, 185, 121, .075);
}

.roadmap article {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.roadmap article:hover {
  transform: translateY(-4px);
  border-color: rgba(24, 185, 121, .38);
}

.product-card,
.tools-more,
.free-tool-grid a {
  position: relative;
}

.compact-feature {
  border-color: rgba(24, 185, 121, .34);
  background:
    radial-gradient(circle at 22% 22%, rgba(24, 185, 121, .12), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    rgba(11, 18, 14, .92);
}

.tools-more > summary {
  background: rgba(24, 185, 121, .055);
}

.compact-free {
  gap: .85rem;
}

.compact-free a {
  border-radius: 16px;
  padding: .75rem;
}

.compact-free img {
  border: 1px solid rgba(24, 185, 121, .14);
}

.founder-mark {
  border-radius: 28px;
}

.contact-card,
.final-card {
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 20%, rgba(24, 185, 121, .16), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    rgba(11, 18, 14, .92);
}

.sticky {
  border-color: rgba(24, 185, 121, .24);
  border-radius: 999px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .46);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-frame img {
    animation: slow-pan 18s ease-in-out infinite alternate;
  }

  @keyframes slow-pan {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to { transform: scale(1.08) translate3d(-1.6%, 1%, 0); }
  }
}

@media (max-width: 980px) {
  .topbar {
    border-radius: 20px;
  }

  .hero {
    padding-top: 5.2rem;
  }

  .hero-frame {
    min-height: 680px;
    border-radius: 26px;
  }

  .sticky {
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: 3.8rem;
  }

  .hero-frame {
    min-height: 620px;
  }

  .hero-overlay {
    padding: 1.1rem;
  }
}

/* Full-width premium nav */
.topbar {
  left: .75rem;
  right: .75rem;
  width: auto;
}

/* Animated gold/green shine */
h1,
.section-head h2,
.class-copy h2,
.class-visual figcaption strong,
.problem-accordion summary,
.roadmap h3,
.app-copy h3,
.follow-card h3,
.product-copy h3,
.final-card h2,
.contact-card h2,
.founder-mark span {
  color: transparent;
  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      #ffffff 18%,
      #d8fbe8 28%,
      #18b979 42%,
      #f4e6b2 55%,
      #ffffff 68%,
      #b8ffd8 82%,
      #ffffff 100%
    );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 34px rgba(24, 185, 121, .10);
  animation: text-shine 5.5s ease-in-out infinite;
}

.hero-overlay h1 {
  letter-spacing: 0;
  text-shadow:
    0 18px 55px rgba(0, 0, 0, .55),
    0 0 38px rgba(24, 185, 121, .18);
}

.title-icon,
.eyebrow,
.brand span,
.class-save,
.proof-pill,
.tool-tags span,
.follow-card span,
.free-tool-grid a span {
  animation: soft-pulse 2.8s ease-in-out infinite;
}

article,
details,
.app-card,
.follow-card,
.contact-card,
.final-card,
.founder-mark,
.class-visual,
.product-card,
.reviews-grid figure,
.change-table,
.tools-more,
.free-tool-grid a {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11, 18, 14, .94), rgba(7, 12, 9, .90)) padding-box,
    linear-gradient(120deg, rgba(24, 185, 121, .20), rgba(255,255,255,.08), rgba(244,230,178,.32), rgba(24, 185, 121, .46), rgba(255,255,255,.08)) border-box;
  background-size: 100% 100%, 340% 340%;
  animation: border-shine 7s linear infinite;
}

.dark,
.apps-section,
.reviews-section,
.outcome-section {
  position: relative;
}

.dark::before,
.apps-section::before,
.reviews-section::before,
.outcome-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(24, 185, 121, .10), transparent);
  opacity: .32;
  transform: translateX(-100%);
  animation: section-sweep 8s ease-in-out infinite;
}

.btn,
.class-cta,
.plans a,
.addon-card a,
.app-card a,
.sticky a {
  position: relative;
  overflow: hidden;
}

.btn::after,
.class-cta::after,
.plans a::after,
.addon-card a::after,
.app-card a::after,
.sticky a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 45%, transparent 70%);
  transform: translateX(-130%);
  animation: button-sheen 3.8s ease-in-out infinite;
}

@keyframes text-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes border-shine {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}

@keyframes soft-pulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(24, 185, 121, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 26px rgba(24, 185, 121, .22);
    filter: brightness(1.08);
  }
}

@keyframes section-sweep {
  0%, 58%, 100% { transform: translateX(-100%); opacity: 0; }
  72% { opacity: .34; }
  88% { transform: translateX(100%); opacity: 0; }
}

@keyframes button-sheen {
  0%, 55%, 100% { transform: translateX(-130%); }
  72% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  h1,
  .section-head h2,
  .class-copy h2,
  .class-visual figcaption strong,
  .problem-accordion summary,
  .roadmap h3,
  .app-copy h3,
  .follow-card h3,
  .product-copy h3,
  .final-card h2,
  .contact-card h2,
  .founder-mark span,
  article,
  details,
  .app-card,
  .follow-card,
  .contact-card,
  .final-card,
  .founder-mark,
  .class-visual,
  .product-card,
  .reviews-grid figure,
  .change-table,
  .tools-more,
  .free-tool-grid a,
  .title-icon,
  .eyebrow,
  .brand span,
  .class-save,
  .proof-pill,
  .tool-tags span,
  .follow-card span,
  .free-tool-grid a span {
    animation: none;
  }
}

/* Member-card style for Before / After */
.member-style {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.member-style .change-panel {
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  padding: clamp(1.2rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) padding-box,
    linear-gradient(130deg, rgba(255, 255, 255, .16), rgba(24, 185, 121, .20), rgba(255, 255, 255, .06)) border-box;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

.member-style .change-panel h3 {
  margin-bottom: .75rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.member-style .change-panel p {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--muted);
}

.member-style ul {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-style li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  color: rgba(247, 255, 249, .86);
  font-weight: 850;
  line-height: 1.55;
}

.member-style li span {
  display: grid;
  min-width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--primary);
  background: rgba(255, 255, 255, .035);
  font-family: "Space Grotesk", sans-serif;
  font-size: .82rem;
  font-weight: 900;
}

.member-style .after li span {
  color: #041008;
  background: var(--primary);
  border-color: transparent;
}

@media (max-width: 980px) {
  .member-style {
    grid-template-columns: 1fr;
  }
}

/* Hard split Before / After cards */
.split-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.2rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.split-card {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  border: 1px solid rgba(24, 185, 121, .26) !important;
  border-radius: 28px !important;
  padding: clamp(1.35rem, 3vw, 2.2rem) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(24, 185, 121, .11), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    rgba(5, 8, 6, .96) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .42),
    inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

.split-card.after {
  background:
    radial-gradient(circle at 85% 0%, rgba(24, 185, 121, .18), transparent 20rem),
    linear-gradient(180deg, rgba(24, 185, 121, .08), rgba(255, 255, 255, .015)),
    rgba(7, 20, 13, .96) !important;
}

.split-card h3 {
  margin-bottom: .75rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.08;
}

.split-card p {
  margin-bottom: 1.35rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.split-card ul {
  display: grid;
  gap: .95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.split-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  color: rgba(247, 255, 249, .88);
  font-weight: 850;
  line-height: 1.55;
}

.split-card li span {
  display: grid;
  min-width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border: 1px solid rgba(24, 185, 121, .28);
  border-radius: 999px;
  color: var(--primary);
  background: rgba(24, 185, 121, .08);
  font-family: "Space Grotesk", sans-serif;
  font-size: .8rem;
  font-weight: 900;
}

.split-card.after li span {
  color: #041008;
  background: var(--primary);
}

@media (max-width: 980px) {
  .split-cards {
    grid-template-columns: 1fr;
  }
}

/* Outcome section: final forced two-card layout */
.outcome-section .split-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(2.5rem, 6vw, 5.5rem) !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 2.5rem auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.outcome-section .split-card {
  display: block !important;
  min-width: 0 !important;
  border: 1px solid rgba(24, 185, 121, .34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(#07100b, #07100b) padding-box,
    linear-gradient(135deg, rgba(24, 185, 121, .95), rgba(255, 255, 255, .08), rgba(24, 185, 121, .45)) border-box !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .44) !important;
}

.outcome-section .split-card.after {
  background:
    linear-gradient(#092015, #092015) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(24, 185, 121, .9), rgba(255, 255, 255, .08)) border-box !important;
}

@media (max-width: 980px) {
  .outcome-section .split-cards {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: 6.5rem;
  }

  .hero-statement-title {
    font-size: clamp(3.65rem, 19vw, 6.6rem);
    line-height: .84;
  }

  .hero-statement-pill {
    max-width: calc(100vw - 2rem);
    white-space: normal;
    justify-content: center;
  }
}

/* Right side LINE contact button replaces the old bottom sticky bar */
.sticky {
  display: none !important;
}

.line-float {
  position: fixed;
  right: clamp(.7rem, 2vw, 1.35rem);
  top: 50%;
  z-index: 60;
  display: grid;
  min-width: 3rem;
  min-height: 8rem;
  place-items: center;
  padding: .95rem .62rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #041008;
  background: linear-gradient(180deg, #35e49b, #15bf78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 30px rgba(24, 185, 121, .24);
  font-family: "Space Grotesk", "Noto Sans Thai", sans-serif;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-orientation: mixed;
  transform: translateY(-50%);
  transition: transform .2s ease, box-shadow .2s ease;
  writing-mode: vertical-rl;
}

.line-float:hover {
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 0 44px rgba(24, 185, 121, .36);
  transform: translateY(-50%) translateX(-4px);
}

@media (max-width: 760px) {
  .line-float {
    top: auto;
    right: .85rem;
    bottom: .85rem;
    min-width: auto;
    min-height: auto;
    padding: .85rem 1rem;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .line-float:hover {
    transform: translateY(-2px);
  }
}

/* Roadmap center-line sequence: 1 -> 2 -> 3 -> 4 */
#roadmap .roadmap {
  padding-top: 7rem !important;
}

.roadmap-path {
  top: 2.15rem !important;
  height: 8rem !important;
}

.roadmap-path path {
  stroke-width: 2 !important;
  stroke-dasharray: none !important;
  stroke: rgba(247, 255, 249, .16) !important;
  animation: none !important;
}

.roadmap-path::before {
  content: "";
  position: absolute;
  left: 9.5%;
  top: 50%;
  width: clamp(8rem, 18vw, 15rem);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f7fff9, #1bd187, transparent);
  box-shadow: 0 0 20px rgba(24, 185, 121, .75), 0 0 42px rgba(24, 185, 121, .36);
  transform: translateY(-50%);
  animation: roadmap-step-beam 8s cubic-bezier(.72, 0, .28, 1) infinite;
}

#roadmap .roadmap article {
  border-color: rgba(24, 185, 121, .18) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
  animation: roadmap-card-pulse 8s ease-in-out infinite;
}

#roadmap .roadmap article:nth-of-type(1) { animation-delay: 0s; }
#roadmap .roadmap article:nth-of-type(2) { animation-delay: 2s; }
#roadmap .roadmap article:nth-of-type(3) { animation-delay: 4s; }
#roadmap .roadmap article:nth-of-type(4) { animation-delay: 6s; }

#roadmap .roadmap article::before {
  animation: roadmap-node-pulse 8s ease-in-out infinite !important;
}

#roadmap .roadmap article:nth-of-type(1)::before { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2)::before { animation-delay: 2s !important; }
#roadmap .roadmap article:nth-of-type(3)::before { animation-delay: 4s !important; }
#roadmap .roadmap article:nth-of-type(4)::before { animation-delay: 6s !important; }

@keyframes roadmap-step-beam {
  0%, 5% {
    left: 7%;
    opacity: 0;
  }
  9%, 20% {
    left: 7%;
    opacity: 1;
  }
  25%, 30% {
    left: 31%;
    opacity: 1;
  }
  34%, 45% {
    left: 31%;
    opacity: 1;
  }
  50%, 55% {
    left: 55%;
    opacity: 1;
  }
  59%, 70% {
    left: 55%;
    opacity: 1;
  }
  75%, 88% {
    left: 79%;
    opacity: 1;
  }
  96%, 100% {
    left: 79%;
    opacity: 0;
  }
}

@keyframes roadmap-card-pulse {
  0%, 24%, 100% {
    border-color: rgba(24, 185, 121, .18);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .38),
      inset 0 0 0 1px rgba(255, 255, 255, .035);
  }
  7%, 17% {
    border-color: rgba(24, 185, 121, .85);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, .42),
      0 0 0 1px rgba(24, 185, 121, .35),
      0 0 44px rgba(24, 185, 121, .34),
      inset 0 0 28px rgba(24, 185, 121, .10);
  }
}

@keyframes roadmap-node-pulse {
  0%, 24%, 100% {
    box-shadow:
      0 0 0 .6rem rgba(24, 185, 121, .08),
      0 0 32px rgba(24, 185, 121, .34),
      inset 0 1px 0 rgba(255, 255, 255, .72);
  }
  7%, 17% {
    box-shadow:
      0 0 0 1rem rgba(24, 185, 121, .14),
      0 0 62px rgba(247, 255, 249, .7),
      0 0 90px rgba(24, 185, 121, .42),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}

@media (max-width: 980px) {
  .roadmap-path::before {
    display: none;
  }
}

/* Premium roadmap flow: LV.1 -> LV.2 -> LV.3 -> Coaching */
#roadmap .roadmap {
  position: relative;
  isolation: isolate;
  padding-top: 5.2rem;
  gap: clamp(1.1rem, 2vw, 1.45rem);
}

#roadmap .roadmap::before {
  content: "";
  position: absolute;
  top: 2.34rem;
  left: calc(12.5% + .8rem);
  right: calc(12.5% + .8rem);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(24, 185, 121, .12), rgba(255, 255, 255, .24), rgba(24, 185, 121, .12));
  box-shadow: 0 0 24px rgba(24, 185, 121, .28);
  z-index: 0;
}

#roadmap .roadmap::after {
  content: "";
  position: absolute;
  top: 2.11rem;
  left: calc(12.5% - 5rem);
  width: clamp(7rem, 16vw, 13rem);
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(24, 185, 121, .12), #f7fff9, rgba(24, 185, 121, .95), transparent);
  filter: blur(.5px);
  box-shadow: 0 0 28px rgba(24, 185, 121, .58);
  animation: roadmap-beam 5.8s cubic-bezier(.66, 0, .34, 1) infinite;
  z-index: 1;
}

#roadmap .roadmap article {
  position: relative;
  z-index: 2;
  overflow: visible;
}

#roadmap .roadmap article::before {
  content: "01";
  position: absolute;
  top: -4.6rem;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 3.9rem;
  height: 3.9rem;
  place-items: center;
  border: 1px solid rgba(24, 185, 121, .55);
  border-radius: 999px;
  color: #03110a;
  background:
    radial-gradient(circle at 35% 25%, #ffffff, #77f4ba 38%, #16c37c 74%);
  box-shadow:
    0 0 0 .6rem rgba(24, 185, 121, .08),
    0 0 36px rgba(24, 185, 121, .42),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  transform: translateX(-50%);
  animation: roadmap-node 5.8s ease-in-out infinite;
}

#roadmap .roadmap article::after {
  content: "";
  position: absolute;
  top: -2.48rem;
  left: 50%;
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(180deg, rgba(24, 185, 121, .75), transparent);
  box-shadow: 0 0 18px rgba(24, 185, 121, .45);
  transform: translateX(-50%);
}

#roadmap .roadmap article:nth-child(2)::before { content: "02"; animation-delay: 1.45s; }
#roadmap .roadmap article:nth-child(3)::before { content: "03"; animation-delay: 2.9s; }
#roadmap .roadmap article:nth-child(4)::before { content: "04"; animation-delay: 4.35s; }

#roadmap .roadmap article:nth-child(2)::after { animation-delay: 1.45s; }
#roadmap .roadmap article:nth-child(3)::after { animation-delay: 2.9s; }
#roadmap .roadmap article:nth-child(4)::after { animation-delay: 4.35s; }

@keyframes roadmap-beam {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(calc(100vw - 16rem)); opacity: 0; }
}

@keyframes roadmap-node {
  0%, 18%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 0 0 .6rem rgba(24, 185, 121, .08),
      0 0 32px rgba(24, 185, 121, .34),
      inset 0 1px 0 rgba(255, 255, 255, .72);
  }
  8% {
    transform: translateX(-50%) scale(1.12);
    box-shadow:
      0 0 0 1rem rgba(24, 185, 121, .13),
      0 0 52px rgba(247, 255, 249, .62),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}

@media (max-width: 980px) {
  #roadmap .roadmap {
    padding-top: 0;
    padding-left: 3.8rem;
  }

  #roadmap .roadmap::before {
    top: 1rem;
    bottom: 1rem;
    left: 1.9rem;
    right: auto;
    width: 2px;
    height: auto;
  }

  #roadmap .roadmap::after {
    top: -3rem;
    left: 1.63rem;
    width: .55rem;
    height: 10rem;
    background: linear-gradient(180deg, transparent, rgba(24, 185, 121, .12), #f7fff9, rgba(24, 185, 121, .95), transparent);
    animation: roadmap-beam-mobile 5.8s cubic-bezier(.66, 0, .34, 1) infinite;
  }

  #roadmap .roadmap article::before {
    top: 1.35rem;
    left: -3.8rem;
    width: 3rem;
    height: 3rem;
    font-size: .85rem;
    transform: none;
  }

  #roadmap .roadmap article::after {
    display: none;
  }

  @keyframes roadmap-beam-mobile {
    0% { transform: translateY(0); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateY(calc(100% + 36rem)); opacity: 0; }
  }
}

/* Roadmap pinned journey layout */
#roadmap .roadmap {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-areas: "lv1 lv2 lv3 lv4" !important;
  gap: clamp(1rem, 2vw, 1.6rem) !important;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(4.5rem, 7vw, 6rem) .25rem clamp(2rem, 4vw, 3rem) !important;
}

#roadmap .roadmap::before,
#roadmap .roadmap::after {
  display: none !important;
}

.roadmap-path {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  width: 100%;
  height: 15rem;
  pointer-events: none;
  overflow: visible;
}

.roadmap-path path {
  fill: none;
  stroke: url("#roadmapGradient");
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  filter: drop-shadow(0 0 12px rgba(24, 185, 121, .32));
  animation: journey-dash 1.15s linear infinite;
}

#roadmap .roadmap article {
  overflow: hidden !important;
  min-height: 100%;
  border-radius: 22px !important;
  background:
    linear-gradient(#07100b, #07100b) padding-box,
    linear-gradient(135deg, rgba(24, 185, 121, .55), rgba(255,255,255,.08), rgba(24,185,121,.22)) border-box !important;
  transform-origin: center;
}

#roadmap .roadmap article:nth-of-type(1) {
  grid-area: lv1;
  transform: translateY(.4rem) rotate(-2.8deg);
}

#roadmap .roadmap article:nth-of-type(2) {
  grid-area: lv2;
  transform: translateY(3.4rem) rotate(2.3deg);
}

#roadmap .roadmap article:nth-of-type(3) {
  grid-area: lv3;
  transform: translateY(.9rem) rotate(-1.8deg);
}

#roadmap .roadmap article:nth-of-type(4) {
  grid-area: lv4;
  transform: translateY(3rem) rotate(2.7deg);
}

#roadmap .roadmap article:hover {
  transform: translateY(-8px) rotate(0deg) !important;
}

#roadmap .roadmap article::before {
  top: -.95rem !important;
  left: 1.35rem !important;
  transform: none !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  z-index: 5;
}

#roadmap .roadmap article::after {
  content: "";
  position: absolute;
  top: -.55rem !important;
  left: 50% !important;
  z-index: 6;
  display: block !important;
  width: .75rem !important;
  height: 2rem !important;
  border-radius: .18rem;
  background: linear-gradient(180deg, #caffdf, #12c879);
  box-shadow: 0 0 18px rgba(24, 185, 121, .42);
  transform: translateX(-50%) rotate(-8deg) !important;
}

#roadmap .roadmap img {
  aspect-ratio: 16 / 8.8;
}

@keyframes journey-dash {
  to { stroke-dashoffset: -24; }
}

@media (max-width: 980px) {
  #roadmap .roadmap {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "lv1"
      "lv2"
      "lv3"
      "lv4" !important;
    gap: 2rem !important;
    max-width: 620px;
    padding-left: 1rem !important;
  }

  .roadmap-path {
    display: none;
  }

  #roadmap .roadmap article,
  #roadmap .roadmap article:nth-of-type(1),
  #roadmap .roadmap article:nth-of-type(2),
  #roadmap .roadmap article:nth-of-type(3),
  #roadmap .roadmap article:nth-of-type(4) {
    transform: none !important;
  }
}

/* Stronger handoff glow: the whole card lights up, then passes to the next */
#roadmap .roadmap article {
  animation: roadmap-card-handoff 8s linear infinite !important;
}

#roadmap .roadmap article:nth-of-type(1) { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2) { animation-delay: 2s !important; }
#roadmap .roadmap article:nth-of-type(3) { animation-delay: 4s !important; }
#roadmap .roadmap article:nth-of-type(4) { animation-delay: 6s !important; }

#roadmap .roadmap article img {
  animation: roadmap-image-handoff 8s linear infinite !important;
}

#roadmap .roadmap article:nth-of-type(1) img { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2) img { animation-delay: 2s !important; }
#roadmap .roadmap article:nth-of-type(3) img { animation-delay: 4s !important; }
#roadmap .roadmap article:nth-of-type(4) img { animation-delay: 6s !important; }

@keyframes roadmap-card-handoff {
  0%, 12% {
    border-color: rgba(24, 185, 121, .96);
    box-shadow:
      0 28px 90px rgba(0, 0, 0, .44),
      0 0 0 1px rgba(24, 185, 121, .5),
      0 0 34px rgba(24, 185, 121, .46),
      0 0 90px rgba(24, 185, 121, .26),
      inset 0 0 46px rgba(24, 185, 121, .18) !important;
    filter: brightness(1.12) saturate(1.14);
  }
  18%, 26% {
    border-color: rgba(24, 185, 121, .52);
    box-shadow:
      0 26px 76px rgba(0, 0, 0, .4),
      0 0 0 1px rgba(24, 185, 121, .26),
      0 0 36px rgba(24, 185, 121, .18),
      inset 0 0 26px rgba(24, 185, 121, .08) !important;
    filter: brightness(1.03) saturate(1.04);
  }
  34%, 100% {
    border-color: rgba(24, 185, 121, .18);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .38),
      inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
    filter: brightness(.92) saturate(.92);
  }
}

@keyframes roadmap-image-handoff {
  0%, 12% {
    filter: brightness(1.16) saturate(1.18) contrast(1.06);
  }
  18%, 26% {
    filter: brightness(1.02) saturate(1.02) contrast(1.02);
  }
  34%, 100% {
    filter: brightness(.82) saturate(.86) contrast(1.02);
  }
}

/* Final roadmap sequence override */
#roadmap .roadmap {
  padding-top: 7rem !important;
}

#roadmap .roadmap .roadmap-path {
  display: block !important;
  top: 9.8rem !important;
  height: 10rem !important;
  overflow: visible !important;
}

#roadmap .roadmap .roadmap-path::before {
  display: none !important;
}

#roadmap .roadmap .roadmap-path path {
  fill: none !important;
  stroke-linecap: round !important;
}

#roadmap .roadmap .roadmap-path .roadmap-track {
  stroke: rgba(247, 255, 249, .14) !important;
  stroke-width: 2 !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 10px rgba(24, 185, 121, .24));
  animation: none !important;
}

#roadmap .roadmap .roadmap-path .roadmap-beam {
  stroke: url("#roadmapGradient") !important;
  stroke-width: 5 !important;
  stroke-dasharray: 16 100 !important;
  stroke-dashoffset: 8;
  filter: drop-shadow(0 0 10px rgba(247, 255, 249, .7)) drop-shadow(0 0 22px rgba(24, 185, 121, .7));
  animation: roadmap-segment-hop 8s cubic-bezier(.72, 0, .28, 1) infinite !important;
}

#roadmap .roadmap article {
  border-color: rgba(24, 185, 121, .18) !important;
  animation: roadmap-card-pulse 8s ease-in-out infinite !important;
}

#roadmap .roadmap article:nth-of-type(1) { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2) { animation-delay: 2s !important; }
#roadmap .roadmap article:nth-of-type(3) { animation-delay: 4s !important; }
#roadmap .roadmap article:nth-of-type(4) { animation-delay: 6s !important; }

#roadmap .roadmap article::before {
  animation: roadmap-node-pulse 8s ease-in-out infinite !important;
}

#roadmap .roadmap article:nth-of-type(1)::before { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2)::before { animation-delay: 2s !important; }
#roadmap .roadmap article:nth-of-type(3)::before { animation-delay: 4s !important; }
#roadmap .roadmap article:nth-of-type(4)::before { animation-delay: 6s !important; }

@keyframes roadmap-segment-hop {
  0%, 7% {
    stroke-dashoffset: 8;
    opacity: 0;
  }
  10%, 22% {
    stroke-dashoffset: 8;
    opacity: 1;
  }
  27%, 32% {
    stroke-dashoffset: -18;
    opacity: 1;
  }
  35%, 47% {
    stroke-dashoffset: -18;
    opacity: 1;
  }
  52%, 57% {
    stroke-dashoffset: -44;
    opacity: 1;
  }
  60%, 72% {
    stroke-dashoffset: -44;
    opacity: 1;
  }
  77%, 90% {
    stroke-dashoffset: -70;
    opacity: 1;
  }
  97%, 100% {
    stroke-dashoffset: -70;
    opacity: 0;
  }
}

@media (max-width: 980px) {
  #roadmap .roadmap .roadmap-path {
    display: none !important;
  }
}

/* Keep roadmap step numbers correct after inserting the SVG path */
#roadmap .roadmap article:nth-of-type(1)::before {
  content: "01" !important;
}

#roadmap .roadmap article:nth-of-type(2)::before {
  content: "02" !important;
}

#roadmap .roadmap article:nth-of-type(3)::before {
  content: "03" !important;
}

#roadmap .roadmap article:nth-of-type(4)::before {
  content: "04" !important;
}

/* Roadmap final: equal 4-card sequence with connected center guide */
#roadmap .roadmap {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-areas: "lv1 lv2 lv3 lv4" !important;
  align-items: stretch !important;
  gap: clamp(1rem, 2vw, 1.45rem) !important;
  padding-top: 5.4rem !important;
}

#roadmap .roadmap article,
#roadmap .roadmap article:nth-of-type(1),
#roadmap .roadmap article:nth-of-type(2),
#roadmap .roadmap article:nth-of-type(3),
#roadmap .roadmap article:nth-of-type(4) {
  overflow: visible !important;
  transform: none !important;
  height: 100% !important;
}

#roadmap .roadmap article img {
  border-radius: 22px 22px 0 0 !important;
}

#roadmap .roadmap article:hover {
  transform: translateY(-6px) !important;
}

#roadmap .roadmap .roadmap-path {
  top: 1.7rem !important;
  left: .25rem !important;
  width: calc(100% - .5rem) !important;
  height: 5.5rem !important;
  z-index: 1 !important;
}

#roadmap .roadmap .roadmap-path .roadmap-track {
  stroke: rgba(24, 185, 121, .26) !important;
  stroke-width: 3 !important;
}

#roadmap .roadmap .roadmap-path .roadmap-beam {
  stroke-width: 7 !important;
  stroke-dasharray: 14 100 !important;
  stroke-dashoffset: 3 !important;
  animation: roadmap-segment-hop-clean 8s cubic-bezier(.72, 0, .28, 1) infinite !important;
}

#roadmap .roadmap article::before {
  top: -4.3rem !important;
  left: 50% !important;
  width: 3.7rem !important;
  height: 3.7rem !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  animation: roadmap-node-pulse-clean 8s ease-in-out infinite !important;
}

#roadmap .roadmap article::after {
  top: -1.1rem !important;
  left: 50% !important;
  width: 2px !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(24, 185, 121, .9), rgba(24, 185, 121, .08)) !important;
  transform: translateX(-50%) !important;
}

#roadmap .roadmap article:nth-of-type(1) {
  animation-delay: 0s !important;
}

#roadmap .roadmap article:nth-of-type(2) {
  animation-delay: 2s !important;
}

#roadmap .roadmap article:nth-of-type(3) {
  animation-delay: 4s !important;
}

#roadmap .roadmap article:nth-of-type(4) {
  animation-delay: 6s !important;
}

#roadmap .roadmap article:nth-of-type(1)::before {
  animation-delay: 0s !important;
}

#roadmap .roadmap article:nth-of-type(2)::before {
  animation-delay: 2s !important;
}

#roadmap .roadmap article:nth-of-type(3)::before {
  animation-delay: 4s !important;
}

#roadmap .roadmap article:nth-of-type(4)::before {
  animation-delay: 6s !important;
}

@keyframes roadmap-segment-hop-clean {
  0%, 16% {
    stroke-dashoffset: 3;
    opacity: 1;
  }
  23%, 40% {
    stroke-dashoffset: -23;
    opacity: 1;
  }
  47%, 64% {
    stroke-dashoffset: -49;
    opacity: 1;
  }
  71%, 90% {
    stroke-dashoffset: -75;
    opacity: 1;
  }
  96%, 100% {
    stroke-dashoffset: -75;
    opacity: 0;
  }
}

@keyframes roadmap-card-pulse {
  0%, 16% {
    border-color: rgba(24, 185, 121, .9);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, .42),
      0 0 0 1px rgba(24, 185, 121, .38),
      0 0 48px rgba(24, 185, 121, .34),
      inset 0 0 30px rgba(24, 185, 121, .10);
  }
  23%, 100% {
    border-color: rgba(24, 185, 121, .18);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .38),
      inset 0 0 0 1px rgba(255, 255, 255, .035);
  }
}

@keyframes roadmap-node-pulse-clean {
  0%, 16% {
    box-shadow:
      0 0 0 1rem rgba(24, 185, 121, .14),
      0 0 62px rgba(247, 255, 249, .7),
      0 0 90px rgba(24, 185, 121, .42),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  23%, 100% {
    box-shadow:
      0 0 0 .6rem rgba(24, 185, 121, .08),
      0 0 32px rgba(24, 185, 121, .34),
      inset 0 1px 0 rgba(255, 255, 255, .72);
  }
}

@media (max-width: 980px) {
  #roadmap .roadmap {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "lv1"
      "lv2"
      "lv3"
      "lv4" !important;
    padding-top: 0 !important;
  }

  #roadmap .roadmap .roadmap-path {
    display: none !important;
  }

  #roadmap .roadmap article::before {
    top: 1rem !important;
    left: 1rem !important;
    transform: none !important;
  }

  #roadmap .roadmap article::after {
    display: none !important;
  }
}

/* Absolute last roadmap card handoff override */
#roadmap .roadmap > article {
  animation-name: roadmap-card-handoff-final !important;
  animation-duration: 8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

#roadmap .roadmap > article:nth-of-type(1) { animation-delay: 0s !important; }
#roadmap .roadmap > article:nth-of-type(2) { animation-delay: 2s !important; }
#roadmap .roadmap > article:nth-of-type(3) { animation-delay: 4s !important; }
#roadmap .roadmap > article:nth-of-type(4) { animation-delay: 6s !important; }

@keyframes roadmap-card-handoff-final {
  0%, 10% {
    border-color: rgba(24, 185, 121, 1);
    box-shadow:
      0 28px 90px rgba(0, 0, 0, .44),
      0 0 0 1px rgba(24, 185, 121, .62),
      0 0 38px rgba(24, 185, 121, .58),
      0 0 100px rgba(24, 185, 121, .32),
      inset 0 0 54px rgba(24, 185, 121, .22);
    filter: brightness(1.16) saturate(1.18);
  }
  16%, 25% {
    border-color: rgba(24, 185, 121, .55);
    box-shadow:
      0 26px 78px rgba(0, 0, 0, .4),
      0 0 0 1px rgba(24, 185, 121, .28),
      0 0 34px rgba(24, 185, 121, .22),
      inset 0 0 28px rgba(24, 185, 121, .09);
    filter: brightness(1.04) saturate(1.04);
  }
  34%, 100% {
    border-color: rgba(24, 185, 121, .18);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .38),
      inset 0 0 0 1px rgba(255, 255, 255, .035);
    filter: brightness(.9) saturate(.9);
  }
}

#roadmap .roadmap .roadmap-glow {
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(190, 255, 221, .38), transparent 9rem),
    linear-gradient(180deg, rgba(24, 185, 121, .22), rgba(24, 185, 121, .04));
  box-shadow:
    0 0 0 1px rgba(24, 185, 121, .58),
    0 0 40px rgba(24, 185, 121, .48),
    0 0 96px rgba(24, 185, 121, .28),
    inset 0 0 44px rgba(24, 185, 121, .18);
  mix-blend-mode: screen;
  opacity: 0;
  animation: roadmap-glow-handoff 8s linear infinite;
}

#roadmap .roadmap article:nth-of-type(1) .roadmap-glow { animation-delay: 0s; }
#roadmap .roadmap article:nth-of-type(2) .roadmap-glow { animation-delay: 2s; }
#roadmap .roadmap article:nth-of-type(3) .roadmap-glow { animation-delay: 4s; }
#roadmap .roadmap article:nth-of-type(4) .roadmap-glow { animation-delay: 6s; }

#roadmap .roadmap article > img,
#roadmap .roadmap article > .roadmap-copy {
  position: relative;
  z-index: 2;
}

@keyframes roadmap-glow-handoff {
  0%, 11% {
    opacity: 1;
  }
  17%, 25% {
    opacity: .38;
  }
  34%, 100% {
    opacity: 0;
  }
}

/* Slower roadmap handoff with active-card growth */
#roadmap .roadmap > article {
  animation-name: roadmap-card-handoff-slow !important;
  animation-duration: 12s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  transform-origin: center center !important;
}

#roadmap .roadmap > article:nth-of-type(1) { animation-delay: 0s !important; }
#roadmap .roadmap > article:nth-of-type(2) { animation-delay: -9s !important; }
#roadmap .roadmap > article:nth-of-type(3) { animation-delay: -6s !important; }
#roadmap .roadmap > article:nth-of-type(4) { animation-delay: -3s !important; }

#roadmap .roadmap > article:nth-of-type(1) { animation-name: roadmap-card-green !important; }
#roadmap .roadmap > article:nth-of-type(2) { animation-name: roadmap-card-gold !important; }
#roadmap .roadmap > article:nth-of-type(3) { animation-name: roadmap-card-blue !important; }
#roadmap .roadmap > article:nth-of-type(4) { animation-name: roadmap-card-purple !important; }

#roadmap .roadmap article img {
  animation-duration: 12s !important;
}

#roadmap .roadmap article:nth-of-type(1) img { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2) img { animation-delay: -9s !important; }
#roadmap .roadmap article:nth-of-type(3) img { animation-delay: -6s !important; }
#roadmap .roadmap article:nth-of-type(4) img { animation-delay: -3s !important; }

#roadmap .roadmap .roadmap-glow {
  animation-name: roadmap-glow-handoff-slow !important;
  animation-duration: 12s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

#roadmap .roadmap article:nth-of-type(1) .roadmap-glow { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2) .roadmap-glow { animation-delay: -9s !important; }
#roadmap .roadmap article:nth-of-type(3) .roadmap-glow { animation-delay: -6s !important; }
#roadmap .roadmap article:nth-of-type(4) .roadmap-glow { animation-delay: -3s !important; }

#roadmap .roadmap article:nth-of-type(1) .roadmap-glow {
  background:
    radial-gradient(circle at 50% 18%, rgba(190, 255, 221, .38), transparent 9rem),
    linear-gradient(180deg, rgba(24, 185, 121, .22), rgba(24, 185, 121, .04));
  box-shadow:
    0 0 0 1px rgba(24, 185, 121, .58),
    0 0 40px rgba(24, 185, 121, .48),
    0 0 96px rgba(24, 185, 121, .28),
    inset 0 0 44px rgba(24, 185, 121, .18);
}

#roadmap .roadmap article:nth-of-type(2) .roadmap-glow {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 232, 164, .42), transparent 9rem),
    linear-gradient(180deg, rgba(224, 171, 54, .24), rgba(224, 171, 54, .045));
  box-shadow:
    0 0 0 1px rgba(224, 171, 54, .62),
    0 0 42px rgba(224, 171, 54, .48),
    0 0 96px rgba(224, 171, 54, .28),
    inset 0 0 44px rgba(224, 171, 54, .18);
}

#roadmap .roadmap article:nth-of-type(3) .roadmap-glow {
  background:
    radial-gradient(circle at 50% 18%, rgba(164, 227, 255, .42), transparent 9rem),
    linear-gradient(180deg, rgba(48, 168, 255, .22), rgba(48, 168, 255, .045));
  box-shadow:
    0 0 0 1px rgba(48, 168, 255, .58),
    0 0 42px rgba(48, 168, 255, .46),
    0 0 96px rgba(48, 168, 255, .26),
    inset 0 0 44px rgba(48, 168, 255, .17);
}

#roadmap .roadmap article:nth-of-type(4) .roadmap-glow {
  background:
    radial-gradient(circle at 50% 18%, rgba(221, 184, 255, .44), transparent 9rem),
    linear-gradient(180deg, rgba(170, 92, 255, .24), rgba(170, 92, 255, .05));
  box-shadow:
    0 0 0 1px rgba(170, 92, 255, .62),
    0 0 42px rgba(170, 92, 255, .48),
    0 0 96px rgba(170, 92, 255, .28),
    inset 0 0 44px rgba(170, 92, 255, .18);
}

#roadmap .roadmap article::before {
  animation-duration: 12s !important;
}

#roadmap .roadmap article:nth-of-type(1)::before { animation-delay: 0s !important; }
#roadmap .roadmap article:nth-of-type(2)::before { animation-delay: -9s !important; }
#roadmap .roadmap article:nth-of-type(3)::before { animation-delay: -6s !important; }
#roadmap .roadmap article:nth-of-type(4)::before { animation-delay: -3s !important; }

#roadmap .roadmap .roadmap-path .roadmap-beam {
  animation-name: roadmap-segment-hop-slow !important;
  animation-duration: 12s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

@keyframes roadmap-card-handoff-slow {
  0%, 13% {
    scale: 1.045;
    border-color: rgba(24, 185, 121, 1);
    box-shadow:
      0 32px 100px rgba(0, 0, 0, .48),
      0 0 0 1px rgba(24, 185, 121, .62),
      0 0 46px rgba(24, 185, 121, .58),
      0 0 110px rgba(24, 185, 121, .3),
      inset 0 0 58px rgba(24, 185, 121, .22);
    filter: brightness(1.16) saturate(1.18);
  }
  18%, 25% {
    scale: 1.02;
    border-color: rgba(24, 185, 121, .6);
    box-shadow:
      0 28px 84px rgba(0, 0, 0, .43),
      0 0 0 1px rgba(24, 185, 121, .3),
      0 0 38px rgba(24, 185, 121, .24),
      inset 0 0 30px rgba(24, 185, 121, .1);
    filter: brightness(1.04) saturate(1.05);
  }
  26%, 100% {
    scale: 1;
    border-color: rgba(24, 185, 121, .18);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .38),
      inset 0 0 0 1px rgba(255, 255, 255, .035);
    filter: brightness(.9) saturate(.9);
  }
}

@keyframes roadmap-card-green {
  0%, 13% {
    scale: 1.045;
    border-color: rgba(24, 185, 121, 1);
    box-shadow: 0 32px 100px rgba(0,0,0,.48), 0 0 0 1px rgba(24,185,121,.62), 0 0 46px rgba(24,185,121,.58), 0 0 110px rgba(24,185,121,.3), inset 0 0 58px rgba(24,185,121,.22);
    filter: brightness(1.16) saturate(1.18);
  }
  18%, 25% {
    scale: 1.02;
    border-color: rgba(24, 185, 121, .55);
    box-shadow: 0 28px 84px rgba(0,0,0,.43), 0 0 0 1px rgba(24,185,121,.3), 0 0 38px rgba(24,185,121,.24), inset 0 0 30px rgba(24,185,121,.1);
    filter: brightness(1.04) saturate(1.05);
  }
  34%, 100% { scale: 1; border-color: rgba(24,185,121,.18); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035); filter: brightness(.9) saturate(.9); }
}

@keyframes roadmap-card-gold {
  0%, 13% {
    scale: 1.045;
    border-color: rgba(224, 171, 54, 1);
    box-shadow: 0 32px 100px rgba(0,0,0,.48), 0 0 0 1px rgba(224,171,54,.66), 0 0 46px rgba(224,171,54,.58), 0 0 110px rgba(224,171,54,.3), inset 0 0 58px rgba(224,171,54,.22);
    filter: brightness(1.16) saturate(1.16);
  }
  18%, 25% {
    scale: 1.02;
    border-color: rgba(224, 171, 54, .55);
    box-shadow: 0 28px 84px rgba(0,0,0,.43), 0 0 0 1px rgba(224,171,54,.3), 0 0 38px rgba(224,171,54,.24), inset 0 0 30px rgba(224,171,54,.1);
    filter: brightness(1.04) saturate(1.04);
  }
  34%, 100% { scale: 1; border-color: rgba(24,185,121,.18); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035); filter: brightness(.9) saturate(.9); }
}

@keyframes roadmap-card-blue {
  0%, 13% {
    scale: 1.045;
    border-color: rgba(48, 168, 255, 1);
    box-shadow: 0 32px 100px rgba(0,0,0,.48), 0 0 0 1px rgba(48,168,255,.62), 0 0 46px rgba(48,168,255,.56), 0 0 110px rgba(48,168,255,.28), inset 0 0 58px rgba(48,168,255,.2);
    filter: brightness(1.16) saturate(1.16);
  }
  18%, 25% {
    scale: 1.02;
    border-color: rgba(48, 168, 255, .55);
    box-shadow: 0 28px 84px rgba(0,0,0,.43), 0 0 0 1px rgba(48,168,255,.3), 0 0 38px rgba(48,168,255,.24), inset 0 0 30px rgba(48,168,255,.1);
    filter: brightness(1.04) saturate(1.04);
  }
  34%, 100% { scale: 1; border-color: rgba(24,185,121,.18); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035); filter: brightness(.9) saturate(.9); }
}

@keyframes roadmap-card-purple {
  0%, 13% {
    scale: 1.045;
    border-color: rgba(170, 92, 255, 1);
    box-shadow: 0 32px 100px rgba(0,0,0,.48), 0 0 0 1px rgba(170,92,255,.66), 0 0 46px rgba(170,92,255,.58), 0 0 110px rgba(170,92,255,.3), inset 0 0 58px rgba(170,92,255,.22);
    filter: brightness(1.16) saturate(1.16);
  }
  18%, 25% {
    scale: 1.02;
    border-color: rgba(170, 92, 255, .55);
    box-shadow: 0 28px 84px rgba(0,0,0,.43), 0 0 0 1px rgba(170,92,255,.3), 0 0 38px rgba(170,92,255,.24), inset 0 0 30px rgba(170,92,255,.1);
    filter: brightness(1.04) saturate(1.04);
  }
  34%, 100% { scale: 1; border-color: rgba(24,185,121,.18); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035); filter: brightness(.9) saturate(.9); }
}

/* Theme switcher */
.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  padding: .34rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    0 0 26px color-mix(in srgb, var(--primary) 12%, transparent);
  overflow: hidden;
}

.theme-switcher::before {
  content: "";
  position: absolute;
  inset: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:
    0 0 20px color-mix(in srgb, var(--primary) 34%, transparent),
    inset 0 1px rgba(255,255,255,.24);
  transform: translateX(0);
  transition: transform .28s ease;
}

body[data-theme="gold"] .theme-switcher::before {
  transform: translateX(100%);
}

.theme-switcher::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-120%);
  animation: theme-switch-glint 2.9s ease-in-out infinite;
}

.theme-dot {
  position: relative;
  z-index: 1;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28);
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}

.theme-dot.is-active {
  opacity: 1;
  transform: scale(1.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, .36);
}

.theme-emerald {
  background: linear-gradient(135deg, #0f5b3a 0 45%, #c8a24a 45% 70%, #7ed39d 70%);
}

.theme-light {
  background: linear-gradient(135deg, #faf8f2 0 40%, #145a3a 40% 68%, #c8a24a 68%);
}

.theme-navy {
  background: linear-gradient(135deg, #0f172a 0 48%, #5eead4 48% 72%, #c8a24a 72%);
}

.theme-gold {
  background: linear-gradient(135deg, #000000 0 55%, #d8c58f 55% 78%, #f5f5f5 78%);
}

@keyframes theme-switch-glint {
  0%, 58% {
    transform: translateX(-120%);
  }
  76%, 100% {
    transform: translateX(120%);
  }
}

body[data-theme="emerald"] {
  --primary: #0f5b3a;
  --bg: #0a0f0d;
  --secondary: #c8a24a;
  --accent: #7ed39d;
  --surface: #0b120e;
  --surface-2: #101b15;
  --text: #f3efe4;
  --muted: rgba(243, 239, 228, .72);
  --faint: rgba(243, 239, 228, .48);
  --line: rgba(126, 211, 157, .22);
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(15, 91, 58, .24), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(200, 162, 74, .12), transparent 24rem),
    linear-gradient(180deg, #0a0f0d 0%, #07110c 48%, #030504 100%) !important;
}

body[data-theme="light"] {
  --primary: #145a3a;
  --bg: #faf8f2;
  --secondary: #c8a24a;
  --accent: #e8f3ec;
  --surface: #ffffff;
  --surface-2: #f0f4ef;
  --text: #1d2a22;
  --muted: rgba(29, 42, 34, .68);
  --faint: rgba(29, 42, 34, .46);
  --line: rgba(20, 90, 58, .15);
  color: var(--text);
  background:
    radial-gradient(circle at 15% 8%, rgba(232, 243, 236, .9), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(200, 162, 74, .13), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #faf8f2 45%, #f2eee4 100%) !important;
}

body[data-theme="navy"] {
  --primary: #0f172a;
  --bg: #06090f;
  --secondary: #c8a24a;
  --accent: #5eead4;
  --surface: #09111f;
  --surface-2: #0d1a2c;
  --text: #e8edf5;
  --muted: rgba(232, 237, 245, .72);
  --faint: rgba(232, 237, 245, .48);
  --line: rgba(94, 234, 212, .22);
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(94, 234, 212, .16), transparent 28rem),
    radial-gradient(circle at 90% 16%, rgba(200, 162, 74, .14), transparent 22rem),
    linear-gradient(180deg, #06090f 0%, #071121 48%, #03050a 100%) !important;
}

body[data-theme="gold"] {
  --primary: #d8c58f;
  --bg: #000000;
  --secondary: #b89a4f;
  --accent: #d8c58f;
  --surface: #080806;
  --surface-2: #11100c;
  --text: #f5f5f5;
  --muted: rgba(245, 245, 245, .72);
  --faint: rgba(245, 245, 245, .48);
  --line: rgba(216, 197, 143, .24);
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(216, 197, 143, .12), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(184, 154, 79, .16), transparent 24rem),
    linear-gradient(180deg, #000000 0%, #070706 48%, #000000 100%) !important;
}

body[data-theme] .topbar {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
}

body[data-theme] article,
body[data-theme] details,
body[data-theme] .contact-card,
body[data-theme] .final-card,
body[data-theme] .split-card,
body[data-theme] .tools-more,
body[data-theme] .free-tool-grid a,
body[data-theme] .app-card,
body[data-theme] .follow-card,
body[data-theme] .product-card {
  border-color: var(--line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 70%, transparent)) !important;
}

body[data-theme] .nav-cta,
body[data-theme] .btn.primary,
body[data-theme] .class-cta,
body[data-theme] .app-card a,
body[data-theme] .plans a,
body[data-theme] .addon-card a,
body[data-theme] .line-float {
  color: color-mix(in srgb, var(--bg) 86%, #000) !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

body[data-theme] .eyebrow,
body[data-theme] .class-rating,
body[data-theme] .problem-accordion summary span,
body[data-theme] .roadmap-copy small,
body[data-theme] .tool-tags span {
  color: var(--primary) !important;
}

body[data-theme="light"] .hero-frame,
body[data-theme="light"] .reviews-grid figure,
body[data-theme="light"] .roadmap article {
  box-shadow: 0 22px 70px rgba(29, 42, 34, .16) !important;
}

body[data-theme="light"] .sparkles-canvas {
  opacity: .22;
}

@media (max-width: 980px) {
  .theme-switcher {
    order: 3;
    grid-column: 1 / -1;
    width: max-content;
    justify-self: end;
  }
}

/* Final theme consistency pass */
body[data-theme] {
  color: var(--text) !important;
}

body[data-theme] .topbar {
  display: grid !important;
  grid-template-columns: auto minmax(28rem, 1fr) auto auto !important;
  align-items: center !important;
  gap: .8rem !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
}

body[data-theme="light"] .topbar {
  background: rgba(250, 248, 242, .96) !important;
  box-shadow: 0 18px 50px rgba(29, 42, 34, .14) !important;
}

body[data-theme] .brand,
body[data-theme] .brand b,
body[data-theme] .topbar nav a {
  color: var(--text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Final nav buttons: make the two center choices read as real buttons. */
@media (min-width: 1181px) {
  body[data-theme] .topbar nav {
    gap: .7rem !important;
  }

  body[data-theme] .topbar nav a {
    position: relative !important;
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--secondary) 18%) !important;
    border-radius: 999px !important;
    padding: .72rem 1.15rem !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--bg) 68%, transparent)),
      color-mix(in srgb, var(--bg) 78%, transparent) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent),
      0 10px 28px color-mix(in srgb, var(--primary) 8%, transparent) !important;
    color: var(--text) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease,
      color .18s ease !important;
  }

  body[data-theme] .topbar nav a:first-child {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--bg)), color-mix(in srgb, var(--bg) 88%, transparent)) !important;
    border-color: color-mix(in srgb, var(--primary) 52%, var(--text) 10%) !important;
  }

  body[data-theme] .topbar nav a:nth-child(2) {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--secondary) 24%, var(--bg)), color-mix(in srgb, var(--bg) 88%, transparent)) !important;
    border-color: color-mix(in srgb, var(--secondary) 52%, var(--primary) 12%) !important;
  }

  body[data-theme] .topbar nav a:hover {
    transform: translateY(-1px) !important;
    color: color-mix(in srgb, var(--bg) 88%, #000) !important;
    background:
      linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border-color: color-mix(in srgb, var(--text) 20%, transparent) !important;
    box-shadow:
      0 16px 40px color-mix(in srgb, var(--primary) 18%, transparent),
      0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
  }
}

body[data-theme] .topbar nav {
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body[data-theme] .topbar nav a {
  border-color: transparent !important;
  background: transparent !important;
}

body[data-theme] .topbar nav a:hover {
  color: color-mix(in srgb, var(--bg) 88%, #000) !important;
  background: var(--primary) !important;
}

body[data-theme] .brand span {
  color: color-mix(in srgb, var(--bg) 88%, #000) !important;
  background: var(--primary) !important;
}

body[data-theme] .nav-cta {
  justify-self: end !important;
  min-width: 8.5rem !important;
  text-align: center !important;
  color: color-mix(in srgb, var(--bg) 88%, #000) !important;
  border: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent) !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

body[data-theme="light"] .nav-cta,
body[data-theme="gold"] .nav-cta {
  color: #000 !important;
}

body[data-theme] .theme-switcher {
  justify-self: end !important;
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
}

body[data-theme] .theme-dot.is-active {
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] strong,
body[data-theme] summary,
body[data-theme] li {
  color: var(--text);
}

body[data-theme] p,
body[data-theme] small,
body[data-theme] .lead,
body[data-theme] .muted,
body[data-theme] .class-note,
body[data-theme] .app-copy p,
body[data-theme] .follow-card p,
body[data-theme] .roadmap-copy p,
body[data-theme] .problem-accordion p {
  color: var(--muted) !important;
}

body[data-theme="light"] .hero-statement-title,
body[data-theme="light"] .section-head h2,
body[data-theme="light"] .class-copy h2,
body[data-theme="light"] .final-card h2,
body[data-theme="light"] .contact-card h2 {
  color: var(--text) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  text-shadow: none !important;
}

body[data-theme="light"] .hero-statement-sub,
body[data-theme="light"] .hero-statement-pill {
  color: var(--text) !important;
}

body[data-theme="light"] .hero-frame::after,
body[data-theme="light"] .hero-overlay {
  background: linear-gradient(90deg, rgba(250, 248, 242, .92), rgba(250, 248, 242, .58), rgba(250, 248, 242, .12)) !important;
}

body[data-theme="light"] .hero-overlay h1,
body[data-theme="light"] .hero-overlay p,
body[data-theme="light"] .hero-overlay .lead {
  color: var(--text) !important;
}

body[data-theme="light"] .hero-overlay h1 {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  text-shadow: none !important;
}

@media (max-width: 1180px) {
  body[data-theme] .topbar {
    grid-template-columns: auto 1fr auto !important;
  }

  body[data-theme] .topbar nav {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body[data-theme] .topbar {
    grid-template-columns: 1fr auto !important;
    border-radius: 22px !important;
  }

  body[data-theme] .brand b {
    display: none !important;
  }

  body[data-theme] .theme-switcher {
    grid-column: auto !important;
  }

  body[data-theme] .nav-cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@keyframes roadmap-glow-handoff-slow {
  0%, 13% { opacity: 1; }
  18%, 22% { opacity: .38; }
  24%, 100% { opacity: 0; }
}

@keyframes roadmap-segment-hop-slow {
  0%, 17% {
    stroke-dashoffset: 3;
    opacity: 1;
  }
  25%, 42% {
    stroke-dashoffset: -23;
    opacity: 1;
  }
  50%, 67% {
    stroke-dashoffset: -49;
    opacity: 1;
  }
  75%, 92% {
    stroke-dashoffset: -75;
    opacity: 1;
  }
  98%, 100% {
    stroke-dashoffset: -75;
    opacity: 0;
  }
}

#roadmap .roadmap .roadmap-runner {
  fill: #dffff0;
  stroke: rgba(24, 185, 121, .9);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 8px rgba(247, 255, 249, .95))
    drop-shadow(0 0 18px rgba(24, 185, 121, .9))
    drop-shadow(0 0 34px rgba(24, 185, 121, .46));
  opacity: .95;
  animation: roadmap-runner-glow 12s ease-in-out infinite;
}

#roadmap .roadmap .roadmap-word-runner {
  fill: #ffffff;
  stroke: rgba(1, 8, 5, .98);
  stroke-width: 2.6;
  paint-order: stroke fill;
  font-family: "Space Grotesk", "Noto Sans Thai", sans-serif;
  font-size: 66px;
  font-weight: 900;
  letter-spacing: .03em;
  text-anchor: middle;
  dominant-baseline: middle;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 1))
    drop-shadow(0 0 5px rgba(247, 255, 249, .72))
    drop-shadow(0 0 10px rgba(24, 185, 121, .56));
  opacity: initial;
}

#roadmap .roadmap .roadmap-word-runner tspan {
  rotate: 0deg;
}

#roadmap .roadmap .roadmap-word-badge {
  opacity: 0;
  filter:
    drop-shadow(0 0 14px rgba(24, 185, 121, .7))
    drop-shadow(0 0 30px rgba(24, 185, 121, .3));
}

#roadmap .roadmap .roadmap-word-badge rect {
  fill: rgba(2, 10, 6, .94);
  stroke: rgba(24, 185, 121, .82);
  stroke-width: 2;
}

#roadmap .roadmap .roadmap-word-runner,
#roadmap .roadmap .roadmap-word-badge {
  display: none !important;
}

#roadmap .roadmap .roadmap-runner-label {
  position: absolute;
  top: 4.48rem;
  z-index: 7;
  display: inline-grid;
  min-width: 4.4rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid rgba(24, 185, 121, .8);
  border-radius: 999px;
  padding: 0 1rem;
  color: #ffffff;
  background: rgba(2, 10, 6, .92);
  box-shadow:
    0 0 18px rgba(24, 185, 121, .58),
    0 0 44px rgba(24, 185, 121, .25),
    inset 0 0 18px rgba(24, 185, 121, .15);
  font-family: "Space Grotesk", "Noto Sans Thai", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 0 #000;
  transform: translate(-50%, -50%);
}

/* Revert roadmap runner back to the small light dot */
#roadmap .roadmap .roadmap-word-runner,
#roadmap .roadmap .roadmap-word-badge,
#roadmap .roadmap .roadmap-runner-label {
  display: none !important;
}

#roadmap .roadmap .roadmap-runner {
  display: block !important;
  fill: #dffff0;
  stroke: rgba(24, 185, 121, .92);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 8px rgba(247, 255, 249, .95))
    drop-shadow(0 0 18px rgba(24, 185, 121, .9))
    drop-shadow(0 0 34px rgba(24, 185, 121, .46));
  opacity: .95;
  animation: roadmap-runner-glow 12s ease-in-out infinite;
}

#roadmap .roadmap .label-no {
  animation: label-no-run 12s linear infinite;
}

#roadmap .roadmap .label-way {
  animation: label-way-run 12s linear infinite;
}

#roadmap .roadmap .label-loss {
  animation: label-loss-run 12s linear infinite;
}

@keyframes label-no-run {
  0%, 11% { left: 12%; opacity: 0; }
  13% { left: 13%; opacity: 1; }
  25% { left: 36.5%; opacity: 1; }
  30%, 100% { left: 36.5%; opacity: 0; }
}

@keyframes label-way-run {
  0%, 36% { left: 36.5%; opacity: 0; }
  38% { left: 36.5%; opacity: 1; }
  50% { left: 63.5%; opacity: 1; }
  55%, 100% { left: 63.5%; opacity: 0; }
}

@keyframes label-loss-run {
  0%, 61% { left: 63.5%; opacity: 0; }
  63% { left: 63.5%; opacity: 1; }
  75% { left: 88%; opacity: 1; }
  82%, 100% { left: 88%; opacity: 0; }
}

@media (max-width: 980px) {
  #roadmap .roadmap .roadmap-runner-label {
    display: none;
  }
}

#roadmap .roadmap .runner-no {
  animation: none !important;
}

#roadmap .roadmap .runner-way {
  animation: none !important;
}

#roadmap .roadmap .runner-loss {
  animation: none !important;
}

#roadmap .roadmap #roadmapRunnerPath {
  fill: none !important;
  stroke: transparent !important;
  stroke-width: 0 !important;
  animation: none !important;
  filter: none !important;
}

@keyframes roadmap-runner-glow {
  0%, 15%, 25%, 40%, 50%, 65%, 75%, 90% {
    opacity: 1;
    r: 8px;
  }
  18%, 43%, 68%, 93% {
    opacity: .45;
    r: 5px;
  }
}

@keyframes roadmap-word-no {
  0%, 11% { opacity: 0; }
  13%, 25% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes roadmap-word-way {
  0%, 36% { opacity: 0; }
  38%, 50% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes roadmap-word-loss {
  0%, 61% { opacity: 0; }
  63%, 75% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

/* Theme polish: keep the good palettes, fix light hero readability and navy tools text. */
body[data-theme="light"] .hero-frame {
  background: #eef3ec !important;
  border-color: rgba(29, 42, 34, .18) !important;
}

body[data-theme="light"] .hero-frame::after {
  background:
    radial-gradient(circle at 30% 56%, rgba(255, 255, 255, .88), rgba(255, 255, 255, .34) 33%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(90deg, rgba(250, 248, 242, .78) 0%, rgba(250, 248, 242, .58) 38%, rgba(250, 248, 242, .22) 67%, rgba(250, 248, 242, .08) 100%) !important;
  z-index: 1;
}

body[data-theme="light"] .hero-overlay {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  max-width: 840px;
  z-index: 2;
}

body[data-theme="light"] .hero-overlay::before {
  content: "";
  position: absolute;
  inset: -2.2rem -2.8rem;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at 28% 52%, rgba(250, 248, 242, .76), rgba(250, 248, 242, .28) 42%, rgba(250, 248, 242, 0) 72%);
  filter: blur(22px);
  pointer-events: none;
}

body[data-theme="light"] .hero-overlay h1 {
  color: #1d2a22 !important;
  -webkit-text-fill-color: #1d2a22 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 18px 52px rgba(255, 255, 255, .42) !important;
}

body[data-theme="light"] .hero-overlay .eyebrow {
  color: #145a3a !important;
  background: rgba(232, 243, 236, .82) !important;
  border-color: rgba(20, 90, 58, .22) !important;
}

body[data-theme="light"] .hero-overlay .lead {
  color: rgba(29, 42, 34, .84) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .54) !important;
}

body[data-theme="navy"] #tools .eyebrow,
body[data-theme="navy"] #tools .section-head h2,
body[data-theme="navy"] #tools .section-head p,
body[data-theme="navy"] #tools .product-copy h3,
body[data-theme="navy"] #tools .product-copy p,
body[data-theme="navy"] #tools .product-copy small,
body[data-theme="navy"] #tools .product-copy strong,
body[data-theme="navy"] #tools .product-copy span,
body[data-theme="navy"] #tools .tools-more summary,
body[data-theme="navy"] #tools .free-tool-grid h3,
body[data-theme="navy"] #tools .free-tool-grid span {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  text-shadow: 0 10px 32px rgba(0, 0, 0, .26) !important;
}

body[data-theme="navy"] #tools .eyebrow,
body[data-theme="navy"] #tools .tool-tags span,
body[data-theme="navy"] #tools .tools-more summary::after {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

body[data-theme="navy"] #tools .tool-tags span,
body[data-theme="navy"] #tools .plans em,
body[data-theme="navy"] #tools .free-tool-grid span {
  background: rgba(94, 234, 212, .12) !important;
  border-color: rgba(94, 234, 212, .3) !important;
}

body[data-theme="navy"] #tools .plans a,
body[data-theme="navy"] #tools .free-tool-grid a span {
  color: #06110b !important;
  -webkit-text-fill-color: #06110b !important;
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
}

/* Apps checklist as a compact roadmap-style journey */
#apps .apps-grid {
  position: relative;
  counter-reset: app-step;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 1.15vw, 1rem) !important;
  padding-top: 0;
  align-items: stretch;
}

#apps .apps-grid::before,
#apps .apps-grid::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 2px;
  pointer-events: none;
  z-index: 0;
}

#apps .apps-grid::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 42%, transparent), color-mix(in srgb, var(--secondary) 32%, transparent), transparent);
  opacity: .62;
}

#apps .apps-grid::after {
  width: 14%;
  right: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(247, 255, 249, .9), var(--accent, #7ed39d), transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--primary) 68%, transparent),
    0 0 34px color-mix(in srgb, var(--secondary) 36%, transparent);
  animation: apps-line-run 15s ease-in-out infinite;
}

#apps .app-card {
  counter-increment: app-step;
  isolation: isolate;
  overflow: visible !important;
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: .7rem;
  min-height: 252px;
  padding: 1.05rem .9rem .95rem !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 9rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 78%, transparent)) !important;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .2),
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent) !important;
  transform-origin: center top;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
  animation: apps-card-calm 15s ease-in-out infinite;
}

#apps .app-card:nth-child(1) { animation-name: apps-card-green; }
#apps .app-card:nth-child(2) { animation-name: apps-card-gold; animation-delay: -12.5s; }
#apps .app-card:nth-child(3) { animation-name: apps-card-blue; animation-delay: -10s; }
#apps .app-card:nth-child(4) { animation-name: apps-card-purple; animation-delay: -7.5s; }
#apps .app-card:nth-child(5) { animation-name: apps-card-orange; animation-delay: -5s; }
#apps .app-card:nth-child(6) { animation-name: apps-card-cyan; animation-delay: -2.5s; }

#apps .app-card::before {
  display: none !important;
  content: none !important;
}

#apps .app-card::after {
  border-radius: inherit;
  inset: -2px;
  z-index: 0;
  opacity: 0;
  background: transparent;
  mix-blend-mode: screen;
  pointer-events: none;
}

#apps .app-card > * {
  position: relative;
  z-index: 1;
}

#apps .app-card:hover {
  transform: translateY(-5px) scale(1.015);
}

#apps .app-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78)) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .15),
    0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

#apps .app-copy small {
  display: inline-flex;
  width: fit-content;
  min-height: 1.45rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 999px;
  padding: .1rem .5rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: "Space Grotesk", "Noto Sans Thai", sans-serif;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#apps .app-copy h3 {
  margin-top: .65rem;
  font-size: clamp(1.2rem, 1.5vw, 1.62rem);
}

#apps .app-copy p {
  font-size: .88rem;
  line-height: 1.68;
}

#apps .app-card a {
  min-height: 34px !important;
  border-radius: 999px !important;
  padding-inline: .9rem !important;
}

@keyframes apps-line-run {
  0%, 12% { transform: translateX(0); opacity: .95; }
  16%, 28% { transform: translateX(119%); opacity: .95; }
  32%, 44% { transform: translateX(238%); opacity: .95; }
  48%, 60% { transform: translateX(357%); opacity: .95; }
  64%, 76% { transform: translateX(476%); opacity: .95; }
  80%, 92% { transform: translateX(595%); opacity: .95; }
  100% { transform: translateX(595%); opacity: 0; }
}

@keyframes apps-card-calm {
  0%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-green {
  0%, 12% { scale: 1.035; border-color: rgba(24,185,121,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(24,185,121,.38), inset 0 0 42px rgba(24,185,121,.13); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-gold {
  0%, 12% { scale: 1.035; border-color: rgba(224,171,54,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(224,171,54,.38), inset 0 0 42px rgba(224,171,54,.13); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-blue {
  0%, 12% { scale: 1.035; border-color: rgba(48,168,255,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(48,168,255,.36), inset 0 0 42px rgba(48,168,255,.12); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-purple {
  0%, 12% { scale: 1.035; border-color: rgba(170,92,255,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(170,92,255,.36), inset 0 0 42px rgba(170,92,255,.12); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-orange {
  0%, 12% { scale: 1.035; border-color: rgba(255,115,44,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(255,115,44,.34), inset 0 0 42px rgba(255,115,44,.11); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@keyframes apps-card-cyan {
  0%, 12% { scale: 1.035; border-color: rgba(94,234,212,.9); box-shadow: 0 26px 86px rgba(0,0,0,.24), 0 0 42px rgba(94,234,212,.34), inset 0 0 42px rgba(94,234,212,.11); filter: brightness(1.08); }
  18%, 100% { scale: 1; filter: none; }
}

@media (max-width: 1180px) {
  #apps .apps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 5.6rem !important;
  }

  #apps .apps-grid::before,
  #apps .apps-grid::after {
    display: none;
  }
}

@media (max-width: 640px) {
  #apps .apps-grid {
    grid-template-columns: 1fr !important;
    padding-top: 0;
    row-gap: 1rem !important;
  }

  #apps .app-card::before {
    top: 1rem;
    left: auto;
    right: 1rem;
    width: 3.2rem;
    height: 3.2rem;
    transform: none;
  }
}

/* Stronger color handoff for the app journey line and cards */
#apps .apps-grid::before {
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    rgba(24,185,121,.42),
    rgba(224,171,54,.42),
    rgba(48,168,255,.42),
    rgba(170,92,255,.42),
    rgba(255,115,44,.42),
    rgba(94,234,212,.42),
    transparent) !important;
  filter: blur(.2px);
  opacity: .85;
}

#apps .apps-grid::after {
  height: 5px;
  width: 17%;
  background: linear-gradient(90deg, transparent, #ffffff, #18b979, transparent) !important;
  box-shadow:
    0 0 12px rgba(255,255,255,.9),
    0 0 34px rgba(24,185,121,.75),
    0 0 78px rgba(24,185,121,.36) !important;
  animation: apps-line-run-color 18s ease-in-out infinite !important;
}

#apps .app-card {
  animation-duration: 18s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

#apps .app-card:nth-child(1) { animation-name: apps-card-green-strong !important; animation-delay: 0s !important; }
#apps .app-card:nth-child(2) { animation-name: apps-card-gold-strong !important; animation-delay: -15s !important; }
#apps .app-card:nth-child(3) { animation-name: apps-card-blue-strong !important; animation-delay: -12s !important; }
#apps .app-card:nth-child(4) { animation-name: apps-card-purple-strong !important; animation-delay: -9s !important; }
#apps .app-card:nth-child(5) { animation-name: apps-card-orange-strong !important; animation-delay: -6s !important; }
#apps .app-card:nth-child(6) { animation-name: apps-card-cyan-strong !important; animation-delay: -3s !important; }

#apps .app-card:nth-child(1)::after { animation: apps-overlay-green 18s ease-in-out infinite; }
#apps .app-card:nth-child(2)::after { animation: apps-overlay-gold 18s ease-in-out infinite -15s; }
#apps .app-card:nth-child(3)::after { animation: apps-overlay-blue 18s ease-in-out infinite -12s; }
#apps .app-card:nth-child(4)::after { animation: apps-overlay-purple 18s ease-in-out infinite -9s; }
#apps .app-card:nth-child(5)::after { animation: apps-overlay-orange 18s ease-in-out infinite -6s; }
#apps .app-card:nth-child(6)::after { animation: apps-overlay-cyan 18s ease-in-out infinite -3s; }

@keyframes apps-line-run-color {
  0%, 13% {
    transform: translateX(0);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #ffffff, #18b979, transparent);
    box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 36px rgba(24,185,121,.85), 0 0 86px rgba(24,185,121,.38);
  }
  17%, 30% {
    transform: translateX(115%);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #fff8db, #e0ab36, transparent);
    box-shadow: 0 0 12px rgba(255,248,219,.9), 0 0 36px rgba(224,171,54,.82), 0 0 86px rgba(224,171,54,.38);
  }
  34%, 47% {
    transform: translateX(230%);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #eff8ff, #30a8ff, transparent);
    box-shadow: 0 0 12px rgba(239,248,255,.9), 0 0 36px rgba(48,168,255,.82), 0 0 86px rgba(48,168,255,.36);
  }
  51%, 64% {
    transform: translateX(345%);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #fbf2ff, #aa5cff, transparent);
    box-shadow: 0 0 12px rgba(251,242,255,.9), 0 0 36px rgba(170,92,255,.82), 0 0 86px rgba(170,92,255,.36);
  }
  68%, 81% {
    transform: translateX(460%);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #fff2e9, #ff732c, transparent);
    box-shadow: 0 0 12px rgba(255,242,233,.9), 0 0 36px rgba(255,115,44,.8), 0 0 86px rgba(255,115,44,.34);
  }
  85%, 97% {
    transform: translateX(575%);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #eafffb, #5eead4, transparent);
    box-shadow: 0 0 12px rgba(234,255,251,.9), 0 0 36px rgba(94,234,212,.8), 0 0 86px rgba(94,234,212,.34);
  }
  100% {
    transform: translateX(575%);
    opacity: 0;
  }
}

@keyframes apps-card-green-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(24,185,121,1);
    background: radial-gradient(circle at 50% 50%, rgba(24,185,121,.26), transparent 8rem), linear-gradient(180deg, rgba(20,48,35,.96), rgba(6,17,11,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(24,185,121,.8), 0 0 44px rgba(24,185,121,.68), 0 0 120px rgba(24,185,121,.32), inset 0 0 56px rgba(24,185,121,.22);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-card-gold-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(224,171,54,1);
    background: radial-gradient(circle at 50% 50%, rgba(224,171,54,.3), transparent 8rem), linear-gradient(180deg, rgba(52,42,18,.96), rgba(6,17,11,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(224,171,54,.82), 0 0 44px rgba(224,171,54,.68), 0 0 120px rgba(224,171,54,.32), inset 0 0 56px rgba(224,171,54,.22);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-card-blue-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(48,168,255,1);
    background: radial-gradient(circle at 50% 50%, rgba(48,168,255,.28), transparent 8rem), linear-gradient(180deg, rgba(13,37,58,.96), rgba(6,17,16,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(48,168,255,.82), 0 0 44px rgba(48,168,255,.64), 0 0 120px rgba(48,168,255,.3), inset 0 0 56px rgba(48,168,255,.2);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-card-purple-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(170,92,255,1);
    background: radial-gradient(circle at 50% 50%, rgba(170,92,255,.28), transparent 8rem), linear-gradient(180deg, rgba(38,24,62,.96), rgba(6,17,11,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(170,92,255,.82), 0 0 44px rgba(170,92,255,.64), 0 0 120px rgba(170,92,255,.3), inset 0 0 56px rgba(170,92,255,.2);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-card-orange-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(255,115,44,1);
    background: radial-gradient(circle at 50% 50%, rgba(255,115,44,.28), transparent 8rem), linear-gradient(180deg, rgba(60,28,16,.96), rgba(6,17,11,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(255,115,44,.82), 0 0 44px rgba(255,115,44,.62), 0 0 120px rgba(255,115,44,.28), inset 0 0 56px rgba(255,115,44,.18);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-card-cyan-strong {
  0%, 13% {
    transform: translateY(-7px) scale(1.035);
    border-color: rgba(94,234,212,1);
    background: radial-gradient(circle at 50% 50%, rgba(94,234,212,.26), transparent 8rem), linear-gradient(180deg, rgba(14,51,47,.96), rgba(6,17,11,.9)) !important;
    box-shadow: 0 32px 92px rgba(0,0,0,.36), 0 0 0 1px rgba(94,234,212,.82), 0 0 44px rgba(94,234,212,.62), 0 0 120px rgba(94,234,212,.28), inset 0 0 56px rgba(94,234,212,.18);
  }
  18%, 100% { transform: translateY(0) scale(1); }
}

@keyframes apps-overlay-green {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(24,185,121,.58), rgba(24,185,121,.18) 35%, transparent 72%),
      linear-gradient(135deg, rgba(24,185,121,.4), transparent 42%, rgba(126,211,157,.2));
    box-shadow: 0 0 0 1px rgba(24,185,121,.85), 0 0 44px rgba(24,185,121,.72), 0 0 120px rgba(24,185,121,.36);
  }
  18%, 100% { opacity: 0; }
}

@keyframes apps-overlay-gold {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(224,171,54,.62), rgba(224,171,54,.2) 35%, transparent 72%),
      linear-gradient(135deg, rgba(224,171,54,.4), transparent 42%, rgba(255,235,166,.2));
    box-shadow: 0 0 0 1px rgba(224,171,54,.9), 0 0 44px rgba(224,171,54,.72), 0 0 120px rgba(224,171,54,.36);
  }
  18%, 100% { opacity: 0; }
}

@keyframes apps-overlay-blue {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(48,168,255,.62), rgba(48,168,255,.2) 35%, transparent 72%),
      linear-gradient(135deg, rgba(48,168,255,.4), transparent 42%, rgba(135,213,255,.2));
    box-shadow: 0 0 0 1px rgba(48,168,255,.9), 0 0 44px rgba(48,168,255,.7), 0 0 120px rgba(48,168,255,.34);
  }
  18%, 100% { opacity: 0; }
}

@keyframes apps-overlay-purple {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(170,92,255,.62), rgba(170,92,255,.2) 35%, transparent 72%),
      linear-gradient(135deg, rgba(170,92,255,.4), transparent 42%, rgba(222,184,255,.2));
    box-shadow: 0 0 0 1px rgba(170,92,255,.9), 0 0 44px rgba(170,92,255,.7), 0 0 120px rgba(170,92,255,.34);
  }
  18%, 100% { opacity: 0; }
}

@keyframes apps-overlay-orange {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(255,115,44,.6), rgba(255,115,44,.2) 35%, transparent 72%),
      linear-gradient(135deg, rgba(255,115,44,.4), transparent 42%, rgba(255,189,118,.2));
    box-shadow: 0 0 0 1px rgba(255,115,44,.88), 0 0 44px rgba(255,115,44,.68), 0 0 120px rgba(255,115,44,.32);
  }
  18%, 100% { opacity: 0; }
}

@keyframes apps-overlay-cyan {
  0%, 13% {
    opacity: .9;
    background:
      radial-gradient(circle at 50% 45%, rgba(94,234,212,.58), rgba(94,234,212,.2) 35%, transparent 72%),
      linear-gradient(135deg, rgba(94,234,212,.4), transparent 42%, rgba(198,255,246,.18));
    box-shadow: 0 0 0 1px rgba(94,234,212,.88), 0 0 44px rgba(94,234,212,.68), 0 0 120px rgba(94,234,212,.32);
  }
  18%, 100% { opacity: 0; }
}

/* Replace the straight app line with a contained curved path behind the cards. */
#apps .apps-grid::before,
#apps .apps-grid::after {
  display: none !important;
}

#apps .apps-flow {
  position: absolute;
  inset: -3.2rem 0 -2.3rem;
  z-index: 0;
  width: 100%;
  height: calc(100% + 5.5rem);
  overflow: visible;
  pointer-events: none;
}

#apps .apps-flow path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#apps .apps-flow-base {
  stroke: color-mix(in srgb, var(--secondary) 40%, transparent);
  stroke-width: 2.2;
  stroke-dasharray: 8 9;
  opacity: .66;
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--secondary) 35%, transparent))
    drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 28%, transparent));
}

#apps .apps-flow-runner {
  stroke: url("#appsFlowGradient");
  stroke-width: 4.8;
  stroke-dasharray: 74 760;
  stroke-dashoffset: 0;
  opacity: .95;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.95))
    drop-shadow(0 0 16px rgba(24,185,121,.72))
    drop-shadow(0 0 32px rgba(224,171,54,.42));
  animation: apps-curve-run 10s ease-in-out infinite;
}

#apps .apps-flow-runner {
  display: none !important;
}

#apps .apps-flow-pulse {
  stroke: url("#appsFlowGradient");
  stroke-width: 7;
  stroke-dasharray: 105 180;
  stroke-dashoffset: 150;
  opacity: 0;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.98))
    drop-shadow(0 0 20px rgba(24,185,121,.86))
    drop-shadow(0 0 44px rgba(224,171,54,.5));
  animation: apps-segment-pulse 12s ease-in-out infinite;
}

#apps .apps-flow-pulse.pulse-1 { animation-delay: 0s; }
#apps .apps-flow-pulse.pulse-2 { animation-delay: 2.4s; }
#apps .apps-flow-pulse.pulse-3 { animation-delay: 4.8s; }
#apps .apps-flow-pulse.pulse-4 { animation-delay: 7.2s; }
#apps .apps-flow-pulse.pulse-5 { animation-delay: 9.6s; }

#apps .app-card {
  animation-duration: 12s !important;
}

#apps .app-card:nth-child(2) { animation-delay: 0s !important; }
#apps .app-card:nth-child(3) { animation-delay: -10s !important; }
#apps .app-card:nth-child(4) { animation-delay: -8s !important; }
#apps .app-card:nth-child(5) { animation-delay: -6s !important; }
#apps .app-card:nth-child(6) { animation-delay: -4s !important; }
#apps .app-card:nth-child(7) { animation-delay: -2s !important; }

#apps .app-card:nth-child(2) { animation-name: apps-card-green-strong !important; }
#apps .app-card:nth-child(3) { animation-name: apps-card-gold-strong !important; }
#apps .app-card:nth-child(4) { animation-name: apps-card-blue-strong !important; }
#apps .app-card:nth-child(5) { animation-name: apps-card-purple-strong !important; }
#apps .app-card:nth-child(6) { animation-name: apps-card-orange-strong !important; }
#apps .app-card:nth-child(7) { animation-name: apps-card-cyan-strong !important; }

#apps .app-card:nth-child(2)::after { animation-duration: 12s !important; animation-delay: 0s !important; }
#apps .app-card:nth-child(3)::after { animation-duration: 12s !important; animation-delay: -10s !important; }
#apps .app-card:nth-child(4)::after { animation-duration: 12s !important; animation-delay: -8s !important; }
#apps .app-card:nth-child(5)::after { animation-duration: 12s !important; animation-delay: -6s !important; }
#apps .app-card:nth-child(6)::after { animation-duration: 12s !important; animation-delay: -4s !important; }
#apps .app-card:nth-child(7)::after { animation-duration: 12s !important; animation-delay: -2s !important; }

#apps .app-card:nth-child(2)::after { animation-name: apps-overlay-green !important; }
#apps .app-card:nth-child(3)::after { animation-name: apps-overlay-gold !important; }
#apps .app-card:nth-child(4)::after { animation-name: apps-overlay-blue !important; }
#apps .app-card:nth-child(5)::after { animation-name: apps-overlay-purple !important; }
#apps .app-card:nth-child(6)::after { animation-name: apps-overlay-orange !important; }
#apps .app-card:nth-child(7)::after { animation-name: apps-overlay-cyan !important; }

@keyframes apps-segment-pulse {
  0%, 1% {
    opacity: 0;
    stroke-dashoffset: 150;
  }
  4%, 21% {
    opacity: 1;
  }
  24% {
    opacity: 0;
    stroke-dashoffset: -165;
  }
  25%, 100% {
    opacity: 0;
    stroke-dashoffset: -165;
  }
}

@keyframes apps-curve-run {
  0% {
    stroke-dashoffset: 0;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 16px rgba(24,185,121,.76))
      drop-shadow(0 0 34px rgba(24,185,121,.42));
  }
  28% {
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 16px rgba(224,171,54,.76))
      drop-shadow(0 0 34px rgba(224,171,54,.42));
  }
  55% {
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 16px rgba(48,168,255,.72))
      drop-shadow(0 0 34px rgba(48,168,255,.4));
  }
  78% {
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 16px rgba(170,92,255,.72))
      drop-shadow(0 0 34px rgba(170,92,255,.4));
  }
  100% {
    stroke-dashoffset: -760;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 16px rgba(94,234,212,.72))
      drop-shadow(0 0 34px rgba(94,234,212,.4));
  }
}

@media (max-width: 1180px) {
  #apps .apps-flow {
    display: none;
  }
}

/* Global community map */
.global-network-section {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 22%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 28rem),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, #000), color-mix(in srgb, var(--surface) 56%, #000));
}

.global-map-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 72%, transparent)),
    color-mix(in srgb, var(--bg) 86%, #000);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .42),
    inset 0 0 90px color-mix(in srgb, var(--primary) 11%, transparent);
}

.global-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
}

.global-map-stage {
  --map-x: 0px;
  --map-y: 0px;
  --map-zoom: 1;
  --zoom-pan-x: 0%;
  --zoom-pan-y: 0%;
  --focus-x: 50%;
  --focus-y: 50%;
  --pin-label-scale: 1;
  position: relative;
  min-height: clamp(420px, 46vw, 620px);
  overflow: hidden;
  transform: translate3d(var(--map-x), var(--map-y), 0);
  transition: transform .22s ease-out;
}

.global-map-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(96%, calc((clamp(420px, 46vw, 620px) - 4rem) * 950 / 620));
  aspect-ratio: 950 / 620;
  transform:
    translate(-50%, -50%)
    translate(var(--zoom-pan-x), var(--zoom-pan-y))
    scale(var(--map-zoom));
  transform-origin: var(--focus-x) var(--focus-y);
  transition: transform 1.05s cubic-bezier(.2, .82, .18, 1);
}

.global-map-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .42;
  filter: grayscale(1) invert(1) brightness(1.45) contrast(1.18);
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    opacity .35s ease,
    filter .35s ease;
}

body[data-theme="gold"] .global-map-stage img {
  opacity: .28;
  filter: grayscale(1) invert(1) sepia(.18) brightness(1.12) contrast(1.1);
}

.global-routes,
.global-pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.global-routes {
  overflow: visible;
  pointer-events: none;
}

.global-routes path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.global-route-base {
  stroke: color-mix(in srgb, var(--text) 24%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 5 9;
  opacity: .42;
}

.global-route-flow {
  stroke: url("#globalRouteGradient");
  stroke-width: 2.8;
  stroke-dasharray: 44 420;
  opacity: .95;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.86))
    drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 75%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--secondary) 45%, transparent));
  animation: global-route-dash 3.8s linear infinite;
}

.global-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: block;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition:
    opacity .25s ease,
    filter .25s ease;
}

.global-map-stage.is-zoomed .global-pin:not(.is-active) {
  opacity: .44;
  filter: blur(.15px) saturate(.75);
}

.global-pin::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: .82rem;
  height: .82rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--primary) 15%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 75%, transparent),
    0 0 38px color-mix(in srgb, var(--secondary) 35%, transparent);
  animation: global-pin-pulse 2.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform: translate(-50%, -50%);
  transition:
    width .25s ease,
    height .25s ease,
    scale .25s ease,
    box-shadow .25s ease;
}

.global-pin.is-hub::before {
  width: 1.1rem;
  height: 1.1rem;
  background: linear-gradient(135deg, #ffffff, var(--accent), var(--secondary));
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--primary) 20%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 90%, transparent),
    0 0 70px color-mix(in srgb, var(--secondary) 42%, transparent);
}

.global-pin span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  padding: .28rem .62rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 86%, #000);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  transform:
    translate(-50%, -50%)
    translate(var(--label-x, 0), var(--label-y, 0))
    scale(var(--pin-label-scale));
  transition:
    transform 1.05s cubic-bezier(.2, .82, .18, 1),
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.global-pin:hover span,
.global-pin:focus-visible span,
.global-pin.is-active span {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--secondary));
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 36%, transparent);
}

.global-pin.is-active::before {
  scale: 1.38;
  background: linear-gradient(135deg, #ffffff, var(--accent), var(--secondary));
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 34px color-mix(in srgb, var(--accent) 92%, transparent),
    0 0 82px color-mix(in srgb, var(--secondary) 52%, transparent);
}

.global-map-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  padding: 0 clamp(1rem, 3vw, 2rem) 1.6rem;
}

.global-map-list button {
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 999px;
  padding: .42rem .7rem;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.global-map-list button:hover,
.global-map-list button:focus-visible,
.global-map-list button.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--secondary));
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}

.global-country-card {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto clamp(1.3rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 22px;
  padding: 1rem clamp(1rem, 3vw, 1.4rem);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent)),
    color-mix(in srgb, var(--bg) 76%, #000);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--primary) 8%, transparent),
    0 22px 56px rgba(0,0,0,.24);
}

.global-country-card span {
  display: block;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.global-country-card strong {
  display: block;
  margin-top: .22rem;
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.global-country-card p {
  max-width: 58ch;
  margin: .45rem 0 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
}

@keyframes global-route-dash {
  to {
    stroke-dashoffset: -464;
  }
}

@keyframes global-pin-pulse {
  0%, 100% {
    scale: 1;
    opacity: .82;
  }
  45% {
    scale: 1.26;
    opacity: 1;
  }
}

@media (max-width: 780px) {
  .global-map-stage {
    min-height: 520px;
    overflow: auto;
  }

  .global-map-canvas {
    width: 176%;
  }

  .global-pin span {
    font-size: .7rem;
  }

  .global-country-card {
    margin-inline: 1rem;
  }
}

@media (max-width: 980px) {
  .problem-spotlight {
    grid-template-columns: 1fr;
  }

  .problem-stage {
    position: relative;
    top: auto;
    min-height: 430px;
  }

  .problem-focus h3 {
    max-width: 15ch;
  }

  .problem-row {
    grid-template-columns: 64px minmax(0, .7fr) minmax(0, 1fr);
  }

  .problem-action {
    grid-column: 2 / -1;
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .problem-tabs {
    grid-template-columns: 1fr;
  }

  .problem-stage {
    min-height: 390px;
    border-radius: 24px;
  }

  .problem-focus {
    inset: auto .85rem .85rem;
    border-radius: 20px;
  }

  .problem-focus-number {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1.1rem;
    font-size: 1.35rem;
  }

  .problem-tabs button {
    min-height: 64px;
  }

  .problem-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: .75rem 1rem;
    min-height: 0;
    padding: 1rem .4rem;
  }

  .problem-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: .98rem;
  }

  .problem-title,
  .problem-action {
    grid-column: 2 / -1;
  }

  .problem-action {
    min-height: 42px;
    padding: .62rem .85rem;
    font-size: .82rem;
  }

  .problem-modal-head {
    grid-template-columns: 1fr;
  }

  .problem-modal-number {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }
}

@media (max-width: 700px) {
  body[data-theme] .topbar,
  .topbar {
    inset: .75rem .75rem auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    gap: .65rem !important;
    align-items: center !important;
    padding: .62rem .72rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
  }

  .brand {
    min-width: 0;
  }

  body[data-theme] .brand b,
  .brand b {
    display: none !important;
  }

  .brand span {
    width: 40px;
    height: 40px;
    border-radius: 999px;
  }

  body[data-theme] .theme-switcher,
  .theme-switcher {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 70px;
    padding: .28rem !important;
  }

  .menu-toggle {
    grid-column: 4 !important;
    justify-self: end;
  }

  .theme-dot {
    width: 1.55rem;
    height: 1.55rem;
  }

  body[data-theme] .nav-cta,
  .nav-cta {
    display: none !important;
  }

  .menu-toggle {
    display: grid;
  }

  .topbar.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .topbar.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .topbar.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  body[data-theme] .topbar nav,
  .topbar nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + .65rem) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .35rem !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    padding: 0 .75rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.36) !important;
    backdrop-filter: blur(18px);
    transition:
      max-height .28s ease,
      opacity .2s ease,
      padding .28s ease,
      border-color .2s ease;
  }

  body[data-theme] .topbar.menu-open nav,
  .topbar.menu-open nav {
    max-height: 440px !important;
    border-color: var(--line) !important;
    padding: .75rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body[data-theme] .topbar nav a,
  .topbar nav a {
    display: flex !important;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
    border-radius: 14px !important;
    padding: .7rem .85rem !important;
    background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  }
}

/* Mobile header final pass: compact one-line app bar. */
@media (max-width: 700px) {
  body[data-theme] .topbar,
  .topbar {
    top: .65rem !important;
    right: .75rem !important;
    left: .75rem !important;
    bottom: auto !important;
    display: flex !important;
    width: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    align-items: center !important;
    gap: .5rem !important;
    border-radius: 999px !important;
    padding: .45rem .5rem !important;
  }

  body[data-theme] .brand,
  .brand {
    order: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-theme] .brand span,
  .brand span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    font-size: .88rem !important;
  }

  body[data-theme] .topbar nav,
  .topbar nav {
    order: 5 !important;
  }

  body[data-theme] .theme-switcher,
  .theme-switcher {
    order: 2 !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 38px !important;
    margin-left: auto !important;
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: center !important;
  }

  .menu-toggle {
    order: 3 !important;
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: center !important;
    border-color: color-mix(in srgb, var(--text) 18%, transparent) !important;
  }

  .theme-dot {
    width: 1.45rem !important;
    height: 1.45rem !important;
  }

  .hero {
    padding-top: 5.8rem;
  }
}

/* Full-screen NO Way Loss entry hero */
.hero {
  min-height: auto !important;
  padding: 0 0 clamp(3.5rem, 7vw, 6rem) !important;
}

.hero > .shell {
  width: 100%;
}

.hero-statement {
  position: relative;
  width: 100vw !important;
  min-height: 100svh;
  margin: 0 0 clamp(3rem, 6vw, 5rem) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(7.8rem, 11vw, 9.5rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 7vw, 5.5rem);
  place-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 62%, rgba(15,91,58,.2), transparent 52%),
    linear-gradient(180deg, rgba(2,8,5,.92), rgba(2,8,5,.98));
}

.hero-statement::before {
  content: "";
  position: absolute;
  inset: -9rem -2rem -7rem;
  z-index: -2;
  background: url("assets/founder/arm-hero-desktop.webp") 66% center / cover no-repeat;
  opacity: .58;
  filter: saturate(.55) contrast(1.08) brightness(.72) blur(.7px);
  transform: scale(1.04);
  mask-image:
    linear-gradient(180deg, transparent 0%, black 13%, black 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, black 13%, black 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
}

.hero-statement::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1,5,3,.94) 0%, rgba(4,18,11,.84) 32%, rgba(4,18,11,.62) 60%, rgba(1,5,3,.84) 100%),
    linear-gradient(180deg, rgba(1,5,3,.82) 0%, rgba(1,5,3,.3) 24%, rgba(1,5,3,.58) 58%, rgba(1,5,3,.96) 100%),
    radial-gradient(ellipse at 36% 62%, rgba(15,91,58,.22) 0%, rgba(15,91,58,.1) 36%, transparent 68%),
    radial-gradient(ellipse at 54% 68%, rgba(200,162,74,.08) 0%, transparent 52%),
    linear-gradient(rgba(247, 241, 225, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 241, 225, .017) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 82px 82px, 82px 82px;
  opacity: .96;
}

.hero-statement-title {
  max-width: none !important;
  white-space: nowrap;
  font-size: clamp(5.4rem, 13vw, 17rem) !important;
  line-height: .74 !important;
}

.hero-statement-sub {
  margin-top: clamp(1.1rem, 2vw, 1.6rem) !important;
}

.hero-choice-actions {
  display: flex;
  width: min(1240px, calc(100% - 1rem));
  justify-content: center;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.7rem, 3vw, 2.5rem);
}

.hero-choice {
  --gradient-angle: 0deg;
  --gradient-angle-offset: 0deg;
  --gradient-percent: 5%;
  --gradient-shine: #ffffff;
  --shiny-cta-bg: rgba(0, 6, 4, .96);
  --shiny-cta-bg-subtle: rgba(126, 211, 157, .14);
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #18b979;
  --shiny-cta-highlight-subtle: #7ed39d;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .95rem 1.35rem;
  color: var(--shiny-cta-fg);
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--shiny-cta-highlight) 14%, transparent), transparent 46%) padding-box,
    linear-gradient(100deg, rgba(0,0,0,.96), var(--shiny-cta-bg) 50%, rgba(0,0,0,.93)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    inset 0 -18px 34px rgba(0,0,0,.34),
    0 24px 70px rgba(0, 0, 0, .52);
  transition: transform .22s ease, --gradient-angle-offset .8s cubic-bezier(.25,1,.5,1), --gradient-percent .8s cubic-bezier(.25,1,.5,1), --gradient-shine .8s cubic-bezier(.25,1,.5,1);
  animation: shiny-gradient-angle var(--duration) linear infinite;
}

.hero-choice.primary {
  min-width: min(330px, 100%);
  --shiny-cta-highlight: #18b979;
  --shiny-cta-highlight-subtle: #9ff8c1;
  --shiny-cta-bg: rgba(0, 16, 10, .96);
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    inset 0 -18px 34px rgba(0,0,0,.36),
    0 24px 78px rgba(24, 185, 121, .2),
    0 0 28px rgba(126, 211, 157, .08);
}

.hero-choice.secondary {
  min-width: min(475px, 100%);
  --shiny-cta-highlight: #c8a24a;
  --shiny-cta-highlight-subtle: #f0d890;
  --shiny-cta-bg: rgba(13, 8, 2, .96);
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    inset 0 -18px 34px rgba(0,0,0,.38),
    0 24px 78px rgba(200, 162, 74, .18),
    0 0 28px rgba(200, 162, 74, .07);
}

.hero-choice.income {
  min-width: min(410px, 100%);
  --shiny-cta-highlight: #7ed39d;
  --shiny-cta-highlight-subtle: #d8c58f;
  --gradient-shine: #f5f5f5;
  color: #f5f5f5;
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    0 22px 65px rgba(126, 211, 157, .18),
    0 0 38px rgba(216, 197, 143, .12);
}

.hero-choice::before,
.hero-choice::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.hero-choice::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--position) var(--position), rgba(255,255,255,.95) calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  opacity: .2;
}

.hero-choice::after {
  width: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .28;
  animation: shiny-shimmer calc(var(--duration) / .4) linear infinite;
}

.hero-choice span {
  position: relative;
  z-index: 1;
}

.hero-choice:hover {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    0 22px 65px color-mix(in srgb, var(--shiny-cta-highlight) 24%, transparent),
    0 0 34px color-mix(in srgb, var(--shiny-cta-highlight) 18%, transparent);
}

.hero-choice:focus-visible {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  outline: 2px solid var(--shiny-cta-highlight-subtle);
  outline-offset: 5px;
}

.hero-choice:active {
  transform: translateY(-1px);
}

@keyframes shiny-gradient-angle {
  to { --gradient-angle: 360deg; }
}

@keyframes shiny-shimmer {
  to { rotate: 360deg; }
}

@keyframes shiny-breathe {
  from, to { scale: 1; }
  50% { scale: 1.2; }
}

.hero-frame {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

body[data-theme="gold"] .hero-choice.primary {
  --shiny-cta-highlight: #d8c58f;
  --shiny-cta-highlight-subtle: #f5f5f5;
  box-shadow: 0 22px 55px rgba(184, 154, 79, .28), inset 0 1px rgba(255,255,255,.72);
}

body[data-theme="gold"] .hero-choice.secondary {
  --shiny-cta-highlight: #b89a4f;
  --shiny-cta-highlight-subtle: #d8c58f;
}

body[data-theme="gold"] .hero-choice.income {
  --shiny-cta-highlight: #d8c58f;
  --shiny-cta-highlight-subtle: #f5f5f5;
  box-shadow: 0 22px 55px rgba(184, 154, 79, .24), inset 0 1px rgba(255,255,255,.52);
}

.hero-arm-highlights {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(880px, calc(100% - 1rem));
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: clamp(1.25rem, 2.5vw, 1.9rem) auto 0;
  padding: 0;
  list-style: none;
}

.hero-arm-highlights li {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216, 197, 143, .24);
  border-radius: 999px;
  padding: .58rem 1.05rem;
  color: #c8a24a;
  background: linear-gradient(180deg, rgba(18, 18, 16, .88), rgba(8, 9, 8, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .2);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(.84rem, 1.2vw, .98rem);
  line-height: 1.2;
  text-align: center;
}

.hero-arm-highlights strong {
  font-weight: 800;
}

@media (max-width: 760px) {
  .hero-statement {
    min-height: 100svh;
    padding: 6.8rem .75rem 2.4rem;
  }

  .hero-statement::before {
    inset: -6rem -3rem -6rem;
    background: url("assets/founder/arm-hero-mobile.webp") 70% 15% / auto 66% no-repeat;
    opacity: .48;
    filter: saturate(.5) contrast(1.08) brightness(.68) blur(.8px);
    transform: scale(1.02);
    mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 70%, transparent 94%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 70%, transparent 94%);
  }

  .hero-statement::after {
    background:
      linear-gradient(180deg, rgba(1,5,3,.86) 0%, rgba(1,5,3,.52) 30%, rgba(1,5,3,.78) 58%, rgba(1,5,3,.98) 100%),
      radial-gradient(ellipse at 38% 54%, rgba(15,91,58,.18), transparent 58%),
      radial-gradient(ellipse at 54% 64%, rgba(200,162,74,.07), transparent 48%),
      linear-gradient(rgba(247, 241, 225, .018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247, 241, 225, .014) 1px, transparent 1px);
    background-size: auto, auto, auto, 70px 70px, 70px 70px;
    opacity: .98;
  }

  .hero-statement-title {
    white-space: normal;
    max-width: min(9ch, calc(100vw - 1rem)) !important;
    font-size: clamp(4.15rem, 24vw, 7.4rem) !important;
    line-height: .82 !important;
  }

  .hero-choice-actions {
    width: min(440px, calc(100% - 1rem));
    flex-direction: column;
    gap: .7rem;
  }

  .hero-choice {
    width: 100%;
    min-height: 54px;
    padding-inline: 1rem;
  }

  .hero-arm-highlights {
    display: grid;
    width: min(440px, calc(100% - 1rem));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: 1rem;
  }

  .hero-arm-highlights li {
    min-height: 46px;
    padding: .55rem .65rem;
    font-size: .78rem;
  }
}

/* Split landing pages for Class and TMC paths */
.page-landing {
  padding-top: clamp(8rem, 12vw, 11rem);
}

.page-landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.page-landing h1 {
  max-width: 980px;
}

.home-disclaimer {
  position: relative;
  z-index: 1;
  margin-top: -4.8rem;
  padding: 0 0 1.5rem;
}

.home-disclaimer p {
  max-width: 980px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--text) 48%, transparent);
  font-size: .82rem;
  text-align: center;
}

@media (max-width: 900px) {
  .page-landing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-disclaimer {
    margin-top: -3.6rem;
    padding-inline: .7rem;
  }
}

/* Real brand logo */
.brand .brand-logo {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--secondary) 42%, transparent) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  color: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(216,197,143,.78)) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.28),
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

.brand .brand-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

@media (max-width: 700px) {
  body[data-theme] .brand .brand-logo,
  .brand .brand-logo {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    padding: 2px !important;
  }
}

/* Button typography polish */
.hero-choice,
.hero-choice span,
.btn,
.nav-cta,
.class-cta,
.contact-actions a,
.line-float,
.problem-action,
.follow-card span {
  font-family: "Kanit", "Noto Sans Thai", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.hero-choice {
  font-size: clamp(1rem, 1.35vw, 1.16rem) !important;
}

.hero-choice.secondary {
  font-size: clamp(.96rem, 1.18vw, 1.08rem) !important;
}

.btn,
.nav-cta,
.class-cta {
  font-size: .98rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px) {
  .hero-choice,
  .hero-choice.secondary {
    font-size: .98rem !important;
  }
}

/* Home belief manifesto */
.belief-section {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}

.belief-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--secondary) 28%, transparent);
  border-radius: clamp(24px, 4vw, 42px);
  padding: clamp(1.7rem, 5vw, 4.8rem);
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 20rem),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--surface) 78%, #000 22%);
  box-shadow:
    0 34px 110px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.12);
}

.belief-card::before {
  content: "“";
  position: absolute;
  top: -.35em;
  left: clamp(.8rem, 3vw, 2.4rem);
  z-index: -1;
  color: color-mix(in srgb, var(--secondary) 22%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8rem, 22vw, 20rem);
  line-height: 1;
}

.belief-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.16) 24%, transparent 31% 100%);
  transform: translateX(-90%);
  animation: belief-sheen 6.5s ease-in-out infinite;
}

.belief-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 999px;
  padding: .48rem .8rem;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  font-family: "Space Grotesk", "Kanit", sans-serif;
  font-size: .78rem;
  font-weight: 900;
}

.belief-card p {
  max-width: 1040px;
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(1.65rem, 4.6vw, 4.8rem);
  font-weight: 800;
  line-height: 1.08;
}

.belief-card strong {
  display: block;
  margin-top: .2em;
  color: transparent;
  background:
    linear-gradient(115deg, #f5f5f5 0%, #d8c58f 34%, #7ed39d 58%, #f5f5f5 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: belief-text-shine 5.8s ease-in-out infinite;
}

@keyframes belief-sheen {
  0%, 32% { transform: translateX(-90%); opacity: 0; }
  45% { opacity: 1; }
  68%, 100% { transform: translateX(90%); opacity: 0; }
}

@keyframes belief-text-shine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.home-disclaimer {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .belief-section {
    padding-top: 1.6rem;
  }

  .belief-card p {
    font-size: clamp(1.7rem, 8.4vw, 3rem);
    line-height: 1.12;
  }
}

/* Open belief statement, no card frame */
.belief-section {
  padding: clamp(1.4rem, 4vw, 3.6rem) 0 clamp(4.5rem, 8vw, 7rem) !important;
}

.belief-card {
  max-width: 1180px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: center;
}

.belief-card::after,
.belief-kicker {
  display: none !important;
}

.belief-card::before {
  top: -.52em !important;
  left: 50% !important;
  translate: -50% 0;
  color: color-mix(in srgb, var(--secondary) 12%, transparent) !important;
  font-size: clamp(8rem, 22vw, 19rem) !important;
}

.belief-card p {
  max-width: 1120px !important;
  margin: 0 auto !important;
  text-wrap: balance;
}

/* Open belief statement */
.belief-statement {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.belief-statement::before {
  content: "“";
  position: absolute;
  top: -.52em;
  left: 50%;
  z-index: -1;
  translate: -50% 0;
  color: color-mix(in srgb, var(--secondary) 12%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8rem, 22vw, 19rem);
  line-height: 1;
}

.belief-statement p {
  max-width: 1120px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(1.65rem, 4.6vw, 4.8rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.belief-statement strong {
  display: block;
  margin-top: .2em;
  color: transparent;
  background:
    linear-gradient(115deg, #f5f5f5 0%, #d8c58f 34%, #7ed39d 58%, #f5f5f5 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: belief-text-shine 5.8s ease-in-out infinite;
}

@media (max-width: 760px) {
  .belief-statement p {
    font-size: clamp(1.7rem, 8.4vw, 3rem);
    line-height: 1.12;
  }
}

/* Belief manifesto typography */
.belief-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.28rem, 1.2vw, .8rem) clamp(.55rem, 1.7vw, 1.2rem);
  max-width: 1220px !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.belief-line > span {
  display: inline-block;
}

.belief-arm {
  font-size: clamp(3.8rem, 10.5vw, 11rem);
  line-height: .82;
  color: transparent;
  background:
    linear-gradient(180deg, #fffef5 0%, #efe5bf 28%, #b9d8c6 56%, #f3efe4 74%, #5c615d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 18px 38px color-mix(in srgb, var(--primary) 26%, transparent));
}

.belief-quiet {
  font-size: clamp(1.5rem, 3vw, 3.6rem);
  color: color-mix(in srgb, var(--text) 68%, transparent);
}

.belief-thai {
  position: relative;
  z-index: 1;
  padding: .08em .2em .12em;
  border-radius: .18em;
  font-size: clamp(2.9rem, 8vw, 8.7rem);
  line-height: .88;
  color: #06110b;
  background:
    linear-gradient(135deg, #7ed39d 0%, #f5f5f5 45%, #d8c58f 100%);
  box-shadow:
    0 0 42px color-mix(in srgb, var(--primary) 38%, transparent),
    inset 0 -0.08em rgba(0,0,0,.16);
}

.belief-career {
  display: block !important;
  flex-basis: 100%;
  margin-top: clamp(.25rem, 1vw, .7rem);
  font-size: clamp(4.2rem, 13.5vw, 15.5rem);
  line-height: .76;
  color: transparent;
  background:
    linear-gradient(180deg, #fffbe9 0%, #d8c58f 21%, #f5f5f5 42%, #a9b0ad 62%, #242927 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 26px 44px rgba(0,0,0,.42);
  filter:
    drop-shadow(0 0 20px color-mix(in srgb, var(--secondary) 20%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--primary) 18%, transparent));
}

.belief-safe {
  display: block !important;
  flex-basis: 100%;
  width: fit-content;
  margin: clamp(.35rem, 1vw, .75rem) auto 0;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 999px;
  padding: .42em .86em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow:
    0 16px 38px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.08);
  font-size: clamp(1.45rem, 3vw, 3.4rem);
  line-height: 1;
}

.belief-income-cta {
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
}

@media (max-width: 760px) {
  .belief-line {
    gap: .34rem .48rem;
  }

  .belief-arm {
    font-size: clamp(3.4rem, 18vw, 5.6rem);
  }

  .belief-quiet {
    font-size: clamp(1.25rem, 6vw, 2.2rem);
  }

  .belief-thai {
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .belief-career {
    font-size: clamp(3.6rem, 18vw, 6.7rem);
    line-height: .84;
  }

  .belief-safe {
    max-width: 100%;
    font-size: clamp(1.28rem, 6vw, 2.2rem);
  }

  .belief-income-cta {
    width: min(100%, 440px);
  }
}

/* Language switcher replaces the old palette buttons */
.language-switcher {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 84px;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .28rem .36rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.08);
  cursor: pointer;
}

.language-switcher::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 4px;
  z-index: -1;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:
    0 0 22px color-mix(in srgb, var(--primary) 34%, transparent),
    inset 0 1px rgba(255,255,255,.28);
  transition: transform .28s ease;
}

.language-switcher::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
  transform: translateX(-120%);
  animation: theme-switch-glint 2.9s ease-in-out infinite;
}

.language-switcher[aria-pressed="true"]::before {
  transform: translateX(calc(100% + 4px));
}

.language-switcher span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 50%;
  place-items: center;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
}

.language-switcher .lang-current {
  color: color-mix(in srgb, var(--bg) 88%, #000);
}

.language-switcher[aria-pressed="true"] .lang-current {
  color: var(--muted);
}

.language-switcher[aria-pressed="true"] .lang-next {
  color: color-mix(in srgb, var(--bg) 88%, #000);
}

.language-switcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

body[data-theme="gold"] {
  --primary: #0f5b3a;
  --bg: #0a0f0d;
  --secondary: #c8a24a;
  --accent: #7ed39d;
  --surface: #0b120e;
  --surface-2: #101b15;
  --text: #f3efe4;
  --muted: rgba(243, 239, 228, .72);
  --line: rgba(126, 211, 157, .16);
}

@media (max-width: 980px) {
  .language-switcher {
    order: 3;
    grid-column: 1 / -1;
    width: 84px;
    justify-self: end;
  }
}

@media (max-width: 700px) {
  body[data-theme] .language-switcher,
  .language-switcher {
    order: 2 !important;
    flex: 0 0 84px !important;
    width: 84px !important;
    height: 38px !important;
    margin-left: auto !important;
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: center !important;
  }
}

/* Mobile brand label */
@media (max-width: 700px) {
  body[data-theme] .brand,
  .brand {
    min-width: 0 !important;
    gap: .45rem !important;
  }

  body[data-theme] .brand b,
  .brand b {
    display: inline-block !important;
    max-width: 8.2rem !important;
    overflow: hidden !important;
    color: transparent !important;
    background:
      linear-gradient(115deg, transparent 0 14%, rgba(24, 185, 121, .92) 24%, rgba(221, 255, 238, .95) 32%, transparent 44% 100%),
      linear-gradient(90deg, #efe2b8 0%, #fff 35%, #28cf86 62%, #d6d6d6 100%) !important;
    background-size: 230% 100%, 100% 100% !important;
    background-position: -120% center, center !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-family: "Space Grotesk", "Kanit", sans-serif !important;
    font-size: .98rem !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 0 18px rgba(126, 211, 157, .16) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    animation: hero-word-scan 5.4s ease-in-out infinite !important;
  }
}

/* 16:9 sales video hero for Class and TMC */
.class-story-hero,
.tmc-hero {
  min-height: auto !important;
  padding: clamp(5.4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem) !important;
}

.class-story-grid,
.tmc-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(1.4rem, 3vw, 2.4rem) !important;
  align-items: center !important;
  justify-items: center !important;
}

.class-quote,
.tmc-hero-copy {
  width: min(100%, 1120px);
  text-align: center;
}

.class-quote .eyebrow,
.tmc-hero-copy .eyebrow {
  margin-inline: auto;
}

.class-quote h1,
.tmc-hero-copy h1 {
  max-width: 1160px !important;
  margin: .55rem auto 1rem !important;
  text-align: center !important;
  font-size: clamp(3rem, 6.2vw, 6.4rem) !important;
  line-height: .95 !important;
  text-wrap: balance;
}

.class-quote h1 span,
.tmc-hero-copy h1 span,
.tmc-hero-copy h1 em {
  display: block;
  color: transparent;
  background:
    linear-gradient(115deg, transparent 0 14%, rgba(185,255,65,.95) 24%, rgba(255,255,255,.92) 33%, transparent 45% 100%),
    linear-gradient(90deg, #c8ff42 0%, #9dff48 42%, #f7f1e1 76%, #fff 100%);
  background-size: 230% 100%, 100% 100%;
  background-position: -120% center, center;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(157,255,72,.18));
  animation: hero-word-scan 5.8s ease-in-out infinite;
}

.class-quote .lead,
.tmc-hero-copy .lead {
  max-width: 850px !important;
  margin-inline: auto;
  text-align: center;
}

.class-hero-actions,
.tmc-hero-actions {
  justify-content: center;
}

.class-video-shell,
.tmc-video-shell {
  width: min(100%, 880px);
  min-height: 0 !important;
  margin-top: clamp(.35rem, 1.4vw, 1rem);
}

.class-video-shell::before,
.tmc-video-shell::before {
  inset: 10% 4% !important;
  border-radius: 36px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(185,255,65,.18), transparent 18rem),
    radial-gradient(circle at 86% 80%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 20rem) !important;
  filter: blur(18px) !important;
}

.class-video-frame,
.tmc-video-frame {
  width: min(100%, 840px) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  border-color: color-mix(in srgb, #b9ff41 58%, var(--primary)) !important;
  background:
    linear-gradient(rgba(247,241,225,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,241,225,.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 36%, rgba(185,255,65,.16), transparent 13rem),
    linear-gradient(140deg, #0b120e 0%, #111711 48%, #030504 100%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.48),
    0 0 0 1px rgba(185,255,65,.18),
    0 0 58px rgba(185,255,65,.12),
    inset 0 1px rgba(255,255,255,.12) !important;
}

.class-video-frame::before,
.tmc-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #b9ff41 0 18px, transparent 18px) left top / 80px 2px no-repeat,
    linear-gradient(#b9ff41 0 18px, transparent 18px) left top / 2px 80px no-repeat,
    linear-gradient(270deg, #b9ff41 0 18px, transparent 18px) right bottom / 80px 2px no-repeat,
    linear-gradient(0deg, #b9ff41 0 18px, transparent 18px) right bottom / 2px 80px no-repeat;
  opacity: .95;
}

.class-video-frame::after,
.tmc-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(0,0,0,.32) 72%),
    linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,.34));
  pointer-events: none;
}

.hero-video-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020403;
  object-fit: contain;
}

.custom-video-play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  width: clamp(4.5rem, 7vw, 5.8rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #c8ff42 0%, #9cff48 54%, #5eead4 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34) inset,
    0 0 32px rgba(185,255,65,.46),
    0 20px 54px rgba(0,0,0,.42);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}

.custom-video-play::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(185,255,65,.28), transparent 62%);
  filter: blur(8px);
  opacity: .82;
}

.custom-video-play span {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  margin-left: .32rem;
  border-top: .78rem solid transparent;
  border-bottom: .78rem solid transparent;
  border-left: 1.16rem solid #06110b;
}

.custom-video-play:hover {
  filter: brightness(1.08);
  transform: translate(-50%, -50%) scale(1.05);
}

.custom-video-play:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.class-video-frame.is-playing .custom-video-play,
.tmc-video-frame.is-playing .custom-video-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.82);
}

.class-video-frame.is-paused .custom-video-play,
.tmc-video-frame.is-paused .custom-video-play {
  opacity: 1;
}

.class-video-frame:has(.hero-video-player)::after,
.tmc-video-frame:has(.hero-video-player)::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), transparent 18% 72%, rgba(0,0,0,.22));
}

.class-video-frame:has(.hero-video-player) .video-status,
.tmc-video-frame:has(.hero-video-player) .video-status {
  display: none;
}

.video-status {
  z-index: 2;
  border-color: rgba(185,255,65,.46) !important;
  color: #b9ff41 !important;
  background: rgba(4,8,5,.68) !important;
}

.play-orb {
  position: relative;
  z-index: 2;
  width: clamp(74px, 7vw, 96px) !important;
  background: linear-gradient(135deg, #c8ff42, #9dff48) !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 42px rgba(185,255,65,.36),
    0 12px 34px rgba(0,0,0,.32) !important;
}

.class-video-frame p,
.class-video-frame small {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 620px);
  text-align: center;
}

.class-video-frame p {
  bottom: 3.2rem;
  margin: 0 !important;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.class-video-frame small {
  bottom: 1.65rem;
}

@media (max-width: 760px) {
  .class-story-hero,
  .tmc-hero {
    padding-top: 5.6rem !important;
  }

  .class-quote h1,
  .tmc-hero-copy h1 {
    font-size: clamp(2.55rem, 13vw, 4.5rem) !important;
  }

  .class-video-frame,
  .tmc-video-frame {
    border-radius: 6px !important;
  }

  .class-video-frame p {
    bottom: 2.65rem;
  }

  .class-video-frame small {
    bottom: 1.25rem;
  }
}

/* Final pass: center nav choices as clear buttons. */
@media (min-width: 1181px) {
  body[data-theme] .topbar nav {
    gap: .7rem !important;
  }

  body[data-theme] .topbar nav a {
    position: relative !important;
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--secondary) 18%) !important;
    border-radius: 999px !important;
    padding: .72rem 1.15rem !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--bg) 68%, transparent)),
      color-mix(in srgb, var(--bg) 78%, transparent) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent),
      0 10px 28px color-mix(in srgb, var(--primary) 8%, transparent) !important;
    color: var(--text) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease,
      color .18s ease !important;
  }

  body[data-theme] .topbar nav a:first-child {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--bg)), color-mix(in srgb, var(--bg) 88%, transparent)) !important;
    border-color: color-mix(in srgb, var(--primary) 52%, var(--text) 10%) !important;
  }

  body[data-theme] .topbar nav a:nth-child(2) {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--secondary) 24%, var(--bg)), color-mix(in srgb, var(--bg) 88%, transparent)) !important;
    border-color: color-mix(in srgb, var(--secondary) 52%, var(--primary) 12%) !important;
  }

  body[data-theme] .topbar nav a:hover {
    transform: translateY(-1px) !important;
    color: color-mix(in srgb, var(--bg) 88%, #000) !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border-color: color-mix(in srgb, var(--text) 20%, transparent) !important;
    box-shadow:
      0 16px 40px color-mix(in srgb, var(--primary) 18%, transparent),
      0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
  }
}

/* Life flow final pass: no card, clearer questions, more readable Thai font. */
.life-flow-section {
  min-height: 100svh !important;
  align-items: center !important;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(5rem, 9vw, 8rem) !important;
}

.life-flow-card {
  width: min(1040px, 100%) !important;
  min-height: auto !important;
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.life-flow-card::before {
  content: "";
  position: absolute;
  inset: 20% auto auto 50%;
  width: min(44rem, 90vw);
  height: min(44rem, 90vw);
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 13%, transparent), transparent 68%);
  filter: blur(14px);
  opacity: .85;
  z-index: -1;
}

.life-progress {
  position: relative !important;
  height: 2px !important;
  margin-bottom: .75rem !important;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent) !important;
}

.life-count {
  margin-bottom: clamp(1.4rem, 4vw, 2.8rem);
  color: color-mix(in srgb, var(--text) 64%, transparent);
  font-family: "Prompt", "Noto Sans Thai", sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.life-step {
  max-width: 900px !important;
  margin-inline: auto !important;
  gap: clamp(.9rem, 2vw, 1.35rem) !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
}

.life-step .eyebrow {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  padding: .45rem .75rem;
  color: color-mix(in srgb, var(--accent) 78%, var(--text)) !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
  font-size: clamp(.82rem, 1.05vw, .95rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.life-step h2 {
  max-width: 920px !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
  font-size: clamp(2rem, 4.2vw, 4.85rem) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.life-helper,
.life-step p {
  max-width: 760px !important;
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
  font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
  font-weight: 600 !important;
  line-height: 1.75 !important;
}

.life-name-field,
.life-age-field {
  max-width: 500px !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
}

.life-name-field span,
.life-age-field span {
  font-size: 1.02rem;
  font-weight: 800;
}

.life-name-field input,
.life-age-field input {
  min-height: 58px;
  border-radius: 18px !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
  font-size: 1.05rem !important;
}

.life-age-field {
  display: grid;
  gap: .7rem;
}

.life-age-field input {
  width: min(320px, 100%);
  padding-inline: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--secondary) 16%);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
}

.life-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .9rem !important;
  max-width: 820px !important;
}

.life-options.three-options {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.life-options.four-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.life-options button,
.life-checks label,
.life-next {
  min-height: 58px !important;
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--primary) 32%, var(--secondary) 16%) !important;
  padding: 1rem 1.05rem !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--bg) 76%, transparent)) !important;
  color: var(--text) !important;
  font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
  font-size: clamp(.98rem, 1.18vw, 1.08rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.life-options button::after {
  content: "เลือก";
  float: right;
  margin-left: .8rem;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font-size: .82rem;
  font-weight: 900;
}

.life-options button:hover,
.life-checks label:hover {
  border-color: var(--primary) !important;
  box-shadow:
    0 16px 42px color-mix(in srgb, var(--primary) 13%, transparent),
    0 0 0 4px color-mix(in srgb, var(--primary) 9%, transparent) !important;
}

.life-next.primary {
  border-radius: 999px !important;
  color: #06110b !important;
  text-align: center !important;
}

.life-pause {
  min-height: auto !important;
  text-align: left !important;
  place-content: start !important;
}

.life-pause h2 {
  font-size: clamp(2.2rem, 4.6vw, 5.2rem) !important;
}

.life-wait-bar {
  display: none !important;
}

.life-summary h2 {
  font-size: clamp(2rem, 3.9vw, 4.4rem) !important;
}

@media (max-width: 700px) {
  .life-flow-section {
    padding-top: 7rem !important;
  }

  .life-flow-card {
    padding: 0 !important;
  }

  .life-options,
  .life-options.three-options,
  .life-options.four-options,
  .life-checks {
    grid-template-columns: 1fr !important;
  }

  .life-step h2 {
    font-size: clamp(1.85rem, 9.4vw, 3.15rem) !important;
  }
}

/* Life flow back button and calmer readable question scale. */
.life-back {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  padding: .55rem .85rem;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  font-family: "Prompt", "Noto Sans Thai", sans-serif;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}

.life-back[hidden] {
  display: none !important;
}

.life-back:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 44%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.life-step h2 {
  font-size: clamp(1.9rem, 3.65vw, 4.15rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
}

.life-pause h2 {
  max-width: 780px !important;
  font-size: clamp(2.1rem, 4.2vw, 4.8rem) !important;
}

.life-pause .life-helper {
  max-width: 800px !important;
  font-size: clamp(1.06rem, 1.7vw, 1.34rem) !important;
  color: color-mix(in srgb, var(--text) 82%, transparent) !important;
}

.life-next.primary,
button.life-next.primary {
  border: 1px solid color-mix(in srgb, var(--accent) 64%, var(--primary) 24%) !important;
  color: #03100a !important;
  background: linear-gradient(135deg, #7ed39d 0%, var(--primary) 42%, var(--secondary) 100%) !important;
  box-shadow:
    0 20px 54px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font-weight: 950 !important;
}

.life-next.primary:hover,
button.life-next.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 62px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.life-options button {
  position: relative;
  padding-right: 4.4rem !important;
}

.life-options button::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  float: none !important;
  transform: translateY(-50%);
}

@media (max-width: 700px) {
  .life-step h2 {
    font-size: clamp(1.75rem, 8.4vw, 2.85rem) !important;
  }

  .life-back {
    margin-bottom: 1rem;
  }
}

/* Home pricing: final route selector */
.home-pricing-section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  overflow: hidden;
}

.home-pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 26rem),
    radial-gradient(circle at 75% 60%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 22rem);
  opacity: .9;
}

.home-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.45rem);
  width: min(1120px, 100%);
  margin: clamp(2rem, 4vw, 3.2rem) auto 0;
  align-items: stretch;
}

.home-price-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 1rem;
  min-height: 520px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--primary) 14%);
  border-radius: 22px;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 14rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .28),
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.home-price-card.is-popular {
  transform: translateY(-14px);
  border-color: color-mix(in srgb, var(--text) 48%, var(--primary));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 16rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg) 90%, transparent));
  box-shadow:
    0 34px 86px rgba(0, 0, 0, .36),
    0 0 56px color-mix(in srgb, var(--accent) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

.badge-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
}

.plan-badge {
  width: fit-content;
  justify-self: center;
  margin: 0;
  border-radius: 999px;
  padding: .3rem .72rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-size: .78rem;
  font-weight: 900;
}

.plan-badge.dark {
  background: var(--text);
  color: var(--bg);
}

.home-price-card h3 {
  max-width: 260px;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  line-height: 1.05;
  text-align: center;
}

.plan-copy {
  max-width: 280px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--text) 66%, transparent);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.plan-price {
  display: grid;
  gap: .25rem;
  border-block: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  padding: 1.1rem 0;
  text-align: center;
}

.plan-price span,
.plan-price small {
  color: color-mix(in srgb, var(--text) 62%, transparent);
  font-weight: 750;
}

.plan-price strong {
  color: var(--text);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(1.85rem, 3.6vw, 3.05rem);
  font-weight: 900;
  line-height: 1.02;
  text-wrap: balance;
}

.home-price-card ul {
  display: grid;
  align-content: start;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-price-card li {
  position: relative;
  padding-left: 1.75rem;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  font-weight: 750;
  line-height: 1.45;
}

.home-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .1rem;
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 42%, transparent);
  border-radius: 999px;
  color: var(--text);
  font-size: .68rem;
  font-weight: 900;
}

.home-price-card a {
  display: grid;
  min-height: 50px;
  place-items: center;
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-weight: 900;
  text-decoration: none;
  transition: transform .22s ease, filter .22s ease;
}

.home-price-card.is-popular a {
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--secondary) 16%, transparent);
}

.home-price-card a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

@media (max-width: 980px) {
  .home-pricing-grid {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
  }

  .home-price-card,
  .home-price-card.is-popular {
    min-height: auto;
    transform: none;
  }
}

/* Home pricing clean redesign */
.home-pricing-section {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(4.5rem, 8vw, 7.5rem) !important;
}

.home-pricing-section .section-head {
  max-width: 780px;
}

.home-pricing-section .section-head h2 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .95;
}

.home-pricing-section .section-head p:not(.eyebrow) {
  max-width: 620px;
  margin-inline: auto;
}

.home-pricing-grid {
  gap: clamp(1rem, 2.2vw, 1.8rem) !important;
  width: min(1160px, 100%) !important;
  align-items: stretch !important;
}

.home-price-card {
  min-height: auto !important;
  grid-template-rows: auto auto auto auto 1fr auto !important;
  gap: 1.05rem !important;
  border-radius: 18px !important;
  padding: clamp(1.35rem, 2.4vw, 1.8rem) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--primary) 34%, transparent), color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--secondary) 20%, transparent)) border-box !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.home-price-card.is-popular {
  transform: translateY(-10px) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 14rem) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--text) 48%, transparent), color-mix(in srgb, var(--accent) 44%, transparent)) border-box !important;
}

.home-price-card .badge-row,
.home-price-card > .plan-badge {
  min-height: 30px;
}

.plan-badge {
  justify-self: start !important;
  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
  color: color-mix(in srgb, var(--text) 78%, transparent) !important;
}

.badge-row {
  justify-content: flex-start !important;
}

.plan-badge.dark {
  background: var(--text) !important;
  color: #06110b !important;
}

.home-price-card h3 {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(1.7rem, 2.4vw, 2.45rem) !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.plan-copy {
  max-width: none !important;
  margin: 0 !important;
  min-height: 4.6em;
  color: color-mix(in srgb, var(--text) 68%, transparent) !important;
  font-size: clamp(.96rem, 1.05vw, 1.05rem) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.plan-price {
  min-height: 116px;
  align-content: center;
  border-block: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  border-radius: 0 !important;
  padding: 1rem 0 !important;
  text-align: left !important;
}

.plan-price strong {
  max-width: 100%;
  color: color-mix(in srgb, var(--text) 94%, var(--secondary)) !important;
  font-size: clamp(1.45rem, 2.05vw, 1.9rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.plan-price span,
.plan-price small {
  color: color-mix(in srgb, var(--text) 58%, transparent) !important;
  font-size: .9rem !important;
  line-height: 1.45 !important;
}

.home-price-card ul {
  gap: .7rem !important;
}

.home-price-card li {
  color: color-mix(in srgb, var(--text) 74%, transparent) !important;
  font-size: .98rem !important;
  line-height: 1.45 !important;
}

.home-price-card a {
  min-height: 48px !important;
  margin-top: .35rem;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
}

.home-price-card.is-popular a {
  color: #06110b !important;
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
}

@media (max-width: 980px) {
  .home-price-card.is-popular {
    transform: none !important;
  }

  .plan-copy {
    min-height: 0;
  }

  .plan-price {
    min-height: auto;
  }
}

/* Home pricing frequency toggle */
.pricing-frequency {
  position: relative;
  display: flex;
  width: fit-content;
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--primary) 20%);
  border-radius: 999px;
  padding: .28rem;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.pricing-frequency button {
  position: relative;
  min-width: 92px;
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.05rem;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pricing-frequency button.is-active {
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--secondary) 18%, transparent);
}

.home-pricing-section .home-price-card {
  min-height: 500px !important;
}

.home-pricing-section .plan-price {
  min-height: 132px !important;
  display: grid !important;
  gap: .35rem !important;
}

.home-pricing-section .plan-price strong {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .35rem;
  color: var(--text) !important;
  font-family: "Space Grotesk", "Kanit", sans-serif !important;
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  line-height: .95 !important;
}

.home-pricing-section .plan-price strong b {
  font: inherit;
}

.home-pricing-section .plan-price strong em {
  color: color-mix(in srgb, var(--text) 58%, transparent);
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.home-pricing-section .plan-price span {
  color: color-mix(in srgb, var(--accent) 78%, var(--text)) !important;
  font-weight: 900;
}

@media (max-width: 980px) {
  .home-pricing-section .home-price-card,
  .home-pricing-section .plan-price {
    min-height: auto !important;
  }

  .pricing-frequency {
    margin-top: 1rem;
  }
}

/* Home pricing redesign v2: stronger buying cards */
.home-pricing-section {
  padding-block: clamp(4.8rem, 8vw, 7.6rem) !important;
}

.home-pricing-section .section-head h2 {
  max-width: 840px;
  margin-inline: auto;
  font-size: clamp(2.6rem, 5.6vw, 5.7rem) !important;
  letter-spacing: 0 !important;
}

.pricing-frequency {
  gap: .2rem;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--secondary) 14%) !important;
  padding: .34rem !important;
  background: rgba(0, 13, 8, .82) !important;
  backdrop-filter: blur(14px);
}

.pricing-frequency button {
  min-width: 96px !important;
  padding: .62rem 1.08rem !important;
}

.home-pricing-grid {
  gap: clamp(1rem, 2vw, 1.35rem) !important;
  margin-top: clamp(2.1rem, 4vw, 3.4rem) !important;
}

.home-price-card {
  min-height: 560px !important;
  gap: 1rem !important;
  border-radius: 26px !important;
  padding: clamp(1.25rem, 2.1vw, 1.55rem) !important;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--secondary) 14%) !important;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 15rem),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--primary) 44%, transparent), color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--secondary) 22%, transparent)) border-box !important;
}

.home-price-card.is-popular {
  transform: translateY(-12px) scale(1.015) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--text) 24%) !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 16rem),
    linear-gradient(150deg, color-mix(in srgb, var(--primary) 36%, #1f2a20), color-mix(in srgb, var(--secondary) 24%, #06110b)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--text) 20%, transparent)) border-box !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    0 0 70px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

.home-price-card h3 {
  font-size: clamp(1.9rem, 2.8vw, 2.8rem) !important;
}

.plan-copy {
  min-height: 5rem !important;
  color: color-mix(in srgb, var(--text) 74%, transparent) !important;
}

.plan-price {
  position: relative;
  min-height: 142px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent) !important;
  border-radius: 18px !important;
  padding: 1rem !important;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 9rem),
    color-mix(in srgb, var(--bg) 38%, transparent) !important;
}

.plan-price span {
  width: fit-content;
  border-radius: 999px;
  padding: .22rem .65rem;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 86%, var(--text)) !important;
  font-size: .84rem !important;
}

.home-pricing-section .plan-price strong {
  display: flex !important;
  align-items: baseline !important;
  gap: .42rem !important;
  margin-top: .25rem;
  font-size: clamp(2.45rem, 4.5vw, 4.4rem) !important;
  line-height: .9 !important;
  white-space: normal;
}

.home-pricing-section .plan-price.is-fixed strong {
  font-size: clamp(2.35rem, 4.2vw, 4rem) !important;
}

.home-pricing-section .plan-price strong em {
  color: color-mix(in srgb, var(--text) 66%, transparent) !important;
  font-size: clamp(1rem, 1.5vw, 1.22rem) !important;
}

.plan-price small {
  color: color-mix(in srgb, var(--text) 68%, transparent) !important;
  font-weight: 850 !important;
}

.home-price-card ul {
  gap: .85rem !important;
  padding-top: .35rem !important;
}

.home-price-card li {
  color: color-mix(in srgb, var(--text) 78%, transparent) !important;
}

.home-price-card a {
  min-height: 58px !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 16px !important;
  color: var(--text) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 11%, transparent), color-mix(in srgb, var(--text) 6%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.home-price-card a:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--primary));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, transparent), color-mix(in srgb, var(--secondary) 86%, transparent)) !important;
  color: #06110b !important;
}

.home-price-card.is-popular a {
  border: 0;
  color: #06110b !important;
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--secondary) 22%, transparent);
}

@media (max-width: 980px) {
  .home-price-card,
  .home-price-card.is-popular {
    min-height: auto !important;
    transform: none !important;
  }
}

@media (max-width: 520px) {
  .pricing-frequency {
    width: 100%;
    justify-content: space-between;
  }

  .pricing-frequency button {
    min-width: 0 !important;
    flex: 1;
    padding-inline: .7rem !important;
  }

  .home-pricing-section .plan-price strong {
    font-size: clamp(2.25rem, 12vw, 3.2rem) !important;
  }
}
/* Local font system: Sarabun body/buttons, Pattaya main headings */
@font-face {
  font-family: "NWL Sarabun";
  src: url("assets/fonts/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NWL Sarabun";
  src: url("assets/fonts/Sarabun-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NWL Sarabun";
  src: url("assets/fonts/Sarabun-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NWL Sarabun";
  src: url("assets/fonts/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NWL Sarabun";
  src: url("assets/fonts/Sarabun-ExtraBold.ttf") format("truetype");
  font-weight: 800 950;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NWL Pattaya";
  src: url("assets/fonts/Pattaya-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "NWL Sarabun", "Noto Sans Thai", sans-serif;
  --font-heading: "NWL Sarabun", "Noto Sans Thai", sans-serif;
  --font-number: "Space Grotesk", "NWL Sarabun", sans-serif;
}

html,
body,
p,
li,
small,
span,
input,
button,
textarea,
select,
a,
.btn,
.nav-cta,
.class-cta,
.hero-choice,
.hero-choice span,
.contact-actions a,
.line-float,
.problem-action,
.follow-card span,
.life-next,
.life-options button,
.pricing-frequency button,
.home-price-card a,
.home-price-card p,
.home-price-card li,
.home-price-card .pill,
.mobile-menu a,
.lang-toggle,
.nav-links a {
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

h1,
h2,
.section-head h2,
.hero-statement-title,
.belief-line,
.class-quote h1,
.choice-copy h2,
.life-step h2,
.tmc-hero h1,
.tmc-final-card h2,
.final-card h2,
.home-pricing-section .section-head h2,
.class-offer-main h2,
.problem-focus h3,
.review-trust-note p {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.plan-price strong,
.plan-price strong b,
.offer-price-line strong,
.diff-row > div:first-child,
.flow-dot,
.home-price-card h3,
.logo-text,
.hero-title,
.nwl-hero-title {
  font-family: var(--font-number) !important;
}
/* Keep NO Way Loss brand label in the original brand font */
body[data-theme] .brand b,
.brand b {
  font-family: "Kanit", "Noto Sans Thai", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

@media (max-width: 700px) {
  body[data-theme] .brand b,
  .brand b {
    color: var(--text) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    animation: none !important;
  }
}

/* Keep the main NO WAY LOSS hero in the original bold display font */
.hero-statement-title,
.hero-statement-title span {
  font-family: "Space Grotesk", "Kanit", "Noto Sans Thai", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
/* TMC question flow: same interaction as class, different trading context */
.tmc-life-flow-section {
  padding-top: clamp(3rem, 7vw, 7rem) !important;
  padding-bottom: clamp(3rem, 7vw, 7rem) !important;
  position: relative;
}

.tmc-life-flow-section::before {
  content: "";
  position: absolute;
  inset: 8% 0 auto;
  height: 44%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 32%),
    radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 34%);
  filter: blur(22px);
  opacity: .78;
}

.tmc-life-flow-section .life-flow-card {
  max-width: 1080px;
  min-height: clamp(560px, 68vh, 760px);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, #07140d 92%, var(--primary)), color-mix(in srgb, #040806 96%, var(--secondary))) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .45),
    0 0 80px color-mix(in srgb, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.tmc-life-flow-section .life-count {
  color: color-mix(in srgb, var(--secondary) 86%, var(--text)) !important;
}

.tmc-life-flow-section .life-step .eyebrow {
  border-color: color-mix(in srgb, var(--secondary) 24%, transparent) !important;
  color: color-mix(in srgb, var(--secondary) 88%, var(--text)) !important;
  background: color-mix(in srgb, var(--secondary) 10%, transparent) !important;
}

.tmc-life-flow-section .life-step h2 {
  max-width: 980px;
  font-size: clamp(2.7rem, 6.5vw, 6.6rem) !important;
}

.tmc-life-flow-section .life-helper {
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tmc-life-flow-section .life-options button {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--text) 8%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)) !important;
}

.tmc-life-flow-section .life-options button:hover {
  border-color: color-mix(in srgb, var(--secondary) 66%, var(--primary)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--secondary) 20%, transparent)) !important;
}

@media (max-width: 700px) {
  .tmc-life-flow-section {
    padding-top: 2.4rem !important;
  }

  .tmc-life-flow-section .life-flow-card {
    min-height: auto;
  }

  .tmc-life-flow-section .life-step h2 {
    font-size: clamp(2.15rem, 13vw, 3.8rem) !important;
  }
}
/* Readable heavy headings: keep them bold, not decorative */
h1:not(.hero-statement-title),
h2,
.section-head h2,
.class-quote h1,
.choice-copy h2,
.life-step h2,
.tmc-hero h1,
.tmc-final-card h2,
.final-card h2,
.home-pricing-section .section-head h2,
.class-offer-main h2 {
  font-family: var(--font-heading) !important;
  font-weight: 850 !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
}

.section-head h2,
.choice-copy h2,
.tmc-final-card h2,
.final-card h2,
.home-pricing-section .section-head h2 {
  font-size: clamp(2.35rem, 5.2vw, 5.1rem) !important;
}

.life-step h2 {
  font-size: clamp(2.45rem, 6vw, 5.8rem) !important;
}

@media (max-width: 700px) {
  h1:not(.hero-statement-title),
  h2,
  .section-head h2,
  .class-quote h1,
  .choice-copy h2,
  .life-step h2,
  .tmc-hero h1 {
    line-height: 1.02 !important;
  }

  .section-head h2,
  .choice-copy h2,
  .tmc-final-card h2,
  .final-card h2,
  .home-pricing-section .section-head h2 {
    font-size: clamp(2rem, 10vw, 3.55rem) !important;
  }
}
/* Belief statement reset: readable, not poster-sized */
.belief-section {
  padding-block: clamp(3.2rem, 7vw, 7rem) !important;
}

.belief-statement {
  max-width: 1120px;
  margin-inline: auto;
  text-align: center;
}

.belief-line,
.belief-line > span,
.belief-arm,
.belief-quiet,
.belief-thai,
.belief-career,
.belief-safe {
  font-family: var(--font-heading) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
  filter: none !important;
  text-shadow: none !important;
}

.belief-line {
  display: block !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  color: var(--text) !important;
  font-size: clamp(2.2rem, 5.4vw, 5.4rem) !important;
}

.belief-line > span {
  display: inline !important;
}

.belief-arm {
  color: color-mix(in srgb, var(--secondary) 88%, var(--text)) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-size: 1em !important;
}

.belief-quiet,
.belief-safe {
  color: color-mix(in srgb, var(--text) 76%, transparent) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  font-size: .78em !important;
}

.belief-thai {
  display: inline-block !important;
  position: relative !important;
  z-index: 1 !important;
  margin-inline: .08em !important;
  padding: .02em .18em .08em !important;
  border-radius: .18em !important;
  color: #06110b !important;
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  font-size: 1.08em !important;
}

.belief-career {
  display: inline !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--secondary) 90%, var(--text)) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-size: 1em !important;
}

@media (max-width: 760px) {
  .belief-line {
    max-width: 430px !important;
    font-size: clamp(2rem, 11vw, 3.9rem) !important;
  }

  .belief-thai {
    display: inline-block !important;
    margin-block: .04em !important;
  }

  .belief-income-cta {
    width: min(100%, 430px) !important;
  }
}
/* About page */
.about-main {
  overflow: hidden;
}

.about-hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(7rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 34%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 34%),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 28%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 88%, transparent));
  opacity: .9;
}

.about-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .7fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: center;
}

.about-hero-copy h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(3.1rem, 7.8vw, 7.3rem);
  line-height: .95;
}

.about-hero-copy .lead {
  max-width: 760px;
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.75;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.8rem;
}

.about-proof-panel {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-radius: 28px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--primary) 10%, transparent)),
    color-mix(in srgb, #06110b 84%, transparent);
  box-shadow:
    0 28px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.about-proof-logo {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border-radius: 50%;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-family: var(--font-number) !important;
  font-weight: 900;
  box-shadow: 0 18px 46px color-mix(in srgb, var(--primary) 24%, transparent);
}

.about-proof-panel h2 {
  margin: 1.4rem 0 .7rem;
  font-size: clamp(2rem, 3.2vw, 3.5rem) !important;
}

.about-proof-panel p,
.about-founder p,
.about-final-card p {
  color: color-mix(in srgb, var(--text) 72%, transparent);
  line-height: 1.75;
}

.about-founder {
  max-width: 1040px;
  text-align: center;
}

.about-founder h2 {
  margin: .7rem auto 1rem;
  max-width: 980px;
  font-size: clamp(2.45rem, 5.6vw, 5.6rem) !important;
}

.about-founder p {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(1.04rem, 1.6vw, 1.28rem);
}

.about-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.about-ecosystem-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 24px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.about-ecosystem-card span {
  color: var(--secondary);
  font-family: var(--font-number) !important;
  font-weight: 900;
}

.about-ecosystem-card h3 {
  margin: 1.2rem 0 .7rem;
  font-size: clamp(1.7rem, 2.7vw, 2.8rem);
  line-height: 1.05;
}

.about-ecosystem-card p {
  color: color-mix(in srgb, var(--text) 70%, transparent);
  line-height: 1.68;
}

.about-ecosystem-card a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 999px;
  padding: .72rem 1rem;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 850;
}

.about-principles {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 5vw, 4rem);
  align-items: start;
}

.about-principles h2 {
  font-size: clamp(2.45rem, 5vw, 5.2rem) !important;
}

.about-principle-list {
  display: grid;
  gap: .85rem;
}

.about-principle-list p {
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  padding: 0 0 .95rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.65;
}

.about-principle-list b {
  color: var(--secondary);
}

.about-final-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  border-radius: 28px;
  padding: clamp(1.4rem, 4vw, 3rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--secondary) 7%, transparent)),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.about-final-card h2 {
  margin: .5rem 0 .7rem;
  font-size: clamp(2.2rem, 4.6vw, 4.7rem) !important;
}

@media (max-width: 980px) {
  .about-hero-grid,
  .about-principles,
  .about-final-card {
    grid-template-columns: 1fr;
  }

  .about-ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .about-ecosystem-card {
    min-height: auto;
  }

  .about-final-card .contact-actions {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .about-hero {
    min-height: auto;
    padding-top: 6.2rem;
  }

  .about-hero-copy h1 {
    font-size: clamp(2.45rem, 13vw, 4.2rem);
  }

  .about-hero-actions .btn,
  .about-final-card .btn {
    width: 100%;
  }
}
/* About cinematic refresh with real ecosystem logos */
.about-cinematic-hero {
  min-height: 100vh;
  isolation: isolate;
  padding: clamp(7rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 7rem) !important;
  overflow: hidden;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .26;
  transform: scale(1.08);
}

.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(.9);
}

.about-cinematic-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 34%),
    radial-gradient(circle at 74% 36%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 46%, color-mix(in srgb, var(--bg) 92%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent), var(--bg));
}

.about-cinematic-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: center;
}

.about-cinematic-copy h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(3.1rem, 7vw, 7.1rem) !important;
  line-height: .96 !important;
}

.about-cinematic-copy .lead {
  max-width: 770px;
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-size: clamp(1.08rem, 1.65vw, 1.42rem);
  line-height: 1.75;
}

.about-brand-stack {
  display: grid;
  gap: .9rem;
  perspective: 1000px;
}

.about-brand-chip {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 24px;
  padding: .85rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--primary) 9%, transparent));
  box-shadow:
    0 24px 64px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateY(-4deg);
}

.about-brand-chip:nth-child(2) {
  margin-left: clamp(0rem, 3vw, 2.2rem);
  transform: rotateY(-2deg) translateY(4px);
}

.about-brand-chip:nth-child(3) {
  margin-left: clamp(0rem, 6vw, 4.4rem);
  transform: rotateY(-1deg) translateY(8px);
}

.about-brand-chip:nth-child(4) {
  margin-left: clamp(0rem, 9vw, 5.8rem);
  transform: rotateY(-1deg) translateY(12px);
}

.about-brand-chip img {
  width: 92px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  padding: .45rem;
  background: rgba(0,0,0,.35);
}

.about-brand-chip.is-elite img {
  object-fit: cover;
}

.about-brand-chip.is-nwl {
  border-color: color-mix(in srgb, var(--secondary) 42%, var(--primary));
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--primary) 14%, transparent));
}

.about-brand-chip.is-nwl img,
.nwl-logo-card img {
  object-fit: contain;
  padding: .65rem;
  background: radial-gradient(circle, #ffffff 0%, #eef7ef 58%, rgba(255,255,255,.06) 100%);
}

.about-brand-chip span {
  display: block;
  margin-bottom: .25rem;
  color: var(--secondary);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.about-brand-chip strong {
  display: block;
  color: var(--text);
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  line-height: 1.05;
}

.about-logo-grid .about-ecosystem-card {
  min-height: 520px;
}

.about-card-logo {
  display: grid;
  width: 100%;
  height: 118px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    rgba(0,0,0,.34);
}

.about-card-logo img {
  max-width: 78%;
  max-height: 74%;
  object-fit: contain;
}

.about-card-logo.elite-logo-card img {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-ecosystem-card ul {
  display: grid;
  gap: .55rem;
  margin: 1rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.about-ecosystem-card li {
  position: relative;
  padding-left: 1.25rem;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  line-height: 1.5;
}

.about-ecosystem-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
}

@media (max-width: 980px) {
  .about-cinematic-grid {
    grid-template-columns: 1fr;
  }

  .about-brand-chip,
  .about-brand-chip:nth-child(2),
  .about-brand-chip:nth-child(3) {
    margin-left: 0;
    transform: none;
  }

  .about-logo-grid .about-ecosystem-card {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .about-cinematic-hero {
    min-height: auto;
    padding-top: 6.5rem !important;
  }

  .about-cinematic-copy h1 {
    font-size: clamp(2.35rem, 12vw, 4rem) !important;
  }

  .about-brand-chip {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .about-brand-chip img {
    width: 74px;
    height: 54px;
  }
}

/* Home belief poster: restored cinematic statement */
.belief-section {
  position: relative;
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4.2rem, 7vw, 7rem) !important;
  overflow: hidden;
}

.belief-section::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 28%),
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 38%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 86%, transparent));
  opacity: .95;
}

.belief-statement {
  position: relative;
  z-index: 1;
  max-width: 1320px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.belief-line {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 0 .24em !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(3.8rem, 7.4vw, 9rem) !important;
  font-weight: 950 !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

.belief-line > span {
  display: inline-block !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.belief-arm {
  color: transparent !important;
  background: linear-gradient(180deg, #fff8db 0%, var(--text) 48%, #737873 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 18px 46px rgba(0,0,0,.5) !important;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 20%, transparent)) !important;
}

.belief-quiet {
  color: color-mix(in srgb, var(--text) 62%, transparent) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  font-size: .43em !important;
  font-weight: 900 !important;
  transform: translateY(-.1em) !important;
}

.belief-thai {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: .08em auto .02em !important;
  padding: .08em .34em .13em !important;
  border-radius: .18em !important;
  color: #06110b !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, #ffffff), #f3ead0 54%, color-mix(in srgb, var(--secondary) 86%, #ffffff)) !important;
  box-shadow:
    0 18px 0 color-mix(in srgb, var(--secondary) 42%, #06110b),
    0 26px 54px color-mix(in srgb, var(--primary) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  font-size: .78em !important;
  line-height: .84 !important;
}

.belief-line > span:nth-child(4) {
  color: color-mix(in srgb, var(--text) 62%, transparent) !important;
  font-size: .43em !important;
  transform: translateY(-.2em) !important;
}

.belief-career {
  display: block !important;
  width: 100% !important;
  margin-top: .18em !important;
  color: transparent !important;
  background: linear-gradient(180deg, #fff8dc 0%, var(--text) 44%, #6f746f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 24px 64px rgba(0,0,0,.58) !important;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--primary) 18%, transparent)) !important;
  font-size: 1.04em !important;
  line-height: .82 !important;
}

.belief-safe {
  display: grid !important;
  place-items: center !important;
  width: min(88%, 1080px) !important;
  margin: .58em auto 0 !important;
  min-height: clamp(72px, 7vw, 112px) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent) !important;
  border-radius: 999px !important;
  padding: .18em .7em .24em !important;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg) 62%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 56px rgba(0,0,0,.35) !important;
  font-size: clamp(2.2rem, 4.1vw, 5rem) !important;
  line-height: .9 !important;
}

.belief-income-cta {
  margin-top: clamp(1.4rem, 3vw, 2.3rem) !important;
  width: min(100%, 420px) !important;
}

@media (max-width: 760px) {
  .belief-section {
    padding: 2.8rem 0 4rem !important;
  }

  .belief-line {
    display: block !important;
    max-width: 430px !important;
    font-size: clamp(3.1rem, 14vw, 4.65rem) !important;
    line-height: .9 !important;
  }

  .belief-line > span {
    display: block !important;
    margin-inline: auto !important;
  }

  .belief-arm {
    display: inline-block !important;
    margin-right: .08em !important;
  }

  .belief-line > span:nth-child(2) {
    display: inline-block !important;
    margin-left: .08em !important;
    font-size: .48em !important;
    transform: translateY(-.13em) !important;
  }

  .belief-line > span:nth-child(4) {
    display: block !important;
    margin-top: .12em !important;
    font-size: .44em !important;
    transform: none !important;
  }

  .belief-quiet {
    font-size: .48em !important;
  }

  .belief-thai {
    width: fit-content !important;
    margin-top: .08em !important;
    margin-bottom: .18em !important;
    padding-inline: .24em !important;
    box-shadow:
      0 10px 0 color-mix(in srgb, var(--secondary) 42%, #06110b),
      0 18px 42px color-mix(in srgb, var(--primary) 26%, transparent),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  .belief-career {
    margin-top: .06em !important;
    font-size: .9em !important;
    line-height: .84 !important;
  }

  .belief-safe {
    width: 100% !important;
    margin-top: .36em !important;
    min-height: 64px !important;
    font-size: clamp(2.15rem, 10.8vw, 3.35rem) !important;
  }

  .belief-income-cta {
    margin-top: 1.35rem !important;
  }
}

@media (max-width: 420px) {
  .belief-section .shell {
    padding-inline: .75rem;
  }

  .belief-line {
    font-size: clamp(2.75rem, 13.2vw, 3.9rem) !important;
  }

  .belief-thai {
    padding-left: .18em !important;
    padding-right: .18em !important;
  }

  .belief-career {
    font-size: .84em !important;
  }

  .belief-safe {
    min-height: 56px !important;
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}

/* Home belief section: clean premium minimal */
.belief-section {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 96%, transparent));
}

.belief-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--secondary) 10%, transparent), transparent);
  opacity: .32;
}

.belief-statement {
  position: relative;
  z-index: 1;
  max-width: 980px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.belief-line {
  display: grid !important;
  gap: clamp(.45rem, 1vw, .75rem) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.belief-line > span {
  display: block !important;
  margin: 0 auto !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.belief-arm,
.belief-quiet,
.belief-thai,
.belief-safe {
  color: color-mix(in srgb, var(--text) 74%, transparent) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  font-size: clamp(1.05rem, 1.7vw, 1.42rem) !important;
}

.belief-arm {
  display: inline-block !important;
  color: var(--secondary) !important;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
}

.belief-line > span:nth-child(2) {
  display: inline-block !important;
}

.belief-line > span:nth-child(4) {
  font-size: clamp(1rem, 1.55vw, 1.28rem) !important;
}

.belief-career {
  color: transparent !important;
  background: linear-gradient(180deg, #fffdf2 0%, var(--text) 42%, color-mix(in srgb, var(--secondary) 72%, #5d625f) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-size: clamp(4.2rem, 9.5vw, 8.8rem) !important;
  line-height: .9 !important;
  text-shadow: 0 12px 32px rgba(0,0,0,.32) !important;
}

.belief-thai {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent) !important;
  border-radius: 999px !important;
  padding: .45rem .9rem !important;
  color: color-mix(in srgb, var(--text) 88%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 13%, transparent) !important;
}

.belief-safe {
  width: min(100%, 720px) !important;
  border-top: 1px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  padding: .85rem 0 !important;
  color: var(--text) !important;
  font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
}

.belief-income-cta {
  margin-top: clamp(1.3rem, 2.5vw, 2rem) !important;
  width: min(100%, 440px) !important;
  min-height: 56px !important;
  border-color: color-mix(in srgb, var(--accent) 66%, transparent) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 54%, #06110b), color-mix(in srgb, var(--secondary) 88%, #06110b)) !important;
  color: #06110b !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

.belief-income-cta span {
  color: #06110b !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .belief-section {
    padding: 3.4rem 0 3.6rem !important;
  }

  .belief-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .52rem !important;
    max-width: 380px !important;
  }

  .belief-arm,
  .belief-quiet,
  .belief-thai,
  .belief-line > span:nth-child(4) {
    font-size: clamp(1rem, 4.1vw, 1.18rem) !important;
  }

  .belief-arm,
  .belief-line > span:nth-child(2) {
    display: block !important;
    margin: 0 !important;
    transform: none !important;
  }

  .belief-arm {
    order: 1 !important;
    color: var(--secondary) !important;
  }

  .belief-line > span:nth-child(2) {
    order: 2 !important;
    color: color-mix(in srgb, var(--text) 82%, transparent) !important;
  }

  .belief-thai {
    order: 3 !important;
    margin: .08rem auto .1rem !important;
    padding: .42rem .8rem !important;
    font-size: clamp(.95rem, 3.8vw, 1.08rem) !important;
  }

  .belief-line > span:nth-child(4) {
    order: 4 !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--text) 70%, transparent) !important;
  }

  .belief-career {
    order: 5 !important;
    font-size: clamp(3.35rem, 16vw, 5.15rem) !important;
    line-height: .88 !important;
  }

  .belief-safe {
    order: 6 !important;
    width: min(100%, 390px) !important;
    padding: .72rem 0 !important;
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
  }

  .belief-income-cta {
    min-height: 58px !important;
    border-color: color-mix(in srgb, var(--accent) 74%, transparent) !important;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, #06110b), color-mix(in srgb, var(--secondary) 78%, #06110b)) !important;
  }

  .belief-income-cta span {
    color: #06110b !important;
    font-size: clamp(.95rem, 3.8vw, 1.08rem) !important;
  }
}

/* Mobile readability pass: questions and comparison sections */
@media (max-width: 760px) {
  body {
    overflow-wrap: break-word;
  }

  .section {
    padding-top: 3.4rem !important;
    padding-bottom: 3.4rem !important;
  }

  .section-head {
    margin-bottom: 1.45rem !important;
  }

  .section-head h2,
  .choice-copy h2,
  .class-quote h1,
  .tmc-hero h1,
  .tmc-final-card h2,
  .final-card h2,
  .home-pricing-section .section-head h2,
  .class-offer-main h2 {
    max-width: 22rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2rem, 8.6vw, 3rem) !important;
    line-height: 1.13 !important;
    font-weight: 850 !important;
    text-wrap: balance;
  }

  .section-head p,
  .lead,
  .life-helper,
  .life-step p,
  .tmc-hero-copy .lead,
  .class-difference-section .section-head p,
  .tmc-difference-section .section-head p {
    max-width: 22rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: color-mix(in srgb, var(--text) 72%, transparent) !important;
    font-size: clamp(.98rem, 4.1vw, 1.08rem) !important;
    line-height: 1.72 !important;
    font-weight: 650 !important;
  }

  .eyebrow,
  .life-step .eyebrow,
  .tmc-life-flow-section .life-step .eyebrow {
    width: fit-content !important;
    max-width: min(100%, 22rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: .5rem .78rem !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .life-flow-section,
  .tmc-life-flow-section {
    padding-top: 3rem !important;
    padding-bottom: 3.2rem !important;
  }

  .life-flow-card,
  .tmc-life-flow-section .life-flow-card {
    width: 100% !important;
    min-height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .life-step {
    max-width: 23rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .life-step .eyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .life-step h2,
  .tmc-life-flow-section .life-step h2,
  .life-pause h2 {
    max-width: 23rem !important;
    margin-top: .85rem !important;
    margin-bottom: .95rem !important;
    font-size: clamp(2rem, 8.8vw, 3rem) !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
    text-align: left !important;
    text-wrap: balance;
  }

  .life-step p,
  .life-helper,
  .tmc-life-flow-section .life-helper {
    max-width: 23rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .life-options,
  .life-options.two-options,
  .life-options.four-options,
  .life-checks {
    width: 100% !important;
    max-width: 23rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
  }

  .life-options button,
  .tmc-life-flow-section .life-options button {
    min-height: 56px !important;
    border-radius: 18px !important;
    padding: .92rem 3.2rem .92rem 1rem !important;
    color: color-mix(in srgb, var(--text) 88%, transparent) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  .life-options button::after {
    right: .85rem !important;
  }

  .life-input-row {
    max-width: 23rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .life-input-row label {
    font-size: 1rem !important;
  }

  .life-input-row input {
    min-height: 58px !important;
    font-size: 1rem !important;
  }

  .life-next,
  .life-next.primary,
  button.life-next.primary {
    width: min(100%, 23rem) !important;
    min-height: 56px !important;
    margin-top: 1rem !important;
    font-size: 1rem !important;
  }

  .life-back {
    margin-left: 0 !important;
    margin-bottom: 1rem !important;
    font-size: .88rem !important;
  }

  .class-difference-table,
  .tmc-compare-table {
    display: grid !important;
    grid-template-columns: minmax(126px, .72fr) minmax(220px, 1fr) minmax(220px, 1fr) !important;
    width: max-content !important;
    min-width: 640px !important;
    gap: 0 !important;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
    overflow: hidden !important;
  }

  .class-difference-table::before {
    display: none !important;
  }

  .class-difference-section .shell,
  .tmc-difference-section .shell {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .75rem;
  }

  .class-difference-section .shell::after,
  .tmc-difference-section .shell::after {
    content: "เลื่อนซ้าย-ขวาเพื่อดูครบ";
    display: block;
    width: fit-content;
    margin: .8rem auto 0;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    border-radius: 999px;
    padding: .4rem .7rem;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    background: color-mix(in srgb, var(--bg) 58%, transparent);
    font-size: .78rem;
    font-weight: 750;
  }

  .class-difference-table > div,
  .tmc-compare-table > div,
  .tmc-compare-table > div:nth-child(3n) {
    border: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
    border-radius: 0 !important;
    padding: .95rem 1rem !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--text) 82%, transparent) !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
    font-weight: 750 !important;
  }

  .class-difference-table > .diff-header,
  .tmc-compare-table .compare-head {
    position: static !important;
    color: var(--text) !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, #06110b), color-mix(in srgb, var(--bg) 92%, #06110b)) !important;
    font-size: .88rem !important;
    text-transform: none !important;
  }

  .tmc-compare-table .highlight {
    color: color-mix(in srgb, var(--accent) 82%, var(--text)) !important;
  }
}

@media (max-width: 420px) {
  .section-head h2,
  .choice-copy h2,
  .class-quote h1,
  .tmc-hero h1,
  .tmc-final-card h2,
  .final-card h2,
  .home-pricing-section .section-head h2,
  .class-offer-main h2,
  .life-step h2,
  .tmc-life-flow-section .life-step h2,
  .life-pause h2 {
    font-size: clamp(1.85rem, 8.2vw, 2.55rem) !important;
    line-height: 1.16 !important;
  }
}

.tmc-hero-copy .lead strong {
  display: block;
  color: var(--text);
  font-weight: 900;
}

.tmc-hero-copy .lead strong + strong {
  margin-top: .35rem;
}

.tmc-difference-section .section-head p strong {
  display: block;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-weight: 850;
}

.tmc-difference-section .section-head p strong + strong {
  margin-top: .35rem;
}

.tmc-roadmap-flow strong {
  line-height: 1.5 !important;
}

.tmc-roadmap-flow strong span {
  color: color-mix(in srgb, var(--secondary) 92%, var(--text));
  font-weight: 950;
}

.tmc-review-grid figure {
  position: relative;
}

.tmc-review-grid figure[hidden] {
  display: none !important;
}

.tmc-review-grid figure.is-revealing {
  animation: tmc-review-reveal .28s ease both;
}

.tmc-review-grid img {
  object-fit: contain !important;
  background: #050706;
}

.review-badge {
  position: absolute;
  z-index: 2;
  left: .85rem;
  top: .85rem;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 999px;
  padding: .32rem .65rem;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

.tmc-review-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

.review-toggle {
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, transparent);
  border-radius: 999px;
  padding: .75rem 1.25rem;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--primary) 10%, transparent));
  font-family: var(--font-body);
  font-weight: 900;
  cursor: pointer;
}

.review-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--primary));
}

.tmc-review-close {
  width: min(860px, 100%);
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  text-align: center;
}

.tmc-review-close p {
  margin: 0 auto 1rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: clamp(1.02rem, 1.55vw, 1.25rem);
  font-weight: 800;
  line-height: 1.7;
}

.tmc-review-close .btn {
  width: fit-content;
  margin-inline: auto;
}

@keyframes tmc-review-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .tmc-roadmap-flow h3 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.14 !important;
  }

  .tmc-roadmap-flow p,
  .tmc-roadmap-flow strong {
    font-size: .96rem !important;
    line-height: 1.55 !important;
  }

  .tmc-review-grid {
    gap: .85rem !important;
  }

  .review-badge {
    left: .65rem;
    top: .65rem;
    min-height: 28px;
    padding: .28rem .55rem;
    font-size: .72rem;
  }

  .tmc-review-close p {
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.65;
  }
}

@media (max-width: 520px) {
  .belief-section .shell {
    padding-inline: 1rem;
  }

  .belief-statement {
    max-width: 100% !important;
  }

  .belief-line {
    max-width: 340px !important;
    gap: .46rem !important;
  }

  .belief-career {
    font-size: clamp(3rem, 15.2vw, 4.1rem) !important;
  }

  .belief-safe {
    width: min(100%, 330px) !important;
    font-size: clamp(1.45rem, 7vw, 2.05rem) !important;
  }

  .belief-income-cta {
    width: min(100%, 360px) !important;
  }
}

/* Hero crop + support bubble cleanup */
body .hero-statement {
  padding-inline: clamp(1.4rem, 5vw, 5.5rem) !important;
}

body .hero-statement-title {
  width: min(100%, 1780px) !important;
  margin-inline: auto !important;
  font-size: clamp(4.5rem, 11.4vw, 14.4rem) !important;
  letter-spacing: -.015em !important;
  transform: scaleX(.94);
  transform-origin: center;
}

body .hero-choice-actions {
  position: relative;
  z-index: 3;
}

body .line-float.support-float {
  right: clamp(1rem, 2vw, 1.6rem) !important;
  top: auto !important;
  bottom: clamp(1rem, 2vw, 1.35rem) !important;
  z-index: 80 !important;
  display: inline-flex !important;
  min-width: 58px !important;
  min-height: 58px !important;
  width: auto !important;
  height: 58px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  padding: .68rem .9rem .68rem .72rem !important;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, rgba(255,255,255,.12)) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 28% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, #06110b), color-mix(in srgb, var(--bg) 92%, #000)) !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,.44),
    0 0 30px color-mix(in srgb, var(--primary) 22%, transparent),
    inset 0 1px rgba(255,255,255,.08) !important;
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-orientation: mixed !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

body .line-float.support-float:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.52),
    0 0 42px color-mix(in srgb, var(--primary) 32%, transparent),
    inset 0 1px rgba(255,255,255,.1) !important;
}

.support-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 999px;
  color: #05110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: 1.15rem;
  font-weight: 950;
}

.support-label {
  padding-right: .15rem;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.support-bubble {
  position: absolute;
  right: calc(100% + .7rem);
  bottom: .42rem;
  width: max-content;
  max-width: min(270px, calc(100vw - 6.5rem));
  padding: .7rem .86rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 32%, transparent);
  border-radius: 16px 16px 4px 16px;
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, #000), color-mix(in srgb, var(--bg) 86%, #000));
  box-shadow: 0 16px 42px rgba(0,0,0,.42);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px) translateY(4px);
  transition: opacity .32s ease, transform .32s ease;
}

.support-bubble.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

@media (max-width: 760px) {
  body .hero-statement {
    padding-inline: 1.1rem !important;
  }

  body .hero-statement-title {
    width: min(100%, 460px) !important;
    font-size: clamp(4.15rem, 18.8vw, 6.4rem) !important;
    line-height: .86 !important;
    white-space: normal !important;
    transform: none !important;
  }

  body .hero-statement-title span {
    display: inline !important;
  }

  body .line-float.support-float {
    right: .85rem !important;
    bottom: .85rem !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: .62rem .7rem !important;
  }

  .support-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .support-label {
    display: none;
  }

  .support-bubble {
    right: 0;
    bottom: calc(100% + .62rem);
    max-width: min(255px, calc(100vw - 2rem));
    border-radius: 16px 16px 4px 16px;
  }
}

/* About ecosystem page refresh */
.about-card-category {
  width: fit-content;
  margin: -.35rem 0 .9rem !important;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 999px;
  padding: .32rem .72rem;
  color: var(--secondary) !important;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.1 !important;
}

.about-ecosystem-card small {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 850;
}

.about-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .65fr) minmax(220px, .65fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.about-team-copy,
.about-team-person {
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--bg) 86%, transparent));
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
}

.about-team-copy {
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.about-team-copy h3 {
  margin: .4rem 0 1rem;
  color: var(--text);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
}

.about-team-copy p:not(.eyebrow) {
  max-width: 46rem;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  font-weight: 750;
}

.about-team-person {
  overflow: hidden;
}

.about-team-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 78%, #000);
}

.about-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.about-team-person > div:last-child {
  padding: 1rem 1.15rem 1.2rem;
}

.about-team-person strong {
  display: block;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1.1;
}

.about-team-person span {
  display: block;
  margin-top: .35rem;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  font-weight: 750;
}

.about-team-person.is-placeholder .about-team-photo::before {
  content: "";
  position: absolute;
  inset: 28%;
  border: 1px dashed color-mix(in srgb, var(--secondary) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.about-belief-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.about-belief-grid article {
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 28px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--primary) 9%, transparent));
  box-shadow: 0 22px 64px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
}

.about-belief-grid span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-weight: 950;
}

.about-belief-grid p {
  margin: 1.8rem 0 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 850;
  line-height: 1.28;
}

.about-disclaimer {
  padding-top: 0 !important;
}

.about-disclaimer p {
  max-width: 820px;
  margin-inline: auto;
  color: color-mix(in srgb, var(--text) 48%, transparent) !important;
  font-size: .9rem !important;
  text-align: center;
}

@media (max-width: 980px) {
  .about-team-grid,
  .about-belief-grid {
    grid-template-columns: 1fr;
  }

  .about-brand-chip:nth-child(4) {
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 700px) {
  .about-cinematic-copy h1,
  .about-final-card h2,
  .about-team-copy h3 {
    line-height: 1.14 !important;
  }

  .about-belief-grid article {
    min-height: auto;
  }
}

/* About ecosystem: 5-card layout + Arm story */
@media (min-width: 1180px) {
  .about-logo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(.85rem, 1.2vw, 1.15rem) !important;
  }

  .about-logo-grid .about-ecosystem-card {
    min-height: 560px;
    padding: clamp(1.05rem, 1.45vw, 1.45rem) !important;
  }

  .about-logo-grid .about-ecosystem-card h3 {
    font-size: clamp(1.55rem, 2vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  .about-logo-grid .about-ecosystem-card p,
  .about-logo-grid .about-ecosystem-card li {
    font-size: .98rem !important;
  }
}

@media (min-width: 760px) and (max-width: 1179px) {
  .about-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.about-card-logo.nwl-logo-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 38%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 58%),
    linear-gradient(135deg, #020604, color-mix(in srgb, var(--surface) 92%, #000));
}

.about-card-logo.nwl-logo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0,0,0,.38)),
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 46%);
  pointer-events: none;
}

.about-card-logo.nwl-logo-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  padding: 0;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.42));
  transform: none;
}

.about-team-link {
  display: inline-flex;
  margin-top: .9rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 38%, transparent);
  border-radius: 999px;
  padding: .58rem .88rem;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-size: .9rem;
  font-weight: 950;
}

.arm-story-page {
  background: var(--bg);
}

.arm-story-hero {
  min-height: 92vh;
  display: grid;
  align-items: center;
  padding-top: clamp(7rem, 12vh, 9rem) !important;
}

.arm-story-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.arm-story-copy h1 {
  max-width: 820px;
  margin: .7rem 0 1rem;
  color: var(--text);
  font-size: clamp(3.1rem, 7vw, 7.2rem);
  line-height: .92;
}

.arm-story-copy .lead {
  max-width: 760px;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  font-weight: 750;
  line-height: 1.7;
}

.arm-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.7rem;
}

.arm-story-portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 34px;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--surface) 80%, #000);
  box-shadow: 0 30px 110px rgba(0,0,0,.36), 0 0 72px color-mix(in srgb, var(--primary) 20%, transparent);
}

.arm-story-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0,0,0,.62)),
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 32%);
}

.arm-story-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arm-story-statement {
  max-width: 1060px;
  margin: 0 auto;
  border-block: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  padding: clamp(2rem, 5vw, 4.2rem) 0;
  text-align: center;
}

.arm-story-statement span {
  display: block;
  margin-bottom: 1rem;
  color: var(--secondary);
  font-weight: 950;
}

.arm-story-statement strong {
  display: block;
  color: var(--text);
  font-size: clamp(1.6rem, 3.8vw, 3.8rem);
  line-height: 1.15;
}

.arm-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.arm-story-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
}

.arm-story-card.is-featured,
.arm-story-card.is-wide {
  grid-column: span 2;
}

.arm-story-card img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  opacity: .9;
}

.arm-story-card > div {
  padding: clamp(1.15rem, 2.2vw, 1.65rem);
}

.arm-story-card span {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #06110b;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  font-weight: 950;
}

.arm-story-card h3 {
  margin: 1rem 0 .65rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  line-height: 1.12;
}

.arm-story-card p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 66%, transparent);
  font-weight: 750;
  line-height: 1.62;
}

.arm-story-final-box {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--secondary) 28%, transparent);
  border-radius: 34px;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.arm-story-final-box h2 {
  margin: .5rem auto 1rem;
  max-width: 820px;
  color: var(--text);
  font-size: clamp(2.1rem, 4.8vw, 5rem);
  line-height: 1.02;
}

.arm-story-final-box p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 auto 1.4rem;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  font-weight: 750;
  line-height: 1.7;
}

.arm-journey-timeline {
  position: relative;
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.arm-journey-timeline::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--secondary) 35%, transparent), color-mix(in srgb, var(--primary) 28%, transparent), transparent);
  opacity: .65;
}

.arm-journey-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.arm-journey-row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--secondary);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--secondary) 13%, transparent), 0 0 34px color-mix(in srgb, var(--secondary) 40%, transparent);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.arm-journey-row.is-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
}

.arm-journey-row.is-reverse .arm-journey-media {
  order: 1;
}

.arm-journey-row.is-reverse .arm-journey-copy {
  order: 2;
}

.arm-journey-media {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 48vw, 660px);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: clamp(26px, 3vw, 42px);
  background: color-mix(in srgb, var(--surface) 86%, #000);
  box-shadow: 0 30px 90px rgba(0,0,0,.34), 0 0 68px color-mix(in srgb, var(--primary) 14%, transparent);
}

.arm-journey-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0,0,0,.36)),
    radial-gradient(circle at 45% 10%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 38%);
  pointer-events: none;
}

.arm-journey-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  opacity: .92;
}

.arm-journey-copy {
  max-width: 680px;
  padding-block: clamp(1rem, 3vw, 2.5rem);
}

.arm-journey-number {
  display: block;
  margin-bottom: 1rem;
  color: color-mix(in srgb, var(--secondary) 76%, transparent);
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 950;
  line-height: .72;
  letter-spacing: -.04em;
  opacity: .42;
}

.arm-journey-eyebrow {
  display: inline-flex;
  margin: 0 0 .9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius: 999px;
  padding: .4rem .86rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: .9rem;
  font-weight: 950;
}

.arm-journey-copy h3 {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: clamp(2.1rem, 4.2vw, 4.8rem);
  line-height: 1.02;
}

.arm-journey-copy p:not(.arm-journey-eyebrow) {
  margin: 0 0 1rem;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  font-weight: 740;
  line-height: 1.75;
}

.arm-journey-copy p:last-child {
  margin-top: 1.35rem;
  border-left: 3px solid var(--secondary);
  padding: .85rem 0 .85rem 1rem;
  color: var(--text) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 9%, transparent), transparent);
  font-weight: 900 !important;
}

@media (max-width: 980px) {
  .arm-story-hero-grid,
  .arm-story-grid {
    grid-template-columns: 1fr;
  }

  .arm-story-card.is-featured,
  .arm-story-card.is-wide {
    grid-column: auto;
  }

  .arm-story-portrait {
    max-width: 520px;
    margin-inline: auto;
  }

  .arm-journey-timeline {
    gap: 3.2rem;
  }

  .arm-journey-timeline::before,
  .arm-journey-row::before {
    display: none;
  }

  .arm-journey-row,
  .arm-journey-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .arm-journey-row.is-reverse .arm-journey-media,
  .arm-journey-row.is-reverse .arm-journey-copy {
    order: initial;
  }

  .arm-journey-copy {
    max-width: none;
    padding-block: 0;
  }

  .arm-journey-media {
    min-height: min(118vw, 560px);
  }
}

@media (max-width: 700px) {
  .about-card-logo.nwl-logo-card img {
    width: 100%;
    transform: none;
  }

  .arm-story-hero {
    min-height: auto;
    padding-top: 7rem !important;
  }

  .arm-story-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4.3rem);
    line-height: .98;
  }

  .arm-story-actions .btn {
    width: 100%;
  }

  .arm-story-card img {
    height: 270px;
  }

  .arm-journey-timeline {
    margin-top: 2.2rem;
  }

  .arm-journey-number {
    margin-bottom: .7rem;
    font-size: clamp(3.2rem, 18vw, 5.2rem);
  }

  .arm-journey-copy h3 {
    font-size: clamp(2rem, 10vw, 3.1rem);
    line-height: 1.08;
  }

  .arm-journey-copy p:not(.arm-journey-eyebrow) {
    font-size: 1rem;
    line-height: 1.68;
  }
}

/* Final mobile nav polish before production deploy */
@media (max-width: 700px) {
  body[data-theme] .topbar,
  .topbar {
    inset: .65rem .75rem auto .75rem !important;
    display: flex !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    align-items: center !important;
    gap: .45rem !important;
    overflow: visible !important;
    border-radius: 999px !important;
    padding: .45rem .52rem !important;
  }

  body[data-theme] .brand,
  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: .42rem !important;
  }

  body[data-theme] .brand .brand-logo,
  .brand .brand-logo {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  body[data-theme] .brand b,
  .brand b {
    display: block !important;
    min-width: 0 !important;
    max-width: 118px !important;
    overflow: hidden !important;
    color: var(--text) !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-theme] .language-switcher,
  .language-switcher {
    flex: 0 0 78px !important;
    width: 78px !important;
    height: 38px !important;
    margin-left: auto !important;
  }

  body[data-theme] .language-switcher span,
  .language-switcher span {
    font-size: .72rem !important;
  }

  body[data-theme] .nav-cta,
  .nav-cta {
    display: none !important;
  }

  body[data-theme] .menu-toggle,
  .menu-toggle {
    position: static !important;
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  body[data-theme] .menu-toggle span,
  .menu-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  body[data-theme] .topbar.menu-open .menu-toggle span:nth-child(1),
  .topbar.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body[data-theme] .topbar.menu-open .menu-toggle span:nth-child(2),
  .topbar.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body[data-theme] .topbar.menu-open .menu-toggle span:nth-child(3),
  .topbar.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

@media (max-width: 390px) {
  body[data-theme] .topbar,
  .topbar {
    inset-inline: .45rem !important;
    gap: .35rem !important;
    padding-inline: .42rem !important;
  }

  body[data-theme] .brand .brand-logo,
  .brand .brand-logo {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body[data-theme] .brand b,
  .brand b {
    max-width: 92px !important;
    font-size: .84rem !important;
  }

  body[data-theme] .language-switcher,
  .language-switcher {
    flex-basis: 68px !important;
    width: 68px !important;
    height: 34px !important;
  }

  body[data-theme] .menu-toggle,
  .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}

/* Connext brand item in the About brand list. */
.about-brand-chip.is-connext {
  margin-left: clamp(0rem, 9vw, 5.8rem);
  transform: rotateY(-1deg) translateY(12px);
}
@media (max-width: 760px) {
  .about-brand-chip.is-connext { margin-left: 0; transform: none; }
}

/* Mobile viewport stability: prevent the page from feeling like it auto-zooms while browser chrome changes size. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .hero-statement,
  .class-story-hero,
  .tmc-hero,
  .about-hero,
  .about-cinematic-hero,
  .arm-story-hero {
    min-height: 100dvh !important;
    overflow-x: clip !important;
  }

  .hero-statement::before,
  .about-hero-bg,
  .about-hero-bg img {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .hero-statement-title,
  .hero-statement-title span,
  .class-quote h1 span,
  .tmc-hero-copy h1 span,
  .tmc-hero-copy h1 em,
  .hero-choice,
  .hero-choice::after {
    animation: none !important;
    transition-property: background-color, border-color, color, box-shadow !important;
  }

  .hero-choice,
  .hero-choice:hover,
  .hero-choice:active,
  .class-final-choice .hero-choice,
  .class-final-choice .hero-choice.income {
    transform: none !important;
  }
}

/* Arm's method — cinematic bridge after the second-career statement. */
.arm-method-section {
  position: relative;
  isolation: isolate;
  min-height: clamp(700px, 76vw, 920px);
  overflow: hidden;
  background: #050706;
}

.arm-method-media,
.arm-method-media::after {
  position: absolute;
  inset: 0;
}

.arm-method-media {
  z-index: -2;
}

.arm-method-media img {
  display: block;
  width: 74%;
  height: 100%;
  margin-left: auto;
  object-fit: cover;
  object-position: 70% center;
  filter: saturate(.68) contrast(1.08) brightness(.64);
}

.arm-method-media::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 5, 4, .98) 0%, rgba(3, 5, 4, .9) 37%, rgba(3, 5, 4, .52) 66%, rgba(3, 5, 4, .42) 100%),
    linear-gradient(180deg, rgba(3, 5, 4, .62) 0%, transparent 28%, rgba(3, 5, 4, .84) 100%);
}

.arm-method-shell {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: inherit;
  align-items: center;
  margin-inline: 0;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 3.5vw, 4.5rem);
}

.arm-method-copy {
  width: min(1220px, 72vw);
}

.arm-method-kicker {
  display: inline-flex;
  margin: 0 0 1.35rem;
  border: 1px solid rgba(200, 162, 74, .38);
  border-radius: 999px;
  padding: .48rem .9rem;
  color: #d8c58f;
  background: rgba(4, 7, 5, .62);
  font-size: clamp(.72rem, 1vw, .84rem);
  font-weight: 850;
  letter-spacing: .14em;
}

.arm-method-copy h2 {
  max-width: none;
  margin: 0;
  color: #f6f3eb;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(2.7rem, 4vw, 4.8rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.arm-method-copy h2 span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(105deg, #a98742, #ead493 48%, #b99043);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 34px rgba(200, 162, 74, .18);
}

.arm-method-copy h2 em {
  display: block;
  margin-block: .12em;
  color: rgba(246, 243, 235, .62);
  font-size: .62em;
  font-style: normal;
}

.arm-method-lead {
  max-width: 900px;
  margin: clamp(1.5rem, 3vw, 2.3rem) 0 0;
  color: rgba(246, 243, 235, .68);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 560;
  line-height: 1.75;
}

.arm-method-facts {
  display: grid;
  max-width: 940px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.5rem);
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
}

.arm-method-facts div {
  min-width: 0;
}

.arm-method-facts dt {
  color: #d7b66c;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 24px rgba(200, 162, 74, .24);
}

.arm-method-facts dd {
  margin: .55rem 0 0;
  color: rgba(246, 243, 235, .58);
  font-size: clamp(.78rem, 1vw, .9rem);
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .arm-method-section {
    min-height: 840px;
  }

  .arm-method-media img {
    width: 100%;
    margin-left: 0;
    object-position: 66% center;
    filter: saturate(.62) contrast(1.08) brightness(.5);
  }

  .arm-method-media::after {
    background:
      linear-gradient(180deg, rgba(3, 5, 4, .5) 0%, rgba(3, 5, 4, .76) 38%, rgba(3, 5, 4, .98) 100%),
      linear-gradient(90deg, rgba(3, 5, 4, .88), rgba(3, 5, 4, .38));
  }

  .arm-method-shell {
    align-items: flex-end;
    padding: 5.5rem 1rem 3.5rem;
  }

  .arm-method-copy {
    width: 100%;
  }

  .arm-method-kicker {
    margin-bottom: 1rem;
    font-size: .68rem;
    letter-spacing: .09em;
  }

  .arm-method-copy h2 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 10.6vw, 3.45rem);
    line-height: 1.02;
  }

  .arm-method-lead {
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.65;
  }

  .arm-method-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem .8rem;
    margin-top: 1.8rem;
  }

  .arm-method-facts dt {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .arm-method-facts dd {
    font-size: .78rem;
  }
}

@media (max-width: 390px) {
  .arm-method-section {
    min-height: 880px;
  }

  .arm-method-copy h2 {
    font-size: clamp(2rem, 10.2vw, 2.8rem);
  }
}

/* Trading effort checklist — light contrast section after Arm's method. */
.trader-effort-section {
  position: relative;
  padding: clamp(5rem, 8vw, 8.5rem) 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 30rem),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 26rem),
    linear-gradient(180deg, #06110b 0%, #07140d 48%, #030705 100%);
}

.trader-effort-shell {
  width: min(1120px, calc(100% - 2rem));
}

.trader-effort-head {
  max-width: 850px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.trader-effort-head > p,
body[data-theme] .trader-effort-head > p {
  margin: 0 0 1rem;
  color: #7ed39d !important;
  font-size: clamp(.78rem, 1vw, .9rem);
  font-weight: 850;
  letter-spacing: .14em;
}

.trader-effort-head h2,
body[data-theme] .trader-effort-head h2 {
  margin: 0;
  color: var(--text) !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(3rem, 5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.trader-effort-head strong,
body[data-theme] .trader-effort-head strong {
  display: block;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--muted) !important;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  font-weight: 550;
  line-height: 1.55;
}

.trader-effort-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.trader-effort-grid article,
body[data-theme] .trader-effort-grid article {
  display: grid;
  min-height: 152px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--secondary) 12%) !important;
  border-radius: 16px;
  padding: 1.55rem 1.45rem;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 12rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 18px 48px rgba(0, 0, 0, .22) !important;
}

.trader-effort-grid article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: #d8c58f;
  background: color-mix(in srgb, var(--primary) 34%, #06110b);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary) 28%, transparent);
  font-family: Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}

.trader-effort-grid h3,
body[data-theme] .trader-effort-grid h3 {
  margin: 0 0 .5rem;
  color: var(--text) !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  font-weight: 800;
  line-height: 1.35;
}

.trader-effort-grid p,
body[data-theme] .trader-effort-grid p {
  margin: 0;
  color: var(--muted) !important;
  font-size: clamp(.92rem, 1.05vw, 1rem);
  font-weight: 500;
  line-height: 1.62;
}

@media (max-width: 900px) {
  .trader-effort-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .trader-effort-section {
    padding: 4rem 0;
  }

  .trader-effort-head {
    margin-bottom: 2.5rem;
  }

  .trader-effort-head h2 {
    font-size: clamp(2.5rem, 12vw, 3.65rem);
  }

  .trader-effort-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .trader-effort-grid article {
    min-height: 0;
    padding: 1.25rem 1.1rem;
  }
}

/* Trading reframe — closes the effort checklist with Arm's core system message. */
.trader-reframe-section {
  position: relative;
  padding: clamp(4.5rem, 8vw, 8rem) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 32rem),
    linear-gradient(180deg, #030705, #080b08 52%, #030504);
}

.trader-reframe-card,
body[data-theme] .trader-reframe-card {
  position: relative;
  isolation: isolate;
  width: min(820px, 100%);
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--secondary) 72%, transparent);
  border-radius: clamp(22px, 3vw, 30px);
  padding: clamp(2.6rem, 5vw, 4.5rem) clamp(1.35rem, 5vw, 4.8rem);
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 20rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 95%, #000), color-mix(in srgb, var(--bg) 92%, #000)) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .42),
    0 0 42px color-mix(in srgb, var(--secondary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  text-align: center;
}

.trader-reframe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(247, 241, 225, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 241, 225, .014) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.trader-reframe-card h2,
body[data-theme] .trader-reframe-card h2 {
  margin: 0;
  color: var(--text) !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.7rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.trader-reframe-card h2 span {
  color: transparent;
  background: linear-gradient(105deg, #a98742, #ead493 50%, #b99043);
  -webkit-background-clip: text;
  background-clip: text;
}

.trader-reframe-card p,
body[data-theme] .trader-reframe-card p {
  max-width: 650px;
  margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
  color: var(--muted) !important;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 560;
  line-height: 1.7;
}

.trader-reframe-stat,
body[data-theme] .trader-reframe-stat {
  display: inline-block;
  margin-right: .14em;
  color: #d8c58f !important;
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  font-size: 1.28em;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 24px rgba(200, 162, 74, .28);
}

@media (max-width: 620px) {
  .trader-reframe-section {
    padding: 3.5rem 0;
  }

  .trader-reframe-card,
  body[data-theme] .trader-reframe-card {
    border-radius: 20px;
    padding: 2.5rem 1.1rem;
  }

  .trader-reframe-card h2,
  body[data-theme] .trader-reframe-card h2 {
    font-size: clamp(1.75rem, 8.6vw, 2.65rem);
    line-height: 1.28;
  }

  .trader-reframe-card p,
  body[data-theme] .trader-reframe-card p {
    font-size: .96rem;
  }
}