/* ═══════════════════════════════════════════════════════════════
   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 */
    --sage: #8A9A90;
    --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);
}

.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;
    /* Ready for GSAP stagger */
    opacity: 0;
    transform: translateY(24px);
}

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

/* Pivot text */
.nsr-mirror__pivot {
  max-width: var(--measure, 68ch);
    font-family: var(--f-sans);
    font-size: clamp(0.9rem, 0.85vw + 0.3rem, 1.02rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted-text);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* 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);
    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);
    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);
    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);
    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%);
    border: 1px solid rgba(138, 154, 144, 0.38);
    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(138, 154, 144, 0.62);
}

.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(138, 154, 144, 0.72);
    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);
    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);
}

.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);
}

/* 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);
}

/* 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);
    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);
    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);
    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);
}

.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);
    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-how-it-works__title, .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 .nsr-how-it-works a further full section
       pad — a symmetric bottom stacks all three into ~320px of empty space
       between this panel and the next heading. Top matches the page's
       dominant section padding; bottom hands off to the divider. */
    padding-block: clamp(5rem, 12svh, 10rem) clamp(3rem, 6svh, 5rem);
    padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* 1200px matches .nsr-guide above and .nsr-how-it-works below. 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: #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);
    opacity: 0.25;
}
.nsr-somatic-divider__glyph {
    font-family: var(--f-serif);
    font-size: 1.6rem;
    color: var(--sage);
    opacity: 0.4;
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS — 3-step horizontal layout
   ════════════════════════════════════════════════════════════════ */
.nsr-how-it-works {
    background: var(--cream);
    padding: clamp(4rem, 10svh, 8rem) clamp(1.5rem, 5vw, 4rem);
}
.nsr-how-it-works__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.nsr-how-it-works__title {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin-top: 0.8rem;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.nsr-how-it-works__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 700px) {
    .nsr-how-it-works__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}


/* ════════════════════════════════════════════════════════════════
   STEP — Individual step card within How It Works
   ════════════════════════════════════════════════════════════════ */
.nsr-step {
    text-align: left;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(138, 154, 144, 0.2);
}
.nsr-step__number {
    font-family: var(--f-serif);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--sage);
    opacity: 0.45;
    line-height: 1;
    margin-bottom: 0.8rem;
}
.nsr-step__label {
    font-family: var(--f-sans);
    font-size: clamp(0.9rem, 1.1vw, 0.98rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--charcoal);
}
.nsr-step__label strong {
    display: block;
    font-family: var(--f-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════════
   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);
    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);
    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);
  }
}