/* ============================================
   PROJECT MANAGEMENT PARTNER — CUSTOM STYLES
   Bootstrap 5 Override & Custom CSS

   RE-SKINNED TO THE APP'S DESIGN SYSTEM (Phase W1). The site was navy #0B1E3D
   and teal #00C2A8 in Tomorrow/Outfit/Inter; the product it sells is gold and
   charcoal in DM Sans/Lexend. Somebody who bought here and then signed in met
   two different companies.

   THE SWAP IS ALMOST ENTIRELY THIS BLOCK, which is why the re-skin is small:
   every colour and font in both stylesheets already reads through a variable,
   so the brand lives in one place and always did. Buttons are the one exception
   and are handled where they are declared - the app's primary is a muted-gold
   fill with dark-gold ink and NO border, which is a different shape from the
   solid accent this site had.

   CONTRAST IS THE REASON FOR THE PAIRINGS. White on #C6A02E measures 2.48:1 and
   fails AA outright, so gold is never a background for white text here either:
   the app's charcoal-on-gold and gold-deep-on-white pairings are reused exactly
   rather than re-derived by eye.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Lexend:wght@300..600&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* --- Brand, from the app -------------------------------------------
     `--color-primary` was the navy this site was built on: headings, dark
     panels, the footer. Its counterpart in the app is the charcoal the sidebar
     and every heading are drawn in, so that is what it becomes. The accent -
     the colour that says "this is the thing" - becomes the gold. */
  --color-primary: #2E3036;
  --color-accent: #C6A02E;
  --color-accent-alt: #E0B355;
  --color-dark: #2A2C31;
  --color-light: #F7F8FA;
  --color-white: #FFFFFF;
  --color-text: #5A5F66;
  --color-muted: #9CA1A9;
  --color-border: #E7EAEE;

  /* --- The gold family, as the app measures it -----------------------
     Five golds, not one, and they are contrast PAIRS rather than shades: the
     muted fill exists to carry the dark ink, and the deep gold exists to be
     readable on white where the accent itself is not. */
  --color-gold: #C6A02E;
  --color-gold-bright: #E0B355;
  --color-gold-deep: #B07D1A;
  --color-gold-muted: #EAD9A8;
  --color-gold-ink: #5C4A15;
  --color-gold-soft: #FBF3DF;
  --color-gold-soft-2: #FDF7E6;

  /* --- Semantic, from the app. Calm rather than loud, and never the only
     signal - a tick or a word carries the same meaning beside them. */
  --color-correct: #2E7D5B;
  --color-correct-tint: #E4F3EC;
  --color-incorrect: #C0574F;
  --color-incorrect-tint: #F7E9E7;
  --color-info: #3D5A8A;
  --color-info-tint: #E8EEF8;

  /* --- Type. DM Sans carries display and headings, Lexend the reading.
     `--font-sub` pointed at a third family; the app has two, so it points at
     the display face rather than introducing one the product does not use. */
  --font-heading: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sub: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Lexend', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Shadows carry the charcoal now rather than the old navy, so a card lifting
     off the page does not tint faintly blue against a gold accent. */
  --shadow-sm: 0 2px 12px rgba(46, 48, 54, .08);
  --shadow-md: 0 8px 32px rgba(46, 48, 54, .13);
  --shadow-lg: 0 20px 60px rgba(46, 48, 54, .18);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
}

h3,
h4 {
  font-family: var(--font-sub);
  font-weight: 700;
  color: var(--color-primary);
}

h5,
h6 {
  font-family: var(--font-sub);
  font-weight: 600;
  color: var(--color-primary);
}

p {
  font-family: var(--font-body);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-accent-alt);
}

img {
  max-width: 100%;
}

.section-pad {
  padding: 96px 0;
}

.section-pad-sm {
  padding: 64px 0;
}

.section-label {
  font-family: var(--font-sub);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 580px;
}

.divider-accent {
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 2px;
  margin-bottom: 24px;
}

/* ============================================
   NAVBAR
   ============================================ */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition);
  background: transparent;
}

#mainNav.scrolled {
  padding: 12px 0;
  background: rgba(42, 44, 49, .96);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

#mainNav .navbar-brand img {
  height: 44px;
}

#mainNav .nav-link {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: .92rem;
  color: rgba(255, 255, 255, .85) !important;
  padding: 6px 14px !important;
  transition: var(--transition);
  letter-spacing: .02em;
}

#mainNav .nav-link:hover {
  color: var(--color-accent) !important;
}

#mainNav .btn-nav-cta {
  background: var(--color-accent);
  color: var(--color-primary) !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 22px !important;
}

#mainNav .btn-nav-cta:hover {
  background: var(--color-accent-alt);
  /* CHARCOAL, NOT WHITE. This hover put white on the bright gold, which is the
     same failure the primary CTA had - the nav button already carries charcoal
     at rest and simply keeps it. */
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  filter: invert(1);
}

