/* ============================================================
   RTE Exam Prep landing page
   Everything here is scoped to .page-rte-landing and loads only on
   /respiratory-therapy-exam-prep. The header and footer live in their own
   stylesheets (header.css, footer.css) beside this one.
   ============================================================ */

/* ============================================================
   Design tokens — ALL rules scoped to .page-rte-landing
   so no other page is affected.
   ============================================================ */

/* ---------- Design tokens ---------- */
.page-rte-landing {
    /* ===== Colour — Background ===== */
    --bg-white: #ffffff;
    --bg-dark-teal: #044364;
    --bg-teal: #0f766e;
    --bg-light-gray: #f5f6fa;
    --bg-light-blue: #f4f7fb;
    --bg-footer-dark: #060f1f;

    /* ===== Colour — Buttons ===== */
    --btn-primary: #ea580c;
    --btn-secondary: #0f766e;
    --btn-outline: #ffffff;

    /* ===== Colour — Text ===== */
    --text-heading: #02283c;
    --text-nav: #0b1a30;
    --text-body-dark: #1f3754;
    --text-body: #3c5f87;
    --text-secondary: #5e80a8;
    --text-medium: #2c4a6e;
    --text-muted: #c3d2e3;

    /* ===== Colour — Accent ===== */
    --accent-orange: #ea580c;
    --accent-teal: #0f766e;
    --accent-mint: #5eead4;

    /* ===== Colour — text on dark backgrounds =====
       Figma variables navy/50, navy/100 and navy/200. Same hexes as the
       Background / Borders groups, aliased here so dark-section text reads
       as text rather than as a border token. */
    --text-on-dark: #f4f7fb;
    --text-on-dark-soft: #e6edf5;
    --text-on-dark-muted: #c3d2e3;

    /* ===== Colour — system accents =====
       Present in the designs (Figma accent/* and brand/*) but absent from
       the exported Colors JSON. Added here so components can reference them. */
    --accent-red: #dc2626;
    --accent-orange-light: #fb923c;
    --accent-green: #15803d;
    --brand-teal-deep: #083c39;
    --navy-800: #142540;

    /* ===== Colour — Borders & dividers ===== */
    --border-light: #e6edf5;
    --border-divider: #e9ecf4;
    --border-stroke: #d2d8e8;
    --border-med: #c3d2e3;
    --border-dark: #0b1a30;

    /* ===== Type — families ===== */
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;

    /* ===== Type — weights ===== */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ===== Type — headings ===== */
    --fs-h1: 64px;
    --lh-h1: 70px;
    --ls-h1: -0.06em;

    --fs-h2: 52px;
    --lh-h2: 1.05;
    --ls-h2: -0.06em;

    --fs-h3: 28px;
    --lh-h3: normal;
    --ls-h3: -0.04em;

    --fs-h4: 24px;
    --lh-h4: normal;
    --ls-h4: -0.04em;

    --fs-h5: 20px;
    --lh-h5: normal;
    --ls-h5: -0.02em;

    --fs-h6: 18px;
    --lh-h6: normal;
    --ls-h6: -0.02em;

    /* ===== Type — body ===== */
    --fs-p-large: 22px;
    --lh-p-large: 36px;
    --ls-p-large: -0.02em;

    --fs-p-medium: 20px;
    --lh-p-medium: 30px;
    --ls-p-medium: 0.02em;

    --fs-p-regular: 16px;
    --lh-p-regular: 24px;
    --ls-p-regular: -0.02em;

    --fs-p-body: 16px;
    --lh-p-body: normal;

    --fs-p-small: 14px;
    --lh-p-small: 18px;

    --fs-p-xsmall: 14px;
    --lh-p-xsmall: 18px;

    --fs-p-caption: 12px;
    --lh-p-caption: 19.5px;

    --fs-p-tiny: 12px;
    --lh-p-tiny: 19.5px;

    /* ===== Type — labels ===== */
    --fs-label-section: 14px;
    --ls-label-section: 0.1em;

    --fs-label-category: 16px;
    --lh-label-category: 24px;
    --ls-label-category: 1.98px;

    --fs-label-tag: 14px;
    --lh-label-tag: 16.5px;
    --ls-label-tag: 1.98px;

    --fs-label-badge: 11px;
    --lh-label-badge: 16.5px;
    --ls-label-badge: 0.55px;

    /* ===== Type — navigation ===== */
    --fs-nav-tab: 18px;
    --fs-nav-link: 18px;
    --ls-nav-link: -0.02em;

    --fs-list-item: 13px;
    --lh-list-item: 19.5px;

    --fs-option-letter: 12px;
    --lh-option-letter: 16.5px;

    --fs-option-letter-sm: 11px;
    --lh-option-letter-sm: 16.5px;

    /* ===== Type — buttons & CTA ===== */
    --fs-btn-lg: 20px;
    --ls-btn: -0.02em;
    --fs-btn-sm: 16px;
    --fs-btn-jakarta-sm: 14px;
    --lh-btn-jakarta-sm: 20px;

    /* ===== Type — pricing ===== */
    --fs-price: 14px;
    --lh-price: 20px;

    /* ------------------------------------------------------------
       LEGACY ALIASES — kept so sections not yet rebuilt keep working.
       Repointed at the new palette where an equivalent exists.
       Remove each one as its section is migrated.
       ------------------------------------------------------------ */
    --color-dark-navy: var(--bg-dark-teal);
    --color-light-gray: var(--bg-light-gray);
    --color-navy: var(--text-heading);
    --color-teal: var(--accent-teal);
    --color-slate: var(--text-body);
    --color-gray-blue: var(--text-medium);

    --primary-color: var(--btn-primary);
    --secondary-color: var(--bg-light-gray);
    --black-color: var(--text-heading);
    --black-light-color: var(--text-body);
    --terciary-navy: var(--text-nav);
    --cards-gray: var(--bg-light-gray);

    --bordercolor: var(--border-light);

    /* No equivalent in the RTE palette — retire with their sections */
    --color-blue: #2689F8;
    --bordercolorblue: #2689F8;
    --color-mint: #CCFBF1;
    --color-cream: #FEF3C7;
    --color-peach: #FFEDD5;
    --color-sky: #DBEAFE;
    --color-amber: #B45309;
    --color-orange-accent: #C2410C;
    --color-royal-blue: #1D4ED8;

    /* Legacy type scale — mapped onto the new scale */
    --heading1: var(--fs-h1);
    --heading2: var(--fs-h2);
    --heading3: var(--fs-h3);
    --heading4: var(--fs-h4);
    --heading5: var(--fs-h5);
    --heading6: var(--fs-h6);
    --bodyfont: var(--fs-p-body);
    --bodyfont16: var(--fs-p-regular);
    --bodyfont14: var(--fs-p-small);

    --lh-body-large: var(--lh-p-large);
    --lh-body-medium: var(--lh-p-medium);
    --lh-body: var(--lh-p-regular);
    --lh-body-small: var(--lh-p-small);
    --lh-subheadline: var(--lh-label-category);

    /* ===== Base ===== */
    font-family: var(--font-primary);
    font-size: var(--fs-p-body);
    line-height: var(--lh-p-regular);
    letter-spacing: 0;
    color: var(--text-heading);
}

/* Apply the primary font to form elements (they don't inherit font-family) */
.page-rte-landing button,
.page-rte-landing input,
.page-rte-landing select,
.page-rte-landing textarea {
    font-family: var(--font-primary);
}

/* ---------- Heading type scale ---------- */
.page-rte-landing h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    font-weight: var(--fw-bold);
}

.page-rte-landing h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    font-weight: var(--fw-bold);
}

.page-rte-landing h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    font-weight: var(--fw-semibold);
}

.page-rte-landing h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
}

.page-rte-landing h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    font-weight: var(--fw-semibold);
}

.page-rte-landing h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    font-weight: var(--fw-bold);
}

/* ---------- Body text ---------- */
.page-rte-landing p {
    font-size: var(--fs-p-body);
    line-height: var(--lh-p-regular);
    font-weight: var(--fw-regular);
    color: var(--text-body);
}

/* ============================================================
   Named text styles from the Figma Typography System.
   Use these directly on elements so each section matches the
   design without re-declaring sizes and spacing.
   ============================================================ */

