/* =====================================================
   BAOIAM - COURSE PAGE
===================================================== */

.cr-page{
    --cr-ink:#151515;
    --cr-body:#2B2B2B;
    --cr-muted:#333333;
    --cr-faint:#5A5A5A;
    --cr-cream:#FFF8F2;
    --cr-ivory:#FFFDF9;

    background:#FFFFFF;
}

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

/* Shared Headings */
.cr-title{
    font-family:var(--font-sans);
    font-size:clamp(20px, 4.2vw, 32px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.01em;
    text-align:center;
    color:var(--ink);
}

.cr-title-left{
    text-align:left;
}

.cr-serif{
    font-family:var(--font-sans);
    font-size:clamp(20px, 4.2vw, 32px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.01em;
    text-wrap:balance;
    text-align:center;
    color:var(--ink);
}

.cr-serif-sub,
.cr-curriculum-sub{
    margin-top:14px;
    max-width:min(80ch,100%);
    margin-inline:auto;
    font-family:var(--font-sans);
    font-size:clamp(13px, 1.3vw, 15px);
    font-weight:500;
    line-height:1.55;
    text-align:center;
    text-wrap:balance;
    color:var(--cr-body);
}

/* Buttons */

.cr-btn-primary,
.cr-btn-outline,
.cr-btn-text,
.cr-btn-block{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    border-radius:999px;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.cr-btn-primary{
    padding:11px 26px;
    background:linear-gradient(135deg,#FF6600 0%,#FF8533 100%);
    box-shadow:0 4px 14px rgba(255,102,0,.28);
    color:#fff;
    border:none;
}

.cr-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,102,0,.38);
    color:#fff;
}

.cr-btn-outline{
    padding:10px 24px;
    border:1.5px solid var(--primary);
    background:#fff;
    color:var(--primary);
}

.cr-btn-outline:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(255,102,0,.25);
}

.cr-btn-text{
    padding:10px 20px;
    background:transparent;
    color:var(--ink);
}

.cr-btn-text:hover{
    color:var(--primary);
}

.cr-btn-block{
    width:100%;
    height:44px;
    background:linear-gradient(135deg,#FF6600 0%,#FF8533 100%);
    box-shadow:0 4px 14px rgba(255,102,0,.25);
    color:#fff;
    border:none;
}

.cr-btn-block:hover{
    background:linear-gradient(135deg,#E65C00 0%,#FF6600 100%);
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(255,102,0,.35);
    color:#fff;
}

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

.cr-hero{
    padding:clamp(28px, 4vw, 56px) 0 var(--space-section-sm);
    background:#FFFFFF;
}

.cr-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,604fr) minmax(0,396fr);
    column-gap:5%;
    row-gap:var(--space-block);
    align-items:start;
}

.cr-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 16px;
    border:1px solid rgba(255,102,0,.25);
    border-radius:999px;
    background:#FFF5EB;
    box-shadow:0 2px 8px rgba(255,102,0,.08);
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:700;
    color:var(--primary);
}

.cr-hero h1{
    margin-top:20px;
    font-family:var(--font-sans);
    font-size:clamp(22px, 3.2vw, 36px);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.01em;
    color:var(--ink);
}

.cr-hero-sub{
    margin-top:14px;
    font-family:var(--font-sans);
    font-size:clamp(12.5px, 1.25vw, 14.5px);
    font-weight:400;
    line-height:1.55;
    color:var(--cr-body);
}

.cr-meta{
    margin-top:24px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 24px;
}

.cr-meta-item{
    padding:10px 15px;
    border:1px solid rgba(0,0,0,.25);
    border-radius:8px;
    background:#fff;
}

.cr-meta-item strong{
    display:block;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:600;
    color:var(--ink);
}

.cr-meta-item span{
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:500;
    color:var(--ink);
}

/* Figma sizes all three CTAs identically (170.81 x 48.85) so they sit on
   one row. Equal flex children keep that at any container width. */

.cr-hero-actions{
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:20px;
}

.cr-hero-actions > a{
    flex:1 1 0;
    min-width:0;
    padding-inline:10px;
    white-space:nowrap;
}

/* --- Hero card --- */

/* Figma drops the card 143px below the top of the hero column, so its top
   edge lands beside the headline rather than level with the pill. */

.cr-hero-card{
    /* Grid items default to min-width:auto, so the card's own content
       (chip/tag rows) could refuse to shrink below its min-content width
       even though the track wants to compress it — pushing the whole row,
       and the page, wider than the viewport. min-width:0 lets it actually
       shrink to fit its track. */
    min-width:0;
    margin-top:var(--space-section-sm);
    padding:25px;
    border:1px solid var(--primary-50);
    border-radius:40px;
    background:#fff;
    box-shadow:4px 4px 4px var(--primary-25);
}

.cr-hero-card-head{
    display:flex;
    align-items:flex-start;
    gap:24px;
}

.cr-hero-card-icon{
    flex:none;
    display:grid;
    place-items:center;
    padding:10px;
    border-radius:15px;
    background:var(--primary-10);
}

.cr-hero-card-icon img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.cr-hero-card-head h2{
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.15;
    color:var(--ink);
}

.cr-hero-card-head p{
    /* A card sub-heading, not a title -- body weight. This also settles .cr-hero-card-note below, which takes its weight from here. */
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:500;
    line-height:1.2;
    color:var(--cr-muted);
}

.cr-hero-card-note{
    margin-top:10px;
    font-size:var(--fs-body)!important;
    font-weight:400;
}

/* On five of the six cards this note is a sentence and stays prose. The
   Full Stack card carries a one-line credential from its frame instead, so
   it takes a label's weight -- hence the modifier rather than a change to
   the shared rule. */

.cr-hero-card-credential{
    font-weight:600;
    color:var(--cr-muted);
}

.cr-chips{
    margin-top:32px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.cr-chip{
    flex:1 1 90px;
    padding:15px 10px;
    border:1px solid var(--primary-35);
    border-radius:15px;
    background:var(--primary-10);
    box-shadow:4px 4px 4px var(--primary-25);
    text-align:center;
}

.cr-chip strong{
    display:block;
    font-family:var(--font-sans);
    font-size:24px;
    font-weight:600;
    color:var(--ink);
}

.cr-chip span{
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:500;
    color:var(--ink);
}

/* Five tags have to sit on one row inside the card. At 16px on 16px of
   padding with a 16px gap, the longest set -- Linux, TCP/IP, OWASP, Nmap,
   Wireshark -- came to more than the card gives, and Wireshark dropped to a
   line of its own. These three numbers are what buy the row back; wrap
   stays on so a narrow window still has somewhere to go. */

.cr-tags{
    margin-top:24px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.cr-tag{
    padding:7px 12px;
    border:1px solid var(--primary-35);
    border-radius:25px;
    background:#fff;
    font-family:var(--font-sans);
    font-size:14px;
    white-space:nowrap;
    color:var(--ink);
}

.cr-hero-card .cr-btn-block{
    margin-top:24px;
}

/* --- Stats strip --- */

/* Three loose numbers sitting hard against the column's left edge read as
   leftover text under the buttons. Boxing them into a tinted strip gives
   them a shape of their own. */

/* The strip is a row of its own below the hero grid, in its own .container,
   rather than the last thing in .cr-hero-copy. It has to centre on the
   section, and from inside that column it could not: the column is the
   hero's left half, so any shift far enough to reach the section's centre
   carried the strip across the card's column — and below about 1300px the
   card still runs past the strip's row, so the two would have overlapped.
   Below the grid it has the container's full width to centre in, and sits
   under both columns instead of beside one. At desktop widths it already
   cleared the card's bottom edge, so it barely moved. */

/* The strip was width:fit-content, so it shrank to whatever the three bare
   numbers needed and sat as a small pill under a full-width hero. It is now
   a proper band: an even three-column grid up to 1000px, with each stat
   reading as a ring plus its figure rather than a stacked number. */

.cr-stats{
    /* Same token as the section's bottom padding, so the strip sits with
       equal air above and below it rather than hard under the hero row. */
    margin-top:var(--space-section-sm);
    /* Full container width, so the band's ends line up with the hero copy
       above it rather than floating as a narrower slab inside it. */
    width:100%;
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    padding:22px clamp(18px,2vw,30px);
    border:1px solid rgba(255,102,0,.22);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(255,240,230,.8) 0%,rgba(255,255,255,.7) 100%);
    box-shadow:0 12px 28px -20px rgba(255,102,0,.7);
}

/* Hairlines between the figures instead of raw whitespace. Equal columns do
   the spacing, so the rule only has to mark the boundary. */

.cr-stat + .cr-stat{
    border-left:1px solid rgba(255,102,0,.2);
}

.cr-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(12px,1.2vw,18px);
    padding:2px clamp(8px,1vw,16px);
    transition:transform var(--dur-base) var(--ease-out);
}

