/* ============================================
   READYSETPMP — PRODUCT PAGE STYLES
   Extends style.css — fonts/colors/vars reused
   ============================================ */

/* ============================================
   HALF-SCREEN HERO
   ============================================ */
#rsp-hero {
  min-height: 64vh;
  display: flex;
  align-items: center;
  position: relative;
  background:
    linear-gradient(135deg, rgba(42, 44, 49, .93) 0%, rgba(46, 48, 54, .85) 55%, rgba(198, 160, 46, .18) 100%),
    /* The old live site served this; the local copy is byte-identical and the
       page no longer depends on a host we are replacing. */
    url('../images/exam-background.jpeg') center/cover no-repeat;
  padding-top: 110px;
  padding-bottom: 60px;
}

#rsp-hero .rsp-hero-eyebrow {
  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: .78rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

#rsp-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: #fff;
  line-height: 1.12;
  margin-bottom: 16px;
}

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

#rsp-hero .rsp-hero-sub {
  font-family: var(--font-sub);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, .7);
  max-width: 620px;
  margin-bottom: 28px;
  line-height: 1.6;
}




/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */
/* ── Secondary Sticky Subnav ── */
#rspSubNav {
  position: sticky;
  /* THE NAVBAR IS 78px TALL ONCE SCROLLED, at every width. This was 76px here
     and 52px below 861px, so the subnav parked 2px under the navbar on a
     desktop and 26px under it on a phone - where the labels were simply gone. */
  top: 78px;
  z-index: 900;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(46, 48, 54, .07);
}

.rsp-subnav-links {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rsp-subnav-links::-webkit-scrollbar {
  display: none;
}

.rsp-subnav-links a {
  font-family: var(--font-sub);
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-muted);
  padding: 14px 20px;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
}

.rsp-subnav-links a:hover {
  color: var(--color-primary);
}

.rsp-subnav-links a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}

#rsp-body {
  background: var(--color-light);
  padding: 64px 0 96px;
}

.rsp-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

/* ── CENTER: Scrollable content ── */
.rsp-content-col {
  min-width: 0;
}

.rsp-block {
  margin-bottom: 72px;
  scroll-margin-top: 112px;
}

.rsp-block-eyebrow {
  font-family: var(--font-sub);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
  display: block;
}

.rsp-block h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 14px;
}

.rsp-block>p.lead {
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 680px;
  margin-bottom: 28px;
  line-height: 1.8;
}

/* Info card grid (eligibility, format, fees) */
.rsp-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}

.rsp-info-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
}

.rsp-info-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.rsp-info-card .rsp-info-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(198, 160, 46, .12), rgba(224, 179, 85, .1));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.3rem;
  margin-bottom: 14px;
}

.rsp-info-card h3 {
  font-size: .98rem;
  margin-bottom: 8px;
}

.rsp-info-card p,
.rsp-info-card ul {
  font-size: .87rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

.rsp-info-card ul {
  padding-left: 18px;
}

.rsp-info-card ul li {
  margin-bottom: 4px;
}

/* Fee table */
.rsp-fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  margin-bottom: 12px;
  font-size: .9rem;
}

.rsp-fee-table th,
.rsp-fee-table td {
  padding: 14px 18px;
  text-align: left;
}

.rsp-fee-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rsp-fee-table tbody tr:nth-child(even) {
  background: var(--color-light);
}

.rsp-fee-table td strong {
  color: var(--color-primary);
  font-family: var(--font-sub);
}

.rsp-fee-note {
  font-size: .8rem;
  color: var(--color-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(198, 160, 46, .06);
  border: 1px solid rgba(198, 160, 46, .18);
  border-radius: 8px;
  padding: 12px 16px;
}

.rsp-fee-note i {
  color: var(--color-accent);
  margin-top: 2px;
}

/* Why PM Partner checklist */
.rsp-check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.rsp-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.rsp-check-item i {
  color: var(--color-accent);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.rsp-check-item strong {
  display: block;
  font-family: var(--font-sub);
  font-size: .9rem;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.rsp-check-item span {
  font-size: .82rem;
  color: var(--color-muted);
}

/* ── Why ReadySetPMP — feature highlights ── */
.rsp-feature-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  transition: var(--transition);
}

.rsp-feature-row:hover {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.rsp-feature-row .rsp-feature-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(198, 160, 46, .25);
  flex-shrink: 0;
  min-width: 44px;
}

.rsp-feature-row h3 {
  font-size: .98rem;
  margin-bottom: 6px;
}

.rsp-feature-row p {
  font-size: .87rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.7;
}

/* Comparison table — RSP vs others */
.rsp-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  font-size: .87rem;
  margin: 28px 0;
}

.rsp-compare-table th,
.rsp-compare-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.rsp-compare-table td:first-child,
.rsp-compare-table th:first-child {
  text-align: left;
  font-family: var(--font-sub);
  font-weight: 600;
  color: var(--color-primary);
}

.rsp-compare-table thead th {
  font-family: var(--font-sub);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  background: var(--color-light);
}

.rsp-compare-table thead th.rsp-highlight-col {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: #fff;
}

.rsp-compare-table td.rsp-highlight-col {
  background: rgba(198, 160, 46, .05);
  font-weight: 700;
  color: var(--color-accent);
}

.rsp-compare-table .bi-check-circle-fill {
  /* An icon needs 3:1 against its background. The mid-gold is 2.48:1 on white. */
  color: var(--color-gold-deep);
  font-size: 1.05rem;
}

.rsp-compare-table .bi-x-circle {
  /* A cool blue-grey left over from the navy palette. These crosses mean "not
     offered", not "wrong", so they take the muted token rather than the red. */
  color: var(--color-muted);
  font-size: 1.05rem;
}

.rsp-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Audience grid (Why RSP section) */
.rsp-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}

