/* ════════════════════════════════════════════════════════════════════════
   OPTIMIZER PAGE (/optimizer/) — page-specific styles.
   Reuses tokens + chrome from style.css (--ink, --lime, fonts, easings,
   --superellipse-mask). Section fills/radii mirror the Figma container
   properties; there is no scroll-driven page colour.
   ════════════════════════════════════════════════════════════════════════ */

.optimizer-page {
  background: var(--paper);
  --opt-ink: #2E1919;
  --opt-lime: #ECF7BD;
  --opt-olive: #38430A;
  --opt-step-accent: #88623F;
  --opt-section-radius: clamp(34px, 3.7vw, 46px);
  --opt-type-h3: 42px;
  --opt-type-h3-mobile: clamp(21px, 5.9vw, 28px);
  --opt-type-body: 20px;
  --opt-type-body-lh: 1.3;
  --opt-type-body-ls: -0.01em;
  --opt-type-body-weight: 400;
  --opt-type-body-muted: rgba(46, 25, 25, 0.6);
  --opt-type-body-mobile: 17px;
  --opt-type-body-lh-mobile: 1.24;
  --opt-type-card-title-mobile: 23px;
  --opt-form-width: 680px;
  --opt-input-width: 384px;
  --opt-hero-copy-gap: clamp(32px, 3vw, 40px);
  --opt-hero-stack-gap: clamp(48px, 4.6vw, 60px);
}

.opt-main { background: var(--paper); }

.opt-group {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--opt-section-radius);
  isolation: isolate;
}
.opt-group--lime {
  background: linear-gradient(180deg, var(--opt-lime) 0%, var(--paper) 100%);
}
.opt-group--data { background: transparent; }
.opt-group--access { background: var(--opt-olive); }

.opt-section {
  position: relative;
  width: 100%;
  color: var(--opt-ink);
  padding-block: clamp(88px, 11vw, 152px);
}
.opt-container {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--pad-x);   /* match the footer + main-landing .container gutter */
}

/* ── Shared type ──
   Headings use .display-h1 / .display-h2 and subs use .lead (the shared tokens
   from style.css). The .opt-* hooks below only carry layout + colour. */
.opt-h2 { color: inherit; }
/* match "Happiness is a practice" mobile size (.practice-title @ ≤767px) */
@media (max-width: 767px) {
  .opt-h2 { font-size: clamp(34px, 9vw, 44px); line-height: 1.08; }
}

/* Dark sections use white text (per the design) */
.opt-section--dark { color: #ffffff; }
.opt-section--dark .opt-h2,
.opt-section--dark .lead { color: #ffffff; }

/* ══════════ 1 · HERO ══════════ */
/* Own radial wash (like the home hero) — sits over the white page canvas. */
.opt-hero {
  padding-top: 192px;
  padding-bottom: 0;
  overflow: hidden;
  border-bottom-right-radius: var(--opt-section-radius);
  border-bottom-left-radius: var(--opt-section-radius);
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 72%,
      var(--paper) 94%, var(--paper) 100%),
    radial-gradient(135% 105% at 50% -8%,
      var(--hero-beige) 0%, var(--hero-lime) 28%, var(--paper) 60%),
    var(--paper);
}
.opt-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--opt-hero-stack-gap);
}
.opt-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--opt-hero-stack-gap);
  width: 100%;
}
.opt-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--opt-hero-copy-gap);
  width: 100%;
  padding-inline: 24px;
}
@media (min-width: 768px) {
  .burners-page .opt-hero-copy {
    width: min(calc(100vw - (var(--pad-x) * 2)), 1440px);
  }
}
.opt-hero-title { text-align: center; }
.opt-hero-lead {
  width: min(100%, 862px);
  text-align: center;
  margin-inline: auto;
}
.opt-hero-lead,
.opt-steps-sub,
.opt-data-sub,
.opt-includes-sub,
.opt-access-sub,
.opt-step-p,
.opt-step.visible .opt-step-p {
  opacity: 0.8;
}
.optimizer-page .opt-hero-lead.word-fade.visible,
.optimizer-page .opt-steps-sub.word-fade.visible,
.optimizer-page .opt-data-sub.word-fade.visible,
.optimizer-page .opt-includes-sub.word-fade.visible,
.optimizer-page .opt-access-sub.word-fade.visible {
  opacity: 0.8;
}