@media (max-width: 991px) {

  #mainNav.scrolled .navbar-collapse,
  #mainNav .navbar-collapse.show {
    background: rgba(42, 44, 49, .98);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
#hero {
  min-height: 100vh;
  background: url('../images/exam-background.jpeg') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42, 44, 49, .92) 0%, rgba(46, 48, 54, .78) 55%, rgba(198, 160, 46, .15) 100%);
}

#hero .hero-content {
  position: relative;
  z-index: 2;
  padding-top: 100px;
}

#hero .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(198, 160, 46, .15);
  border: 1px solid rgba(198, 160, 46, .35);
  border-radius: 50px;
  padding: 6px 16px;
  font-family: var(--font-sub);
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

#hero .badge-pill span {
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {

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

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

#hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 12px;
}

#hero h1 span {
  color: var(--color-accent);
}

#hero .hero-sub {
  font-family: var(--font-sub);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(255, 255, 255, .75);
  margin-bottom: 16px;
  font-weight: 400;
}

#hero .hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--color-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 40px;
  font-weight: 600;
}

/* THE APP'S PRIMARY, EXACTLY: a muted-gold fill carrying dark-gold ink, and no
   border. This was a gold gradient with WHITE text - which measures 2.48:1 and
   fails AA outright, the worst contrast on the site and on its most important
   control. The fill and the ink are a measured pair, which is why neither is
   picked without the other. */
.btn-primary-cta {
  background: var(--color-gold-muted);
  color: var(--color-gold-ink) !important;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 36px;
  border-radius: 10px;
  border: none;
  transition: var(--transition);
  box-shadow: 0 8px 24px rgba(198, 160, 46, .28);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Hover takes it to the full gold with charcoal on it - the app's other
   measured pair, 5.32:1. */
.btn-primary-cta:hover {
  background: var(--color-gold);
  color: var(--color-primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(198, 160, 46, .38);
}

.btn-outline-cta {
  background: transparent;
  color: rgba(255, 255, 255, .9) !important;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-outline-cta:hover {
  border-color: var(--color-accent);
  /* THE BRIGHT GOLD, because this tier sits on the dark panels. The accent
     itself is too dark to read against charcoal; `--color-gold-bright` is the
     lifted one the app uses in exactly that position. */
  color: var(--color-gold-bright) !important;
  background: rgba(198, 160, 46, .12);
}

.btn-fill-cta {
  background: var(--color-gold-muted);
  color: var(--color-gold-ink) !important;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1rem;
  padding: 5px 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-fill-cta:hover {
  background: transparent;
  color: var(--color-gold-deep) !important;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1rem;
  padding: 5px 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero-stat-item {
  text-align: left;
}

.hero-stat-item .num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hero-stat-item .num span {
  color: var(--color-accent);
}

.hero-stat-item p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
  margin: 4px 0 0;
  font-family: var(--font-sub);
}

.hero-testimonial-card {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 380px;
  margin-top: 40px;
}

.hero-testimonial-card .stars {
  color: #FFB800;
  font-size: 1rem;
  margin-bottom: 12px;
}

.hero-testimonial-card blockquote {
  font-size: .92rem;
  color: rgba(255, 255, 255, .85);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}

.hero-testimonial-card .author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-testimonial-card .author .avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .9rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.hero-testimonial-card .author .name {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: .88rem;
  color: #fff;
}

.hero-testimonial-card .author .role {
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
}

/* ── ReadySetPMP Registration Card ── */
.rsp-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(198, 160, 46, .12);
  animation: rspCardIn .7s cubic-bezier(.22, .68, 0, 1.2) both;
  animation-delay: .35s;
  opacity: 0;
}

@keyframes rspCardIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.97);
  }

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

/* Top band: logo + price badge */
.rsp-card-top {
  background: linear-gradient(135deg, rgba(198, 160, 46, .18) 0%, rgba(224, 179, 85, .14) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 24px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rsp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rsp-logo {
  height: 36px;
  /*filter: brightness(0) invert(1);*/
}

.rsp-logo-fallback {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
}

.rsp-logo-fallback span {
  color: var(--color-accent);
}

.rsp-price-badge {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 12px;
  padding: 10px 14px;
  text-align: right;
  flex-shrink: 0;
}

.rsp-price-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rsp-price-label {
  font-family: var(--font-sub);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(42, 44, 49, .75);
}

.rsp-price-amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}

.rsp-price-desc {
  font-size: .65rem;
  color: rgba(42, 44, 49, .65);
  font-family: var(--font-sub);
}

/* Heading inside card */
.rsp-card-heading {
  padding: 18px 24px 4px;
}

.rsp-card-heading h2 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 4px;
}

.rsp-card-heading p {
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
  margin: 0;
}

/* Form inside card */
#heroRegForm {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}














@keyframes rspCodePop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}



















