/* =====================================================
   BAOIAM - RESOURCES PAGE

   Built from the Figma prototype (node 3741:4088) — free
   guides, career workshops, cheat-sheets and a newsletter
   opt-in, following the same section rhythm as the course
   pages: eyebrow/pill -> big heading with one orange word ->
   sub -> content.
===================================================== */

.rs-page{
    background:#FFFFFF;
}

.rs-orange{
    color:var(--primary);
}

/* ==========================
   SHARED TYPE
========================== */

.rs-title{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    text-align:center;
    color:var(--ink);
}

.rs-sub{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:clamp(15px,1.5vw,19px);
    line-height:1.6;
    text-align:center;
    color:var(--ink-500);
}

.rs-eyebrow{
    display:block;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-align:center;
    color:var(--primary);
}

/* ==========================
   HERO
========================== */

.rs-hero{
    /* Both are new: the bands and the sparks are absolutely positioned against
       this box, and the bands are drawn wider than it so their ends never show
       as a cut edge. */
    position:relative;
    overflow:hidden;
    padding:var(--space-section) 0;
    background:
        radial-gradient(circle at 50% -10%,#FFE2CF 0%,rgba(255,255,255,0) 60%),
        #FFFFFF;
}

/* ==========================================
   HERO MOTION

   Three bands along the foot and a field of sparks rising through the wash.
   Tinted off the brand ramp rather than given their own colour, so they read
   as this hero's own gradient moving rather than as a graphic on top of it.

   Everything here is the resting state. GSAP takes over from
   js/resources-hero.js; if it never arrives the bands simply hold this pose,
   which is the same silhouette the Udaan hero carries, and the sparks stay at
   opacity:0 rather than sitting on the page as a scatter of static dots.
========================================== */

.rs-hero-waves{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:clamp(120px,15vw,240px);
    z-index:0;
    pointer-events:none;
}

.rs-hero-wave{
    /* scaleX has to pivot on each band's own centre. Without fill-box the
       origin is the SVG viewBox's, and the bands would slide sideways as they
       stretched instead of widening in place. */
    transform-box:fill-box;
    transform-origin:50% 100%;
}

.rs-hero-wave-1{ fill:rgba(255,102,0,.07); }
.rs-hero-wave-2{ fill:rgba(255,102,0,.10); }
.rs-hero-wave-3{ fill:rgba(255,226,207,.85); }

.rs-hero-sparks{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.rs-spark{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--d);
    height:var(--d);
    border-radius:50%;
    /* Lit from the top left like the spheres in the other heroes, rather than
       a flat disc, and carrying a little bloom so a 5px dot still reads as a
       spark against a near-white wash. At --primary-35 over the hero's own
       peach these were technically present and practically invisible. */
    background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,rgba(255,102,0,.55) 45%,rgba(255,102,0,.30) 100%);
    box-shadow:0 0 10px rgba(255,102,0,.22);
    opacity:0;
}

@media (prefers-reduced-motion:reduce){

    /* GSAP checks this too and never starts, but the bands should also not be
       left mid-tween if the preference is switched on after the page loaded. */
    .rs-hero-wave{
        transform:none !important;
    }

    .rs-spark{
        display:none;
    }

}

/* 1120px rather than 1000. The old figure was set when --fs-hero topped out
   at 40px, where this headline needs 928px to stay whole; the token's
   ceiling is 44px now, which puts the same line at about 1021px, and 1000
   minus the container's own 20px gutters left only 960 - so "Place" dropped
   to a line of its own again on wide screens. The paragraph (680) and the
   stats row (760) carry their own narrower measures, so only the headline
   uses the extra width. */

/* 1120px rather than 1000. The old figure was set when --fs-hero topped out
   at 40px, where this headline needs 928px to stay whole; the token's
   ceiling is 44px now, which puts the same line at about 1021px, and 1000
   minus the container's own 20px gutters left only 960 - so "Place" dropped
   to a line of its own again on wide screens. The paragraph (680) and the
   stats row (760) carry their own narrower measures, so only the headline
   uses the extra width. */