.rsp-audience-card {
  text-align: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 14px;
  transition: var(--transition);
}

.rsp-audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.rsp-audience-card i {
  font-size: 1.6rem;
  color: var(--color-accent);
  margin-bottom: 10px;
  display: block;
}

.rsp-audience-card span {
  font-family: var(--font-sub);
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Register block (anchor, points to sidebar on desktop) ── */
.rsp-register-pointer {
  background: linear-gradient(135deg, var(--color-primary) 0%, #31343A 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}







@keyframes rspArrowMove {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(6px)
  }
}

/* Mobile-only inline form mount point */
#rsp-mobile-form-mount {
  display: none;
}





/* ============================================
   RIGHT: STICKY PRICE + LOGO + FORM CARD
   (rsp-card styles adapted from hero, light-safe)
   ============================================ */
.rsp-sidebar-col {
  position: sticky;
  top: 176px;
  align-self: start;
}

.rsp-side-card {
  width: 100%;
  /* #0d2547 - the old navy - survived the W1 re-skin here because it is a
     literal rather than a token, so nothing that swapped the palette saw it. */
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-dark) 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.rsp-side-top {
  padding: 22px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rsp-side-logo {
  max-height: 34px;
  max-width: 220px;
  margin-bottom: 14px;
  filter: brightness(1) invert(0);
}


.rsp-side-heading {
  padding: 16px 24px 4px;
  text-align: center;
}

.rsp-side-heading h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 4px;
}

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

/* Reuse hero form field styles, scoped to sidebar */
.rsp-side-card #heroRegForm {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}















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

  40% {
    transform: scale(1.25)
  }

  100% {
    transform: scale(1)
  }
}


















.rsp-side-card .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: .92rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 8px 28px rgba(198, 160, 46, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

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

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


.rsp-side-card .rsp-secure-note {
  text-align: center;
  font-size: .7rem;
  color: rgba(255, 255, 255, .3);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-sub);
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
  .rsp-layout {
    grid-template-columns: 1fr;
  }

  /* THE SIDEBAR USED TO BE display:none HERE, and a resize handler moved the
     card into #rsp-mobile-form-mount instead - so the price and the Buy button
     existed on a phone only if the JavaScript ran. The column stacks now. */
  .rsp-sidebar-col {
    position: static;
    max-width: 460px;
    margin: 8px auto 0;
  }
}

@media (max-width: 860px) {

  .rsp-info-grid,
  .rsp-check-grid {
    grid-template-columns: 1fr;
  }

  .rsp-audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rsp-compare-table {
    font-size: .78rem;
  }


}

@media (max-width: 480px) {
  .rsp-audience-grid {
    grid-template-columns: 1fr;
  }

}
/* ============================================
   CONTRAST: GOLD AS TEXT (see the same block in style.css)
   ============================================
   REPEATED HERE BECAUSE THIS SHEET LOADS SECOND. readysetpmp.html links
   style.css and then this one, so the contrast rules there lose to anything
   declared here at equal specificity - which is how the eyebrow and the active
   nav link stayed at 2.33:1 after style.css had already been corrected.
   Same tokens, same reasoning: #C6A02E is a fill, not text on a pale surface.
   ============================================ */
.rsp-block-eyebrow,
.rsp-dial-code,
.rsp-subnav-links a.active,
.rsp-nav a.active {
  color: var(--color-gold-ink);
}

.rsp-hero-title span,
.rsp-section-title span {
  color: var(--color-gold-deep);
}

/* The dark hero keeps the bright gold it was designed with - on charcoal the
   ink would disappear, and gold on charcoal already passes. */
.rsp-hero .rsp-block-eyebrow,
.rsp-hero-eyebrow {
  color: var(--color-gold-bright);
}

/* ============================================================================
   PHASE W3 — THE PAGE AS A PRODUCT PAGE
   ============================================================================
   The sidebar carried a picture of a price and a registration form; the closing
   block pointed at that form with an arrow; the six product icons that shipped
   with the site were on no page at all. These are the components that replaced
   them. Everything reads through the tokens.
   ========================================================================= */

