:root {
  --gold: #ffb606;
  --gold-dark: #e09f00;
  --gold-light: #fff8e1;
  --gold-pale: #fffbee;
  --navy: #1a2535;
  --navy-mid: #243347;
  --navy-light: #2c3e50;
  --blue: #3498db;
  --blue-dark: #2176ae;
  --blue-pale: #eaf4fd;
  --green: #27ae60;
  --green-dark: #1e8449;
  --green-pale: #eafaf1;
  --purple: #8e44ad;
  --purple-pale: #f5eef8;
  --paypal: #003087;
  --paypal-dark: #001f5b;
  --red: #e74c3c;
  --off-white: #f7f8fa;
  --muted: #6b7a90;
  --border: #e2e8f0;
  --shadow-sm: 0 2px 12px rgba(26, 37, 53, .08);
  --shadow-md: 0 4px 24px rgba(26, 37, 53, .12);
  --shadow-lg: 0 12px 48px rgba(26, 37, 53, .18);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

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

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

/* ── URGENCY STRIP ── */
.urgency-strip {
  background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
  color: #fff;
  padding: .55rem 1rem;
  font-family: 'Sora', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  text-align: center
}

.pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .5;
    transform: scale(1.4)
  }
}

.cd-seg {
  background: rgba(255, 255, 255, .22);
  border-radius: 4px;
  padding: .1rem .38rem;
  font-size: .85rem;
  font-weight: 800;
  min-width: 26px;
  text-align: center;
  font-family: 'Sora', sans-serif
}

/* ── HERO ── */
.hero {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 55%, #1a3a5c 100%);
  color: #fff;
  padding: 4.5rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(52, 152, 219, .2) 0%, transparent 70%);
  pointer-events: none
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 182, 6, .15);
  border: 1px solid rgba(255, 182, 6, .4);
  color: var(--gold);
  border-radius: 100px;
  font-family: 'Sora', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  margin-bottom: 1.5rem
}

.hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.1rem
}

.hero h1 span {
  color: var(--gold)
}

.hero-sub {
  font-size: 1.05rem;
  opacity: .88;
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.75
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem
}

.stat {
  text-align: center
}

.stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1
}

.stat-lbl {
  font-size: .78rem;
  opacity: .7;
  margin-top: .2rem;
  letter-spacing: .03em
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 500;
  padding: .35rem .85rem
}

.trust-pill i {
  color: var(--gold);
  font-size: .78rem
}

/* ── PATH CHOOSER ── */
.path-section {
  padding: 4rem 2rem;
  background: var(--off-white)
}

.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto
}

.path-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden
}

.path-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg)
}

.path-card.path-live {
  border-color: var(--blue)
}

.path-card.path-video {
  border-color: var(--gold)
}

.path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px
}

.path-card.path-live::before {
  background: var(--blue)
}

.path-card.path-video::before {
  background: var(--gold)
}

.path-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.6rem
}

.path-live .path-icon {
  background: var(--blue-pale);
  color: var(--blue-dark)
}

.path-video .path-icon {
  background: var(--gold-light);
  color: var(--gold-dark)
}

.path-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .5rem
}

.path-subtitle {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-family: 'Sora', sans-serif
}

.path-live .path-subtitle {
  color: var(--blue)
}

.path-video .path-subtitle {
  color: var(--gold-dark)
}

.path-desc {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.5rem
}

.path-features {
  list-style: none;
  margin-bottom: 1.75rem
}

.path-features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: #444;
  line-height: 1.5;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border)
}

.path-features li:last-child {
  border-bottom: none
}

.path-features li i {
  font-size: .8rem;
  margin-top: .18rem;
  flex-shrink: 0
}

.path-live .path-features li i {
  color: var(--blue)
}

.path-video .path-features li i {
  color: var(--green)
}

.path-features .feat-no {
  color: var(--muted) !important;
  text-decoration: none
}

.path-features .feat-no i {
  color: #ccc !important
}