/* Copy on the left, artwork on the right -- the same split the About hero
   uses, and on its proportions. This hero was the only content hero on the
   site with no artwork at all and a centred stack; matching About is what
   makes the illustration read as part of the page rather than dropped on
   top of it.

   No inset on the copy: like .ab-hero-copy it now runs up against the
   container's own 20px padding, which is what the cap below buys the art
   track. */

.rs-hero-inner{
    /* Third step for the clip, and the first one the copy pays for. 1120 ->
       1280 -> 1360 is the container's whole usable width at a 1400 viewport,
       so this box has stopped centring inside it and there is no more to
       take from the margins. The split goes past even, 1.08/.92 -> 1/1.08,
       which puts the art track near 673px and the copy near 623 -- down from
       657, the first real cut it has taken. */
    max-width:1360px;
    margin-inline:auto;
    text-align:left;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:clamp(32px,4vw,64px);
    align-items:center;
    /* Above the wave bands and the spark field. Both come first in the markup
       and share this stacking context, so without a layer of its own the
       content would be painted under them. */
    position:relative;
    z-index:1;
}

.rs-hero-art{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* The illustration this replaced was portrait -- 332x492 -- and was capped at
   340px so it would not tower over the copy. The clip is the other way up at
   848x478, so it takes the whole art track instead: width is the dimension a
   16:9 frame needs, and aspect-ratio holds its box before a single frame has
   loaded, so the hero does not jump when it arrives. */

.rs-hero-video{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:848 / 478;
    object-fit:cover;
    border-radius:20px;
    /* Warm rather than neutral, the same cast the wave bands and sparks carry
       so the frame belongs to this hero and not to the page behind it. */
    box-shadow:0 18px 44px rgba(255,102,0,.18);
    /* Shows through for the moment before the first frame decodes, and behind
       the rounded corners if the clip's own edges are square. */
    background:var(--cream-100);
}

.rs-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border-radius:var(--r-50);
    background:#fff;
    box-shadow:var(--shadow-soft);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary);
}

.rs-hero h1{
    margin-top:26px;
    font-family:var(--font-sans);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.12;
    color:var(--ink);
}

.rs-hero-sub{
    margin:20px 0 0;
    max-width:620px;
    font-family:var(--font-sans);
    font-size:clamp(16px,1.6vw,20px);
    line-height:1.6;
    color:var(--ink-500);
}

.rs-hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin:32px 0 0;
    /* Narrower than the copy column it sits in: at full width the bar was
       as long as the lead above it and read as a second block of content
       rather than a footnote to one. Still flush left, so it keeps the
       edge the heading and the lead share. */
    max-width:470px;
    border-radius:var(--r-20);
    background:#fff;
    box-shadow:var(--shadow-soft);
}

.rs-stat{
    padding:12px 10px;
    text-align:center;
    border-right:1px solid var(--border-soft);
}

.rs-stat:last-child{
    border-right:none;
}

.rs-stat strong{
    display:block;
    font-family:var(--font-sans);
    font-size:clamp(17px,1.7vw,21px);
    font-weight:800;
    color:var(--primary);
}

.rs-stat span{
    display:block;
    margin-top:2px;
    font-size:12px;
    color:var(--ink-500);
}

/* ==========================
   HORIZONTAL RAIL (shared by
   tracks + workshops)
========================== */

.rs-rail{
    display:flex;
    gap:24px;
    margin-top:var(--space-block);
    padding:6px 6px 20px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    /* No visible bar: the row is dragged, swiped, wheeled or arrow-keyed,
       and the cards running off the edge already say that it moves.
       overflow-x stays auto, so every one of those still works. */
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
}

.rs-rail::-webkit-scrollbar{
    display:none;
}

/* --- Rail controls (workshops rail only) -------------------------------

   The row scrolled from the first day -- drag, swipe, wheel, arrow keys --
   but with the scrollbar hidden nothing on screen said so, and a reader who
   never tried had no way to reach cards three and four. These are the
   affordance. js/rail-controls.js unhides them, so with the script blocked
   the markup's `hidden` stands and the section is exactly what it was. */

.rs-rail-nav{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    /* Sits on the rail's own top margin rather than adding a second one, so
       the row below does not drop away from the lead paragraph. */
    margin-top:var(--space-block);
    margin-bottom:calc(var(--space-block) * -1 + 12px);
}

