/* /rpl */
.rpl-hero { padding: calc(var(--nav-h) + 56px) 0 88px; }
.rpl-hero .hero-bg img { object-position: center 40%; }
.rpl-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.rpl-hero__label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.rpl-hero__label .eyebrow { margin: 0; }
.rpl-hero h1 { margin-bottom: 22px; }
.rpl-hero .lead { margin-bottom: 28px; }
.rpl-hero .btn-row { margin-bottom: 24px; }

/* "Just the certificate." types itself out. The whole phrase stays in the line, invisible, and is the
   line's box, so its width and height never change; main.js draws the typing on a layer over it
   (typed text, an empty marker, then the rest of the phrase, laid out but invisible, so it wraps the
   same way). The caret is moved to the marker with a transform, so it never counts as layout shift. */
.typewriter__text { position: relative; display: inline-block; }
.typewriter.is-ready .typewriter__text { visibility: hidden; }
.typewriter__show { position: absolute; inset: 0; visibility: visible; }
.typewriter__rest { visibility: hidden; }
.typewriter__caret { position: absolute; left: 0; top: 0; width: 0; pointer-events: none; }
.typewriter__caret::after { content: ''; position: absolute; left: .04em; top: .2em; bottom: .14em; width: max(2px, .03em); border-radius: 1px; background: currentColor; animation: caret-blink 1.05s step-end infinite; }
.typewriter.is-typing .typewriter__caret::after { animation: none; } /* solid while it moves, blinking while the line is still */
.typewriter.is-static .typewriter__caret { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typewriter__caret { display: none; } }

/* Course ticker: every course, in a window two cards tall. The window reaches one card gap (14px)
   past the two cards above and below, and is pulled back by the same amount, so the cards sit where
   the two fixed ones did and, at rest, nothing of the next card shows. The soft edges are a mask
   (--ticker-fade from each edge), so the cards keep their glass blur; it fades a card sliding out at
   the top or in at the bottom. 8px each side leaves room for the focus ring, and while a keyboard user
   is in the list the fade is off, so the ring is never faded. */
.rpl-ticker {
  --ticker-gap: 14px;
  --ticker-fade: 28px;
  margin: calc(-1 * var(--ticker-gap)) -8px; padding: var(--ticker-gap) 8px;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent);
}
.rpl-ticker:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
.rpl-ticker__track { display: grid; grid-auto-rows: 1fr; gap: var(--ticker-gap); margin: 0; padding: 0; list-style: none; } /* every card as tall as the tallest */
.rpl-ticker__track > li { display: grid; }
/* Until main.js takes over: the first two cards, at the height the window will have. */
.rpl-ticker:not(.is-ready) .rpl-ticker__track > li:nth-child(n + 3) { display: none; }
/* main.js sets --ticker-row (a card, rounded to whole pixels) and --ticker-view (two cards and the gap). */
.rpl-ticker.is-ready { height: calc(var(--ticker-view) + 2 * var(--ticker-gap)); overflow: hidden; overflow: clip; }
.rpl-ticker.is-ready .rpl-ticker__track { grid-auto-rows: var(--ticker-row, 1fr); transform: translate3d(0, 0, 0); will-change: transform; }
.rpl-ticker__track.is-sliding { transition: transform 500ms cubic-bezier(.65, 0, .35, 1); }
/* Without JavaScript: every course, in a short list that scrolls. */
@media (scripting: none) {
  .rpl-ticker { max-height: 360px; overflow-y: auto; }
  .rpl-ticker:not(.is-ready) .rpl-ticker__track > li:nth-child(n + 3) { display: grid; }
}
.rpl-price { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-card); background: rgba(20, 33, 61, .62); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.rpl-price:hover { border-color: rgba(226, 194, 122, .6); transform: translateY(-1px); }
.rpl-price .logo-mark { border-radius: 12px; }
.rpl-price__body { display: flex; flex-direction: column; }
.rpl-price__code { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.rpl-price__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.rpl-price__sub { font-size: 13px; color: var(--on-dark-muted); }
.rpl-price__amt { text-align: right; }
.rpl-price__amt strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; }
.rpl-price__amt em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold-light); }