/* Form (bordered pill input + dark request pill) */
.opt-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(100%, var(--opt-form-width));
  position: relative;
}
.opt-access-form {
  display: flex;
  gap: 8px;
  width: 100%;
  min-height: 0;
  border: 0;
  padding: 0;
}
/* kill the 1px divider line the shared .access-form draws under itself */
.opt-access-form::after { content: none; display: none; }
@media (min-width: 768px) {
  .opt-access-form { justify-content: center; }
}
.opt-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--opt-ink);
  border-radius: 50px;
  background: transparent;
}
@media (min-width: 768px) {
  .opt-field { flex: 0 1 var(--opt-input-width); }
}
.opt-access-form .access-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  height: auto;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--opt-ink);
}
.opt-access-form .access-input::placeholder { color: var(--opt-ink); opacity: 0.55; }
.opt-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--opt-ink);
  color: var(--opt-lime);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.opt-submit:disabled,
.opt-submit[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.opt-submit .access-submit-arrow { width: 22px; height: 22px; }
.opt-submit .access-submit-arrow path { stroke: var(--opt-lime); }
.opt-form-note {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: rgba(46, 25, 25, 0.6);
  opacity: 1;
  text-align: center;
}
/* small, flat free badge (no tilt / hover animation) */
.opt-form-note .free-tag {
  color: var(--opt-ink);
  opacity: 1;
  transform: none;
  transition: none;
  font-size: 0.78em;
  padding: 2px 8px 2px 6px;
  margin-left: 0;
  box-shadow: 0 2px 7px rgba(120, 142, 44, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.opt-form-note .free-tag::before { width: 5px; height: 5px; }
.opt-form-note .free-tag:hover {
  transform: none;
  box-shadow: 0 2px 7px rgba(120, 142, 44, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.opt-form .access-error {
  margin: 0;
  font-size: 15px;
  color: #c0362c;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out);
}
.opt-form .access-error.is-shown,
.access-form.has-error + .access-error { opacity: 1; visibility: visible; }

/* light form on dark sections (S6) */
.opt-form--light .opt-field { border-color: rgba(245, 249, 228, 0.55); }
.opt-form--light .access-input { color: #f5f9e4; }
.opt-form--light .access-input::placeholder { color: #f5f9e4; opacity: 0.55; }
.opt-form--light .opt-submit { background: var(--opt-lime); color: var(--opt-ink); }
.opt-form--light .opt-submit .access-submit-arrow path { stroke: var(--opt-ink); }

/* Hero images — two squares, superellipse mask */
.opt-hero-images {
  display: flex;
  gap: 8px;
  width: 100%;
}
.opt-hero-figure {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
}
.opt-hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Superellipse corners — same clip the main landing uses on its photos.
   The rounding lives on the photo (no border-radius on the container). */
.sq-mask,
.opt-data-img { clip-path: var(--photo-superellipse-clip); }

/* ══════════ 2 · NUMBERS LOOK GOOD ══════════ */
/* a regular block heading — smaller than the full-size .display-h2 sections */
.opt-rows { background: var(--paper); }
.opt-rows-title { text-align: center; max-width: 812px; margin-inline: auto; }
.opt-row-list {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid rgba(46, 25, 25, 0.12);
}
.opt-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 40px;
  padding-block: 40px;
  border-bottom: 1px solid rgba(46, 25, 25, 0.12);
}
.opt-row-img {
  width: 120px;
  height: 120px;
  /* superellipse with a stronger corner radius than the shared photo mask */
  clip-path: polygon(28% 0%, 72% 0%, 79.48% 0.04%, 82.56% 0.14%, 84.9% 0.32%, 86.86% 0.59%, 88.55% 0.9%, 90.04% 1.3%, 91.39% 1.76%, 92.6% 2.32%, 93.68% 2.94%, 94.67% 3.67%, 95.55% 4.45%, 96.33% 5.35%, 97.06% 6.32%, 97.68% 7.4%, 98.24% 8.61%, 98.7% 9.96%, 99.1% 11.45%, 99.41% 13.14%, 99.68% 15.1%, 99.86% 17.44%, 99.96% 20.52%, 100% 28%, 100% 72%, 99.96% 79.48%, 99.86% 82.56%, 99.68% 84.9%, 99.41% 86.86%, 99.1% 88.55%, 98.7% 90.04%, 98.24% 91.39%, 97.68% 92.6%, 97.06% 93.68%, 96.33% 94.67%, 95.55% 95.55%, 94.67% 96.33%, 93.68% 97.06%, 92.6% 97.68%, 91.39% 98.24%, 90.04% 98.7%, 88.55% 99.1%, 86.86% 99.41%, 84.9% 99.68%, 82.56% 99.86%, 79.48% 99.96%, 72% 100%, 28% 100%, 20.52% 99.96%, 17.44% 99.86%, 15.1% 99.68%, 13.14% 99.41%, 11.45% 99.1%, 9.96% 98.7%, 8.61% 98.24%, 7.4% 97.68%, 6.32% 97.06%, 5.35% 96.33%, 4.45% 95.55%, 3.67% 94.67%, 2.94% 93.68%, 2.32% 92.6%, 1.76% 91.39%, 1.3% 90.04%, 0.9% 88.55%, 0.59% 86.86%, 0.32% 84.9%, 0.14% 82.56%, 0.04% 79.48%, 0% 72%, 0% 28%, 0.04% 20.52%, 0.14% 17.44%, 0.32% 15.1%, 0.59% 13.14%, 0.9% 11.45%, 1.3% 9.96%, 1.76% 8.61%, 2.32% 7.4%, 2.94% 6.32%, 3.67% 5.35%, 4.45% 4.45%, 5.35% 3.67%, 6.32% 2.94%, 7.4% 2.32%, 8.61% 1.76%, 9.96% 1.3%, 11.45% 0.9%, 13.14% 0.59%, 15.1% 0.32%, 17.44% 0.14%, 20.52% 0.04%, 28% 0%);
}
.opt-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* H3 token: mirrors the main landing method step titles. */
.opt-row-h {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--opt-type-h3);
  line-height: 1;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) {
  .burners-page .opt-rows .opt-row-h {
    padding-right: 16px;
  }
}
/* shared body-text token — same as inside-card / data / FAQ descriptions
   (Figma: Regular 20px / lh 1.3 / -0.2px / 60%; 17px / lh 1.24 on mobile) */
.opt-row-p {
  font-size: var(--opt-type-body);
  line-height: var(--opt-type-body-lh);
  letter-spacing: -0.01em;
  opacity: 0.6;
}

/* ══════════ 3 · HOW IT WORKS ══════════ */
.opt-steps {
  padding-bottom: 0;
  background: transparent;
}
.opt-steps-head { text-align: center; margin-bottom: clamp(56px, 7vw, 96px); }
.opt-steps-head .opt-h2 { text-align: center; }
.opt-steps-sub { width: min(100%, 640px); margin: 20px auto 0; }
.opt-steps-list {
  position: relative;
  --steps-progress: 0;
}
.opt-steps-list::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(46, 25, 25, 0.12);
  transform: translateX(-50%);
  z-index: 0;
}
.opt-steps-list::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(136, 98, 63, 0) 0%,
    rgba(136, 98, 63, 0.92) 12%,
    rgba(136, 98, 63, 0.92) 88%,
    rgba(136, 98, 63, 0) 100%);
  transform: translateX(-50%) scaleY(var(--steps-progress));
  transform-origin: top;
  z-index: 1;
  will-change: transform;
}
.opt-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 64px;
  min-height: clamp(360px, 38vw, 500px);
  isolation: isolate;
}
.opt-step::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.opt-step::after {
  width: 16px; height: 16px;
  background: var(--opt-step-accent);
  opacity: 0.42;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  z-index: 3;
}
.opt-step.is-passed::after,
.opt-step.is-active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.opt-step--rev .opt-step-copy { order: -1; }
.opt-step-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  position: relative;
  z-index: 4;
}
.opt-step--rev .opt-step-copy { margin-left: auto; }
.opt-step-num {
  width: fit-content;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--opt-step-accent);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.opt-step.is-active .opt-step-num,
