@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --blue: #1d2a7c;
  --blue-deep: #151f61;
  --green: #14b58a;
  --gold: #D4AF57;
  --digital-blue: #099AE6;
  --cyan: #3ED7FF;
  --neutral-gray: #767676;
  --green-soft: #e9f8f3;
  --white: #ffffff;
  --paper: #f7f9f8;
  --gray-50: #f4f6f5;
  --gray-100: #e8ecea;
  --gray-200: #d7ddda;
  --gray-500: #66736e;
  --gray-700: #394640;
  --ink: #18231f;
  --shadow: 0 24px 60px rgba(29, 42, 124, 0.12);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

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

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

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

h1,
h2,
h3,
h4 {
  color: var(--blue);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  margin-bottom: 28px;
  font-size: clamp(3.3rem, 6.7vw, 6.8rem);
  font-weight: 600;
}

h1 span {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.14em;
}

h2 {
  max-width: 900px;
  margin-bottom: 26px;
  font-size: clamp(2.35rem, 4.6vw, 4.7rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  font-weight: 600;
}

p {
  color: var(--gray-700);
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

::selection {
  background: var(--green-soft);
  color: var(--blue);
}

.section-shell {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.narrow-shell {
  width: min(1020px, calc(100% - 48px));
}

.section-block {
  padding-block: 124px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.3;
}

.eyebrow::before {
  width: 34px;
  height: 3px;
  background: var(--green);
  content: "";
}

.section-lede {
  max-width: 660px;
  font-size: 1.12rem;
  line-height: 1.75;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(29, 42, 124, 0.1);
  background: rgba(255, 255, 255, 0.97);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1340px, calc(100% - 32px));
  min-height: 112px;
  margin-inline: auto;
  gap: 28px;
}

.brand-signature {
  flex: 0 0 auto;
  width: 288px;
}

.brand-signature img {
  width: 288px;
  height: 108px;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 600;
}

.primary-nav > a {
  padding-block: 14px;
  white-space: nowrap;
}

.primary-nav > a:hover {
  color: var(--green);
}

.menu-toggle {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

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

.button-primary {
  background: var(--blue);
  color: var(--white);
}

.button-primary:hover {
  background: var(--blue-deep);
}

.button-secondary {
  border-color: var(--gray-200);
  background: var(--white);
  color: var(--blue);
}

.button-secondary:hover {
  border-color: var(--blue);
}

.nav-cta {
  min-height: 46px;
  padding-inline: 19px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lang-toggle:hover {
  border-color: var(--blue);
  color: var(--green);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(54px, 7vw, 110px);
  min-height: calc(100svh - 112px);
  /* Offer-Priority Restructure trimmed this from 86px/96px for the
     .hero-facts row; Dual-Path Conversion Architecture trimmed it further to
     20px top for the two-CTA button-row. Hero Simplification + Price
     Sequencing Adjustment removed enough hero content to restore a little
     of that room while both CTAs still comfortably fit above the fold. */
  padding-block: 28px 40px;
}

.hero-copy {
  animation: appear 600ms ease-out both;
}

/* Dual-Path Conversion Architecture: hero-scoped override (not a change to
   the shared h1 rule) tightening the gap below the headline to help fit the
   new dual CTA group above the fold. */
#hero-title {
  margin-bottom: 20px;
}

/* Dual-Path Conversion Architecture: hero-scoped override (not a change to
   the shared .eyebrow rule used by every section) for the same reason. */
.hero .eyebrow {
  margin-bottom: 14px;
}

.hero-lede {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 1.6vw, 1.42rem);
  line-height: 1.65;
}

.audience-line {
  max-width: 720px;
  margin-bottom: 4px;
  color: var(--gray-500);
  font-size: 0.94rem;
}

/* Offer-Priority Restructure: compact offer facts, positioned in the hero
   reading order between the transformation statement and the primary CTA.
   A restrained fact row, not oversized cards: wraps naturally on narrow
   viewports instead of forcing columns. Hero Simplification + Price
   Sequencing Adjustment reduced this from four facts to three (duration,
   delivery, path), removing price and the T0/T1/T2 measurement detail;
   both remain unchanged in their existing later sections (Program
   fact-list and Measurable Progression, respectively). */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 12px;
  margin: 0 0 8px;
  padding: 6px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.hero-facts dt {
  margin-bottom: 6px;
  color: var(--gray-500);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-facts dd {
  max-width: 230px;
  margin: 0;
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Dual-Path Conversion Architecture: the two hero CTA labels are longer than
   the prior single-CTA label (especially in Spanish), which was enough to
   force a second line at the 1440px hero column width even though the two
   buttons together were only a few pixels too wide. A small, hero-scoped
   reduction in horizontal padding (not a global button change) keeps both
   CTAs on one line at desktop widths without shrinking type or wrapping
   below where it is actually needed. */
.hero .button-row .button {
  padding-inline: 18px;
}

/* Hero Simplification + Price Sequencing Adjustment: the prior "See the
   Three-Stage Journey" link (previously demoted from a button to this text
   link by the Dual-Path Conversion Architecture task) has been removed
   outright. The approved 90-Day Transformation visual now sits immediately
   below the hero and already shows the three-stage path, so a click-through
   link to it was redundant hero clutter with nothing left to preserve by
   keeping it as a link. */

.governance-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.governance-line span {
  color: var(--blue);
  font-size: 0.7rem;
}

.hero-brief {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: var(--radius-lg);
  background: var(--blue);
  box-shadow: var(--shadow);
  color: var(--white);
}

.hero-brief::before {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--green);
  content: "";
}

.brief-heading {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.brief-heading span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.brief-heading strong {
  display: block;
  max-width: 310px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.15;
}

.hero-route {
  position: relative;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.hero-route li {
  display: grid;
  position: relative;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  min-height: 80px;
}

.hero-route li:not(:last-child)::after {
  position: absolute;
  top: 39px;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: rgba(255, 255, 255, 0.22);
  content: "";
}

.hero-route > li > span {
  display: grid;
  z-index: 1;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-route strong,
.hero-route small {
  display: block;
}

.hero-route strong {
  margin: 3px 0 4px;
  letter-spacing: 0.04em;
}

.hero-route small {
  color: rgba(255, 255, 255, 0.7);
}

.hero-brief > p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
}

/* Offer-Priority Restructure: this section holds only the relocated 90-Day
   visual, directly beneath the hero. Zeroing its top padding keeps the image
   reading as an immediate continuation of the hero (whatever the hero's own
   bottom padding happens to be) instead of a separate, distantly-spaced
   section; bottom padding stays the standard 124px so the Intent Gap section
   below still gets the page's normal section rhythm. */
.ninety-day-showcase {
  padding-block: 0 124px;
}

.recognition {
  background: var(--green-soft);
}

.recognition h2 {
  max-width: 880px;
}

.statement {
  margin-bottom: 48px;
  color: var(--blue);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.two-column-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
}

.two-column-copy p {
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.75;
}

.comparison-table {
  margin-top: 54px;
  border-top: 2px solid var(--blue);
}

.comparison-header,
.comparison-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparison-header {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.comparison-header span,
.comparison-row span {
  padding: 21px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.comparison-header span:last-child,
.comparison-row span:last-child {
  border-left: 1px solid var(--gray-200);
}

.comparison-row span:first-child {
  color: var(--gray-500);
}

.comparison-row span:last-child {
  color: var(--blue);
  font-weight: 600;
}

.journey {
  background: var(--paper);
}

.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  align-items: end;
  gap: 60px;
  margin-bottom: 64px;
}

.section-heading-row h2,
.section-heading-row p {
  margin-bottom: 0;
}

.section-heading-row p {
  max-width: 470px;
  font-size: 1.05rem;
}

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

.stage-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 34px;
  border: 1px solid var(--gray-200);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--white);
}

.stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

.stage-topline > span {
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 700;
}

.stage-topline small {
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-700);
  font-size: 0.7rem;
  font-weight: 600;
}

.stage-card h3 {
  margin-bottom: 18px;
  font-size: 2rem;
}

.stage-card > p {
  min-height: 106px;
  margin-bottom: 28px;
}

.stage-card h4 {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.stage-card ul {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.stage-card li {
  position: relative;
  padding: 7px 0 7px 17px;
  color: var(--gray-700);
  font-size: 0.9rem;
}

.stage-card li::before {
  position: absolute;
  top: 17px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.stage-outcome {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--gray-200);
}

.stage-outcome span {
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.stage-outcome p {
  margin: 8px 0 0;
  color: var(--blue);
  font-size: 0.93rem;
  font-weight: 600;
}

.program {
  background: var(--blue);
}

.program .eyebrow,
.program h2,
.program p,
.program dt,
.program dd {
  color: var(--white);
}

.program .eyebrow::before {
  background: var(--green);
}

.program-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 90px;
}

.program-intro > p {
  max-width: 610px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.06rem;
}

.program-clarification {
  margin: 32px 0;
  padding: 20px 22px;
  border-left: 4px solid var(--green);
  background: rgba(255, 255, 255, 0.07);
}

.program .button-primary {
  background: var(--white);
  color: var(--blue);
}

.program .button-primary:hover {
  background: var(--green-soft);
}

/* Dual-Path Conversion Architecture: on the dark Program background, a
   solid-white secondary button would read as visually equal to the primary
   purchase CTA above. An outline/ghost treatment keeps it clearly visible
   while staying subordinate, without resorting to aggressive ecommerce
   styling. */
.program .button-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--white);
}

.program .button-secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.route-outline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.route-outline li {
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
}

.route-outline span {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.route-outline strong {
  display: block;
  color: var(--white);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.route-outline small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.program-note {
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.fact-list {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.fact-list > div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.fact-list dt {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fact-list dd {
  margin: 0;
  font-weight: 600;
}

.build-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(450px, 1.15fr);
  gap: 90px;
}

.deliverable-list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--blue);
  list-style: none;
}

.deliverable-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--blue);
  font-weight: 500;
}

.deliverable-list li > span:first-child {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 700;
}

.measurement {
  background: var(--green-soft);
}

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

.checkpoint-grid article {
  padding: 34px;
  border: 1px solid rgba(29, 42, 124, 0.12);
  border-radius: var(--radius-md);
  background: var(--white);
}

.checkpoint-grid article > span {
  display: inline-grid;
  width: 48px;
  height: 48px;
  margin-bottom: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
}

.checkpoint-grid h3 {
  margin-bottom: 16px;
  font-size: 1.45rem;
}

.checkpoint-grid p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

/* Final Price Sequencing Correction: a single, restrained decision-stage
   presentation of price. Paper background (already used for .journey and
   .ruta as a subtle section-rhythm tint) sets it apart from the green-soft
   Measurable Progression section above and the white Is This For You
   section below, without introducing a new color or a heavy pricing-table
   treatment. */
.investment {
  background: var(--paper);
}

.investment-inner {
  text-align: left;
}

.investment-price {
  margin: 10px 0 28px;
  color: var(--blue);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.investment-price::before {
  display: block;
  width: 80px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--gold);
  content: "";
}

.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 90px;
}

.check-list,
.not-fit ul {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}

.check-list li > span:first-child {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
}

.not-fit {
  align-self: start;
  padding: 42px;
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.not-fit > span {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.not-fit h3 {
  margin: 18px 0 28px;
}

.not-fit ul {
  margin: 0 0 32px;
}

.not-fit li {
  position: relative;
  padding: 9px 0 9px 20px;
  color: var(--gray-700);
  font-size: 0.92rem;
}

.not-fit li::before {
  position: absolute;
  top: 21px;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--green);
  content: "";
}

.ruta {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  background: var(--paper);
}

.ruta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
  gap: 100px;
}

.ruta-grid > div > p {
  max-width: 690px;
  font-size: 1.05rem;
}

.principle-list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--blue);
  list-style: none;
}