.path-schedule {
  background: var(--blue-pale);
  border: 1px solid rgba(52, 152, 219, .25);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.path-schedule i {
  color: var(--blue-dark);
  font-size: 1.1rem;
  flex-shrink: 0
}

.path-schedule-text {
  font-size: .85rem;
  color: var(--navy-light);
  line-height: 1.45
}

.path-schedule-text strong {
  color: var(--navy)
}

.path-contact {
  background: rgba(255, 182, 6, .1);
  border: 1px solid rgba(255, 182, 6, .3);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.path-contact i {
  color: var(--gold-dark);
  font-size: 1.1rem;
  flex-shrink: 0
}

.path-contact-text {
  font-size: .84rem;
  color: var(--navy-light);
  line-height: 1.45
}

.path-contact-text strong {
  color: var(--navy)
}

.btn-path-live {
  display: block;
  width: 100%;
  background: var(--blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: 1.1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all .25s
}

.btn-path-live:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, .4)
}

.btn-path-video {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: 1.1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all .25s
}

.btn-path-video:hover {
  box-shadow: 0 6px 20px rgba(255, 182, 6, .4);
  transform: translateY(-2px)
}

.path-note {
  font-size: .76rem;
  color: var(--muted);
  text-align: center;
  margin-top: .65rem;
  line-height: 1.4
}

/* ── TOAST ── */
#activityToast {
  position: fixed;
  bottom: 5.5rem;
  left: 1.5rem;
  z-index: 600;
  background: #fff;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--green);
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 300px;
  transform: translateX(-120%);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1)
}

#activityToast.show {
  transform: translateX(0)
}

.toast-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.toast-text {
  font-size: .8rem;
  color: var(--navy);
  line-height: 1.45
}

.toast-text strong {
  font-weight: 700
}

.toast-time {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .15rem
}

/* ── PROOF BAR ── */
.proof-bar {
  background: var(--navy);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap
}

.proof-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  font-weight: 500
}

.proof-item i {
  color: var(--gold);
  font-size: .9rem
}

.proof-bar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .15);
  flex-shrink: 0
}

/* ── SHARED ── */
.section-label {
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .6rem
}

.section-title {
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .7rem;
  line-height: 1.2
}

.section-sub {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  max-width: 520px;
  margin: 0 auto 3rem;
  line-height: 1.65
}

/* ── EXAM COUNTDOWN ── */
.exam-section {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  padding: 3rem 2rem;
  text-align: center
}

.exam-section h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem
}

.exam-section p {
  color: rgba(255, 255, 255, .75);
  font-size: .92rem;
  margin-bottom: 2rem
}

.countdown-blocks {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem
}

.cd-block {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 72px;
  text-align: center
}

.cd-num {
  font-family: 'Sora', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  display: block
}

.cd-lbl {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-top: .35rem
}

.exam-note {
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
  font-style: italic
}

/* ── WHAT YOU GET ── */
.roadmap-section {
  background: #fff;
  padding: 5rem 2rem
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto
}

.roadmap-card {
  background: var(--off-white);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s
}

.roadmap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md)
}

.roadmap-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem
}

.roadmap-icon i {
  color: var(--gold-dark);
  font-size: 1.2rem
}

.roadmap-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem
}

.roadmap-desc {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.6
}

.roadmap-card.dimmed .roadmap-icon {
  background: #f0f0f0
}

.roadmap-card.dimmed .roadmap-icon i {
  color: #bbb
}

.roadmap-card.dimmed .roadmap-title {
  color: var(--muted)
}

.roadmap-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px;
  margin-left: .4rem;
  font-family: 'Sora', sans-serif;
  vertical-align: middle;
  text-transform: uppercase
}

.badge-live-only {
  background: var(--blue-pale);
  color: var(--blue-dark)
}

.badge-video {
  background: var(--green-pale);
  color: var(--green-dark)
}

/* ── SUBSCRIPTION PRICING ── */
.pricing-section {
  padding: 5rem 2rem 4rem;
  background: var(--off-white)
}

.billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-bottom: 3rem
}

.billing-toggle {
  display: flex;
  align-items: center;
  gap: 1rem
}

.toggle-lbl {
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s;
  cursor: pointer
}

.toggle-lbl.active {
  color: var(--navy);
  font-weight: 700
}

.toggle-track {
  position: relative;
  width: 54px;
  height: 28px;
  background: var(--navy-mid);
  border-radius: 100px;
  cursor: pointer;
  transition: background .3s;
  flex-shrink: 0
}

.toggle-track.on {
  background: var(--green)
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  pointer-events: none
}

.toggle-track.on .toggle-knob {
  transform: translateX(26px)
}

.save-pill {
  background: var(--gold-light);
  color: var(--gold-dark);
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .2rem .6rem;
  border-radius: 100px;
  white-space: nowrap
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 860px;
  margin: 0 auto
}