.rs-rail-btn{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--cream-500);
    border-radius:var(--r-50);
    background:#fff;
    color:var(--primary);
    font-size:14px;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.rs-rail-btn:hover:not(:disabled){
    border-color:var(--primary);
    background:var(--primary-10);
}

/* The keyboard has to be able to see where it is; these are the only controls
   in the section that are not a link or a card. */

.rs-rail-btn:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

/* Dimmed, not hidden: a control that vanishes at the end of the row moves the
   two beside it. */

.rs-rail-btn:disabled{
    opacity:.38;
    cursor:default;
}

/* Playing reads as a filled button, so the state is visible without relying
   on the glyph swap alone. */

.rs-rail-btn-play[aria-pressed="true"]{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

@media (max-width:640px){

    .rs-rail-nav{
        justify-content:center;
    }

    /* 40px is under the ~44px a finger needs, the same floor .rs-filter was
       raised to further down this file. */

    .rs-rail-btn{
        width:44px;
        height:44px;
    }

}

/* --- The newsletter form drops in --------------------------------------

   Each control falls from above and bounces to rest, one after the next.
   The stagger is the reveal group's own --delay, so this inherits the
   scroll trigger and the reduced-motion behaviour already on the page
   rather than inventing its own.

   The keyframes carry the easing shape themselves: the fall accelerates,
   then every bounce slows on the way up and speeds up on the way down. */

@keyframes rsDropIn{
    0%{
        transform:translateY(-200px);
        opacity:0;
        animation-timing-function:ease-in;
    }
    38%{
        transform:translateY(0);
        opacity:1;
        animation-timing-function:ease-out;
    }
    54%{
        transform:translateY(-34px);
        animation-timing-function:ease-in;
    }
    70%{
        transform:translateY(0);
        animation-timing-function:ease-out;
    }
    82%{
        transform:translateY(-15px);
        animation-timing-function:ease-in;
    }
    91%{
        transform:translateY(0);
        animation-timing-function:ease-out;
    }
    96%{
        transform:translateY(-5px);
        animation-timing-function:ease-in;
    }
    100%{
        transform:translateY(0);
        opacity:1;
    }
}

.rs-newsletter-form.is-visible > *{
    animation:rsDropIn 800ms var(--delay,0ms) both;
}

/* The status line stays hidden until there is something to say, and the
   animation must not be what brings it back. */

.rs-newsletter-form .rs-newsletter-status{
    animation:none !important;
}

.rs-newsletter-form.is-visible > .rs-newsletter-disclaimer{
    animation-delay:600ms;
}

@media (prefers-reduced-motion:reduce){

    .rs-newsletter-form.is-visible > *{
        animation:none;
    }

}

.rs-rail.is-dragging{
    cursor:grabbing;
    /* Text selection would fight the drag, and proximity snap would tug the
       row back while the pointer is still moving it. */
    user-select:none;
    scroll-snap-type:none;
}

/* ==========================
   TRACKS
========================== */

.rs-tracks{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.rs-track-card{
    /* Containing block for the button's stretched hit area below. */
    position:relative;
    flex:0 0 360px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-20);
    background:#fff;
    overflow:hidden;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.rs-track-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary-50);
    box-shadow:var(--shadow-lg);
}

.rs-track-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
}

.rs-track-body{
    padding:22px 24px 26px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.rs-track-body h3{
    font-family:var(--font-sans);
    font-size:22px;
    font-weight:700;
    color:var(--ink);
}

.rs-track-body p{
    margin-top:10px;
    font-size:15px;
    line-height:1.55;
    color:var(--ink-500);
    flex:1;
}

.rs-track-meta{
    display:flex;
    gap:20px;
    margin-top:16px;
    font-size:13px;
    font-weight:600;
    color:var(--ink-400);
}

.rs-track-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.rs-track-meta i{
    color:var(--primary);
}

/* The button already carried the right href, but it is a small target at
   the foot of a tall card -- the picture and the title above it did nothing,
   which is what makes a card read as unclickable. This lays the button's own
   link over the whole card, so anywhere on it opens the same course page.

   An ::after rather than a second <a>: one link in the accessibility tree,
   one href to keep in step with the heading, and nothing new in the markup.

   js/rail-drag.js swallows the click that ends a real drag, so pulling the
   rail sideways and letting go over a card still does not open it. */

.rs-track-cta::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
}