/* Submit button */
.rsp-submit-btn {
  margin-top: 4px;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-alt) 100%);
  color: var(--color-primary);
  font-family: var(--font-sub);
  font-weight: 800;
  font-size: .95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, opacity .2s;
  box-shadow: 0 8px 28px rgba(198, 160, 46, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rsp-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(198, 160, 46, .55);
}

.rsp-submit-btn:active {
  transform: translateY(0);
}

.rsp-submit-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}


/* Secure note */
.rsp-secure-note {
  text-align: center;
  font-size: .72rem;
  color: rgba(255, 255, 255, .3);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.rsp-secure-note i {
  color: var(--color-accent);
}

/* Responsive */
@media (max-width: 991px) {
  .rsp-card {
    max-width: 100%;
  }
}

@media (max-width: 480px) {

  .rsp-card-top {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================
   ABOUT SECTION
   ============================================ */
#about {
  background: var(--color-light);
}

#about .about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

#about .about-img-wrap img {
  width: 100%;
  display: block;
}

#about .about-img-wrap .badge-float {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sub);
}

#about .about-img-wrap .badge-float .icon-wrap {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

#about .about-img-wrap .badge-float strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

#about .about-img-wrap .badge-float span {
  font-size: .78rem;
  color: var(--color-muted);
}

#about .stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

#about .stat-box {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-accent);
}

#about .stat-box .num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
}

#about .stat-box p {
  font-size: .78rem;
  color: var(--color-muted);
  margin: 4px 0 0;
}

/* ============================================
   FEATURES SECTION
   ============================================ */
#features {
  background: var(--color-white);
}

#features .features-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

#features .features-header .section-sub {
  margin: 0 auto;
}

.feature-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  height: 100%;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-alt));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card .icon-box {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(198, 160, 46, .1), rgba(224, 179, 85, .1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-card .icon-box img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.feature-card h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

/* ============================================
   BANNER / CTA STRIP
   ============================================ */
/* ── CTA Banner ── */
#cta-banner {
  position: relative;
  background: url('../images/readysetpmp-logo.png') center/cover no-repeat,
    linear-gradient(135deg, var(--color-primary) 0%, #31343A 100%);
  /* fallback solid if bg-image path differs */
  /* The app's own sidebar gradient - the charcoal this brand is built on. */
  background: linear-gradient(135deg, #2E3036 0%, #292B30 55%, #31343A 100%);
  overflow: hidden;
  padding: 96px 0;
}

/* Subtle radial glow top-right */
#cta-banner::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(198, 160, 46, .18) 0%, transparent 70%);
  pointer-events: none;
}

/* Subtle grid texture overlay */
#cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

#cta-banner .container {
  position: relative;
  z-index: 2;
}

/* ── Left column ── */
.cta-left {
  padding-right: 40px;
}

.cta-logo-wrap {
  margin-bottom: 28px;
}

.cta-logo {
  max-height: 72px;
  max-width: 320px;
  width: auto;
  filter: drop-shadow(0 4px 16px rgba(198, 160, 46, .25));
  transition: transform .3s ease;
}

.cta-logo:hover {
  transform: scale(1.03);
}

.cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 18px;
}

.cta-heading span {
  color: var(--color-accent);
}

.cta-body {
  font-size: .97rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 28px;
}

.cta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50px;
  padding: 6px 14px;
  font-family: var(--font-sub);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  transition: all .25s;
}

.cta-pills span i {
  color: var(--color-accent);
  font-size: .85rem;
}

.cta-pills span:hover {
  background: rgba(198, 160, 46, .12);
  border-color: rgba(198, 160, 46, .3);
  color: #fff;
}

/* ── Right column ── */
.cta-right-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cta-price-wrap {
  position: relative;
  /* Was inline-flex in a row, to centre a single 200px image. It holds three
     stacked lines of text now - eyebrow, figure, note - which ran together on
     one line until this became a column. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}



/* CTA action button */
.cta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: var(--color-primary) !important;
  font-family: var(--font-sub);
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 36px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(198, 160, 46, .45);
  transition: transform .25s, box-shadow .25s;
  width: 100%;
  justify-content: center;
  letter-spacing: .01em;
}

.cta-action-btn i {
  font-size: 1.1rem;
  transition: transform .25s;
}

.cta-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(198, 160, 46, .6);
}

.cta-action-btn:hover i {
  transform: translateX(4px);
}

.cta-reassurance {
  font-size: .75rem;
  color: rgba(255, 255, 255, .35);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sub);
}

.cta-reassurance i {
  color: var(--color-accent);
  font-size: .8rem;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .cta-left {
    padding-right: 0;
    text-align: center;
  }

  .cta-body {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-pills {
    justify-content: center;
  }

  .cta-logo {
    max-height: 56px;
  }
}

@media (max-width: 768px) {
  #cta-banner {
    padding: 64px 0;
  }

}


