/* ═══════════════════════════════════════════════════════════════
   NSR PROTOCOL — SOMATIC LUXURY DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════
   Philosophy: This page is an exhale. Every pixel communicates
   "You are safe here." Nothing moves faster than a slow breath.
   ═══════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
    /* Warm palette — no pure black, no pure white */
    --cream: #F9F8F2;
    --soft-cream: #F9F8F2;  /* backward compat alias */
    --charcoal: #2C2C2C;   /* was #2A2A2A — aligned to §3 */
    --dark-rust: #5C4033;
    --warm-rust: #5C4033;  /* backward compat alias */
    --blush: #D4B5A0;
    --gold: #C4A265;
    --deep-olive: #3D4A38;
    --muted-text: rgba(30, 30, 28, 0.63);

    /* Typography */
    --f-serif: 'Cormorant Garamond', Georgia, serif;
    --f-sans: 'Outfit', -apple-system, sans-serif;

    /* Physics */
    --ease-somatic: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-hover: 1.5s;
    --t-reveal: 0.8s;
    --t-accordion: 0.6s;
}


/* ────────────────────────────────────────────────────────────
   2. PAGE SCOPE
   ──────────────────────────────────────────────────────────── */
.nsr-page {
    background: var(--cream);
    color: var(--charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}


/* ────────────────────────────────────────────────────────────
   3. NOISE TEXTURE UTILITY
   Adds organic film-grain over any cream-bg section
   ──────────────────────────────────────────────────────────── */
.nsr-grain {
    position: relative;
    isolation: isolate;
}

.nsr-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.045;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px;
}

.nsr-grain>* {
    position: relative;
    z-index: 1;
}

/* Dark variant — slightly higher opacity grain */
.nsr-grain--dark::after {
    opacity: 0.035;
}


/* ────────────────────────────────────────────────────────────
   4. SOFT ARCH MASK
   Organic arch — semi-circle top, gentle bottom radii
   ──────────────────────────────────────────────────────────── */
.nsr-arch {
    border-radius: 50% 50% 12px 12px / 32% 32% 12px 12px;
    overflow: hidden;
}


/* ────────────────────────────────────────────────────────────
   5. GLASSMORPHISM PLAY BUTTON
   ──────────────────────────────────────────────────────────── */
.nsr-play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(245, 240, 235, 0.55);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border: 1px solid rgba(245, 240, 235, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-hover) var(--ease-somatic);
    cursor: pointer;
    flex-shrink: 0;
}

.nsr-play svg {
    width: 20px;
    height: 20px;
    fill: var(--charcoal);
    opacity: 0.7;
    margin-left: 3px;
    /* optical centering */
}

.nsr-play:hover {
    transform: scale(1.06);
}


/* ────────────────────────────────────────────────────────────
   6. SHARED TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */
.nsr-eyebrow {
    display: block;
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.5vw + 0.25rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--sage-deep, #5A6457);
    margin-bottom: 1.25rem;
}

.nsr-body {
  max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.95rem, 0.9vw + 0.35rem, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
}


/* ────────────────────────────────────────────────────────────
   7. SCROLL CUE PULSE
   ──────────────────────────────────────────────────────────── */
@keyframes nsr-pulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(5px);
        opacity: 0.7;
    }
}



/* ═══════════════════════════════════════════════════════════
   ACT 1 — THE ARRIVAL (Hero)
   "I can rest here."
   ═══════════════════════════════════════════════════════════ */
.nsr-hero {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(6rem, 14svh, 8rem) clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 3svh, 2.5rem);
    overflow: hidden;

    /* Uniform charcoal */
    background: var(--charcoal);
}

.nsr-hero>* {
    position: relative;
    z-index: 1;
}

.nsr-hero__inner {
    /* width:100% added — without it this shrink-wraps to its narrowest
       child (.nsr-hero__sub, capped at 560px) and silently drags the VSL's
       width:100% down to 560px with it, never reaching the VSL's own
       860px cap. This is why the video read as "too small". */
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.2rem);
}

.nsr-hero__eyebrow {
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.45vw + 0.25rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sage-green);
}

.nsr-hero__title {
    font-family: var(--f-serif);
    font-size: clamp(2.2rem, 4.2vw + 0.3rem, 3.8rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--cream);
}

.nsr-hero__sub {
    font-family: var(--f-sans);
    font-size: clamp(0.95rem, 0.85vw + 0.35rem, 1.08rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(245, 240, 235, 0.65);
    max-width: 560px;
}

/* ── VSL Container — 16:9 Vimeo iframe ── */
.nsr-hero__vsl {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin-top: clamp(1.25rem, 2.5svh, 2rem);
    border-radius: 20px;
    overflow: hidden;

    /* Depth shadow only — no wide glow that bleeds on flat bg */
    box-shadow:
        0 0 0 1px rgba(245, 240, 235, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.5);

    /* Subtle frame */
    background: rgba(20, 20, 18, 0.9);
}

/* Iframe fills the container perfectly */
.nsr-hero__vsl-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* WHEEL SHIELD — the reason scroll physics used to break in the hero.
   The Vimeo iframe is a separate, cross-origin document sitting dead centre
   of the hero (26% of the viewport). Wheel events landing on it go to Vimeo's
   document, so Lenis — which listens on this window — never sees them. Scroll
   momentum therefore died over the video and reappeared past it, in both
   directions.

   This transparent layer sits above the iframe purely as an event target, so
   the wheel reaches the parent document and Lenis behaves normally. Clicking
   it starts playback through the Vimeo Player API and stands the shield down
   so the real controls work; pausing re-arms it. */
.nsr-hero__vsl-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.nsr-hero__vsl.is-live .nsr-hero__vsl-shield {
    pointer-events: none;
}

.nsr-hero__vsl-shield:focus-visible {
    outline: 2px solid var(--cream, #F9F8F2);
    outline-offset: -4px;
    border-radius: 20px;
}

/* ── Scroll Cue ── */
.nsr-hero__scroll {
    margin-top: clamp(1.25rem, 2.5svh, 2rem);
    font-family: var(--f-sans);
    font-size: clamp(0.78rem, 0.6vw + 0.3rem, 0.88rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--cream);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    animation: nsr-pulse 3s ease-in-out infinite;
}



/* ═══════════════════════════════════════════════════════════
   ACT 2 — THE MIRROR (Validation)
   "You see me. You understand."
   ═══════════════════════════════════════════════════════════ */
.nsr-mirror {
    position: relative;
    z-index: 2;
    padding: clamp(8rem, 16svh, 16rem) clamp(1.5rem, 5vw, 3rem) clamp(5rem, 10svh, 10rem);
    /* Clean cream background — Apple-like hard section cut */
    background: var(--cream);
}

.nsr-mirror__grid {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

/* Image — Soft Arch mask */
.nsr-mirror__img {
    aspect-ratio: 3 / 4;
    box-shadow: 0 24px 64px rgba(30, 30, 28, 0.12);
}

.nsr-mirror__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s var(--ease-somatic);
}

.nsr-mirror__img:hover img {
    transform: scale(1.04);
}

/* Copy */
.nsr-mirror__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 3.5vw + 0.3rem, 3rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--warm-rust);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Bullet items — dash prefix, stagger-ready */
.nsr-mirror__bullets {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.nsr-mirror__bullet {
  max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.92rem, 0.85vw + 0.3rem, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
    padding-left: 1.75rem;
    position: relative;
    /* Visible by default — the inline script's gsap.from() stagger hides
       and reveals these, so a CDN failure cannot blank them. */
}

.nsr-mirror__bullet::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage-green);
    opacity: 0.5;
}