.plan-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  border: 2px solid var(--border);
  position: relative;
  transition: transform .3s, box-shadow .3s, opacity .3s;
  box-shadow: var(--shadow-md)
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg)
}

.plan-card.featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, #fff 50%, var(--gold-pale) 100%)
}

.popular-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem 1.1rem;
  border-radius: 100px;
  white-space: nowrap
}

.tag-monthly {
  background: var(--blue);
  color: #fff
}

.tag-annual {
  background: var(--gold);
  color: var(--navy)
}

.plan-name {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .6rem
}

.price-block {
  margin-bottom: .6rem
}

.price-mur-row {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  margin-bottom: .3rem
}

.price-mur {
  font-family: 'Sora', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1
}

.price-currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: .38rem
}

.price-period {
  font-size: .88rem;
  color: var(--muted);
  padding-bottom: .38rem
}

.price-usd-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .2rem
}

.price-usd {
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paypal);
  line-height: 1
}

.price-usd-lbl {
  font-size: .75rem;
  color: var(--muted)
}

.price-rate {
  font-size: .7rem;
  color: var(--muted);
  font-style: italic
}

.savings-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 6px;
  margin-bottom: 1.25rem
}

.plan-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .9rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: .75rem
}

.plan-feature i {
  color: var(--green);
  font-size: .82rem;
  margin-top: .2rem;
  flex-shrink: 0
}

.plan-feature i.fa-xmark {
  color: #ddd
}

.plan-feature.feat-no {
  color: var(--muted)
}

.plan-feature strong {
  color: var(--navy)
}

.badge-ann {
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: .65rem;
  font-weight: 800;
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-left: .3rem;
  vertical-align: middle;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em
}

.badge-sub {
  background: var(--blue-pale);
  color: var(--blue-dark);
  font-size: .65rem;
  font-weight: 800;
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-left: .3rem;
  vertical-align: middle;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em
}

/* video-only notice box inside plan card */
.video-notice {
  background: rgba(255, 182, 6, .08);
  border: 1px solid rgba(255, 182, 6, .25);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .83rem;
  color: var(--navy-light);
  line-height: 1.55
}

.video-notice strong {
  color: var(--navy)
}

.video-notice a {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: underline
}

.pay-label {
  font-family: 'Sora', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: .6rem
}

.pay-btns {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: .7rem
}

.btn-pay {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem .95rem;
  border-radius: 12px;
  font-family: 'Sora', sans-serif;
  text-decoration: none;
  transition: all .25s;
  border: 2px solid transparent;
  min-height: 62px
}

.btn-pay-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1
}

.btn-pay-body {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0
}

.btn-pay-method {
  font-size: .76rem;
  font-weight: 700;
  line-height: 1
}

.btn-pay-price {
  font-size: .85rem;
  font-weight: 800;
  line-height: 1
}

.btn-pay-sub {
  font-size: .63rem;
  opacity: .8;
  line-height: 1;
  margin-top: .08rem
}

.btn-local {
  background: var(--green);
  color: #fff;
  border-color: var(--green-dark)
}

.btn-local:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(30, 132, 73, .35)
}

.btn-paypal {
  background: var(--paypal);
  color: #fff;
  border-color: var(--paypal-dark)
}

.btn-paypal:hover {
  background: var(--paypal-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(0, 31, 91, .35)
}

.seats-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem
}

.seats-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden
}

.seats-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #2ecc71);
  border-radius: 10px
}

.seats-text {
  font-size: .74rem;
  color: var(--red);
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  white-space: nowrap
}

.money-back {
  text-align: center;
  margin-top: 2rem;
  color: var(--muted);
  font-size: .82rem
}

.money-back i {
  color: var(--green);
  margin-right: .3rem
}

/* ── PLAN COMPARE TABLE ── */
.compare-strip {
  max-width: 860px;
  margin: 2.5rem auto 0;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.cs-head {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  background: var(--navy);
  padding: .75rem 1.25rem;
  gap: .5rem
}

.cs-head span {
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-align: center
}

.cs-head span:first-child {
  text-align: left;
  color: rgba(255, 255, 255, .4)
}

.cs-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  padding: .7rem 1.25rem;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  align-items: center
}

.cs-row:last-child {
  border-bottom: none
}

.cs-row:nth-child(even) {
  background: var(--off-white)
}

.cs-feat {
  font-size: .82rem;
  color: var(--navy);
  font-weight: 500
}

.cs-val {
  font-size: .82rem;
  color: var(--muted);
  text-align: center
}