/* ----- Body ----- */
.page-rte-landing .t-p-large {
    font-size: var(--fs-p-large);
    line-height: var(--lh-p-large);
    letter-spacing: var(--ls-p-large);
    font-weight: var(--fw-regular);
}

.page-rte-landing .t-p-medium {
    font-size: var(--fs-p-medium);
    line-height: var(--lh-p-medium);
    letter-spacing: var(--ls-p-medium);
    font-weight: var(--fw-medium);
}

.page-rte-landing .t-p-regular {
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
}

.page-rte-landing .t-p-body {
    font-size: var(--fs-p-body);
    line-height: var(--lh-p-body);
    font-weight: var(--fw-regular);
}

.page-rte-landing .t-p-small {
    font-size: var(--fs-p-small);
    line-height: var(--lh-p-small);
    font-weight: var(--fw-regular);
}

.page-rte-landing .t-p-xsmall {
    font-size: var(--fs-p-xsmall);
    line-height: var(--lh-p-xsmall);
    font-weight: var(--fw-semibold);
}

.page-rte-landing .t-p-caption {
    font-size: var(--fs-p-caption);
    line-height: var(--lh-p-caption);
    font-weight: var(--fw-medium);
}

.page-rte-landing .t-p-tiny {
    font-size: var(--fs-p-tiny);
    line-height: var(--lh-p-tiny);
    font-weight: var(--fw-regular);
}

/* ----- Labels ----- */
.page-rte-landing .t-label-section {
    font-size: var(--fs-label-section);
    letter-spacing: var(--ls-label-section);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.page-rte-landing .t-label-category {
    font-size: var(--fs-label-category);
    line-height: var(--lh-label-category);
    letter-spacing: var(--ls-label-category);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.page-rte-landing .t-label-tag {
    font-size: var(--fs-label-tag);
    line-height: var(--lh-label-tag);
    letter-spacing: var(--ls-label-tag);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.page-rte-landing .t-label-badge {
    font-size: var(--fs-label-badge);
    line-height: var(--lh-label-badge);
    letter-spacing: var(--ls-label-badge);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
}

/* ----- Subheadline ----- */
.page-rte-landing .t-subheadline {
    font-size: var(--fs-label-section);
    letter-spacing: var(--ls-label-section);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.page-rte-landing .t-subheadline-bold {
    font-size: var(--fs-label-tag);
    letter-spacing: var(--ls-label-tag);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

/* ----- Navigation ----- */
.page-rte-landing .t-nav-tab {
    font-size: var(--fs-nav-tab);
    font-weight: var(--fw-medium);
}

.page-rte-landing .t-nav-link {
    font-size: var(--fs-nav-link);
    letter-spacing: var(--ls-nav-link);
    font-weight: var(--fw-bold);
}

.page-rte-landing .t-list-item {
    font-size: var(--fs-list-item);
    line-height: var(--lh-list-item);
    font-weight: var(--fw-semibold);
}

.page-rte-landing .t-option-letter {
    font-size: var(--fs-option-letter);
    line-height: var(--lh-option-letter);
    font-weight: var(--fw-bold);
}

.page-rte-landing .t-option-letter-sm {
    font-size: var(--fs-option-letter-sm);
    line-height: var(--lh-option-letter-sm);
    font-weight: var(--fw-bold);
}

/* ----- Buttons & CTA ----- */
.page-rte-landing .t-btn-bold {
    font-size: var(--fs-btn-lg);
    letter-spacing: var(--ls-btn);
    font-weight: var(--fw-bold);
}

.page-rte-landing .t-btn-semibold {
    font-size: var(--fs-btn-lg);
    letter-spacing: var(--ls-btn);
    font-weight: var(--fw-semibold);
}

.page-rte-landing .t-btn-semibold-sm {
    font-size: var(--fs-btn-sm);
    letter-spacing: var(--ls-btn);
    font-weight: var(--fw-semibold);
}

.page-rte-landing .t-btn-jakarta {
    font-family: var(--font-display);
    font-size: var(--fs-btn-lg);
    letter-spacing: var(--ls-btn);
    font-weight: var(--fw-semibold);
}

.page-rte-landing .t-btn-jakarta-sm {
    font-family: var(--font-display);
    font-size: var(--fs-btn-jakarta-sm);
    line-height: var(--lh-btn-jakarta-sm);
    font-weight: var(--fw-bold);
}

/* Underlined text-link CTA (Typography System, "Buttons / CTA") */
.page-rte-landing .t-link-cta {
    font-size: var(--fs-p-small);
    letter-spacing: var(--ls-btn);
    font-weight: var(--fw-regular);
    text-decoration: underline;
}

/* ----- Pricing ----- */
.page-rte-landing .t-price {
    font-family: var(--font-display);
    font-size: var(--fs-price);
    line-height: var(--lh-price);
    font-weight: var(--fw-semibold);
}


/* ============================================================
   Hero — RTE Exam Prep
   Figma: desktop 38101:105 (content), 38101:3 (background),
          38101:21 (feature row) · mobile 38101:1511
   ============================================================ */

/* Page container.
   The Figma canvas is 1440 wide with the 1240 content column inset by 100px
   each side. Capping at 1440 and padding by 100 reproduces that exactly at
   1440+, and keeps a real gutter below it instead of collapsing to the edge. */
.page-rte-landing .rte-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    /* 100px at 1440 (the Figma gutter) easing to 40px at 1024. Holding 100
       all the way down would leave a 1024 laptop only 824px of content. */
    padding-inline: clamp(40px, calc(14.4231vw - 107.69px), 100px);
}

@media (max-width: 1023.98px) {
    .page-rte-landing .rte-container { padding-inline: 40px; }
}

@media (max-width: 767.98px) {
    .page-rte-landing .rte-container { padding-inline: 20px; }
}

/* Dark section fill, shared by the hero and Course Content.
   The light-ray texture was dropped on request; this is the underlying
   gradient, measured off the Figma export (node 38101:3) as the per-row
   median so the rays themselves do not skew it: flat #083c39 down to 48%,
   easing to #0a4f4a by 85%, flat below. Stated bottom-up to match the
   design's own `to top` direction. The texture is in git at c908756. */
.page-rte-landing .rte-hero,
.page-rte-landing .rte-lessons,
.page-rte-landing .rte-membership,
.page-rte-landing .rte-cta {
    background-color: var(--brand-teal-deep);
    background-image: linear-gradient(
        to top,
        #0a4f4a 0%,
        #0a4f4a 15%,
        var(--brand-teal-deep) 52%
    );
}

.page-rte-landing .rte-hero {
    position: relative;
    overflow: hidden;
    padding: 99px 0 42px;

}

.page-rte-landing .rte-hero__main {
    display: grid;
    grid-template-columns: minmax(0, 609fr) minmax(0, 567fr);
    gap: 64px;
    align-items: start;
}

.page-rte-landing .rte-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-top: 9px;
}

.page-rte-landing .rte-hero__aside {
    min-width: 0;
}

/* ---------- Eyebrow pill ---------- */
.page-rte-landing .rte-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.02);
    font-size: var(--fs-label-section);
    line-height: normal;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label-section);
    text-transform: uppercase;
    color: var(--text-on-dark);
}

.page-rte-landing .rte-hero__eyebrow-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--accent-orange);
}

/* ---------- Copy ---------- */
/* Two-column range (>=1200): the text column is (vw - 264) * 609/1176, so the
   type is tied to the COLUMN, not the viewport - otherwise the column narrows
   faster than the type and the headline gains lines. Solving 64px at 1440:
       font = 64 * (vw - 264) / 1176  ->  5.442vw - 14.37px
   Capped at 64px because the container stops growing at 1440.
   The stacked range gets its own curve in the media query below. */
.page-rte-landing .rte-hero__title {
    margin: 18px 0 0;
    font-size: clamp(47px, calc(3.8723vw + 8.238px), 64px);
    line-height: 1.094;
    letter-spacing: var(--ls-h1);
    font-weight: var(--fw-bold);
    color: var(--text-on-dark);
}