/* 5D -- specificity line under the curriculum heading.
   Precise counts read as evidence of a real thing built by a real person,
   which is the job trust normally does and there are no testimonials yet.
   Every number is derived from the five accordion rows directly below:
   13 + 7 + 6 + 4 + 7 = 37 practices, and the durations across those rows run
   from 2 minutes (On-the-Spot Resets) to 35 (Yoga Nidra). If a row's count or
   duration changes, this line has to change with it. */
.nsr-curriculum__spec {
    /* margin-inline: 0, not auto. `auto` centred this 488px box inside the
       760px column while the eyebrow, title and sub all start at the column's
       left edge -- it sat 136px in from them, reading as a stray element
       rather than part of the block. Nothing else in .nsr-curriculum__header
       is centred. */
    margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
    max-width: 100%;
    font-family: var(--f-sans);
    font-size: var(--fs-micro, 0.75rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.nsr-curriculum__spec-sep {
    display: inline-block;
    margin: 0 0.7em;
    opacity: 0.55;
}

/* -- The hinge -----------------------------------------------------------
   Sits between the four bullets and the pivot. This is the emotional turn of
   the page: it names the reader's failed attempt at meditation and reframes
   it as a mismatch of level rather than a failure of will, which is exactly
   the argument .nsr-mirror__pivot then makes physiologically.

   Emphasised against the bullets above and the pivot below by three small
   moves, all from tokens already in this file: full --charcoal instead of
   --muted-text, one step up in size, and the sage rule down the left edge.
   That rule is the same --sage the bullet markers use (they run it at 0.5
   opacity), so it reads as the same family rather than a new device. It is
   decorative, not text, so sage's 2.78 on cream is not a contrast concern --
   the emphasis is carried by the charcoal, which reads 12.6.

   Deliberately NOT opacity:0. The GSAP stagger in the page's inline script
   targets .nsr-mirror__bullet only, so anything else starting transparent
   would never be revealed -- and a CDN failure must not be able to hide the
   one paragraph the section turns on. */
.nsr-mirror__hinge {
    max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.98rem, 0.9vw + 0.32rem, 1.12rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--charcoal);
    padding-left: 1.75rem;   /* matches .nsr-mirror__bullet's text inset */
    border-left: 2px solid var(--sage-green);
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
}

/* Pivot text */
/* -- The pivot ------------------------------------------------------------
   Moved out of .nsr-mirror__copy 2026-08-27. It had been the smallest, faintest
   element in the whole section -- 16.3px at weight 300 in 63% muted, against
   16.8px bullets above it and a 38.4px serif statement below -- while carrying
   the section's actual explanation. It read as leftover text.

   Now a full-width band between the grid and the affirmation: same 1060px
   measure as the grid so it lines up with the block above, one size up, and in
   full charcoal rather than muted. It is the bridge between the four symptoms
   and the affirmation that closes the section, so it sits at its own scale
   between the two -- deliberately below the 38.4px affirm heading, which stays
   the section's closing beat. */
.nsr-mirror__pivot {
    max-width: 1060px;
    margin: clamp(2.5rem, 5svh, 4rem) auto 0;
    font-family: var(--f-sans);
    font-size: clamp(1.02rem, 0.6vw + 0.75rem, 1.25rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--charcoal);
}

/* The phrase a fast scroller has to catch.

   Display serif at roughly twice the surrounding body, full charcoal, sitting
   inline so the sentence still reads as a sentence. Sized to stay clearly
   under .nsr-mirror__affirm-heading (38.4px) so the section keeps one closing
   climax rather than two competing ones:
     48px  opener  >  38.4px affirm  >  ~30px phrase  >  20px pivot body

   inline-block because transform does not apply to a purely inline box. That
   also stops the phrase breaking across two lines, which is why the size is
   clamped down hard on narrow viewports -- at 320px it has ~273px to sit in. */
.nsr-mirror__phrase {
    display: inline-block;
    font-family: var(--f-serif);
    font-size: clamp(1.35rem, 1.4vw + 0.6rem, 2.1rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    /* ease-in-out, deliberately NOT --ease-somatic. That curve is
       cubic-bezier(0.2, 0.8, 0.2, 1) -- an ease-OUT, shaped for things that
       arrive and settle. On a loop it makes the expansion snap and the return
       drift, so the two halves feel unequal. Respiration is symmetric, and
       this is meant to read as breath. */
    animation: nsrBreath 6s ease-in-out infinite;
}

/* Literally a breath, on a page about breathing. ~6s is a calm exhale, slow
   enough to read as respiration rather than as a blinking CTA. Transform and
   opacity only, per §3 -- no layout is touched, so this cannot shift the line
   box it sits in. */
@keyframes nsrBreath {
    0%, 100% { transform: scale(1);     opacity: 0.92; }
    50%      { transform: scale(1.025); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nsr-mirror__phrase {
        animation: none;
        opacity: 1;
    }
}

/* Affirmation — a truth quietly surfacing */
/* Affirm block — editorial statement at the foot of the Mirror section */
.nsr-mirror__affirm {
    max-width: 680px;
    margin: clamp(3rem, 6svh, 5rem) auto 0;
    padding-top: clamp(2rem, 4svh, 3.5rem);
    position: relative;
    text-align: center;
}

/* Thin decorative rule above */
.nsr-mirror__affirm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 8vw, 72px);
    height: 1px;
    background: var(--sage-green);
    opacity: 0.3;
}

.nsr-mirror__affirm-heading {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin-bottom: clamp(1.25rem, 2.5svh, 2rem);
}

.nsr-mirror__affirm-body {
  max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.92rem, 0.85vw + 0.3rem, 1.02rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(42, 42, 42, 0.67);
}


@media (max-width: 768px) {
    .nsr-mirror__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .nsr-mirror__img {
        max-width: 300px;
        margin: 0 auto;
        aspect-ratio: 3 / 4;
    }
}



/* ═══════════════════════════════════════════════════════════
   ACT 3 — THE MICRO-DOSE (Biological Proof)
   "Let her body make the buying decision."
   ═══════════════════════════════════════════════════════════ */
.nsr-micro {
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding-block: clamp(5rem, 12svh, 10rem);
    padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.nsr-micro__grid {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

/* ── Left copy ── */
.nsr-micro__copy h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 3vw + 0.2rem, 2.6rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--charcoal);
    margin-bottom: 1.5rem;
}

.nsr-micro__copy .nsr-body {
    margin-bottom: 1.25rem;
}

.nsr-micro__what {
    color: var(--charcoal);
    opacity: 0.5;
    font-style: italic;
}

/* ── Player wrap ── */
.nsr-micro__player-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glassmorphism card */
.nsr-micro__player {
    width: 100%;
    max-width: 420px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;

    /* Glass */
    background: rgba(138, 154, 144, 0.06);
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
    border: 1px solid rgba(138, 154, 144, 0.18);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.6) inset,
        0 20px 60px rgba(42, 42, 42, 0.06),
        0 4px 16px rgba(42, 42, 42, 0.04);
}