.opt-step:hover .opt-step-num {
  opacity: 1;
  transform: translateY(-2px);
}
.opt-step-h {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--opt-type-h3);
  line-height: 1;
  letter-spacing: -0.03em;
}
.opt-step-h .accent {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
}
.optimizer-page .benefit-card p,
.opt-step-p {
  font-weight: var(--opt-type-body-weight);
  font-size: var(--opt-type-body);
  line-height: var(--opt-type-body-lh);
  letter-spacing: var(--opt-type-body-ls);
  color: var(--opt-type-body-muted);
}
.opt-step-visual {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 4;
}
.opt-step:not(.opt-step--rev) .opt-step-visual { margin-right: auto; }
.opt-step--rev .opt-step-visual { margin-left: 0; margin-right: auto; }
.opt-step-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.opt-step .opt-step-num,
.opt-step .opt-step-h,
.opt-step .opt-step-p,
.opt-step .opt-step-visual {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
}
.opt-step .opt-step-visual {
  filter: saturate(0.92) contrast(0.98);
  transform: translateY(28px) scale(0.965);
}
.opt-step.visible .opt-step-num,
.opt-step.visible .opt-step-h,
.opt-step.visible .opt-step-p,
.opt-step.visible .opt-step-visual {
  opacity: 1;
  transform: none;
  filter: none;
}
.opt-step.visible .opt-step-p { opacity: 1; }
.opt-step.visible .opt-step-num { transition-delay: calc(var(--d, 0s) + .05s); }
.opt-step.visible .opt-step-h { transition-delay: calc(var(--d, 0s) + .13s); }
.opt-step.visible .opt-step-p { transition-delay: calc(var(--d, 0s) + .21s); }
.opt-step.visible .opt-step-visual { transition-delay: calc(var(--d, 0s) + .12s); }

