:root {
  --cream: #fffbf5;
  --cream-deep: #fff5eb;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 8px 18px rgb(146 64 14 / 0.12);
  --shadow-lg: 0 18px 34px rgb(146 64 14 / 0.16);
  font-family: "Poppins", Arial, sans-serif;
  color: var(--amber-900);
  background: var(--cream);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--cream);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

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

p,
h1,
h2,
h3 {
  margin-top: 0;
}

.fade-in {
  animation: fadeIn 0.55s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: linear-gradient(to bottom, #fffbf5, #fff8ee, #fff4e3);
}

.landing-card {
  width: min(100%, 512px);
  text-align: center;
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 8px 20px;
  border: 1px solid var(--orange-200);
  border-radius: 999px;
  background: white;
  box-shadow: var(--shadow-sm);
  color: var(--orange-600);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-400);
}

.cover-wrap {
  width: min(100%, 320px);
  margin: 0 auto 28px;
}

.landing-cover {
  display: block;
  width: 100%;
  height: auto;
}

.eyebrow-pill,
.section-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: 1px solid var(--amber-200);
  border-radius: 999px;
  background: var(--amber-100);
  color: var(--amber-700);
  font-size: 12px;
  font-weight: 700;
}

.landing-card h1 {
  margin: 20px 0 12px;
  color: #7c2d12;
  font-size: clamp(36px, 9.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.landing-card h1 span {
  color: var(--orange-500);
}

.landing-lead {
  margin-bottom: 12px;
  color: var(--amber-800);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.landing-copy {
  max-width: 390px;
  margin: 0 auto 24px;
  color: var(--amber-700);
  font-size: 14px;
  line-height: 1.65;
}

.primary-button,
.cta-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--orange-500);
  color: white;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: 0.2s ease;
}

.primary-button:hover,
.cta-button:hover {
  background: var(--orange-600);
  box-shadow: var(--shadow-lg);
}

.primary-button:active,
.cta-button:active {
  transform: scale(0.98);
}

.landing-cta {
  width: 100%;
  padding: 17px 20px;
  font-size: 17px;
  letter-spacing: 0.015em;
}

.microcopy {
  margin: 10px 0 20px;
  color: var(--amber-600);
  font-size: 12px;
  font-weight: 600;
}

.family-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.family-proof p {
  margin: 0 0 0 7px;
  color: var(--amber-700);
  font-size: 11px;
  font-weight: 600;
}

/* The stack must never shrink: it is made of fixed-size photos, so a squeezed
   container just pushes the last avatars on top of the proof line at 320 px. */
.avatar-stack {
  display: flex;
  flex-shrink: 0;
}

.avatar-stack img {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--amber-100);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

.avatar-stack img:first-child {
  margin-left: 0;
}

.benefit-panel {
  padding: 20px;
  border: 1px solid var(--orange-100);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.panel-title {
  margin-bottom: 16px;
  color: var(--amber-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  color: var(--amber-900);
  font-size: 12px;
}

.benefit-grid span {
  display: flex;
  gap: 7px;
}

.benefit-grid span::first-letter {
  color: var(--orange-500);
}

/* Quiz */
.quiz-shell {
  min-height: 100vh;
  padding: 26px 16px calc(100px + env(safe-area-inset-bottom));
  background: var(--cream);
}

.progress-track {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: var(--orange-100);
}

.progress-bar {
  width: 10%;
  height: 100%;
  background: var(--orange-400);
  transition: width 0.65s ease;
}

.quiz-stage {
  width: min(100%, 512px);
  margin: 0 auto;
}

.quiz-heading {
  margin: 0 0 4px;
  color: var(--amber-800);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.quiz-subhead,
.quiz-proof-copy {
  margin: 0 0 20px;
  color: var(--amber-600);
  font-size: 13px;
  text-align: center;
}

.quiz-proof-copy {
  margin-bottom: 3px;
  color: var(--orange-500);
  font-weight: 800;
}

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

.choice-card,
.option-row {
  border: 2px solid var(--gray-200);
  background: white;
  cursor: pointer;
  transition: 0.18s ease;
}

.choice-card:hover,
.option-row:hover {
  border-color: var(--orange-300);
}

.choice-card.selected,
.option-row.selected {
  border-color: var(--orange-400);
  background: var(--orange-50);
  box-shadow: var(--shadow-sm);
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  color: var(--amber-800);
  font-size: 16px;
  font-weight: 800;
}

.choice-card img {
  width: 100%;
  height: 144px;
  border-radius: 12px;
  object-fit: cover;
}

.age-card {
  min-height: 132px;
  justify-content: center;
  gap: 8px;
}

.age-card .emoji {
  font-size: 40px;
}

.name-figure {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--orange-100), var(--amber-50));
  font-size: 50px;
}

.name-input {
  width: 100%;
  margin-top: 18px;
  padding: 15px 18px;
  border: 2px solid var(--orange-200);
  border-radius: 16px;
  outline: 0;
  background: white;
  color: var(--amber-900);
  font-size: 17px;
}

.name-input:focus {
  border-color: var(--orange-400);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-row {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  color: var(--amber-800);
  text-align: left;
}

.option-dot {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 2px solid var(--amber-300);
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-weight: 800;
}

.selected .option-dot {
  border-color: var(--orange-400);
  background: var(--orange-400);
}

.option-emoji {
  width: 28px;
  flex: 0 0 28px;
  font-size: 20px;
  text-align: center;
}

.option-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.quiz-nav {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--orange-100);
  background: rgba(255, 251, 245, 0.97);
  backdrop-filter: blur(8px);
}

.quiz-nav-inner {
  display: flex;
  width: min(100%, 512px);
  gap: 12px;
  margin: 0 auto;
}

.quiz-back,
.quiz-next {
  min-height: 56px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
}

.quiz-back {
  width: 56px;
  flex: 0 0 56px;
  border: 2px solid var(--orange-200);
  background: transparent;
  color: var(--orange-400);
  font-size: 21px;
}

.quiz-next {
  flex: 1;
  background: var(--orange-500);
  color: white;
  box-shadow: var(--shadow-md);
  font-size: 17px;
}

.quiz-next:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
  cursor: not-allowed;
}

.interstitial-shell,
.build-shell {
  display: flex;
  min-height: calc(100vh - 52px);
  align-items: center;
  justify-content: center;
}

.interstitial-card,
.build-card {
  width: min(100%, 448px);
  padding: 24px;
  border: 1px solid var(--orange-100);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow-lg);
}