/* Track identity row */
.nsr-micro__track-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nsr-micro__track-label {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--sage-green);
    color: var(--cream);
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nsr-micro__track-name {
    font-family: var(--f-serif);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.2;
}

.nsr-micro__track-duration {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(42, 42, 42, 0.42);
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
}

/* Waveform — real amplitude envelope, painted to canvas by micro-player.js.
   The bars used to be 40 spans on a 10s CSS loop; they carried no relation
   to the audio. Height is fixed so there is zero layout shift on paint. */
.nsr-micro__waveform {
    display: block;
    width: 100%;
    /* Taller than it was: with the duplicate progress bar gone this is the only
       thing showing position, so it earns the room. Fixed height still — the
       canvas is sized from it, and a fluid one would reflow on every repaint. */
    height: 64px;
    cursor: pointer;
    border-radius: 4px;
}

.nsr-micro__waveform:focus-visible {
    outline: 2px solid var(--dark-rust, #5C4033);
    outline-offset: 4px;
}


/* Organic heights — varied so each bar has its own character.
   Stagger spread across 3s so the ripple moves slowly left-to-right.
   5s cycle = ~12 breaths/min (somatic breathing target). */

/* Breathing keyframe:
   Exhale → near-flat (scaleY 0.12) — the body at rest.
   Inhale → full bloom (scaleY 1) — from center, so +Y and -Y both.
   ease-in-out mirrors the natural slow-in / slow-out of a breath. */

/* The rule that used to sit here was `.nsr-micro__player.is-playing` with no
   opening brace, directly above `.nsr-micro__progress-wrap {`. CSS discards the
   comment between them and reads the pair as ONE descendant selector, so the
   progress wrapper only ever got its layout while audio was playing. The
   progress bar it styled is gone now (the waveform already shows position), and
   the playing state is expressed properly further down. */

/* ── Scrubber ────────────────────────────────────────────────────────────
   Back by request, and a real control this time. The knob is the detail that
   makes it read as something you may take hold of rather than a status line. */
.nsr-micro__scrub {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* The element is a 26px grab target; the visible track is the ::before inside
   it. Do NOT go back to height + padding + background-clip: content-box — the
   sheet sets box-sizing: border-box, so the padding eats the declared height,
   the content box collapses to zero and a content-box-clipped background
   paints nothing at all. */
.nsr-micro__bar {
    position: relative;
    height: 26px;
    background: none;
    cursor: pointer;
    touch-action: none;
}

.nsr-micro__bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: rgba(138, 154, 144, 0.28);
}

.nsr-micro__bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--sage-green);
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
}

.nsr-micro__knob {
    position: absolute;
    top: 50%;
    /* Travel is inset by half the knob at each end, so it stays on the track
       instead of hanging 7px off the left edge at 0:00.
       Percentage `left` rather than a transform: this is set on timeupdate
       (~4Hz) and never transitioned, so there is no animation to keep off the
       compositor — and the alternative needs the track width measured in JS. */
    left: calc(6.5px + var(--p, 0) * (100% - 13px));
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cream);
    border: 1.5px solid var(--sage-green);
    box-shadow: 0 2px 6px rgba(42, 42, 42, 0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.nsr-micro__bar:focus-visible {
    outline: 2px solid var(--dark-rust, #5C4033);
    outline-offset: 6px;
    border-radius: 4px;
}

.nsr-micro__timestamps {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: rgba(42, 42, 42, 0.38);
    letter-spacing: 0.05em;
}

/* ── Controls ────────────────────────────────────────────────────────────
   Centred. It used to be a bare flex row with no justify-content, so the
   button sat hard left with the rest of the card's width empty beside it. */
.nsr-micro__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.nsr-micro__begin-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* The breath. A soft field behind the invitation that swells and recedes over
   5s — ~12 a minute, the somatic pace this file already targets. Rings around
   a pill read as a target; a field reads as warmth. Transform and opacity
   only, so it stays on the compositor. */
.nsr-micro__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 116%;
    height: 190%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
                rgba(138, 154, 144, 0.34), rgba(138, 154, 144, 0));
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.88);
}

.nsr-micro__player.is-playing .nsr-micro__glow {
    animation: nsr-micro-breathe 5s var(--ease-somatic) infinite;
}

@keyframes nsr-micro-breathe {
    0%, 100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.88); }
    45%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.10); }
}

/* The invitation. Full width of the card, quiet, and carrying a word rather
   than only a glyph — an icon in a circle is a media control, a phrase you can
   read is an offer. Same glass as the card so it belongs to the surface it
   sits on instead of being stamped onto it. */
.nsr-micro__begin {
    position: relative;   /* above .nsr-micro__glow */
    z-index: 1;
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.66) 0%,
            rgba(255, 255, 255, 0.24) 46%,
            rgba(138, 154, 144, 0.16) 100%);
    /* WCAG 1.4.11 wants 3:1 for the edge of a control. This was
       rgba(138,154,144,0.38) = 1.39:1 against the card's effective ground
       (--cream under the player's 6% sage glass, rgb(242,242,236)), and the
       glass fill cannot stand in for it — its top stop is ~1.04:1 against
       cream. --sage-green tops out at 2.78:1, so no alpha of that hue could
       ever pass; the fix is the hue, not the opacity. --sage-deep at 0.75
       measures 3.28:1 and keeps the button visually identical otherwise.
       Border only — 2026-08-29. */
    border: 1px solid rgba(90, 100, 87, 0.75);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.80) inset,
        0 10px 26px rgba(42, 42, 42, 0.07);
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nsr-micro__begin svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Serif, sentence case. Uppercase letter-spaced sans is the brand's EYEBROW
   voice — correct for a label, too clipped for an invitation. */
.nsr-micro__begin-label {
    font-family: var(--f-serif);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Hover is unavailable to ~80% of this audience, so it only ever enriches —
   the resting state already reads as pressable on its own. No scale: a
   full-width pill growing reads as a wobble rather than a response. */
.nsr-micro__begin:hover,
.nsr-micro__begin:focus-visible {
    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(138, 154, 144, 0.20) 48%,
            rgba(138, 154, 144, 0.30) 100%);
    border-color: rgba(90, 100, 87, 0.90);   /* 4.45:1 */
}