.cr-stat:hover{
    transform:translateY(-2px);
}

/* --- The ring --- */

/* Grid rather than absolute centring, so the icon sits on the circle's own
   centre without a translate that would have to be undone at every size. */

.cr-stat-ring{
    position:relative;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(52px,4.4vw,64px);
    height:clamp(52px,4.4vw,64px);
}

.cr-stat-ring svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    /* Starts the sweep at twelve o'clock rather than three. */
    transform:rotate(-90deg);
    overflow:visible;
}

.cr-stat-ring circle{
    fill:none;
    stroke-width:4;
    stroke-linecap:round;
}

.cr-stat-ring-track{
    stroke:rgba(255,102,0,.15);
}

/* Drawn complete here, and only hidden by js/course.js inside the branch
   that has GSAP in hand. A blocked CDN therefore leaves three finished
   rings, which is the state the animation ends in anyway. */

.cr-stat-ring-line{
    stroke:var(--primary);
}

.cr-stat-ring i{
    position:relative;
    font-size:clamp(18px,1.7vw,24px);
    color:var(--primary);
}

/* --- The figure --- */

.cr-stat-text{
    min-width:0;
}

.cr-stat strong{
    display:block;
    font-family:var(--font-sans);
    font-size:clamp(22px,2vw,30px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:.02em;
    color:var(--primary);
}

.cr-stat-label{
    display:block;
    margin-top:2px;
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:1.25;
    color:var(--ink-600);
}

/* ==========================
   OVERVIEW
========================== */

.cr-overview{
    padding:var(--space-section) 0;
}

/* The lead sits above the grid rather than inside its right-hand column, so
   it shares the heading's full width and centre line. Reading order is then
   heading, sentence, then the picture and the four blocks side by side —
   one alignment down the middle instead of copy stepping in beside a panel.

   No max-width, unlike the other section leads. This one carries a <br>
   that puts each sentence on its own line, and a 96ch cap would wrap the
   first sentence again and turn two lines into four. */

.cr-overview > .container > .cr-lead{
    margin-top:var(--space-block);
    text-align:center;
}

/* The media column gives up width so the four blocks beside it get a wider
   card. Together with the smaller body below, every block settles into
   three lines or fewer. */

.cr-overview-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:minmax(300px,400px) minmax(0,1fr);
    gap:36px;
    align-items:center;
}

.cr-overview-media,
img.cr-overview-media{
    align-self:center;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:auto;
    border-radius:20px;
    object-fit:contain;
    border:1px solid rgba(255,102,0,.18);
    box-shadow:0 4px 18px rgba(0,0,0,.06);
    background:#fff;
    display:block;
}

.cr-overview-copy{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.cr-lead{
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    line-height:1.45;
    color:var(--ink);
}

.cr-blocks{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 36px;
}

.cr-block{
    padding:15px 20px;
    border:.5px solid rgba(0,0,0,.5);
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.cr-block:hover{
    transform:translateY(-4px);
    border-color:var(--primary);
    box-shadow:var(--glow);
}

.cr-block h3{
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    color:var(--ink);
}

.cr-block p{
    margin-top:6px;
    font-family:var(--font-sans);
    /* 18px ran these to four and five lines in a 352px card. Scales with
       the card so none of them falls to four on a narrower screen. */
    font-size:clamp(14px,1.11vw,16px);
    font-weight:500;
    line-height:1.45;
    /* balance, not the pretty these paragraphs would normally take. Once a
       card wraps to two lines the house taper leaves a long line over a
       stub -- "Global Freelance Clients." alone under a full one. These are
       card fragments rather than running copy, so even lines read better,
       and balance only engages up to a handful of lines anyway. */
    text-wrap:balance;
    color:var(--cr-muted);
}

/* Sized for three badges. A fourth (Certificate) was added on 2026-09-05 and
   at 40px apart and 22px the row broke to a second line on a 1280 laptop,
   leaving one badge stranded under the other three. The gap and the type both
   come down a step, which fits all four on one line from about 1200 up; below
   that it wraps, which is the right behaviour rather than a fault. */

.cr-badges{
    margin-top:var(--space-block);
    display:flex;
    flex-wrap:wrap;
    gap:28px;
}

.cr-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-sans);
    font-size:20px;
    font-weight:500;
    color:var(--ink);
}

.cr-badge img{
    width:24px;
    height:24px;
    object-fit:contain;
}

/* ==========================
   FEATURES
========================== */

.cr-features{
    padding:var(--space-section) 0;
    background:var(--cr-cream);
}

.cr-features-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px;
}

/* Was borderless white on the cream ground, so the six cards read as soft
   blobs rather than as a grid -- their edges only showed where the hover
   shadow happened to catch. A hairline draws the boundary at rest; the
   hover state is what makes it the brand's. */

.cr-feature{
    position:relative;
    padding:28px 26px;
    border-radius:16px;
    background:#fff;
    border:1px solid var(--primary-20);
    box-shadow:0 1px 2px rgba(17,17,17,.04);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

/* The accent that draws itself across the top edge on hover. It has to be a
   pseudo-element: a border cannot be animated from scaleX(0), and animating
   a width would reflow the card. transform-origin:left is what makes it
   draw from the left rather than open from the middle, and the -1px inset
   puts it ON the hairline rather than inside it, so the two read as one
   edge instead of two stacked lines. */

.cr-feature::after{
    content:"";
    position:absolute;
    inset:-1px -1px auto;
    height:3px;
    border-radius:16px 16px 0 0;
    background:linear-gradient(90deg,var(--primary),#FFA14A);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--dur-base) var(--ease-out);
}

/* :focus-within alongside :hover -- some of these cards carry links, and a
   keyboard user should get the same edge a mouse does. */

.cr-feature:hover,
.cr-feature:focus-within{
    transform:translateY(-6px);
    border-color:var(--primary-50);
    box-shadow:0 14px 34px rgba(0,0,0,.08);
}

.cr-feature:hover::after,
.cr-feature:focus-within::after{
    transform:scaleX(1);
}

.cr-feature-icon{
    display:block;
    font-size:30px;
    line-height:1;
    /* Leans in with the card rather than riding along flat. */
    transition:transform var(--dur-base) var(--ease-out);
}

.cr-feature:hover .cr-feature-icon,
.cr-feature:focus-within .cr-feature-icon{
    transform:scale(1.12);
}

/* The boundary and its accent stay under reduced motion -- they are what
   the card reads as. Only the movement goes. */

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

    .cr-feature,
    .cr-feature::after,
    .cr-feature-icon{
        transition:none;
    }

    .cr-feature:hover,
    .cr-feature:focus-within{
        transform:none;
    }

    .cr-feature:hover .cr-feature-icon,
    .cr-feature:focus-within .cr-feature-icon{
        transform:none;
    }

}

.cr-feature h3{
    margin-top:18px;
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.35;
    color:var(--cr-ink);
}

.cr-feature p{
    margin-top:8px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:500;
    line-height:1.4;
    color:var(--cr-body);
}

/* ==========================
   SKILL STACK
========================== */

.cr-stack{
    padding:var(--space-section) 0;
}

.cr-stack-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:56px;
}