.who { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.who h2 { margin-bottom: 18px; }
.who .lead { margin-bottom: 32px; }
.who__arch { aspect-ratio: 0.78 / 1; max-width: 400px; border-radius: 220px 220px 24px 24px; box-shadow: var(--shadow-lg); }
.who__arch .photo__caption { font-size: 22px; }
.evidence-chip { position: absolute; top: 34%; right: -1px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 9px; background: #fff; border-radius: var(--pill); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; }
.check-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink); flex: none; }
.qualify { display: grid; gap: 14px; margin-bottom: 24px; }
.qualify li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 600; line-height: 1.45; }
.qualify .check-dot { width: 30px; height: 30px; }
/* Drop-in: main.js adds .is-waiting only when motion is allowed, then .is-in once the list is on
   screen (once only). Each card fades in and slides down 12px, 80ms after the one before. Without JS,
   or with reduced motion, the cards are simply there. */
.qualify.is-waiting li { opacity: 0; transform: translateY(-12px); }
.qualify.is-in li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.qualify.is-in li:nth-child(2) { transition-delay: 80ms; }
.qualify.is-in li:nth-child(3) { transition-delay: 160ms; }
.qualify.is-in li:nth-child(4) { transition-delay: 240ms; }
.qualify.is-in li:nth-child(5) { transition-delay: 320ms; }
.qualify.is-in li:nth-child(6) { transition-delay: 400ms; }
.outcome-card { min-height: 220px; border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.outcome-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 33, 61, .95) 0%, rgba(20, 33, 61, .7) 55%, rgba(20, 33, 61, .2) 100%); }
.outcome-card > img { object-position: 70% 35%; }
.outcome-card__body { position: relative; z-index: 1; padding: 32px 28px; max-width: 340px; }
.outcome-card__body .eyebrow { margin-bottom: 8px; }
.outcome-card__title { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.outcome-card__note { margin: 0; font-size: 12.5px; color: var(--on-dark-muted); }

.process-title { margin-bottom: 32px; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.process__step { padding: 26px 24px; }
.process__num { display: block; font-family: var(--serif); font-size: 34px; color: var(--gold); line-height: 1; margin-bottom: 18px; }
.process h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; }
.process p { margin: 0; font-size: 14px; color: var(--muted); }

.eligibility { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; scroll-margin-top: 24px; }
.eligibility__mark { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 26px; }
.eligibility h2 { margin-bottom: 16px; }
.eligibility .lead { margin-bottom: 22px; }
.eligibility .ticks { color: var(--ink); font-weight: 600; }
.eligibility__card { padding: 30px; background: var(--bg); box-shadow: var(--shadow-lg); }

.answers { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
/* The /rpl FAQ in groups: each group starts with an eyebrow-style subheading (the same look as the "FAQ" label). */
.faq--grouped .faq__group { margin: 0; }
.faq--grouped .faq__group:not(:first-child) { margin-top: 22px; }

@media (max-width: 960px) {
  .rpl-hero__grid, .who, .eligibility, .answers { grid-template-columns: 1fr; gap: 40px; }
  .process { grid-template-columns: 1fr 1fr; }
  .who__arch { max-width: none; }
}
@media (max-width: 640px) {
  .rpl-hero { padding-bottom: 60px; }
  .rpl-price { grid-template-columns: auto 1fr; padding: 16px; }
  .rpl-price__amt { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .rpl-price__amt strong { font-size: 28px; }
  .process { grid-template-columns: 1fr; }
  .eligibility__card { padding: 22px 18px; }
  .who__arch { border-radius: 160px 160px 22px 22px; }
  .evidence-chip { right: 10px; }
}