.interstitial-card h2,
.build-card h2 {
  margin-bottom: 12px;
  color: var(--amber-800);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.warning-icon,
.science-icon {
  display: block;
  margin-bottom: 8px;
  font-size: 34px;
  text-align: center;
}

.diagnosis-intro {
  margin-bottom: 18px;
  color: var(--amber-700);
  font-size: 13px;
  text-align: center;
}

.metric-row {
  margin-bottom: 16px;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
}

.metric-top strong {
  color: var(--red-500);
}

.metric-track,
.build-track {
  overflow: hidden;
  height: 11px;
  border-radius: 999px;
  background: var(--gray-100);
}

.metric-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, var(--green-500), #f59e0b, var(--red-500));
}

/* Diagnosis screen. The card used to land in a single burst: every bar already
   at its final width and every row visible at once. Now each row arrives on its
   own, its bar grows to the mark, and the question and answers close the
   sequence. `--i` (row index) and `--j` (answer index) come from the markup, so
   the timing does not depend on sibling position. */
/* `--row-delay` is deliberately not a shared custom property: it would be
   substituted on .diagnosis-card, where --i is unset, and every row would
   inherit the same constant. Each rule resolves --i on its own element. */
/* Anchored to the top: a centered card would drift upward as it grows and drag
   the rows the reader is already looking at. */
.diagnosis-shell {
  align-items: flex-start;
}

.diagnosis-card {
  --row-base: 0.06s;
  --row-step: 0.34s;
}

.diagnosis-card .metric-row {
  animation: diagnosisReveal 0.42s ease both;
  animation-delay: calc(var(--row-base) + var(--i, 0) * var(--row-step));
}