.cs-val.yes {
  color: var(--green)
}

.cs-val.no {
  color: #ccc
}

.cs-val.hi {
  color: var(--gold-dark);
  font-weight: 700
}

/* ── CHAPTERS ── */
.included-section {
  background: #fff;
  padding: 5rem 2rem
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto
}

.included-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  background: #fff
}

.included-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg)
}

.card-img-wrap {
  position: relative;
  height: 175px;
  overflow: hidden
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s
}

.included-card:hover .card-img-wrap img {
  transform: scale(1.05)
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 37, 53, .88) 0%, rgba(26, 37, 53, .1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem
}

.unit-tag {
  background: var(--gold);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .18rem .5rem;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: .3rem;
  width: fit-content
}

.card-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25
}

.card-body {
  padding: 1rem 1.2rem 1.25rem
}

.card-desc {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: .9rem
}

.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  color: var(--navy);
  font-weight: 600;
  font-size: .8rem;
  padding: .45rem .95rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit
}

.btn-demo:hover {
  background: var(--navy);
  color: #fff
}

.btn-demo i {
  color: var(--gold);
  font-size: .8rem
}

.btn-demo:hover i {
  color: var(--gold)
}

/* ── VS TABLE ── */
.vs-section {
  background: var(--off-white);
  padding: 5rem 2rem
}

.vs-wrap {
  max-width: 860px;
  margin: 0 auto;
  overflow-x: auto
}

table.vs {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem
}

table.vs th {
  padding: 1rem 1.25rem;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .85rem
}

table.vs td {
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle
}

table.vs tr:last-child td {
  border-bottom: none
}

.vs-feat {
  text-align: left !important;
  color: var(--navy);
  font-weight: 500
}

.vs-lc {
  background: var(--gold-pale);
  text-align: center
}

.vs-other {
  text-align: center;
  color: var(--muted)
}

.vs-lc-head {
  background: var(--gold);
  color: var(--navy) !important;
  border-radius: 10px 10px 0 0
}

.ic-yes {
  color: var(--green);
  font-size: 1.1rem
}

.ic-no {
  color: #ccc;
  font-size: 1.1rem
}

.p-cell {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 800
}

.p-green {
  color: var(--green)
}

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

/* ── REFERRAL ── */
.referral-section {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  padding: 3rem 2rem;
  text-align: center
}

.referral-section h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .6rem
}

.referral-section p {
  color: rgba(255, 255, 255, .85);
  font-size: .95rem;
  margin-bottom: 1.75rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65
}

.ref-steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.ref-step {
  text-align: center;
  color: #fff
}

.ref-step-num {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 auto .6rem
}

.ref-step-text {
  font-size: .82rem;
  opacity: .9;
  max-width: 120px
}

.btn-ref {
  background: #fff;
  color: var(--green-dark);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  padding: .85rem 2rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .25s;
  text-decoration: none
}

.btn-ref:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15)
}

/* ── TESTIMONIALS ── */
.testi-section {
  padding: 5rem 2rem;
  background: #fff
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto
}

.testi-card {
  background: var(--off-white);
  border-radius: 16px;
  padding: 1.75rem;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm)
}

.testi-stars {
  color: var(--gold);
  font-size: .88rem;
  margin-bottom: .8rem
}

.testi-text {
  font-size: .9rem;
  color: #444;
  line-height: 1.72;
  margin-bottom: 1.2rem;
  font-style: italic
}

.testi-author {
  display: flex;
  align-items: center;
  gap: .75rem
}

.testi-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.testi-name {
  font-family: 'Sora', sans-serif;
  font-size: .86rem;
  font-weight: 700;
  color: var(--navy)
}

.testi-sub {
  font-size: .76rem;
  color: var(--muted)
}

.testi-result {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--green-pale);
  color: var(--green-dark);
  border-radius: 6px;
  padding: .18rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  margin-top: .35rem
}

/* ── FAQ ── */
.faq-section {
  padding: 5rem 2rem;
  background: var(--off-white)
}

.faq-wrap {
  max-width: 680px;
  margin: 0 auto
}

.faq-item {
  border-bottom: 1px solid var(--border)
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  cursor: pointer;
  gap: 1rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--navy);
  user-select: none
}

.faq-q i {
  color: var(--muted);
  font-size: .82rem;
  flex-shrink: 0;
  transition: transform .3s
}

.faq-item.open .faq-q i {
  transform: rotate(180deg)
}