/* Same column-proportional basis: 22px at 1440 */
.page-rte-landing .rte-hero__subtitle {
    margin: 16px 0 0;
    font-size: clamp(17px, calc(1.3311vw + 2.832px), 22px);
    line-height: 1.6;
    letter-spacing: var(--ls-p-large);
    font-weight: var(--fw-regular);
    color: var(--text-on-dark-soft);
}

.page-rte-landing .rte-hero__price {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-price);
    line-height: var(--lh-price);
    font-weight: var(--fw-semibold);
    color: var(--text-on-dark);
}

.page-rte-landing .rte-hero__credit {
    margin: 24px 0 0;
    font-size: var(--fs-p-small);
    line-height: 22px;
    font-weight: var(--fw-regular);
    color: var(--text-on-dark-muted);
}

/* ---------- Buttons ---------- */
.page-rte-landing .rte-hero__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 32px;
}

/* The pair measures 491px at full size but the text column is only 489px by
   1120 and 453px at 1024, so they wrapped. Scaled across the desktop range
   instead, so the two stay on one line down to 1024. */
.page-rte-landing .rte-hero__actions .rte-btn {
    padding-inline: clamp(18px, calc(2.885vw - 11.54px), 30px);
    gap: clamp(8px, calc(1.442vw - 6.77px), 14px);
    font-size: clamp(17px, calc(0.7212vw + 9.615px), 20px);
}

.page-rte-landing .rte-hero__actions .rte-btn--primary {
    min-width: clamp(198px, calc(11.058vw + 38.76px), 244px);
}

.page-rte-landing .rte-hero__actions .rte-btn--ghost {
    min-width: clamp(192px, calc(10.817vw + 36.23px), 237px);
}

.page-rte-landing .rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 65px;
    padding: 0 30px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: var(--fs-btn-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.4px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-rte-landing .rte-btn--primary {
    min-width: 244px;
    background-color: var(--btn-primary);
    color: #ffffff;
}

.page-rte-landing .rte-btn--primary:hover,
.page-rte-landing .rte-btn--primary:focus-visible {
    background-color: #c2490a;
    color: #ffffff;
}

.page-rte-landing .rte-btn--ghost {
    min-width: 234px;
    border: 1px solid var(--border-med);
    color: var(--text-on-dark);
}

.page-rte-landing .rte-btn--ghost:hover,
.page-rte-landing .rte-btn--ghost:focus-visible {
    border-color: var(--text-on-dark);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-on-dark);
}

.page-rte-landing .rte-btn__chevron {
    flex-shrink: 0;
    width: 6px;
    height: 12px;
}

/* ---------- Practice-question card ---------- */
.page-rte-landing .rte-qcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 30px 150px -20px rgba(15, 118, 110, 0.15);
}

.page-rte-landing .rte-qcard__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 37px;
    padding: 0 16px;
    background-color: var(--bg-light-blue);
    border-bottom: 1px solid var(--border-light);
}

.page-rte-landing .rte-qcard__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-rte-landing .rte-qcard__dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
}

.page-rte-landing .rte-qcard__dot--red { background-color: var(--accent-red); }
.page-rte-landing .rte-qcard__dot--amber { background-color: var(--accent-orange-light); }
.page-rte-landing .rte-qcard__dot--green { background-color: var(--accent-green); }

.page-rte-landing .rte-qcard__bar-label {
    font-size: var(--fs-label-badge);
    line-height: var(--lh-label-badge);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label-badge);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.page-rte-landing .rte-qcard__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.page-rte-landing .rte-qcard__scenario {
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--bg-light-blue);
    font-size: var(--fs-p-small);
    line-height: 24px;
    font-weight: var(--fw-regular);
    color: var(--text-body-dark);
}

.page-rte-landing .rte-qcard__scenario strong {
    font-weight: var(--fw-bold);
    color: var(--brand-teal-deep);
}

.page-rte-landing .rte-qcard__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-rte-landing .rte-qcard__option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 36px 8px 40px;
    border: 1px solid var(--border-med);
    border-radius: 12px;
    background-color: #ffffff;
}

.page-rte-landing .rte-qcard__letter {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background-color: var(--border-light);
    font-size: var(--fs-option-letter);
    line-height: var(--lh-option-letter);
    font-weight: var(--fw-bold);
    color: var(--text-medium);
}

.page-rte-landing .rte-qcard__answer {
    font-size: var(--fs-p-small);
    line-height: 18px;
    font-weight: var(--fw-regular);
    color: var(--text-body-dark);
}

.page-rte-landing .rte-qcard__option--correct {
    border-color: var(--accent-green);
}

.page-rte-landing .rte-qcard__option--correct .rte-qcard__letter {
    background-color: var(--accent-green);
    font-size: var(--fs-option-letter-sm);
    color: #ffffff;
}

.page-rte-landing .rte-qcard__option--correct .rte-qcard__answer {
    line-height: 17.88px;
    font-weight: var(--fw-semibold);
}

.page-rte-landing .rte-qcard__check {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.page-rte-landing .rte-qcard__why {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--bg-light-blue);
}

.page-rte-landing .rte-qcard__why-label {
    margin: 0;
    font-size: var(--fs-label-tag);
    line-height: var(--lh-label-tag);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label-tag);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.page-rte-landing .rte-qcard__why-text {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: 24px;
    font-weight: var(--fw-regular);
    color: var(--text-body-dark);
}

.page-rte-landing .rte-hero__disclaimer {
    margin: 19px auto 0;
    max-width: 351px;
    text-align: center;
    font-size: var(--fs-p-caption);
    line-height: var(--lh-p-caption);
    font-weight: var(--fw-medium);
    color: var(--text-on-dark-soft);
}

/* ---------- Feature row ---------- */
.page-rte-landing .rte-hero__features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 65px;
    padding: 17px 20px 0;
    border-top: 1px solid #94aecb;
}

.page-rte-landing .rte-hero__feature {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.page-rte-landing .rte-hero__feature img {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.page-rte-landing .rte-hero__feature span {
    font-size: var(--fs-p-body);
    line-height: normal;
    font-weight: var(--fw-regular);
    color: var(--text-on-dark);
}

/* ---------- Stacked layout (Figma mobile 38101:1511, 440px) ----------
   Switches below 1024: at and above it, a laptop gets the desktop layout.
   The gutters and fluid type are tuned so 1024 is not cramped. */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-hero {
        padding: 60px 0;
    }

    .page-rte-landing .rte-hero__main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-rte-landing .rte-hero__content {
        align-items: center;
        padding-top: 0;
        text-align: center;
    }

    .page-rte-landing .rte-hero__eyebrow {
        padding: 10px 14px;
        font-size: var(--fs-p-caption);
        line-height: 16px;
        letter-spacing: 1.2px;
    }

    /* Stacked: copy is full-width, so 42px at 440 (the design) up to 56px */
    .page-rte-landing .rte-hero__title {
        margin-top: 24px;
        font-size: clamp(42px, calc(33.88px + 1.845vw), 56px);
    }

    .page-rte-landing .rte-hero__subtitle {
        margin-top: 14px;
        font-size: clamp(18px, calc(17.02px + 0.223vw), 20px);
        letter-spacing: 0;
    }

    .page-rte-landing .rte-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-top: 24px;
    }

    .page-rte-landing .rte-btn {
        width: 100%;
        /* Full-bleed is the phone design (320px of a 400px frame). Without a
           cap the same rule makes a 943px button at 1023. */
        max-width: 400px;
        min-width: 0;
        min-height: 56px;
        gap: 15px;
        font-family: var(--font-primary);
        font-size: var(--fs-btn-sm);
        line-height: 20px;
        letter-spacing: var(--ls-btn);
    }

    .page-rte-landing .rte-btn--ghost {
        border-color: #ffffff;
        color: #ffffff;
    }

    .page-rte-landing .rte-hero__price {
        margin-top: 16px;
    }

    .page-rte-landing .rte-hero__credit {
        margin-top: 24px;
    }

    .page-rte-landing .rte-qcard__bar {
        height: auto;
        gap: 14px;
        padding: 9px 16px;
    }

    .page-rte-landing .rte-qcard__dots { gap: 4px; }

    .page-rte-landing .rte-qcard__dot {
        width: 8px;
        height: 8px;
    }

    .page-rte-landing .rte-qcard__bar-label {
        font-size: 10px;
        line-height: 16px;
    }

    .page-rte-landing .rte-qcard__body { padding: 16px; }

    .page-rte-landing .rte-qcard__scenario {
        font-size: var(--fs-p-caption);
        line-height: 1.6;
    }

    .page-rte-landing .rte-qcard__answer,
    .page-rte-landing .rte-qcard__why-text {
        font-size: var(--fs-p-caption);
    }

    .page-rte-landing .rte-qcard__why-text { line-height: 1.6; }

    .page-rte-landing .rte-qcard__letter,
    .page-rte-landing .rte-qcard__option--correct .rte-qcard__letter {
        font-size: 10px;
    }

    .page-rte-landing .rte-qcard__why-label {
        font-size: var(--fs-p-caption);
        line-height: 16px;
    }

    .page-rte-landing .rte-hero__disclaimer {
        max-width: 260px;
        margin-top: 20px;
    }

    .page-rte-landing .rte-hero__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        margin-top: 40px;
        padding: 20px 0 0;
    }

    .page-rte-landing .rte-hero__feature { gap: 8px; }
}