.opt-results {
  position: relative;
  margin-top: 0;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(125, 157, 0, 0) 0%, rgba(125, 157, 0, 0.1) 100%);
}
.opt-results-title {
  margin: 0 0 24px;
  font-family: var(--ff-sans);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #7d9d00;
}
.opt-results-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.opt-results-item {
  min-width: 0;
}
.opt-results-num {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #7d9d00;
}
.opt-results-text {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--opt-ink);
}

/* ══════════ 3b · WHAT YOU'LL SEE INSIDE ══════════ */
/* Reuses the main-landing benefits gallery: a draggable swipe carousel on
   mobile (shared .benefits-grid CSS + main.js, keyed off data-benefits-carousel)
   and the 2×2 grid on desktop. */
.opt-inside {
  overflow: hidden;
  background: transparent;
}
.opt-inside-title {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
  font-size: 40px;
  line-height: 1;
}
.opt-inside-grid { margin-top: 0; }
.burners-page .benefit-card--guided-journaling {
  background:
    var(--paper)
    url("/assets/images/burners/InsideCard.png")
    center / cover
    no-repeat;
}

@media (min-width: 768px) {
  /* desktop: 2×2 grid, capped width (matches the design) */
  .opt-inside-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 796px;
    margin-inline: auto;
    gap: 16px;
  }
  .opt-inside-grid .benefit-card,
  .opt-inside-grid .benefit-card:nth-child(4),
  .opt-inside-grid .benefit-card:nth-child(5) {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    border-radius: 32px;
  }
}

