/* ============================================================
   Road2Job homepage redesign - loaded only on the homepage via
   PageController::home()'s extraStyles, never on other pages.
   All classes prefixed r2j- so nothing clashes with marketing.css.
   ============================================================ */

/* marketing.php's layout always wraps the flash-message partial in
   <div class="container pt-4">, even when there's no flash message to
   show - normally invisible (same light body colour as everything
   around it), but now that the homepage nav floats transparent+fixed
   directly over the hero, that 24px of reserved padding became a visible
   pale sliver above the hero before anything else loaded. Zeroed here,
   scoped to the homepage only. */
#main-content > .container.pt-4 {
    /* Bootstrap's spacing utilities (.pt-4) are themselves !important by
       design, so this needs to match or it silently loses. */
    padding-top: 0 !important;
}

/* ---------- Fonts ---------- */

.r2j-font-display {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.03em;
}

.r2j-font-body {
    font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.r2j-font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ---------- Design tokens ----------
   Prefixed to match this project's existing --r2j-* custom-property
   convention (marketing.css) rather than the bare names in the brief,
   so nothing collides with the site-wide token set. Values are exact. */

:root {
    --r2j2-ink: #0E1633;
    --r2j2-cream: #FBF4EA;
    --r2j2-paper: #FFFFFF;
    --r2j2-signal: #F2860D;
    --r2j2-amber: #FFC46B;
    --r2j2-slate: #5A6472;
    --r2j2-mist: #A8B0C4;
    --r2j2-mint: #1E9E58;
    --r2j2-line: #EFE3D2;
    /* Heading text colour on light/cream/paper surfaces - deliberately
       separate from --r2j2-ink, which also serves as the committed-dark
       BACKGROUND for the hero/final-CTA/role-card-hover. Those must stay
       dark in both themes; heading text sitting on a surface that DOES
       flip dark needs to flip with it, or it goes dark-on-dark. */
    --r2j2-heading: var(--r2j2-ink);
    /* --r2j2-signal itself is 2.35:1 on --cream/--paper - fails WCAG AA
       (needs 4.5:1) as small mono text. These are accessible variants for
       TEXT specifically (eyebrows, milestone numbers, trust labels) -
       --r2j2-signal itself is untouched and stays exactly the spec'd hex
       for buttons/icons/the road gradient. #a85709 matches this project's
       existing accessible-orange-text token used elsewhere in the app. */
    --r2j2-accent-text: #a85709;
    /* Same problem, same fix, for the mint "LIVE" pill text. */
    --r2j2-mint-text: #147A44;
}

/* Dark mode: raised dark surfaces, not a naive invert - --cream sections
   become an ink-soft-level background, cards (--paper) sit one step
   lighter again above that so they still read as "raised", body text
   lightens for contrast, hairlines become a faint white rule. Scoped to
   this stylesheet only (homepage-only load), so it can't affect any
   other page's tokens. */
[data-bs-theme="dark"] {
    --r2j2-cream: #1A2547;
    --r2j2-paper: #212C52;
    --r2j2-slate: #B7BED0;
    --r2j2-heading: #F3F5FB;
    --r2j2-line: rgba(255, 255, 255, .08);
    /* Dark-mode accessible text variants - the light-mode dark-orange/
       dark-mint text values above would fail contrast against these now-
       dark surfaces, so both flip to lighter values that pass against them. */
    --r2j2-accent-text: var(--r2j2-amber);
    --r2j2-mint-text: #4ADE94;
}

/* ---------- Buttons ---------- */

.r2j-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), background-color .28s cubic-bezier(.2, .7, .3, 1), border-color .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-btn--solid {
    background: var(--r2j2-signal);
    /* White-on-signal is 2.56:1, fails WCAG AA even at large-text
       thresholds - dark ink text against the same orange is 6.93:1. */
    color: var(--r2j2-ink, #0E1633);
}

.r2j-btn--solid:hover {
    background: color-mix(in srgb, var(--r2j2-signal) 88%, black);
    transform: translateY(-2px);
}

.r2j-btn--ghost {
    /* Used on the hero, which now flips light/dark, so this needs to
       track --r2j2-heading (dark-ink text/border on the light hero,
       white on the dark hero) instead of a hardcoded white. */
    background: transparent;
    border-color: color-mix(in srgb, var(--r2j2-heading) 30%, transparent);
    color: var(--r2j2-heading);
}

.r2j-btn--ghost:hover {
    border-color: var(--r2j2-heading);
    background: color-mix(in srgb, var(--r2j2-heading) 6%, transparent);
    transform: translateY(-2px);
}

.r2j-btn:focus-visible {
    outline: 2px solid var(--r2j2-amber);
    outline-offset: 2px;
}

/* ---------- Hero (surface: --ink, committed dark regardless of theme
   toggle - same reasoning marketing.css already documents for the
   existing .hero-section: a deliberate dark band, not a light/dark
   swap target) ---------- */

.r2j-hero {
    position: relative;
    overflow: hidden;
    /* Genuinely theme-aware: --r2j2-cream flips light-cream/dark-navy the
       same way every other section on this page already does. */
    background-color: var(--r2j2-cream);
    padding-block: 140px 120px;
}

@media (max-width: 767px) {
    .r2j-hero {
        padding-block: 96px 80px;
    }
}

.r2j-hero__glow {
    position: absolute;
    inset: 0;
    /* Two restrained radial glows for depth, not a gradient background -
       a big warm one upper-right (behind where the proof-card stack
       sits) and a much fainter one lower-left. */
    background:
        radial-gradient(55% 55% at 70% 30%, rgba(242, 134, 13, .14), transparent 55%),
        radial-gradient(40% 40% at 15% 85%, rgba(242, 134, 13, .06), transparent 60%);
    pointer-events: none;
}

.r2j-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1025px) {
    .r2j-hero__inner {
        grid-template-columns: 52% 48%;
        column-gap: 2rem;
    }
}