.rs-track-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding:12px 22px;
    align-self:flex-start;
    border-radius:var(--r-50);
    background:var(--primary);
    color:#fff;
    font-family:var(--font-sans);
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    transition:
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.rs-track-cta:hover{
    background:var(--primary-hover);
    transform:translateX(3px);
}

/* ==========================
   WORKSHOPS
========================== */

.rs-workshops{
    padding:var(--space-section) 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px),
        radial-gradient(circle at 8% 12%, rgba(255,102,0,.17), transparent 27%),
        radial-gradient(circle at 94% 74%, rgba(66,111,136,.16), transparent 32%),
        linear-gradient(145deg, #111416, #17191a);
}

.rs-workshops .rs-title{
    color:#fff;
}

.rs-workshops .rs-sub{
    color:rgba(255,255,255,.76);
}

.rs-workshop-card{
    /* Widened from 300: at that width the longer session titles ("Your First
       Internship: Apply Right") broke over two lines while the short ones sat
       on one, so the cards' meta rows never lined up with each other. */
    flex:0 0 340px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    padding:22px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-20);
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.rs-workshop-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}

.rs-workshop-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.rs-workshop-date{
    line-height:1.1;
}

.rs-workshop-date strong{
    display:block;
    font-size:26px;
    font-weight:800;
    color:var(--ink);
}

.rs-workshop-date span{
    display:block;
    margin-top:2px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-400);
}

.rs-badge{
    padding:5px 12px;
    border-radius:var(--r-50);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.rs-badge-free{
    background:var(--primary-10);
    color:var(--primary);
}

.rs-badge-live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary);
    color:#fff;
}

/* Was a 6px ::before dot. A dot says "something is on"; the broadcast glyph
   says what. The pulse moves to the glyph so the badge still reads as live
   at a glance rather than as a static label. */

.rs-badge-live i{
    font-size:11px;
    line-height:1;
    animation:baoPulseGlow 1.6s var(--ease-soft) infinite;
}

/* animations.css guards .bao-float, .bao-pulse and .bao-marquee-track only --
   this element was never covered, so the badge kept pulsing for a reader who
   had asked it not to. */

@media (prefers-reduced-motion:reduce){

    .rs-badge-live i{
        animation:none;
    }

}

.rs-workshop-card h3{
    margin-top:16px;
    font-family:var(--font-sans);
    /* A step down from 19px — with the wider card this is what holds the
       longest title on a single line. */
    font-size:17px;
    font-weight:700;
    line-height:1.35;
    color:var(--ink);
    text-wrap:balance;
}

.rs-workshop-card p{
    margin-top:8px;
    font-size:14px;
    line-height:1.55;
    color:var(--ink-500);
    flex:1;
}

.rs-workshop-meta{
    display:flex;
    gap:16px;
    margin-top:14px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border-soft);
    font-size:13px;
    font-weight:600;
    color:var(--ink-400);
}

.rs-workshop-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.rs-workshop-mentor{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
}