/* ============================================
   PRICING SECTION
   ============================================ */
#pricing {
  background: var(--color-light);
}

#pricing .pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

#pricing .pricing-header .section-sub {
  margin: 0 auto 32px;
}

.pricing-tabs .nav-pills {
  background: var(--color-white);
  border-radius: 50px;
  padding: 6px;
  display: inline-flex;
  box-shadow: var(--shadow-sm);
  gap: 4px;
}

.pricing-tabs .nav-pills .nav-link {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-muted);
  border-radius: 50px;
  padding: 10px 28px;
  transition: var(--transition);
  border: none;
}

.pricing-tabs .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: #fff;
  box-shadow: 0 4px 16px rgba(198, 160, 46, .35);
}

.tab-content {
  padding-top: 48px;
}

.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  height: 100%;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

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

.pricing-card.popular {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: var(--color-primary);
  font-family: var(--font-sub);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 50px;
  white-space: nowrap;
}

.pricing-card .plan-name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pricing-card .plan-desc {
  font-size: .82rem;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.pricing-card .price {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 24px;
}

.pricing-card .price sup {
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: top;
  margin-top: 6px;
}

.pricing-card .price .period {
  font-size: .85rem;
  font-weight: 400;
  color: var(--color-muted);
}

.pricing-card .feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.pricing-card .feature-list li {
  font-size: .88rem;
  color: var(--color-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-card .feature-list li:last-child {
  border-bottom: none;
}

.pricing-card .feature-list li .check {
  color: var(--color-accent);
  font-size: 1rem;
}

.pricing-card .feature-list li .cross {
  color: #CDD5E0;
  font-size: 1rem;
}

.btn-plan {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  transition: var(--transition);
}

.btn-plan:hover,
.pricing-card.popular .btn-plan {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 160, 46, .35);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
#testimonials {
  background: var(--color-white);
}

#testimonials .testimonials-header {
  text-align: center;
  margin-bottom: 52px;
}

.testimonial-card {
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  height: 100%;
  position: relative;
  transition: var(--transition);
  border: 1.5px solid var(--color-border);
}

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

.testimonial-card .quote-icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-accent);
  font-family: Georgia, serif;
  margin-bottom: 4px;
  opacity: .5;
}

.testimonial-card blockquote {
  font-size: .95rem;
  color: var(--color-text);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 24px;
  border: none;
  padding: 0;
}

.testimonial-card .author-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card .avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.testimonial-card .author-info .name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .92rem;
  color: var(--color-primary);
  margin: 0;
}

.testimonial-card .author-info .role {
  font-size: .8rem;
  color: var(--color-muted);
}

.testimonial-card .stars {
  color: #FFB800;
  font-size: .9rem;
  margin-bottom: 8px;
}

/* ============================================
   FAQ SECTION
   ============================================ */
#faq {
  background: var(--color-light);
}

#faq .faq-header {
  margin-bottom: 52px;
}

.accordion-item {
  background: var(--color-white) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.accordion-button {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary) !important;
  background: var(--color-white) !important;
  padding: 22px 24px;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: var(--color-accent) !important;
  background: rgba(198, 160, 46, .04) !important;
}

.accordion-button::after {
  filter: hue-rotate(160deg) saturate(2);
  background-size: 1rem;
}

.accordion-body {
  font-size: .93rem;
  color: var(--color-muted);
  line-height: 1.75;
  padding: 4px 24px 22px;
}

/* ============================================
   FAQ — TABS & GROUPS
   ============================================ */
.faq-tabs-wrap .nav-pills {
  background: var(--color-white);
  border-radius: 50px;
  padding: 6px;
  display: inline-flex;
  box-shadow: var(--shadow-sm);
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.faq-tabs-wrap .nav-pills .nav-link {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-muted);
  border-radius: 50px;
  padding: 10px 24px;
  transition: var(--transition);
  border: none;
  display: inline-flex;
  align-items: center;
}

.faq-tabs-wrap .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: #fff;
  box-shadow: 0 4px 16px rgba(198, 160, 46, .35);
}

.faq-tab-content {
  padding-top: 40px;
}

.faq-course-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(198, 160, 46, .08), rgba(224, 179, 85, .06));
  border: 1.5px solid rgba(198, 160, 46, .2);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 28px;
}

.faq-course-intro i {
  font-size: 2rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.faq-course-intro strong {
  display: block;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
}

.faq-course-intro span {
  font-size: .83rem;
  color: var(--color-muted);
}

.faq-group {
  margin-bottom: 28px;
}

.faq-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--color-accent);
  background: rgba(198, 160, 46, .05);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .92rem;
  color: var(--color-primary);
}

.faq-group-header .faq-group-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: .9rem;
  flex-shrink: 0;
}

.faq-group .accordion-item {
  margin-bottom: 8px;
}

.faq-group .accordion-button {
  font-size: .93rem;
  padding: 18px 20px;
}