.faq-a {
  display: none;
  padding-bottom: 1.2rem;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.72
}

.faq-item.open .faq-a {
  display: block
}

/* ── CTA ── */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 4rem 2rem;
  text-align: center
}

.cta-band h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem
}

.cta-band p {
  color: rgba(255, 255, 255, .75);
  margin-bottom: 2rem;
  font-size: .95rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65
}

.cta-btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap
}

.btn-cta-blue {
  background: var(--blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: .9rem 2rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .25s;
  text-decoration: none
}

.btn-cta-blue:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(52, 152, 219, .35)
}

.btn-cta-gold {
  background: var(--gold);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: .9rem 2rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .25s;
  text-decoration: none
}

.btn-cta-gold:hover {
  background: #ffc72c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 182, 6, .35)
}

.btn-cta-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .3);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  padding: .9rem 1.75rem;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .25s;
  text-decoration: none
}

.btn-cta-ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .6)
}

/* ── STICKY ── */
.sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  gap: .6rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
  align-items: center
}

.s-lbl {
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.1
}

.s-amt {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy)
}

.btn-sticky-live {
  flex: 1;
  background: var(--blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  padding: .75rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block
}

.btn-sticky-vid {
  flex: 1;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  padding: .75rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block
}

/* ── WHATSAPP ── */
.wa-float {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 400;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .5);
  text-decoration: none;
  transition: transform .2s
}

.wa-float:hover {
  transform: scale(1.1)
}

/* ── MODAL ── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 15, 25, .78);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto
}

.modal-backdrop.open {
  display: flex
}

.modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
  animation: modalIn .3s ease
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.94) translateY(20px)
  }

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

.modal-head {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 2rem 2rem 1.5rem;
  border-radius: 20px 20px 0 0;
  position: relative
}

.modal-head .unit-tag {
  margin-bottom: .5rem
}

.modal-head h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-right: 2.5rem
}

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(255, 255, 255, .15);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all .2s
}

.modal-close:hover {
  background: rgba(255, 255, 255, .25);
  transform: rotate(90deg)
}

.modal-body {
  padding: 1.75rem
}

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none
}

.learn-list {
  list-style: none;
  margin-bottom: 1.5rem
}

.learn-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: #444;
  line-height: 1.55;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border)
}

.learn-list li:last-child {
  border-bottom: none
}

.learn-list li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: .05rem
}

.modal-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem
}

.modal-cta-live {
  background: var(--blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  padding: .9rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
  transition: all .25s
}

.modal-cta-live:hover {
  background: var(--blue-dark);
  transform: translateY(-2px)
}

.modal-cta-vid {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  padding: .9rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
  transition: all .25s
}

.modal-cta-vid:hover {
  box-shadow: 0 6px 20px rgba(255, 182, 6, .35);
  transform: translateY(-2px)
}

/* ── RESPONSIVE ── */
@media(max-width:767px) {
  .urgency-strip {
    font-size: .72rem;
    gap: .5rem
  }

  .hero {
    padding: 3rem 1.25rem 2.75rem
  }

  .hero-stats {
    gap: 1.5rem
  }

  .stat-num {
    font-size: 1.6rem
  }

  .path-grid {
    grid-template-columns: 1fr
  }

  .pricing-section,
  .roadmap-section,
  .vs-section,
  .testi-section,
  .faq-section,
  .included-section {
    padding: 3.5rem 1.25rem
  }

  .referral-section,
  .exam-section {
    padding: 2.5rem 1.25rem
  }

  .plan-card {
    padding: 2rem 1.5rem
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto
  }

  .sticky-bar {
    display: flex
  }

  .wa-float {
    bottom: 6.5rem
  }

  .cta-band {
    padding: 3rem 1.25rem
  }

  #activityToast {
    max-width: calc(100vw - 3rem)
  }

  .proof-bar {
    gap: 1rem
  }

  .proof-bar-divider {
    display: none
  }

  .countdown-blocks {
    gap: .6rem
  }

  .cd-block {
    min-width: 60px;
    padding: .8rem 1rem
  }

  .cd-num {
    font-size: 1.8rem
  }

  .cs-head,
  .cs-row {
    font-size: .74rem;
    padding: .6rem .85rem
  }

  .path-section {
    padding: 2.5rem 1.25rem
  }

  .modal-cta-row {
    grid-template-columns: 1fr
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size: 1.75rem
  }

  .included-grid,
  .testi-grid,
  .roadmap-grid {
    grid-template-columns: 1fr
  }

  .price-mur {
    font-size: 2.5rem
  }

  .pay-btns {
    grid-template-columns: 1fr
  }

  .cs-head,
  .cs-row {
    grid-template-columns: 1.5fr 1fr 1fr !important
  }

  table.vs th:nth-child(4),
  table.vs td:nth-child(4) {
    display: none
  }
}