.cr-stack-card{
    padding:30px 26px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    background:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,.05);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.cr-stack-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--glow);
}

.cr-stack-card header{
    display:flex;
    align-items:center;
    gap:14px;
}

.cr-stack-card header img{
    width:30px;
    height:30px;
    border-radius:37px;
    object-fit:cover;
}

.cr-stack-card h3{
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:700;
    color:var(--ink);
}

.cr-stack-card ul{
    margin-top:22px;
    list-style:none;
    display:grid;
    gap:18px;
}

/* Each row is a hairline-separated line with an orange check. */

.cr-stack-card li{
    position:relative;
    padding:0 0 18px 34px;
    border-bottom:1px solid rgba(0,0,0,.07);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:500;
    color:var(--cr-body);
}

.cr-stack-card li:last-child{
    padding-bottom:0;
    border-bottom:0;
}

/* Solid orange disc with a white tick: the 10%-tint disc and thin orange
   glyph washed out against the card at this size. */

.cr-stack-card li::before{
    content:"\2713";
    position:absolute;
    left:0;
    top:-1px;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary);
    font-size:12px;
    font-weight:800;
    line-height:1;
    color:#fff;
}

/* ==========================
   LEARNING MODULES
========================== */

.cr-modules{
    padding:var(--space-section) 0;
    /* Opaque: this section is what GSAP pins, so anything transparent here
       would let the neighbouring sections scroll through it. */
    background:#FFFFFF;
}

.is-gsap .cr-modules{
    position:relative;
    z-index:2;
    /* Pinned, this goes position:fixed at the top of the window, and it is
       sized by its own cards (~860px). The pin is meant to be opaque —
       nothing should scroll through it — but on a window taller than the
       section the rest of the window showed the empty pin runway with the
       following sections riding up through it. Invisible at a normal window
       height, plain on a zoomed-out one (a browser at 25% gives a ~2500px
       viewport). Filling the window fixes that; centring the deck inside it
       stops the leftover height reading as a hole under the cards, which is
       what filling it alone would have looked like. At a normal height the
       section is already about as tall as the window, so this changes
       nothing there. */
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cr-modules-inner{
    /* The intro copy above had no clearance at all — the module card started
       on the very next pixel after the subtitle. */
    margin-top:var(--space-block);
    /* A prior fix here centred this as a single column, on the belief that
       "the detail panels are gone." They weren't — .cr-modstack (the
       right-side GSAP-pinned panel stack, populated from real module data
       by js/course-detail.js) is still fully built and wired, it just had
       nowhere to sit once this stopped being a grid. .cr-modules-card is
       even position:sticky specifically so it rides alongside that stack
       while it scrolls. Restored the two-column layout so the two actually
       sit side by side again, as designed. */
    display:grid;
    grid-template-columns:549px minmax(0,1fr);
    gap:64px;
    /* Top-aligned: centring pushed the short left card halfway down the
       tall stack column in the non-GSAP fallback. */
    align-items:start;
}

.cr-modules-card{
    padding:26px 24px;
    border:1px solid var(--primary);
    border-radius:25px;
    background:linear-gradient(180deg,#FFFFFF 0%,#FFFDFC 23%,#FFF2E9 100%);
}

.cr-modules-head{
    display:flex;
    align-items:center;
    gap:16px;
}

.cr-modules-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 2px 4px rgba(255,102,0,.35);
    color:#fff;
}

.cr-modules-head h3{
    font-family:var(--font-sans);
    font-size:17px;
    font-weight:700;
    color:var(--ink);
}

.cr-modules-head p{
    margin-top:2px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:500;
    color:var(--cr-body);
}

.cr-modules-head p span + span{
    padding-left:14px;
    border-left:1px solid rgba(0,0,0,.2);
}

.cr-modules-list{
    margin-top:22px;
    list-style:none;
    display:grid;
    /* Rows need real air between them — at 9px they read as one block. */
    gap:14px;
}

.cr-module{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:48px;
    padding:0 16px;
    border:1px solid rgba(255,102,0,.18);
    border-radius:10px;
    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);
}

.cr-module:hover{
    transform:translateX(5px);
    border-color:var(--primary);
    box-shadow:var(--glow);
}

.cr-module-num{
    flex:none;
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:8px;
    background:rgba(255,102,0,.08);
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:700;
    color:var(--primary);
}

.cr-module-name{
    flex:1;
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:500;
    color:var(--ink);
}

.cr-module-time{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:500;
    color:var(--cr-faint);
}

.cr-modules-cta{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 14px;
    border-radius:5px;
    background:rgba(255,102,0,.08);
    text-decoration:none;
    transition:background var(--dur-base) var(--ease-out);
}

.cr-modules-cta:hover{
    background:rgba(255,102,0,.16);
}

.cr-modules-cta-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
}

.cr-modules-cta strong{
    display:block;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
    color:var(--primary);
}

/* Scoped past the icon: a bare `.cr-modules-cta span` also matched the
   icon span and its flex:1 stretched the circle into an ellipse. */

.cr-modules-cta > span:not(.cr-modules-cta-icon){
    flex:1;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:500;
    color:var(--ink);
}

.cr-modules-cta > i{
    color:var(--ink);
}

.cr-modules-aside p{
    margin-top:20px;
    font-family:var(--font-sans);
    font-size:clamp(16px,1.7vw,22px);
    font-weight:400;
    line-height:1.5;
    color:var(--cr-muted);
}

/* ==========================
   TOOLS
========================== */

.cr-tools{
    padding:var(--space-section) 0;
}

.cr-tools-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    justify-content:center;
    gap:24px 28px;
    max-width:1160px;
    margin-left:auto;
    margin-right:auto;
}

.cr-tool{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:58px;
    padding:8px 16px 8px 10px;
    border:1.4px solid rgba(255,197,146,.45);
    border-radius:2px 30px 2px 2px;
    background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,.02);
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.cr-tool:hover{
    transform:translateY(-3px);
    border-color:var(--primary);
    box-shadow:0 8px 20px rgba(255,102,0,.12);
}

.cr-tool img{
    position:static;
    width:42px;
    height:42px;
    padding:6px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    object-fit:contain;
    flex-shrink:0;
    display:block;
}

.cr-tool-label{
    display:flex;
    align-items:center;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:color var(--dur-base) var(--ease-out);
}

.cr-tool:hover .cr-tool-label{
    color:var(--primary);
}

/* ==========================
   SALARY / ROLES
========================== */

/* This pair carried a hand-tuned, tighter seam for one day, because the old
   --space-section stacked ~208px of white between the role cards and the
   partners band. The token itself came down on 2026-09-05, which fixes the
   same problem everywhere, so the override is gone and this seam matches
   every other one on the page again. Keeping both would have cut it twice. */

.cr-salary{
    padding:var(--space-section) 0;
}

.cr-salary-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:348px minmax(0,1fr);
    gap:80px;
    align-items:center;
}

/* --- Flip card --- */

.cr-flip{
    height:380px;
    perspective:1400px;
    outline:none;
}

.cr-flip-inner{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform var(--dur-slow) var(--ease-out);
}

/* Hover only where a real pointer exists. On touch, a tapped :hover sticks
   until you tap elsewhere, which made the card feel stuck half-broken. */

@media (hover:hover){
    .cr-flip:hover .cr-flip-inner{
        transform:rotateY(180deg);
    }
}

/* Keyboard, and the tap toggle applied by js/course.js on touch devices. */

.cr-flip:focus-visible .cr-flip-inner,
.cr-flip.is-flipped .cr-flip-inner{
    transform:rotateY(180deg);
}