.diagnosis-card .metric-fill {
  animation: metricFill 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--row-base) + var(--i, 0) * var(--row-step) + 0.14s);
}

.diagnosis-card .metric-top strong {
  animation: metricValueIn 0.26s ease both;
  animation-delay: calc(var(--row-base) + var(--i, 0) * var(--row-step) + 0.5s);
}

.diagnosis-card .interstitial-question {
  animation: diagnosisReveal 0.42s ease both;
  animation-delay: 1.5s;
}

.diagnosis-card .interstitial-choice {
  animation: diagnosisReveal 0.42s ease both;
  animation-delay: calc(1.66s + var(--j, 0) * 0.11s);
}

/* The card grows as each row lands instead of reserving the full height and
   showing a blank slab while the sequence plays. `display` and `visibility` are
   discrete here: before its delay the row takes no space and cannot be clicked,
   so nobody can answer blind. Browsers that ignore `display` in keyframes fall
   back to the reserved-height version, which still reveals in sequence. */
@keyframes diagnosisReveal {
  from {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* The target width stays inline on the element, so the implicit `to` keyframe
   is whatever percentage that row reports. */
@keyframes metricFill {
  from {
    width: 0;
  }
}

@keyframes metricValueIn {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diagnosis-card .metric-row,
  .diagnosis-card .metric-fill,
  .diagnosis-card .metric-top strong,
  .diagnosis-card .interstitial-question,
  .diagnosis-card .interstitial-choice {
    animation: none;
  }
}

.interstitial-question {
  margin: 22px 0 12px;
  color: var(--amber-800);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.interstitial-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.interstitial-choice {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 2px solid var(--orange-100);
  border-radius: 16px;
  background: white;
  color: var(--amber-800);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.reassurance {
  padding: 18px;
}

.promise-box,
.science-box,
.personalization-list,
.success-box {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 16px;
}

.promise-box {
  border: 1px solid var(--green-200);
  background: var(--green-50);
  color: var(--green-700);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.goal-box {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--amber-200);
  border-radius: 16px;
  background: var(--amber-50);
}

.goal-box > strong {
  display: block;
  margin-bottom: 9px;
  color: var(--amber-800);
  font-size: 13px;
  text-align: center;
}

.goal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--amber-100);
  border-radius: 12px;
  background: white;
  color: var(--amber-900);
  font-size: 12px;
  font-weight: 600;
}

.check-circle {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-400);
  color: white;
  font-size: 11px;
}

.science-card {
  padding: 0;
  overflow: hidden;
}

.science-card header {
  padding: 20px 20px 8px;
  text-align: center;
}

.science-card .overline {
  margin-bottom: 4px;
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.science-card img {
  width: 100%;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.science-card .science-content {
  padding: 18px 20px 20px;
}

.science-box {
  border: 1px solid var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-900);
  font-size: 13px;
  line-height: 1.65;
}

.science-note {
  margin: 10px 0 0;
  color: var(--blue-500);
  font-size: 11px;
  font-style: italic;
}

.build-visual {
  position: relative;
  display: grid;
  height: 230px;
  place-items: center;
  margin-bottom: 12px;
}

.build-cover {
  position: relative;
  z-index: 1;
  width: 144px;
  height: 176px;
  object-fit: contain;
}

/* Printable pages flying into the planner while it is being personalized.
   The easing is front-loaded so each page hovers in the open space around the
   cover and only then accelerates in, fading out before it reaches the title. */
.build-sheets {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.build-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 38px;
  margin: -19px 0 0 -15px;
  border: 1px solid var(--orange-200);
  border-radius: 4px;
  opacity: 0;
  background:
    linear-gradient(var(--orange-200), var(--orange-200)) 6px 8px / 17px 2px no-repeat,
    linear-gradient(var(--orange-100), var(--orange-100)) 6px 14px / 17px 2px no-repeat,
    linear-gradient(var(--orange-100), var(--orange-100)) 6px 20px / 11px 2px no-repeat,
    linear-gradient(var(--orange-100), var(--orange-100)) 6px 26px / 14px 2px no-repeat,
    var(--white);
  box-shadow: 0 5px 12px rgb(146 64 14 / 0.16);
  animation: sheetIntoPlanner 2.6s cubic-bezier(0.5, 0, 0.78, 0.24) infinite;
}

.build-sheet:nth-child(1) {
  --sheet-x: -96px;
  --sheet-y: -72px;
  --sheet-r: -24deg;
  animation-delay: 0s;
}

.build-sheet:nth-child(2) {
  --sheet-x: 96px;
  --sheet-y: -60px;
  --sheet-r: 26deg;
  animation-delay: 0.43s;
}

.build-sheet:nth-child(3) {
  --sheet-x: -88px;
  --sheet-y: 68px;
  --sheet-r: 19deg;
  animation-delay: 0.87s;
}

.build-sheet:nth-child(4) {
  --sheet-x: 90px;
  --sheet-y: 76px;
  --sheet-r: -17deg;
  animation-delay: 1.3s;
}

.build-sheet:nth-child(5) {
  --sheet-x: -12px;
  --sheet-y: -94px;
  --sheet-r: 11deg;
  animation-delay: 1.73s;
}

.build-sheet:nth-child(6) {
  --sheet-x: 66px;
  --sheet-y: -92px;
  --sheet-r: -32deg;
  animation-delay: 2.17s;
}

@keyframes sheetIntoPlanner {
  0% {
    opacity: 0;
    transform: translate(var(--sheet-x), var(--sheet-y)) rotate(var(--sheet-r)) scale(1);
  }

  12% {
    opacity: 1;
  }

  76% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(0, -10px) rotate(0deg) scale(0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-sheet {
    animation: none;
  }
}

.build-progress-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--amber-700);
  font-size: 11px;
  font-weight: 600;
}

.build-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, var(--orange-500), #f59e0b);
  transition: width 0.1s linear;
}