.rs-workshop-mentor img{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.rs-workshop-mentor strong{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
}

.rs-workshop-mentor span{
    display:block;
    font-size:12px;
    color:var(--ink-400);
}

.rs-workshop-reserve{
    display:block;
    margin-top:18px;
    padding:12px;
    border:none;
    border-radius:var(--r-50);
    background:var(--primary);
    color:#fff;
    text-align:center;
    font-family:var(--font-sans);
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.rs-workshop-reserve:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}

/* ==========================
   QUICK LEARNING GUIDE
========================== */

.rs-guide{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.rs-guide-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:34px;
}

.rs-filter{
    padding:9px 20px;
    border:1.5px solid var(--border);
    border-radius:var(--r-50);
    background:#fff;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:600;
    color:var(--ink-500);
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.rs-filter:hover{
    border-color:var(--primary-50);
    color:var(--primary);
}

.rs-filter.is-active{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

.rs-guide-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:var(--space-block);
}

.rs-guide-card{
    padding:24px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-15);
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.rs-guide-card:hover{
    transform:translateY(-4px);
    border-color:var(--primary-50);
    box-shadow:var(--shadow-md);
}

.rs-guide-card.is-hidden,
a.rs-guide-card.is-hidden{
    display:none !important;
}

/* The cards became links once every guide got its own page in pages/guides/.
   An <a> has to be told to behave like the block it replaced, and the title
   takes the accent on hover so the whole card reads as one target rather
   than as a box with a link somewhere in it. */

a.rs-guide-card{
    display:flex;
    flex-direction:column;
    color:inherit;
    text-decoration:none;
}

/* The meta rule sits on the floor of the card rather than wherever the
   summary happens to end, so a row of cards with one, two and three line
   descriptions still rules off at the same height. */

a.rs-guide-card .rs-guide-meta{
    margin-top:auto;
    padding-top:18px;
}

/* An inline-block pill becomes a full-width flex item once its parent is a
   column, which stretches the tag across the card. */

a.rs-guide-card .rs-tag{
    align-self:flex-start;
}

a.rs-guide-card:hover h3{
    color:var(--primary);
}

a.rs-guide-card:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

/* A plain arrow character rather than an icon font: the affordance should
   survive the Font Awesome CDN being blocked. */

a.rs-guide-card .rs-guide-meta::after{
    content:"\2192";
    font-size:15px;
    color:var(--primary);
    opacity:0;
    transform:translateX(-6px);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

a.rs-guide-card:hover .rs-guide-meta::after,
a.rs-guide-card:focus-visible .rs-guide-meta::after{
    opacity:1;
    transform:translateX(0);
}

.rs-tag{
    display:inline-block;
    padding:4px 10px;
    border-radius:6px;
    background:var(--primary-10);
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--primary);
}

.rs-guide-card h3{
    margin-top:14px;
    font-family:var(--font-sans);
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.rs-guide-card p{
    margin-top:8px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--ink-500);
}

.rs-guide-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border-soft);
    font-size:12.5px;
    color:var(--ink-400);
}

/* ==========================
   NEWSLETTER
========================== */

.rs-newsletter{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.rs-newsletter-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    /* stretch, so the two cards below come out the same height rather than
       one floating short beside the other. */
    align-items:stretch;
    margin-top:var(--space-block);
    padding:40px;
    border-radius:var(--r-25);
    background:linear-gradient(135deg,#FFF3EA 0%,#FFE2CF 100%);
}

/* Each half gets a card of its own. They shared the peach panel with nothing
   between them, so the form and the list read as one loose column of things
   rather than as two halves of an offer. */

.rs-newsletter-form,
.rs-newsletter-perks{
    padding:24px 28px;
    border:1px solid var(--primary-25);
    border-radius:var(--r-20);
    background:#fff;
    box-shadow:0 4px 18px rgba(255,111,26,.08);
}

/* The card takes the track; the field inside keeps its own measure. */

.rs-newsletter-perks{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
}

.rs-newsletter-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    margin-inline:auto;
}

/* Field, button and both notes all share the old 380 measure. Each is
   centred as a box, so their text still starts on one shared left edge. */

.rs-newsletter-form > *{
    width:100%;
    max-width:380px;
}

.rs-newsletter-form input{
    padding:12px 14px;
    border:1.5px solid #9a9a9a;
    border-radius:var(--radius-md);
    background:#fff;
    font-family:inherit;
    font-size:14px;
    color:var(--ink);
    outline:none;
    transition:border-color var(--dur-base) var(--ease-out);
}

.rs-newsletter-form input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px var(--primary-10);
}

.rs-newsletter-form button{
    padding:12px;
    border:none;
    border-radius:var(--r-50);
    background:var(--primary);
    color:#fff;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.rs-newsletter-form button:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}

.rs-newsletter-disclaimer{
    font-size:11.5px;
    color:var(--ink-500);
}

.rs-newsletter-disclaimer a{
    color:var(--primary);
    text-decoration:underline;
}

.rs-newsletter-status{
    display:none;
    font-size:12.5px;
    font-weight:600;
    color:#188038;
}

.rs-newsletter-status.is-visible{
    display:block;
}

.rs-newsletter-form-title{
    font-family:var(--font-sans);
    font-size:18px;
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
    text-align:center;
    text-wrap:balance;
}

.rs-newsletter-perks h3{
    font-family:var(--font-sans);
    font-size:18px;
    font-weight:700;
    color:var(--ink);
    line-height:1.25;
}

.rs-newsletter-list{
    list-style:none;
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.rs-newsletter-list li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:500;
    color:var(--ink);
}

.rs-newsletter-list i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:9.5px;
    flex-shrink:0;
}