.cr-flip-face{
    position:absolute;
    inset:0;
    padding:28px 26px;
    border-radius:28px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    overflow:hidden;
}

.cr-flip-front{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:6px;
    background:var(--primary);
    color:#fff;
    transform:rotateY(180deg);
}

.cr-flip-label{
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:0.9;
    margin:0;
}

.cr-flip-figure{
    font-family:var(--font-sans);
    font-size:clamp(30px,3.2vw,42px);
    font-weight:800;
    line-height:1.05;
    margin:2px 0;
}

.cr-flip-figure em{
    font-style:normal;
    font-size:.52em;
    font-weight:600;
}

.cr-flip-front p{
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:400;
    line-height:1.35;
    opacity:0.92;
    margin:0;
}

.cr-flip-front p strong{
    font-weight:600;
}

.cr-flip-tags{
    margin-top:2px;
    display:flex;
    flex-wrap:wrap;
    gap:6px 8px;
}

.cr-flip-tags span{
    padding:4px 10px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:14px;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:500;
    line-height:1.2;
    white-space:nowrap;
}

.cr-flip-back{
    display:grid;
    place-items:center;
    padding:36px;
    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
        url("/assets/images/figma/hero-1.webp") center/cover no-repeat;
    transform:rotateY(0deg);
}

.cr-flip-back span{
    /* 36px here outshouted every section title on the page. Weight stays under 600: this is a full question, not a label. */
    font-family:var(--font-sans);
    font-size:var(--fs-card);
    font-weight:500;
    letter-spacing:.04em;
    line-height:1.2;
    text-align:center;
    color:#fff;
}

/* --- Role cards --- */

.cr-roles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:58px 24px;
}

.cr-role{
    padding:20px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.cr-role:hover{
    transform:translateY(-6px);
    border-color:var(--primary-35);
    box-shadow:var(--glow);
}

.cr-role h4{
    /* C2 by measure: these cards are 294px against .cr-related's 319px, so C1 would push the longest role onto a third line. */
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:600;
    color:var(--ink);
}

.cr-role-pay{
    display:block;
    margin-top:4px;
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:600;
    color:var(--primary);
}

.cr-role p{
    margin-top:8px;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:500;
    line-height:1.45;
    color:var(--cr-muted);
}

/* ==========================
   HIRING PARTNERS
========================== */

.cr-partners{
    padding:var(--space-section) 0;
    background:var(--cr-ivory);
}

/* Figma node 3635:3373 lays these out as a static 2x6 grid of 178x70 cards
   (1148px row = 6x178 + 5x16 gap), not a scrolling rail. */
.cr-partners-rail{
    margin-top:var(--space-block);
}

.cr-partners-track{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:67px 16px;
    max-width:1148px;
    margin-inline:auto;
}

.cr-partner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:70px;
    padding:20px 12px;
    border:1px solid rgba(0,0,0,.15);
    border-radius:12px;
    background:#fff;
    font-family:var(--font-sans);
    font-size:14px;
    line-height:21px;
    font-weight:600;
    color:var(--cr-muted);
    white-space:nowrap;
}

.cr-partner img{
    flex:none;
    width:28px;
    height:28px;
    object-fit:contain;
}

@media (max-width:1080px){
    .cr-partners-track{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:24px 16px;
    }
}

@media (max-width:720px){
    .cr-partners-track{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px 12px;
    }
    .cr-partner{
        padding:20px 8px;
    }
}

/* ==========================
   RELATED COURSES
========================== */

.cr-related-sec{
    padding:var(--space-section) 0;
}

.cr-related-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
}

.cr-related{
    display:block;
    border:1px solid rgba(255,102,0,.14);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    text-decoration:none;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.cr-related:hover{
    transform:translateY(-6px);
    border-color:var(--primary-35);
    box-shadow:var(--glow);
}

.cr-related img{
    width:100%;
    height:170px;
    object-fit:cover;
    transition:transform var(--dur-slow) var(--ease-out);
}

.cr-related:hover img{
    transform:scale(1.06);
}

.cr-related div{
    padding:18px 16px 22px;
}

.cr-related h4{
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--cr-ink);
}

.cr-related span{
    display:block;
    margin-top:6px;
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:500;
    color:var(--cr-body);
}

/* ==========================
   ENROL CTA
========================== */

.cr-cta{
    padding:var(--space-section) 0;
}

.cr-cta-inner{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    align-items:center;
    gap:clamp(24px,3vw,48px);
    padding:clamp(40px,4.2vw,60px) clamp(26px,3.4vw,52px);
    border-radius:40px;
    background:
        radial-gradient(circle at 18% 0%,#FFE2CF 0%,#FFF8F2 58%,#FFFFFF 100%);
    border:1px solid var(--primary-25);
    text-align:left;
}

.cr-cta-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}

/* Three buttons no longer fit one row in half a panel, so the tertiary one
   wraps below. As a white pill on the peach it read as a button that had
   fallen off the row; underlined, it reads as the third-choice link it is. */

.cr-cta-actions .cr-btn-text{
    padding-left:2px;
    padding-right:2px;
    background:transparent;
    text-decoration:underline;
    text-underline-offset:5px;
    text-decoration-thickness:1px;
    text-decoration-color:var(--primary-35);
}

/* The drop shadow scales with the button. At the full 3px/5.3px/9.6px it
   was throwing a hero-sized shadow off a smaller control, which is what
   made the primary look like it was floating away from the row. */

.cr-cta-actions .cr-btn-primary{
    box-shadow:1px 2px 5px rgba(0,0,0,.18);
}

.cr-cta-actions .cr-btn-primary:hover{
    box-shadow:1px 4px 10px rgba(255,102,0,.28);
}

.cr-cta-flag{
    padding:8px 18px;
    border-radius:25px;
    background:var(--primary-10);
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary);
}

.cr-cta-inner h2{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
}

/* 640px held this to five lines on every course page. The block is centred
   in a 40px-radius panel that is far wider than that, so the measure had
   room to grow. */

/* Was its own size and weight -- 22px Regular in --cr-muted, against 17px
   Medium in --cr-body everywhere else on the page -- so the closing band
   read as if it had been set by someone else. It takes the same lead type
   as every other intro paragraph now. */

.cr-cta-copy > p{
    max-width:min(64ch,100%);
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:500;
    line-height:1.6;
    text-wrap:pretty;
    color:var(--cr-body);
}

.cr-cta-actions{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    /* Closes with the buttons: 20px was set around the larger pair. */
    gap:12px;
}

/* The band's buttons run smaller than the rest of the page's. Its labels are
   the longest anywhere on the page -- "Start Building Your Marketing Career"
   -- and since the copy took half the panel they sit in a column half the
   width the old centred layout gave them, where 15.6/32 made the primary a
   slab that ran nearly the full column.

   One block, not two. This section had grown a second set of these selectors
   further up the file at 9x18 while this one set 11x20 - same specificity,
   so the later simply won and the earlier looked ignored. Folded together at
   the smaller of the two, which is the size the pair was meant to be. */

.cr-cta-actions .cr-btn-primary,
.cr-cta-actions .cr-btn-outline,
.cr-cta-actions .cr-btn-text{
    font-size:14px;
    font-weight:700;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
}

.cr-cta-actions .cr-btn-primary{
    padding:12px 24px;
}

.cr-cta-actions .cr-btn-outline{
    padding:12px 24px;
}

.cr-cta-actions .cr-btn-text{
    padding:12px 16px;
}