.principle-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--blue);
  font-weight: 600;
}

.principle-list li > span:first-child {
  color: var(--blue);
  font-size: 0.74rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  gap: 100px;
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: 150px;
}

.faq-intro p {
  max-width: 410px;
}

.faq-list {
  border-top: 2px solid var(--blue);
}

.faq-list details {
  border-bottom: 1px solid var(--gray-200);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 24px;
  padding: 18px 0;
  color: var(--blue);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

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

.faq-list summary span {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 160ms ease;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 760px;
  padding: 0 54px 24px 0;
}

.final-cta {
  background: var(--blue);
}

.final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-cta .eyebrow,
.final-cta h2,
.final-cta p,
.final-cta small {
  color: var(--white);
}

.final-cta h2 {
  margin-inline: auto;
}

.final-cta p {
  max-width: 690px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
}

.final-cta .button-primary {
  background: var(--white);
  color: var(--blue);
}

.final-cta .button-primary:hover {
  background: var(--green-soft);
}

/* Dual-Path Conversion Architecture: same outline/ghost secondary treatment
   as .program .button-secondary, kept visible but subordinate on the dark
   background. */
.final-cta .button-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--white);
}

.final-cta .button-secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.final-cta small {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.65);
}

/* v2.0 executive gold refinement (Phase 2.2). Gold sits mainly over blue:
   hero capability panel, one program distinction, a coherent final CTA, and a
   single investment accent. Green stays the transformation signal. */