.faq-group .accordion-body {
  padding: 4px 20px 18px;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
#contact {
  background: var(--color-white);
}

#contact .contact-header {
  margin-bottom: 52px;
}

.contact-info-card {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  height: 100%;
  color: rgba(255, 255, 255, .8);
}

.contact-info-card h3 {
  color: #fff;
  margin-bottom: 16px;
}

.contact-info-card p {
  font-size: .92rem;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, .65);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-info-item .icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(198, 160, 46, .15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.1rem;
}

.contact-info-item .info strong {
  display: block;
  font-family: var(--font-sub);
  font-size: .88rem;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 2px;
}

.contact-info-item .info span {
  font-size: .95rem;
  color: #fff;
}

.contact-form-card {
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  box-shadow: var(--shadow-sm);
}

.contact-form-card .form-label {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: var(--transition);
  box-shadow: none;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(198, 160, 46, .12);
}

.contact-form-card textarea {
  resize: vertical;
  min-height: 140px;
}

.btn-submit {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: #fff;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 40px;
  border-radius: 10px;
  border: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 160, 46, .4);
  color: #fff;
}

/* ============================================
   FOOTER
   ============================================ */
#footer {
  background: var(--color-dark);
  padding: 80px 0 0;
}

.footer-brand .logo {
  height: 48px;
  margin-bottom: 20px;
}

.footer-brand .tagline {
  font-family: var(--font-sub);
  font-size: .93rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.75;
  max-width: 280px;
  margin-bottom: 28px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  font-size: 1rem;
  transition: var(--transition);
}

.social-btn:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-3px);
}

.footer-heading {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: .9rem;
  color: rgba(255, 255, 255, .55);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover {
  color: var(--color-accent);
  padding-left: 4px;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .07);
  margin: 48px 0 0;
}

/* Footer Contact Form */
.footer-form .form-control,
.footer-form .form-select {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: .88rem;
  color: rgba(255, 255, 255, .9);
  transition: var(--transition);
}

.footer-form .form-control::placeholder {
  color: rgba(255, 255, 255, .3);
}

.footer-form .form-control:focus,
.footer-form .form-select:focus {
  background: rgba(255, 255, 255, .1);
  border-color: var(--color-accent);
  box-shadow: none;
  color: #fff;
}

.footer-form .form-select option {
  background: var(--color-dark);
  color: #fff;
}

.btn-footer-send {
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .92rem;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  transition: var(--transition);
  width: 100%;
}

.btn-footer-send:hover {
  background: var(--color-accent-alt);
  color: #fff;
  transform: translateY(-2px);
}

/* Sub-footer */
#sub-footer {
  background: rgba(0, 0, 0, .35);
  padding: 24px 0;
  margin-top: 0;
}

#sub-footer .copyright {
  font-size: .82rem;
  color: rgba(255, 255, 255, .35);
  margin: 0;
}

/* Developer credit (Uni Web Tec): same tone as the line it sits in. */
#sub-footer .credit-link { color: inherit; text-decoration: none; }
#sub-footer .credit-link:hover,
#sub-footer .credit-link:focus-visible { color: rgba(255, 255, 255, .7); text-decoration: underline; }

#sub-footer .disclaimer {
  font-size: .75rem;
  color: rgba(255, 255, 255, .22);
  line-height: 1.6;
  margin: 8px 0 0;
}

#sub-footer .legal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#sub-footer .legal-links a {
  font-size: .82rem;
  color: rgba(255, 255, 255, .35);
  transition: var(--transition);
}

#sub-footer .legal-links a:hover {
  color: var(--color-accent);
}

/* ============================================
   INNER PAGES (Privacy, Terms)
   ============================================ */
.inner-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #31343A 100%);
  padding: 140px 0 80px;
  text-align: center;
}

.inner-hero h1 {
  color: #fff;
  margin-bottom: 12px;
}

.inner-hero p {
  color: rgba(255, 255, 255, .6);
  font-size: 1rem;
}

.inner-content {
  padding: 80px 0;
}

.inner-content h2 {
  font-size: 1.4rem;
  margin: 36px 0 12px;
  padding-top: 8px;
}

.inner-content h2:first-child {
  margin-top: 0;
}

.inner-content p,
.inner-content li {
  font-size: .95rem;
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 12px;
}

.inner-content ul {
  padding-left: 20px;
}

.inner-content .last-updated {
  display: inline-block;
  background: rgba(198, 160, 46, .1);
  color: var(--color-accent);
  font-family: var(--font-sub);
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 32px;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
[data-aos] {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}

[data-aos="fade-up"] {
  transform: translateY(32px);
}

[data-aos="fade-right"] {
  transform: translateX(-32px);
}

[data-aos="fade-left"] {
  transform: translateX(32px);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* ============================================
   BACK TO TOP
   ============================================ */
#backToTop {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(198, 160, 46, .4);
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 900;
}

#backToTop.visible {
  opacity: 1;
  pointer-events: all;
}