.personalization-list {
  margin-top: 14px;
  border: 1px solid var(--amber-100);
  background: var(--amber-50);
}

.personalization-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--amber-700);
  font-size: 11px;
}

.build-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  color: var(--amber-800);
  font-size: 10px;
  font-weight: 600;
}

.build-item span:last-child {
  color: var(--green-500);
}

.success-box {
  margin-top: 14px;
  border: 1px solid var(--green-200);
  background: var(--green-50);
  color: var(--green-700);
  text-align: center;
}

.success-box strong {
  display: block;
  font-size: 13px;
}

.success-box small {
  font-size: 10px;
}

/* Result page */
.result-page {
  overflow-x: hidden;
  background: var(--cream);
}

.sales-section {
  padding: 48px 16px;
}

.sales-section.alt {
  background: var(--cream-deep);
}

.sales-section.white {
  background: white;
}

.sales-container {
  width: min(100%, 896px);
  margin: 0 auto;
}

.sales-container.narrow {
  width: min(100%, 672px);
}

.sales-heading {
  margin: 12px auto 8px;
  color: var(--amber-800);
  font-size: clamp(23px, 6.5vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.sales-subhead {
  max-width: 610px;
  margin: 0 auto 28px;
  color: var(--amber-700);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* White, not the cream of the rest of the page: the hero artwork is a
   transparent PNG with its own soft shadow, and on cream that shadow muddies
   into the background instead of lifting the pages off it. */
.hero-section {
  padding: 40px 16px 48px;
  background: white;
  text-align: center;
}

.hero-section .personalized-pill {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--orange-100);
  color: var(--orange-600);
  font-size: 12px;
  font-weight: 700;
}

.hero-section h1 {
  max-width: 640px;
  margin: 0 auto 14px;
  color: var(--amber-800);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 800;
  line-height: 1.2;
}

.hero-section .hero-copy {
  max-width: 570px;
  margin: 0 auto 22px;
  color: var(--amber-800);
  font-size: 15px;
  line-height: 1.6;
}

.cta-button {
  min-height: 54px;
  padding: 14px 28px;
  text-align: center;
}

.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--amber-700);
  font-size: 11px;
}

.stars {
  color: var(--orange-400);
  font-size: 14px;
}