/* Hero capability panel: gold kicker with a short rule and a fine gold divider */
.hero-brief .brief-heading {
  border-bottom-color: var(--gold);
}

.hero-brief .brief-heading span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}

.hero-brief .brief-heading span::before {
  width: 40px;
  height: 2px;
  background: var(--gold);
  content: "";
}

/* Program: gold eyebrow with its bar, plus one gold rule heading the offer facts */
.program .eyebrow {
  color: var(--gold);
}

.program .eyebrow::before {
  background: var(--gold);
}

.program .fact-list {
  border-top: 2px solid var(--gold);
}

/* Final conversion: gold eyebrow flanked by matching rules and a gold top border */
.final-cta {
  border-top: 2px solid var(--gold);
}

.final-cta .eyebrow {
  color: var(--gold);
}

.final-cta .eyebrow::before,
.final-cta .eyebrow::after {
  width: 34px;
  height: 2px;
  background: var(--gold);
  content: "";
}

/* v2.0 environmental band: Blue > Digital Blue > Cyan > Green */
.site-footer {
  position: relative;
  padding-block: 60px;
  background: var(--white);
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #1d2a7c 0%, #099ae6 35%, #3ed7ff 65%, #14b58a 100%);
  content: "";
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr) minmax(280px, 1fr);
  align-items: start;
  gap: 50px;
}