/* ============================================================
   Section header — label / title / lead.
   Shared by every section below the hero, so it lives here rather
   than inside any one of them.
   Figma: desktop 38101:166 · mobile 38101:1652
   ============================================================ */

.page-rte-landing .rte-section-head {
    text-align: center;
}

.page-rte-landing .rte-section-head__label {
    margin: 0;
    font-size: var(--fs-label-section);
    line-height: normal;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label-section);
    text-transform: uppercase;
    color: var(--accent-orange);
}

/* 52px at 1440, tracking with the container rather than the viewport */
.page-rte-landing .rte-section-head__title {
    margin: 16px 0 0;
    font-size: clamp(39px, calc(2.9839vw + 9.032px), 52px);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
}

.page-rte-landing .rte-section-head__lead {
    max-width: 890px;
    margin: 20px auto 0;
    font-size: var(--fs-p-medium);
    line-height: var(--lh-p-medium);
    letter-spacing: var(--ls-p-medium);
    font-weight: var(--fw-medium);
    color: var(--text-medium);
}

/* ============================================================
   Right Course Check
   Figma: desktop 38101:166 + 38101:174 · mobile 38101:1651
   ============================================================ */

.page-rte-landing .rte-rcc {
    padding: 72px 0 120px;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-rcc__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 48px;
}

/* ---------- Exam transition panel ---------- */
.page-rte-landing .rte-transition {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px;
    border: 2px solid var(--border-light);
    border-radius: 20px;
    background-color: var(--bg-light-blue);
}

.page-rte-landing .rte-transition__col {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.page-rte-landing .rte-transition__col--arrow {
    gap: 10px;
}

.page-rte-landing .rte-transition__label {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-label-badge);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label-badge);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.page-rte-landing .rte-transition__pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.page-rte-landing .rte-transition__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--bg-white);
    font-size: var(--fs-list-item);
    line-height: var(--lh-list-item);
    font-weight: var(--fw-semibold);
    color: var(--text-body-dark);
}

.page-rte-landing .rte-transition__pill--teal {
    background-color: var(--accent-teal);
    color: var(--text-on-dark);
}

.page-rte-landing .rte-transition__note {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-label-badge);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.page-rte-landing .rte-transition__caption {
    margin: 0;
    font-size: var(--fs-p-caption);
    line-height: 15px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-orange);
}

/* ---------- Pathway cards ---------- */
.page-rte-landing .rte-pathways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

/* Both cards push their CTA to the foot, so the button and the link line up
   with each other rather than floating at different heights. */
.page-rte-landing .rte-pathway {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    border-radius: 20px;
}

.page-rte-landing .rte-pathway--new {
    border: 1px solid rgba(15, 118, 110, 0.3);
    background-color: rgba(15, 118, 110, 0.05);
}

.page-rte-landing .rte-pathway--transition {
    border: 1px solid var(--border-med);
    background-color: var(--bg-white);
}

.page-rte-landing .rte-pathway__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-rte-landing .rte-pathway__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9999px;
    font-size: var(--fs-label-badge);
    line-height: var(--lh-label-badge);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label-badge);
    text-transform: uppercase;
}