.r2j-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    /* --r2j2-signal itself fails WCAG AA as small text (see the :root
       comment on --r2j2-accent-text) - use the accessible variant, which
       also correctly flips per theme. */
    color: var(--r2j2-accent-text);
    margin: 0 0 1.5rem;
}

/* ---------- Persona switcher ---------- */

.r2j-persona-switch {
    display: flex;
    flex-wrap: wrap;
    /* display:flex is block-outside by default, so without this it
       stretches to the full grid-column width (the ~1400px stretch bug) -
       fit-content makes it hug the four tabs, wrapping only if genuinely
       out of room. */
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
    /* Light mode: subtle dark-ink tint on the light hero. Dark mode
       (override below): back to the original translucent-white track. */
    background: rgba(14, 22, 51, .05);
    border: 1px solid rgba(14, 22, 51, .12);
    border-radius: 999px;
    margin-bottom: 2.5rem;
}

[data-bs-theme="dark"] .r2j-persona-switch {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}

.r2j-persona-switch__pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: none;
    background: transparent;
    color: var(--r2j2-slate);
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    padding: .6rem 1.1rem;
    min-height: 44px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .28s cubic-bezier(.2, .7, .3, 1), color .28s cubic-bezier(.2, .7, .3, 1);
    white-space: nowrap;
}

.r2j-persona-switch__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.r2j-persona-switch__pill:hover {
    color: var(--r2j2-heading);
}

.r2j-persona-switch__pill.is-active {
    /* Light mode: dark pill pops against the now-light hero. Dark mode
       (override below): flips back to the original white-pill/dark-text
       treatment, which pops against the dark hero instead. */
    background: var(--r2j2-ink);
    color: #fff;
}

[data-bs-theme="dark"] .r2j-persona-switch__pill.is-active {
    background: #fff;
    color: var(--r2j2-ink);
}

.r2j-persona-switch__pill:focus-visible {
    outline: 2px solid var(--r2j2-amber);
    outline-offset: 2px;
}

/* ---------- Hero content + crossfade ---------- */

.r2j-hero__content {
    max-width: 720px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .175s cubic-bezier(.2, .7, .3, 1), transform .175s cubic-bezier(.2, .7, .3, 1);
}

.r2j-hero__content.r2j-is-fading {
    opacity: 0;
    transform: translateY(8px);
}

