/* ==========================================================================
   O-Range Cybersecurity Funnel — Exact Figma Multi-Breakpoint Implementation
   Desktop (#299:2381 - 1440px) | Tablet (#289:1641 - 834px) | Mobile (#310:11 - 440px)
   ========================================================================== */

:root {
  /* Core Figma Color Palette */
  --bg-page: #16203A;
  --bg-dark: #091122;
  --orange-primary: #FF7B00;
  --orange-expect: #FF9633;
  --orange-mod-light: #FFAB5C;
  --orange-mod-mid: #FF9A3C;
  --orange-mod-dark: #FF7B00;
  --orange-faq: #FFA149;
  --orange-tick: #FF8E25;
  --orange-divider: rgba(255, 123, 0, 0.8);
  --text-white: #FFFFFF;
  --text-muted: #7B7B7B;
  --text-light-blue: #BBD1FF;
  --text-faq-answer: #24304A;
  --black: #000000;

  /* Font Families */
  --font-chakra: 'Chakra Petch', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-manrope: 'Manrope', sans-serif;

  /* Fluid unit: scaled to 75% (~25% proportional reduction) for Desktop screens (>1024px)
     so typography, buttons, cards, and spacing comfortably fit standard desktop monitors
     while preserving 100% of Figma branding, relative spacing, and visual arrangement */
  --desktop-scale: 0.75;
  --u: min(calc((100vw / 1440) * var(--desktop-scale)), calc(1px * var(--desktop-scale)));
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-page);
  color: var(--text-white);
  font-family: var(--font-manrope);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-page);
  overflow-x: hidden;
  min-height: 100vh;
}

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

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

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.text-orange {
  color: var(--orange-primary);
}

/* Main Funnel Container */
.funnel-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--bg-page);
  position: relative;
  overflow-x: hidden;
}

/* ==========================================================================
   1. HEADER / NAVBAR
   ========================================================================== */
.site-header {
  width: calc(1376 * var(--u));
  margin: calc(99 * var(--u)) auto 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(70 * var(--u));
  position: relative;
  z-index: 50;
}

.brand-logo-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(14.57 * var(--u));
  flex-shrink: 0;
}

.brand-logo-img {
  width: calc(51 * var(--u));
  height: calc(51 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

.brand-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(7.56 * var(--u));
}

.brand-title {
  font-family: var(--font-chakra);
  font-weight: 700;
  font-size: calc(27.3236 * var(--u));
  line-height: 1;
  color: var(--text-white);
  display: block;
}

.brand-subtitle {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(21.0303 * var(--u));
  line-height: 1;
  color: var(--orange-primary);
  display: block;
}

.site-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(18 * var(--u));
  flex-wrap: nowrap;
}