.page-rte-landing .rte-pathway__badge img {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.page-rte-landing .rte-pathway--new .rte-pathway__badge {
    background-color: rgba(15, 118, 110, 0.15);
    color: var(--brand-teal-deep);
}

.page-rte-landing .rte-pathway--transition .rte-pathway__badge {
    background-color: var(--border-light);
    color: var(--text-medium);
}

.page-rte-landing .rte-pathway__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-rte-landing .rte-pathway__title {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

.page-rte-landing .rte-pathway__body {
    margin: 0;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

.page-rte-landing .rte-pathway__cta {
    align-self: flex-start;
}

/* Same height as the button in the card opposite, so the two centre on each
   other rather than merely sharing a baseline. */
.page-rte-landing .rte-pathway__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 65px;
    gap: 15px;
    font-size: var(--fs-btn-lg);
    line-height: normal;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.4px;
    text-decoration: none;
    color: var(--text-body);
    transition: color 0.2s ease, gap 0.2s ease;
}

.page-rte-landing .rte-pathway__link img {
    flex-shrink: 0;
    width: 6px;
    height: 12px;
}

/* Gap shift only - the chevron is a fixed-colour asset, so recolouring the
   text on hover would leave the two out of step. */
.page-rte-landing .rte-pathway__link:hover,
.page-rte-landing .rte-pathway__link:focus-visible {
    gap: 19px;
}

/* ---------- Eligibility notice ---------- */
.page-rte-landing .rte-notice {
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(234, 88, 12, 0.5);
    border-radius: 16px;
    background-color: rgba(234, 88, 12, 0.1);
    text-align: center;
    font-size: var(--fs-p-small);
    line-height: 21.13px;
    font-weight: var(--fw-regular);
    color: var(--text-medium);
}

.page-rte-landing .rte-notice strong {
    font-weight: var(--fw-bold);
    color: var(--navy-800);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-rcc {
        padding: 60px 0;
    }

    .page-rte-landing .rte-section-head__label {
        font-size: var(--fs-p-caption);
        letter-spacing: 1.2px;
    }

    .page-rte-landing .rte-section-head__title {
        margin-top: 8px;
        font-size: clamp(34px, calc(28.2px + 1.3175vw), 44px);
    }

    .page-rte-landing .rte-section-head__lead {
        margin-top: 8px;
        font-size: var(--fs-p-body);
        line-height: 1.5;
    }

    .page-rte-landing .rte-rcc__body {
        gap: 16px;
        margin-top: 40px;
    }

    .page-rte-landing .rte-transition {
        flex-direction: column;
        gap: 30px;
        padding: 24px;
    }

    .page-rte-landing .rte-transition__col {
        width: 100%;
        gap: 12px;
    }

    .page-rte-landing .rte-transition__label {
        font-size: var(--fs-p-caption);
        line-height: 16px;
    }

    .page-rte-landing .rte-transition__pill--teal {
        padding-block: 12px;
    }

    .page-rte-landing .rte-pathways {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .page-rte-landing .rte-pathway {
        padding: 24px;
    }

    .page-rte-landing .rte-pathway--transition {
        gap: 40px;
        padding-bottom: 34px;
    }

    .page-rte-landing .rte-pathway__title {
        font-size: var(--fs-h4);
        letter-spacing: var(--ls-h4);
    }

    .page-rte-landing .rte-pathway__body {
        font-size: var(--fs-p-small);
        line-height: 1.5;
        letter-spacing: -0.02em;
    }

    .page-rte-landing .rte-pathway__cta {
        align-self: stretch;
    }

    .page-rte-landing .rte-pathway__link {
        font-size: var(--fs-btn-sm);
        line-height: 20px;
        letter-spacing: var(--ls-btn);
    }

    .page-rte-landing .rte-notice {
        padding: 24px 16px;
    }
}


/* ============================================================
   Clinical Judgment / new exam changes
   Figma: desktop 38101:233 · mobile 38101:1711 + :1715 + :1825
   ============================================================ */

/* Left-aligned variant of the shared section header */
.page-rte-landing .rte-section-head--start {
    text-align: left;
}

.page-rte-landing .rte-section-head--start .rte-section-head__lead {
    margin-inline: 0;
    max-width: none;
}

.page-rte-landing .rte-judgment {
    padding: 120px 0;
    background-color: var(--bg-light-gray);
}

.page-rte-landing .rte-judgment .rte-section-head__title {
    margin-top: 18px;
}

.page-rte-landing .rte-judgment .rte-section-head__lead {
    margin-top: 18px;
    color: var(--text-body);
}

/* Both columns run to the same bottom edge. Not in the Figma, which leaves a
   ragged edge, but the mismatch reads as a bug in the browser.
   Which column is naturally taller flips with viewport width - the question
   card is taller at 1440, the skills column taller near 1024 - so
   both sides have to absorb slack, not just one. */
.page-rte-landing .rte-judgment__body {
    display: grid;
    grid-template-columns: minmax(0, 655fr) minmax(0, 536fr);
    align-items: stretch;
    gap: 48px;
    margin-top: 48px;
}

/* ---------- Skill groups ---------- */
/* Shorter than the card: slack opens the gap between the two skill groups,
   which leaves every card at its designed size. */
.page-rte-landing .rte-judgment__skills {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.page-rte-landing .rte-skillgroup {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* The coloured rule is a pseudo-element, not a left border: a border cannot
   have rounded ends of its own, and rounding the heading box turns the rule
   into an arc. Stretching it top-to-bottom keeps it matched to the text. */
.page-rte-landing .rte-skillgroup__heading {
    position: relative;
    margin: 0;
    padding-left: 16px;
    font-size: var(--fs-label-category);
    line-height: var(--lh-label-category);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label-category);
    text-transform: uppercase;
}

.page-rte-landing .rte-skillgroup__heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 9999px;
    background-color: currentColor;
}

.page-rte-landing .rte-skillgroup__heading--teal {
    color: var(--accent-teal);
}

.page-rte-landing .rte-skillgroup__heading--orange {
    color: var(--accent-orange);
}

.page-rte-landing .rte-skillgroup__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.page-rte-landing .rte-skillgroup__cards--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Skill card ---------- */
.page-rte-landing .rte-skill {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border-stroke);
    border-radius: 20px;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-skill > img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.page-rte-landing .rte-skill__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-rte-landing .rte-skill__title {
    margin: 0;
    font-size: var(--fs-h5);
    line-height: normal;
    letter-spacing: -0.04em;
    font-weight: var(--fw-semibold);
    color: var(--text-nav);
}

.page-rte-landing .rte-skill__body {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-p-regular);
    letter-spacing: -0.02em;
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* ---------- Question-card column ---------- */
/* Shorter than the skills column: the card grows and the slack becomes
   padding under its content, rather than a gap beneath the card. */
.page-rte-landing .rte-judgment__demo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-rte-landing .rte-judgment__demo .rte-qcard {
    flex: 1;
}

.page-rte-landing .rte-judgment__demo-label {
    margin: 0 0 12px;
    text-align: center;
    font-size: var(--fs-p-caption);
    line-height: var(--lh-p-caption);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-judgment {
        padding: 60px 0;
    }

    .page-rte-landing .rte-judgment .rte-section-head__title,
    .page-rte-landing .rte-judgment .rte-section-head__lead {
        margin-top: 8px;
    }

    .page-rte-landing .rte-judgment__body {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 40px;
    }

    .page-rte-landing .rte-judgment__skills {
        gap: 32px;
    }

    .page-rte-landing .rte-skillgroup {
        gap: 20px;
    }

    .page-rte-landing .rte-skillgroup__heading {
        padding-left: 15px;
        font-size: var(--fs-p-small);
        line-height: 20px;
    }

    .page-rte-landing .rte-skillgroup__heading::before {
        width: 3px;
    }

    .page-rte-landing .rte-skillgroup__cards,
    .page-rte-landing .rte-skillgroup__cards--three {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Course Content — "Inside the 19 Lessons"
   Figma: desktop 38101:386 · mobile 38101:1862
   ============================================================ */

/* Header on a dark fill: the label and title go white, the lead goes light. */
.page-rte-landing .rte-section-head--on-dark .rte-section-head__label,
.page-rte-landing .rte-section-head--on-dark .rte-section-head__title {
    color: var(--bg-white);
}

.page-rte-landing .rte-section-head--on-dark .rte-section-head__lead {
    color: var(--text-on-dark);
}

/* Frosted panel, shared by the two lesson panels and the three feature cards */
.page-rte-landing .rte-glass {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.page-rte-landing .rte-lessons {
    padding: 120px 0;
}

.page-rte-landing .rte-lessons .rte-section-head__title,
.page-rte-landing .rte-lessons .rte-section-head__lead {
    margin-top: 18px;
}

/* The Figma header block for this section is 780px (node 38101:388), not the
   full 1240 content width - which is what makes the lead break into two even
   lines rather than one long line and a stub. */
.page-rte-landing .rte-lessons .rte-section-head {
    max-width: 780px;
}

.page-rte-landing .rte-lessons__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    margin-top: 43px;
}

/* Grid items default to min-width:auto, so the ellipsised task line - which is
   white-space:nowrap, and therefore has the full string as its min-content -
   would push the track wider than the viewport. */
.page-rte-landing .rte-lessons__panels > *,
.page-rte-landing .rte-lessons__every-cards > * {
    min-width: 0;
}

/* ---------- Lesson list ---------- */
.page-rte-landing .rte-lessonlist {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
}

.page-rte-landing .rte-lessonlist__head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #94aecb;
}

.page-rte-landing .rte-lessonlist__head img {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.page-rte-landing .rte-lessonlist__title {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: normal;
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--bg-white);
}

.page-rte-landing .rte-lessonlist__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-rte-landing .rte-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding-left: 8px;
    border-radius: 12px;
}

.page-rte-landing .rte-lesson__no {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--border-med);
    font-family: var(--font-display);
    font-size: var(--fs-p-small);
    line-height: var(--lh-price);
    font-weight: var(--fw-bold);
    color: var(--text-nav);
}

.page-rte-landing .rte-lesson__no--current {
    background-color: var(--bg-light-blue);
    color: var(--accent-teal);
}

.page-rte-landing .rte-lesson__text {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.page-rte-landing .rte-lesson__name,
.page-rte-landing .rte-lesson__task {
    font-size: var(--fs-p-small);
    line-height: var(--lh-list-item);
    color: var(--bg-white);
}

.page-rte-landing .rte-lesson__name {
    font-weight: var(--fw-semibold);
}

.page-rte-landing .rte-lesson__task {
    font-weight: var(--fw-regular);
}

.page-rte-landing .rte-lesson__chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ---------- Lesson detail ---------- */
.page-rte-landing .rte-lessondetail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 30px;
}

.page-rte-landing .rte-lessondetail__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-rte-landing .rte-lessondetail__eyebrow {
    margin: 0;
    font-size: var(--fs-h5);
    line-height: normal;
    letter-spacing: var(--ls-h5);
    font-weight: var(--fw-semibold);
    color: var(--bg-white);
}

.page-rte-landing .rte-lessondetail__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-rte-landing .rte-lessondetail__name,
.page-rte-landing .rte-lessondetail__desc {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-list-item);
    color: var(--bg-white);
}

.page-rte-landing .rte-lessondetail__name {
    font-weight: var(--fw-semibold);
}

.page-rte-landing .rte-lessondetail__desc {
    font-weight: var(--fw-regular);
}

/* Stands in for a video that a lesson has; nothing is ever played here, so it
   keeps the design's fixed box (280x109, nodes 38101:490 desktop and the same
   size on mobile) rather than filling the panel. `max-width` is the only
   addition - the card is narrower than 280px below ~370px. */
.page-rte-landing .rte-lessondetail__video {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 280px;
    max-width: 100%;
    height: 109px;
    border-radius: 16px;
    background-color: var(--bg-light-blue);
}

.page-rte-landing .rte-lessondetail__video img {
    width: 37px;
    height: 37px;
}

.page-rte-landing .rte-lessondetail__video span {
    font-size: var(--fs-p-small);
    line-height: var(--lh-p-regular);
    letter-spacing: -0.02em;
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

.page-rte-landing .rte-lessondetail__cta {
    align-self: flex-start;
}

/* ---------- In every lesson ---------- */
.page-rte-landing .rte-lessons__every {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 43px;
}

.page-rte-landing .rte-lessons__every-label {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-price);
    font-weight: var(--fw-bold);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-on-dark);
}