.rs-newsletter-trust{
    margin-top:12px;
    font-size:12px;
    color:var(--ink-500);
}

.rs-newsletter-trust strong{
    color:var(--primary);
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1100px){

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

}

@media (max-width:900px){

    .rs-hero-inner{
        grid-template-columns:1fr;
        text-align:center;
    }

    /* Content first: the artwork follows the stats rather than pushing the
       headline down the screen. */

    .rs-hero-video{
        /* Stacked, this sits below the stats and every pixel of it is scroll
           the reader pays for before the first section -- so it is capped
           well under the container rather than run edge to edge. */
        max-width:620px;
        margin-inline:auto;
        margin-top:8px;
    }

    .rs-hero-sub{
        margin-inline:auto;
    }

    .rs-hero-stats{
        grid-template-columns:repeat(3, 1fr);
        max-width:460px;
        width:100%;
        margin-inline:auto;
        box-sizing:border-box;
    }

    .rs-stat{
        padding:12px 6px;
        border-right:1px solid var(--border-soft);
        border-bottom:none;
    }

    .rs-stat:last-child{
        border-right:none;
    }

    .rs-stat strong{
        font-size:clamp(16px, 4.4vw, 20px);
    }

    .rs-stat span{
        font-size:clamp(10px, 2.7vw, 12px);
        white-space:nowrap;
    }

    .rs-newsletter-panel{
        grid-template-columns:1fr;
        padding:32px 24px;
    }

}