.nsr-micro__begin:focus-visible {
    outline: 2px solid var(--dark-rust, #5C4033);
    outline-offset: 5px;
}

/* Playing: the border firms and the breathing field behind it comes up. The
   fill deliberately stays light — sage behind cream text is about 2.5:1, and
   the state is already unmistakable from the word and the glow. */
.nsr-micro__player.is-playing .nsr-micro__begin {
    border-color: rgba(90, 100, 87, 1);      /* 5.52:1 — firmest, as before */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.80) inset,
        0 10px 26px rgba(42, 42, 42, 0.10);
}

@media (prefers-reduced-motion: reduce) {
    .nsr-micro__player.is-playing .nsr-micro__glow {
        animation: none;
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    .nsr-micro__begin { transition: none; }
}

.nsr-micro__coming-soon {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(42, 42, 42, 0.38);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* Mobile */
@media (max-width: 768px) {
    .nsr-micro__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .nsr-micro__player {
        max-width: 100%;
    }
}




/* ═══════════════════════════════════════════════════════════
   ACT 4 — THE ANTI-OVERWHELM ECOSYSTEM
   "Destroy decision fatigue."
   ═══════════════════════════════════════════════════════════ */
.nsr-ecosystem {
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding-block: clamp(5rem, 12svh, 10rem);
    padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.nsr-ecosystem__inner {
    max-width: 1060px;
    margin: 0 auto;
}

/* Header — centered, generous breathing room below */
.nsr-ecosystem__header {
    text-align: center;
    margin-bottom: clamp(3rem, 6svh, 5rem);
}

.nsr-ecosystem__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 3.5vw + 0.2rem, 3rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin-top: 1rem;
}

/* 2-column grid — 4 cards, clean 2x2 at every width above mobile */
.nsr-ecosystem__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}

/* Frosted glass card */
.nsr-ecosystem__card {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    background: rgba(138, 154, 144, 0.05);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border: 1px solid rgba(138, 154, 144, 0.16);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.55) inset,
        0 16px 48px rgba(42, 42, 42, 0.05);

    transition: transform 0.35s var(--ease-somatic),
                box-shadow 0.35s var(--ease-somatic);
}

.nsr-ecosystem__card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.55) inset,
        0 24px 60px rgba(42, 42, 42, 0.08);
}

/* Icon container */
.nsr-ecosystem__card-icon {
    width: 44px;
    height: 44px;
    color: var(--sage-green);
    flex-shrink: 0;
}

.nsr-ecosystem__card-icon svg {
    width: 100%;
    height: 100%;
}

/* Card name tag */
.nsr-ecosystem__card-tag {
    font-family: var(--f-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--charcoal);
}

/* Card body */
.nsr-ecosystem__card-body {
  max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 0.75vw + 0.3rem, 0.98rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(42, 42, 42, 0.67);
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
    .nsr-ecosystem__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    /* br allowed to remain — it creates the natural mobile line break */
}




/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER
   ═══════════════════════════════════════════════════════════ */
.nsr-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3rem);
    background: var(--cream);
}

.nsr-divider__line {
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--blush), transparent);
    opacity: 0.5;
}

.nsr-divider__text {
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.45vw + 0.25rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sage-deep, #5A6457);
    white-space: nowrap;
}



/* ═══════════════════════════════════════════════════════════
   ACT 5 — THE ARCHITECTURE (Curriculum)
   "Show me exactly what I get."
   ═══════════════════════════════════════════════════════════ */
.nsr-curriculum {
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding-block: clamp(5rem, 15svh, 12rem);
    padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.nsr-curriculum__inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Header */
.nsr-curriculum__header {
    margin-bottom: clamp(3rem, 6svh, 5rem);
}

.nsr-curriculum__title {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 3.5vw + 0.2rem, 3.2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.nsr-curriculum__title em {
    font-style: italic;
    color: var(--sage-green);
}

.nsr-curriculum__sub {
    color: rgba(42, 42, 42, 0.67);
}

/* ── Timeline wrapper ── */
.nsr-curriculum__timeline {
    position: relative;
}

/* ── Curriculum Row (new Architecture-of-Practice accordion) ── */
.nsr-curr-row {
    border-bottom: 1px solid rgba(42, 42, 42, 0.08);
}

.nsr-curr-row:first-child {
    border-top: 1px solid rgba(42, 42, 42, 0.08);
}

/* Trigger row: number + title + icon */
.nsr-curr-row__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.nsr-curr-row__left {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

/* Faded number — charcoal at 8% (cooler, more clinical than surya's sage) */
.nsr-curr-row__num {
    font-family: var(--f-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1;
    color: rgba(42, 42, 42, 0.08);
    flex-shrink: 0;
    width: 3.5rem;
    transition: color 0.7s var(--ease-somatic);
    user-select: none;
}

/* Phase title */
.nsr-curr-row__title {
    font-family: var(--f-serif);
    font-size: clamp(1rem, 1.4vw + 0.2rem, 1.3rem);
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
    transition: color 0.6s var(--ease-somatic);
}

.nsr-curr-row__trigger:hover .nsr-curr-row__title,
.nsr-curr-row.is-open .nsr-curr-row__title {
    color: var(--sage-green);
}

/* Number brightens slightly on open */
.nsr-curr-row.is-open .nsr-curr-row__num {
    color: rgba(138, 154, 144, 0.22);
}

/* Toggle icon — same circle + rotate as surya but sage-tinted */
.nsr-curr-row__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(42, 42, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(42, 42, 42, 0.4);
    flex-shrink: 0;
    transition: transform 0.7s var(--ease-somatic),
                border-color 0.4s,
                color 0.4s;
}

.nsr-curr-row.is-open .nsr-curr-row__icon {
    transform: rotate(45deg);
    border-color: rgba(138, 154, 144, 0.4);
    color: var(--sage-green);
}

/* Collapsible body */
.nsr-curr-row__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.5s var(--ease-somatic);
    opacity: 0;
}

.nsr-curr-row.is-open .nsr-curr-row__body {
    opacity: 1;
}

/* Indented content — aligns with title (number width + gap) */
.nsr-curr-row__content {
    padding-left: calc(3.5rem + clamp(1.25rem, 3vw, 2.25rem));
    padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Description paragraph */
.nsr-curr-row__desc {
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 0.75vw + 0.3rem, 0.97rem);
    font-weight: 300;
    line-height: 1.78;
    color: rgba(42, 42, 42, 0.67);
}

/* Technique list — en-dash bullet, different from surya's ✓ */
.nsr-curr-row__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.nsr-curr-row__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--f-sans);
    font-size: clamp(0.82rem, 0.6vw + 0.28rem, 0.9rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(42, 42, 42, 0.67);
}

/* En-dash bullet — thin, precise, clinical */
.nsr-curr-row__bullet {
    color: var(--sage-green);
    font-size: 1em;
    line-height: 1.6;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Meta pill — sits below the list */
.nsr-curr-row__meta {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.38vw + 0.24rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage-deep, #5A6457);
    background: rgba(138, 154, 144, 0.07);
    border: 1px solid rgba(138, 154, 144, 0.15);
    border-radius: 999px;
    align-self: flex-start;
}

/* ── Old .nsr-acc accordion ── (used by FAQ — preserved) */
.nsr-acc {
    border-top: 1px solid rgba(138, 154, 126, 0.15);
}

.nsr-acc:last-of-type {
    border-bottom: 1px solid rgba(138, 154, 126, 0.15);
}

.nsr-acc__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem) 0;
    font-family: var(--f-serif);
    font-size: clamp(1rem, 1.2vw + 0.3rem, 1.2rem);
    font-weight: 500;
    color: var(--charcoal);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.6s var(--ease-somatic);
}

.nsr-acc__trigger:hover {
    color: var(--warm-rust);
}

.nsr-acc__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(138, 154, 126, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 300;
    color: var(--sage-green);
    flex-shrink: 0;
    transition:
        transform var(--t-accordion) var(--ease-somatic),
        background 0.4s var(--ease-somatic),
        scale 0.3s var(--ease-somatic);
}

.nsr-acc.is-open .nsr-acc__icon {
    transform: rotate(45deg);
    scale: 1.08;
    background: rgba(138, 154, 126, 0.16);
}

.nsr-acc__body {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height var(--t-accordion) var(--ease-somatic);
}

.nsr-acc.is-open .nsr-acc__body {
    padding-bottom: clamp(0.75rem, 1.5vw, 1.2rem);
}

.nsr-acc__body p {
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 0.75vw + 0.3rem, 0.95rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
    padding-left: 0.75rem;
    border-left: 2px solid rgba(138, 154, 126, 0.12);
}

/* Meta pill — FAQ version */
.nsr-acc__meta {
    display: inline-block;
    margin-top: 0.6rem;
    margin-left: 0.75rem;
    padding: 0.25rem 0.65rem;
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.4vw + 0.25rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sage-green);
    background: rgba(138, 154, 126, 0.06);
    border-radius: 999px;
}