.page-rte-landing .rte-lessons__every-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.page-rte-landing .rte-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    padding: 30px;
}

.page-rte-landing .rte-feature > img {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.page-rte-landing .rte-feature__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-rte-landing .rte-feature__title {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: normal;
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--bg-white);
}

.page-rte-landing .rte-feature__body {
    margin: 0;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--bg-white);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-lessons {
        padding: 60px 0;
    }

    .page-rte-landing .rte-lessons .rte-section-head__title,
    .page-rte-landing .rte-lessons .rte-section-head__lead {
        margin-top: 8px;
    }

    .page-rte-landing .rte-lessons__panels {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .page-rte-landing .rte-lessonlist,
    .page-rte-landing .rte-lessondetail,
    .page-rte-landing .rte-feature {
        padding: 24px;
    }

    .page-rte-landing .rte-lessonlist__head img,
    .page-rte-landing .rte-feature > img {
        width: 28px;
        height: 28px;
    }

    .page-rte-landing .rte-lessonlist__title,
    .page-rte-landing .rte-feature__title {
        font-size: var(--fs-h5);
        letter-spacing: var(--ls-h5);
    }

    .page-rte-landing .rte-lessonlist__items {
        gap: 16px;
    }

    .page-rte-landing .rte-lesson {
        min-height: 0;
        padding-block: 6px;
    }

    /* The design clips the task line rather than wrapping it on mobile */
    .page-rte-landing .rte-lesson__task {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .page-rte-landing .rte-lessondetail__cta {
        align-self: stretch;
    }

    .page-rte-landing .rte-lessons__every {
        gap: 24px;
        margin-top: 40px;
    }

    .page-rte-landing .rte-lessons__every-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================================
   Readiness Exams
   Figma: desktop 38101:170 + 38101:573 · mobile 38101:2045
   ============================================================ */

.page-rte-landing .rte-readiness {
    padding: 110px 0 0;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-readiness .rte-section-head__title {
    max-width: 754px;
    margin-inline: auto;
}

.page-rte-landing .rte-readiness .rte-section-head__lead {
    max-width: 870px;
}

/* The card block is 1151px in the Figma, inset from the 1240 content width,
   while the rule below it runs the full 1240. */
.page-rte-landing .rte-readiness__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
    max-width: 1151px;
    margin: 48px auto 0;
}

.page-rte-landing .rte-readiness__card--a { grid-column: 1; grid-row: 1; }
.page-rte-landing .rte-readiness__card--b { grid-column: 2; grid-row: 1; }
.page-rte-landing .rte-readiness__card--c { grid-column: 1; grid-row: 2; }
.page-rte-landing .rte-readiness__note--disclaimer { grid-column: 1; grid-row: 3; }
.page-rte-landing .rte-readiness__preview { grid-column: 2; grid-row: 2; }
.page-rte-landing .rte-readiness__note--caption { grid-column: 2; grid-row: 3; }

/* Illustrative dashboard. Exported from Figma (node 38101:663) rather than
   rebuilt: it is a Manrope-set mock of the results screen, the same call we
   made for the Performance Analytics visual, and the design labels it
   "Illustrative interface". The export includes its own tinted frame. */
/* The tinted frame is the figure's own background rather than part of the
   image, so it fills the cell to the height of the card beside it. The
   export's corners are the same #f4f8fc, so the two blend. */
.page-rte-landing .rte-readiness__preview {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 20px;
    border-radius: 30px;
    background-color: #f4f8fc;
}

.page-rte-landing .rte-readiness__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.page-rte-landing .rte-readiness__note {
    margin: 0;
    min-width: 0;
    text-align: center;
    font-size: var(--fs-p-caption);
    line-height: var(--lh-p-caption);
}

.page-rte-landing .rte-readiness__note--disclaimer {
    font-weight: var(--fw-regular);
    color: var(--text-medium);
}

.page-rte-landing .rte-readiness__note--caption {
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* Rule between this section and Performance Analytics */
.page-rte-landing .rte-divider {
    height: 0;
    margin: 72px 0 0;
    border: 0;
    border-top: 1px solid #94aecb;
    opacity: 1;
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-readiness {
        padding-top: 60px;
    }

    .page-rte-landing .rte-readiness .rte-section-head__title,
    .page-rte-landing .rte-readiness .rte-section-head__lead {
        margin-top: 8px;
    }

    .page-rte-landing .rte-readiness__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    /* Source order takes over; the explicit desktop placement is dropped */
    .page-rte-landing .rte-readiness__card--a,
    .page-rte-landing .rte-readiness__card--b,
    .page-rte-landing .rte-readiness__card--c,
    .page-rte-landing .rte-readiness__note--disclaimer,
    .page-rte-landing .rte-readiness__preview,
    .page-rte-landing .rte-readiness__note--caption {
        grid-column: auto;
        grid-row: auto;
    }

    .page-rte-landing .rte-readiness__note--disclaimer {
        margin-top: 8px;
    }

    .page-rte-landing .rte-divider {
        margin-top: 40px;
    }
}


/* ============================================================
   Icon card — white card, 45px icon beside the copy, stacking above it
   when narrow. Shared by Readiness Exams (38101:576) and Performance
   Analytics (38101:1408); the two are identical in the Figma.
   ============================================================ */

.page-rte-landing .rte-icard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 32px;
    border: 1px solid var(--border-stroke);
    border-radius: 20px;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-icard > img {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
}

.page-rte-landing .rte-icard__text {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.page-rte-landing .rte-icard__title {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: normal;
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-nav);
}

.page-rte-landing .rte-icard__body {
    margin: 0;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* ============================================================
   Performance Analytics
   Figma: desktop 38101:1015 · mobile 38101:2182
   ============================================================ */

.page-rte-landing .rte-analytics {
    padding: 72px 0 102px;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-analytics .rte-section-head__title {
    margin-top: 20px;
}

/* Copy left, cards right, mock under the copy. Source order is the mobile
   order, so desktop places the three explicitly. */
.page-rte-landing .rte-analytics__body {
    display: grid;
    grid-template-columns: minmax(0, 595fr) minmax(0, 616fr);
    align-items: start;
    column-gap: 29px;
    margin-top: 39px;
}

.page-rte-landing .rte-analytics__lead {
    grid-column: 1;
    grid-row: 1;
    max-width: 550px;
    margin: 0;
    font-size: var(--fs-p-medium);
    line-height: var(--lh-p-medium);
    letter-spacing: var(--ls-p-medium);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

.page-rte-landing .rte-analytics__cards {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.page-rte-landing .rte-analytics__preview {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 85px 0 0;
}

.page-rte-landing .rte-analytics__preview img {
    display: block;
    width: 100%;
    height: auto;
}

/* Desktop has no caption on this mock; the mobile design adds one. Kept at
   every width - a disclaimer on a fabricated screenshot should not depend
   on viewport. */
.page-rte-landing .rte-analytics__caption {
    margin-top: 12px;
    text-align: center;
    font-size: var(--fs-p-caption);
    line-height: var(--lh-p-caption);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

.page-rte-landing .rte-analytics__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 39px;
}

.page-rte-landing .rte-analytics__cta-note {
    margin: 0;
    text-align: center;
    font-size: var(--fs-p-small);
    line-height: var(--lh-list-item);
    font-weight: var(--fw-semibold);
    color: var(--accent-orange);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-icard {
        flex-direction: column;
        gap: 18px;
        padding: 25px;
    }

    .page-rte-landing .rte-icard > img {
        width: 32px;
        height: 32px;
    }

    .page-rte-landing .rte-icard__title {
        font-size: var(--fs-h5);
        letter-spacing: var(--ls-h5);
    }

    .page-rte-landing .rte-analytics {
        padding: 60px 0;
    }

    .page-rte-landing .rte-analytics .rte-section-head__title {
        margin-top: 8px;
    }

    .page-rte-landing .rte-analytics__body {
        grid-template-columns: 1fr;
        margin-top: 8px;
    }

    /* Source order takes over */
    .page-rte-landing .rte-analytics__lead,
    .page-rte-landing .rte-analytics__cards,
    .page-rte-landing .rte-analytics__preview {
        grid-column: auto;
        grid-row: auto;
    }

    .page-rte-landing .rte-analytics__lead {
        max-width: none;
        text-align: center;
        font-size: var(--fs-p-body);
        line-height: 1.5;
    }

    .page-rte-landing .rte-analytics__cards {
        gap: 16px;
        margin-top: 40px;
    }

    /* 800x1472 asset drawn for a ~360px phone column. Uncapped it renders
       983px wide at 1023 - upscaled and far larger than the design. */
    .page-rte-landing .rte-analytics__preview {
        max-width: 420px;
        margin: 40px auto 0;
    }

    .page-rte-landing .rte-analytics__cta {
        margin-top: 40px;
    }
}


/* ============================================================
   Board — who builds the course
   Figma: desktop 38101:716 · mobile 38101:2332
   ============================================================ */

.page-rte-landing .rte-board {
    padding: 120px 0;
    background-color: var(--bg-light-gray);
}

.page-rte-landing .rte-board .rte-section-head__title,
.page-rte-landing .rte-board .rte-section-head__lead {
    margin-top: 18px;
}

.page-rte-landing .rte-board .rte-section-head__lead {
    max-width: none;
    color: var(--text-body);
}

/* ---------- Credential cards ---------- */
.page-rte-landing .rte-board__credentials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin-top: 48px;
}

.page-rte-landing .rte-cred {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border-stroke);
    border-radius: 20px;
    background-color: var(--bg-white);
}

.page-rte-landing .rte-cred > img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.page-rte-landing .rte-cred__text {
    margin: 0;
    font-size: var(--fs-p-small);
    line-height: var(--lh-p-regular);
    letter-spacing: -0.02em;
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* ---------- Instructor cards ---------- */
.page-rte-landing .rte-board__people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 28px;
    margin-top: 48px;
}

.page-rte-landing .rte-person {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
    padding: 32px 30px 36px;
    border-radius: 20px;
    background-color: var(--bg-white);
    box-shadow: 0 30px 75px rgba(0, 48, 102, 0.1);
}

.page-rte-landing .rte-person__head {
    display: flex;
    align-items: flex-start;
    gap: 27px;
}

/* The design scales the photo to the box width and anchors it top; that crop
   is baked into the export, so the file is already square. */
.page-rte-landing .rte-person__photo {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    object-fit: cover;
    object-position: top;
    box-shadow: 0 1px 2px rgba(8, 60, 57, 0.04), 0 6px 20px -6px rgba(8, 60, 57, 0.1);
}

.page-rte-landing .rte-person__ident {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
}

.page-rte-landing .rte-person__name {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: normal;
    letter-spacing: var(--ls-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-nav);
}

.page-rte-landing .rte-person__creds {
    margin: 4px 0 0;
    font-size: var(--fs-p-small);
    line-height: normal;
    font-weight: var(--fw-regular);
    color: var(--text-body);
}

.page-rte-landing .rte-person__role {
    margin: 8px 0 0;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

.page-rte-landing .rte-person__rule {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(2, 40, 60, 0.3);
    opacity: 1;
}

.page-rte-landing .rte-person__bio {
    margin: 0;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-board {
        padding: 60px 0;
    }

    .page-rte-landing .rte-board .rte-section-head__title,
    .page-rte-landing .rte-board .rte-section-head__lead {
        margin-top: 8px;
    }

    .page-rte-landing .rte-board__credentials {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .page-rte-landing .rte-cred {
        padding: 25px;
    }

    .page-rte-landing .rte-board__people {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .page-rte-landing .rte-person {
        gap: 20px;
        padding: 24px;
    }

    /* Photo moves above the name rather than beside it */
    .page-rte-landing .rte-person__head {
        flex-direction: column;
        gap: 20px;
    }

    .page-rte-landing .rte-person__photo {
        width: 64px;
        height: 64px;
    }

    .page-rte-landing .rte-person__name {
        font-size: var(--fs-h4);
        letter-spacing: var(--ls-h4);
    }
}


/* ============================================================
   Membership & Pricing
   Figma: desktop 38101:819 · mobile 38101:2427
   ============================================================ */

.page-rte-landing .rte-membership {
    padding: 120px 0;
}

.page-rte-landing .rte-membership .rte-section-head__title,
.page-rte-landing .rte-membership .rte-section-head__lead {
    margin-top: 18px;
}

.page-rte-landing .rte-membership .rte-section-head__lead {
    max-width: none;
}

/* ---------- Plan card ---------- */
/* 694px in a 1240px column; centred. */
.page-rte-landing .rte-plan {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 694px;
    margin: 43px auto 0;
    padding: 30px;
}

/* Teal band behind the name/price row. 125px in the design, which clears the
   row (30px padding + the 64px price) with room to spare. */
.page-rte-landing .rte-plan::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 125px;
    background-color: var(--accent-teal);
}

.page-rte-landing .rte-plan__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.page-rte-landing .rte-plan__name {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: normal;
    letter-spacing: var(--ls-h3);
    font-weight: var(--fw-semibold);
    color: var(--accent-mint);
}

/* "$49" and "/month" sit on a shared bottom edge, not a shared baseline. */
.page-rte-landing .rte-plan__price {
    display: flex;
    align-items: flex-end;
    margin: 0;
}

.page-rte-landing .rte-plan__amount {
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.06em;
    font-weight: var(--fw-bold);
    color: var(--bg-white);
}

.page-rte-landing .rte-plan__period {
    font-size: var(--fs-h4);
    line-height: normal;
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--accent-mint);
}

.page-rte-landing .rte-plan__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 57px;
}

/* ---------- Feature list ---------- */
.page-rte-landing .rte-plan__features {
    display: flex;
    align-items: flex-start;
}

.page-rte-landing .rte-plan__list {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-rte-landing .rte-plan__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    font-size: var(--fs-p-small);
    line-height: 19.5px;
    font-weight: var(--fw-regular);
    color: var(--bg-white);
}

.page-rte-landing .rte-plan__item img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.page-rte-landing .rte-plan__rule {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #94aecb;
    opacity: 1;
}

/* ---------- CTA ---------- */
.page-rte-landing .rte-plan__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.page-rte-landing .rte-plan__btn {
    gap: 28px;
    width: 100%;
    max-width: 344px;
}

.page-rte-landing .rte-plan__refund {
    font-size: var(--fs-p-small);
    line-height: normal;
    font-weight: var(--fw-regular);
    color: var(--text-on-dark-soft);
    text-decoration: underline;
}

.page-rte-landing .rte-plan__refund:hover,
.page-rte-landing .rte-plan__refund:focus-visible {
    color: var(--bg-white);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-membership {
        padding: 60px 0;
    }

    .page-rte-landing .rte-membership .rte-section-head__title,
    .page-rte-landing .rte-membership .rte-section-head__lead {
        margin-top: 8px;
    }

    /* The band becomes a real row, so the card itself drops its padding and
       the glass fill moves onto the body. */
    .page-rte-landing .rte-plan {
        max-width: none;
        margin-top: 40px;
        padding: 0;
        border-radius: 20px;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .page-rte-landing .rte-plan::before {
        display: none;
    }

    .page-rte-landing .rte-plan__head {
        padding: 20px;
        background-color: var(--accent-teal);
    }

    /* The design keeps the name and the price on one line in a 400px frame.
       Below that the pair no longer fits at 26/36/18, so the three scale
       together on the same ratio until they do; 26px from ~400 up. */
    .page-rte-landing .rte-plan__head {
        gap: 12px;
    }

    .page-rte-landing .rte-plan__name {
        font-size: clamp(19px, calc(8.414vw - 7.74px), 26px);
        letter-spacing: var(--ls-h3);
        white-space: nowrap;
    }

    .page-rte-landing .rte-plan__amount {
        font-size: clamp(26px, calc(11.65vw - 10.72px), 36px);
    }

    .page-rte-landing .rte-plan__period {
        font-size: clamp(13px, calc(5.825vw - 5.36px), 18px);
    }

    .page-rte-landing .rte-plan__body {
        gap: 24px;
        margin-top: 0;
        padding: 20px 20px 30px;
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .page-rte-landing .rte-plan__features {
        flex-direction: column;
        gap: 4px;
    }

    .page-rte-landing .rte-plan__list {
        width: 100%;
        gap: 4px;
    }

    .page-rte-landing .rte-plan__item {
        padding: 12px 16px;
    }

    .page-rte-landing .rte-plan__cta {
        gap: 16px;
    }

    .page-rte-landing .rte-plan__btn {
        max-width: none;
        gap: 15px;
        min-height: 56px;
        padding-inline: 30px;
        font-size: var(--fs-btn-sm);
    }

    .page-rte-landing .rte-plan__btn .rte-btn__chevron {
        width: 4px;
        height: 8px;
    }
}


/* ============================================================
   Pre-footer CTA
   Figma: desktop 38101:961 · mobile 38101:2568
   ============================================================ */

/* 627px tall in the design with the content block 368px, so the padding is
   the remaining 129.5px either side. */
.page-rte-landing .rte-cta {
    padding: 130px 0;
    text-align: center;
}

.page-rte-landing .rte-cta__title {
    max-width: 840px;
    margin: 0 auto;
    /* Flat 64px: the title column is capped at 840px and the container is
       944px even at 1024, so the column never narrows on desktop. */
    font-size: 64px;
    line-height: 70px;
    letter-spacing: var(--ls-h1);
    font-weight: var(--fw-bold);
    color: var(--bg-white);
}

.page-rte-landing .rte-cta__lead {
    max-width: 861px;
    margin: 24px auto 0;
    font-size: var(--fs-p-large);
    line-height: var(--lh-p-large);
    letter-spacing: var(--ls-p-large);
    font-weight: var(--fw-regular);
    color: var(--text-on-dark);
}

.page-rte-landing .rte-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}

.page-rte-landing .rte-cta__link {
    font-size: var(--fs-p-small);
    line-height: normal;
    font-weight: var(--fw-regular);
    color: var(--accent-mint);
    text-decoration: underline;
}

.page-rte-landing .rte-cta__link:hover,
.page-rte-landing .rte-cta__link:focus-visible {
    color: var(--bg-white);
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-cta {
        padding: 60px 0;
    }

    /* This section keeps 40px gutters on mobile where the rest of the page
       drops to 20px - the design insets the full-width button deliberately. */
    .page-rte-landing .rte-cta .rte-container {
        padding-inline: 40px;
    }

    .page-rte-landing .rte-cta__title {
        font-size: 42px;
        line-height: 1.056;
        letter-spacing: var(--ls-h2);
    }

    .page-rte-landing .rte-cta__lead {
        margin-top: 8px;
        font-size: 18px;
        line-height: 1.6;
        letter-spacing: normal;
    }

    .page-rte-landing .rte-cta__actions {
        margin-top: 40px;
    }

    .page-rte-landing .rte-cta__actions .rte-btn {
        width: 100%;
        min-height: 56px;
        padding-inline: 30px;
        gap: 15px;
        font-size: var(--fs-btn-sm);
    }

    .page-rte-landing .rte-cta__actions .rte-btn__chevron {
        width: 4px;
        height: 8px;
    }

    .page-rte-landing .rte-cta__link {
        line-height: 22px;
    }
}


/* ============================================================
   FAQ
   Figma: desktop 38101:903 · mobile 38101:2502

   Questions and answers are DB-driven (`home_faqs`, managed in the admin),
   so only the shell is built from the design.
   ============================================================ */

.page-rte-landing .rte-faq {
    padding: 130px 0;
    background-color: var(--bg-light-gray);
}

/* The design's column is 889px inside the 1440 frame, not the page's 1240. */
.page-rte-landing .rte-faq__inner {
    max-width: 889px;
    margin-inline: auto;
}

.page-rte-landing .rte-faq .rte-section-head__title {
    margin-top: 19px;
}

.page-rte-landing .rte-faq__list {
    display: flex;
    flex-direction: column;
    margin-top: 48px;
}

/* ---------- Rows ---------- */
/* Closed rows carry no vertical padding of their own; the 37px either side of
   the rule comes from the margin above it and the padding below. */
.page-rte-landing .rte-faq__item {
    padding-inline: 45px;
}

.page-rte-landing .rte-faq__item + .rte-faq__item {
    margin-top: 37px;
    padding-top: 37px;
    border-top: 1px solid rgba(2, 40, 60, 0.3);
}

/* The open row is a card, so no rule above it and none below it either */
.page-rte-landing .rte-faq__item.is-open,
.page-rte-landing .rte-faq__item.is-open + .rte-faq__item {
    border-top: 0;
}

.page-rte-landing .rte-faq__item.is-open {
    padding: 36px 45px;
    border-radius: 20px;
    background-color: var(--bg-white);
    box-shadow: 0 30px 150px -20px rgba(0, 48, 102, 0.1);
}

.page-rte-landing .rte-faq__item + .rte-faq__item.is-open {
    margin-top: 32px;
}

.page-rte-landing .rte-faq__item.is-open + .rte-faq__item {
    margin-top: 32px;
    padding-top: 0;
}

/* ---------- Question ---------- */
.page-rte-landing .rte-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-h4);
    line-height: normal;
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

/* 14px cross, collapsing to the design's single 2px rule when open */
.page-rte-landing .rte-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.page-rte-landing .rte-faq__icon::before,
.page-rte-landing .rte-faq__icon::after {
    content: '';
    position: absolute;
    background-color: var(--text-heading);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.page-rte-landing .rte-faq__icon::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

.page-rte-landing .rte-faq__icon::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

.page-rte-landing .rte-faq__item.is-open .rte-faq__icon::after {
    opacity: 0;
    transform: scaleY(0);
}

/* ---------- Answer ---------- */
/* The design sets this in #596681, which is not in the Colors JSON; using the
   body token as the Performance Analytics lead already does. */
.page-rte-landing .rte-faq__a {
    margin-top: 14px;
    font-size: var(--fs-p-regular);
    line-height: var(--lh-p-regular);
    letter-spacing: var(--ls-p-regular);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}

/* The answer is admin-authored CKEditor HTML, so it arrives wrapped in <p>.
   Those tags have to take this block's type rather than .page-rte-landing p's. */
.page-rte-landing .rte-faq__a > * {
    margin: 0 0 12px;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.page-rte-landing .rte-faq__a > :last-child { margin-bottom: 0; }

/* ---------- Stacked layout ---------- */
@media (max-width: 1023.98px) {
    .page-rte-landing .rte-faq {
        padding: 60px 0;
    }

    .page-rte-landing .rte-faq .rte-section-head__title {
        margin-top: 8px;
    }

    .page-rte-landing .rte-faq__list {
        margin-top: 40px;
    }

    .page-rte-landing .rte-faq__item {
        padding-inline: 24px;
    }

    .page-rte-landing .rte-faq__item + .rte-faq__item {
        margin-top: 24px;
        padding-top: 24px;
    }

    .page-rte-landing .rte-faq__item.is-open {
        padding: 24px;
        border-radius: 16px;
        box-shadow: 0 30px 75px rgba(0, 48, 102, 0.1);
    }

    .page-rte-landing .rte-faq__item + .rte-faq__item.is-open,
    .page-rte-landing .rte-faq__item.is-open + .rte-faq__item {
        margin-top: 24px;
    }

    .page-rte-landing .rte-faq__q {
        gap: 16px;
        font-size: var(--fs-h5);
        /* -0.8px on 20px; --ls-h5 is -0.02em, which this design is not */
        letter-spacing: -0.04em;
    }

    .page-rte-landing .rte-faq__a {
        font-size: var(--fs-p-small);
        line-height: 22px;
    }
}


/* The legacy homepage components (old hero, course cards, Which Course Is
   Right for Me, NBRC transition, The Respiratory Cram Difference, the old
   FAQ and pre-footer, and the shared .section-*/.card-* utilities they used)
   were removed with their markup on 24/09. The header and footer now live in
   header.css and footer.css. */