/* ---- The hero: product mark, then one action -------------------------- */
.rsp-hero-logo {
  display: block;
  width: 260px;
  max-width: 78%;
  height: auto;
  margin-bottom: 22px;
}

.rsp-hero-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
}

.rsp-hero-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rsp-hero-price-note {
  font-family: var(--font-sub);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* ---- PRICE AS TEXT ----------------------------------------------------
   `readysetpmp-price.png` was a 236x236 PNG of the number 19.99 with
   alt="$19.99". A price in an image cannot be edited without a designer, cannot
   be indexed, reads as a filename to anything that does not honour alt text,
   and cannot show two currencies at once - which W4 needs, since the product
   sells in USD and INR. The parts are separate elements so W4 can fill them
   from the app rather than re-cutting an image. */
.rsp-price-block {
  padding: 20px 24px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rsp-price-eyebrow {
  display: block;
  font-family: var(--font-sub);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.rsp-price-row {
  margin: 6px 0 4px;
  line-height: 1;
}

.rsp-price-amount {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -.02em;
}

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

.rsp-price-note {
  display: block;
  font-size: .75rem;
  color: rgba(255, 255, 255, .55);
}

/* ---- What the money buys, in the card --------------------------------- */
.rsp-side-includes {
  list-style: none;
  margin: 0;
  padding: 18px 24px 4px;
  display: grid;
  gap: 10px;
}

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

.rsp-side-action {
  padding: 16px 24px 24px;
}

/* ---- The six value cards, using the icons that shipped unused ---------- */
.rsp-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.rsp-value-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: var(--transition);
  /* Equal height per row, and the copy pinned to the top of each card so the
     headings line up across the row whatever the paragraph does. */
  display: flex;
  flex-direction: column;
}

.rsp-value-card:hover {
  border-color: var(--color-gold-muted);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.rsp-value-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 14px;
}

.rsp-value-card h3 {
  font-size: .98rem;
  margin-bottom: 8px;
}

.rsp-value-card p {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* ---- The closing CTA, in the content column ---------------------------
   Replaces the "Your form is ready on the right ->" panel and the empty mount
   beneath it. No direction words, so it reads the same on a phone. */
.rsp-closing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding: 30px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-dark) 100%);
  box-shadow: var(--shadow-md);
}

.rsp-closing-copy {
  min-width: 0;
}

.rsp-closing-note {
  margin: 4px 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
}

.rsp-closing-btn {
  flex: 0 0 auto;
}

/* ---- "Questions?" — one line of help, not a second form ---------------- */
.rsp-help-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 22px 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.rsp-help-icon {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold-deep);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsp-help-body {
  flex: 1 1 220px;
  min-width: 0;
}

.rsp-help-body h3 {
  font-size: .95rem;
  margin-bottom: 2px;
}

.rsp-help-body p {
  margin: 0;
  font-size: .9rem;
  word-break: break-word;
}

.rsp-help-body a {
  color: var(--color-gold-ink);
  font-weight: 600;
}

.rsp-help-link {
  flex: 0 0 auto;
  font-family: var(--font-sub);
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rsp-help-link:hover {
  color: var(--color-gold-deep);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1199px) {
  .rsp-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .rsp-value-grid {
    grid-template-columns: 1fr;
  }

  .rsp-closing-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
  }

  .rsp-closing-btn {
    width: 100%;
    justify-content: center;
  }

  .rsp-hero-action {
    gap: 16px;
  }

  .rsp-help-card {
    padding: 20px;
  }
}

/* ---- Corrections this sheet needed because it loads second -------------
   style.css is linked first, so anything declared here beats it at equal
   specificity. Three things kept the pre-W1 look for that reason. */

/* The card's Buy button was a bright-gold gradient - a third button shape the
   product does not use. The app's primary is a muted-gold fill with dark-gold
   ink and no border. */
.rsp-side-card .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-side-card .rsp-submit-btn:hover:not(:disabled) {
  background: var(--color-gold);
  color: var(--color-primary);
  box-shadow: 0 14px 36px rgba(198, 160, 46, .42);
}

/* WHITE ON GOLD IS 2.48:1 AND FAILS AA OUTRIGHT - the exact pairing W1 removed
   everywhere else. The ReadySetPMP column header of the comparison table kept
   it, so the one column the table exists to draw attention to was the hardest
   to read in it. Charcoal on gold is the app's pairing and measures 7.4:1. */
.rsp-compare-table thead th.rsp-highlight-col {
  color: var(--color-primary);
}

/* Same colour as body text in the highlighted cells, on a pale gold tint. */
.rsp-compare-table td.rsp-highlight-col {
  color: var(--color-gold-ink);
}

/* A support address is one long unbreakable token; at 390px it split
   mid-word. Smaller type on a phone keeps it on one line. */
@media (max-width: 480px) {
  .rsp-help-body p {
    font-size: .82rem;
  }
}