.footer-grid strong,
.footer-grid > div > span {
  display: block;
  color: var(--blue);
}

.footer-grid strong {
  margin-bottom: 4px;
  font-size: 1.05rem;
}

.footer-grid > div > span {
  font-size: 0.85rem;
}

.footer-grid p {
  margin: 16px 0 0;
  color: var(--gray-500);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.footer-grid nav a,
.footer-grid nav button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-700);
  cursor: pointer;
  font-size: 0.82rem;
  text-align: left;
}

.footer-grid nav a:hover,
.footer-grid nav button:hover {
  color: var(--green);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}

.footer-meta span:last-child {
  color: var(--gray-500);
  font-size: 0.75rem;
}

.modal-backdrop {
  display: grid;
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: 24px;
  place-items: center;
  overflow-y: auto;
  background: rgba(13, 21, 54, 0.78);
}

.modal-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100svh - 48px);
  padding: 46px;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 30px 90px rgba(7, 13, 47, 0.32);
}

.modal-panel-wide {
  width: min(900px, 100%);
}

.modal-close {
  display: grid;
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.modal-heading {
  max-width: 720px;
  padding-right: 44px;
}

.modal-heading h2,
.legal-content h2,
.form-success h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.modal-heading p {
  max-width: 650px;
}

.fit-form {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}

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

.fit-form label:not(.consent-row):not(.honeypot) {
  display: grid;
  gap: 8px;
}

.fit-form label > span {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
}

.fit-form small {
  color: var(--gray-500);
  font-weight: 400;
}

.fit-form input,
.fit-form select,
.fit-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}

.fit-form textarea {
  resize: vertical;
}

.fit-form input:focus,
.fit-form select:focus,
.fit-form textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(20, 181, 138, 0.22);
}

.consent-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  color: var(--gray-700);
  cursor: pointer;
  font-size: 0.8rem;
}