@media (max-width:640px){

    .rs-hero{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .rs-pill{
        padding:5px 14px !important;
        font-size:11px !important;
        font-weight:700 !important;
        letter-spacing:.04em !important;
    }

    .rs-hero h1,
    .rs-hero-copy h1{
        font-size:clamp(22px, 6.2vw, 30px) !important;
        line-height:1.18 !important;
        font-weight:800 !important;
        margin-top:14px !important;
    }

    .rs-hero-sub{
        font-size:clamp(13px, 3.4vw, 15px) !important;
        line-height:1.55 !important;
        margin-top:10px !important;
        max-width:95% !important;
        margin-inline:auto !important;
        text-wrap:balance !important;
    }

    .rs-hero-stats{
        margin-top:18px !important;
        padding:6px 8px !important;
        border-radius:14px !important;
        max-width:390px !important;
    }

    .rs-stat{
        padding:8px 4px !important;
    }

    .rs-stat strong{
        font-size:clamp(16px, 4.5vw, 19px) !important;
        line-height:1.15 !important;
    }

    .rs-stat span{
        font-size:clamp(11px, 2.7vw, 12.5px) !important;
        line-height:1.25 !important;
        margin-top:3px !important;
    }

    /* Section Headings & Subheadings */
    .rs-title{
        font-size:clamp(20px, 5.2vw, 26px) !important;
        line-height:1.25 !important;
        font-weight:800 !important;
        text-wrap:balance !important;
    }

    .rs-sub{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        max-width:95% !important;
        margin-inline:auto !important;
        text-wrap:balance !important;
    }

    .rs-eyebrow{
        font-size:11.5px !important;
        letter-spacing:.08em !important;
    }

    /* Filter Chips / Pills */
    .rs-guide-filters{
        gap:8px !important;
        margin-top:18px !important;
    }

    .rs-filter{
        font-size:13px !important;
        font-weight:600 !important;
        padding:7px 16px !important;
        min-height:38px !important;
        border-radius:999px !important;
    }

    /* Tracks & Workshops & Guides sections */
    .rs-tracks,
    .rs-workshops,
    .rs-guide{
        padding:clamp(28px, 6vw, 44px) 0 !important;
    }

    .rs-track-card{
        flex-basis:280px !important;
        border-radius:16px !important;
    }

    .rs-track-card img{
        height:155px !important;
    }

    .rs-track-body{
        padding:15px 14px 16px !important;
    }

    .rs-track-body h3{
        font-size:16px !important;
        line-height:1.3 !important;
        font-weight:700 !important;
    }

    .rs-track-body p{
        font-size:13px !important;
        line-height:1.5 !important;
        margin-top:6px !important;
    }

    .rs-track-meta{
        font-size:12px !important;
        gap:14px !important;
        margin-top:12px !important;
    }

    .rs-track-cta{
        padding:10px 18px !important;
        font-size:13.5px !important;
        font-weight:700 !important;
        margin-top:12px !important;
    }

    /* Workshops */
    .rs-workshop-card{
        flex-basis:270px !important;
        padding:15px !important;
        border-radius:16px !important;
    }

    .rs-workshop-date strong{
        font-size:22px !important;
    }

    .rs-workshop-date span{
        font-size:11px !important;
    }

    .rs-badge{
        font-size:11px !important;
        padding:3px 9px !important;
    }

    .rs-workshop-card h3{
        font-size:16px !important;
        line-height:1.3 !important;
        margin-top:10px !important;
    }

    .rs-workshop-card p{
        font-size:13px !important;
        line-height:1.5 !important;
        margin-top:6px !important;
    }

    .rs-workshop-meta{
        font-size:12px !important;
        gap:12px !important;
        margin-top:10px !important;
        padding-bottom:10px !important;
    }

    .rs-workshop-mentor{
        margin-top:10px !important;
        gap:9px !important;
    }

    .rs-workshop-mentor img{
        width:32px !important;
        height:32px !important;
    }

    .rs-workshop-mentor strong{
        font-size:13px !important;
    }

    .rs-workshop-mentor span{
        font-size:11.5px !important;
    }

    .rs-workshop-reserve{
        margin-top:12px !important;
        padding:10px !important;
        font-size:13.5px !important;
        font-weight:700 !important;
    }

    /* Guides - 2-column side by side grid stack on mobile */
    .rs-guide-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        margin-top:18px !important;
        width:100% !important;
    }

    .rs-guide-card{
        padding:13px 11px !important;
        border-radius:14px !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
    }

    .rs-tag{
        font-size:11px !important;
        padding:3px 8px !important;
        border-radius:5px !important;
        font-weight:600 !important;
    }

    .rs-guide-card h3{
        font-size:14px !important;
        line-height:1.3 !important;
        margin-top:7px !important;
        font-weight:700 !important;
    }

    .rs-guide-card p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:5px !important;
        flex:1 !important;
    }

    .rs-guide-meta{
        font-size:11px !important;
        padding-top:8px !important;
        margin-top:auto !important;
    }

    .rs-guide-card.is-hidden{
        display:none !important;
    }

    /* Newsletter Panel */
    .rs-newsletter-panel{
        padding:20px 16px !important;
        border-radius:18px !important;
        gap:14px !important;
    }

    .rs-newsletter-form,
    .rs-newsletter-perks{
        padding:18px 15px !important;
        border-radius:14px !important;
        gap:10px !important;
    }

    .rs-newsletter-form-title,
    .rs-newsletter-perks h3{
        font-size:clamp(15px, 4vw, 17.5px) !important;
        line-height:1.25 !important;
        margin:0 !important;
    }

    .rs-newsletter-list{
        margin-top:10px !important;
        gap:9px !important;
    }

    .rs-newsletter-list li{
        gap:8px !important;
        font-size:13px !important;
        font-weight:500 !important;
    }

    .rs-newsletter-list i{
        width:18px !important;
        height:18px !important;
        font-size:9.5px !important;
    }

    .rs-newsletter-trust{
        margin-top:12px !important;
        font-size:12px !important;
    }

    .rs-newsletter-form input{
        font-size:13.5px !important;
        padding:10px 14px !important;
        border-radius:8px !important;
    }

    .rs-newsletter-form button{
        font-size:14px !important;
        padding:11px 20px !important;
        font-weight:700 !important;
        border-radius:999px !important;
    }

    .rs-newsletter-disclaimer{
        font-size:11.5px !important;
        line-height:1.4 !important;
    }

}