/* One flat artwork with its own transparent background and its own shadow, so
   it gets no frame, no border and no box of ours. */
.hero-collage {
  width: min(100%, 560px);
  margin: 12px auto 0;
}

.hero-collage img {
  display: block;
  width: 100%;
  height: auto;
}

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

.area-card {
  overflow: hidden;
  border: 1px solid var(--orange-100);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.area-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.area-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(120 53 15 / 0.78), rgb(120 53 15 / 0.05));
  content: "";
}

.area-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-icon,
.area-title {
  position: absolute;
  z-index: 2;
}

.area-icon {
  top: 8px;
  left: 8px;
  font-size: 23px;
}

.area-title {
  right: 8px;
  bottom: 8px;
  left: 8px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.area-card > p {
  margin: 0;
  padding: 11px 8px;
  color: var(--amber-800);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.section-cta {
  text-align: center;
}

.bridge-note {
  max-width: 580px;
  margin: 34px auto 0;
  padding: 15px 18px;
  border: 1px solid var(--amber-200);
  border-radius: 16px;
  background: var(--amber-50);
  color: var(--amber-800);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.module-grid,
.science-grid,
.steps-grid {
  display: grid;
  gap: 20px;
}

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

.module-card {
  padding: 18px;
  border: 1px solid var(--orange-100);
  border-radius: 16px;
  background: white;
}

.module-title,
.science-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--amber-800);
  font-size: 14px;
  font-weight: 800;
}

.round-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-400);
  color: white;
}

.module-card > p,
.science-card-copy {
  margin-bottom: 12px;
  color: var(--amber-700);
  font-size: 11px;
  line-height: 1.55;
}

.module-preview {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--orange-100);
  border-radius: 12px;
}

.module-preview img {
  width: 100%;
}

.module-banner {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 9px 8px;
  background: rgb(194 104 7 / 0.95);
  color: white;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.pdf-note {
  margin: 0;
  color: var(--orange-400);
  font-size: 10px;
  font-weight: 600;
}

.more-preview {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--orange-200);
  border-radius: 16px;
  background: var(--amber-50);
}

.more-preview img {
  width: 100%;
}

.more-preview .module-banner {
  font-size: 14px;
}

.science-grid {
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}

.science-point {
  padding: 18px;
  border: 1px solid var(--amber-100);
  border-radius: 16px;
  background: var(--amber-50);
}

.research-card {
  overflow: hidden;
  margin-top: 20px;
  border: 2px solid var(--blue-200);
  border-radius: 16px;
  background: var(--blue-50);
}

.research-visual {
  position: relative;
}

.research-visual img {
  width: 100%;
}

.research-overlay {
  padding: 18px;
  color: var(--blue-900);
  font-size: 12px;
  line-height: 1.6;
}

.research-overlay strong:first-child {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-700);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}

.comparison-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.comparison-card {
  padding: 18px;
  border-radius: 16px;
}

.comparison-card.before {
  border: 1px solid var(--red-100);
  background: var(--red-50);
  color: var(--red-700);
}

.comparison-card.after {
  border: 1px solid var(--green-200);
  background: var(--green-50);
  color: var(--green-700);
}

.comparison-title {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
}

.comparison-label {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.7);
  font-size: 9px;
  font-weight: 800;
}

.comparison-desc {
  min-height: 48px;
  margin-bottom: 10px;
  font-size: 10px;
  line-height: 1.5;
}

.metric-card {
  padding: 10px;
  border: 1px solid currentColor;
  border-radius: 11px;
  background: white;
}

.metric-card header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 9px;
}

/* The faded track has to live on a pseudo-element, not on .simple-bar itself.
   Opacity on the parent composites the whole subtree, so the fill inside it was
   being multiplied down to the same 22% as the track and the bar always looked
   empty. A child cannot undo a parent's opacity with opacity: 1. */
.simple-bar {
  position: relative;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
}

.simple-bar::before {
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.22;
  content: "";
}

.simple-bar span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

/* Google review wall. Deliberately NOT in the page palette: the whole point is
   that it reads as a widget lifted from Google, so it keeps Google's slate and
   white. The only concession to the page is the section background. */