/* ══════════ 4 · YOUR INNER DATA (dark) ══════════ */
.opt-data {
  background: var(--opt-ink);
  border-radius: var(--opt-section-radius) var(--opt-section-radius) 0 0;
}
.opt-data-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.opt-data-head .opt-h2 { text-align: center; }
.opt-data-sub { width: min(100%, 728px); margin: 20px auto 0; }
.opt-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 20px);
}
.burners-page .opt-data-sub { width: min(100%, 480px); }
.burners-page .opt-data-head .opt-h2 {
  max-width: 598px;
  margin-inline: auto;
}
@media (min-width: 1180px) {
  .burners-page .opt-data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .burners-page .opt-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* equal-height cards so every copy divider lines up at the tallest card's base */
.opt-data-card { display: flex; flex-direction: column; height: 100%; }
.opt-data-img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.opt-data-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-data-copy {
  flex: 1 1 auto;
  padding: 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* same as the inside "Connected insights" card title (.benefit-card h4) */
.opt-data-copy h3 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: #ffffff;
}
@media (max-width: 767px) {
  .opt-data-copy h3 { font-size: 23px; line-height: 1.18; }
}
.opt-data-copy p {
  margin-top: 14px;
  font-size: var(--opt-type-body);
  line-height: var(--opt-type-body-lh);
  letter-spacing: -0.01em;
  color: #ffffff;
  opacity: 0.6;
}

/* ══════════ 5 · WHAT EARLY ACCESS INCLUDES ══════════ */
.opt-includes {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--opt-section-radius) var(--opt-section-radius) 0 0;
  box-shadow: 0 calc(-1 * var(--opt-section-radius)) 0 0 var(--opt-ink);
  outline: 0;
  background: var(--paper);
  isolation: isolate;
}
.opt-includes-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 526px) minmax(0, 526px);
  justify-content: space-between;
  gap: 12px;
}
.opt-includes-head { padding-right: 24px; }
.opt-includes-sub { margin-top: 24px; }
.opt-includes-list { list-style: none; margin: 0; padding: 0; }
.opt-include {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-block: 22px;
  border-top: 1px solid transparent;
  /* text style of the main-landing tags (.comparison-bubble) — text only */
  font-size: clamp(16px, 1.16vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--opt-ink);
}
.opt-include:last-child { border-bottom: 1px solid rgba(46, 25, 25, 0.1); }
.opt-include:first-child { border-top: 0; }
.opt-include:last-child { border-bottom: 0; }
.opt-include-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #aac352;
}

/* ══════════ 6 · GET THE NUMBER (dark + mockup) ══════════ */
.opt-access {
  overflow: hidden;
  padding-top: clamp(96px, 7.87vw, 136px);
  padding-bottom: 0;
  background: var(--opt-olive);
}
.opt-access.access-placeholder {
  width: 100%;
  background: var(--opt-olive);
  border-radius: 0;
}
.opt-access-head { text-align: center; }
.opt-access-head .opt-h2 { text-align: center; max-width: 684px; margin-inline: auto; }
.opt-access-sub { width: min(100%, 530px); margin: 20px auto 0; }
/* lime heading + sub (sub keeps the .lead 0.8 opacity) */
.opt-access-head .opt-h2,
.opt-access-head .opt-access-sub { color: var(--opt-lime); }
/* The tag in the access subtitle sits flat (no tilt) on every width. */
.opt-access-sub .free-tag {
  transform: none;
  transition: none;
}
@media (min-width: 768px) {
  .opt-access-sub .free-tag:hover {
    transform: none;
    box-shadow:
      0 4px 12px rgba(120, 142, 44, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}
.opt-access .opt-form { margin: 32px auto 0; }

/* Mockup stage — breaks out of the 1064 container to the design's wider spread */
.opt-mockup {
  position: relative;
  width: min(79.4vw, 1372px);
  aspect-ratio: 1372 / 691;
  margin: 60px 0 0 50%;
  transform: translateX(-50%);
}
.opt-mockup-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.opt-mockup-glow--1 { width: 51.2%; height: 61.7%; left: 11.6%; top: 60.4%; background: #EEFF37; opacity: 0.30; }
.opt-mockup-glow--2 { width: 51.2%; height: 61.7%; left: 36.5%; top: 40.2%; background: #ECF6BC; opacity: 0.26; }
.opt-mockup-phone {
  position: absolute;
  left: 50%;
  top: 0;
  width: 30.25%;
  aspect-ratio: 415 / 853;
  transform: translateX(-50%);
  z-index: 2;
}
.opt-mockup-phone img { width: 100%; height: 100%; object-fit: contain; display: block; }
.opt-mockup-item img { width: 100%; height: auto; display: block; }
.opt-mockup-item {
  position: absolute;
  z-index: 3;
  will-change: transform;
}
.opt-mockup-item--a { left: 6%;  top: 9%;      width: 20%; }   /* breathing */
.opt-mockup-item--b { right: 15.6%; top: 13%;  width: 13.5%; } /* emotional state */
.opt-mockup-item--c { left: 16.25%; bottom: 11.8%; width: 13.5%; } /* mood chart */
.opt-mockup-item--d { right: 5.3%; bottom: 23.2%; width: 20.1%; }   /* actions */

/* ══════════ 7 · FAQ (own radial, like the home hero) ══════════ */
.opt-faq {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--opt-section-radius) var(--opt-section-radius) 0 0;
  box-shadow: none;
  outline: 0;
  background:
    radial-gradient(135% 105% at 50% -8%,
      var(--hero-beige) 0%, var(--hero-lime) 28%, var(--paper) 60%),
    var(--paper);
  isolation: isolate;
}
.opt-faq .opt-container {
  position: relative;
  z-index: 1;
}
.optimizer-page .opt-group--access {
  background: transparent;
}
.optimizer-page .opt-group--access .opt-access.access-placeholder {
  border-radius: var(--opt-section-radius) var(--opt-section-radius) 0 0;
}
.optimizer-page .opt-group--access .opt-faq {
  box-shadow: 0 calc(-1 * var(--opt-section-radius)) 0 0 var(--opt-olive);
}
.opt-faq-title { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.opt-faq-list {
  width: min(100%, 796px);
  margin-inline: auto;
}
.opt-faq-item { border-top: 1px solid rgba(46, 25, 25, 0.12); }
.opt-faq-item:last-child { border-bottom: 1px solid rgba(46, 25, 25, 0.12); }
.opt-faq-item:first-child { border-top: 0; }
.opt-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--opt-ink);
}
.opt-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;
}
.opt-faq-icon::before,
.opt-faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--opt-ink);
  transition: transform .4s var(--ease-luxe), opacity .4s var(--ease-luxe);
}
.opt-faq-icon::before { width: 26px; height: 1.8px; transform: translate(-50%, -50%); }
.opt-faq-icon::after  { width: 1.8px; height: 26px; transform: translate(-50%, -50%); }
.opt-faq-item.is-open .opt-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.opt-faq-a {
  overflow: hidden;
  height: 0;
  transition: height .45s var(--ease-luxe);
}
.opt-faq-a-in { padding-bottom: 32px; }
.opt-faq-a p {
  width: min(100%, 744px);
  font-size: var(--opt-type-body);
  line-height: var(--opt-type-body-lh);
  letter-spacing: -0.01em;
  color: var(--opt-ink);
  opacity: 0.6;
}

