/* ==========================================================================
   policies2.html — page styles

   Loaded after critical.css and chrome.css, which together supply the site
   chrome. Both of those are a dark theme, so this file first re-lights the
   page, then overrides the chrome values where the live site differs from
   the Figma Version 2 design.
   ========================================================================== */

/* --- Chrome overrides ---------------------------------------------------- */

:root {
    color-scheme: light;
}

html,
body {
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
}

/* Anchor jumps must clear the fixed header. body padding alone does not:
   a jump to #agreement aligns the section to the top of the viewport,
   underneath the header. */
html {
    scroll-padding-top: 82px;
}

/* Figma black, 82px tall, pinned on scroll (kept from the old policies.html
   even though the Figma frame is static).
   Scoped to #nr_edu_header. NOTE: chrome.css also carries a bare
   header{width:100%;padding:16px;background:#171719;display:flex;
   align-items:baseline} — the page title block uses a <div>, not <header>,
   precisely so it does not inherit that dark bar and flex layout. */
#nr_edu_header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 82px;
    background: #000;
    align-items: center;
}

/* Match the main site (index.html), which caps the bar at 1440px and
   centres it — otherwise the logo sits hard against the window edge on
   wide screens. The fixed header needs the full-width black backdrop, so
   cap the inner rows rather than the bar itself. */
#nr_edu_header {
    padding-left: max(16px, calc((100% - 1440px) / 2 + 16px));
    padding-right: max(16px, calc((100% - 1440px) / 2 + 16px));
}

body {
    padding-top: 82px;
}

/* Figma 455:259: black, py-96 / px-12. chrome.css ships padding:16px.
   The black band stays full-bleed (index.html gets its dark footer from
   the page background, but this page is white), so instead of capping the
   element we pad it in so the content lines up on the same 1440px column
   the main site uses. */
footer {
    background: #000;
    padding: 96px max(12px, calc((100% - 1440px) / 2 + 12px));
}

/* chrome.css leaves .nr-btn at rgba(0,0,0,.87), so "Back to top ^" renders
   near-black on the black footer. Figma 455:318 is #E5F1FF, 14px. */
footer #nr-home-top {
    color: #e5f1ff;
}

/* Get Started: live edu is purple #5C5FC0, Figma is blue.
   The hover shade is not specified in Figma — chosen to match. */
#nr_edu_header .btn-flat-primary {
    background-color: #146ef4;
}

#nr_edu_header .btn-flat-primary:not(:disabled):hover {
    background-color: #0f57c2;
}

/* chrome.css reverts the active state to purple #6A6DCD. */
#nr_edu_header .btn-flat-primary:not(:disabled):active {
    background-color: #0f57c2;
}

/* Header wordmark: chrome.css sets #5C5FC0 (purple) with !important;
   Figma 455:82 is #F7FAFC. The mark itself already uses .icon-white. */
#nr_edu_header .nr-logo-wrapper {
    color: #f7fafc !important;
}

/* Nav link hover: chrome.css uses #95ABED (light purple). Use the light
   blue — #146EF4 is too dark to read against the black bar. */
#nr_edu_header .btn-link-white:not(:disabled):hover,
#nr_edu_header .btn-link-white:not(:disabled):focus-visible {
    color: #95c8f3;
}

#nr_edu_header .btn-link-white:not(:disabled):active {
    color: #95c8f3;
}

/* Footer link hover: chrome.css uses #40038E (dark purple), which is
   nearly invisible on the black footer. Use the light blue. */
footer .nr-footer-links li a:hover,
footer .nr-footer-links li a:focus-visible {
    color: #95c8f3;
}

/* Mobile (<=575px) footer accordion: the expanded group title also goes
   #40038E and disappears against black. */
footer .nr-footer-titles .nr-footer-title[aria-expanded="true"] {
    color: #95c8f3;
}

/* --- Page ---------------------------------------------------------------- */

.nr-policies2 {
    --p2-blue: #146ef4;
    --p2-high: rgba(0, 0, 0, 0.87);
    --p2-med: rgba(0, 0, 0, 0.6);
    --p2-outline: rgba(0, 0, 0, 0.12);
    --p2-callout-bg: #eff6ff;

    display: block;
    padding: 64px;
    background: #fff;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.nr-policies2-inner {
    max-width: 1309px;
    margin: 0 auto;
}

.nr-policies2-page-header {
    border-bottom: 1px solid var(--p2-outline);
    padding-bottom: 32px;
    margin-bottom: 48px;
}

.nr-policies2-page-header h1 {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 57.2px;
    letter-spacing: -1.56px;
    color: var(--p2-high);
}