@media(hover:none) and (pointer:coarse) {

  .included-card:hover,
  .plan-card:hover,
  .testi-card:hover,
  .roadmap-card:hover,
  .path-card:hover {
    transform: none
  }

  .btn-pay:hover,
  .btn-cta-blue:hover,
  .btn-cta-gold:hover,
  .btn-hero-primary:hover {
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

/* ── ENROLMENT CALCULATOR ── */
.calc-section {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3555 100%);
  padding: 3.5rem 2rem
}

.calc-inner {
  max-width: 860px;
  margin: 0 auto
}

.calc-header {
  text-align: center;
  margin-bottom: 2rem
}

.calc-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem
}

.calc-header p {
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
  line-height: 1.6
}

.calc-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

.calc-month-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap
}

.calc-month-pill {
  padding: .45rem .9rem;
  border-radius: 100px;
  font-family: 'Sora', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  border: 2px solid var(--border);
  background: #fff;
  cursor: default;
  transition: all .25s;
  text-align: center;
  white-space: nowrap
}

.calc-month-pill.cmp-start {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy)
}

.calc-month-pill.cmp-back {
  background: var(--red-pale, #fdf2f2);
  color: var(--red);
  border-color: rgba(231, 76, 60, .35)
}

.calc-month-pill.cmp-current {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold-dark);
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(255, 182, 6, .4)
}

.calc-month-pill.cmp-future {
  background: var(--green-pale);
  color: var(--green-dark);
  border-color: rgba(39, 174, 96, .3)
}

.calc-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem
}

.calc-sum-item {
  text-align: center;
  padding: 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border)
}

.calc-sum-item.highlight {
  border-color: var(--gold);
  background: var(--gold-pale)
}

.calc-sum-label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem
}

.calc-sum-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1
}

.calc-sum-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .2rem
}

.calc-breakdown {
  background: var(--off-white);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem
}

.calc-breakdown-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .75rem;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem
}

.calc-row:last-child {
  border-bottom: none
}

.calc-row-label {
  color: var(--navy)
}

.calc-row-tag {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-left: .3rem;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase
}

.tag-back-m {
  background: var(--red-pale, #fdf2f2);
  color: var(--red)
}

.tag-curr-m {
  background: var(--gold-pale);
  color: var(--gold-dark)
}

.tag-future-m {
  background: var(--green-pale);
  color: var(--green-dark)
}

.calc-row-price {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--navy)
}

.calc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.25rem;
  background: var(--navy);
  border-radius: 10px;
  margin-bottom: 1rem;
  color: #fff
}

.calc-total-label {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .95rem
}

.calc-total-amount {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--gold)
}

.calc-recurring {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .83rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding: .75rem 1rem;
  background: var(--green-pale);
  border-radius: 10px;
  border: 1px solid rgba(39, 174, 96, .2)
}

.calc-recurring i {
  color: var(--green);
  flex-shrink: 0
}

.calc-why {
  background: var(--blue-pale);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .83rem;
  color: #1a4a6e;
  line-height: 1.6;
  border: 1px solid rgba(52, 152, 219, .15)
}

.calc-why i {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: .15rem
}

.calc-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem
}

.btn-calc-live {
  display: block;
  background: var(--blue);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: all .25s;
  border: none;
  cursor: pointer
}

.btn-calc-live:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(52, 152, 219, .4)
}

.btn-calc-vid {
  display: block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: all .25s
}

.btn-calc-vid:hover {
  box-shadow: 0 5px 18px rgba(255, 182, 6, .4);
  transform: translateY(-2px)
}

.calc-usd-note {
  text-align: center;
  font-size: .76rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 1rem
}

@media(max-width:600px) {
  .calc-summary {
    grid-template-columns: 1fr 1fr
  }

  .calc-cta-row {
    grid-template-columns: 1fr
  }

  .calc-month-row {
    gap: .35rem
  }

  .calc-month-pill {
    font-size: .68rem;
    padding: .35rem .65rem
  }
}