/* ══════════ reveal (no blur) — appear one by one ══════════ */
.opt-section .reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.opt-section .reveal-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .opt-section .reveal-up { opacity: 1; transform: none; transition: none; }
  .opt-steps-list { --steps-progress: 1; }
  .opt-step::after,
  .opt-step .opt-step-num,
  .opt-step .opt-step-h,
  .opt-step .opt-step-p,
  .opt-step .opt-step-visual {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ══════════ Header on this page — no menu ══════════ */
.nav--bare .nav-col--center { display: none; }

/* ════════════════════ MOBILE ════════════════════ */
@media (max-width: 767px) {
  .optimizer-page {
    --opt-section-radius: var(--mobile-section-radius);
    --opt-hero-copy-gap: 24px;
    --opt-hero-stack-gap: 40px;
  }
  .opt-section { padding-block: clamp(72px, 18vw, 104px); }
  .opt-hero { padding-top: 160px; padding-bottom: 0; }
  .opt-hero-title-break { display: none; }
  .opt-rows-title { padding-inline: 16px; }
  .optimizer-page .nav-col--end > .btn-cta {
    display: inline-flex;
    height: 40px;
    padding: 0 10px;
    max-width: calc(100vw - 138px);
  }
  .optimizer-page .nav-col--end > .btn-cta .btn-label {
    font-size: clamp(14px, 4vw, 16px);
    letter-spacing: -0.02em;
  }
  .optimizer-page .nav-col--end > .btn-cta .btn-ico {
    width: 16px;
    height: 16px;
  }
  body.optimizer-page.mobile-cta-docked .nav-col--end > .btn-cta,
  html.keyboard-open .optimizer-page .nav-col--end > .btn-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(12px, 0, 0);
  }
  .optimizer-page .mobile-bottom-cta { display: none; }

  .opt-access-form { flex-direction: column; gap: 10px; }
  .opt-hero .opt-access-form { padding-inline: 16px; }
  .opt-field, .opt-submit { width: 100%; height: 52px; }
  .opt-access-form .access-input {
    font-size: 17px;
    letter-spacing: 0;
  }
  .opt-access-form .access-input::placeholder { opacity: 0.5; }
  .opt-form--light .access-input { color: var(--opt-lime); }
  .opt-form--light .access-input::placeholder { color: var(--opt-lime); opacity: 0.8; }
  .opt-submit { justify-content: center; }
  .opt-form-note {
    font-size: 16px;
    line-height: 1.28;
  }

  /* hero: show only the second image (the app interface), not the portrait */
  .opt-hero-images { gap: 8px; }
  .opt-hero-figure:first-child { display: none; }

  .opt-row {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    padding-block: 28px;
  }
  .opt-row-img { width: 64px; height: 64px; }
  .opt-row-h { grid-column: 2; }
  .opt-row-p { grid-column: 2; }
  .opt-row-h,
  .opt-step-h {
    font-size: var(--opt-type-h3-mobile);
    line-height: 1.12;
  }

  .opt-steps { padding-bottom: 0; }
  .opt-steps-head { padding-inline: 16px; }
  .opt-steps-list {
    padding-left: 24px;
  }
  .opt-steps-list::before {
    display: block;
    left: 0;
    top: 8px;
    bottom: 0;
    width: 1px;
    background: rgba(46, 25, 25, 0.12);
    transform: none;
  }
  .opt-steps-list::after {
    display: block;
    left: 0;
    top: 8px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(136, 98, 63, 0) 0%,
      rgba(136, 98, 63, 0.92) 12%,
      rgba(136, 98, 63, 0.92) 88%,
      rgba(136, 98, 63, 0) 100%);
    transform: scaleY(var(--steps-progress));
    transform-origin: top;
  }
  .opt-step {
    grid-template-columns: 1fr;
    row-gap: 0;
    min-height: 0;
    margin-bottom: 0;
  }
  .opt-step:last-child { margin-bottom: 0; }
  .opt-step::after {
    display: block;
    left: -24px;
    top: 9px;
    width: 8px;
    height: 8px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .opt-step--rev .opt-step-copy { order: 0; margin-left: 0; }
  /* keep every step copy-first on mobile (step 2's DOM is image-first) */
  .opt-step:not(.opt-step--rev) .opt-step-copy { order: -1; }
  .opt-step-copy { max-width: none; gap: 14px; }
  .opt-step-visual { max-width: 360px; margin-inline: auto !important; }
  .opt-results {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    padding: 24px;
    border-radius: 0 28px 28px 28px;
  }
  .opt-results-title {
    margin-bottom: 24px;
    font-size: 36px;
  }
  .opt-inside-title {
    font-size: 36px;
    line-height: 1;
  }
  .opt-results-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .opt-results-text {
    font-size: var(--opt-type-body-mobile);
    line-height: var(--opt-type-body-lh-mobile);
    font-weight: 500;
  }

  .opt-data-head,
  .opt-access-head {
    padding-inline: 16px;
  }

  .opt-data-grid { grid-template-columns: 1fr; gap: 40px; }
  .opt-data-img { aspect-ratio: 3 / 2; }
  .opt-data-img img { object-position: center; }
  .opt-data-copy { padding-inline: 0; }

  .opt-includes-inner { grid-template-columns: 1fr; gap: 40px; }

  .opt-inside-grid.is-carousel .benefit-card {
    transition: opacity .42s var(--ease-out);
  }

  .opt-access { padding-top: 104px; padding-bottom: clamp(72px, 18vw, 104px); }
  .opt-mockup {
    width: clamp(214px, 64vw, 286px);
    height: auto;
    aspect-ratio: 830 / 1706;
    margin: 48px auto 0;
    transform: none;
  }
  .opt-mockup-phone { width: 100%; }
  .opt-mockup-glow { display: none; }
  .opt-mockup-item { display: none; }

  .opt-row-p,
  .opt-step-p,
  .optimizer-page .benefit-card p,
  .opt-data-copy p,
  .opt-faq-a p {
    font-size: var(--opt-type-body-mobile);
    line-height: var(--opt-type-body-lh-mobile);
    letter-spacing: var(--opt-type-body-ls);
  }

  .opt-data-copy h3 {
    font-size: var(--opt-type-card-title-mobile);
    line-height: 1.18;
  }
}