.nr-policies2-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.nr-policies2-sections {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 981px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.nr-policies2-sections > section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--p2-outline);
}

.nr-policies2-sections > section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nr-policies2-sections h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
    color: var(--p2-high);
}

.nr-policies2-sections h3 {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--p2-high);
}

.nr-policies2-sections p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--p2-med);
}

.nr-policies2-sections .nr-policies2-plan {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.15px;
    color: var(--p2-med);
}

/* Tight 4px groups (Figma "Section Title" 455:494 and
   "Links Container" 455:510) inside the section's 16px rhythm. */
.nr-policies2-section-title,
.nr-policies2-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nr-policies2-section-title h3 {
    margin: 0;
}

/* Inline links */
.nr-policies2 a.nr-policies2-inline {
    color: var(--p2-blue);
    text-decoration: underline;
}

.nr-policies2 a.nr-policies2-inline:hover {
    text-decoration: underline;
}

/* Plain-text emphasis in the same blue as .nr-policies2-inline, but not a
   link — for text like an email address that's shown for reference only
   (design feedback 2026-08-08: no mailto:, plain text). */
.nr-policies2-inline-text {
    color: var(--p2-blue);
}

.nr-policies2 a.nr-policies2-extlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.nr-policies2 a.nr-policies2-extlink:hover {
    text-decoration: underline;
}

.nr-policies2 a.nr-policies2-extlink .nr-policies2-extlink-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    /* inline sprite, fill:currentColor — inherits the link color */
    color: var(--p2-blue);
    fill: currentColor;
}

/* Download pill buttons */
.nr-policies2-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.nr-policies2-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--p2-outline);
    border-radius: 999px;
    background: #fff;
    color: var(--p2-high);
    font-family: Roboto, Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Hover/Click (Figma 457:702): border, label AND icon all turn blue.
   The icon is an inline sprite with fill:currentColor, so it follows
   the label color automatically. */
.nr-policies2-pill:hover,
.nr-policies2-pill:focus-visible {
    border-color: var(--p2-blue);
    color: var(--p2-blue);
    text-decoration: none;
}

.nr-policies2-pill-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    fill: currentColor;
}

/* Refund eligibility callout */
.nr-policies2-callout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 24px;
    border-radius: 8px;
    border-left: 3px solid var(--p2-blue);
    background: var(--p2-callout-bg);
}

.nr-policies2-callout .item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.nr-policies2-callout .item + .item {
    border-top: 1px solid var(--p2-outline);
    padding-top: 12px;
}

.nr-policies2-callout .label {
    font-size: 18px;
    line-height: 24px;
    color: var(--p2-high);
}

.nr-policies2-callout .value {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--p2-med);
}

/* "On this page" nav — sticky on scroll (Figma annotation on 455:234) */
/* top = header height + 24px breathing room, so the stuck nav does not
   sit flush against the navbar (design feedback 2026-08-08). */
.nr-policies2-nav {
    flex: 0 0 232px;
    width: 232px;
    position: sticky;
    top: 106px;
    align-self: flex-start;
}

.nr-policies2-nav-label {
    padding: 0 0 12px 16px;
    font-family: Roboto, Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: var(--p2-med);
}

.nr-policies2-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nr-policies2-nav-list li {
    list-style: none;
}

.nr-policies2-nav-list a {
    display: block;
    padding: 6px 12px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    font-family: Roboto, Poppins, sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--p2-med);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Hover (Figma 457:736): text turns blue but the left bar stays white —
   i.e. no visible bar. Only Active (457:733) shows the blue bar. */
.nr-policies2-nav-list a:hover,
.nr-policies2-nav-list a:focus-visible {
    color: var(--p2-blue);
    text-decoration: none;
}

.nr-policies2-nav-list a.is-active {
    color: var(--p2-blue);
    border-left-color: var(--p2-blue);
    text-decoration: none;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1199px) {
    .nr-policies2 {
        padding: 48px 32px;
    }
}

@media (max-width: 991px) {
    .nr-policies2-page-header h1 {
        font-size: 44px;
        line-height: 52px;
        letter-spacing: -1px;
    }
}

/* The sidebar is a fixed 232px next to 981px of content, and eight long
   section titles squeeze badly on tablet-portrait — hide it here rather
   than at the old page's 575px. */
@media (max-width: 767px) {
    .nr-policies2 {
        padding: 24px 15px;
    }

    .nr-policies2-page-header {
        padding-bottom: 24px;
        margin-bottom: 32px;
    }

    .nr-policies2-page-header h1 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.5px;
    }

    .nr-policies2-body {
        display: block;
    }

    .nr-policies2-nav {
        display: none;
    }

    .nr-policies2-callout {
        padding: 24px 16px;
    }
}