.google-reviews {
  overflow: hidden;
}

.g-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  gap: 8px 12px;
}

.g-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.g-summary > .g-logo {
  width: 56px;
  height: 56px;
}

.g-excellent {
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
}

.g-stars {
  display: flex;
  gap: 2px;
}

.g-star {
  color: #facc15;
  font-size: 16px;
  line-height: 1;
}

.g-stars-lg .g-star {
  font-size: 20px;
}

.g-star-off {
  color: #d8dde5;
}

.g-score {
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
}

.g-rows {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}

.g-viewport {
  width: 100%;
  overflow: hidden;
}

/* The row is printed three times and the travel is exactly one third, so the
   loop lands on an identical frame. Change one without the other and it jumps. */
.g-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: g-scroll-left 45s linear infinite;
  will-change: transform;
}

.g-track-reverse {
  animation-name: g-scroll-right;
  animation-duration: 50s;
}

.g-viewport:hover .g-track {
  animation-play-state: paused;
}

.g-card {
  display: flex;
  width: 280px;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.g-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.g-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.g-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
}

.g-initial {
  display: grid;
  place-items: center;
  color: white;
  font-size: 17px;
  font-weight: 600;
}

.g-meta {
  min-width: 0;
}

.g-meta h3 {
  overflow: hidden;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g-meta p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
}

.g-copy {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

@keyframes g-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

@keyframes g-scroll-right {
  from {
    transform: translateX(-33.333%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-track {
    animation-play-state: paused;
  }
}

.steps-grid {
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}

.step-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--orange-100);
  border-radius: 16px;
  background: var(--cream);
}

.step-number {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-400);
  color: white;
  font-size: 16px;
  font-weight: 800;
}

.step-card h3 {
  margin-bottom: 4px;
  color: var(--amber-800);
  font-size: 13px;
}

.step-card p {
  margin: 0;
  color: var(--amber-700);
  font-size: 10px;
  line-height: 1.55;
}

.digital-note {
  padding: 17px;
  border: 2px solid var(--blue-200);
  border-radius: 16px;
  background: var(--blue-50);
  color: var(--blue-800);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.reservation-box {
  margin-bottom: 22px;
  padding: 12px;
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  background: var(--blue-50);
  color: var(--blue-800);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.timer {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 18px;
  border: 1px solid var(--blue-200);
  border-radius: 10px;
  background: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
}

.pricing-heading {
  margin-bottom: 22px;
  text-align: center;
}

.pricing-heading h2 {
  margin-bottom: 6px;
  color: var(--amber-800);
  font-size: 24px;
  line-height: 1.3;
}

.pricing-heading p {
  margin: 0;
  color: var(--amber-700);
  font-size: 12px;
}

.price-card {
  overflow: hidden;
  border: 1px solid var(--orange-200);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow-lg);
}

.price-card.featured {
  border: 2px solid var(--orange-400);
  box-shadow: 0 22px 44px rgb(234 88 12 / 0.18);
}

.popular-wrap {
  position: relative;
  padding-top: 16px;
}

.popular-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--orange-500);
  color: white;
  box-shadow: var(--shadow-md);
  font-size: 10px;
  font-weight: 800;
  transform: translateX(-50%);
}

.price-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.price-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discount-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--red-500);
  color: white;
  box-shadow: var(--shadow-md);
  font-size: 11px;
  font-weight: 800;
}

.price-content {
  padding: 18px;
}

.price-block {
  margin-bottom: 14px;
  text-align: center;
}

.price-normal {
  margin: 0;
  color: var(--gray-400);
  font-size: 9px;
  text-decoration: line-through;
}

.price-main {
  margin: 0;
  color: var(--green-600);
  font-size: 34px;
  font-weight: 800;
}

.price-installments {
  margin: 0;
  color: var(--amber-600);
  font-size: 10px;
}

.includes-title {
  margin-bottom: 9px;
  color: var(--amber-800);
  font-size: 12px;
  font-style: italic;
  font-weight: 800;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.check-line {
  display: flex;
  gap: 7px;
  color: var(--amber-800);
  font-size: 10px;
  line-height: 1.4;
}

.tiny-check {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-400);
  color: white;
  font-size: 8px;
}