#backToTop:hover {
  transform: translateY(-4px);
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 768px) {
  .section-pad {
    padding: 64px 0;
  }

  .hero-stats {
    gap: 20px;
  }

  .hero-stat-item .num {
    font-size: 1.6rem;
  }

  #about .stat-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .pricing-tabs .nav-pills {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  .contact-form-card,
  .contact-info-card {
    padding: 32px 24px;
  }
}

@media (max-width: 576px) {
  #about .stat-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* ============================================
   CONTRAST: GOLD AS TEXT, ON LIGHT SURFACES
   ============================================
   THE SITE HAD ONE GOLD DOING TWO JOBS. `--color-accent` painted fills, borders
   and gradients AND was used as a text colour - which is fine on the charcoal
   panels (#C6A02E on #2E3036 measures 4.6:1) and fails on the pale ones:
   measured at 2.48:1 on white and 2.33:1 on #F7F8FA. That is below AA for text
   of any size.

   The app keeps them apart, which is exactly why it has more than one gold:

     #C6A02E  --color-gold        fills, borders, dots. Never text on pale.
     #B07D1A  --color-gold-deep   3.62:1 - AA for LARGE text (>=24px, or >=19px
                                  bold). Display headings and section titles.
     #5C4A15  --color-gold-ink    8.59:1 - AA for anything, including the 12px
                                  uppercase eyebrows where gold-deep is not
                                  enough on its own.

   So these rules are split by SIZE rather than swapped wholesale, and the dark
   sections are deliberately untouched - gold on charcoal was already passing
   and is the pairing the brand is built on.
   ============================================ */

/* Large display gold: the headline span, section titles, plan prices. */
.hero-title span,
.section-title span,
.rsp-hero-title span,
h1 span,
h2 span {
  color: var(--color-gold-deep);
}

/* Small gold: eyebrows, labels, taglines, links on pale surfaces. Uppercase at
   12px is the hardest case on the page, and gold-deep alone does not carry it. */
.section-label,
.rsp-block-eyebrow,
.hero-tagline,
.rsp-dial-code,
.btn-plan,
.nav-link.active,
a.active {
  color: var(--color-gold-ink);
}

/* The one exception, and it is the important one: on a charcoal panel the ink
   would disappear. Dark sections keep the bright gold they were designed with. */
#hero .section-label,
#cta-banner .section-label,
footer .section-label,
#sub-footer .section-label,
.bg-dark .section-label,
#hero .hero-tagline {
  color: var(--color-gold-bright);
}

/* ============================================================================
   PHASE W2 — CLEANUP, TOKENISED INLINE STYLES, ALIGNMENT
   ============================================================================
   Everything below either replaces an inline style="" that dodged the design
   tokens, or supports markup W2 changed. The rules are grouped by what they
   came from so the next person can see why each one exists.
   ========================================================================= */

/* ---- The sub-page navbar ------------------------------------------------
   terms, privacy, readysetpmp and checkout each carried this navbar inline,
   with `background:rgba(7,17,31,.96)` hard-coded - THE OLD NAVY. Because it
   was inline it beat every stylesheet, so the W1 re-skin recoloured the home
   page and silently missed all four sub-pages. Same declarations, one place,
   reading the charcoal token. */
#mainNav.is-subpage-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: rgba(42, 44, 49, .96);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

/* The eyebrow over an inner hero sits on charcoal, so it takes the bright gold
   rather than the deep gold the light sections use. */
.inner-hero .section-label {
  color: var(--color-gold-bright);
}

/* ---- Was style="background:var(--color-light)" on #faq ---------------- */
.section-tinted {
  background: var(--color-light);
}

/* ---- Was style="color:var(--color-accent)" on the hero rating star ----
   Gold-bright, not the accent: the star sits on the dark hero, where the
   mid-gold reads muddy. */
.hero-stat-item .num .hero-stat-star {
  /* `.hero-stat-item .num span` already claims this element at (0,2,1), so a
     bare class never applied and the star stayed on the mid-gold. */
  color: var(--color-gold-bright);
  margin-left: 2px;
}

/* ---- Was style="width: 320px" on the hero ReadySetPMP logo ------------
   That element carried TWO style attributes; HTML keeps the first and throws
   the second away, so its fade-in delay never applied. Fixed width also meant
   it could not shrink below 320px on a narrow phone. */
.hero-rsp-logo {
  width: 320px;
  max-width: 100%;
  height: auto;
}

/* ---- Was style="font-size:1.02rem" on three RSP sub-headings ---------- */
.rsp-subhead {
  font-size: 1.02rem;
}

/* ---- The hero offer card, where the registration form used to be ------
   The form asked for a name, email, country, phone and a password, and posted
   to nothing. What replaced it states what the money buys and hands off to
   checkout. */