/* ── Boundary card ── */
.nsr-curriculum__boundary {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: rgba(138, 154, 126, 0.05);
    border: 1px solid rgba(138, 154, 126, 0.1);
    border-radius: 14px;
    text-align: center;
    font-family: var(--f-sans);
    font-size: clamp(0.92rem, 0.85vw + 0.3rem, 1.02rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted-text);
}

.nsr-curriculum__boundary strong {
    font-weight: 700;
    color: var(--charcoal);
}

/* Mobile: tighten number size, reduce indent */
@media (max-width: 600px) {
    .nsr-curr-row__num {
        font-size: 1.8rem;
        width: 2.5rem;
    }

    .nsr-curr-row__content {
        padding-left: calc(2.5rem + 1.25rem);
    }
}





/* ═══════════════════════════════════════════════════════════
   ACT 6 — MENU OF CARE (Pricing)
   "I feel respected, not pressured."
   ═══════════════════════════════════════════════════════════ */
.nsr-pricing {
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding-block: clamp(4rem, 10svh, 8rem);
    padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.nsr-pricing__inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.nsr-pricing__title {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 3vw + 0.2rem, 2.8rem);
    font-weight: 500;
    color: var(--warm-rust);
    margin-bottom: 0.5rem;
}

.nsr-pricing__sub {
    max-width: 440px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

/* Card grid */
.nsr-pricing__cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Shared card base */
.nsr-card {
    border-radius: 20px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform var(--t-hover) var(--ease-somatic);
}

.nsr-card:hover {
    transform: scale(1.02);
}

/* Core — sage, wider */
.nsr-card--core {
    flex-basis: 55%;
    background-color: var(--sage-green);
}

.nsr-card--core .nsr-card__label,
.nsr-card--core .nsr-card__name,
.nsr-card--core .nsr-card__price {
    color: var(--cream);
}

.nsr-card--core .nsr-card__desc,
.nsr-card--core .nsr-card__list li {
    color: rgba(245, 240, 235, 0.75);
}

/* VIP — charcoal */
.nsr-card--vip {
    flex-basis: 45%;
    background-color: var(--charcoal);
}

.nsr-card--vip .nsr-card__label,
.nsr-card--vip .nsr-card__name,
.nsr-card--vip .nsr-card__price {
    color: var(--cream);
}

.nsr-card--vip .nsr-card__desc,
.nsr-card--vip .nsr-card__list li {
    color: rgba(245, 240, 235, 0.55);
}

/* Badge */
.nsr-card__badge {
    align-self: flex-start;
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.4vw + 0.22rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    background: rgba(196, 162, 101, 0.18);
    color: var(--gold);
}

/* Card internals */
.nsr-card__label {
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.45vw + 0.25rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 0.35rem;
}

.nsr-card__name {
    font-family: var(--f-serif);
    font-size: clamp(1.1rem, 1.4vw + 0.3rem, 1.35rem);
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.nsr-card__price {
    font-family: var(--f-serif);
    font-size: clamp(2.4rem, 3.5vw + 0.5rem, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.nsr-card__desc {
    font-family: var(--f-sans);
    font-size: clamp(0.78rem, 0.65vw + 0.3rem, 0.88rem);
    font-weight: 300;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.nsr-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-grow: 1;
}

.nsr-card__list li {
    font-family: var(--f-sans);
    font-size: clamp(0.78rem, 0.65vw + 0.3rem, 0.85rem);
    font-weight: 300;
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.nsr-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    opacity: 0.45;
}

/* CTAs */
.nsr-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.75rem;
    font-family: var(--f-sans);
    font-size: clamp(0.78rem, 0.65vw + 0.3rem, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition:
        transform var(--t-hover) var(--ease-somatic),
        box-shadow 0.6s ease,
        border-color 0.6s ease;
}

.nsr-card__cta:hover {
    transform: scale(1.02);
}

/* Core CTA — warm rust */
.nsr-card--core .nsr-card__cta {
    background: var(--warm-rust);
    color: var(--cream);
    box-shadow: 0 4px 20px rgba(139, 94, 60, 0.25);
}

.nsr-card--core .nsr-card__cta:hover {
    box-shadow: 0 6px 28px rgba(139, 94, 60, 0.35);
}

/* VIP CTA — outline */
.nsr-card--vip .nsr-card__cta {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid rgba(245, 240, 235, 0.3);
}

.nsr-card--vip .nsr-card__cta:hover {
    border-color: var(--cream);
    background: rgba(245, 240, 235, 0.06);
}

/* Community reminder */
.nsr-pricing__community {
    margin-top: clamp(2rem, 4vw, 3rem);
    font-family: var(--f-sans);
    font-size: clamp(0.85rem, 0.75vw + 0.3rem, 0.95rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted-text);
    text-align: center;
}

@media (max-width: 768px) {
    .nsr-pricing__cards {
        flex-direction: column;
    }

    .nsr-card--core,
    .nsr-card--vip {
        flex-basis: auto;
    }
}



/* ═══════════════════════════════════════════════════════════
   ACT 7 — THE CONTAINER (FAQ + Footer)
   "Every last question, answered."
   ═══════════════════════════════════════════════════════════ */
.nsr-container {
    position: relative;
    z-index: 2;
    padding: clamp(5rem, 12svh, 10rem) clamp(1.5rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);

    /* Layered dark */
    background:
        radial-gradient(ellipse 60% 50% at 30% 25%, rgba(61, 74, 56, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 75% 80%, rgba(139, 94, 60, 0.06) 0%, transparent 50%),
        var(--charcoal);
}

.nsr-container__inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Community */
.nsr-container__comm {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid rgba(245, 240, 235, 0.05);
}

.nsr-container__comm h3 {
    font-family: var(--f-serif);
    font-size: clamp(1.25rem, 2.2vw + 0.3rem, 1.8rem);
    font-weight: 500;
    color: var(--cream);
    margin-bottom: 0.6rem;
}

.nsr-container__comm p {
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 0.75vw + 0.3rem, 0.95rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(245, 240, 235, 0.38);
    max-width: 460px;
    margin: 0 auto;
}

/* FAQ Title */
.nsr-faq__title {
    font-family: var(--f-serif);
    font-size: clamp(1.3rem, 2.2vw + 0.3rem, 1.8rem);
    font-weight: 500;
    color: var(--cream);
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* FAQ Accordion — dark variant */
.nsr-faq {
    border-top: 1px solid rgba(245, 240, 235, 0.05);
}

.nsr-faq:last-of-type {
    border-bottom: 1px solid rgba(245, 240, 235, 0.05);
}

.nsr-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(0.9rem, 1.5vw, 1.2rem) 0;
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 0.85vw + 0.3rem, 1rem);
    font-weight: 400;
    color: rgba(245, 240, 235, 0.62);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.6s var(--ease-somatic);
}

.nsr-faq__trigger:hover {
    color: var(--cream);
}

.nsr-faq__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(245, 240, 235, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--sage-green);
    flex-shrink: 0;
    transition:
        transform var(--t-accordion) var(--ease-somatic),
        background 0.4s ease;
}

.nsr-faq.is-open .nsr-faq__icon {
    transform: rotate(45deg);
    scale: 1.08;
    background: rgba(245, 240, 235, 0.08);
}

.nsr-faq__body {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height var(--t-accordion) var(--ease-somatic);
}

.nsr-faq.is-open .nsr-faq__body {
    padding-bottom: clamp(0.75rem, 1.5vw, 1.2rem);
}

.nsr-faq__body p {
    font-family: var(--f-sans);
    font-size: clamp(0.85rem, 0.75vw + 0.3rem, 0.92rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(245, 240, 235, 0.72);
}

/* Disclaimer */
.nsr-disclaimer {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(245, 240, 235, 0.03);
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.5vw + 0.3rem, 0.76rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--cream);
    opacity: 0.5;
    text-align: center;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}



/* ═══════════════════════════════════════════════════════════
   CLOSING CTA
   ═══════════════════════════════════════════════════════════ */
.nsr-close {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-block: clamp(5rem, 10svh, 8rem);
    padding-inline: clamp(1.5rem, 5vw, 3rem);
    overflow: hidden;

    /* Warm radial glow bg — never flat */
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(138, 154, 126, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(139, 94, 60, 0.04) 0%, transparent 50%),
        var(--cream);
}

.nsr-close h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 2.8vw + 0.3rem, 2.4rem);
    font-weight: 500;
    color: var(--warm-rust);
    margin-bottom: 0.6rem;
}

.nsr-close p {
    font-family: var(--f-sans);
    font-size: clamp(0.92rem, 0.85vw + 0.3rem, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
    max-width: 420px;
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
}

.nsr-close__cta {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2.5rem;
    font-family: var(--f-sans);
    font-size: clamp(0.78rem, 0.65vw + 0.3rem, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cream);
    background: var(--warm-rust);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(139, 94, 60, 0.2);
    transition:
        transform var(--t-hover) var(--ease-somatic),
        box-shadow 0.6s ease;
}

.nsr-close__cta:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 28px rgba(139, 94, 60, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER SCOPE
   ═══════════════════════════════════════════════════════════ */
.nsr-page .footer {
    /* The mobile footer's dividing rules read --footer-rule, whose default is a
       charcoal hairline — invisible on this page, the only one that renders
       the footer on charcoal. Set on the footer ROOT, not on __bottom: custom
       properties inherit down, and the columns are __bottom's siblings. The
       dark ground stays; only the rules take the text colour. */
    --footer-rule: rgba(249, 248, 242, 0.22);
    background: var(--charcoal);
    color: var(--cream);
    border-top: 1px solid rgba(245, 240, 235, 0.03);
}
.nsr-page .footer__heading {
    color: var(--cream);
}
.nsr-page .footer__text {
    color: rgba(249, 248, 242, 0.7);
}
.nsr-page .footer__list a {
    color: rgba(249, 248, 242, 0.65);
}
.nsr-page .footer__list a:hover {
    color: var(--cream);
}
.nsr-page .footer__list a::after {
    background: var(--cream);
}
.nsr-page .footer__bottom {
    color: rgba(249, 248, 242, 0.72);
    border-top-color: rgba(249, 248, 242, 0.06);
    /* This is the only footer on the site rendered on charcoal. The legal
       links read this variable (style.css .footer__legal a); without the
       override they would use the cream-footer default and vanish. */
    --footer-legal-ink: rgba(249, 248, 242, 0.92);
}


/* ════════════════════════════════════════════════════════════════
   YOUR GUIDE — Bio Section (mirrors Surya "your-guide" design)
   ════════════════════════════════════════════════════════════════ */
.nsr-guide {
    background: var(--charcoal);
    padding-block: clamp(5rem, 15svh, 10rem);
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.nsr-guide__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
}

/* Portrait column */
.nsr-guide__portrait-wrap {
    display: flex;
    justify-content: center;
}

.nsr-guide__portrait {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3);
}

/* Copy column */
.nsr-guide__copy {
    color: var(--cream);
}

.nsr-guide__eyebrow {
    font-family: var(--f-sans);
    font-size: clamp(0.75rem, 0.5vw + 0.3rem, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(249, 248, 242, 0.3);
    margin-bottom: 1.5rem;
}

.nsr-guide__name {
    font-family: var(--f-serif);
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: clamp(1.75rem, 3.5svh, 2.5rem);
}

.nsr-guide__name em {
    font-style: italic;
}

.nsr-guide__body {
    font-family: var(--f-sans);
    font-size: clamp(0.95rem, 1vw + 0.3rem, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(249, 248, 242, 0.58);
    margin-bottom: 1.25rem;
}

/* Ghost pill CTA — matches surya btn-somatic on dark background */
.nsr-guide__cta {
    display: inline-block;
    margin-top: clamp(1.5rem, 3svh, 2.5rem);
    padding: 1.1rem 2.25rem;
    border-radius: 999px;
    font-family: var(--f-sans);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cream);
    background: rgba(249, 248, 242, 0.07);
    border: 1px solid rgba(249, 248, 242, 0.14);
    transition: background 0.7s var(--ease-somatic),
                border-color 0.7s var(--ease-somatic),
                transform 0.4s var(--ease-somatic);
}

.nsr-guide__cta:hover {
    background: rgba(249, 248, 242, 0.14);
    border-color: rgba(249, 248, 242, 0.28);
    transform: scale(1.03);
}

/* Tablet+ : 2-column layout, portrait left */
@media (min-width: 900px) {
    .nsr-guide__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* Large desktop: tighten portrait, keep copy breathing */
@media (min-width: 1280px) {
    .nsr-guide__inner {
        grid-template-columns: 5fr 7fr;
        gap: clamp(4rem, 8vw, 8rem);
    }
}


/* ════════════════════════════════════════════════════════════════
   WHO THIS IS FOR — recognition, extras, and the gentle note

   Stone, not cream — and not dark like the Soft Cycle twin (.sc-promise)
   either. This is the second most load-bearing section on the page after
   Menu of Care, and cream gave it no identity: .nsr-guide (charcoal) was
   followed by three cream sections in a row (who / divider / how-it-works),
   so it read as filler between two things that mattered. --stone (#E6E4DD)
   is an existing §3 brand token that was sitting completely unused in this
   file — activating it here instead of inventing a new value gives the
   section its own field without adding a tenth colour to the page. It is a
   hard cut on both sides (charcoal in, cream out at the divider), which is
   the same "Apple-like hard section cut" language documented on
   .nsr-mirror, just one more step of it.

   Rebuilt twice on 2026-08-06. Pass 1 invented nine one-off spacing values
   and a second list idiom foreign to the rest of the page. Pass 2 fixed the
   rhythm but capped both the title (26ch) and the Gentle Note panel to
   content width — on an actual desktop viewport (1280–1920px, the inner
   container pins at 1200px past ~1280 so testing higher adds nothing) that
   left 550–625px of dead space beside them, worse than the empty grid cell
   it replaced. Neither the title nor any other heading on this page (.nsr-
   mirror__heading, .nsr-curriculum__title) uses a ch cap — they live in their container and wrap naturally. The Gentle Note
   goes back to full width, with its one affirming line spanning both
   columns as a lede instead of forcing a 2×2 grid to leave a dead cell. */
.nsr-who {
    /* ONE step between every major block — title→list, list→extras,
       extras→note. This is the page's existing large step, shared with
       .nsr-curriculum. */
    --who-step: clamp(3rem, 6svh, 5rem);

    background: var(--stone, #E6E4DD);

    /* Asymmetric on purpose. The somatic divider below adds its own
       clamp(2rem,5svh,4rem), and .moc-section past it opens with a further
       clamp(4rem,8vw,8rem) — a symmetric bottom stacks all three into a very
       large empty run between this panel and the pricing heading. Top matches
       the page's dominant section padding; bottom hands off to the divider.

       This used to read ".nsr-how-it-works a further full section pad". That
       section — the "From enrollment to regulation in three steps" block —
       was removed 2026-08-27 as redundant, so the divider now hands off
       straight to pricing. The reasoning is unchanged; only the section
       downstream is different. */
    /* Bottom trimmed from clamp(3rem,6svh,5rem) when .nsr-how-it-works was
       removed. That section opened with a ~90px top pad; .moc-section, now
       the next thing down, opens with ~128px. Left alone the handoff grew
       from ~260px to ~298px of empty run — drifting toward the ~320px this
       comment calls out as too much. Measured back to ~280px at 1440. */
    padding-block: clamp(5rem, 12svh, 10rem) clamp(2rem, 4svh, 3.5rem);
    padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* 1200px matches .nsr-guide above. Do not add a fourth container width — see the note in CLAUDE.md about the
   1200/1100/1060/1000 drift. */
.nsr-who__inner {
    max-width: 1200px;
    margin-inline: auto;
}

/* No max-width — see the section comment. It wraps at whatever the 1200px
   container gives it, same as every other heading on this page. */
.nsr-who__title {
    font-family: var(--f-serif);
    font-size: clamp(1.9rem, 3vw + 0.9rem, 2.9rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    /* Only matters if the line DOES wrap; does nothing to a line that
       already fits. Prevents a lopsided final line, nothing more. */
    text-wrap: balance;
    margin-bottom: var(--who-step);
}


/* ── The list ──────────────────────────────────────────────────────
   Geometry lifted from .nsr-mirror__bullet in #validation so the two lists
   on this page share one rhythm: same 1.75rem marker offset, same 1.75
   line-height, same type ramp. Only the marker itself differs — a check
   rather than a dot, because that list is about symptoms and this one is
   about fit. The first pass used a flex row with a 15px SVG and a 1.7
   line-height, which is why it read as a different page. */
.nsr-who__list {
    display: grid;
    grid-template-columns: 1fr;
    /* Row gap is the page's list gap (.nsr-mirror__bullets). */
    gap: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.nsr-who__item {
    position: relative;
    padding-left: 1.75rem;
    /* Same token .nsr-mirror__bullet uses, not a bespoke value — see the
       section comment for what happens when this list invents its own. */
    max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.92rem, 0.85vw + 0.3rem, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
}

.nsr-who__check {
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 11px;
    height: 11px;
    /* Not --sage-green: #8A9A90 reads 2.78 on cream. --sage-deep reads 5.65 and
       stays in the same colour family. */
    color: var(--sage-deep, #5A6457);
}

.nsr-who__check svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── Also included ─────────────────────────────────────────────── */
.nsr-who__extras {
    margin-top: var(--who-step);
}

.nsr-who__extras-title,
.nsr-note__title {
    font-family: var(--f-sans);
    /* 0.75rem = 12px, the micro-copy floor. Do not go below it. */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dark-rust);
    margin-bottom: clamp(1.25rem, 2.5svh, 2rem);
}

/* No interpunct separators, unlike the Soft Cycle twin. Its five labels fit
   one line at desktop so its separators always land between items; these
   labels are longer, the row wraps from roughly 700px to 1150px, and a
   ::after separator then strands a stray dot at the end of the wrapped
   line. The leading icons already delimit the items. */
.nsr-who__extras-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nsr-who__extra {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--muted-text);
}

.nsr-who__extra svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--sage-deep, #5A6457);
}


/* ── A Gentle Note ─────────────────────────────────────────────────
   Full width of the container, same as the title and list above it — see
   the section comment for why a content-hugging width was wrong. The tint,
   hairline border and 16px radius are what separate this from the section;
   that is enough, which is also why there is still no rule above the
   closing line. */
.nsr-note {
    margin-top: var(--who-step);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: rgba(92, 64, 51, 0.05);
    border: 1px solid rgba(44, 44, 44, 0.1);
    border-radius: 16px;
}

/* Two columns for the four exclusions, with the one affirming line spanning
   both as a lede above them (below, via .nsr-note__item--is). Five items
   forced into a 2×2+1 grid left a dead cell either way round; spanning the
   odd one out instead of stranding it fills the row on purpose. It also
   reads better editorially — one affirmation framing four boundaries,
   rather than five undifferentiated bullets. */
.nsr-note__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.75rem, 3.5svh, 2.5rem);
}

/* Same token as .nsr-who__item above. Its real job is capping the lede once
   it spans both columns — nothing else limits that row, and full panel
   width unwrapped runs past 100 characters. In single-column mode it is
   close to inert: the card is rarely wider than measure once its own
   padding is subtracted. */
.nsr-note__item {
    position: relative;
    padding-left: 1.75rem;
    max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.9rem, 0.35vw + 0.82rem, 1rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
}

.nsr-note__item em {
    font-style: italic;
    color: var(--charcoal);
}

.nsr-note__mark {
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 11px;
    height: 11px;
    color: rgba(30, 30, 28, 0.38);
}

/* The affirming note takes sage; the four exclusions stay muted. */
.nsr-note__item--is .nsr-note__mark {
    color: var(--sage-deep, #5A6457);
}

.nsr-note__mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Separated by space, not by a rule — see the panel comment above. */
.nsr-note__closing {
    font-family: var(--f-sans);
    font-size: 0.9rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.75;
    color: rgba(30, 30, 28, 0.52);
    margin: 0;
}


/* ── Two columns once there is room ────────────────────────────────
   Mobile-first: single column above, so there is no multi-column layout
   waiting to overflow a narrow viewport. Same breakpoint for both grids —
   they sit in the same 1200px container and should change shape together. */
@media (min-width: 900px) {
    .nsr-who__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nsr-note__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The affirming line becomes the lede row, full width above the four
       exclusions. Below 900px it is just the first item in a single column
       and needs nothing extra. */
    .nsr-note__item--is {
        grid-column: 1 / -1;
    }
}

/* Five stacked rows for five short labels is a lot of phone height. */
@media (max-width: 600px) {
    .nsr-who__extras-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nsr-who__item,
    .nsr-who__extras,
    .nsr-note__item,
    .nsr-note__closing {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   SOMATIC DIVIDER — Minimal decorative break
   ════════════════════════════════════════════════════════════════ */
.nsr-somatic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    padding: clamp(2rem, 5svh, 4rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--cream);
}
.nsr-somatic-divider__line {
    width: clamp(40px, 10vw, 100px);
    height: 1px;
    background: var(--sage-green);
    opacity: 0.25;
}
.nsr-somatic-divider__glyph {
    font-family: var(--f-serif);
    font-size: 1.6rem;
    color: var(--sage-green);
    opacity: 0.4;
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   FOUNDATION SESSION — Cinematic full-bleed 1:1 card
   ════════════════════════════════════════════════════════════════ */
.nsr-foundation {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 55svh, 600px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 10svh, 8rem) clamp(1.5rem, 5vw, 4rem);
}
.nsr-foundation__inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
.nsr-foundation__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.nsr-foundation__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nsr-foundation__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(30, 30, 28, 0.82) 0%,
        rgba(30, 30, 28, 0.68) 100%
    );
}
.nsr-foundation__content {
    position: relative;
    z-index: 1;
    max-width: 580px;
    color: var(--cream);
}
.nsr-foundation__eyebrow {
    display: block;
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-green);
    margin-bottom: 1rem;
}
.nsr-foundation__title {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cream);
    margin-bottom: 0.6rem;
}
.nsr-foundation__sub {
    font-family: var(--f-serif);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: var(--cream);
    opacity: 0.8;
    margin-bottom: 1.2rem;
}
.nsr-foundation__body {
    font-family: var(--f-sans);
    font-size: clamp(0.88rem, 1.1vw, 0.95rem);
    font-weight: 300;
    line-height: 1.8;
    color: var(--cream);
    opacity: 0.75;
    margin-bottom: 1.5rem;
}
.nsr-foundation__details {
    display: block;
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sage-green);
    margin-bottom: 1.8rem;
}
.nsr-foundation__cta {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream);
    padding: 0.75rem 2rem;
    border: 1.5px solid rgba(249, 248, 242, 0.35);
    border-radius: 50px;
    transition: all 0.8s var(--ease-somatic);
}
.nsr-foundation__cta:hover {
    border-color: var(--cream);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}