.checkout-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border-radius: 16px;
  background: var(--orange-500);
  color: white;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.security-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 9px;
  color: var(--amber-600);
  font-size: 9px;
}

.price-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  color: var(--orange-500);
  font-size: 11px;
  font-weight: 800;
}

.price-divider::before,
.price-divider::after {
  height: 1px;
  flex: 1;
  background: var(--orange-200);
  content: "";
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.feature-chips span {
  padding: 5px 9px;
  border: 1px solid var(--orange-200);
  border-radius: 999px;
  background: white;
  color: var(--amber-800);
  font-size: 9px;
  font-weight: 600;
}

.guarantee-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding: 16px;
  border: 2px solid var(--orange-200);
  border-radius: 16px;
  background: white;
}

.guarantee-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-100);
  font-size: 24px;
}

.guarantee-card h3 {
  margin-bottom: 3px;
  color: var(--amber-800);
  font-size: 13px;
}

.guarantee-card p {
  margin: 0;
  color: var(--amber-700);
  font-size: 10px;
  line-height: 1.45;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--orange-100);
  border-radius: 16px;
  background: white;
}

.faq-question {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: white;
  color: var(--amber-800);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.faq-answer {
  display: none;
  padding: 0 16px 15px;
  color: var(--amber-700);
  font-size: 10px;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-caret {
  color: var(--orange-400);
  transition: transform 0.2s ease;
}

.faq-item.open .faq-caret {
  transform: rotate(180deg);
}

.modal {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.62);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  border: 1px solid var(--orange-200);
  border-radius: 24px;
  background: white;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
}

.modal-badge {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 50%;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--orange-500);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.modal-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
}

.modal-header {
  padding: 30px 22px 18px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(to right, var(--orange-500), var(--orange-400));
  text-align: center;
}

.modal-header h3 {
  margin-bottom: 4px;
  color: white;
  font-size: 19px;
  line-height: 1.25;
}

.modal-header p {
  margin: 0;
  color: var(--orange-100);
  font-size: 11px;
}

.modal-body {
  padding: 18px 22px 20px;
}

.modal-price {
  text-align: center;
}

.modal-price del {
  display: block;
  color: var(--gray-400);
  font-size: 10px;
}

.modal-price strong {
  display: block;
  color: var(--green-600);
  font-size: 32px;
}

.upgrade-pill {
  display: inline-flex;
  margin: 3px 0 14px;
  padding: 5px 10px;
  border: 1px solid var(--green-200);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.modal-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}

.modal-feature {
  padding: 9px;
  border: 1px solid var(--orange-100);
  border-radius: 11px;
  background: var(--cream);
  color: var(--amber-800);
  font-size: 10px;
  font-weight: 700;
}

.modal-decline {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 10px;
  text-decoration: underline;
}

@media (min-width: 640px) {
  .sales-section {
    padding-block: 58px;
  }

  .module-grid,
  .science-grid,
  .steps-grid,
  .comparison-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-content {
    padding: 24px;
  }
}

@media (min-width: 768px) {
  .area-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 700px) {
  .quiz-shell {
    padding-top: 18px;
  }

  .quiz-subhead,
  .quiz-proof-copy {
    margin-bottom: 12px;
  }

  .quiz-proof-copy {
    margin-bottom: 3px;
  }

  .options-list {
    gap: 6px;
  }

  .option-row {
    min-height: 46px;
    padding: 8px 12px;
  }

  .modal {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 31px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .modal-card {
    flex: 0 0 auto;
  }
}

@media (max-width: 359px) {
  .landing-shell {
    padding-inline: 14px;
  }

  .brand-pill {
    padding-inline: 14px;
    font-size: 11px;
  }

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

  .quiz-shell {
    padding-inline: 12px;
  }

  .choice-card {
    padding: 10px;
  }

  .choice-card img {
    height: 126px;
  }

  .security-row {
    gap-inline: 7px;
  }
}