.rsp-includes {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rsp-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .89rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.rsp-tick {
  flex: 0 0 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(224, 179, 85, .16);
  color: var(--color-gold-bright);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The card's CTA is a link now rather than a submit button, and it takes the
   app's primary shape: muted-gold fill, dark-gold ink, no border. The gradient
   it had was a third button style the product does not use. */
.rsp-submit-btn {
  background: var(--color-gold-muted);
  color: var(--color-gold-ink);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(198, 160, 46, .28);
}

.rsp-submit-btn:hover:not(:disabled) {
  background: var(--color-gold);
  color: var(--color-primary);
  box-shadow: 0 14px 36px rgba(198, 160, 46, .42);
}

/* 30% white on the dark card measured about 2:1 - below AA for the payment
   reassurance line, which is exactly the text a buyer wants to be able to
   read. */
.rsp-secure-note {
  color: rgba(255, 255, 255, .58);
}

/* ---- The checkout stub ------------------------------------------------
   Not a checkout. It says so plainly rather than mocking up a card form that
   cannot take a payment. W6 replaces this page. */
.checkout-stub {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 48px 36px;
}

.checkout-stub-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold-deep);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-stub h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.checkout-stub p {
  color: var(--color-text);
  margin-bottom: 14px;
}

.checkout-stub-plan:empty {
  display: none;
}

.checkout-stub-plan {
  display: inline-block;
  background: var(--color-gold-soft-2);
  color: var(--color-gold-ink);
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: .86rem;
  border-radius: 999px;
  padding: 7px 18px;
}

.checkout-stub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 18px;
}

.checkout-stub-note {
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0;
}

.checkout-stub-note a {
  /* GOLD-DEEP IS A LARGE-TEXT COLOUR. It measures 3.62:1 on white - fine for a
     heading at 3:1, short of the 4.5:1 this 0.85rem link needs. Gold-ink is
     the pairing the app uses for small gold text on a light surface. */
  color: var(--color-gold-ink);
  font-weight: 600;
}

/* ---- Bootstrap gutter vs container padding ----------------------------
   `.row.g-5` sets --bs-gutter-x: 3rem ON THE ROW, which gives the row -24px
   side margins. The compensating padding lives on `.container`, which derives
   it from ITS OWN --bs-gutter-x - still the 1.5rem default, so 12px. On a
   desktop the container is narrower than the window and the 12px overhang has
   somewhere to go; on a phone the container is the full width and it becomes
   12px of real horizontal scroll on every page. Matching the variable on the
   container is the fix Bootstrap intends. */
.container:has(> .row.g-5),
.container:has(> .row.gx-5) {
  --bs-gutter-x: 3rem;
}

/* ---- Wide tables scroll inside themselves -----------------------------
   The RSP fee and comparison tables are wider than a phone. A table cannot be
   made narrow without destroying it, so it scrolls in its own box rather than
   dragging the whole page sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}

.table-scroll > table {
  margin-bottom: 0;
}

/* ---- Entrance animations must not reach outside the viewport ----------
   `fade-left` and `fade-right` park an element 32px to the side until it
   scrolls into view. On a phone a full-width column doing that puts 32px of
   content past the right edge of every section still below the fold. It never
   became a visible scrollbar only because `body { overflow-x: hidden }`
   happened to clip it - a mask over the cause rather than a fix. Below the
   tablet breakpoint the slide is vertical instead, which reads the same at
   that size and stays inside the page. */
@media (max-width: 991.98px) {
  [data-aos="fade-right"],
  [data-aos="fade-left"] {
    transform: translateY(32px);
  }
}

/* `.btn-outline-cta` is a dark-panel button: 90% white on transparent with a
   white border. On the checkout card - a white surface - it was white on
   white and effectively invisible. On a light surface it takes the ink and
   border it needs to be seen. */
.checkout-stub .btn-outline-cta {
  color: var(--color-primary) !important;
  border-color: var(--color-border);
}

.checkout-stub .btn-outline-cta:hover {
  border-color: var(--color-gold-deep);
  color: var(--color-gold-ink) !important;
  background: var(--color-gold-soft-2);
}

/* ---- The CTA banner's price, as text ----------------------------------
   `readysetpmp-price.png` was a 236x236 picture of the number 19.99, used here
   and on the ReadySetPMP page, with the figure in the alt attribute. A price in
   an image cannot be edited without a designer, cannot be indexed, and cannot
   show two currencies - which W4 needs, since the product sells in USD and INR.
   The image is deleted; both places carry the same text structure now. */
.cta-price-eyebrow {
  display: block;
  font-family: var(--font-sub);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.cta-price-figure {
  margin: 6px 0 4px;
  line-height: 1;
}

.cta-price-sub {
  display: block;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}

/* The two price components live in readysetpmp.css, which the home page does
   not load, so the figure itself is declared here as well. */
.cta-price-wrap .rsp-price-amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -.02em;
}