/* Reduced motion — see style.css for the authoritative sitewide block.
   Repeated here so this stylesheet is self-consistent if loaded alone. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Focus — keyboard affordance for this page's interactive elements. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sage-deep, #5A6457);
  outline-offset: 3px;
}


/* ── Short viewport (phone in landscape) — see style.css for the full why ──
   The hero VSL is capped against svh so height drives it; aspect-ratio: 16/9
   on .nsr-hero__vsl then derives the width and the ratio holds. min-height and
   the clamp() padding FLOORS stand down — a floor does not shrink, so
   clamp(6rem, 14svh, 8rem) was still 96px on a 375px-tall screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .nsr-hero {
    min-height: 0;
    padding-block: clamp(1.5rem, 6svh, 2.5rem) clamp(1rem, 4svh, 1.5rem);
  }

  .nsr-hero__vsl {
    width: min(100%, calc(60svh * 16 / 9));
    margin-top: clamp(0.5rem, 2svh, 1rem);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOUNDARY COLLAPSE — desktop only
   Added 2026-08-27. See the identical banner in offerings.css for the audit
   this came from.

   The reported symptom was the empty run above "Your Menu of Care": 315px from
   the last line of "Who this is for" to the eyebrow, against a site median of
   ~245px. Four rules contribute, and three of them are already justified in
   writing -- .nsr-who's asymmetric bottom (see :2003) has been trimmed twice
   against this very stack and is deliberately left alone here.

   The unjustified one is the divider. It applies a symmetric pad around a 26px
   glyph and neither neighbour compensates, so a decorative pause that already
   reads as a section break also charges a full section pad on each side of
   itself. A divider should REPLACE part of a boundary, not add to it.

   Adjacent-sibling, so .moc-section keeps its normal padding on soft-cycle and
   surya-namaskar where nothing precedes it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .nsr-somatic-divider {
    padding-block: clamp(1.75rem, 4svh, 3rem);
  }

  .nsr-somatic-divider + .moc-section {
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
  }

  /* Same shape one section up: .nsr-ecosystem -> .nsr-divider -> .nsr-curriculum
     stacks four contributions with, unlike .nsr-who, no compensating trim
     anywhere. Kept lighter than the somatic divider because this boundary
     measured 213/199 -- already close to median, so only the doubling goes. */
  .nsr-divider {
    padding-block: clamp(2rem, 4vw, 3rem);
  }
}