.cr-trusts{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.cr-trust{
    padding:8px 18px;
    border:1px solid #FFD8BF;
    border-radius:40px;
    background:#FFF7F2;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:500;
    color:var(--cr-body);
}

/* --- Closing-band stage -------------------------------------------------

   The band used to be a centred column of text on an empty panel. The scene
   beside it is preserve-3d: the glow, the three rings, the illustration and
   the chips each sit at their own translateZ, so the tilt js/course.js feeds
   in through --rx / --ry parallaxes them against each other instead of
   sliding one flat layer. A WebGL canvas would have bought the same look for
   ~150KB of library, and the photo would still have been a plane in it.

   Everything keeps floating on its own with no pointer, and the whole scene
   is decorative -- the chips repeat what the column beside them already
   says in real text. */

.cr-cta-stage{
    position:relative;
    justify-self:center;
    width:min(100%,440px);
    aspect-ratio:1/1;
    perspective:1200px;
}

.cr-cta-scene{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform 600ms var(--ease-out);
}

.cr-cta-glow{
    position:absolute;
    top:50%;
    left:50%;
    width:76%;
    aspect-ratio:1;
    border-radius:50%;
    transform:translate(-50%,-50%) translateZ(-90px);
    background:radial-gradient(circle,var(--primary-25) 0%,rgba(255,102,0,0) 68%);
    animation:cr-cta-pulse 6s ease-in-out infinite;
}

.cr-cta-ring{
    position:absolute;
    top:50%;
    left:50%;
    width:var(--size);
    aspect-ratio:1;
    border-radius:50%;
    transform:translate(-50%,-50%) translateZ(var(--z));
    animation:cr-cta-spin var(--spin) linear infinite;
}

.cr-cta-ring-1{
    --size:100%;
    --z:-70px;
    --spin:38s;
    border:1.5px dashed var(--primary-35);
}

.cr-cta-ring-2{
    --size:78%;
    --z:-40px;
    --spin:26s;
    border:1px solid var(--primary-20);
    animation-direction:reverse;
}

.cr-cta-ring-3{
    --size:56%;
    --z:-16px;
    --spin:21s;
    border:2px dotted var(--primary-35);
}

.cr-cta-art{
    position:absolute;
    top:50%;
    left:50%;
    width:86%;
    height:auto;
    transform:translate(-50%,-50%) translateZ(50px);
    filter:drop-shadow(0 30px 44px rgba(255,102,0,.20));
    animation:cr-cta-float 7s ease-in-out infinite;
}

.cr-cta-chip{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 15px;
    border-radius:999px;
    border:1px solid var(--primary-25);
    background:#fff;
    box-shadow:0 12px 26px rgba(0,0,0,.10);
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    color:var(--cr-ink);
    transform:translateZ(var(--z));
    animation:cr-cta-bob var(--bob) ease-in-out infinite;
    animation-delay:var(--delay,0s);
}

.cr-cta-chip i{
    font-size:12px;
    color:var(--primary);
}

.cr-cta-chip-1{
    top:5%;
    left:-2%;
    --z:120px;
    --bob:5.5s;
}

.cr-cta-chip-2{
    top:62%;
    right:-6%;
    --z:100px;
    --bob:6.5s;
    --delay:-2s;
}

.cr-cta-chip-3{
    bottom:7%;
    left:3%;
    --z:140px;
    --bob:6s;
    --delay:-3.5s;
}

@keyframes cr-cta-spin{
    from{transform:translate(-50%,-50%) translateZ(var(--z)) rotate(0deg);}
    to{transform:translate(-50%,-50%) translateZ(var(--z)) rotate(360deg);}
}

@keyframes cr-cta-float{
    0%,100%{transform:translate(-50%,-50%) translateZ(50px);}
    50%{transform:translate(-50%,calc(-50% - 12px)) translateZ(50px);}
}

@keyframes cr-cta-bob{
    0%,100%{transform:translateZ(var(--z)) translateY(0);}
    50%{transform:translateZ(var(--z)) translateY(-10px);}
}

@keyframes cr-cta-pulse{
    0%,100%{opacity:.5;transform:translate(-50%,-50%) translateZ(-90px) scale(1);}
    50%{opacity:.85;transform:translate(-50%,-50%) translateZ(-90px) scale(1.07);}
}

/* One column below the point where the copy stops having room to sit beside
   the scene. The copy re-centres to the layout it had before. */

@media (max-width:980px){

    .cr-cta-inner{
        grid-template-columns:minmax(0,1fr);
        text-align:center;
    }

    .cr-cta-copy{
        align-items:center;
    }

    .cr-cta-actions,
    .cr-trusts{
        justify-content:center;
    }

    .cr-cta-stage{
        width:min(100%,340px);
    }
}

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

    .cr-cta-scene{
        transition:none;
        transform:none;
    }

    .cr-cta-glow,
    .cr-cta-ring,
    .cr-cta-art,
    .cr-cta-chip{
        animation:none;
    }
}

/* --- Curriculum sub --- */

.cr-curriculum-sub{
    margin-top:22px;
    /* Same measure .cr-serif-sub already carries, and for the same reason:
       with none of its own this ran the container's full 1400px, about 165
       characters a line, and the sentence broke wherever it happened to
       land. The two leads sit in sections one after another, so they also
       have to agree — one capped and one not is what reads as the sections
       being misaligned with each other. */
    max-width:min(96ch,100%);
    margin-inline:auto;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:500;
    line-height:1.55;
    text-align:center;
    color:var(--cr-body);
}

/* --- Module stack -------------------------------------------------------

   Figma overlaps the six module cards on the y-axis (module 1 at y=-70,
   module 2 at y=280, and so on) so they pile up as the page scrolls. That
   is a sticky stack: each card pins just below the one before it, so the
   headers collect into a deck at the top while the card currently in view
   still shows its full content.

   --i is the card index, stamped in the markup.
------------------------------------------------------------------------ */

.cr-modstack{
    --stack-top:110px;      /* clears the sticky navbar */
    /* One collapsed strip: the 44px header plus 4px of blank panel padding,
       so a stuck card shows its whole title row and never lands mid-content. */
    --stack-step:48px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.cr-acc{
    position:sticky;
    top:calc(var(--stack-top) + var(--i) * var(--stack-step));
    /* Figma: white fill, 1px rgba(255,102,0,.5) rule, 40px radius, no shadow. */
    border:1px solid var(--primary-50);
    border-radius:40px;
    /* Opaque so a card fully covers the one it slides over. */
    background:#fff;
    overflow:hidden;
    transition:border-color var(--dur-base) var(--ease-out);
}

.cr-acc:hover{
    border-color:var(--primary);
}

.cr-acc-head{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:11px 22px;
}

/* Figma draws a 1px rgba(255,102,0,.35) rule under the header. Inset to 22px
   so the rule clears the 40px corner arc of the card stacked on top of it —
   at 4px it poked through the curve and read as sliced-off content. */

.cr-acc-panel::before{
    content:"";
    display:block;
    height:1px;
    margin:0 22px 12px;
    background:rgba(255,102,0,.35);
}

.cr-acc-title{
    flex:none;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    color:var(--ink);
}

.cr-acc-weeks{
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:600;
    color:var(--primary);
}

/* The top padding is the blank band the next card's rounded corners sit over,
   so nothing but white shows through the seam. */
.cr-acc-panel{
    padding:12px 22px 18px;
}

.cr-acc-desc{
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:500;
    line-height:1.4;
    color:var(--cr-body);
}

.cr-acc-list{
    margin-top:12px;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 20px;
}

.cr-acc-list li{
    position:relative;
    padding-left:16px;
    font-family:var(--font-sans);
    font-size:12.5px;
    line-height:1.35;
    color:var(--ink);
}

.cr-acc-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--primary);
}

.cr-acc-deliverable{
    margin-top:14px;
    padding:8px 14px;
    border-radius:12px;
    background:var(--primary-10);
    font-family:var(--font-sans);
    font-size:12.5px;
    line-height:1.4;
    color:var(--ink);
}

/* The left-hand list indexes the stack. */

.cr-module{
    cursor:pointer;
}

.cr-module.is-active{
    border-color:var(--primary);
    background:rgba(255,102,0,.06);
}

/* The left card rides along with the stack instead of scrolling away. */