.r2j-hero__title {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.08;
    color: var(--r2j2-heading);
    margin: 0 0 1.25rem;
}

.r2j-hero__sub {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    /* --r2j2-slate, not --r2j2-mist: mist is fixed (never redefined in
       dark mode) and reads too light on the new light-mode cream
       background - slate is the token this file already uses everywhere
       else for body copy that needs to flip with the surface. */
    color: var(--r2j2-slate);
    max-width: 520px;
    margin: 0 0 2rem;
}

.r2j-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.r2j-hero__main {
    min-width: 0;
}

/* ---------- Hero visual: road-tail + proof-card stack. Desktop only
   (>1024px) - hidden entirely below that per spec, never squeezed onto
   mobile/tablet. This is the one exception (alongside the mint pulse dot)
   to the no-continuous-looping-animation rule, explicitly approved. ---------- */

.r2j-hero__visual {
    display: none;
}

@media (min-width: 1025px) {
    .r2j-hero__visual {
        display: block;
        position: relative;
        height: 560px;
    }
}

.r2j-hero__visual-road {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
}

.r2j-proof-stack {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.r2j-proof-card {
    position: absolute;
    /* --r2j2-paper, not --r2j2-ink-soft: paper is the token this file
       already uses for "raised card on a surface" everywhere else
       (feature cards, role cards) and correctly flips white/dark-navy. */
    background: var(--r2j2-paper);
    border: 1px solid var(--r2j2-line);
    border-radius: 16px;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
    animation-name: r2jFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes r2jFloat {
    0%, 100% { transform: translateY(-6px) rotate(var(--r2j-tilt, 0deg)); }
    50% { transform: translateY(6px) rotate(var(--r2j-tilt, 0deg)); }
}

.r2j-proof-card--a {
    top: 10px;
    left: 10px;
    width: 340px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1;
    --r2j-tilt: -1.5deg;
    animation-delay: 0s;
    animation-duration: 7s;
}

.r2j-proof-card__ring-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
}

.r2j-proof-card__ring {
    width: 84px;
    height: 84px;
    transform: rotate(-90deg);
}

.r2j-proof-card__ring-track {
    fill: none;
    stroke: var(--r2j2-line);
    stroke-width: 7;
}

.r2j-proof-card__ring-fill {
    fill: none;
    stroke: var(--r2j2-signal, #F2860D);
    stroke-width: 7;
    stroke-linecap: round;
    /* Circumference of r=35 is ~219.9; 78% filled leaves 48.4 showing. */
    stroke-dasharray: 219.9;
    stroke-dashoffset: 219.9;
    animation: r2jRingFill .9s ease-out .3s forwards;
}

@keyframes r2jRingFill {
    to { stroke-dashoffset: 48.4; }
}

.r2j-proof-card__ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r2j-proof-card__ring-label span {
    font-weight: 800;
    font-size: 22px;
    color: var(--r2j2-heading);
}

.r2j-proof-card__ats-caption {
    font-size: 10px;
    color: var(--r2j2-slate);
    margin: 0 0 .6rem;
}

.r2j-proof-card__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.r2j-proof-card__checklist li {
    font-size: 10.5px;
}

.r2j-proof-card__check-ok {
    color: var(--r2j2-mint, #1E9E58);
}

.r2j-proof-card__check-warn {
    color: var(--r2j2-amber, #FFC46B);
}

.r2j-proof-card--b {
    top: 225px;
    left: -20px;
    width: 300px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    --r2j-tilt: 2deg;
    animation-delay: 1.4s;
    animation-duration: 8s;
}

.r2j-proof-card__company {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--r2j2-signal, #F2860D), var(--r2j2-amber, #FFC46B));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r2j2-ink, #0E1633);
}

.r2j-proof-card__company svg {
    width: 20px;
    height: 20px;
}

.r2j-proof-card__role {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex-grow: 1;
    min-width: 0;
}

.r2j-proof-card__role-title {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--r2j2-heading);
}

.r2j-proof-card__role-meta {
    font-size: 13px;
    color: var(--r2j2-slate);
}

.r2j-proof-card__match {
    flex-shrink: 0;
    background: var(--r2j2-signal, #F2860D);
    color: var(--r2j2-ink, #0E1633);
    font-size: 10px;
    padding: .35rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.r2j-proof-card--c {
    top: 385px;
    left: 50px;
    width: 280px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    z-index: 3;
    --r2j-tilt: -1deg;
    animation-delay: 2.6s;
    animation-duration: 6.5s;
}

.r2j-proof-card__verified-icon {
    width: 22px;
    height: 22px;
    color: var(--r2j2-mint, #1E9E58);
    flex-shrink: 0;
}

.r2j-proof-card__verified-icon svg {
    width: 100%;
    height: 100%;
}

.r2j-proof-card__verified-text {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 14px;
    color: var(--r2j2-heading);
    flex-grow: 1;
}

.r2j-proof-card__verified-tag {
    font-size: 10px;
    color: var(--r2j2-slate);
    white-space: nowrap;
}

/* ---------- Homepage nav override: transparent floating over the hero,
   solid+blurred once scrolled past it. Scoped to this stylesheet's
   homepage-only load, so every other page keeps its normal nav. ---------- */

.site-nav.r2j-home-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background-color .3s cubic-bezier(.2, .7, .3, 1), border-color .3s cubic-bezier(.2, .7, .3, 1), backdrop-filter .3s cubic-bezier(.2, .7, .3, 1);
}

.site-nav.r2j-home-nav.r2j-nav-scrolled {
    /* --r2j2-paper flips white/dark-navy, so the frosted scrolled bar
       automatically matches whichever hero surface is currently active. */
    background: color-mix(in srgb, var(--r2j2-paper) 92%, transparent) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--r2j2-line);
}

.site-nav.r2j-home-nav .navbar-brand,
.site-nav.r2j-home-nav .nav-link,
.site-nav.r2j-home-nav .form-check-label {
    /* app.css sets .navbar-brand's color !important - normal-weight
       declarations can never beat that regardless of specificity/order,
       so this needs !important too. --r2j2-heading tracks whatever surface
       is under the nav (hero when unscrolled, the frosted bar above once
       scrolled) in both themes. */
    color: var(--r2j2-heading) !important;
}

.site-nav.r2j-home-nav .nav-link:hover,
.site-nav.r2j-home-nav .nav-link.active {
    color: var(--r2j2-accent-text);
}

/* Bootstrap's default hamburger icon is a dark stroke - correct as-is
   against the light-mode hero, only needs inverting to white once the
   hero itself goes dark. */
.site-nav.r2j-home-nav .navbar-toggler-icon {
    filter: none;
}

[data-bs-theme="dark"] .site-nav.r2j-home-nav .navbar-toggler-icon {
    filter: invert(1);
}

.site-nav.r2j-home-nav .navbar-toggler {
    border-color: rgba(14, 22, 51, .35);
}

[data-bs-theme="dark"] .site-nav.r2j-home-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

.site-nav.r2j-home-nav .btn-outline-primary {
    background: transparent;
    border-color: rgba(14, 22, 51, .35);
    color: var(--r2j2-heading);
}

.site-nav.r2j-home-nav .btn-outline-primary:hover {
    border-color: var(--r2j2-heading);
    background: rgba(14, 22, 51, .06);
    color: var(--r2j2-heading);
}

[data-bs-theme="dark"] .site-nav.r2j-home-nav .btn-outline-primary {
    border-color: rgba(255, 255, 255, .35);
}

[data-bs-theme="dark"] .site-nav.r2j-home-nav .btn-outline-primary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
}

.site-nav.r2j-home-nav .btn-primary {
    background: var(--r2j2-signal, #F2860D);
    border-color: var(--r2j2-signal, #F2860D);
    color: var(--r2j2-ink, #0E1633);
}

.site-nav.r2j-home-nav .btn-primary:hover {
    background: color-mix(in srgb, var(--r2j2-signal) 88%, black);
    border-color: color-mix(in srgb, var(--r2j2-signal) 88%, black);
}

/* Bootstrap's collapsed mobile menu needs an opaque surface to sit on -
   floating transparent nav text over arbitrary page content mid-scroll
   would be unreadable otherwise. */
@media (max-width: 1199.98px) {
    .site-nav.r2j-home-nav .navbar-collapse.show,
    .site-nav.r2j-home-nav .navbar-collapse.collapsing {
        background: color-mix(in srgb, var(--r2j2-paper) 97%, transparent);
        backdrop-filter: blur(12px);
        margin-inline: -1rem;
        padding: 1rem;
        border-radius: 0 0 12px 12px;
    }
}

/* ---------- Section 2: the road + how-it-works milestones
   (surface: --cream) ---------- */

.r2j-road {
    background: var(--r2j2-cream, #FBF4EA);
    padding-block: 100px;
}

@media (max-width: 767px) {
    .r2j-road {
        padding-block: 64px;
    }
}

.r2j-road__inner {
    max-width: 1180px;
}

.r2j-road__head {
    text-align: center;
    margin-bottom: 4rem;
}

.r2j-eyebrow--dark {
    /* --r2j2-accent-text, not --r2j2-signal directly: signal-on-cream is
       2.35:1, fails WCAG AA. */
    color: var(--r2j2-accent-text, #a85709);
}

.r2j-road__title {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(30px, 4.2vw, 52px);
    color: var(--r2j2-heading, #0E1633);
    margin: 0;
}

.r2j-road__track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    /* "auto" (not a forced minimum) so rows size purely to content - and
       an EXPLICIT template matters here, not just cosmetically: the SVG
       wrapper's grid-row: 1 / -1 below resolves -1 against the explicit
       grid's last line. With no grid-template-rows at all, there is no
       explicit line past 1, so the span silently collapsed to row 1 only
       (the SVG rendered at ~1 row's height, curve visibly compressed at
       the top with the rest of the track a dead-straight line). */
    grid-template-rows: repeat(5, auto);
    column-gap: 24px;
    row-gap: 120px;
}

.r2j-road__svgwrap {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
}

.r2j-road__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.r2j-road__path-bg {
    fill: none;
    stroke: var(--r2j2-line, #EFE3D2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.r2j-road__path-fg {
    fill: none;
    stroke: url(#r2jRoadGradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    /* JS sets the real dasharray/dashoffset from the measured path length;
       these are only the pre-JS/no-JS fallback (fully drawn, static). */
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

/* The <ol> itself also needs display:contents - without it, the <li>s'
   display:contents only promotes grandchildren as far as the <ol>'s own
   box, which then sits as a single auto-placed grid item instead of its
   contents actually joining .r2j-road__track's grid. That single missing
   rule was the root cause of the squeeze/misalignment/trailing-gap bugs. */
.r2j-milestones {
    display: contents;
}

.r2j-milestone {
    display: contents;
}

.r2j-milestone:nth-child(1) .r2j-milestone__node,
.r2j-milestone:nth-child(1) .r2j-milestone__content { grid-row: 1; }
.r2j-milestone:nth-child(2) .r2j-milestone__node,
.r2j-milestone:nth-child(2) .r2j-milestone__content { grid-row: 2; }
.r2j-milestone:nth-child(3) .r2j-milestone__node,
.r2j-milestone:nth-child(3) .r2j-milestone__content { grid-row: 3; }
.r2j-milestone:nth-child(4) .r2j-milestone__node,
.r2j-milestone:nth-child(4) .r2j-milestone__content { grid-row: 4; }
.r2j-milestone:nth-child(5) .r2j-milestone__node,
.r2j-milestone:nth-child(5) .r2j-milestone__content { grid-row: 5; }

.r2j-milestone__node {
    grid-column: 2;
    /* Aligned to the row's top (the title), not centred against the whole
       title+paragraph block - a 2-line paragraph would otherwise pull a
       centred node down away from the title it belongs to. The 3px nudge
       is optical: lines the 14px dot up with the h3's cap-height. */
    align-self: start;
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    z-index: 1;
    /* No-JS/pre-JS default: fully visible, un-scaled - JS opts INTO the
       scale-in effect via .r2j-js-armed, never opts content OUT of view. */
    transform: scale(1);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.r2j-js-armed .r2j-milestone__node {
    transform: scale(0);
}

.r2j-js-armed .r2j-milestone__node.r2j-is-active {
    transform: scale(1);
}

.r2j-milestone__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--r2j2-signal, #F2860D);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2j2-signal) 18%, transparent);
}

.r2j-milestone__num {
    font-size: 11px;
    color: var(--r2j2-accent-text, #a85709);
}

.r2j-milestone--left .r2j-milestone__content {
    grid-column: 1;
    text-align: right;
    max-width: 380px;
    margin-left: auto;
}

.r2j-milestone--right .r2j-milestone__content {
    grid-column: 3;
    text-align: left;
    max-width: 380px;
    margin-right: auto;
}

.r2j-milestone__content {
    align-self: start;
    /* Same progressive-enhancement pattern as the node above. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}

.r2j-js-armed .r2j-milestone__content {
    opacity: 0;
    transform: translateY(20px);
}

.r2j-js-armed .r2j-milestone__content.r2j-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.r2j-milestone__content h3 {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--r2j2-heading, #0E1633);
    margin: 0 0 .4rem;
}

.r2j-milestone__content p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--r2j2-slate, #5A6472);
    margin: 0;
}

@media (max-width: 899px) {
    /* Single column: road pinned 28px from the container edge (centred in
       a 56px-wide gutter column), every block reads left, right after it. */
    .r2j-road__track {
        grid-template-columns: 56px 1fr;
        column-gap: 0;
        row-gap: 72px;
    }

    .r2j-road__svgwrap {
        grid-column: 1;
    }

    .r2j-milestone__node {
        grid-column: 1;
        margin-top: 3px;
    }

    .r2j-milestone--left .r2j-milestone__content,
    .r2j-milestone--right .r2j-milestone__content {
        /* The 56px node column already puts content's left edge 56px from
           the container edge, matching "padding-left: 56px" without
           double-applying it on top of the column itself. */
        grid-column: 2;
        text-align: left;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Section 3: live features grid (surface: --paper cards
   on a --cream section) ---------- */

.r2j-features {
    background: var(--r2j2-cream, #FBF4EA);
    padding-block: 100px;
}

@media (max-width: 767px) {
    .r2j-features {
        padding-block: 64px;
    }
}

.r2j-features__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}

.r2j-features__eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--r2j2-mint) 10%, transparent);
    margin-bottom: 1.25rem;
}

.r2j-features__eyebrow-pill .r2j-font-mono {
    font-size: 11px;
    color: var(--r2j2-mint-text, #147A44);
}

.r2j-features__pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--r2j2-mint, #1E9E58);
    flex-shrink: 0;
}

/* The one continuously-looping animation on the page, per this redesign's
   motion rules - everything else is either a one-time reveal or a hover. */
.r2j-features__pulse-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--r2j2-mint, #1E9E58);
    animation: r2jPulse 2s cubic-bezier(.2, .7, .3, 1) infinite;
}

@keyframes r2jPulse {
    0% { transform: scale(.6); opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}

.r2j-features__title {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(30px, 4.2vw, 52px);
    color: var(--r2j2-heading, #0E1633);
    margin: 0 0 1rem;
}

.r2j-features__sub {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--r2j2-slate, #5A6472);
    margin: 0;
}

.r2j-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 980px) {
    .r2j-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .r2j-features__grid {
        grid-template-columns: 1fr;
    }
}

.r2j-feature-card {
    position: relative;
    overflow: hidden;
    background: var(--r2j2-paper, #FFFFFF);
    border: 1px solid var(--r2j2-line, #EFE3D2);
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 1px 2px rgba(14, 22, 51, .04), 0 10px 28px -18px rgba(14, 22, 51, .28);
    /* Longhand, not shorthand, on purpose: the reveal's stagger delay
       (below) and hover's zero-delay override (further below) each need
       to win independently without resetting transition-property/duration
       for the properties they don't care about. */
    transition-property: transform, box-shadow, opacity;
    transition-duration: .28s, .28s, .5s;
    transition-timing-function: cubic-bezier(.2, .7, .3, 1);
    /* No-JS/pre-JS default: fully visible - JS opts INTO the hidden
       pre-reveal state via .r2j-js-armed, same pattern as Section 2. */
    opacity: 1;
    transform: translateY(0);
}

.r2j-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--r2j2-signal, #F2860D), var(--r2j2-amber, #FFC46B));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.r2j-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(14, 22, 51, .06), 0 22px 44px -18px rgba(14, 22, 51, .34);
    transition-delay: 0s;
}

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

.r2j-js-armed .r2j-feature-card {
    opacity: 0;
    transform: translateY(24px);
    transition-delay: var(--r2j-stagger, 0ms);
}

.r2j-js-armed .r2j-feature-card.r2j-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.r2j-feature-card:nth-child(1) { --r2j-stagger: 0ms; }
.r2j-feature-card:nth-child(2) { --r2j-stagger: 60ms; }
.r2j-feature-card:nth-child(3) { --r2j-stagger: 120ms; }
.r2j-feature-card:nth-child(4) { --r2j-stagger: 180ms; }
.r2j-feature-card:nth-child(5) { --r2j-stagger: 240ms; }
.r2j-feature-card:nth-child(6) { --r2j-stagger: 300ms; }
.r2j-feature-card:nth-child(7) { --r2j-stagger: 360ms; }
.r2j-feature-card:nth-child(8) { --r2j-stagger: 420ms; }
.r2j-feature-card:nth-child(9) { --r2j-stagger: 480ms; }
.r2j-feature-card:nth-child(10) { --r2j-stagger: 540ms; }

.r2j-feature-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.r2j-feature-card__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #FDEBD3;
    color: var(--r2j2-signal, #F2860D);
    flex-shrink: 0;
    transition: background-color .28s cubic-bezier(.2, .7, .3, 1), color .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1);
}

[data-bs-theme="dark"] .r2j-feature-card__icon-tile {
    background: color-mix(in srgb, var(--r2j2-signal) 18%, transparent);
}

.r2j-feature-card__icon {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
}

.r2j-feature-card:hover .r2j-feature-card__icon-tile {
    background: var(--r2j2-signal, #F2860D);
    color: #fff;
    transform: rotate(-4deg);
}

.r2j-feature-card__live {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--r2j2-mint) 12%, transparent);
    color: var(--r2j2-mint-text, #147A44);
    font-size: 10px;
}

.r2j-feature-card h3 {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--r2j2-heading, #0E1633);
    margin: 0 0 .5rem;
}

.r2j-feature-card p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--r2j2-slate, #5A6472);
    margin: 0;
}

/* ---------- Section 4: choose your path (surface: --cream) - same four
   role cards/register links as before, elevated treatment ---------- */

.r2j-roles {
    background: var(--r2j2-cream, #FBF4EA);
    padding-block: 100px;
}

@media (max-width: 767px) {
    .r2j-roles {
        padding-block: 64px;
    }
}

.r2j-roles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 980px) {
    .r2j-roles__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .r2j-roles__grid {
        grid-template-columns: 1fr;
    }
}

.r2j-role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    background: var(--r2j2-paper, #FFFFFF);
    border: 1px solid var(--r2j2-line, #EFE3D2);
    border-radius: 18px;
    padding: 32px 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(14, 22, 51, .04), 0 10px 28px -18px rgba(14, 22, 51, .28);
    transition: background-color .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-role-card:hover,
.r2j-role-card:focus-visible {
    background: var(--r2j2-ink, #0E1633);
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(14, 22, 51, .08), 0 24px 48px -18px rgba(14, 22, 51, .4);
}

.r2j-role-card:focus-visible {
    outline: 2px solid var(--r2j2-amber, #FFC46B);
    outline-offset: 3px;
}

.r2j-role-card__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #FDEBD3;
    color: var(--r2j2-signal, #F2860D);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    transition: background-color .28s cubic-bezier(.2, .7, .3, 1), color .28s cubic-bezier(.2, .7, .3, 1);
}

[data-bs-theme="dark"] .r2j-role-card__icon-tile {
    background: color-mix(in srgb, var(--r2j2-signal) 18%, transparent);
}

.r2j-role-card__icon-tile svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.8;
}

.r2j-role-card:hover .r2j-role-card__icon-tile,
.r2j-role-card:focus-visible .r2j-role-card__icon-tile {
    background: rgba(255, 255, 255, .14);
    color: var(--r2j2-amber, #FFC46B);
}

.r2j-role-card h3 {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--r2j2-heading, #0E1633);
    margin: 0 0 .6rem;
    transition: color .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-role-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--r2j2-slate, #5A6472);
    margin: 0 0 1.5rem;
    flex-grow: 1;
    transition: color .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-role-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--r2j2-heading, #0E1633);
    margin-top: auto;
    transition: color .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-role-card__arrow {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

.r2j-role-card:hover h3,
.r2j-role-card:hover p,
.r2j-role-card:hover .r2j-role-card__cta,
.r2j-role-card:focus-visible h3,
.r2j-role-card:focus-visible p,
.r2j-role-card:focus-visible .r2j-role-card__cta {
    color: #fff;
}

.r2j-role-card:hover .r2j-role-card__arrow,
.r2j-role-card:focus-visible .r2j-role-card__arrow {
    transform: translateX(4px);
}

/* ---------- Section 5: trust (surface: --paper) - restrained, words
   only, no invented stats. 'stat' becomes a real display figure the
   moment a real number is added to the PHP array. ---------- */

.r2j-trust {
    background: var(--r2j2-paper, #FFFFFF);
    padding-block: 80px;
}

.r2j-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 767px) {
    .r2j-trust__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.r2j-trust__item {
    padding-top: 1.25rem;
    border-top: 1px solid var(--r2j2-line, #EFE3D2);
}

.r2j-trust__stat {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--r2j2-heading, #0E1633);
    margin-bottom: .5rem;
}

.r2j-trust__label {
    font-size: 11px;
    color: var(--r2j2-accent-text, #a85709);
    margin: 0 0 .6rem;
}

.r2j-trust__text {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--r2j2-slate, #5A6472);
    margin: 0;
}

/* ---------- Section 6: final CTA (surface: --ink) - bookends the hero,
   the road's last node terminates here. ---------- */

.r2j-final-cta {
    background: var(--r2j2-cream);
    padding-block: 100px;
    text-align: center;
}

.r2j-final-cta__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.r2j-final-cta__stub {
    width: 2px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--r2j2-signal, #F2860D));
}

.r2j-final-cta__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--r2j2-signal, #F2860D);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--r2j2-signal) 22%, transparent);
    margin-top: -1px;
}

.r2j-final-cta__title {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(28px, 3.6vw, 44px);
    color: var(--r2j2-heading);
    margin: 0 0 2rem;
}

.r2j-final-cta__btn {
    font-size: 1rem;
    padding: .9rem 2rem;
}

/* ---------- Footer: fixed dark on --ink-soft-dark, matching every other
   page's footer (marketing.css's .site-footer is a permanent dark
   bookend site-wide, with hardcoded white text - NOT theme-flipping).
   This override only exists because the homepage's footer previously
   used a slightly different dark shade than the sitewide default; it
   must stay dark in both themes here too, or the sitewide white footer
   text becomes invisible. */

.site-footer {
    background: #1A2547 !important;
}

.site-footer hr {
    border-color: rgba(255, 255, 255, .1) !important;
    opacity: .3;
}

@media (prefers-reduced-motion: reduce) {
    .r2j-hero__content,
    .r2j-hero__content.r2j-is-fading,
    .r2j-btn,
    .r2j-persona-switch__pill,
    .r2j-milestone__node,
    .r2j-milestone__content,
    .r2j-road__path-fg,
    .r2j-feature-card,
    .r2j-feature-card::before,
    .r2j-feature-card__icon-tile,
    .r2j-role-card,
    .r2j-role-card__icon-tile,
    .r2j-role-card__arrow {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .r2j-features__pulse-dot::after {
        animation: none !important;
    }

    /* The float loop is the one other exception to no-looping-animation -
       still an animation, still gets killed under reduced motion. Keeps
       the static tilt (a one-time rotation, not a loop) rather than
       flattening to transform:none like the bulk rule above does. */
    .r2j-proof-card {
        animation: none !important;
        transform: rotate(var(--r2j-tilt, 0deg)) !important;
    }

    .r2j-proof-card__ring-fill {
        animation: none !important;
        stroke-dashoffset: 48.4 !important;
    }
}