.consent-row input {
  width: 20px;
  min-height: 20px;
  margin: 2px 0 0;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button-submit {
  width: 100%;
  min-height: 56px;
}

.button-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-note,
.form-error {
  margin: -6px 0 0;
  font-size: 0.78rem;
  text-align: center;
}

.form-error {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #fff0f0;
  color: #8b1d2c;
  font-weight: 600;
}

.form-success {
  padding: 38px 10px 20px;
  text-align: center;
}

.success-kicker {
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.form-success h2 {
  margin: 20px auto;
}

.form-success p {
  max-width: 520px;
  margin: 0 auto 30px;
}

.legal-content {
  padding-right: 32px;
}

.legal-content p {
  line-height: 1.8;
}

/* ===========================================================================
   VISUAL SLOTS (Sprint 2B)
   ===========================================================================
   Layout-safe placeholder architecture for approved presentation-derived
   graphics. Ships [hidden] (see the global [hidden] rule at the top of this
   file) so an unpopulated slot renders nothing (no box, no broken-image
   icon, no stray whitespace). script.js removes `hidden` only when
   window.TOTC_VISUALS supplies a src for that slot; the frame's aspect-ratio
   and styling need no further change when that happens. */
.visual-slot {
  margin: 0;
}

.visual-slot:not([hidden]) {
  margin-top: 48px;
}

/* Offer-Priority Restructure: the ninety-day-route visual-slot no longer
   lives inside .program-grid (it moved to its own standalone section
   directly after the hero, see .ninety-day-showcase below), so the
   .program-visual-full grid-spanning rule from the 90-Day Visual Scale
   Remediation and its Layout-Normalization-Pass margin override are no
   longer reachable by any element in the page and have been removed
   rather than left as dead CSS. The image now gets its spacing from the
   standard .visual-slot:not([hidden]) margin-top: 48px above, same as
   every other standalone campaign visual on the page, plus
   .ninety-day-showcase's own tightened top padding below. */

/* Campaign Image Aspect Ratio Remediation: the frame no longer forces a
   16:9 box via a CSS aspect-ratio, and the image no longer uses
   object-fit: cover to crop itself to fit that box. The approved campaign
   masters define the correct proportions; the frame now sizes to whatever
   ratio the image actually is (via width: 100%; height: auto below), so a
   future approved image at a different intrinsic ratio renders correctly
   with zero CSS change and zero cropping. overflow: hidden is kept only so
   the border-radius still rounds the image's own corners. */
.visual-slot-frame {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
}

.visual-slot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.visual-slot figcaption {
  margin-top: 18px;
  color: var(--gray-500);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

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

@media (max-width: 1120px) {
  .nav-shell {
    min-height: 100px;
  }

  .brand-signature,
  .brand-signature img {
    width: 240px;
    height: 90px;
  }

  .primary-nav {
    gap: 10px;
    font-size: 0.74rem;
  }

  .nav-cta {
    padding-inline: 12px;
    font-size: 0.72rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
    gap: 48px;
  }

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

  .stage-card {
    display: grid;
    grid-template-columns: minmax(200px, 0.65fr) minmax(0, 1.35fr);
    column-gap: 40px;
  }

  .stage-topline,
  .stage-card h3,
  .stage-card > p {
    grid-column: 1;
  }

  .stage-card > p {
    min-height: auto;
  }

  .stage-card h4,
  .stage-card ul {
    grid-column: 2;
  }

  .stage-card h4 {
    grid-row: 1;
    align-self: end;
  }

  .stage-card ul {
    grid-row: 2 / span 3;
  }

  .stage-outcome {
    grid-column: 1 / -1;
  }
}

/* Layout Normalization Pass: the Spanish nav labels plus the Spanish CTA
   button ("Solicitar una Conversación de Compatibilidad") run measurably
   longer than their English equivalents. Between 921px and 1024px, the
   previous single nav-collapse breakpoint (920px) left the full desktop
   nav row active with no room left for the longer Spanish strings, causing
   real horizontal overflow (confirmed up to 72px at 921px) that did not
   affect English. Rather than keep shrinking nav type into an
   ever-narrower band, the existing hamburger-menu pattern (already used
   below 920px) is extended up to 1024px, exactly at the site's own
   "tablet" checkpoint width. Nothing else in this rule set changes: the
   1024px collapse below applies to nav elements only, so the two-column
   section grids (hero, program, build, fit, ruta) still collapse to a
   single column at their existing 920px breakpoint, unchanged. */
@media (max-width: 1024px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: 90px;
    right: 16px;
    left: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .primary-nav.nav-open {
    display: flex;
  }

  .primary-nav > a {
    padding: 13px 8px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
  }

  .nav-cta {
    margin-top: 14px;
    font-size: 0.8rem;
    padding-inline: 22px;
  }

  .lang-toggle {
    align-self: flex-start;
    margin-top: 4px;
  }
}

@media (max-width: 920px) {
  html {
    scroll-padding-top: 96px;
  }

  .section-block {
    padding-block: 92px;
  }

  .nav-shell {
    min-height: 90px;
  }

  .brand-signature,
  .brand-signature img {
    width: 216px;
    height: 81px;
  }

  .route-outline {
    grid-template-columns: 1fr;
  }

  .hero,
  .program-grid,
  .build-grid,
  .fit-grid,
  .ruta-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-block: 72px 88px;
  }

  .hero-brief {
    width: min(620px, 100%);
  }

  .two-column-copy,
  .section-heading-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-heading-row {
    margin-bottom: 48px;
  }

  .program-grid,
  .build-grid,
  .fit-grid,
  .ruta-grid,
  .faq-grid {
    gap: 58px;
  }

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

  .checkpoint-grid article {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 18px;
  }

  .checkpoint-grid article > span {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .checkpoint-grid h3,
  .checkpoint-grid p {
    grid-column: 2;
  }

  .faq-intro {
    position: static;
  }

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

  .footer-meta {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 82px;
  }

  body {
    font-size: 15px;
  }

  .section-shell,
  .narrow-shell {
    width: min(100% - 32px, 1240px);
  }

  .section-block {
    padding-block: 74px;
  }

  .nav-shell {
    width: calc(100% - 20px);
    min-height: 80px;
  }

  .brand-signature,
  .brand-signature img {
    width: 186px;
    height: 70px;
  }

  .primary-nav {
    top: 80px;
    right: 10px;
    left: 10px;
  }

  .hero {
    gap: 42px;
    /* Dual-Path Conversion Architecture trimmed this from 58px/72px (top) to
       24px so the stacked two-CTA button-row fit within a typical mobile
       first viewport. Hero Simplification + Price Sequencing Adjustment
       removed enough hero content (price/measurement facts, microcopy, the
       redundant journey link) to restore most of that breathing room while
       both CTAs still comfortably fit above the fold. */
    padding-block: 46px 72px;
  }

  h1 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  h2 {
    font-size: clamp(2.1rem, 10.5vw, 3.25rem);
  }

  .hero-lede {
    font-size: 1.05rem;
  }

  .button-row {
    flex-direction: column;
  }

  .button-row .button {
    width: 100%;
  }

  .hero-brief,
  .not-fit {
    padding: 30px 24px;
    border-radius: var(--radius-md);
  }

  .two-column-copy {
    gap: 16px;
  }

  .comparison-header {
    display: none;
  }

  .comparison-row {
    grid-template-columns: 1fr;
    padding: 18px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .comparison-row span {
    padding: 5px 0;
    border: 0;
  }

  .comparison-row span:last-child {
    border-left: 0;
  }

  .comparison-row span::before {
    display: block;
    margin-bottom: 2px;
    color: var(--gray-500);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .stage-card {
    display: flex;
    padding: 28px 24px;
  }

  .stage-card > p {
    min-height: auto;
  }

  .fact-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .deliverable-list li {
    grid-template-columns: 38px 1fr;
  }

  .checkpoint-grid article {
    display: block;
    padding: 28px 24px;
  }

  .checkpoint-grid article > span {
    margin-bottom: 24px;
  }

  .checkpoint-grid h3,
  .checkpoint-grid p {
    grid-column: auto;
  }

  .footer-grid,
  .footer-grid nav {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    gap: 34px;
  }

  .footer-grid nav {
    gap: 7px;
  }

  .footer-grid nav a,
  .footer-grid nav button {
    min-height: 44px;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal-panel {
    width: 100%;
    max-height: 94svh;
    padding: 42px 20px 28px;
    border-radius: 22px 22px 0 0;
  }

  .modal-close {
    top: 12px;
    right: 12px;
  }

  .modal-heading {
    padding-right: 30px;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}