.cr-modules-card{
    position:sticky;
    top:110px;
}

/* The stack needs stack-top + (n-1) collapsed strips + one whole card of
   height at once — roughly 610px for a six-module course. Below that the
   open card's content runs off the bottom of the window, so trade the
   effect away and let the cards scroll normally. Nothing gets clipped. */

@media (max-height:820px){

    .cr-modstack{
        --stack-top:84px;
    }

    .cr-modules-card{
        top:84px;
    }

}

@media (max-height:640px){

    .cr-acc,
    .cr-modules-card{
        position:static;
    }

}

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

    .cr-acc,
    .cr-modules-card{
        position:static;
    }

}

/* --- GSAP stage mode ----------------------------------------------------

   js/course.js adds .is-gsap to <body> only once GSAP and ScrollTrigger
   have loaded. Until then (or if the CDN is blocked) the sticky stack above
   is what renders, so the section always works.
------------------------------------------------------------------------ */

.cr-stack-stage{
    position:relative;
}

.is-gsap .cr-stack-stage{
    /* Deepest card sits at 5 x 44px, so allow for that plus its own
       (now shorter) height. */
    min-height:520px;
}

.is-gsap .cr-acc{
    position:absolute;
    left:0;
    right:0;
    /* top / yPercent / z-index are driven by GSAP. */
}

.is-gsap .cr-modules-card{
    position:static;
}

/* ==========================
   CERTIFICATE
========================== */

/* Same 68.52 x 96.34 graph-paper lattice as .int-cert on the internship
   page — this section was missing it while every other "Certification"
   block on the site had it. */
/* This whole section is matched to the internship page's certificate block —
   same section padding, same column split, same frame size and same copy
   scale, so the two read as one component across the site. */

.cr-cert{
    padding:var(--space-section-sm) 0;
    background:
        repeating-linear-gradient(0deg,rgba(255,102,0,.07) 0 1px,transparent 1px 96.34px),
        repeating-linear-gradient(90deg,rgba(255,102,0,.07) 0 1px,transparent 1px 68.52px),
        radial-gradient(circle at 5% 11%,#FFE0CC 0%,#FFFFFF 100%);
}

.cr-cert-inner{
    display:grid;
    grid-template-columns:minmax(0,500px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

.cr-cert-copy h2{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.12;
    color:var(--ink);
}

.cr-cert-copy > p{
    margin-top:16px;
    /* This is the column's whole body now that the bullet list is gone, so it
       needs a measure of its own - the copy track runs wider than a 15px
       paragraph wants to be read at. */
    max-width:58ch;
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.7;
    /* Justified so the four lines stack with both edges level. text-wrap
       stays off it: pretty and justify pull against each other, and with a
       measure this tight pretty is what leaves a short line in the middle. */
    text-align:justify;
    color:var(--ink-800);
}

/* The three certificate buttons were sized for a 20px label and ran much
   larger than every other control on the page. They share one shrunk size
   and one hover treatment: a lift plus a sheen that sweeps across the face. */

.cr-cert-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    margin-top:24px;
    padding:10px 24px;
    border-radius:999px;
    background:linear-gradient(135deg,#FF6600 0%,#FF8533 100%);
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(255,102,0,.28);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out);
}

.cr-cert-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,102,0,.38);
}

.cr-cert-btn:active{
    transform:translateY(-1px);
}

/* The frame tips toward the cursor. js/course.js only writes --tilt-x/--tilt-y;
   CSS owns everything else, so with the script blocked the frame simply sits
   flat instead of breaking. The tilt lives on the frame, not on .cr-cert-media
   — that carries data-reveal="right", whose reveal animates transform and
   would cancel the tilt. */

.cr-cert-media{
    perspective:1200px;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.cr-cert-frame{
    box-sizing:border-box;
    width:100%;
    /* Unbounded it filled the whole right column and made the certificate
       the tallest thing on the page. Same cap as the internship frame. */
    max-width:600px;
    min-width:0;
    padding:18px;
    border:2px solid var(--primary);
    border-radius:var(--r-40);
    background:#fff;
    transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
    will-change:transform;
}

/* Track the cursor closely while hovering; the slower transition above is
   what eases the frame back to flat once the pointer leaves. */

.cr-cert-frame.is-tilting{
    transition:transform .12s linear, box-shadow .3s var(--ease-out);
    box-shadow:0 26px 60px -28px rgba(255,102,0,.55);
}

@media (prefers-reduced-motion:reduce){
    .cr-cert-frame{
        transform:none;
        transition:none;
    }
}

.cr-cert-frame img{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
}

.cr-cert-actions{
    margin-top:24px;
    display:flex;
    justify-content:center;
    gap:16px;
}

.cr-cert-preview,
.cr-cert-enroll{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    padding:9px 24px;
    height:40px;
    border-radius:999px;
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.cr-cert-preview{
    background:linear-gradient(135deg,#FF6600 0%,#FF8533 100%);
    box-shadow:0 4px 14px rgba(255,102,0,.25);
    color:#fff;
}

.cr-cert-enroll{
    border:1.5px solid var(--primary);
    background:#fff;
    color:var(--primary);
}

/* The outlined one fills in on hover so the pair reads as one control set
   rather than two unrelated states. */

.cr-cert-enroll:hover{
    background:var(--primary);
    color:#fff;
}

.cr-cert-preview:hover,
.cr-cert-enroll:hover{
    transform:translateY(-3px);
    box-shadow:var(--glow);
}

.cr-cert-preview:active,
.cr-cert-enroll:active{
    transform:translateY(-1px);
}

/* Sheen sweep, shared by all three. It is a positioned pseudo-element, so
   it paints over the label — which is what a gloss should do. Keep it
   translucent and keep pointer-events off it. It parks off the left edge
   and only moves while hovered. */

.cr-cert-btn::after,
.cr-cert-preview::after,
.cr-cert-enroll::after{
    content:"";
    position:absolute;
    top:0;
    left:-140%;
    width:60%;
    height:100%;
    transform:skewX(-22deg);
    background:linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 100%);
    pointer-events:none;
}

.cr-cert-btn:hover::after,
.cr-cert-preview:hover::after,
.cr-cert-enroll:hover::after{
    animation:cr-cert-sheen .75s var(--ease-out);
}

@keyframes cr-cert-sheen{
    to{ left:140%; }
}

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

    .cr-cert-btn:hover::after,
    .cr-cert-preview:hover::after,
    .cr-cert-enroll:hover::after{
        animation:none;
    }

}

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

@media (max-width:1200px){

    .cr-hero-inner,
    .cr-overview-grid,
    .cr-salary-grid,
    .cr-cert-inner{
        grid-template-columns:1fr;
    }

    .cr-hero-card{
        margin-top:0;
        max-width:600px;
        margin-inline:auto;
        width:100%;
    }

    .is-gsap .cr-modules,
    .cr-modules{
        min-height:auto !important;
        position:relative !important;
        display:block !important;
        padding:var(--space-section) 0 !important;
    }

    .cr-modules-inner{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
    }

    .cr-modules-card{
        position:static !important;
        top:auto !important;
        width:100% !important;
    }

    .cr-modstack{
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
        position:static !important;
    }

    .cr-stack-stage,
    .is-gsap .cr-stack-stage{
        min-height:auto !important;
        position:static !important;
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
    }

    .cr-acc,
    .is-gsap .cr-acc{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        opacity:1 !important;
        border-radius:20px !important;
        margin-bottom:0 !important;
    }

    .cr-overview-media,
    img.cr-overview-media{
        width:100%;
        max-width:480px;
        margin-inline:auto;
        height:auto;
        max-height:none;
        object-fit:contain;
        border-radius:18px;
    }

    .cr-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .cr-roles{
        gap:16px;
    }

    .cr-tools-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:14px;
    }

    .cr-partners-track{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:14px;
    }

}