.cta-price-wrap .rsp-price-currency {
  font-size: 1.5rem;
  font-weight: 700;
  vertical-align: super;
  margin-right: 1px;
}

/* The banner's Buy button was the last bright-gold gradient on the site. Same
   action as every other Buy, so it takes the same shape: muted-gold fill,
   dark-gold ink, no border. */
.cta-action-btn {
  background: var(--color-gold-muted);
  color: var(--color-gold-ink) !important;
  box-shadow: 0 8px 24px rgba(198, 160, 46, .28);
}

.cta-action-btn:hover {
  background: var(--color-gold);
  color: var(--color-primary) !important;
  box-shadow: 0 16px 40px rgba(198, 160, 46, .42);
}

/* 35% white on charcoal is about 3:1 - the same reading the ReadySetPMP card's
   reassurance line had before W2 raised it. Matched here. */
.cta-reassurance {
  color: rgba(255, 255, 255, .58);
}

/* ---- The currency toggle (W4) -----------------------------------------
   Both prices are real, so the switch says which one is showing rather than
   offering a conversion. It only appears once the feed has answered with more
   than one currency - drawn from JavaScript for that reason, never in the
   HTML, so a page that cannot reach the API shows its published price with no
   dead control beside it.

   Both price blocks that carry one sit on charcoal, so the palette is the
   dark-surface pair: bright gold for the chosen option, muted white for the
   other. */
.price-toggle {
  display: inline-flex;
  margin-top: 12px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.price-toggle-option {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 5px 16px;
  border-radius: 999px;
  font-family: var(--font-sub);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
  transition: var(--transition);
}

.price-toggle-option:hover {
  color: var(--color-white);
}

.price-toggle-option.is-active {
  /* Charcoal on gold - the app's pairing, 7.4:1. White on gold is 2.48:1 and
     is the one combination this brand never uses. */
  background: var(--color-gold-muted);
  color: var(--color-gold-ink);
}

.price-toggle-option:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

/* ============================================================================
   THE CHROME W8 ADDED
   ============================================================================
   A skip link, a cookie banner, and focus rings on the nav. All three are in
   the shared partials, so each of these rules lands on every marketing page at
   once - which is the whole point of the conversion, and also why a mistake
   here is a site-wide mistake.
   ============================================================================ */

/* --- skip to content ------------------------------------------------------
   OFF-SCREEN UNTIL FOCUSED, not display:none. A hidden element is not in the
   tab order at all, so it could never be reached - which would make it a link
   that exists only to pass an audit. `clip` keeps it in the order and out of
   sight until the first Tab press brings it back.

   CHARCOAL ON GOLD, like every other primary control here: 8.6:1. */
.site-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--color-gold);
  color: var(--color-dark);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}

.site-skip-link:focus {
  top: 0;
  color: var(--color-dark);
  outline: 3px solid var(--color-dark);
  outline-offset: 2px;
}

/* --- a visible focus ring on the nav --------------------------------------
   Bootstrap draws one, and the navbar's own rules were overriding it to
   nothing. Somebody navigating by keyboard could tab through the entire header
   with no idea where they were. */
#mainNav .nav-link:focus-visible,
#mainNav .navbar-brand:focus-visible,
#mainNav .navbar-toggler:focus-visible,
.footer-links a:focus-visible,
.legal-links a:focus-visible,
.social-btn:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

#mainNav .btn-nav-cta:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

#backToTop:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

/* --- the cookie banner ----------------------------------------------------
   A BAR, NOT A MODAL. It does not trap focus and does not block the page:
   nothing non-essential is running until it is answered, so there is nothing to
   force a decision about. A reader who ignores it is simply not measured.

   THE TWO BUTTONS CARRY EQUAL WEIGHT by design. Making "Essential only" a faint
   piece of text beside a large gold "Accept all" is the dark pattern this is
   deliberately not - both are real buttons, both are legible, and declining
   takes one click. */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1900;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(42, 44, 49, .12);
}

.cookie-consent-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-consent-text { flex: 1 1 420px; }

.cookie-consent-title {
  margin: 0 0 2px;
  font-weight: 700;
  color: var(--color-primary);
  font-size: .95rem;
}

.cookie-consent-body {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-text);
}

.cookie-consent-body a {
  color: var(--color-gold-deep);
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.btn-consent-accept,
.btn-consent-decline {
  padding: 9px 20px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-consent-accept {
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  color: var(--color-dark);
}

.btn-consent-accept:hover { background: var(--color-gold-bright); }

.btn-consent-decline {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.btn-consent-decline:hover { border-color: var(--color-primary); }

.btn-consent-accept:focus-visible,
.btn-consent-decline:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .cookie-consent-actions { width: 100%; }
  .btn-consent-accept,
  .btn-consent-decline { flex: 1 1 0; }
}