.nav-link {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: calc(28.6927 * var(--u));
  line-height: calc(34.43 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-white);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--orange-primary);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.menu-hamburger-icon {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

/* ==========================================================================
   2. REUSABLE CTA BRACKET BUTTON
   ========================================================================== */
.cta-bracket-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-bracket-btn .cta-inner {
  background-color: var(--orange-primary);
  border: calc(2 * var(--u)) solid var(--bg-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.cta-bracket-btn .cta-text {
  font-family: var(--font-manrope);
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
}

.btn-corner {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.corner-tl {
  top: 0;
  left: 0;
}

.corner-tr {
  top: 0;
  right: 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
}

.corner-br {
  bottom: 0;
  right: 0;
}

/* ==========================================================================
   CTA BRACKET BUTTON INTERACTION STATES (Desktop Hover + Cross-Screen Active)
   ========================================================================== */

/* Universal On-Click / Active Effect (Desktop, Tablet, Mobile across all browsers) */
.cta-bracket-btn:active {
  transform: translateY(1px) scale(0.975);
  transition: transform 0.08s ease;
}

.cta-bracket-btn:active .cta-inner {
  filter: brightness(0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: filter 0.08s ease, box-shadow 0.08s ease;
}

.cta-bracket-btn:active .corner-tl {
  transform: translate(1px, 1px);
  transition: transform 0.08s ease;
}

.cta-bracket-btn:active .corner-tr {
  transform: translate(-1px, 1px);
  transition: transform 0.08s ease;
}

.cta-bracket-btn:active .corner-bl {
  transform: translate(1px, -1px);
  transition: transform 0.08s ease;
}

.cta-bracket-btn:active .corner-br {
  transform: translate(-1px, -1px);
  transition: transform 0.08s ease;
}

/* Desktop Hover Effect (Desktop Only: mouse pointer & viewport > 1024px) */
@media (hover: hover) and (min-width: 1025px) {
  .cta-bracket-btn:hover {
    transform: translateY(-2px);
  }

  .cta-bracket-btn:hover .cta-inner {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(255, 123, 0, 0.35);
  }

  .cta-bracket-btn:hover .corner-tl {
    transform: translate(-3px, -3px);
  }

  .cta-bracket-btn:hover .corner-tr {
    transform: translate(3px, -3px);
  }

  .cta-bracket-btn:hover .corner-bl {
    transform: translate(-3px, 3px);
  }

  .cta-bracket-btn:hover .corner-br {
    transform: translate(3px, 3px);
  }

  /* When desktop button is clicked while hovered */
  .cta-bracket-btn:active {
    transform: translateY(1px) scale(0.975);
  }
}

/* Mobile & Tablet Only (Touch Devices <= 1024px) — No Sticky Hover, Only On-Click */
@media (max-width: 1024px) {
  .cta-bracket-btn:hover {
    transform: none;
  }

  .cta-bracket-btn:hover .cta-inner {
    filter: none;
    box-shadow: none;
  }

  .cta-bracket-btn:hover .corner-tl,
  .cta-bracket-btn:hover .corner-tr,
  .cta-bracket-btn:hover .corner-bl,
  .cta-bracket-btn:hover .corner-br {
    transform: none;
  }

  /* Pure on-click / touch-down active feedback for mobile & tablet */
  .cta-bracket-btn:active {
    transform: translateY(1.5px) scale(0.97);
    transition: transform 0.06s ease;
  }

  .cta-bracket-btn:active .cta-inner {
    filter: brightness(0.90);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: filter 0.06s ease;
  }

  .cta-bracket-btn:active .corner-tl {
    transform: translate(1px, 1px);
    transition: transform 0.06s ease;
  }

  .cta-bracket-btn:active .corner-tr {
    transform: translate(-1px, 1px);
    transition: transform 0.06s ease;
  }

  .cta-bracket-btn:active .corner-bl {
    transform: translate(1px, -1px);
    transition: transform 0.06s ease;
  }

  .cta-bracket-btn:active .corner-br {
    transform: translate(-1px, -1px);
    transition: transform 0.06s ease;
  }
}

/* ==========================================================================
   3. HERO SECTION & BRANDS
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: calc(154 * var(--u));
  /* 304 - (99 + 51) = 154 */
}

.hero-inner {
  width: 100%;
  position: relative;
}

.hero-heading {
  width: calc(1208 * var(--u));
  margin: 0 auto;
  font-family: var(--font-chakra);
  font-weight: 700;
  font-size: calc(59.4692 * var(--u));
  line-height: 1;
  text-align: center;
  color: var(--text-white);
}

.hero-banner-wrap {
  margin-top: calc(73 * var(--u));
  /* 613 - (304 + 236) = 73 */
  width: calc(1235 * var(--u));
  height: calc(537.34 * var(--u));
  margin-left: 0;
}

.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(-1);
}

.hero-cta-wrap {
  margin-top: calc(100.66 * var(--u));
  /* 1251 - (613 + 537.34) = 100.66 */
  display: flex;
  justify-content: center;
}

/* Hero Button Exact Sizing (Desktop: 755 x 120.48) */
.cta-hero {
  width: calc(755 * var(--u));
  height: calc(120.48 * var(--u));
}

.cta-hero .cta-inner {
  width: calc(748.48 * var(--u));
  height: calc(113.96 * var(--u));
  padding: calc(28.87 * var(--u));
  border-width: calc(2.01 * var(--u));
}

.cta-hero .cta-text {
  font-size: calc(45.1762 * var(--u));
  line-height: calc(54.21 * var(--u));
}

.cta-hero .btn-corner {
  width: calc(52.21 * var(--u));
  height: calc(28.11 * var(--u));
}

/* Brands We Have Helped Secure */
.brands-block {
  width: 100%;
  margin-top: calc(97.21 * var(--u));
  /* 1468.69 - (1251 + 120.48) = 97.21 */
}

.brands-heading {
  width: calc(1376 * var(--u));
  max-width: calc(100% - 64 * var(--u));
  margin: 0 auto;
  padding-left: calc(32 * var(--u));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(39 * var(--u));
  line-height: calc(46.8 * var(--u));
  color: var(--text-white);
}

.brands-strip {
  margin-top: calc(38.71 * var(--u));
  /* 1549 - (1468.69 + 41.6) = 38.71 */
  width: 100%;
  height: calc(188.37 * var(--u));
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.brands-logos-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  position: relative;
  z-index: 1;
  will-change: transform;
  animation: brands-marquee 22s linear infinite;
}

.brands-logos-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(97.4021 * var(--u));
  padding-right: calc(97.4021 * var(--u));
  flex-shrink: 0;
}

@keyframes menuModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

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

@keyframes brands-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.brand-logo-1 {
  width: calc(299.57 * var(--u));
  height: calc(58.31 * var(--u));
  object-fit: fill;
  flex-shrink: 0;
}

.brand-logo-fb {
  width: calc(94.18 * var(--u));
  height: calc(94.18 * var(--u));
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo-att {
  width: calc(266.36 * var(--u));
  height: calc(94.17 * var(--u));
  object-fit: fill;
  flex-shrink: 0;
}

.brand-logo-wa {
  width: calc(406.62 * var(--u));
  height: calc(94.03 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

.brand-logo-square {
  width: calc(97.4 * var(--u));
  height: calc(97.4 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

.brand-logo-4 {
  width: calc(275.58 * var(--u));
  height: calc(97.54 * var(--u));
  object-fit: fill;
  flex-shrink: 0;
}

.brands-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(18, 31, 56, 1) 0%, rgba(39, 68, 124, 0) 50%, rgba(7, 12, 22, 1) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   4. READY TO LEARN & SIX MONTHS SECTION (#300:2404)
   ========================================================================== */
.ready-learn-panel {
  width: 100%;
  min-height: calc(1253.01 * var(--u));
  background-color: var(--bg-dark);
  padding-top: calc(87.49 * var(--u));
  padding-bottom: calc(65 * var(--u));
  position: relative;
}

.ready-learn-content {
  width: calc(1237.39 * var(--u));
  max-width: calc(100% - 64 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56.2449 * var(--u));
}

.ready-learn-heading {
  width: calc(1235.9 * var(--u));
  font-family: var(--font-chakra);
  font-weight: 700;
  font-size: calc(49.9955 * var(--u));
  line-height: calc(46.87 * var(--u));
  letter-spacing: -0.0269em;
  text-align: left;
  color: var(--text-white);
}

.ready-learn-body {
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(31.2472 * var(--u));
  line-height: calc(31.25 * var(--u));
  letter-spacing: -0.043em;
  color: var(--text-white);
  text-align: left;
}

.ready-learn-body p {
  margin: 0;
}

.see-what-link {
  margin-top: calc(80.6 * var(--u));
  margin-left: auto;
  margin-right: auto;
  width: calc(468.71 * var(--u));
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.see-what-arrow {
  width: calc(31.25 * var(--u));
  height: calc(31.25 * var(--u));
  flex-shrink: 0;
}

.see-what-text {
  font-family: var(--font-chakra);
  font-weight: 700;
  font-size: calc(31.2472 * var(--u));
  line-height: calc(46.87 * var(--u));
  letter-spacing: -0.043em;
  color: var(--text-white);
  text-align: center;
}

/* Six months. One clear path. */
.six-months-block {
  margin-top: calc(156.23 * var(--u));
  /* 715.56 - (512.46 + 46.87) = 156.23 */
  width: calc(1256.14 * var(--u));
  max-width: calc(100% - 64 * var(--u));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: calc(56.2449 * var(--u));
}

.six-months-heading {
  font-family: var(--font-chakra);
  font-weight: 700;
  font-size: calc(49.9955 * var(--u));
  line-height: calc(46.87 * var(--u));
  letter-spacing: -0.0269em;
  color: var(--text-white);
  text-align: left;
}

.path-cards-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(87.4921 * var(--u));
}

.path-card {
  position: relative;
  width: calc(353.09 * var(--u));
  height: calc(353.09 * var(--u));
  flex-shrink: 0;
}

.path-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.path-card-inner {
  position: absolute;
  z-index: 1;
}

.path-card-inner-1 {
  left: calc(15.62 * var(--u));
  top: calc(9.37 * var(--u));
  width: calc(312.47 * var(--u));
  height: calc(318.61 * var(--u));
}

.path-card-inner-2 {
  left: calc(15.62 * var(--u));
  top: calc(15.62 * var(--u));
  width: calc(293.72 * var(--u));
  height: calc(320.86 * var(--u));
}

.path-card-inner-3 {
  left: calc(15.62 * var(--u));
  top: calc(15.62 * var(--u));
  width: calc(324.87 * var(--u));
  height: calc(290.1 * var(--u));
}

.path-card-icon {
  position: absolute;
  left: 0;
  top: 0;
}

.icon-months {
  width: calc(69.71 * var(--u));
  height: calc(77.05 * var(--u));
  object-fit: fill;
}

.icon-modules {
  width: calc(59.37 * var(--u));
  height: calc(46.87 * var(--u));
  object-fit: fill;
}

.icon-installments {
  width: calc(59.37 * var(--u));
  height: calc(59.37 * var(--u));
  object-fit: cover;
}

.path-card-body {
  position: absolute;
}

.path-card-body-1 {
  left: calc(78.12 * var(--u));
  top: calc(31.25 * var(--u));
  width: calc(234.35 * var(--u));
  height: calc(287.36 * var(--u));
}

.path-card-body-2 {
  left: calc(59.37 * var(--u));
  top: calc(37.5 * var(--u));
  width: calc(234.35 * var(--u));
  height: calc(283.36 * var(--u));
}

.path-card-body-3 {
  left: calc(46.87 * var(--u));
  top: calc(37.5 * var(--u));
  width: calc(278 * var(--u));
  height: calc(252.61 * var(--u));
}

.path-card-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(12.4989 * var(--u));
}

.stat-months {
  width: calc(140.61 * var(--u));
  height: calc(143.74 * var(--u));
}

.stat-modules {
  width: calc(162.49 * var(--u));
  height: calc(128.11 * var(--u));
}

.stat-installments {
  height: calc(143.74 * var(--u));
}

.path-stat-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(74.9932 * var(--u));
  line-height: calc(84.37 * var(--u));
  letter-spacing: -0.0394em;
  color: var(--text-light-blue);
  display: block;
}

.path-stat-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(40.1749 * var(--u));
  line-height: calc(46.87 * var(--u));
  letter-spacing: -0.0394em;
  color: var(--text-light-blue);
  display: block;
}

.path-card-desc {
  position: absolute;
  width: calc(174.98 * var(--u));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(18.236 * var(--u));
  line-height: calc(20.52 * var(--u));
  letter-spacing: -0.1183em;
  text-align: right;
  color: var(--text-light-blue);
}

.desc-months {
  left: calc(59.37 * var(--u));
  top: calc(184.36 * var(--u));
}

.desc-modules {
  left: calc(59.37 * var(--u));
  top: calc(159.36 * var(--u));
}

.desc-installments {
  left: calc(90.62 * var(--u));
  top: calc(190.61 * var(--u));
}

/* ==========================================================================
   5. WHAT YOU'LL BE ABLE TO DO (#305:2547)
   ========================================================================== */
.skills-section {
  width: calc(1376 * var(--u));
  margin: calc(100.99 * var(--u)) auto 0;
  /* 3093 - (1739 + 1253.01) = 100.99 */
}

.skills-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.skills-header-col {
  width: calc(559 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(43.1845 * var(--u));
  flex-shrink: 0;
}

.skills-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(38.3863 * var(--u));
  line-height: calc(35.99 * var(--u));
  letter-spacing: -0.0317em;
  color: var(--text-white);
}

.skills-subtitle {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(28.7897 * var(--u));
  line-height: calc(35.99 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--text-muted);
}

.skills-list-col {
  width: calc(784 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(49.8909 * var(--u));
}

.skills-items-wrap {
  width: calc(726.56 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(32.0727 * var(--u));
}

.skill-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(3.3633 * var(--u));
  gap: calc(28.5091 * var(--u));
}

.skill-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(13.4534 * var(--u));
}

.skill-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-style: italic;
  font-size: calc(41.0681 * var(--u));
  line-height: calc(51.34 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--text-white);
  flex-shrink: 0;
}

.skill-text {
  width: calc(578.49 * var(--u));
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(30.27 * var(--u));
  line-height: calc(33.63 * var(--u));
  letter-spacing: -0.0573em;
  color: var(--text-white);
  flex-shrink: 0;
}

.skill-text strong {
  font-weight: 700;
}

.skill-icon {
  width: calc(60.58 * var(--u));
  height: calc(60.58 * var(--u));
  flex-shrink: 0;
}

.skill-icon-01 {
  width: calc(63.9 * var(--u));
  height: calc(63.9 * var(--u));
}

.skill-dashed-line {
  width: 100%;
  height: 0;
  border-bottom: calc(1.6817 * var(--u)) dashed var(--text-white);
}

.skills-footer-note {
  width: calc(726.98 * var(--u));
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: calc(26.16 * var(--u));
  letter-spacing: -0.0589em;
  color: var(--orange-primary);
  text-align: left;
}

/* Section Dashed Orange Divider */
.section-orange-divider {
  width: 100%;
  height: 0;
  border-bottom: calc(3.12 * var(--u)) dashed var(--orange-divider);
}

.skills-divider {
  width: calc(1376 * var(--u));
  align-self: flex-start;
  margin-left: calc(-592 * var(--u));
  border-bottom-width: calc(1.7818 * var(--u));
}

/* ==========================================================================
   6. WHAT TO EXPECT (#305:2548)
   ========================================================================== */
.expect-section {
  width: calc(1376 * var(--u));
  margin: calc(95 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(94.4314 * var(--u));
}

.expect-header {
  display: flex;
  flex-direction: column;
  gap: calc(60.7059 * var(--u));
}

.expect-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(53.9608 * var(--u));
  line-height: calc(50.59 * var(--u));
  letter-spacing: -0.0317em;
  color: var(--text-white);
}

.expect-subtitle {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(40.4706 * var(--u));
  line-height: calc(50.59 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--text-muted);
}

.expect-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(94.4314 * var(--u));
}

.expect-grid {
  width: calc(1376 * var(--u));
  height: calc(1359.14 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(50.5882 * var(--u));
}

.expect-card {
  background-color: var(--orange-expect);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.expect-card:hover {
  transform: translateY(-4px);
}

.expect-card-content {
  position: absolute;
  left: calc(26.98 * var(--u));
  top: calc(34.3 * var(--u));
  width: calc(370.98 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(80.9412 * var(--u));
}

.expect-card-2 .expect-card-content {
  left: calc(30.35 * var(--u));
  top: calc(26.98 * var(--u));
  width: calc(364.24 * var(--u));
}

.expect-card-3 .expect-card-content {
  left: calc(30.35 * var(--u));
  top: calc(23.8 * var(--u));
  width: calc(364.24 * var(--u));
}

.expect-card-4 .expect-card-content {
  left: calc(26.98 * var(--u));
  top: calc(22.16 * var(--u));
  gap: calc(50.5882 * var(--u));
}

.expect-card-5 .expect-card-content {
  left: calc(26.98 * var(--u));
  top: calc(52.8 * var(--u));
}

.expect-card-6 .expect-card-content {
  left: calc(26.98 * var(--u));
  top: calc(24.11 * var(--u));
  gap: calc(67.451 * var(--u));
}

.expect-card-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(41.2632 * var(--u));
  line-height: calc(49.52 * var(--u));
  letter-spacing: -0.0649em;
  text-align: center;
  color: var(--text-white);
}

.expect-card-title.title-narrow {
  width: calc(340.63 * var(--u));
}

.expect-card-title.title-wide {
  width: calc(364.24 * var(--u));
}

.expect-card-icon {
  width: calc(128.16 * var(--u));
  height: calc(128.16 * var(--u));
  margin-left: calc(114.67 * var(--u));
}

.expect-card-desc {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(41.2632 * var(--u));
  letter-spacing: -0.0649em;
  color: var(--text-white);
  text-align: left;
}

.desc-lh-lg {
  line-height: calc(49.52 * var(--u));
}

.desc-lh-md {
  line-height: calc(43.84 * var(--u));
}

.desc-lh-sm {
  line-height: calc(40.47 * var(--u));
}

/* ==========================================================================
   7. COURSE OUTLINE (#305:2711)
   ========================================================================== */
.outline-section {
  width: calc(1371 * var(--u));
  margin: calc(203.29 * var(--u)) auto 0;
  /* 6009 - (4191.43 + 1614.28) = 203.29 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(74 * var(--u));
}

.outline-header {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(34.2265 * var(--u));
}

.outline-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(45.6354 * var(--u));
  line-height: calc(42.78 * var(--u));
  letter-spacing: -0.0317em;
  color: var(--text-white);
}

.outline-subtitle {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(34.2265 * var(--u));
  line-height: calc(42.78 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--text-muted);
}

.outline-highlight {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(34.2265 * var(--u));
  line-height: calc(42.78 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--orange-primary);
}

.modules-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.module-card {
  position: relative;
  width: calc(412.79 * var(--u));
  height: calc(778.6 * var(--u));
  flex-shrink: 0;
}

.module-card:nth-child(1) {
  z-index: 1;
}

.module-card:nth-child(2) {
  z-index: 2;
}

.module-card:nth-child(3) {
  z-index: 3;
}

.module-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.module-card:not(:last-child) .module-bg-svg {
  width: calc(100% + 2px);
}

.module-inner {
  position: absolute;
  left: calc(20.14 * var(--u));
  width: calc(369.16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(6.7121 * var(--u));
  z-index: 1;
}

.mod-inner-01 {
  top: calc(57.05 * var(--u));
}

.mod-inner-02 {
  top: calc(40.27 * var(--u));
}

.mod-inner-03 {
  top: calc(50.34 * var(--u));
}

.mod-inner-04 {
  top: calc(23.49 * var(--u));
}

.mod-inner-05 {
  top: calc(40.27 * var(--u));
}

.mod-inner-06 {
  top: calc(26.85 * var(--u));
}

.module-top-group {
  display: flex;
  flex-direction: column;
  gap: calc(16.7802 * var(--u));
}

.module-header-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26.8484 * var(--u));
}

.module-title-stack {
  width: calc(277.71 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(50.3407 * var(--u));
}

.module-num-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: calc(26.8484 * var(--u));
}

.mod-num-svg {
  height: calc(58.82 * var(--u));
  width: auto;
  flex-shrink: 0;
}

.mod-num-01 {
  width: calc(90.31 * var(--u));
  height: calc(58.81 * var(--u));
}

.mod-num-02 {
  width: calc(114.26 * var(--u));
  height: calc(58.82 * var(--u));
}

.mod-num-03 {
  width: calc(116.19 * var(--u));
  height: calc(58.82 * var(--u));
}

.mod-num-04 {
  width: calc(108.78 * var(--u));
  height: calc(48.75 * var(--u));
}

.mod-num-05 {
  width: calc(117.05 * var(--u));
  height: calc(58.82 * var(--u));
}

.mod-num-06 {
  width: calc(118.77 * var(--u));
  height: calc(58.82 * var(--u));
}

.mod-word {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(40.2725 * var(--u));
  line-height: calc(37.4 * var(--u));
  letter-spacing: -0.0314em;
  color: var(--text-white);
  width: calc(134.24 * var(--u));
  height: calc(43.63 * var(--u));
  display: flex;
  align-items: flex-end;
}

.mod-name {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(40.2725 * var(--u));
  line-height: calc(37.4 * var(--u));
  letter-spacing: -0.0314em;
  color: var(--text-white);
}

.mod-name-01 {
  width: calc(277.71 * var(--u));
}

.mod-name-02 {
  width: calc(312.11 * var(--u));
}

.mod-name-03 {
  width: calc(302.04 * var(--u));
}

.mod-name-04 {
  width: calc(252 * var(--u));
}

.mod-name-05 {
  width: calc(295 * var(--u));
}

.mod-name-06 {
  width: calc(328.89 * var(--u));
}

.mod-solid-line {
  width: 100%;
  height: 0;
  border-bottom: calc(1.678 * var(--u)) solid var(--text-white);
}

.mod-summary {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(26.8484 * var(--u));
  line-height: calc(26.85 * var(--u));
  letter-spacing: -0.0471em;
  color: var(--text-white);
  margin-top: calc(6.71 * var(--u));
}

.mod-details {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(26.8484 * var(--u));
  line-height: calc(26.85 * var(--u));
  letter-spacing: -0.0471em;
  color: var(--text-white);
  white-space: normal;
  display: flex;
  flex-direction: column;
}

.mod-hyphen {
  display: none;
}

.mod-detail-line {
  display: block;
  position: relative;
  padding-left: calc(28.5 * var(--u));
}

.mod-detail-line::before {
  content: "•";
  position: absolute;
  left: calc(8.4 * var(--u));
  top: 0;
}

.outline-bottom-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(93.9692 * var(--u));
}

/* Secure Your Seat Button (Desktop: 369.16 x 100.68) */
.cta-secure-seat {
  width: calc(369.16 * var(--u));
  height: calc(100.68 * var(--u));
}

.cta-secure-seat .cta-inner {
  padding: calc(24.1246 * var(--u));
  border-width: calc(1.678 * var(--u));
}

.cta-secure-seat .cta-text {
  font-size: calc(37.7527 * var(--u));
  line-height: calc(45.3 * var(--u));
}

.cta-secure-seat .btn-corner {
  width: calc(43.63 * var(--u));
  height: calc(23.49 * var(--u));
}

/* ==========================================================================
   8. BLUEPRINT / RULER-TICK BOX SECTIONS (#305:2713)
   ========================================================================== */
.blueprint-sections-stack {
  width: calc(1376 * var(--u));
  margin: calc(100.58 * var(--u)) auto 0;
  /* 8329 - (6009 + 2219.42) = 100.58 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(84.0305 * var(--u));
}

.bp-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(84.0305 * var(--u));
}

.bp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56.2193 * var(--u));
}

.bp-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(49.9727 * var(--u));
  line-height: calc(46.85 * var(--u));
  letter-spacing: -0.0317em;
  text-align: center;
  color: var(--text-white);
}

.bp-title-sm {
  font-size: calc(49.5856 * var(--u));
  line-height: calc(46.49 * var(--u));
}

.bp-subtitle {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(37.4795 * var(--u));
  line-height: calc(46.85 * var(--u));
  letter-spacing: -0.0422em;
  text-align: center;
  color: var(--text-muted);
}

.bp-subtitle-earning {
  width: calc(1246.19 * var(--u));
  white-space: pre-wrap;
}

.bp-subtitle-left {
  font-size: calc(37.1892 * var(--u));
  line-height: calc(46.49 * var(--u));
}

.bp-subtitle-who {
  width: calc(619.82 * var(--u));
  font-size: calc(37.1892 * var(--u));
  line-height: calc(46.49 * var(--u));
}

.bp-why .bp-header,
.bp-who .bp-header {
  gap: calc(55.7838 * var(--u));
}

/* Earning intro paragraph (shown on Mobile only in Figma) */
.earning-intro-text {
  display: none;
}

/* Blueprint Box with Ruler Ticks */
.blueprint-box {
  position: relative;
  width: calc(1374.25 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-box-tall {
  height: calc(765.21 * var(--u));
}

.bp-box-medium {
  height: calc(537.21 * var(--u));
}

.bp-box-medium-sm {
  width: calc(1363.6 * var(--u));
  height: calc(533.05 * var(--u));
}

.bp-box-short {
  width: calc(1376 * var(--u));
  height: calc(393.59 * var(--u));
}

/* Inner Solid Orange Frame */
.bp-inner-frame {
  width: calc(1274.3 * var(--u));
  padding: calc(24.9864 * var(--u));
  border: calc(1.8115 * var(--u)) solid var(--orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.bp-box-tall .bp-inner-frame {
  height: calc(752.71 * var(--u));
}

.bp-box-medium .bp-inner-frame {
  height: calc(518.47 * var(--u));
}

.bp-box-medium-sm .bp-inner-frame {
  width: calc(1264.43 * var(--u));
  height: calc(514.45 * var(--u));
  padding: calc(24.7928 * var(--u));
  border-width: calc(1.7975 * var(--u));
}

.bp-box-short .bp-inner-frame {
  width: calc(1264.43 * var(--u));
  height: calc(374.99 * var(--u));
  padding: calc(24.7928 * var(--u));
  border-width: calc(1.7975 * var(--u));
}

.bp-who .bp-box-short .bp-inner-frame {
  left: calc(6.195 * var(--u));
}

.bp-inner-final {
  height: auto !important;
  left: 0;
}

.bp-text {
  width: calc(1224.33 * var(--u));
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(46.8494 * var(--u));
  line-height: calc(46.85 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-white);
  white-space: pre-line;
  text-align: left;
}

.bp-text-sm {
  width: calc(1214.85 * var(--u));
  font-size: calc(46.4865 * var(--u));
  line-height: calc(46.49 * var(--u));
}

.bp-text-final {
  white-space: normal;
}

.bp-text-final p {
  margin: 0;
}

.bp-pathways-list {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
  display: flex;
  flex-direction: column;
}

.bp-pathway-item {
  position: relative;
  display: block;
  padding-left: calc(63.2 * var(--u));
}

.bp-pathway-item::before {
  content: "•";
  position: absolute;
  left: calc(21 * var(--u));
  top: 0;
}

.bp-text-sm .bp-pathway-item {
  padding-left: calc(62.75 * var(--u));
}

.bp-text-sm .bp-pathway-item::before {
  left: calc(20.85 * var(--u));
}

.bp-pathways .bp-ticks-col {
  top: calc(18.74 * var(--u));
  bottom: calc(43.73 * var(--u));
}

/* Blueprint Outer Dashed Lines & Ticks (injected via JS for exact tick ladder) */
.bp-guide-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bp-vline-left,
.bp-vline-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: calc(0.8745 * var(--u)) dashed var(--orange-primary);
}

.bp-vline-left {
  left: calc(37.48 * var(--u));
}

.bp-vline-right {
  right: calc(40.6 * var(--u));
}

.bp-box-medium-sm .bp-vline-left {
  left: calc(37.19 * var(--u));
  border-left-width: calc(0.8677 * var(--u));
}

.bp-box-medium-sm .bp-vline-right {
  right: calc(40.29 * var(--u));
  border-left-width: calc(0.8677 * var(--u));
}

.bp-box-short .bp-vline-left {
  left: calc(49.59 * var(--u));
  border-left-width: calc(0.8677 * var(--u));
}

.bp-box-short .bp-vline-right {
  right: calc(40.29 * var(--u));
  border-left-width: calc(0.8677 * var(--u));
}

.bp-hline-top,
.bp-hline-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: calc(0.8745 * var(--u)) dashed var(--orange-tick);
}

.bp-hline-top {
  top: 0;
}

.bp-hline-bottom {
  bottom: 0;
}

.bp-box-medium .bp-hline-top {
  right: auto;
  width: calc(1371.13 * var(--u));
}

.bp-box-medium-sm .bp-hline-top {
  right: auto;
  width: calc(1360.5 * var(--u));
  border-top-width: calc(0.8677 * var(--u));
}

.bp-box-medium-sm .bp-hline-bottom {
  border-top-width: calc(0.8677 * var(--u));
}

.bp-box-short .bp-hline-top {
  left: calc(12.4 * var(--u));
  right: auto;
  width: calc(1360.5 * var(--u));
  border-top-width: calc(0.8677 * var(--u));
}

.bp-box-short .bp-hline-bottom {
  left: 0;
  right: auto;
  width: calc(1363.6 * var(--u));
  border-top-width: calc(0.8677 * var(--u));
}

.bp-ticks-col {
  position: absolute;
  top: calc(18.74 * var(--u));
  bottom: calc(18.74 * var(--u));
  width: calc(37.48 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bp-ticks-left {
  left: 0;
}

.bp-ticks-right {
  right: 0;
}

.bp-box-medium .bp-ticks-col {
  top: calc(59.34 * var(--u));
  bottom: calc(28.11 * var(--u));
  width: calc(37.48 * var(--u));
}

.bp-box-medium-sm .bp-ticks-col {
  top: calc(58.88 * var(--u));
  bottom: calc(27.9 * var(--u));
  width: calc(37.19 * var(--u));
}

.bp-box-short .bp-ticks-left {
  left: calc(12.4 * var(--u));
  top: calc(58.88 * var(--u));
  bottom: calc(37.19 * var(--u));
  width: calc(37.19 * var(--u));
}

.bp-box-short .bp-ticks-right {
  right: 0;
  top: calc(58.88 * var(--u));
  bottom: calc(37.19 * var(--u));
  width: calc(37.19 * var(--u));
}

.bp-tick {
  width: 100%;
  height: 0;
  border-top: calc(0.8745 * var(--u)) dashed var(--orange-tick);
}

.bp-box-medium-sm .bp-tick,
.bp-box-short .bp-tick {
  border-top-width: calc(0.8677 * var(--u));
}

/* Orange Notes below Blueprint Boxes */
.bp-orange-note {
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(46.8494 * var(--u));
  line-height: calc(46.85 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--orange-primary);
  text-align: center;
}

.note-two-lines,
.note-who {
  font-size: calc(46.4865 * var(--u));
  line-height: calc(46.49 * var(--u));
}

.note-who {
  width: calc(1221.04 * var(--u));
}

/* CTA: Start Building the skill (Desktop: 424.77 x 90.58) */
.cta-start-skill {
  width: calc(424.77 * var(--u));
  height: calc(90.58 * var(--u));
}

.cta-start-skill .cta-inner {
  width: calc(419.7 * var(--u));
  height: calc(88.63 * var(--u));
  padding: calc(22.4515 * var(--u));
  border-width: calc(1.5616 * var(--u));
}

.cta-start-skill .cta-text {
  font-size: calc(35.1344 * var(--u));
  line-height: calc(42.16 * var(--u));
}

.cta-start-skill .btn-corner {
  width: calc(40.6 * var(--u));
  height: calc(21.86 * var(--u));
}

/* CTA: Yes, This Is for Me: Register (Desktop: 506.32 x 89.88) */
.cta-yes-register {
  width: calc(506.32 * var(--u));
  height: calc(89.88 * var(--u));
}

.cta-yes-register .cta-inner {
  width: calc(503.22 * var(--u));
  height: calc(87.94 * var(--u));
  padding: calc(22.2776 * var(--u));
  border-width: calc(1.5495 * var(--u));
}

.cta-yes-register .cta-text {
  font-size: calc(34.8623 * var(--u));
  line-height: calc(41.83 * var(--u));
}

.cta-yes-register .btn-corner {
  width: calc(40.29 * var(--u));
  height: calc(21.69 * var(--u));
}

/* ==========================================================================
   9. HOW ENROLMENT WORKS (#305:2858)
   ========================================================================== */
.enrolment-section {
  width: calc(1376 * var(--u));
  margin: calc(114 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(75 * var(--u));
}

.enrolment-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(60.7059 * var(--u));
}

.enrolment-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(53.9608 * var(--u));
  line-height: calc(50.59 * var(--u));
  letter-spacing: -0.0317em;
  color: var(--text-white);
}

.enrolment-subtitle {
  width: calc(674.51 * var(--u));
  font-family: var(--font-chakra);
  font-weight: 500;
  font-size: calc(40.4706 * var(--u));
  line-height: calc(50.59 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--text-muted);
  text-align: center;
}

.enrolment-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc(661.02 * var(--u)));
  justify-content: space-between;
  row-gap: calc(94 * var(--u));
}

.step-card {
  width: calc(661.02 * var(--u));
  height: calc(876.86 * var(--u));
  background: linear-gradient(180deg, rgba(255, 123, 0, 1) 0%, rgba(153, 74, 0, 1) 100%);
  border: calc(3.3725 * var(--u)) solid var(--orange-primary);
  border-radius: calc(53.9608 * var(--u));
  position: relative;
  transition: transform 0.25s ease;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-card-inner {
  position: absolute;
  left: calc(43.84 * var(--u));
  width: calc(573.33 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(94.4314 * var(--u));
}

.step-inner-01 {
  top: calc(131.53 * var(--u));
}

.step-inner-02 {
  top: calc(124.43 * var(--u));
}

.step-inner-03 {
  top: calc(76.93 * var(--u));
}

.step-inner-04 {
  top: calc(87.43 * var(--u));
}

.step-num {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: calc(80.9412 * var(--u));
  line-height: calc(50.59 * var(--u));
  letter-spacing: -0.0211em;
  color: var(--text-white);
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: calc(80.9412 * var(--u));
}

.step-body-01 {
  gap: calc(269.804 * var(--u));
}

.step-heading {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: calc(80.9412 * var(--u));
  line-height: calc(53.96 * var(--u));
  letter-spacing: -0.0211em;
  color: var(--text-white);
}

.step-heading-01 {
  line-height: calc(50.59 * var(--u));
}

.step-desc {
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: calc(67.451 * var(--u));
  line-height: calc(74.2 * var(--u));
  letter-spacing: -0.0253em;
  color: var(--text-white);
}

/* CTA: Register Now (Desktop: 296.79 x 97.8) */
.cta-register-now {
  width: calc(296.79 * var(--u));
  height: calc(97.8 * var(--u));
}

.cta-register-now .cta-inner {
  padding: calc(24.2432 * var(--u));
  border-width: calc(1.6863 * var(--u));
}

.cta-register-now .cta-text {
  font-size: calc(37.9384 * var(--u));
  line-height: calc(45.53 * var(--u));
}

.cta-register-now .btn-corner {
  width: calc(43.84 * var(--u));
  height: calc(23.61 * var(--u));
}

/* ==========================================================================
   10. YOUR INVESTMENT (#305:2949)
   ========================================================================== */
.investment-section {
  width: calc(1376 * var(--u));
  margin: calc(171 * var(--u)) auto 0;
  /* 15630 - (13088.6 + 2370.41) = 171 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(69.9364 * var(--u));
}

.investment-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(55.7838 * var(--u));
}

.investment-fee-banner {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(37.1892 * var(--u));
  line-height: calc(46.49 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--orange-primary);
  text-align: center;
}

/* CTA: Start with the First Installment (Desktop: 573.33 x 89.88) */
.cta-first-installment {
  width: calc(573.33 * var(--u));
  height: calc(89.88 * var(--u));
}

.cta-first-installment .cta-inner {
  width: calc(568.3 * var(--u));
  height: calc(87.94 * var(--u));
  padding: calc(22.2776 * var(--u));
  border-width: calc(1.5495 * var(--u));
}

.cta-first-installment .cta-text {
  font-size: calc(34.8623 * var(--u));
  line-height: calc(41.83 * var(--u));
}

.cta-first-installment .btn-corner {
  width: calc(40.29 * var(--u));
  height: calc(21.69 * var(--u));
}

/* ==========================================================================
   11. FAQs SECTION (#306:2983)
   ========================================================================== */
.faq-section {
  width: calc(1376 * var(--u));
  margin: calc(140 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
}

.faq-header {
  margin-bottom: calc(107.23 * var(--u));
  /* 157.21 - 49.98 = 107.23 */
}

.faq-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(53.3075 * var(--u));
  line-height: calc(49.98 * var(--u));
  letter-spacing: -0.0317em;
  color: var(--text-white);
}

.faq-title-tablet {
  display: none;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: calc(105.98 * var(--u));
  /* 626.35 - (157.21 + 363.16) = 105.98 */
}

.faq-card {
  width: 100%;
  background-color: var(--orange-faq);
  position: relative;
  padding: calc(3.33 * var(--u)) calc(33.32 * var(--u)) calc(23.23 * var(--u));
  min-height: calc(363.16 * var(--u));
  transition: min-height 0.28s ease, padding 0.28s ease;
}

.faq-card-lg {
  min-height: calc(476.44 * var(--u));
}

.faq-card-sm {
  min-height: calc(333.17 * var(--u));
}

.faq-card-xs {
  min-height: calc(326.51 * var(--u));
}

.faq-question-row {
  width: calc(1269.39 * var(--u));
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
}

.faq-question {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(46.6441 * var(--u));
  line-height: calc(49.98 * var(--u));
  letter-spacing: -0.0362em;
  color: var(--text-white);
}

.faq-icon {
  width: calc(79.96 * var(--u));
  height: calc(79.96 * var(--u));
  flex-shrink: 0;
}

.faq-icon-open {
  display: block;
}

.faq-icon-close {
  display: none;
}

.faq-card.is-open .faq-icon-open {
  display: none;
}

.faq-card.is-open .faq-icon-close {
  display: block;
}

.faq-card:not(.is-open) {
  min-height: 0 !important;
  padding-bottom: calc(20 * var(--u));
}

.faq-answer-wrap {
  margin-top: calc(56.64 * var(--u));
  /* 139.93 - (3.33 + 79.96) = 56.64 */
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease;
  max-height: calc(400 * var(--u));
  opacity: 1;
}

.faq-card:not(.is-open) .faq-answer-wrap {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.faq-answer {
  width: calc(1269.39 * var(--u));
  max-width: 100%;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(46.6441 * var(--u));
  line-height: calc(49.98 * var(--u));
  letter-spacing: -0.0362em;
  color: var(--text-faq-answer);
}

.faq-answer-pushed {
  margin-top: calc(56.64 * var(--u));
  margin-left: calc(19.99 * var(--u));
}

.faq-answer-low {
  margin-top: calc(56.64 * var(--u));
}

.faq-divider {
  margin-top: calc(105.98 * var(--u));
}

/* ==========================================================================
   12. FINAL CALL TO ACTION (#306:3047)
   ========================================================================== */
.final-cta-section {
  width: calc(1376 * var(--u));
  margin: calc(100 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(55.7838 * var(--u));
}

.final-cta-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(55.7838 * var(--u));
}

.final-cta-text-group {
  width: calc(1258.23 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(55.7838 * var(--u));
}

.final-cta-headers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(55.7838 * var(--u));
}

.final-title {
  text-align: left;
}

.final-orange-quote {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(37.1892 * var(--u));
  line-height: calc(46.49 * var(--u));
  letter-spacing: -0.0422em;
  color: var(--orange-primary);
  text-align: center;
}

/* Final Register CTA (Desktop: 582.63 x 89.88) */
.cta-final-register {
  width: calc(582.63 * var(--u));
  height: calc(89.88 * var(--u));
}

.cta-final-register .cta-inner {
  padding: calc(22.2776 * var(--u));
  border-width: calc(1.5495 * var(--u));
}

.cta-final-register .cta-text {
  font-size: calc(34.8623 * var(--u));
  line-height: calc(41.83 * var(--u));
}

.cta-final-register .btn-corner {
  width: calc(40.29 * var(--u));
  height: calc(21.69 * var(--u));
}

/* ==========================================================================
   13. FOOTER (#306:3082)
   ========================================================================== */
.site-footer {
  width: 100%;
  min-height: calc(730 * var(--u));
  margin-top: calc(119 * var(--u));
  background-color: var(--bg-dark);
  padding: calc(137 * var(--u)) calc(32 * var(--u)) calc(81 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-main-row {
  width: calc(1369 * var(--u));
  max-width: calc(100% - 64 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(52.8045 * var(--u));
}

.footer-logo-img {
  width: calc(76.57 * var(--u));
  height: calc(76.57 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

.footer-brand-desc {
  width: calc(336.63 * var(--u));
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(19.8017 * var(--u));
  line-height: calc(23.76 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-light-blue);
}

.footer-visit-col {
  width: calc(212 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(31.7811 * var(--u));
}

.footer-col-heading {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(22.4788 * var(--u));
  line-height: calc(26.97 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-light-blue);
}

.heading-visit {
  font-size: calc(26.4843 * var(--u));
  line-height: calc(31.78 * var(--u));
}

.footer-visit-text {
  width: calc(220 * var(--u));
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(26.4843 * var(--u));
  line-height: calc(31.78 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-white);
}

.footer-contact-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(41.9603 * var(--u));
}

.footer-talk-col {
  width: calc(365.65 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(35.966 * var(--u));
}

.footer-follow-col {
  width: calc(121.39 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(35.966 * var(--u));
}

.footer-links-stack,
.footer-phones-stack {
  display: flex;
  flex-direction: column;
  gap: calc(14.9858 * var(--u));
}

.footer-link {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(22.4788 * var(--u));
  line-height: calc(26.97 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-white);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--orange-primary);
}

.footer-copyright {
  width: calc(1369 * var(--u));
  max-width: calc(100% - 64 * var(--u));
  margin: calc(180 * var(--u)) auto 0;
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: calc(28.6927 * var(--u));
  line-height: calc(34.43 * var(--u));
  letter-spacing: -0.0338em;
  color: var(--text-white);
  text-align: left;
}

/* ==========================================================================
   TABLET BREAKPOINT (#289:1641 — 834px Design Reference)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --u: calc(100vw / 834);
  }

  .funnel-page {
    width: calc(834 * var(--u));
  }

  /* Header (834px) */
  .site-header {
    width: calc(790 * var(--u));
    margin: calc(48.45 * var(--u)) auto 0;
    justify-content: space-between;
    gap: 0;
  }

  .brand-logo-group {
    gap: calc(14.8061 * var(--u));
  }

  .brand-logo-img {
    width: calc(51.82 * var(--u));
    height: calc(51.82 * var(--u));
  }

  .brand-logo-text {
    gap: calc(7.6789 * var(--u));
  }

  .brand-title {
    font-size: calc(27.7615 * var(--u));
  }

  .brand-subtitle {
    font-size: calc(21.3673 * var(--u));
  }

  .menu-toggle {
    display: inline-flex;
  }

  /* Menu Modal (#310:716 — Tablet Responsive) */
  .site-nav {
    position: absolute;
    top: calc(100% + 14 * var(--u));
    right: 0;
    width: calc(380 * var(--u));
    min-height: calc(340 * var(--u));
    background-color: rgba(22, 32, 58, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(22, 32, 58, 0.4);
    border-radius: calc(8 * var(--u));
    padding: calc(20 * var(--u)) calc(24 * var(--u));
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    display: none;
    z-index: 100;
  }

  .site-nav.is-open {
    display: flex;
    animation: menuModalFadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .nav-link {
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: calc(19 * var(--u));
    line-height: calc(25 * var(--u));
    letter-spacing: -0.0338em;
    color: var(--text-white);
    display: block;
    width: 100%;
    padding: calc(6 * var(--u)) 0 calc(9 * var(--u));
    position: relative;
    transition: color 0.18s ease, transform 0.18s ease;
  }

  .nav-link:hover {
    color: var(--orange-primary);
    transform: translateX(4px);
  }

  /* Exact Figma 191px horizontal divider lines (#310:706 - #310:711) */
  .nav-link:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(191 * var(--u));
    max-width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
  }

  /* Hero Section (834px) */
  .hero-section {
    padding-top: calc(35.81 * var(--u));
    /* 136.08 - (48.45 + 51.82) */
  }

  .hero-inner {
    width: 100%;
  }

  .hero-heading {
    width: calc(664 * var(--u));
    font-size: calc(36.5625 * var(--u));
  }

  .hero-banner-wrap {
    margin-top: calc(33.92 * var(--u));
    /* 318 - (136.08 + 148) */
    width: calc(770 * var(--u));
    height: calc(335.02 * var(--u));
    margin-left: 0;
  }

  .hero-banner-img {
    transform: scaleX(-1);
  }

  .hero-cta-wrap {
    margin-top: calc(33.97 * var(--u));
    /* 686.99 - (318 + 335.02) */
  }

  .cta-hero {
    width: calc(326 * var(--u));
    height: calc(52.02 * var(--u));
  }

  .cta-hero .cta-inner {
    width: calc(323.19 * var(--u));
    height: calc(49.21 * var(--u));
    padding: calc(12.465 * var(--u));
    border-width: calc(0.867 * var(--u));
  }

  .cta-hero .cta-text {
    font-size: calc(19.5065 * var(--u));
    line-height: calc(23.41 * var(--u));
  }

  .cta-hero .btn-corner {
    width: calc(22.54 * var(--u));
    height: calc(12.14 * var(--u));
  }

  /* Brands (834px) */
  .brands-block {
    margin-top: calc(63.99 * var(--u));
    /* 803 - (686.99 + 52.02) */
  }

  .brands-heading {
    margin-left: calc(24 * var(--u));
    font-size: calc(22.2115 * var(--u));
    line-height: calc(26.65 * var(--u));
  }

  .brands-strip {
    margin-top: calc(38.31 * var(--u));
    /* 865 - (803 + 23.69) */
    width: calc(834 * var(--u));
    height: calc(109.94 * var(--u));
  }

  .brands-logos-track {
    gap: calc(56.8463 * var(--u));
    padding-right: calc(56.8463 * var(--u));
  }

  .brand-logo-1 {
    width: calc(174.84 * var(--u));
    height: calc(34.03 * var(--u));
  }

  .brand-logo-fb {
    width: calc(54.97 * var(--u));
    height: calc(54.97 * var(--u));
  }

  .brand-logo-att {
    width: calc(155.45 * var(--u));
    height: calc(54.96 * var(--u));
  }

  .brand-logo-wa {
    width: calc(237.32 * var(--u));
    height: calc(54.88 * var(--u));
  }

  .brand-logo-square {
    width: calc(56.85 * var(--u));
    height: calc(56.85 * var(--u));
  }

  .brand-logo-4 {
    width: calc(160.83 * var(--u));
    height: calc(56.93 * var(--u));
  }

  /* Ready Learn & Six Months (834px) */
  .ready-learn-panel {
    width: calc(834 * var(--u));
    min-height: calc(758.35 * var(--u));
    padding-top: calc(52.95 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }

  .ready-learn-content {
    margin-left: calc(41.61 * var(--u));
    width: calc(748.9 * var(--u));
    gap: calc(34.0408 * var(--u));
  }

  .ready-learn-heading {
    width: calc(748 * var(--u));
    font-size: calc(30.2585 * var(--u));
    line-height: calc(28.37 * var(--u));
  }

  .ready-learn-body {
    font-size: calc(18.9116 * var(--u));
    line-height: calc(18.91 * var(--u));
  }

  .see-what-link {
    margin-top: calc(48.8 * var(--u));
    margin-left: calc(274.22 * var(--u));
    width: calc(283.67 * var(--u));
  }

  .see-what-arrow {
    width: calc(18.91 * var(--u));
    height: calc(18.91 * var(--u));
  }

  .see-what-text {
    font-size: calc(18.9116 * var(--u));
    line-height: calc(28.37 * var(--u));
  }

  .six-months-block {
    margin-top: calc(94.56 * var(--u));
    margin-left: calc(35.93 * var(--u));
    width: calc(760.24 * var(--u));
    gap: calc(34.0408 * var(--u));
  }

  .six-months-heading {
    font-size: calc(30.2585 * var(--u));
    line-height: calc(28.37 * var(--u));
  }

  .path-cards-row {
    gap: calc(52.9524 * var(--u));
  }

  .path-card {
    width: calc(213.7 * var(--u));
    height: calc(213.7 * var(--u));
  }

  .path-card-inner-1 {
    left: calc(9.46 * var(--u));
    top: calc(5.67 * var(--u));
    width: calc(189.12 * var(--u));
    height: calc(193.49 * var(--u));
  }

  .path-card-inner-2 {
    left: calc(9.46 * var(--u));
    top: calc(9.46 * var(--u));
    width: calc(177.77 * var(--u));
    height: calc(194.14 * var(--u));
  }

  .path-card-inner-3 {
    left: calc(9.46 * var(--u));
    top: calc(9.46 * var(--u));
    width: calc(197.37 * var(--u));
    height: calc(176.05 * var(--u));
  }

  .icon-months {
    width: calc(42.19 * var(--u));
    height: calc(46.63 * var(--u));
  }

  .icon-modules {
    width: calc(35.93 * var(--u));
    height: calc(28.37 * var(--u));
  }

  .icon-installments {
    width: calc(35.93 * var(--u));
    height: calc(35.93 * var(--u));
  }

  .path-card-body-1 {
    left: calc(47.28 * var(--u));
    top: calc(18.91 * var(--u));
    width: calc(141.84 * var(--u));
    height: calc(174.58 * var(--u));
  }

  .path-card-body-2 {
    left: calc(35.93 * var(--u));
    top: calc(22.69 * var(--u));
    width: calc(141.84 * var(--u));
    height: calc(171.45 * var(--u));
  }

  .path-card-body-3 {
    left: calc(28.37 * var(--u));
    top: calc(22.69 * var(--u));
    width: calc(169 * var(--u));
    height: calc(153.36 * var(--u));
  }

  .path-card-stat {
    gap: calc(7.5646 * var(--u));
  }

  .stat-months {
    width: calc(85.1 * var(--u));
    height: calc(86.99 * var(--u));
  }

  .stat-modules {
    width: calc(98.34 * var(--u));
    height: calc(77.54 * var(--u));
  }

  .stat-installments {
    height: calc(86.99 * var(--u));
  }

  .path-stat-num {
    font-size: calc(45.3878 * var(--u));
    line-height: calc(51.06 * var(--u));
  }

  .path-stat-label {
    font-size: calc(24.3149 * var(--u));
    line-height: calc(28.37 * var(--u));
  }

  .path-card-desc {
    width: calc(105.9 * var(--u));
    font-size: calc(11.0369 * var(--u));
    line-height: calc(12.42 * var(--u));
  }

  .desc-months {
    left: calc(35.93 * var(--u));
    top: calc(111.58 * var(--u));
  }

  .desc-modules {
    left: calc(35.93 * var(--u));
    top: calc(96.45 * var(--u));
  }

  .desc-installments {
    left: calc(54.84 * var(--u));
    top: calc(115.36 * var(--u));
  }

  /* What you'll be able to do (834px — Single Column Layout!) */
  .skills-section {
    width: calc(784 * var(--u));
    margin: calc(70.65 * var(--u)) auto 0;
  }

  .skills-layout {
    flex-direction: column;
    align-items: center;
    gap: calc(32.0727 * var(--u));
  }

  .skills-header-col {
    width: calc(726.56 * var(--u));
    gap: calc(32.0727 * var(--u));
  }

  .skills-title {
    width: calc(415.16 * var(--u));
    font-size: calc(28.5091 * var(--u));
    line-height: calc(26.73 * var(--u));
  }

  .skills-subtitle {
    width: calc(415.16 * var(--u));
    font-size: calc(21.3818 * var(--u));
    line-height: calc(26.73 * var(--u));
  }

  .skills-list-col {
    width: calc(784 * var(--u));
    gap: calc(49.8909 * var(--u));
  }

  .skills-divider {
    width: 100%;
    align-self: auto;
    margin-left: 0;
  }

  /* What to expect (834px) */
  .expect-section {
    width: calc(785 * var(--u));
    margin: calc(78 * var(--u)) auto 0;
    gap: calc(53.8725 * var(--u));
  }

  .expect-header {
    gap: calc(34.6324 * var(--u));
  }

  .expect-title {
    font-size: calc(30.7843 * var(--u));
    line-height: calc(28.86 * var(--u));
  }

  .expect-subtitle {
    font-size: calc(23.0882 * var(--u));
    line-height: calc(28.86 * var(--u));
  }

  .expect-body {
    gap: calc(53.8725 * var(--u));
  }

  .expect-grid {
    width: calc(785 * var(--u));
    height: calc(775.38 * var(--u));
    gap: calc(28.8603 * var(--u));
  }

  .expect-card-content {
    left: calc(15.39 * var(--u));
    top: calc(19.86 * var(--u));
    width: calc(211.64 * var(--u));
    gap: calc(46.1765 * var(--u));
  }

  .expect-card-2 .expect-card-content {
    left: calc(17.32 * var(--u));
    top: calc(15.39 * var(--u));
    width: calc(207.79 * var(--u));
  }

  .expect-card-3 .expect-card-content {
    left: calc(17.32 * var(--u));
    top: calc(13.36 * var(--u));
    width: calc(207.79 * var(--u));
  }

  .expect-card-4 .expect-card-content {
    left: calc(15.39 * var(--u));
    top: calc(12.67 * var(--u));
    gap: calc(28.8603 * var(--u));
  }

  .expect-card-5 .expect-card-content {
    left: calc(15.39 * var(--u));
    top: calc(29.86 * var(--u));
  }

  .expect-card-6 .expect-card-content {
    left: calc(15.39 * var(--u));
    top: calc(13.59 * var(--u));
    gap: calc(38.4804 * var(--u));
  }

  .expect-card-title {
    font-size: calc(23.5404 * var(--u));
    line-height: calc(28.25 * var(--u));
  }

  .expect-card-title.title-narrow {
    width: calc(194.33 * var(--u));
  }

  .expect-card-title.title-wide {
    width: calc(207.79 * var(--u));
  }

  .expect-card-icon {
    width: calc(73.11 * var(--u));
    height: calc(73.11 * var(--u));
    margin-left: calc(65.41 * var(--u));
  }

  .expect-card-desc {
    font-size: calc(23.5404 * var(--u));
  }

  .desc-lh-lg {
    line-height: calc(28.25 * var(--u));
  }

  .desc-lh-md {
    line-height: calc(25.01 * var(--u));
  }

  .desc-lh-sm {
    line-height: calc(23.09 * var(--u));
  }

  /* Course Outline (834px) */
  .outline-section {
    width: calc(783.31 * var(--u));
    margin: calc(125 * var(--u)) auto 0;
    gap: calc(34.56 * var(--u));
  }

  .outline-header {
    gap: calc(23.0388 * var(--u));
  }

  .outline-title {
    font-size: calc(30.7184 * var(--u));
    line-height: calc(28.8 * var(--u));
  }

  .outline-subtitle,
  .outline-highlight {
    font-size: calc(23.0388 * var(--u));
    line-height: calc(28.8 * var(--u));
  }

  .module-card {
    width: calc(236.15 * var(--u));
    height: calc(445.42 * var(--u));
  }

  .module-inner {
    left: calc(11.52 * var(--u));
    width: calc(211.19 * var(--u));
    gap: calc(3.8398 * var(--u));
  }

  .mod-inner-01 {
    top: calc(32.64 * var(--u));
  }

  .mod-inner-02 {
    top: calc(23.04 * var(--u));
  }

  .mod-inner-03 {
    top: calc(28.8 * var(--u));
  }

  .mod-inner-04 {
    top: calc(13.44 * var(--u));
  }

  .mod-inner-05 {
    top: calc(23.04 * var(--u));
  }

  .mod-inner-06 {
    top: calc(15.36 * var(--u));
  }

  .module-top-group {
    gap: calc(9.5995 * var(--u));
  }

  .module-header-group {
    gap: calc(15.3592 * var(--u));
  }

  .module-title-stack {
    width: calc(158.87 * var(--u));
    gap: calc(28.7985 * var(--u));
  }

  .module-num-row {
    gap: calc(15.3592 * var(--u));
  }

  .mod-num-01 {
    width: calc(51.66 * var(--u));
    height: calc(34.11 * var(--u));
  }

  .mod-num-02 {
    width: calc(65.36 * var(--u));
    height: calc(34.12 * var(--u));
  }

  .mod-num-03 {
    width: calc(66.47 * var(--u));
    height: calc(34.12 * var(--u));
  }

  .mod-num-04 {
    width: calc(62.23 * var(--u));
    height: calc(28.35 * var(--u));
  }

  .mod-num-05 {
    width: calc(66.96 * var(--u));
    height: calc(34.12 * var(--u));
  }

  .mod-num-06 {
    width: calc(67.94 * var(--u));
    height: calc(34.12 * var(--u));
  }

  .mod-word {
    font-size: calc(23.0388 * var(--u));
    line-height: calc(21.39 * var(--u));
    width: calc(76.8 * var(--u));
    height: calc(24.96 * var(--u));
  }

  .mod-name {
    font-size: calc(23.0388 * var(--u));
    line-height: calc(21.39 * var(--u));
  }

  .mod-name-01 {
    width: calc(158.87 * var(--u));
  }

  .mod-name-02 {
    width: calc(178.55 * var(--u));
  }

  .mod-name-03 {
    width: calc(172.79 * var(--u));
  }

  .mod-name-04 {
    width: calc(144 * var(--u));
  }

  .mod-name-05 {
    width: calc(168.8 * var(--u));
  }

  .mod-name-06 {
    width: calc(188.15 * var(--u));
  }

  .mod-solid-line {
    border-bottom-width: calc(0.96 * var(--u));
  }

  .mod-summary {
    margin-top: calc(3.84 * var(--u));
    font-size: calc(15.3592 * var(--u));
    line-height: calc(15.36 * var(--u));
  }

  .mod-details {
    font-size: calc(15.3592 * var(--u));
    line-height: calc(15.36 * var(--u));
  }

  .mod-detail-line {
    padding-left: calc(16.3 * var(--u));
  }

  .mod-detail-line::before {
    left: calc(4.8 * var(--u));
  }

  .outline-bottom-wrap {
    gap: calc(53.7572 * var(--u));
  }

  .cta-secure-seat {
    width: calc(211.19 * var(--u));
    height: calc(57.6 * var(--u));
  }

  .cta-secure-seat .cta-inner {
    padding: calc(13.801 * var(--u));
    border-width: calc(0.96 * var(--u));
  }

  .cta-secure-seat .cta-text {
    font-size: calc(21.5973 * var(--u));
    line-height: calc(25.92 * var(--u));
  }

  .cta-secure-seat .btn-corner {
    width: calc(24.96 * var(--u));
    height: calc(13.44 * var(--u));
  }

  /* Blueprint Sections Stack (834px) */
  .blueprint-sections-stack {
    width: calc(786 * var(--u));
    margin: calc(68 * var(--u)) auto 0;
    gap: calc(48 * var(--u));
  }

  .bp-section {
    gap: calc(48 * var(--u));
  }

  .bp-header {
    gap: calc(32.1136 * var(--u));
  }

  .bp-title {
    font-size: calc(28.5455 * var(--u));
    line-height: calc(26.76 * var(--u));
  }

  .bp-title-sm {
    font-size: calc(28.3243 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .bp-subtitle {
    font-size: calc(21.4091 * var(--u));
    line-height: calc(26.76 * var(--u));
  }

  .bp-subtitle-earning {
    width: calc(711.85 * var(--u));
  }

  .bp-subtitle-left {
    font-size: calc(21.2432 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .bp-subtitle-who {
    width: calc(354.05 * var(--u));
    font-size: calc(21.2432 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .bp-why .bp-header,
  .bp-who .bp-header {
    gap: calc(31.8649 * var(--u));
  }

  .earning-intro-text {
    display: none;
  }

  .blueprint-box {
    width: calc(785 * var(--u));
  }

  .bp-box-tall {
    height: calc(437.1 * var(--u));
  }

  .bp-box-medium {
    height: calc(306.86 * var(--u));
  }

  .bp-box-medium-sm {
    width: calc(778.92 * var(--u));
    height: calc(304.49 * var(--u));
  }

  .bp-box-short {
    width: calc(786 * var(--u));
    height: calc(224.83 * var(--u));
  }

  .bp-inner-frame {
    width: calc(727.91 * var(--u));
    padding: calc(14.2727 * var(--u));
    border-width: calc(1.0348 * var(--u));
  }

  .bp-box-tall .bp-inner-frame {
    height: calc(429.97 * var(--u));
  }

  .bp-box-medium .bp-inner-frame {
    height: calc(296.16 * var(--u));
  }

  .bp-box-medium-sm .bp-inner-frame {
    width: calc(722.27 * var(--u));
    height: calc(293.86 * var(--u));
    padding: calc(14.1622 * var(--u));
    border-width: calc(1.0268 * var(--u));
  }

  .bp-box-short .bp-inner-frame {
    width: calc(722.27 * var(--u));
    height: calc(214.2 * var(--u));
    padding: calc(14.1622 * var(--u));
    border-width: calc(1.0268 * var(--u));
  }

  .bp-who .bp-box-short .bp-inner-frame {
    left: calc(3.545 * var(--u));
  }

  .bp-inner-final {
    left: 0;
  }

  .bp-text {
    width: calc(699.36 * var(--u));
    font-size: calc(26.7614 * var(--u));
    line-height: calc(26.76 * var(--u));
  }

  .bp-text-sm {
    width: calc(693.95 * var(--u));
    font-size: calc(26.5541 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .bp-pathway-item {
    padding-left: calc(36.1 * var(--u));
  }

  .bp-pathway-item::before {
    left: calc(12 * var(--u));
  }

  .bp-text-sm .bp-pathway-item {
    padding-left: calc(35.85 * var(--u));
  }

  .bp-text-sm .bp-pathway-item::before {
    left: calc(11.9 * var(--u));
  }

  .bp-pathways .bp-ticks-col {
    top: calc(10.7 * var(--u));
    bottom: calc(24.97 * var(--u));
  }

  .bp-vline-left {
    left: calc(21.41 * var(--u));
  }

  .bp-vline-right {
    right: calc(23.19 * var(--u));
  }

  .bp-box-medium-sm .bp-vline-left {
    left: calc(21.24 * var(--u));
  }

  .bp-box-medium-sm .bp-vline-right {
    right: calc(23.01 * var(--u));
  }

  .bp-box-short .bp-vline-left {
    left: calc(28.32 * var(--u));
  }

  .bp-box-short .bp-vline-right {
    right: calc(23.01 * var(--u));
  }

  .bp-box-medium .bp-hline-top {
    width: calc(783.22 * var(--u));
  }

  .bp-box-medium-sm .bp-hline-top {
    width: calc(777.15 * var(--u));
  }

  .bp-box-short .bp-hline-top {
    left: calc(7.08 * var(--u));
    width: calc(777.15 * var(--u));
  }

  .bp-box-short .bp-hline-bottom {
    left: 0;
    width: calc(778.92 * var(--u));
  }

  .bp-ticks-col {
    top: calc(10.7 * var(--u));
    bottom: calc(10.7 * var(--u));
    width: calc(21.41 * var(--u));
  }

  .bp-box-medium .bp-ticks-col {
    top: calc(33.9 * var(--u));
    bottom: calc(16.05 * var(--u));
    width: calc(21.41 * var(--u));
  }

  .bp-box-medium-sm .bp-ticks-col {
    top: calc(33.63 * var(--u));
    bottom: calc(15.94 * var(--u));
    width: calc(21.24 * var(--u));
  }

  .bp-box-short .bp-ticks-left {
    left: calc(7.08 * var(--u));
    top: calc(33.64 * var(--u));
    bottom: calc(21.24 * var(--u));
    width: calc(21.24 * var(--u));
  }

  .bp-box-short .bp-ticks-right {
    right: 0;
    top: calc(33.64 * var(--u));
    bottom: calc(21.24 * var(--u));
    width: calc(21.24 * var(--u));
  }

  .bp-orange-note {
    font-size: calc(26.7614 * var(--u));
    line-height: calc(26.76 * var(--u));
  }

  .note-two-lines,
  .note-who {
    font-size: calc(26.5541 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .note-who {
    width: calc(697.49 * var(--u));
  }

  .cta-start-skill {
    width: calc(242.64 * var(--u));
    height: calc(51.74 * var(--u));
  }

  .cta-start-skill .cta-inner {
    width: calc(239.74 * var(--u));
    height: calc(50.63 * var(--u));
    padding: calc(12.8248 * var(--u));
    border-width: calc(0.892 * var(--u));
  }

  .cta-start-skill .cta-text {
    font-size: calc(20.0695 * var(--u));
    line-height: calc(24.08 * var(--u));
  }

  .cta-start-skill .btn-corner {
    width: calc(23.19 * var(--u));
    height: calc(12.49 * var(--u));
  }

  .cta-yes-register {
    width: calc(289.22 * var(--u));
    height: calc(51.34 * var(--u));
  }

  .cta-yes-register .cta-inner {
    width: calc(287.45 * var(--u));
    height: calc(50.23 * var(--u));
    padding: calc(12.7254 * var(--u));
    border-width: calc(0.8851 * var(--u));
  }

  .cta-yes-register .cta-text {
    font-size: calc(19.9141 * var(--u));
    line-height: calc(23.9 * var(--u));
  }

  .cta-yes-register .btn-corner {
    width: calc(23.01 * var(--u));
    height: calc(12.39 * var(--u));
  }

  /* How Enrolment Works (834px) */
  .enrolment-section {
    width: calc(787 * var(--u));
    margin: calc(65 * var(--u)) auto 0;
    gap: calc(44 * var(--u));
  }

  .enrolment-header {
    gap: calc(34.7206 * var(--u));
  }

  .enrolment-title {
    font-size: calc(30.8627 * var(--u));
    line-height: calc(28.93 * var(--u));
  }

  .enrolment-subtitle {
    width: calc(385.78 * var(--u));
    font-size: calc(23.1471 * var(--u));
    line-height: calc(28.93 * var(--u));
  }

  .enrolment-grid {
    grid-template-columns: repeat(2, calc(378.07 * var(--u)));
    row-gap: calc(54 * var(--u));
  }

  .step-card {
    width: calc(378.07 * var(--u));
    height: calc(501.52 * var(--u));
    border-width: calc(1.9289 * var(--u));
    border-radius: calc(30.8627 * var(--u));
  }

  .step-card-inner {
    left: calc(25.08 * var(--u));
    width: calc(327.92 * var(--u));
    gap: calc(54.0098 * var(--u));
  }

  .step-inner-01 {
    top: calc(75.23 * var(--u));
  }

  .step-inner-02 {
    top: calc(71.07 * var(--u));
  }

  .step-inner-03 {
    top: calc(44.07 * var(--u));
  }

  .step-inner-04 {
    top: calc(49.57 * var(--u));
  }

  .step-num {
    font-size: calc(46.2941 * var(--u));
    line-height: calc(28.93 * var(--u));
  }

  .step-body {
    gap: calc(46.2941 * var(--u));
  }

  .step-body-01 {
    gap: calc(154.3137 * var(--u));
  }

  .step-heading {
    font-size: calc(46.2941 * var(--u));
    line-height: calc(30.86 * var(--u));
  }

  .step-heading-01 {
    line-height: calc(28.93 * var(--u));
  }

  .step-desc {
    font-size: calc(38.5784 * var(--u));
    line-height: calc(42.44 * var(--u));
  }

  .cta-register-now {
    width: calc(169.75 * var(--u));
    height: calc(55.94 * var(--u));
  }

  .cta-register-now .cta-inner {
    padding: calc(13.8659 * var(--u));
    border-width: calc(0.9645 * var(--u));
  }

  .cta-register-now .cta-text {
    font-size: calc(21.6988 * var(--u));
    line-height: calc(26.04 * var(--u));
  }

  .cta-register-now .btn-corner {
    width: calc(25.08 * var(--u));
    height: calc(13.5 * var(--u));
  }

  /* Your Investment (834px) */
  .investment-section {
    width: calc(787 * var(--u));
    margin: calc(70.73 * var(--u)) auto 0;
    gap: calc(40 * var(--u));
  }

  .investment-header {
    gap: calc(31.9054 * var(--u));
  }

  .investment-fee-banner {
    font-size: calc(21.2703 * var(--u));
    line-height: calc(26.59 * var(--u));
  }

  .cta-first-installment {
    width: calc(327.92 * var(--u));
    height: calc(51.4 * var(--u));
  }

  .cta-first-installment .cta-inner {
    width: calc(325.04 * var(--u));
    height: calc(50.3 * var(--u));
    padding: calc(12.7416 * var(--u));
    border-width: calc(0.8863 * var(--u));
  }

  .cta-first-installment .cta-text {
    font-size: calc(19.9394 * var(--u));
    line-height: calc(23.93 * var(--u));
  }

  .cta-first-installment .btn-corner {
    width: calc(23.04 * var(--u));
    height: calc(12.41 * var(--u));
  }

  /* FAQs (834px) */
  .faq-section {
    width: calc(779 * var(--u));
    margin: calc(80 * var(--u)) auto 0;
    align-items: center;
  }

  .faq-header {
    margin-bottom: calc(60.3584 * var(--u));
  }

  .faq-title {
    font-size: calc(30.1792 * var(--u));
    line-height: calc(28.29 * var(--u));
  }

  .faq-title-desktop {
    display: none;
  }

  .faq-title-tablet {
    display: inline;
  }

  .faq-list {
    width: 100%;
    gap: calc(60.3584 * var(--u));
  }

  .faq-card {
    padding: calc(1.89 * var(--u)) calc(18.86 * var(--u)) calc(12 * var(--u));
    min-height: calc(205.6 * var(--u));
  }

  .faq-card-lg {
    min-height: calc(269.73 * var(--u));
  }

  .faq-card-sm {
    min-height: calc(188.62 * var(--u));
  }

  .faq-card-xs {
    min-height: calc(184.85 * var(--u));
  }

  .faq-question-row {
    width: calc(718.64 * var(--u));
  }

  .faq-question {
    font-size: calc(26.4068 * var(--u));
    line-height: calc(28.29 * var(--u));
  }

  .faq-icon {
    width: calc(45.27 * var(--u));
    height: calc(45.27 * var(--u));
  }

  .faq-card:not(.is-open) {
    padding-bottom: calc(12 * var(--u));
  }

  .faq-answer-wrap {
    margin-top: calc(32.06 * var(--u));
  }

  .faq-answer {
    width: calc(718.64 * var(--u));
    font-size: calc(26.4068 * var(--u));
    line-height: calc(28.29 * var(--u));
  }

  .faq-answer-pushed {
    margin-top: calc(32.07 * var(--u));
    margin-left: calc(11.32 * var(--u));
  }

  .faq-answer-low {
    margin-top: calc(32.07 * var(--u));
  }

  .faq-divider {
    margin-top: calc(60.3584 * var(--u));
  }

  /* Final Call to Action (834px) */
  .final-cta-section {
    width: calc(786 * var(--u));
    margin: calc(60 * var(--u)) auto 0;
    gap: calc(31.8649 * var(--u));
  }

  .final-cta-top,
  .final-cta-text-group,
  .final-cta-headers {
    gap: calc(31.8649 * var(--u));
  }

  .final-cta-text-group {
    width: calc(718.73 * var(--u));
  }

  .final-orange-quote {
    font-size: calc(21.2432 * var(--u));
    line-height: calc(26.55 * var(--u));
  }

  .cta-final-register {
    width: calc(332.81 * var(--u));
    height: calc(51.34 * var(--u));
  }

  .cta-final-register .cta-inner {
    padding: calc(12.7254 * var(--u));
    border-width: calc(0.8851 * var(--u));
  }

  .cta-final-register .cta-text {
    font-size: calc(19.9141 * var(--u));
    line-height: calc(23.9 * var(--u));
  }

  .cta-final-register .btn-corner {
    width: calc(23.01 * var(--u));
    height: calc(12.39 * var(--u));
  }

  /* Footer (834px — Stacked Tablet Layout!) */
  .site-footer {
    width: calc(834 * var(--u));
    min-height: calc(1029.11 * var(--u));
    margin-top: calc(68 * var(--u));
    padding: calc(93.73 * var(--u)) calc(30 * var(--u)) calc(60.64 * var(--u)) calc(79 * var(--u));
    justify-content: flex-start;
  }

  .footer-main-row {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }

  .footer-brand-col {
    order: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(76.5138 * var(--u));
    margin-bottom: calc(82.26 * var(--u));
  }

  .footer-logo-img {
    width: calc(110.94 * var(--u));
    height: calc(110.94 * var(--u));
  }

  .footer-brand-desc {
    width: calc(487.78 * var(--u));
    font-size: calc(28.6927 * var(--u));
    line-height: calc(34.43 * var(--u));
    color: var(--text-light-blue);
  }

  .footer-contact-group {
    order: 2;
    margin-left: 0;
    align-items: flex-start;
    gap: calc(53.5596 * var(--u));
    margin-bottom: calc(55.47 * var(--u));
  }

  .footer-talk-col {
    width: calc(466.73 * var(--u));
    gap: calc(45.9082 * var(--u));
  }

  .footer-follow-col {
    width: calc(154.94 * var(--u));
    gap: calc(45.9082 * var(--u));
  }

  .footer-links-stack,
  .footer-phones-stack {
    gap: calc(19.1284 * var(--u));
  }

  .footer-col-heading,
  .heading-visit {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(28.6927 * var(--u));
    line-height: calc(34.43 * var(--u));
    color: var(--text-light-blue);
  }

  .footer-link,
  .footer-visit-text {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(28.6927 * var(--u));
    line-height: calc(34.43 * var(--u));
    color: var(--text-white);
  }

  .footer-visit-col {
    order: 3;
    margin-left: calc(65 * var(--u));
    /* 144 - 79 */
    width: auto;
    gap: calc(34.4312 * var(--u));
  }

  .footer-visit-text {
    width: auto;
  }

  .footer-copyright {
    margin-top: calc(212.33 * var(--u));
    /* 933.47 - 721.14 */
    margin-left: calc(33.86 * var(--u));
    /* 112.86 - 79 */
    width: calc(609 * var(--u));
    text-align: left;
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(28.6927 * var(--u));
    line-height: calc(34.43 * var(--u));
    color: var(--text-white);
  }
}

/* ==========================================================================
   MOBILE BREAKPOINT (#310:11 — 440px Design Reference)
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --u: calc(100vw / 440);
  }

  .funnel-page {
    width: calc(440 * var(--u));
  }

  /* Header (440px) */
  .site-header {
    width: calc(408 * var(--u));
    margin: calc(23 * var(--u)) auto 0;
  }

  .brand-logo-group {
    gap: calc(8 * var(--u));
  }

  .brand-logo-img {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
  }

  .brand-logo-text {
    gap: calc(4.149 * var(--u));
  }

  .brand-title {
    font-size: calc(15 * var(--u));
  }

  .brand-subtitle {
    font-size: calc(11.5451 * var(--u));
  }

  .menu-hamburger-icon {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* Menu Modal (#310:716 — Mobile 440px Reference) */
  .site-nav {
    position: absolute;
    top: calc(100% + 12 * var(--u));
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(408 * var(--u));
    min-height: calc(373 * var(--u));
    background-color: rgba(22, 32, 58, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    border-radius: calc(6 * var(--u));
    padding: calc(22 * var(--u)) calc(20 * var(--u));
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    display: none;
    z-index: 100;
  }

  .site-nav.is-open {
    display: flex;
    animation: menuModalFadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .nav-link {
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: calc(21 * var(--u));
    line-height: calc(27 * var(--u));
    letter-spacing: -0.0338em;
    color: var(--text-white);
    display: block;
    width: 100%;
    padding: calc(6 * var(--u)) 0 calc(10 * var(--u));
    position: relative;
    transition: color 0.18s ease;
  }

  .nav-link:hover {
    color: var(--orange-primary);
  }

  /* Exact Figma 191px horizontal divider lines (#310:706 - #310:711) */
  .nav-link:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(191 * var(--u));
    max-width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.35);
  }

  /* Hero Section (440px) */
  .hero-section {
    padding-top: calc(29 * var(--u));
    /* 80 - (23 + 28) = 29 */
  }

  .hero-heading {
    width: calc(318 * var(--u));
    font-size: calc(17.5104 * var(--u));
  }

  .hero-banner-wrap {
    margin-top: calc(18 * var(--u));
    /* 170 - (80 + 72) = 18 */
    width: calc(340 * var(--u));
    height: calc(147.93 * var(--u));
    margin-left: 0;
  }

  .hero-banner-img {
    transform: scaleX(-1);
  }

  .hero-cta-wrap {
    margin-top: calc(19.07 * var(--u));
    /* 337 - (170 + 147.93) = 19.07 */
  }

  .cta-hero {
    width: calc(188 * var(--u));
    height: calc(30 * var(--u));
  }

  .cta-hero .cta-inner {
    width: auto;
    height: auto;
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-hero .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-hero .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  /* Brands (440px) */
  .brands-block {
    margin-top: calc(20 * var(--u));
    /* 387 - (337 + 30) = 20 */
  }

  .brands-heading {
    margin-left: calc(16 * var(--u));
    font-size: calc(12.5192 * var(--u));
    line-height: calc(15.02 * var(--u));
  }

  .brands-strip {
    margin-top: calc(5.65 * var(--u));
    /* 406 - (387 + 13.35) = 5.65 */
    width: calc(440 * var(--u));
    height: calc(58 * var(--u));
  }

  .brands-logos-track {
    gap: calc(29.9908 * var(--u));
    padding-right: calc(29.9908 * var(--u));
  }

  .brand-logo-1 {
    width: calc(92 * var(--u));
    height: calc(18 * var(--u));
  }

  .brand-logo-fb {
    width: calc(29 * var(--u));
    height: calc(29 * var(--u));
  }

  .brand-logo-att {
    width: calc(82 * var(--u));
    height: calc(29 * var(--u));
  }

  .brand-logo-wa {
    width: calc(125 * var(--u));
    height: calc(29 * var(--u));
  }

  .brand-logo-square {
    width: calc(29.99 * var(--u));
    height: calc(29.99 * var(--u));
  }

  .brand-logo-4 {
    width: calc(84.85 * var(--u));
    height: calc(30.03 * var(--u));
  }

  /* Ready Learn & Six Months (440px) */
  .ready-learn-panel {
    width: calc(440 * var(--u));
    min-height: calc(401 * var(--u));
    padding-top: calc(28 * var(--u));
    padding-bottom: calc(25 * var(--u));
  }

  .ready-learn-content {
    margin-left: calc(22 * var(--u));
    width: calc(396 * var(--u));
    gap: calc(18 * var(--u));
  }

  .ready-learn-heading {
    width: calc(313 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
    text-align: center;
  }

  .ready-learn-body {
    font-size: calc(10 * var(--u));
    line-height: calc(10 * var(--u));
  }

  .see-what-link {
    margin-top: calc(28 * var(--u));
    margin-left: calc(145 * var(--u));
    width: calc(150 * var(--u));
  }

  .see-what-arrow {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
  }

  .see-what-text {
    font-size: calc(10 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .six-months-block {
    margin-top: calc(50 * var(--u));
    /* 229 - (164 + 15) = 50 */
    margin-left: calc(19 * var(--u));
    width: calc(402 * var(--u));
    gap: calc(18 * var(--u));
  }

  .six-months-heading {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .path-cards-row {
    gap: calc(28 * var(--u));
  }

  .path-card {
    width: calc(113 * var(--u));
    height: calc(113 * var(--u));
  }

  .path-card-inner-1 {
    left: calc(5 * var(--u));
    top: calc(3 * var(--u));
    width: calc(100 * var(--u));
    height: calc(102 * var(--u));
  }

  .path-card-inner-2 {
    left: calc(5 * var(--u));
    top: calc(5 * var(--u));
    width: calc(94 * var(--u));
    height: calc(103 * var(--u));
  }

  .path-card-inner-3 {
    left: calc(5 * var(--u));
    top: calc(5 * var(--u));
    width: calc(104 * var(--u));
    height: calc(93 * var(--u));
  }

  .icon-months {
    width: calc(22 * var(--u));
    height: calc(25 * var(--u));
  }

  .icon-modules {
    width: calc(19 * var(--u));
    height: calc(15 * var(--u));
  }

  .icon-installments {
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
  }

  .path-card-body-1 {
    left: calc(25 * var(--u));
    top: calc(10 * var(--u));
    width: calc(75 * var(--u));
    height: calc(92 * var(--u));
  }

  .path-card-body-2 {
    left: calc(19 * var(--u));
    top: calc(12 * var(--u));
    width: calc(75 * var(--u));
    height: calc(91 * var(--u));
  }

  .path-card-body-3 {
    left: calc(15 * var(--u));
    top: calc(12 * var(--u));
    width: calc(89 * var(--u));
    height: calc(81 * var(--u));
  }

  .path-card-stat {
    gap: calc(4 * var(--u));
  }

  .stat-months {
    width: calc(45 * var(--u));
    height: calc(46 * var(--u));
  }

  .stat-modules {
    width: calc(52 * var(--u));
    height: calc(41 * var(--u));
  }

  .stat-installments {
    height: calc(46 * var(--u));
  }

  .path-stat-num {
    font-size: calc(24 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .path-stat-label {
    font-size: calc(12.8571 * var(--u));
    line-height: calc(17.68 * var(--u));
  }

  .path-card-desc {
    width: calc(56 * var(--u));
    font-size: calc(5.8361 * var(--u));
    line-height: calc(6.57 * var(--u));
  }

  .desc-months {
    left: calc(19 * var(--u));
    top: calc(59 * var(--u));
  }

  .desc-modules {
    left: calc(19 * var(--u));
    top: calc(51 * var(--u));
  }

  .desc-installments {
    left: calc(29 * var(--u));
    top: calc(61 * var(--u));
  }

  /* What you'll be able to do (440px) */
  .skills-section {
    width: calc(440 * var(--u));
    margin: calc(48 * var(--u)) auto 0;
  }

  .skills-layout {
    gap: calc(18 * var(--u));
  }

  .skills-header-col {
    width: calc(407.77 * var(--u));
    gap: calc(18 * var(--u));
  }

  .skills-title {
    width: calc(233 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .skills-subtitle {
    width: calc(233 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .skills-list-col {
    width: calc(407.77 * var(--u));
    gap: calc(28 * var(--u));
  }

  .skills-items-wrap {
    width: calc(407.77 * var(--u));
    gap: calc(18 * var(--u));
  }

  .skill-item {
    padding-bottom: calc(1.8876 * var(--u));
    gap: calc(16 * var(--u));
  }

  .skill-row {
    gap: calc(7.5504 * var(--u));
  }

  .skill-num {
    font-size: calc(23.0484 * var(--u));
    line-height: calc(28.81 * var(--u));
  }

  .skill-text {
    width: calc(324.67 * var(--u));
    font-size: calc(16.9883 * var(--u));
    line-height: calc(18.88 * var(--u));
  }

  .skill-icon {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
  }

  .skill-icon-01 {
    width: calc(35.86 * var(--u));
    height: calc(35.86 * var(--u));
  }

  .skill-dashed-line {
    border-bottom-width: calc(0.9438 * var(--u));
  }

  .skills-footer-note {
    width: calc(408 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(14.68 * var(--u));
    letter-spacing: -0.0567em;
    text-align: center;
  }

  .section-orange-divider {
    border-bottom-width: calc(1 * var(--u));
  }

  /* What to expect (440px) */
  .expect-section {
    width: calc(408 * var(--u));
    margin: calc(45 * var(--u)) auto 0;
    gap: calc(28 * var(--u));
  }

  .expect-header {
    gap: calc(18 * var(--u));
  }

  .expect-title {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .expect-subtitle {
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .expect-body {
    gap: calc(28 * var(--u));
  }

  .expect-grid {
    width: calc(408 * var(--u));
    height: calc(403 * var(--u));
    gap: calc(15 * var(--u));
  }

  .expect-card-content {
    left: calc(8 * var(--u));
    top: calc(10 * var(--u));
    width: calc(110 * var(--u));
    gap: calc(24 * var(--u));
  }

  .expect-card-2 .expect-card-content {
    left: calc(9 * var(--u));
    top: calc(8 * var(--u));
    width: calc(108 * var(--u));
  }

  .expect-card-3 .expect-card-content {
    left: calc(9 * var(--u));
    top: calc(7 * var(--u));
    width: calc(108 * var(--u));
  }

  .expect-card-4 .expect-card-content {
    left: calc(8 * var(--u));
    top: calc(6.5 * var(--u));
    gap: calc(15 * var(--u));
  }

  .expect-card-5 .expect-card-content {
    left: calc(8 * var(--u));
    top: calc(15.5 * var(--u));
  }

  .expect-card-6 .expect-card-content {
    left: calc(8 * var(--u));
    top: calc(7 * var(--u));
    gap: calc(20 * var(--u));
  }

  .expect-card-title {
    font-size: calc(12.235 * var(--u));
    line-height: calc(14.68 * var(--u));
  }

  .expect-card-title.title-narrow {
    width: calc(101 * var(--u));
  }

  .expect-card-title.title-wide {
    width: calc(108 * var(--u));
  }

  .expect-card-icon {
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    margin-left: calc(34 * var(--u));
  }

  .expect-card-desc {
    font-size: calc(12.235 * var(--u));
  }

  .desc-lh-lg {
    line-height: calc(14.68 * var(--u));
  }

  .desc-lh-md {
    line-height: calc(13 * var(--u));
  }

  .desc-lh-sm {
    line-height: calc(12 * var(--u));
  }

  /* Course Outline (440px) */
  .outline-section {
    width: calc(408 * var(--u));
    margin: calc(28.15 * var(--u)) auto 0;
    gap: 0;
  }

  .outline-header {
    margin-left: calc(-1 * var(--u));
    margin-bottom: calc(28 * var(--u));
    gap: calc(12 * var(--u));
  }

  .outline-title {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .outline-subtitle,
  .outline-highlight {
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .outline-highlight {
    white-space: nowrap;
  }

  .modules-row-1 {
    margin-bottom: calc(18 * var(--u));
  }

  .module-card {
    width: calc(123 * var(--u));
    height: calc(232 * var(--u));
  }

  .module-inner {
    left: calc(6 * var(--u));
    width: calc(110 * var(--u));
    gap: calc(2 * var(--u));
  }

  .mod-inner-01 {
    top: calc(17 * var(--u));
  }

  .mod-inner-02 {
    top: calc(12 * var(--u));
  }

  .mod-inner-03 {
    top: calc(15 * var(--u));
  }

  .mod-inner-04 {
    top: calc(7 * var(--u));
  }

  .mod-inner-05 {
    top: calc(12 * var(--u));
  }

  .mod-inner-06 {
    top: calc(8 * var(--u));
  }

  .module-top-group {
    gap: calc(5 * var(--u));
  }

  .module-header-group {
    gap: calc(8 * var(--u));
  }

  .module-title-stack {
    width: calc(82.75 * var(--u));
    gap: calc(15 * var(--u));
  }

  .module-num-row {
    gap: calc(8 * var(--u));
  }

  .mod-num-01 {
    width: calc(26.91 * var(--u));
    height: calc(18 * var(--u));
  }

  .mod-num-02 {
    width: calc(34.04 * var(--u));
    height: calc(18 * var(--u));
  }

  .mod-num-03 {
    width: calc(34.62 * var(--u));
    height: calc(18 * var(--u));
  }

  .mod-num-04 {
    width: calc(32.41 * var(--u));
    height: calc(15 * var(--u));
  }

  .mod-num-05 {
    width: calc(34.88 * var(--u));
    height: calc(18 * var(--u));
  }

  .mod-num-06 {
    width: calc(35.39 * var(--u));
    height: calc(18 * var(--u));
  }

  .mod-word {
    font-size: calc(12 * var(--u));
    line-height: calc(11.14 * var(--u));
    width: calc(40 * var(--u));
    height: calc(13 * var(--u));
  }

  .mod-name {
    font-size: calc(12 * var(--u));
    line-height: calc(11.14 * var(--u));
  }

  .mod-name-01 {
    width: calc(82.75 * var(--u));
  }

  .mod-name-02 {
    width: calc(93 * var(--u));
  }

  .mod-name-03 {
    width: calc(90 * var(--u));
  }

  .mod-name-04 {
    width: calc(75 * var(--u));
  }

  .mod-name-05 {
    width: calc(88 * var(--u));
  }

  .mod-name-06 {
    width: calc(98 * var(--u));
  }

  .mod-solid-line {
    border-bottom-width: calc(0.5 * var(--u));
  }

  .mod-summary {
    margin-top: calc(2 * var(--u));
    font-size: calc(8 * var(--u));
    line-height: calc(8 * var(--u));
  }

  .mod-details {
    font-size: calc(8 * var(--u));
    line-height: calc(8 * var(--u));
    white-space: normal;
    display: flex;
    flex-direction: column;
  }

  .mod-hyphen {
    display: none;
  }

  .mod-detail-line {
    display: block;
    position: relative;
    padding-left: calc(8.5 * var(--u));
  }

  .mod-detail-line::before {
    content: "•";
    position: absolute;
    left: calc(2.5 * var(--u));
    top: 0;
  }

  .outline-bottom-wrap {
    gap: calc(28 * var(--u));
  }

  .cta-secure-seat {
    width: calc(110 * var(--u));
    height: calc(30 * var(--u));
  }

  .cta-secure-seat .cta-inner {
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-secure-seat .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-secure-seat .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  /* Blueprint Sections Stack (440px) */
  .blueprint-sections-stack {
    width: calc(440 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
    gap: calc(28 * var(--u));
  }

  .bp-section {
    gap: calc(24 * var(--u));
  }

  .bp-earning,
  .bp-why,
  .bp-who {
    gap: calc(18 * var(--u));
  }

  .bp-header {
    width: calc(408 * var(--u));
    align-items: flex-start;
    gap: calc(18 * var(--u));
  }

  .bp-header-earning {
    width: calc(400 * var(--u));
  }

  .bp-why .bp-header,
  .bp-who .bp-header {
    gap: calc(18 * var(--u));
  }

  .bp-title,
  .bp-title-sm {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
    text-align: left;
  }

  .bp-subtitle,
  .bp-subtitle-left,
  .bp-subtitle-who {
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
    text-align: left;
  }

  .bp-subtitle-earning {
    width: calc(399 * var(--u));
  }

  .bp-subtitle-who {
    width: calc(200 * var(--u));
  }

  .earning-intro-text {
    display: block;
    width: calc(406 * var(--u));
    font-family: var(--font-chakra);
    font-weight: 400;
    font-size: calc(12 * var(--u));
    line-height: calc(13 * var(--u));
    letter-spacing: -0.0422em;
    color: var(--text-white);
    text-align: left;
  }

  .blueprint-box {
    width: calc(440 * var(--u));
  }

  .bp-box-tall {
    height: calc(245 * var(--u));
  }

  .bp-box-medium,
  .bp-box-medium-sm {
    width: calc(440 * var(--u));
    height: calc(172 * var(--u));
  }

  .bp-box-short {
    width: calc(440 * var(--u));
    height: calc(127 * var(--u));
  }

  .bp-inner-frame,
  .bp-box-tall .bp-inner-frame,
  .bp-box-medium .bp-inner-frame,
  .bp-box-medium-sm .bp-inner-frame,
  .bp-box-short .bp-inner-frame,
  .bp-who .bp-box-short .bp-inner-frame {
    width: calc(408 * var(--u));
    height: auto;
    padding: calc(8 * var(--u));
    border-width: calc(0.58 * var(--u));
    left: 0;
  }

  .bp-text,
  .bp-text-sm {
    width: calc(392 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .bp-pathway-item,
  .bp-text-sm .bp-pathway-item {
    padding-left: calc(20.25 * var(--u));
  }

  .bp-pathway-item::before,
  .bp-text-sm .bp-pathway-item::before {
    left: calc(6.75 * var(--u));
  }

  .bp-pathways .bp-box-tall {
    height: calc(246 * var(--u));
  }

  .bp-pathways .bp-vline-left {
    left: calc(13 * var(--u));
  }

  .bp-pathways .bp-vline-right {
    right: calc(12 * var(--u));
  }

  .bp-pathways .bp-ticks-col {
    top: calc(7 * var(--u));
    bottom: calc(14 * var(--u));
  }

  .bp-pathways .bp-divider {
    width: calc(408 * var(--u));
  }

  .bp-vline-left,
  .bp-box-medium-sm .bp-vline-left,
  .bp-box-short .bp-vline-left {
    left: calc(12 * var(--u));
    border-left-width: calc(0.28 * var(--u));
  }

  .bp-vline-right,
  .bp-box-medium-sm .bp-vline-right,
  .bp-box-short .bp-vline-right {
    right: calc(13 * var(--u));
    border-left-width: calc(0.28 * var(--u));
  }

  .bp-hline-top,
  .bp-hline-bottom,
  .bp-box-medium-sm .bp-hline-top,
  .bp-box-medium-sm .bp-hline-bottom,
  .bp-box-short .bp-hline-top,
  .bp-box-short .bp-hline-bottom,
  .bp-tick,
  .bp-box-medium-sm .bp-tick,
  .bp-box-short .bp-tick {
    border-top-width: calc(0.28 * var(--u));
  }

  .bp-box-medium .bp-hline-top,
  .bp-box-medium-sm .bp-hline-top,
  .bp-box-short .bp-hline-top {
    left: 0;
    width: calc(439 * var(--u));
  }

  .bp-box-medium .bp-hline-bottom,
  .bp-box-medium-sm .bp-hline-bottom,
  .bp-box-short .bp-hline-bottom {
    left: 0;
    width: calc(440 * var(--u));
  }

  .bp-ticks-col {
    top: calc(12 * var(--u));
    bottom: calc(10 * var(--u));
    width: calc(12 * var(--u));
    left: 0;
  }

  .bp-box-medium .bp-ticks-col,
  .bp-box-medium-sm .bp-ticks-col {
    top: calc(19 * var(--u));
    bottom: calc(9 * var(--u));
    width: calc(12 * var(--u));
  }

  .bp-box-short .bp-ticks-left,
  .bp-box-short .bp-ticks-right {
    top: calc(19 * var(--u));
    bottom: calc(12 * var(--u));
    width: calc(12 * var(--u));
    left: 0;
  }

  .bp-ticks-right,
  .bp-box-medium .bp-ticks-right,
  .bp-box-medium-sm .bp-ticks-right,
  .bp-box-short .bp-ticks-right {
    left: auto;
    right: 0;
  }

  .bp-orange-note,
  .note-two-lines,
  .note-who {
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .note-two-lines {
    width: calc(386 * var(--u));
  }

  .note-who {
    width: calc(394 * var(--u));
  }

  .bp-earning .bp-cta-wrap,
  .bp-who .bp-cta-wrap {
    margin-top: calc(-2 * var(--u));
  }

  .bp-divider {
    width: calc(408 * var(--u));
  }

  .bp-earning .bp-divider,
  .bp-why .bp-divider,
  .bp-who .bp-divider {
    margin-top: calc(10 * var(--u));
  }

  .cta-start-skill {
    width: calc(136 * var(--u));
    height: calc(29 * var(--u));
  }

  .cta-start-skill .cta-inner {
    width: auto;
    height: auto;
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-start-skill .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-start-skill .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  .cta-yes-register {
    width: calc(163.38 * var(--u));
    height: calc(29 * var(--u));
  }

  .cta-yes-register .cta-inner {
    width: auto;
    height: auto;
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-yes-register .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-yes-register .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  /* How Enrolment Works (440px) */
  .enrolment-section {
    width: calc(408 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
    gap: calc(24 * var(--u));
  }

  .enrolment-header {
    align-self: flex-start;
    align-items: flex-start;
    gap: calc(18 * var(--u));
  }

  .enrolment-title {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .enrolment-subtitle {
    width: calc(200 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
    text-align: left;
  }

  .enrolment-grid {
    grid-template-columns: repeat(2, calc(196 * var(--u)));
    row-gap: calc(28 * var(--u));
  }

  .step-card {
    width: calc(196 * var(--u));
    height: calc(260 * var(--u));
    border-width: calc(1 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .step-card-inner {
    left: calc(13 * var(--u));
    width: calc(170 * var(--u));
    gap: calc(28 * var(--u));
  }

  .step-inner-01 {
    top: calc(39 * var(--u));
  }

  .step-inner-02 {
    top: calc(37 * var(--u));
  }

  .step-inner-03 {
    top: calc(23 * var(--u));
  }

  .step-inner-04 {
    top: calc(26 * var(--u));
  }

  .step-num {
    font-size: calc(24 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .step-body {
    gap: calc(24 * var(--u));
  }

  .step-body-01 {
    gap: calc(80 * var(--u));
  }

  .step-heading {
    font-size: calc(24 * var(--u));
    line-height: calc(16 * var(--u));
  }

  .step-heading-01 {
    line-height: calc(15 * var(--u));
  }

  .step-desc {
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .cta-register-now {
    width: calc(88 * var(--u));
    height: calc(29 * var(--u));
  }

  .cta-register-now .cta-inner {
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-register-now .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-register-now .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  /* Your Investment (440px) */
  .investment-section {
    width: calc(440 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
    gap: calc(22 * var(--u));
  }

  .investment-header {
    width: calc(408 * var(--u));
    align-items: flex-start;
    gap: calc(18 * var(--u));
  }

  .investment-fee-banner {
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .cta-first-installment {
    width: calc(185 * var(--u));
    height: calc(29 * var(--u));
  }

  .cta-first-installment .cta-inner {
    width: auto;
    height: auto;
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-first-installment .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-first-installment .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  .investment-divider {
    width: calc(408 * var(--u));
  }

  /* FAQs (440px) */
  .faq-section {
    width: calc(408 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
    align-items: flex-start;
  }

  .faq-header {
    margin-bottom: calc(35 * var(--u));
  }

  .faq-title {
    font-size: calc(16 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .faq-title-desktop {
    display: inline;
  }

  .faq-title-tablet {
    display: none;
  }

  .faq-list {
    gap: calc(32 * var(--u));
  }

  .faq-card {
    padding: calc(1 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
    min-height: calc(109 * var(--u));
  }

  .faq-card-lg {
    min-height: calc(143 * var(--u));
  }

  .faq-card-sm {
    min-height: calc(100 * var(--u));
  }

  .faq-card-xs {
    min-height: calc(98 * var(--u));
  }

  .faq-question-row {
    width: calc(381 * var(--u));
  }

  .faq-question {
    font-size: calc(14 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .faq-icon {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  .faq-card:not(.is-open) {
    padding-bottom: calc(8 * var(--u));
  }

  .faq-answer-wrap {
    margin-top: calc(17 * var(--u));
  }

  .faq-answer {
    width: calc(381 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .faq-answer-pushed {
    margin-top: calc(17 * var(--u));
    margin-left: calc(3 * var(--u));
  }

  .faq-answer-low {
    margin-top: calc(17 * var(--u));
  }

  .faq-divider {
    margin-top: calc(28 * var(--u));
  }

  /* Final Call to Action (440px) */
  .final-cta-section {
    width: calc(440 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
    gap: calc(18 * var(--u));
  }

  .final-cta-top {
    gap: calc(18 * var(--u));
  }

  .final-cta-text-group {
    width: calc(406 * var(--u));
    gap: calc(18 * var(--u));
  }

  .final-cta-headers {
    gap: calc(18 * var(--u));
  }

  .final-orange-quote {
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .bp-box-final .bp-vline-left {
    left: calc(14 * var(--u));
  }

  .bp-box-final .bp-vline-right {
    right: calc(11 * var(--u));
  }

  .bp-box-final .bp-ticks-left {
    left: calc(2 * var(--u));
  }

  .bp-box-final .bp-ticks-right {
    right: calc(-2 * var(--u));
  }

  .cta-final-register {
    width: calc(188 * var(--u));
    height: calc(29 * var(--u));
  }

  .cta-final-register .cta-inner {
    padding: calc(7.1884 * var(--u));
    border-width: calc(0.5 * var(--u));
  }

  .cta-final-register .cta-text {
    font-size: calc(11.2492 * var(--u));
    line-height: calc(13.5 * var(--u));
  }

  .cta-final-register .btn-corner {
    width: calc(13 * var(--u));
    height: calc(7 * var(--u));
  }

  /* Footer (440px) */
  .site-footer {
    width: calc(440 * var(--u));
    min-height: calc(538 * var(--u));
    margin-top: calc(100 * var(--u));
    padding: calc(49 * var(--u)) calc(16 * var(--u)) calc(32 * var(--u)) calc(41 * var(--u));
    justify-content: flex-start;
  }

  .footer-main-row {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }

  .footer-brand-col {
    order: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(40 * var(--u));
    margin-bottom: calc(43 * var(--u));
  }

  .footer-logo-img {
    width: calc(58 * var(--u));
    height: calc(58 * var(--u));
  }

  .footer-brand-desc {
    width: calc(255 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u));
    color: var(--text-light-blue);
  }

  .footer-contact-group {
    order: 2;
    margin-left: 0;
    align-items: flex-start;
    gap: calc(28 * var(--u));
    margin-bottom: calc(29 * var(--u));
  }

  .footer-talk-col {
    width: calc(244 * var(--u));
    gap: calc(24 * var(--u));
  }

  .footer-follow-col {
    width: calc(81 * var(--u));
    gap: calc(24 * var(--u));
  }

  .footer-links-stack,
  .footer-phones-stack {
    gap: calc(10 * var(--u));
  }

  .footer-col-heading,
  .heading-visit {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u));
    color: var(--text-light-blue);
  }

  .footer-link,
  .footer-visit-text {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u));
    color: var(--text-white);
  }

  .footer-visit-col {
    order: 3;
    margin-left: calc(34 * var(--u));
    /* 75 - 41 */
    width: auto;
    gap: calc(18 * var(--u));
  }

  .footer-copyright {
    margin-top: calc(111 * var(--u));
    /* 488 - 377 */
    margin-left: calc(18 * var(--u));
    /* 59 - 41 */
    width: calc(319 * var(--u));
    text-align: left;
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u));
    color: var(--text-white);
  }
}

/* ==========================================================================
   ENROLLMENT MODAL FORM (Figma #328:766)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 17, 34, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  background-color: #06183D;
  border: 1px solid rgba(255, 123, 0, 0.45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(255, 123, 0, 0.15);
  border-radius: 6px;
  padding: 36px 32px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay.is-open .modal-container {
  transform: translateY(0) scale(1);
}

/* Custom Modal Scrollbar */
.modal-container::-webkit-scrollbar {
  width: 6px;
}

.modal-container::-webkit-scrollbar-track {
  background: rgba(9, 17, 34, 0.6);
}

.modal-container::-webkit-scrollbar-thumb {
  background: rgba(255, 123, 0, 0.5);
  border-radius: 3px;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: var(--orange-primary);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #858585;
  background: transparent;
  border: 1px solid rgba(133, 133, 133, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--orange-primary);
  border-color: var(--orange-primary);
  transform: scale(1.08);
}

.modal-header {
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 123, 0, 0.25);
}

.modal-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-white);
  letter-spacing: -0.02em;
}

.modal-subtitle {
  font-family: var(--font-chakra);
  font-weight: 600;
  font-size: 14px;
  color: var(--orange-primary);
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.enrollment-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-label {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 4px;
}

.req-star {
  color: var(--orange-primary);
  font-size: 14px;
}

.opt-text {
  font-weight: 400;
  font-size: 12px;
  color: #858585;
}

.form-input,
.form-textarea {
  width: 100%;
  background-color: rgba(9, 17, 34, 0.7);
  border: 1px solid #858585;
  border-radius: 4px;
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #858585;
  font-family: var(--font-chakra);
  font-size: 13px;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--orange-primary);
  box-shadow: 0 0 10px rgba(255, 123, 0, 0.35);
  background-color: rgba(9, 17, 34, 0.95);
}

.form-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

.phone-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #858585;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(9, 17, 34, 0.7);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-input-wrap:focus-within {
  border-color: var(--orange-primary);
  box-shadow: 0 0 10px rgba(255, 123, 0, 0.35);
}

.country-code-pill,
.country-code-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px;
  background-color: rgba(22, 32, 58, 0.95);
  border: none;
  border-right: 1px solid rgba(133, 133, 133, 0.5);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #FFFFFF;
  max-width: 175px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 24px;
}

.country-code-select option {
  background-color: #06183D;
  color: #FFFFFF;
  font-family: var(--font-mono);
  padding: 8px;
}

.form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 36px;
}

.form-select option {
  background-color: #06183D;
  color: #FFFFFF;
  font-family: var(--font-mono);
  padding: 8px;
}

.phone-field {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.form-row-age {
  display: flex;
  align-items: center;
  gap: 10px;
}

.age-field {
  width: 90px;
  text-align: center;
}

.age-separator {
  color: #858585;
  font-family: var(--font-mono);
  font-weight: 700;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-options-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(9, 17, 34, 0.35);
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.radio-label:hover {
  background: rgba(9, 17, 34, 0.7);
  border-color: rgba(255, 123, 0, 0.3);
}

.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #858585;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.18s ease;
}

.custom-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--orange-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.radio-label input[type="radio"]:checked+.custom-radio {
  border-color: var(--orange-primary);
}

.radio-label input[type="radio"]:checked+.custom-radio::after {
  opacity: 1;
  transform: scale(1);
}

.radio-text {
  font-family: var(--font-chakra);
  font-size: 13.5px;
  color: var(--text-white);
  line-height: 1.35;
}

.modal-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.cta-modal-submit {
  width: 100%;
  max-width: 360px;
  height: 52px;
}

.cta-modal-submit .cta-inner {
  width: 100%;
  height: 100%;
  padding: 12px 24px;
}

.cta-modal-submit .cta-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cta-modal-submit .btn-corner {
  width: 24px;
  height: 14px;
}

.modal-consent-text {
  font-family: var(--font-chakra);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.45;
  color: #A0B2D4;
  text-align: center;
}

.form-status {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
  display: none;
}

.form-status.is-loading {
  display: block;
  color: var(--text-light-blue);
  background: rgba(187, 209, 255, 0.1);
  border: 1px solid rgba(187, 209, 255, 0.3);
  padding: 10px;
}

.form-status.is-success {
  display: block;
  color: #34D399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 12px;
}

.form-status.is-error {
  display: block;
  color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  padding: 12px;
}

/* ==========================================================================
   PAYMENT SUCCESS VIEW (Exact Figma #364:19 Redesign)
   ========================================================================== */
.modal-container.is-success-state {
  max-width: 920px;
  padding: 56px 40px 48px;
  background-color: #06183D;
  border: 1px solid rgba(255, 123, 0, 0.45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(255, 123, 0, 0.15);
  border-radius: 6px;
  transition: max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-success-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: modalSuccessFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalSuccessFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

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

.success-inner-stack {
  width: 100%;
  max-width: 801px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma Image 71 */
.success-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.success-badge-img {
  width: 103.4px;
  height: 148px;
  object-fit: contain;
  display: block;
}

/* Titles Group (Frame 2147259875) */
.success-titles-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.success-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  text-align: center;
  margin: 0;
}

.success-subtitle {
  font-family: var(--font-chakra);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--orange-primary);
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
}

/* Figma Arrow 1 Divider */
.success-divider {
  width: 100%;
  max-width: 600px;
  height: 2px;
  background-color: var(--orange-primary);
  opacity: 0.5;
  margin: 36px auto;
  border: none;
}

/* Body Text (Figma #365:28) */
.success-message {
  font-family: var(--font-chakra);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 801px;
  margin: 0 auto;
}

/* Transaction Ref Box (Figma Frame 2147259873) */
.success-ref-box {
  width: 100%;
  max-width: 464px;
  height: 53px;
  background-color: #08132A;
  border: 1px solid var(--orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin: 40px auto 32px;
  box-sizing: border-box;
}

.ref-text {
  font-family: var(--font-chakra);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ref-code {
  font-family: var(--font-chakra);
  font-weight: 400;
  color: #FFFFFF;
}

/* CTA WhatsApp Button (Figma Group 365:59) */
.success-cta-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.cta-whatsapp-channel {
  width: 100%;
  max-width: 367px;
  height: 58.5px;
  background-color: var(--orange-primary);
  border: 1px solid #091122;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.cta-whatsapp-channel .cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
}

.whatsapp-btn-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.cta-whatsapp-channel .cta-text {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #FFFFFF;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mobile Adjustments for Modal */
@media (max-width: 1024px) {
  .modal-container.is-success-state {
    max-width: 740px;
    padding: 44px 30px 36px;
  }

  .success-badge-wrap {
    margin-bottom: 30px;
  }

  .success-badge-img {
    width: 90px;
    height: 129px;
  }

  .success-title {
    font-size: 28px;
  }

  .success-subtitle {
    font-size: 22px;
  }

  .success-titles-group {
    gap: 14px;
  }

  .success-divider {
    max-width: 500px;
    margin: 28px auto;
  }

  .success-message {
    font-size: 18px;
    line-height: 1.45;
  }

  .success-ref-box {
    max-width: 420px;
    height: 48px;
    margin: 30px auto 26px;
  }

  .ref-text {
    font-size: 17px;
  }

  .cta-whatsapp-channel {
    max-width: 340px;
    height: 54px;
  }

  .cta-whatsapp-channel .cta-text {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 12px;
  }

  .modal-container {
    padding: 24px 18px 20px;
    max-height: 94vh;
  }

  .modal-container.is-success-state {
    max-width: 100%;
    padding: 28px 16px 24px;
  }

  .form-row-2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .modal-title {
    font-size: 19px;
  }

  .modal-subtitle {
    font-size: 12.5px;
  }

  .form-label,
  .radio-text {
    font-size: 12.5px;
  }

  .form-input,
  .form-textarea {
    font-size: 12.5px;
    padding: 9px 12px;
  }

  .cta-modal-submit {
    height: 48px;
    max-width: 100%;
  }

  .cta-modal-submit .cta-text {
    font-size: 14.5px;
  }

  /* Payment Success View Mobile */
  .success-badge-wrap {
    margin-bottom: 20px;
  }

  .success-badge-img {
    width: 74px;
    height: 106px;
  }

  .success-titles-group {
    gap: 10px;
  }

  .success-title {
    font-size: 21px;
    letter-spacing: -0.03em;
  }

  .success-subtitle {
    font-size: 16px;
  }

  .success-divider {
    max-width: 100%;
    margin: 18px auto;
  }

  .success-message {
    font-size: 14.5px;
    line-height: 1.5;
  }

  .success-ref-box {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    margin: 20px auto 18px;
  }

  .ref-text {
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
  }

  .cta-whatsapp-channel {
    max-width: 100%;
    height: 50px;
  }

  .cta-whatsapp-channel .cta-text {
    font-size: 16px;
  }

  .whatsapp-btn-icon {
    width: 20px;
    height: 20px;
  }
}