@media (max-width:900px){

    .cr-features-grid,
    .cr-roles,
    .cr-related-grid,
    .cr-blocks,
    .cr-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .cr-stack-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .cr-tools-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
    }

    .cr-partners-track{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
    }

    .cr-hero-actions{
        flex-wrap:wrap;
        gap:12px;
    }

    .cr-hero-actions > a{
        flex:1 1 160px;
        min-height:48px;
        padding:13px 18px;
    }

    .cr-flip{
        height:320px;
        cursor:pointer;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .cr-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        padding:14px 12px;
        gap:8px;
    }

    .cr-stat{
        padding:2px 8px;
        gap:8px;
        justify-content:center;
    }

    .cr-stat strong{
        font-size:clamp(16px,2.2vw,22px);
    }

    .cr-stat-label{
        font-size:11px;
    }

    .cr-stat-ring{
        width:42px;
        height:42px;
    }

    .cr-stat-ring i{
        font-size:15px;
    }

}

@media (max-width:640px){

    /* Section Headings & Hero Titles */
    .cr-title,
    .cr-serif,
    .cr-cta-inner h2,
    .cr-cert-copy h2{
        font-size:clamp(20px,5.2vw,25px);
        line-height:1.24;
        letter-spacing:-.01em;
        text-align:center;
    }

    .cr-title-left{
        text-align:center;
    }

    .cr-serif-sub,
    .cr-lead,
    .cr-curriculum-sub,
    .cr-hero-sub,
    .cr-cta-copy > p,
    .cr-cert-copy > p{
        font-size:clamp(13px,3.2vw,14.5px);
        line-height:1.55;
        margin-top:10px;
        text-align:center;
        color:var(--cr-body);
    }

    .cr-hero{
        padding:22px 0 18px;
    }

    .cr-hero-copy{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .cr-hero h1{
        font-size:clamp(22px,6vw,28px);
        line-height:1.2;
        letter-spacing:-.01em;
        margin-top:14px;
        text-align:center;
    }

    .cr-pill{
        font-size:11.5px;
        padding:6px 14px;
    }

    /* Hero actions */
    .cr-hero-actions{
        display:flex;
        flex-direction:row;
        align-items:stretch;
        justify-content:center;
        gap:10px;
        width:100%;
        margin-top:18px;
    }

    .cr-hero-actions > a{
        flex:1 1 0;
        min-width:0;
        min-height:48px;
        padding:13px 14px;
        font-size:clamp(12px, 2.8vw, 13.5px);
        font-weight:700;
        text-align:center;
        justify-content:center;
        white-space:nowrap;
        border-radius:999px;
    }

    /* Hero Card */
    .cr-hero-card{
        padding:18px 16px;
        border-radius:18px;
        margin-top:18px;
    }

    .cr-hero-card-head{
        gap:12px;
        align-items:center;
    }

    .cr-hero-card-icon{
        padding:7px;
        border-radius:10px;
    }

    .cr-hero-card-icon img{
        width:34px;
        height:34px;
    }

    .cr-hero-card-head h2{
        font-size:16px;
        font-weight:700;
        line-height:1.24;
    }

    .cr-hero-card-head p{
        font-size:13px;
        line-height:1.35;
    }

    .cr-hero-card-note{
        font-size:12px !important;
        line-height:1.45;
        margin-top:5px;
    }

    .cr-chips{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:14px;
    }

    .cr-chip{
        padding:8px 8px;
        border-radius:10px;
    }

    .cr-chip strong{
        font-size:16px;
    }

    .cr-chip span{
        font-size:11px;
    }

    .cr-tags{
        gap:6px;
        margin-top:12px;
        justify-content:center;
    }

    .cr-tag{
        font-size:11.5px;
        padding:5px 12px;
        border-radius:999px;
    }

    .cr-hero-card .cr-btn-block{
        height:44px;
        font-size:14px;
        margin-top:14px;
    }

    /* Hero Meta */
    .cr-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:16px;
        width:100%;
    }

    .cr-meta-item{
        padding:10px 12px;
        border-radius:10px;
        text-align:center;
    }

    .cr-meta-item strong{
        font-size:13.5px;
        font-weight:700;
    }

    .cr-meta-item span{
        font-size:10px;
        font-weight:600;
        color:var(--cr-faint);
    }

    /* Stats Strip */
    .cr-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
        padding:12px 8px;
        border-radius:14px;
        margin-top:18px;
    }

    .cr-stat{
        padding:4px 6px;
        gap:6px;
        justify-content:center;
    }

    .cr-stat + .cr-stat{
        border-left:1px solid rgba(255,102,0,.2);
        border-top:none;
    }

    .cr-stat-ring{
        width:36px;
        height:36px;
    }

    .cr-stat-ring i{
        font-size:13px;
    }

    .cr-stat strong{
        font-size:clamp(15px,3.8vw,18px);
        font-weight:800;
    }

    .cr-stat-label{
        font-size:10.5px;
        font-weight:600;
        letter-spacing:0;
    }

    /* Overview Section */
    .cr-overview{
        padding:26px 0;
    }

    .cr-overview-grid{
        gap:16px;
        margin-top:14px;
    }

    .cr-overview-media,
    img.cr-overview-media{
        width:100%;
        max-width:100%;
        height:auto;
        max-height:none;
        border-radius:16px;
        object-fit:contain;
        display:block;
        box-shadow:0 4px 14px rgba(255,102,0,.15);
        border:1px solid rgba(255,102,0,.25);
    }

    .cr-blocks{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:14px;
    }

    .cr-block{
        padding:12px;
        border-radius:12px;
    }

    .cr-block h3{
        font-size:13.5px;
        font-weight:700;
    }

    .cr-block p{
        font-size:12px;
        line-height:1.45;
        margin-top:4px;
        color:var(--cr-faint);
    }

    .cr-badges{
        gap:8px 12px;
        justify-content:center;
        margin-top:14px;
    }

    .cr-badge{
        font-size:12px;
        gap:6px;
    }

    .cr-badge img{
        width:18px;
        height:18px;
    }

    /* Features Grid (6 Cards Side-by-Side) */
    .cr-features{
        padding:26px 0;
    }

    .cr-features-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:16px;
    }

    .cr-feature{
        padding:14px 12px;
        border-radius:14px;
    }

    .cr-feature-icon{
        font-size:22px;
    }

    .cr-feature h3{
        font-size:13.5px;
        font-weight:700;
        margin-top:8px;
        line-height:1.35;
    }

    .cr-feature p{
        font-size:12px;
        line-height:1.45;
        margin-top:4px;
        color:var(--cr-faint);
    }

    /* Skill Stack Cards */
    .cr-stack{
        padding:26px 0;
    }

    .cr-stack-grid{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:16px;
    }

    .cr-stack-card{
        padding:16px 14px;
        border-radius:16px;
    }

    .cr-stack-card header{
        gap:10px;
    }

    .cr-stack-card header img{
        width:24px;
        height:24px;
    }

    .cr-stack-card h3{
        font-size:15px;
        font-weight:700;
    }

    .cr-stack-card ul{
        margin-top:12px;
        gap:9px;
    }

    .cr-stack-card li{
        padding:0 0 8px 24px;
        font-size:12.5px;
        line-height:1.45;
    }

    .cr-stack-card li::before{
        width:16px;
        height:16px;
        font-size:9px;
    }

    /* Learning Modules */
    .cr-modules{
        padding:26px 0;
    }

    .cr-modules-inner{
        display:flex !important;
        flex-direction:column !important;
        margin-top:16px;
        gap:16px;
    }

    .cr-modules-card{
        position:static !important;
        top:auto !important;
        padding:16px 14px;
        border-radius:16px;
    }

    .cr-modules-head{
        gap:12px;
    }

    .cr-modules-icon{
        width:36px;
        height:36px;
        font-size:15px;
    }

    .cr-modules-head h3{
        font-size:15px;
        font-weight:700;
    }

    .cr-modules-head p{
        font-size:12px;
        gap:8px;
    }

    .cr-modules-list{
        margin-top:14px;
        gap:9px;
    }

    .cr-module{
        min-height:42px;
        padding:0 12px;
        gap:10px;
        border-radius:10px;
    }

    .cr-module-num{
        width:24px;
        height:24px;
        font-size:11.5px;
        border-radius:7px;
    }

    .cr-module-name{
        font-size:13px;
        font-weight:600;
    }

    .cr-module-time{
        font-size:11.5px;
    }

    .cr-modules-cta{
        padding:10px 12px;
        gap:10px;
        border-radius:10px;
    }

    .cr-modules-cta-icon{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .cr-modules-cta strong{
        font-size:13.5px;
    }

    .cr-modules-cta > span:not(.cr-modules-cta-icon){
        font-size:12px;
    }

    /* Curriculum Accordion Cards */
    .cr-modstack,
    .cr-stack-stage,
    .is-gsap .cr-stack-stage{
        display:flex !important;
        flex-direction:column !important;
        position:static !important;
        min-height:auto !important;
        gap:12px !important;
        width:100% !important;
    }

    .cr-acc,
    .is-gsap .cr-acc{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        opacity:1 !important;
        border-radius:14px !important;
        border:1px solid var(--primary-35) !important;
        box-shadow:0 2px 8px rgba(0,0,0,.03) !important;
        margin-bottom:0 !important;
    }

    .cr-acc-head{
        padding:10px 14px;
        min-height:42px;
        gap:10px;
    }

    .cr-acc-title{
        font-size:14.5px;
        font-weight:700;
    }

    .cr-acc-weeks{
        font-size:12.5px;
    }

    .cr-acc-panel{
        padding:12px 14px 16px;
    }

    .cr-acc-panel::before{
        margin:0 12px 10px;
    }

    .cr-acc-desc{
        font-size:13px;
        line-height:1.48;
    }

    .cr-acc-list{
        grid-template-columns:1fr;
        gap:8px;
        margin-top:10px;
    }

    .cr-acc-list li{
        font-size:12.5px;
        line-height:1.45;
        padding-left:14px;
    }

    .cr-acc-deliverable{
        font-size:12px;
        padding:8px 12px;
        margin-top:10px;
        border-radius:8px;
    }

    /* Tools Section */
    .cr-tools{
        padding:26px 0;
    }

    .cr-tools-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        margin-top:16px;
    }

    .cr-tool{
        padding:7px 10px;
        min-height:42px;
        border-radius:10px;
        gap:8px;
    }

    .cr-tool img{
        width:24px;
        height:24px;
        padding:2px;
        border-radius:5px;
    }

    .cr-tool-label{
        font-size:12px;
        font-weight:600;
    }

    /* Salary / Roles Section */
    .cr-salary{
        padding:26px 0;
    }

    .cr-salary-grid{
        gap:16px;
        margin-top:16px;
    }

    .cr-flip{
        height:290px;
    }

    .cr-flip-face{
        padding:18px 16px;
        border-radius:18px;
    }

    .cr-flip-label{
        font-size:11.5px;
    }

    .cr-flip-figure{
        font-size:26px;
    }

    .cr-flip-front p{
        font-size:12.5px;
        line-height:1.45;
    }

    .cr-flip-tags span{
        font-size:11px;
        padding:4px 10px;
        border-radius:999px;
    }

    .cr-flip-back span{
        font-size:15px;
    }

    /* Role Cards (6 Cards Side-by-Side) */
    .cr-roles{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:16px;
    }

    .cr-role{
        padding:12px;
        border-radius:14px;
    }

    .cr-role h4{
        font-size:13.5px;
        font-weight:700;
    }

    .cr-role-pay{
        font-size:12.5px;
        font-weight:700;
        margin-top:3px;
    }

    .cr-role p{
        font-size:12px;
        line-height:1.45;
        margin-top:4px;
        color:var(--cr-faint);
    }

    /* Hiring Partners */
    .cr-partners{
        padding:26px 0;
    }

    .cr-partners-rail{
        margin-top:16px;
    }

    .cr-partners-track{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .cr-partner{
        height:46px;
        padding:6px 8px;
        font-size:12px;
        border-radius:10px;
        gap:6px;
    }

    .cr-partner img{
        width:20px;
        height:20px;
    }

    /* Related Courses (4 Cards Side-by-Side) */
    .cr-related-sec{
        padding:26px 0;
    }

    .cr-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:16px;
    }

    .cr-related{
        border-radius:12px;
    }

    .cr-related img{
        height:105px;
    }

    .cr-related div{
        padding:10px 12px;
    }

    .cr-related h4{
        font-size:13.5px;
        font-weight:700;
        line-height:1.35;
    }

    .cr-related span{
        font-size:11.5px;
        margin-top:3px;
        color:var(--cr-faint);
    }

    /* Certificate Section */
    .cr-cert{
        padding:26px 0;
    }

    .cr-cert-inner{
        gap:18px;
    }

    .cr-cert-copy{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .cr-cert-btn{
        width:100%;
        max-width:320px;
        padding:12px 20px;
        font-size:13.5px;
        font-weight:700;
        margin-top:16px;
        text-align:center;
    }

    .cr-cert-frame{
        padding:10px;
        border-radius:16px;
        max-width:320px;
    }

    .cr-cert-actions{
        display:flex;
        flex-direction:row;
        gap:10px;
        width:100%;
        max-width:320px;
        margin-top:14px;
    }

    .cr-cert-preview,
    .cr-cert-enroll{
        flex:1 1 0;
        height:42px;
        padding:0;
        font-size:13px;
        font-weight:700;
        text-align:center;
        justify-content:center;
    }

    /* Enrol CTA Section */
    .cr-cta{
        padding:26px 0;
    }

    .cr-cta-inner{
        padding:26px 16px;
        border-radius:20px;
        gap:18px;
    }

    .cr-cta-copy{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .cr-cta-flag{
        font-size:11px;
        padding:5px 14px;
        border-radius:999px;
    }

    .cr-cta-actions{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:10px;
        width:100%;
        margin-top:12px;
    }

    .cr-cta-actions > a{
        flex:1 1 0;
        min-width:0;
        min-height:48px;
        padding:12px 16px;
        font-size:clamp(11.5px, 2.7vw, 13px);
        font-weight:700;
        text-align:center;
        justify-content:center;
        white-space:nowrap;
        border-radius:10px;
        box-sizing:border-box;
    }

    .cr-trusts{
        gap:8px;
        margin-top:12px;
        justify-content:center;
    }

    .cr-trust{
        padding:5px 12px;
        font-size:11.5px;
        border-radius:999px;
    }

    .cr-cta-stage{
        width:min(100%,240px);
    }

    .cr-cta-chip{
        font-size:11px;
        padding:5px 10px;
    }

}

@media (max-width:420px){

    .cr-hero-actions,
    .cr-cta-actions{
        flex-direction:column !important;
        align-items:stretch !important;
        width:100% !important;
        gap:10px !important;
    }

    .cr-hero-actions > a,
    .cr-cta-actions > a{
        width:100% !important;
        flex:none !important;
        min-height:48px !important;
        padding:13px 18px !important;
        font-size:13.5px !important;
        font-weight:700 !important;
        text-align:center !important;
        justify-content:center !important;
        white-space:nowrap !important;
        border-radius:10px !important;
        box-sizing:border-box !important;
    }

}

@media (max-width:380px){

    .cr-tools-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .cr-partners-track{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .cr-stats{
        padding:10px 6px;
        gap:4px;
    }

    .cr-stat{
        padding:4px 2px;
        gap:4px;
    }

    .cr-stat strong{
        font-size:14px;
    }

    .cr-stat-label{
        font-size:9.5px;
    }

    .cr-stat-ring{
        width:32px;
        height:32px;
    }

}