/* ============================================================
   SAFERISE DESIGN SYSTEM  ·  v1
   ------------------------------------------------------------
   Load LAST, after every existing stylesheet:
       <link rel="stylesheet" href="/css/saferise-system.css">

   PART A applies automatically to existing platform markup.
   PART B are opt-in components; they need the markup in
   INTEGRATION.md and are all namespaced `sr-` so they can
   never collide with the platform's own class names.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0 · TOKENS
   ───────────────────────────────────────────────────────────── */
:root{
  --sr-ease:cubic-bezier(.22,.61,.36,1);

  --sr-r-pill:999px;
  --sr-r-lg:20px;
  --sr-r-md:14px;
  --sr-r-sm:10px;

  --sr-lift:0 18px 44px -20px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.03) inset;
  --sr-ring:0 0 0 1px rgba(212,168,67,.30), 0 26px 60px -26px rgba(212,168,67,.22);
  --sr-hair:linear-gradient(160deg, rgba(212,168,67,.34), rgba(212,168,67,.06) 42%, rgba(255,255,255,.05));
  --sr-gold:linear-gradient(140deg,#ECC96A 0%,#D4A843 52%,#B98C2E 100%);

  /* protocol identity colours — shared by covers, tiles and rails */
  --sr-c01-1:#0B3F49; --sr-c01-2:#3FD8C4; --sr-c01-3:#07202B; /* Anxiety      */
  --sr-c02-1:#5A140E; --sr-c02-2:#FF7A3D; --sr-c02-3:#2A0705; /* Anger        */
  --sr-c03-1:#5E3B06; --sr-c03-2:#FFC24A; --sr-c03-3:#2A1804; /* Overwhelm    */
  --sr-c04-1:#54103A; --sr-c04-2:#FF6FA8; --sr-c04-3:#280719; /* Abandonment  */
  --sr-c05-1:#3A1258; --sr-c05-2:#B57BFF; --sr-c05-3:#1B0729; /* Shame        */
  --sr-c06-1:#132A5E; --sr-c06-2:#6E9DFF; --sr-c06-3:#08132C; /* Grief        */
  --sr-c07-1:#123F33; --sr-c07-2:#5BE08D; --sr-c07-3:#071F19; /* Shutdown     */
  --sr-c08-1:#3C4A0B; --sr-c08-2:#C6E84A; --sr-c08-3:#1B2205; /* Jealousy     */
  --sr-c09-1:#4B2A12; --sr-c09-2:#E39A5C; --sr-c09-3:#231208; /* Insecurity   */
  --sr-c10-1:#2B1148; --sr-c10-2:#D4A843; --sr-c10-3:#120620; /* Powerlessness*/

  /* track accents — the single source of truth (SR-108). Every track
     accent in the product reads these; index.html no longer restates
     them as literals. 02/03/04 previously held a more saturated set
     (#FF6FA8 / #5BC8D8 / #B57BFF) that only the dashboard ever showed,
     while every rendered page used the softer values below. The
     rendered design won, so the tokens now carry it. */
  --sr-track01:#D4A843;
  --sr-track02:#E87090;
  --sr-track03:#38C8BE;
  --sr-track04:#9B7FD4;
}

/* ═════════════════════════════════════════════════════════════
   PART A · GLOBAL — applies to existing markup, no HTML changes
   ═════════════════════════════════════════════════════════════ */

/* A1 · ambient field ─────────────────────────────────────────
   One slow gold bloom on the brand's own breath cadence. This is
   the only thing on the platform that moves unprompted. */
body::before{
  content:"";position:fixed;inset:-20vh -10vw auto;height:120vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(46vw 42vh at 22% 12%, rgba(212,168,67,.10), transparent 62%),
    radial-gradient(38vw 38vh at 84% 4%,  rgba(120,110,200,.07), transparent 60%);
  animation:sr-breath 18s var(--sr-ease) infinite;
  will-change:transform,opacity;
}
@keyframes sr-breath{
  0%,100%{transform:scale(1);opacity:.72}
  32%    {transform:scale(1.09);opacity:1}
  58%    {transform:scale(1.09);opacity:.94}
}
.theme-bar,.hero,section,.prog-overlay,.prog-page,#main-content{position:relative;z-index:1}

/* A2 · navigation ──────────────────────────────────────────── */
.theme-bar{
  background:linear-gradient(180deg,rgba(8,8,16,.94),rgba(8,8,16,.78));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid rgba(212,168,67,.16);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.9);
}
.nav-link{border-bottom:none!important;border-radius:var(--sr-r-pill);padding:9px 15px;
  transition:color .22s,background .22s}
.nav-link:hover{background:rgba(212,168,67,.10)}
.nav-link.active{background:rgba(212,168,67,.15);color:var(--primary)}
.nav-cta-link{background:var(--sr-gold);color:#0B0B14!important;font-weight:700!important}
.nav-cta-link:hover{filter:brightness(1.07)}

/* A3 · typography ─────────────────────────────────────────── */
.hero-title{font-size:clamp(48px,7.2vw,92px);line-height:.94;letter-spacing:-.018em;text-wrap:balance}
.hero-title span{background:linear-gradient(96deg,#F2DFA4,#D4A843 46%,#EBCB74);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{font-size:clamp(19px,2vw,23px);max-width:34ch}
.section-title{font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.014em;text-wrap:balance}
.section-body{font-size:20px;line-height:1.75;max-width:62ch}
.eyebrow,.section-tag,.j-eyebrow{letter-spacing:.38em}
.section-tag{display:inline-flex;align-items:center;gap:9px}
.section-tag::before{content:"";width:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary))}
.hero-rule{width:100px;height:1px;
  background:linear-gradient(90deg,var(--primary2),rgba(212,168,67,0))}

/* A4 · section seams ──────────────────────────────────────── */
/* section::before used to draw a full-viewport-width (left:0;right:0,
   no gutter) gradient hairline at the top of every single <section> on
   every page — 16 of them across the home page, the Personal
   Transformation portal's marketing sections and the About page, per
   an audit before removal. It rendered edge-to-edge past the 1100px
   content column on all of them, doubled up with .all-plans-pricing's
   own inline border-top, and crossed near the footer's Scope & Safety
   box on pages where a short trailing section sits close above it.
   Removed outright rather than re-scoped: every section it touched
   already carries its own separation — .sr-section had its own
   border, the rest rely on their existing 72–104px margin/padding —
   so no replacement hairline is needed anywhere. .sr-testi is gone
   (SR-275): the class this note originally credited no longer exists. */
section{border-top:0!important;padding-block:clamp(72px,9vw,128px)}

/* A5 · surfaces ───────────────────────────────────────────── */
.proto-item,.expert-card,.expert-card2,.step-card,.tier,.res-item,
.jprog-section,.jprog-tier-card,.jprog-prompt-card,.jprog-status-box,
.safety-widget,.j-cta,.jp5-card,.jp5-purpose-card,.pull-quote{
  border-radius:var(--sr-r-md);position:relative;
  transition:transform .3s var(--sr-ease),box-shadow .3s var(--sr-ease),border-color .3s}
.proto-item,.expert-card,.step-card,.tier{
  background-image:var(--sr-hair);background-origin:border-box;box-shadow:var(--sr-lift)}
.proto-item:hover,.expert-card:hover,.step-card:hover,
.tier:hover,.res-item:hover{
  transform:translateY(-3px);box-shadow:var(--sr-ring);border-color:rgba(212,168,67,.42)}
.proto-item.open{transform:none;box-shadow:var(--sr-ring)}
.proto-num,.j-num,.step-num,.sci-card-num{font-variant-numeric:tabular-nums}
.pull-quote{border-radius:0 var(--sr-r-md) var(--sr-r-md) 0;
  background:linear-gradient(120deg,rgba(212,168,67,.07),rgba(42,42,66,.5))}

/* #main-content only. One flat surface, no gradient border, no shadow,
   no hover glow — see CLAUDE.md decorative-cleanup pass. Card "-ness"
   comes from a single inline background-color tint set per instance;
   this rule only rounds the corners. */
.sci-card,.pangolin-card,.sr-panel{border-radius:var(--sr-r-md)}

/* A6 · media frames ───────────────────────────────────────── */
.media-block,.video-placeholder,.audio-placeholder,.pdf-placeholder{
  border-radius:var(--sr-r-lg);overflow:hidden}
.video-placeholder{
  background:radial-gradient(120% 120% at 50% 0%,rgba(212,168,67,.10),transparent 60%),var(--card);
  box-shadow:inset 0 0 0 1px rgba(212,168,67,.16),var(--sr-lift)}
.play-btn{transition:transform .3s var(--sr-ease),box-shadow .3s;
  box-shadow:0 0 0 0 rgba(212,168,67,.5)}
.video-placeholder:hover .play-btn{transform:scale(1.09);box-shadow:0 0 0 14px rgba(212,168,67,0)}
.v-progress,.audio-fill{background:var(--sr-gold)!important}
.hero-tab,.exp-tab,.jprog-tab,.safety-tab,.reader-tab{border-radius:var(--sr-r-sm)}
.hero-tab.active,.exp-tab.active{
  box-shadow:0 0 0 1px rgba(212,168,67,.4),0 12px 30px -18px rgba(212,168,67,.5)}

/* A7 · actions ────────────────────────────────────────────── */
.j-cta-btn,.jprog-btn,.jprog-consult-btn,.jp5-continue-btn,.jp5-open-btn,
.safety-save-btn,.resource-modal-unlock-btn,.j-share-btn,.ls-open,.res-action{
  border-radius:var(--sr-r-pill);position:relative;overflow:hidden;
  transition:transform .2s var(--sr-ease),box-shadow .25s,filter .2s}
.j-cta-btn:not(.ghost),.jprog-btn,.jp5-continue-btn{
  background:var(--sr-gold);color:#0B0B14;border-color:transparent}
.j-cta-btn:hover,.jprog-btn:hover,.jprog-consult-btn:hover,.jp5-open-btn:hover,
.safety-save-btn:hover,.j-share-btn:hover,.ls-open:hover,.res-action:hover{
  transform:translateY(-1px);box-shadow:0 14px 32px -16px rgba(212,168,67,.65)}
.j-cta-btn::after,.jprog-btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .7s var(--sr-ease)}
.j-cta-btn:hover::after,.jprog-btn:hover::after{transform:translateX(130%)}

a:focus-visible,button:focus-visible,[onclick]:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--primary2);outline-offset:3px;border-radius:6px}

/* A8 · reveal ─────────────────────────────────────────────── */
.reveal{transform:translateY(34px);
  transition:opacity .85s var(--sr-ease),transform .85s var(--sr-ease)}
.sr-stagger>*{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--sr-ease),transform .7s var(--sr-ease);
  transition-delay:calc(var(--i,0)*70ms)}
.sr-stagger.sr-in>*{opacity:1;transform:none}

/* A9 · SR-277 · track-page section reveal ────────────────────
   One rhythm for all three tracks: eyebrow, heading, supporting text,
   then the first thing after them — 0/100/200/300ms. js/saferise-track.js
   adds .sr-tp-revealsec to each top-level section and .sr-tp-in once it
   scrolls into view; everything below is a plain CSS transition off that
   one class, the same shape as .reveal/.sr-stagger above.

   Selectors read structure, not a fixed markup shape, because the hero
   (h1, no .sr-tp-sechead) and the price panel (manual eyebrow/h2/lede,
   no .sr-tp-sechead either) both carry the same class names as every
   sechead()-built section. ".sr-tp-lede+*" exists only to give the price
   panel a fourth beat where ".sr-tp-sechead+*" finds nothing to match.

   Never targets an <img> or the hero photograph — images stay static by
   omission, not by an added rule fighting one that would otherwise move
   them. SR-303 removed the sitewide transition/animation-duration
   suppression that used to live in the prefers-reduced-motion block below
   (Phase E — animations now run for every visitor), but a section that
   never receives .sr-tp-in (JS never runs, the observer never fires, it
   sits below a fold that's never scrolled) still stays at opacity:0
   regardless of motion preference — a trigger that never fires never
   fires. SR-288's unconditional override survives that removal (see the
   prefers-reduced-motion block below): these selectors forced to
   opacity:1/transform:none, independent of .sr-tp-in. */
.sr-tp-revealsec .sr-tp-eyebrow,
.sr-tp-revealsec h1,
.sr-tp-revealsec h2,
.sr-tp-revealsec .sr-tp-lede,
.sr-tp-revealsec .sr-tp-herorule,
.sr-tp-revealsec .sr-tp-body,
.sr-tp-revealsec .sr-tp-sechead+*,
.sr-tp-revealsec .sr-tp-lede+*{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--sr-ease),transform .6s var(--sr-ease)}
.sr-tp-revealsec .sr-tp-eyebrow{transition-delay:0ms}
.sr-tp-revealsec h1,.sr-tp-revealsec h2{transition-delay:100ms}
.sr-tp-revealsec .sr-tp-lede,.sr-tp-revealsec .sr-tp-herorule,
.sr-tp-revealsec .sr-tp-body{transition-delay:200ms}
.sr-tp-revealsec .sr-tp-sechead+*,.sr-tp-revealsec .sr-tp-lede+*{transition-delay:300ms}
.sr-tp-revealsec.sr-tp-in .sr-tp-eyebrow,
.sr-tp-revealsec.sr-tp-in h1,
.sr-tp-revealsec.sr-tp-in h2,
.sr-tp-revealsec.sr-tp-in .sr-tp-lede,
.sr-tp-revealsec.sr-tp-in .sr-tp-herorule,
.sr-tp-revealsec.sr-tp-in .sr-tp-body,
.sr-tp-revealsec.sr-tp-in .sr-tp-sechead+*,
.sr-tp-revealsec.sr-tp-in .sr-tp-lede+*{opacity:1;transform:none}

/* .sr-tp-pcard sets its own `transition:border-color .2s` (SR-174) at
   higher specificity (.sr-tp .sr-tp-pcard) than .sr-stagger>* (0,1,0), and
   a shorthand re-declaration resets every longhand it doesn't name — so
   the card's own rule was silently deleting the stagger's opacity/transform
   transition, leaving the entrance to snap instead of fade. Restated here at
   higher specificity than both, adding the two properties rather than
   replacing the border-color one it still needs on hover. */
.sr-tp .sr-tp-cartrack.sr-stagger>.sr-tp-pcard{
  transition:opacity .7s var(--sr-ease),transform .7s var(--sr-ease),border-color .2s;
  transition-delay:calc(var(--i,0)*70ms)}


/* ═════════════════════════════════════════════════════════════
   PART B · COMPONENTS — opt-in, need markup (see INTEGRATION.md)
   ═════════════════════════════════════════════════════════════ */

/* B1 · full-bleed banner ──────────────────────────────────── */
.sr-banner{position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;aspect-ratio:21/8;min-height:420px;max-height:640px;
  overflow:hidden;background:#0B0B14;margin-bottom:72px}
/* Personal Transformation's portal wrapper carries a 60px top padding
   for every other section on the page; the banner needs to sit flush
   under the nav instead, so this cancels that side plus the 4px gap
   between #main-nav's real rendered height (84px) and the flat 88px
   nav-clearance every .prog-overlay page uses (60 + 4 = 64). .sr-banner
   is exclusive to #prog-personal, but the rule is still scoped for
   clarity and to guard against a future reuse elsewhere. */
#prog-personal .sr-banner{margin-top:-64px}
.sr-banner-media{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.sr-banner-scrim{position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(6,6,12,.90) 0%,rgba(6,6,12,.66) 34%,
             rgba(6,6,12,.10) 62%,transparent 78%),
             linear-gradient(0deg,rgba(6,6,12,.85) 0%,transparent 34%)}
.sr-banner-copy{position:absolute;left:max(40px,calc(50vw - 550px));top:50%;
  transform:translateY(-58%);max-width:470px;z-index:2}
.sr-banner-copy h1{margin:0 0 14px;font:400 clamp(34px,4.4vw,62px)/1.02 'Cinzel',serif;
  letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.sr-banner-copy h1 em{display:block;font-style:normal;color:var(--primary2)}
.sr-banner-copy .sr-lead{margin:0 0 12px;
  font:italic 400 clamp(18px,1.6vw,23px)/1.45 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.sr-banner-copy p{margin:0;font:400 15px/1.72 'DM Sans',sans-serif;color:#DCD6E0;max-width:40ch}
.sr-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:88px;height:88px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);
  background:rgba(20,18,28,.34);backdrop-filter:blur(6px);cursor:pointer;
  display:grid;place-items:center;transition:transform .32s var(--sr-ease),box-shadow .4s}
.sr-play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.sr-banner:hover .sr-play{transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 18px rgba(255,255,255,.05)}

/* B2 · protocol carousel ──────────────────────────────────── */
.sr-car-head{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.sr-car-head .sr-kick{margin:0;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:5px;
  text-transform:uppercase;color:var(--primary)}
.sr-car-nav{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.sr-counter{font:400 13px/1 'DM Sans',sans-serif;color:var(--text3);
  font-variant-numeric:tabular-nums;letter-spacing:1px;min-width:52px;text-align:right}
.sr-counter b{color:var(--primary);font-weight:500}
.sr-arrow{width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(212,168,67,.42);background:transparent;
  transition:background .22s,border-color .22s,transform .22s var(--sr-ease)}
.sr-arrow svg{width:17px;height:17px;fill:none;stroke:var(--primary);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sr-arrow:hover{background:var(--primary);border-color:var(--primary);transform:scale(1.05)}
.sr-arrow:hover svg{stroke:#0B0B14}

.sr-carousel{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw}
.sr-carousel::before,.sr-carousel::after{content:"";position:absolute;top:0;bottom:30px;
  width:90px;pointer-events:none;z-index:2}
.sr-carousel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.sr-carousel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
/* item 3 (later session): the autoplay drift is continuous, not a
   snap-to-snap jump, so a partially-scrolled edge card is the normal
   resting look, not a rare in-between frame — and the fade above only
   ever covered the tile photo (bottom:30px stops well short of the
   title, which sits ~367-417px down) at a width (90px) far narrower
   than one card+gap unit (~282px at desktop), leaving a fully legible,
   hard-edged, mid-word title sitting right at the viewport boundary.
   Widened and deepened here, Personal only: full card height (bottom:0)
   so the fade actually reaches the title, and a two-stop gradient that
   goes solid for its first third rather than fading from the pixel-0
   edge, so a peeking card's title is substantively hidden long before
   the sliver becomes wide enough to read, not just dimmed. */
#prog-personal .sr-carousel::before,
#prog-personal .sr-carousel::after{bottom:0;width:180px}
#prog-personal .sr-carousel::before{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 35%,transparent 100%)}
#prog-personal .sr-carousel::after{
  background:linear-gradient(270deg,var(--bg) 0%,var(--bg) 35%,transparent 100%)}
@media(max-width:680px){
  #prog-personal .sr-carousel::before,
  #prog-personal .sr-carousel::after{width:120px}
}
.sr-ptrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  padding:6px max(40px,calc(50vw - 550px)) 30px}
.sr-ptrack::-webkit-scrollbar{display:none}

/* B3 · protocol cover card (works in grid OR carousel) ────── */
.sr-covers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.sr-cover{display:block;flex:0 0 clamp(212px,19vw,262px);scroll-snap-align:start;
  cursor:pointer;background:none;border:0;padding:0;text-align:left;outline-offset:6px;
  transition:transform .38s var(--sr-ease)}
.sr-covers .sr-cover{flex:none}
.sr-cover .sr-tile{display:block;position:relative;aspect-ratio:3/4;border-radius:var(--sr-r-md);
  overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.09);background:var(--c1);
  transition:box-shadow .38s var(--sr-ease),border-color .3s}
.sr-cover .sr-art{display:block;position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;
  background:radial-gradient(78% 58% at 26% 16%, var(--c2), transparent 66%),
             linear-gradient(158deg, var(--c1) 0%, var(--c3) 100%);
  transition:transform .6s var(--sr-ease)}
.sr-cover .sr-num{display:block;position:absolute;right:-12px;bottom:-26px;z-index:-1;
  font:600 132px/1 'Cinzel',serif;color:rgba(255,255,255,.13);letter-spacing:-.04em}
.sr-cover .sr-kicker{display:block;position:absolute;top:15px;left:15px;z-index:1;
  font:700 9px/1 'DM Sans',sans-serif;letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.sr-cover .sr-rule{display:block;position:absolute;left:15px;right:15px;bottom:15px;z-index:1;
  height:1px;background:rgba(255,255,255,.28);transform-origin:left;transform:scaleX(.34);
  transition:transform .45s var(--sr-ease),background .3s}
.sr-cover h3{margin:18px 0 6px;font:400 21px/1.18 'Cinzel',serif;color:var(--text);
  transition:color .25s}
.sr-cover .sr-trig{margin:0;font:400 13px/1.6 'DM Sans',sans-serif;color:var(--text3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-cover:hover{transform:translateY(-6px)}
.sr-cover:hover .sr-tile{border-color:rgba(255,255,255,.24);
  box-shadow:0 28px 52px -24px rgba(0,0,0,.9),0 0 0 1px rgba(212,168,67,.3)}
.sr-cover:hover .sr-art{transform:scale(1.07)}
.sr-cover:hover .sr-rule{transform:scaleX(1);background:var(--primary2)}
.sr-cover:hover h3{color:var(--primary2)}
.sr-cover[data-locked="true"] .sr-tile::after{content:"";position:absolute;inset:0;
  background:rgba(6,6,12,.5)}

.sr-c01{--c1:var(--sr-c01-1);--c2:var(--sr-c01-2);--c3:var(--sr-c01-3)}
.sr-c02{--c1:var(--sr-c02-1);--c2:var(--sr-c02-2);--c3:var(--sr-c02-3)}
.sr-c03{--c1:var(--sr-c03-1);--c2:var(--sr-c03-2);--c3:var(--sr-c03-3)}
.sr-c04{--c1:var(--sr-c04-1);--c2:var(--sr-c04-2);--c3:var(--sr-c04-3)}
.sr-c05{--c1:var(--sr-c05-1);--c2:var(--sr-c05-2);--c3:var(--sr-c05-3)}
.sr-c06{--c1:var(--sr-c06-1);--c2:var(--sr-c06-2);--c3:var(--sr-c06-3)}
.sr-c07{--c1:var(--sr-c07-1);--c2:var(--sr-c07-2);--c3:var(--sr-c07-3)}
.sr-c08{--c1:var(--sr-c08-1);--c2:var(--sr-c08-2);--c3:var(--sr-c08-3)}
.sr-c09{--c1:var(--sr-c09-1);--c2:var(--sr-c09-2);--c3:var(--sr-c09-3)}
.sr-c10{--c1:var(--sr-c10-1);--c2:var(--sr-c10-2);--c3:var(--sr-c10-3)}

/* B3b · light-art cover modifier ──────────────────────────────
   The overlay tokens above (.sr-kicker, .sr-num, .sr-rule, tile border)
   are tuned for dark photography. Personal Transformation's ten covers
   are light images, so this flips those four tokens to dark-ink
   equivalents. :hover states on .sr-cover carry an extra pseudo-class
   in their selector, so they already out-specificity these resting
   rules and are unaffected. */
.sr-cover--light .sr-kicker{color:#211C2B;text-shadow:none}
.sr-cover--light .sr-num{color:rgba(20,20,36,.16)}
.sr-cover--light .sr-rule{background:rgba(20,20,36,.28)}
.sr-cover--light .sr-tile{border-color:rgba(20,20,36,.14)}

/* B3c · Personal Transformation cover art — now real <img src>
   elements (item 1: only <img> supports loading/decoding/width/height,
   which is the whole point of this pass — a CSS background-image on
   .sr-art matching #prog-personal unconditionally used to fetch all 10
   cover photos AND all 10 banner photos the instant the carousel
   existed in the DOM, whether or not any of it was ever scrolled into
   view. The gradient identity now lives directly on .sr-art/
   .sr-proto-banner-media as a real `background` (B3 / B12 above) —
   painted behind the <img>'s own content, so a 404'd file still shows
   the tint instead of a blank tile, with no per-protocol rule needed
   here to wire a URL. */

/* B3d · Personal Transformation protocol-page banners — also real
   <img src> now (see B3c above); .sr-proto-banner-media's gradient
   fallback is defined alongside its other properties in B12. */

/* B4 · centred section head ───────────────────────────────── */
.sr-head{max-width:760px;margin:0 auto 52px;text-align:center}
.sr-head .sr-kick{margin:0 0 12px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:5px;
  text-transform:uppercase;color:var(--primary)}
.sr-head h2{margin:0 0 16px;font:400 clamp(28px,3.4vw,42px)/1.12 'Cinzel',serif;color:var(--text)}
.sr-head p{margin:0;font:italic 400 19px/1.7 'Cormorant Garamond',Georgia,serif;color:var(--text2)}
/* margin-bottom is negative on purpose: .sr-section (its parent) has no
   bottom padding/border, so this collapses straight through into the
   next section's own margin-top — the only lever available for closing
   that gap without touching the next section's CSS. Collapsing sums the
   largest positive margin with the most negative one, so -32px here
   trims the gap by exactly 32px (measured 176px → 144px against
   .sr-human's 104px margin-top), not 32px off some margin of its own. */
.sr-note{margin:44px auto -32px;text-align:center;max-width:74ch;
  font:400 13px/1.7 'DM Sans',sans-serif;color:var(--text3)}
/* index.html reuses the bare class name .sr-note for an unrelated Reader
   callout box, and both of its style blocks (#sr-v8-cool-reader,
   #sr-v9-lighter-resource-body) set its background with !important. A
   normal-weight rule here, however late it loads, cannot win against
   that — !important only loses to !important. This is the one place
   the system CSS uses it, specifically to null out those properties —
   and, now, to pull color back to the intended var(--text3): v8 also
   sets color:#D8D2DF!important, which at ~13.5:1 against the page
   background reads far brighter than a footnote should. */
.sr-note{background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;color:var(--text3)!important}

/* B5 · feature grid — "what's included" ───────────────────── */
.sr-section{margin-top:104px;padding-top:72px;border-top:1px solid rgba(212,168,67,.20)}
.sr-features{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px}
.sr-feat{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.sr-feat .sr-ico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(212,168,67,.30);background:linear-gradient(155deg,#1B1B2E,#12121F);
  transition:border-color .3s var(--sr-ease),transform .3s var(--sr-ease)}
.sr-feat .sr-ico svg{width:22px;height:22px;fill:none;stroke:var(--primary);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.sr-feat:hover .sr-ico{border-color:var(--primary);transform:translateY(-2px)}
.sr-feat h3{margin:6px 0 8px;font:400 19px/1.25 'Cinzel',serif;color:var(--text)}
.sr-feat p{margin:0;font:400 14px/1.68 'DM Sans',sans-serif;color:var(--text3)}
.sr-feat .sr-tagline{color:var(--primary2);font-style:italic;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}

/* B7 · human services pair ────────────────────────────────── */
.sr-human{margin-top:104px}
.sr-svc-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sr-svc{position:relative;display:flex;flex-direction:column;padding:38px 36px 34px;
  border-radius:16px;border:1px solid rgba(212,168,67,.22);overflow:hidden;
  background:linear-gradient(158deg,rgba(23,23,40,.96),rgba(14,14,26,.98));
  transition:transform .34s var(--sr-ease),box-shadow .34s var(--sr-ease),border-color .3s}
.sr-svc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.sr-svc::after{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:80%;
  border-radius:50%;background:var(--accent);opacity:.12;filter:blur(56px);pointer-events:none}
.sr-svc-group{--accent:#5BC8D8}
.sr-svc-solo{--accent:#D4A843}
.sr-svc:hover{transform:translateY(-5px);border-color:rgba(212,168,67,.5);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.92)}
.sr-svc-tag{position:absolute;top:20px;right:22px;z-index:1;
  font:700 8.5px/1 'DM Sans',sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--primary2);border:1px solid rgba(212,168,67,.42);
  border-radius:var(--sr-r-pill);padding:6px 11px}
.sr-svc-ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:22px;border:1px solid var(--accent);background:rgba(255,255,255,.03)}
.sr-svc-ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.sr-svc-kick{margin:0 0 10px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:3px;
  text-transform:uppercase;color:var(--accent)}
.sr-svc h3{margin:0 0 14px;font:400 25px/1.2 'Cinzel',serif;color:var(--text)}
.sr-svc-body{margin:0 0 24px;font:400 15px/1.72 'DM Sans',sans-serif;color:var(--text3)}
.sr-svc-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0}
.sr-svc-meta li{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text2);border:1px solid var(--border);border-radius:var(--sr-r-pill);padding:8px 13px}
.sr-svc-cta{margin-top:auto;width:100%;padding:16px;cursor:pointer;border-radius:var(--sr-r-pill);
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  font:700 11px/1 'DM Sans',sans-serif;letter-spacing:2.4px;text-transform:uppercase;
  transition:background .22s,color .22s}
.sr-svc-cta:hover{background:var(--accent);color:#0B0B14}

/* B8 · slim CTA band ──────────────────────────────────────── */
.sr-ctabar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:88px;padding:22px 30px;border-radius:var(--sr-r-pill);
  border:1px solid rgba(212,168,67,.30);
  background:linear-gradient(100deg,rgba(212,168,67,.09),rgba(23,23,40,.9) 46%,rgba(14,14,26,.95))}
.sr-ctabar[hidden]{display:none}
.sr-ctabar .sr-say{margin:0;flex:1 1 320px;
  font:italic 400 19px/1.45 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.sr-ctabar .sr-say b{font-style:normal;font-weight:400;color:var(--primary2)}
.sr-ctabar .sr-acts{display:flex;align-items:center;gap:20px;flex:none}
.sr-ctabar .sr-start{background:var(--sr-gold);color:#0B0B14;border:none;cursor:pointer;
  white-space:nowrap;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:2.4px;
  text-transform:uppercase;padding:16px 30px;border-radius:var(--sr-r-pill);
  transition:transform .2s var(--sr-ease),box-shadow .25s}
.sr-ctabar .sr-start:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(212,168,67,.7)}
.sr-ctabar .sr-free{white-space:nowrap;text-decoration:none;
  border-bottom:1px solid rgba(212,168,67,.4);padding-bottom:2px;
  font:500 13px/1 'DM Sans',sans-serif;color:var(--text2);transition:color .2s}
.sr-ctabar .sr-free:hover{color:var(--primary2)}

/* B9 · FAQ ────────────────────────────────────────────────── */
.sr-faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
details.sr-q{border-bottom:1px solid var(--border)}
details.sr-q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font:400 18px/1.4 'Cormorant Garamond',Georgia,serif;color:var(--text);
  transition:color .22s}
details.sr-q summary::-webkit-details-marker{display:none}
details.sr-q summary:hover,details.sr-q[open] summary{color:var(--primary2)}
details.sr-q summary .sr-sign{flex:none;width:18px;height:18px;margin-top:3px;position:relative}
details.sr-q summary .sr-sign::before,details.sr-q summary .sr-sign::after{content:"";
  position:absolute;background:var(--primary);
  transition:transform .28s var(--sr-ease),opacity .28s}
details.sr-q summary .sr-sign::before{top:8px;left:0;width:18px;height:1.5px}
details.sr-q summary .sr-sign::after{left:8px;top:0;width:1.5px;height:18px}
details.sr-q[open] summary .sr-sign::after{transform:rotate(90deg);opacity:0}
details.sr-q .sr-a{padding:0 0 22px 34px;margin:0;
  font:400 15px/1.75 'DM Sans',sans-serif;color:var(--text3);max-width:56ch}
details.sr-q .sr-a + .sr-a{padding-top:0;margin-top:-8px}
details.sr-q .sr-a a{color:var(--primary2)}

/* B10 · footer + scope notice ─────────────────────────────── */
/* text-align:left overrides the platform's legacy bare `footer{text-align:center}`
   rule (index.html) — that selector targets the element, not a class, so it
   still cascades onto any real <footer>, including this one. */
.sr-foot{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;
  margin-top:110px;padding:0 0 34px;background:#06060D;text-align:left}
.sr-foot-in{max-width:1180px;margin:0 auto;padding:0 40px}
.sr-scope{margin:0;padding:30px 34px;border-radius:var(--sr-r-md);transform:translateY(-34px);
  border:1px solid rgba(212,168,67,.28);
  background:linear-gradient(140deg,rgba(212,168,67,.08),rgba(20,20,34,.96))}
.sr-scope h3{margin:0 0 12px;display:flex;align-items:center;gap:10px;
  font:700 10px/1 'DM Sans',sans-serif;letter-spacing:3px;text-transform:uppercase;
  color:var(--primary)}
.sr-scope h3 svg{width:16px;height:16px;fill:none;stroke:var(--primary);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sr-scope p{margin:0 0 12px;font:400 14px/1.75 'DM Sans',sans-serif;color:var(--text2);max-width:92ch}
.sr-scope p:last-child{margin-bottom:0}
.sr-scope b{color:var(--text);font-weight:500}
.sr-scope a{color:var(--primary2)}
.sr-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:8px 0 40px}
.sr-foot-brand .sr-mk{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sr-foot-brand .sr-disc{width:38px;height:38px;border-radius:50%;border:1px solid var(--primary);
  display:grid;place-items:center;font:400 15px/1 'Cinzel',serif;color:var(--primary);
  background:radial-gradient(circle at 40% 34%,#22223A,#0B0B16)}
.sr-foot-brand b{display:block;font:400 14px/1.15 'Cinzel',serif;letter-spacing:5px;color:var(--primary)}
.sr-foot-brand i{display:block;font:400 8px/1 'DM Sans',sans-serif;letter-spacing:5px;
  color:var(--text3);font-style:normal}
.sr-foot-brand p{margin:0;font:italic 400 16px/1.65 'Cormorant Garamond',Georgia,serif;
  color:var(--text3);max-width:34ch}
.sr-foot-col h4{margin:0 0 16px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--text2)}
.sr-foot-col ul{list-style:none;margin:0;padding:0}
.sr-foot-col li{margin-bottom:11px}
.sr-foot-col a{text-decoration:none;font:400 14px/1.5 'DM Sans',sans-serif;color:var(--text3);
  transition:color .2s}
.sr-foot-col a:hover{color:var(--primary2)}
.sr-foot-bottom{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding-top:26px;border-top:1px solid rgba(245,237,216,.08)}
.sr-foot-bottom p{margin:0;font:400 12.5px/1.6 'DM Sans',sans-serif;color:var(--text3)}
.sr-foot-bottom .sr-spacer{margin-left:auto}
.sr-foot-bottom a{color:var(--text3);text-decoration:none;font:400 12.5px/1 'DM Sans',sans-serif}
.sr-foot-bottom a:hover{color:var(--primary2)}

/* B11 · chapter rail + scroll thread (long marketing pages) ─ */
#sr-thread{position:fixed;left:0;top:0;height:2px;width:0;z-index:1002;
  background:linear-gradient(90deg,rgba(212,168,67,0),#ECC96A 60%,#D4A843);
  box-shadow:0 0 14px rgba(212,168,67,.6);transition:width .12s linear}
#sr-rail{position:fixed;left:0;right:0;z-index:999;display:flex;justify-content:center;
  pointer-events:none;opacity:0;transform:translateY(-8px);
  transition:opacity .35s,transform .35s}
#sr-rail.sr-on{opacity:1;transform:none}
#sr-rail .sr-rail-in{pointer-events:auto;display:flex;gap:4px;padding:5px;
  max-width:min(94vw,940px);overflow-x:auto;scrollbar-width:none;
  border-radius:var(--sr-r-pill);background:rgba(17,17,32,.82);backdrop-filter:blur(18px);
  border:1px solid rgba(212,168,67,.16);box-shadow:0 16px 40px -24px #000}
#sr-rail .sr-rail-in::-webkit-scrollbar{display:none}
#sr-rail button{flex:0 0 auto;border:0;cursor:pointer;background:transparent;color:var(--text3);
  font:600 10px/1 'DM Sans',sans-serif;letter-spacing:1.6px;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--sr-r-pill);white-space:nowrap;transition:all .22s}
#sr-rail button:hover{color:var(--text2);background:rgba(212,168,67,.08)}
#sr-rail button.sr-on{color:#0B0B14;background:var(--sr-gold)}

/* B12 · Personal Transformation — open protocol page banner ───
   Full-bleed banner replaces the old cover-led header. The cover
   (.sr-tile) stays for the carousel card; the two new wrapper spans
   (.sr-proto-banner, .sr-proto-banner-copy) are `display:contents`
   by default so wrapping them around the existing title/description
   doesn't change the carousel card's flow at all — the banner
   treatment below only switches on inside #personal-protocol-page.
   No min/max-height clamp above 980px: the source images are a fixed
   2880×686 (4.2:1) and aspect-ratio alone holds that exactly at every
   desktop/tablet width. Below 980px the ratio would crush the banner
   to under 100px tall and clip the overlaid title/description, so it
   switches to the same auto-height/padding fallback the portal's own
   .sr-banner already uses at that width — the ratio requirement is a
   full-bleed-photography concern, not a mandate to clip text. */
.sr-proto-banner,.sr-proto-banner-copy{display:contents}
/* item 4 (later session): the cover <img> and the open-page banner
   <img> are each now wrapped in <picture> for the WebP/srcset source,
   which — unlike the plain <img> this replaces — is an unstyled tag
   with no sr- class to hang the display:contents trick on directly.
   Kept transparent to layout the same way its parent already is. */
.sr-tile picture,.sr-proto-banner picture{display:contents}
/* .sr-proto-banner-media is a real <img> now (item 1), which — unlike
   the empty <span> it replaced — has visible content and box-generates
   even under a `display:contents` parent. Hidden by default so it
   doesn't show up inside the carousel card; switched back on only
   inside the open-page banner below. */
.sr-proto-banner-media{display:none}
#personal-protocol-page .proto-item{display:block}
#personal-protocol-page .proto-item .sr-tile{display:none}

/* SR-123 · THESE TWO RULES ARE A PAIR. DO NOT DELETE THE SECOND ONE.
   Relocated here from an inline <style id="sr-series-hero"> block in
   index.html, whose other 25 rules were dead and were removed. It is here,
   adjacent to the display:none above, because the two only make sense
   together.

   What it prevents · .sr-tile carries aspect-ratio:3/4, sized for the ~230px
   carousel card it was designed for. The view-swap script relocates a
   .proto-item into the full-width #personal-protocol-page mount, where that
   same ratio would scale the tile to roughly 1300px tall — a wall of gradient
   where a page banner belongs. Capping to a fixed height is what stops that.

   Why it currently changes nothing you can see · the display:none directly
   above wins, so the tile has no box at all. Measured with the view swap
   triggered: removing this rule moves computed aspect-ratio 'auto' -> '3 / 4'
   and height '240px' -> 'auto', while the rendered box stays 0x0 and the page
   height does not move by a pixel.

   Why it stays anyway · the hazard is real and only masked. Delete the
   display:none above, or stop nesting the tile inside .proto-item, and this
   rule becomes load-bearing again with nothing in the tree connecting the two
   events. A future reader will measure zero rendered change and conclude this
   is dead code — it is not. Registered as a deliberate keep under SR-123,
   same class as extras:null in META and the launch/standard pair in PRICING. */
#personal-protocol-page .sr-tile{aspect-ratio:auto;height:240px}
/* Resources-Final diff, Group 1 — supersedes the previous "compact banner
   strip" pass entirely: the mockup has no separate banner strip at any
   width. The cover photo lives behind #experience .sechead--lead
   (.sr-exp-hero here) instead, moved there by syncExperienceHeroMedia().
   Once moved, .sr-proto-banner fills its new parent, .sr-exp-hero-media —
   see that class below. */
#personal-protocol-page .proto-item .sr-proto-banner{
  display:block;position:absolute;inset:0}
#personal-protocol-page .proto-item .sr-proto-banner-media{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  background:radial-gradient(78% 58% at 26% 16%, var(--c2), transparent 66%),
             linear-gradient(158deg, var(--c1) 0%, var(--c3) 100%)}
/* Scrim per mockup's v7 background-image recipe for #experience .sechead--lead */
#personal-protocol-page .proto-item .sr-proto-banner-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,12,.98) 0%,rgba(8,8,12,.88) 43%,
             rgba(8,8,12,.36) 72%,rgba(208,220,216,.12) 100%)}
/* Title/description no longer render here — the hero card's own kicker/h1/lede/subline carry them. */
#personal-protocol-page .proto-item .sr-proto-banner-copy{display:none}

/* Cover artwork (assets/covers/*.jpg) has the kicker word, protocol
   number and rule baked into the photo — the .sr-kicker/.sr-num/.sr-rule
   spans drawn below are a leftover from before the artwork existed and
   would double them. .sr-cover only appears in Personal Transformation. */
#prog-personal .sr-cover .sr-kicker,
#prog-personal .sr-cover .sr-num,
#prog-personal .sr-cover .sr-rule{display:none}

/* Evaluate list — 78px was too narrow for "Relationships"; it overflowed
   the grid cell and crowded the row text beside it. */
#prog-personal .fit-meter-row{grid-template-columns:96px 1fr}

/* Section 4 — two prominent sub-headings ("Log a Session", "Journal");
   the status/meta text around them (Where You Are, What's Next via the
   shared jprog-tier-head/jprog-status-head rule, Recent Sessions, Past
   Entries and the Why-here note via the existing .jprog-label/.jprog-why
   rules) is left at its already-small size, now reading as quieter by
   comparison rather than by its own change. */
#prog-personal .jprog-subhead{
  font:400 18px/1.25 'Cinzel',serif;color:var(--text);margin:24px 0 16px}
#prog-personal .jprog-subhead:first-child{margin-top:0}
#prog-personal .jprog-tier-head,
#prog-personal .jprog-status-head{
  font:600 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text3)}

/* B13 · Open protocol page — border/hairline cleanup + gutters ─
   Audited borders on #personal-protocol-page before this rule:
     .proto-item          box-shadow var(--sr-ring): 0 0 0 1px gold +
                           a soft drop shadow — a full outline "rail"
                           around the whole card, sitting right across
                           the top of the now-edge-to-edge banner.
     .proto-item           background-image var(--sr-hair) — a diagonal
                           gold-to-transparent gradient painted as a
                           second, subtler hairline across the same box.
     .proto-expand         border-top 1px var(--border) — a divider
                           directly under the banner, before step 1.
     .sr-cover:hover .sr-tile   border-color change + box-shadow
                           0 0 0 1px gold — a ring on the cover's hover
                           panel (the carousel card, not this page, but
                           audited together since item 2 groups them).
   Four distinct styles, all removed below except the .j-step border,
   which is the one kept divider — it already only fires between
   numbered stages (.j-step:first-child has border-top:none). */
#personal-protocol-page .proto-item{box-shadow:none;background-image:none}
#personal-protocol-page .proto-item .proto-expand{border-top:0}
#prog-personal .sr-cover:hover .sr-tile{
  border-color:rgba(255,255,255,.24);box-shadow:0 28px 52px -24px rgba(0,0,0,.9)}
#prog-personal .sr-cover--light:hover .sr-tile{border-color:rgba(20,20,36,.24)}

/* Wrapper panel, deleted as a visual surface — .proto-item was still
   painting rgb(42,42,66) (var(--surface), 980px wide, 14px radius)
   behind everything below the banner: a second, narrower "card" sitting
   under the full-bleed banner above it. No background, no radius —
   content now sits directly on the page ground (#0A0A0D, set below). */
#personal-protocol-page .proto-item{background:none;border-radius:0}

/* Protocol-page content used to sit flush against .proto-item's own
   edge, then get a flat 40px/24px gutter with no relationship to
   anything else on the page. Now it uses the exact formula the
   banner's own overlaid copy uses — max(40px, 50vw - 550px) — via the
   same full-bleed breakout .sr-proto-banner already does, so the two
   line up on the same left edge at every viewport width instead of by
   coincidence at one. */
#personal-protocol-page .proto-item .proto-expand{
  position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;box-sizing:border-box;
  padding-left:max(40px,calc(50vw - 550px));
  padding-right:max(40px,calc(50vw - 550px))}
@media(max-width:980px){
  #personal-protocol-page .proto-item .proto-expand{padding-left:26px;padding-right:26px}
}

/* Cover hover panel: title/description sat flush against the card's
   left/right edge (same 0-padding cause as above). The open-page
   banner copy already has its own left offset and max-width, so its
   padding is reset back to 0 to avoid a double inset. */
#prog-personal .sr-cover h3.proto-name,
#prog-personal .sr-cover .proto-landing-desc{padding:0 16px}
#personal-protocol-page .proto-item .sr-proto-banner-copy .proto-name,
#personal-protocol-page .proto-item .sr-proto-banner-copy .proto-landing-desc{padding:0}

/* B14 · Practice & Journal — neutral tonal ladder ──────────────
   The platform's --card2/--surface tokens this block used to inherit
   (#242438, #2A2A42) run noticeably bluer than red/green — a violet
   cast — and sit too close together in value. Replaced with a flat,
   self-contained neutral ladder, scoped to .jprog-section only:
     page #0A0A0D    → .jprog-section itself (the block's own ground)
     section #131317 → .jprog-journal-block (the Journal sub-group —
                        nested one level into the page, one tone up)
     card #1C1C21    → jprog-tier-card/rec-box/stat ("Where You Are",
                        "What's Next") and jprog-prompt-card
     input #24242A   → select / textareas
     hairline #33333B, used only for the tab strip border and the
     entry-list dividers — nothing else in this block gets a border.
   Gold is #C9A03C throughout (replacing var(--primary)'s #D4A843
   here specifically) and only appears on genuinely interactive/accent
   elements — active tab, badges, buttons, the active prompt chip —
   not as a background tint (the old rgba(212,168,67,.08) note/prefill
   washes are gone, replaced by the card tone). */
#prog-personal .jprog-section{
  background:#0A0A0D;padding:28px 30px 32px;border-radius:var(--sr-r-md);max-width:none}
#prog-personal .jprog-eyebrow{color:#77747C}
#prog-personal .jprog-title{color:#F2EDE3}
#prog-personal .jprog-sub{color:#95929A}
#prog-personal .jprog-tabs{border-color:#33333B}
#prog-personal .jprog-tab{color:#77747C}
#prog-personal .jprog-tab:hover{color:#95929A}
#prog-personal .jprog-tab.active{color:#0A0A0D;background:#C9A03C;box-shadow:none}
#prog-personal .jprog-status-box,#prog-personal .jprog-tier-card{
  background:#1C1C21;padding:16px 18px;border-radius:6px}
#prog-personal .jprog-status-head,#prog-personal .jprog-tier-head{color:#F2EDE3}
#prog-personal .jprog-status-pill,#prog-personal .jprog-tier-badge{
  color:#C9A03C;background:rgba(201,160,60,.14);border-color:rgba(201,160,60,.32)}
#prog-personal .jprog-status-box p,#prog-personal .jprog-tier-text{color:#95929A}
#prog-personal .jprog-next,#prog-personal .jprog-rec-box{background:#1C1C21;color:#95929A;border-radius:6px}
#prog-personal .jprog-next strong,#prog-personal .jprog-rec-box strong{color:#C9A03C}
#prog-personal .jprog-stat{background:#1C1C21;border-color:#33333B}
#prog-personal .jprog-stat-label{color:#77747C}
#prog-personal .jprog-stat-value{color:#F2EDE3}
#prog-personal .jprog-why{color:#77747C}
#prog-personal .jprog-why strong{color:#C9A03C}
#prog-personal .jprog-label{color:#77747C}
#prog-personal .jprog-select,#prog-personal .jprog-log-note,#prog-personal .jprog-journal-text{
  background:#24242A;border-color:#33333B;color:#F2EDE3}
#prog-personal .jprog-select::placeholder,#prog-personal .jprog-log-note::placeholder,
#prog-personal .jprog-journal-text::placeholder{color:#77747C}
#prog-personal .jprog-btn{background:#C9A03C;color:#0A0A0D}
#prog-personal .jprog-log-list,#prog-personal .jprog-journal-list{color:#77747C}
#prog-personal .jprog-entry{border-color:#33333B}
#prog-personal .jprog-entry-meta{color:#77747C}
#prog-personal .jprog-entry-text{color:#95929A}
/* Item 4 (later session) — Log a Session and Journal each get their own
   #1C1C21 card enclosure with real vertical gap between them; the
   status/meta content around them (status-group, jprog-recent,
   jprog-past) stays outside both, unstyled as a "surface" at all, so
   the two things a member actually DOES stay the visually loudest
   things in the block. */
#prog-personal .jprog-enclosure{
  background:#1C1C21;border-radius:10px;padding:24px 26px;margin:22px 0}
#prog-personal .jprog-enclosure .jprog-subhead{margin-top:0}
#prog-personal .jprog-status-group{margin-bottom:4px}
#prog-personal .jprog-recent,
#prog-personal .jprog-past{margin:22px 0}
#prog-personal .jprog-prompt-card{background:#24242A;border-radius:6px}
#prog-personal .jprog-prompt-kicker{color:#C9A03C}
#prog-personal .jprog-prompt-text{color:#F2EDE3}
#prog-personal .jprog-prompt-chip{border-color:#33333B;color:#77747C}
#prog-personal .jprog-prompt-chip.active{background:#C9A03C;color:#0A0A0D;border-color:#C9A03C}
#prog-personal .jprog-prompt-use{border-color:#C9A03C;color:#C9A03C}
#prog-personal .jprog-prompt-shuffle{border-color:#33333B;color:#77747C}
#prog-personal .jprog-past{border-top:0;margin-top:28px;padding-top:0}
#prog-personal .jprog-consult-prefill{background:#1C1C21;border-color:#33333B;color:#95929A}
#prog-personal .jprog-consult-prefill strong{color:#F2EDE3}
#prog-personal .jprog-consult-intro{color:#95929A}
#prog-personal .jprog-textarea{background:#24242A;border-color:#33333B;color:#F2EDE3}
#prog-personal .jprog-textarea::placeholder{color:#77747C}
#prog-personal .jprog-consult-btn{background:#C9A03C;color:#0A0A0D}
#prog-personal .jprog-consult-note{color:#77747C}
#prog-personal .jprog-subhead{color:#F2EDE3}

/* .id-evidence-card ("The Chosen Self" / "Open the Decision") is a
   fifth panel injected into .jprog-section by a separate script
   (initIdentityEvidence) — a gold-washed card the .jprog-* audit above
   doesn't reach. A later !important rule elsewhere in the file already
   strips its background to transparent for Reader "decision" pages
   and reinstates gold-tinted top/bottom hairlines; both need
   !important here to still win inside this block. */
#prog-personal .id-evidence-card{
  background:#1C1C21!important;border:0!important;border-radius:6px!important;padding:18px!important}
#prog-personal .id-evidence-card small{color:#C9A03C}
#prog-personal .id-evidence-card strong{color:#F2EDE3}
#prog-personal .id-evidence-card p{color:#95929A}
#prog-personal .id-evidence-open{border-color:#33333B;color:#C9A03C}
#prog-personal .id-evidence-open:hover{border-color:#C9A03C}

/* B16 · Personal Transformation — page-level neutral ladder ────
   B14 put the neutral ladder inside Section 4's cards but left the
   surfaces those cards (and everything else on the page) sit on still
   painting the platform's own --bg/--bg3/--card/--card2/--surface/
   --surface2 tokens — every one of which carries a violet cast (blue
   channel 8–30 above red/green). Extended here to the whole page:
     page    #0A0A0D  → #prog-personal itself (was var(--bg) #080810)
     raised  #131317  → tab chrome, side panels (was var(--bg3))
     card    #1C1C21  → media frames, resource rows (was var(--card))
     input   #24242A  → nested media controls, icon chips
                         (was var(--card2)/var(--surface2))
     hairline #33333B → replaces every var(--border)'s gold tint on
                         these same elements — a gold border on a
                         neutral surface still read like a stray accent
   Scoped to #prog-personal throughout — the underlying --bg3/--card/
   --surface tokens stay untouched for the other three portals. */
#prog-personal.prog-overlay{background:#0A0A0D}

#prog-personal .media-block,
#prog-personal .exp-tab,
#prog-personal .hero-tab,
#prog-personal .listen-side,
#prog-personal .res-item,
#prog-personal .jp5-card{background:#131317}
#prog-personal .exp-tab:hover,
#prog-personal .hero-tab:hover,
#prog-personal .res-item:hover{background:#1C1C21}
#prog-personal .exp-tab.active,
#prog-personal .hero-tab.active{background:#1C1C21}

#prog-personal .video-placeholder,
#prog-personal .audio-placeholder,
#prog-personal .pdf-placeholder{background:#1C1C21}
#prog-personal .pdf-placeholder:hover{background:#24242A}

#prog-personal .video-bar,
#prog-personal .res-icon,
#prog-personal .pdf-icon,
#prog-personal .jp5-modal,
#prog-personal .jp5-input,
#prog-personal .jp5-close{background:#24242A;border-color:#33333B}

/* Border audit (item 4): .media-block and .listen-side carried a full
   1px outline with no hover/active state ever changing it — pure panel
   chrome, redundant now that the raised/card contrast above already
   reads as a distinct surface. Dropped outright. .exp-tab/.hero-tab/
   .res-item DO use their border to signal state (hover, active/selected)
   so the border itself stays, just transparent at rest instead of a
   visible neutral-grey outline — the gold on hover/active is the only
   version of it a visitor ever needs to see. fit-meter-row's own
   bottom-border row dividers are dropped too: B13 (previous session)
   already settled on keeping exactly one divider style on this page
   (.j-step, between numbered stages) and this was a second style that
   slipped through that pass. */
#prog-personal .media-block,
#prog-personal .listen-side{border:0}
#prog-personal .exp-tab,
#prog-personal .hero-tab,
#prog-personal .res-item{border-color:transparent}
#prog-personal .exp-tab:hover,
#prog-personal .hero-tab:hover{border-color:transparent}
#prog-personal .exp-tab.active,
#prog-personal .hero-tab.active,
#prog-personal .res-item:hover{border-color:var(--primary)}
#prog-personal .fit-meter-row{border-bottom:0}

/* B17 · Services section (Monthly Workshop / Premium 1:1) ──────
   .sr-human sat directly on the page background with no surface of
   its own; its two .sr-svc cards painted rgba(23,23,40,*)→(14,14,26,*)
   — a violet-tinted gradient. Raised tone on the section (padded and
   rounded so it reads as one lifted block, not just a colour change
   flush with the page edges), card tone on the cards themselves —
   the same two-step relationship B14/B16 already use elsewhere. */
#prog-personal .sr-human{
  background:#131317;border-radius:20px;padding:56px 56px 60px}
#prog-personal .sr-svc{background:#1C1C21}
#prog-personal .sr-svc:hover{box-shadow:0 30px 60px -28px rgba(0,0,0,.92)}
@media(max-width:760px){
  #prog-personal .sr-human{padding:40px 24px 44px;border-radius:16px}
}

/* ═════════════════════════════════════════════════════════════
   B18 · Relationship Healing & Professional — same component
   system as Personal Transformation (B1–B17 above), replicated
   onto #prog-couples/#prog-corporate. Every rule below is scoped
   to one or both of those two ids (plus their own #couples-/
   #corporate- mount ids), so nothing here touches #prog-personal,
   the home page, or the Reader. Gold is replaced throughout by
   var(--sr-accent)/-wash/-border, already declared per-track
   inline on the .prog-overlay root (rose var(--sr-track02) for
   couples, teal var(--sr-track03) for corporate) — one shared rule renders in each
   track's own colour automatically. Couples/Corporate protocol
   content uses .simple-expand (not .proto-expand.journey) as its
   reveal wrapper, so the gutter/border-cleanup rules below target
   that class name instead — same formula, same result.
   ═════════════════════════════════════════════════════════════ */
#prog-couples .sr-banner,
#prog-corporate .sr-banner{margin-top:-64px}

/* Fallback identity tint behind each cover/banner <img> (shows only
   if a photo 404s, or for the instant before it decodes) — one flat
   tint per track instead of ten per-protocol hues, since each track
   shares a single photographic identity, not ten. Personal used to
   carry its own sr-c01..sr-c10 (see TOKENS above, each a different
   hue) — replaced here by sr-cover-gold, a single gold family
   matching how Relationship/Professional already do rose/teal. The
   old sr-c01..sr-c10 rules and --sr-c0N-1/-2/-3 vars are left in
   place, just unreferenced now — nothing else used them. */
.sr-cover-rose{--c1:#3A0F1E;--c2:var(--sr-track02);--c3:#1A0509}
.sr-cover-teal{--c1:#06282A;--c2:var(--sr-track03);--c3:#031415}
.sr-cover-gold{--c1:#2E2308;--c2:var(--sr-track01);--c3:#140E03}

/* B12 · Personal Transformation — open protocol page banner ───
   Full-bleed banner replaces the old cover-led header. The cover
   (.sr-tile) stays for the carousel card; the two new wrapper spans
   (.sr-proto-banner, .sr-proto-banner-copy) are `display:contents`
   by default so wrapping them around the existing title/description
   doesn't change the carousel card's flow at all — the banner
   treatment below only switches on inside #personal-protocol-page.
   No min/max-height clamp above 980px: the source images are a fixed
   2880×686 (4.2:1) and aspect-ratio alone holds that exactly at every
   desktop/tablet width. Below 980px the ratio would crush the banner
   to under 100px tall and clip the overlaid title/description, so it
   switches to the same auto-height/padding fallback the portal's own
   .sr-banner already uses at that width — the ratio requirement is a
   full-bleed-photography concern, not a mandate to clip text. */
.sr-proto-banner,
.sr-proto-banner-copy{display:contents}
/* .sr-proto-banner-media is a real <img> now (item 1), which — unlike
   the empty <span> it replaced — has visible content and box-generates
   even under a `display:contents` parent. Hidden by default so it
   doesn't show up inside the carousel card; switched back on only
   inside the open-page banner below. */
.sr-proto-banner-media{display:none}
#couples-protocol-page .proto-item,
#corporate-protocol-page .proto-item{display:block}
#couples-protocol-page .proto-item .sr-tile,
#corporate-protocol-page .proto-item .sr-tile{display:none}
#couples-protocol-page .proto-item .sr-proto-banner,
#corporate-protocol-page .proto-item .sr-proto-banner{
  display:block;position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;aspect-ratio:2880/686;overflow:hidden;
  background:#0A0A0D;margin-bottom:48px}
#couples-protocol-page .proto-item .sr-proto-banner-media,
#corporate-protocol-page .proto-item .sr-proto-banner-media{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  background:radial-gradient(78% 58% at 26% 16%, var(--c2), transparent 66%),
             linear-gradient(158deg, var(--c1) 0%, var(--c3) 100%)}
#couples-protocol-page .proto-item .sr-proto-banner-scrim,
#corporate-protocol-page .proto-item .sr-proto-banner-scrim{
  position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(6,6,12,.90) 0%,rgba(6,6,12,.66) 34%,
             rgba(6,6,12,.10) 62%,transparent 78%),
             linear-gradient(0deg,rgba(6,6,12,.85) 0%,transparent 34%)}
#couples-protocol-page .proto-item .sr-proto-banner-copy,
#corporate-protocol-page .proto-item .sr-proto-banner-copy{
  display:block;position:absolute;left:max(40px,calc(50vw - 550px));top:50%;
  transform:translateY(-50%);max-width:560px;z-index:2}
#couples-protocol-page .proto-item .sr-proto-banner-copy .proto-name,
#corporate-protocol-page .proto-item .sr-proto-banner-copy .proto-name{
  margin:0 0 12px;font:400 clamp(24px,3vw,40px)/1.1 'Cinzel',serif;
  color:var(--text);text-shadow:0 2px 20px rgba(0,0,0,.6)}
#couples-protocol-page .proto-item .sr-proto-banner-copy .proto-landing-desc,
#corporate-protocol-page .proto-item .sr-proto-banner-copy .proto-landing-desc{
  margin:0;display:block;overflow:visible;-webkit-line-clamp:unset;
  font:italic 400 16px/1.6 'Cormorant Garamond',Georgia,serif;
  color:#DCD6E0;max-width:48ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
@media(max-width:980px){
  #couples-protocol-page .proto-item .sr-proto-banner,
#corporate-protocol-page .proto-item .sr-proto-banner{
    aspect-ratio:auto;padding:72px 26px 56px}
  /* position:relative (not static) so z-index:2 still lifts the copy
     above the absolutely-positioned media/scrim — a static element
     paints below positioned siblings regardless of z-index. */
  #couples-protocol-page .proto-item .sr-proto-banner-copy,
#corporate-protocol-page .proto-item .sr-proto-banner-copy{
    position:relative;transform:none;left:auto;max-width:none;padding-right:26px}
}

/* Cover artwork (assets/covers/*.jpg) has the kicker word, protocol
   number and rule baked into the photo — the .sr-kicker/.sr-num/.sr-rule
   spans drawn below are a leftover from before the artwork existed and
   would double them. .sr-cover only appears in Personal Transformation. */
#prog-couples .sr-cover .sr-kicker,
#prog-corporate .sr-cover .sr-kicker,
#prog-couples .sr-cover .sr-num,
#prog-corporate .sr-cover .sr-num,
#prog-couples .sr-cover .sr-rule,
#prog-corporate .sr-cover .sr-rule{display:none}

/* Evaluate list — 78px was too narrow for "Relationships"; it overflowed
   the grid cell and crowded the row text beside it. */
#prog-couples .fit-meter-row,
#prog-corporate .fit-meter-row{grid-template-columns:96px 1fr}

/* Section 4 — two prominent sub-headings ("Log a Session", "Journal");
   the status/meta text around them (Where You Are, What's Next via the
   shared jprog-tier-head/jprog-status-head rule, Recent Sessions, Past
   Entries and the Why-here note via the existing .jprog-label/.jprog-why
   rules) is left at its already-small size, now reading as quieter by
   comparison rather than by its own change. */
#prog-couples .jprog-subhead,
#prog-corporate .jprog-subhead{
  font:400 18px/1.25 'Cinzel',serif;color:var(--text);margin:24px 0 16px}
#prog-couples .jprog-subhead:first-child,
#prog-corporate .jprog-subhead:first-child{margin-top:0}
#prog-couples .jprog-tier-head,
#prog-corporate .jprog-tier-head,
#prog-couples .jprog-status-head,
#prog-corporate .jprog-status-head{
  font:600 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text3)}

/* B13 · Open protocol page — border/hairline cleanup + gutters ─
   Audited borders on #personal-protocol-page before this rule:
     .proto-item          box-shadow var(--sr-ring): 0 0 0 1px gold +
                           a soft drop shadow — a full outline "rail"
                           around the whole card, sitting right across
                           the top of the now-edge-to-edge banner.
     .proto-item           background-image var(--sr-hair) — a diagonal
                           gold-to-transparent gradient painted as a
                           second, subtler hairline across the same box.
     .proto-expand         border-top 1px var(--border) — a divider
                           directly under the banner, before step 1.
     .sr-cover:hover .sr-tile   border-color change + box-shadow
                           0 0 0 1px gold — a ring on the cover's hover
                           panel (the carousel card, not this page, but
                           audited together since item 2 groups them).
   Four distinct styles, all removed below except the .j-step border,
   which is the one kept divider — it already only fires between
   numbered stages (.j-step:first-child has border-top:none). */
#couples-protocol-page .proto-item,
#corporate-protocol-page .proto-item{box-shadow:none;background-image:none}
#couples-protocol-page .proto-item .simple-expand,
#corporate-protocol-page .proto-item .simple-expand{border-top:0}
#prog-couples .sr-cover:hover .sr-tile,
#prog-corporate .sr-cover:hover .sr-tile{
  border-color:rgba(255,255,255,.24);box-shadow:0 28px 52px -24px rgba(0,0,0,.9)}
#prog-couples .sr-cover--light:hover .sr-tile,
#prog-corporate .sr-cover--light:hover .sr-tile{border-color:rgba(20,20,36,.24)}

/* Wrapper panel, deleted as a visual surface — .proto-item was still
   painting rgb(42,42,66) (var(--surface), 980px wide, 14px radius)
   behind everything below the banner: a second, narrower "card" sitting
   under the full-bleed banner above it. No background, no radius —
   content now sits directly on the page ground (#0A0A0D, set below). */
#couples-protocol-page .proto-item,
#corporate-protocol-page .proto-item{background:none;border-radius:0}

/* Protocol-page content used to sit flush against .proto-item's own
   edge, then get a flat 40px/24px gutter with no relationship to
   anything else on the page. Now it uses the exact formula the
   banner's own overlaid copy uses — max(40px, 50vw - 550px) — via the
   same full-bleed breakout .sr-proto-banner already does, so the two
   line up on the same left edge at every viewport width instead of by
   coincidence at one. */
#couples-protocol-page .proto-item .simple-expand,
#corporate-protocol-page .proto-item .simple-expand{
  position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;box-sizing:border-box;
  padding-left:max(40px,calc(50vw - 550px));
  padding-right:max(40px,calc(50vw - 550px))}
@media(max-width:980px){
  #couples-protocol-page .proto-item .simple-expand,
#corporate-protocol-page .proto-item .simple-expand{padding-left:26px;padding-right:26px}
}

/* Cover hover panel: title/description sat flush against the card's
   left/right edge (same 0-padding cause as above). The open-page
   banner copy already has its own left offset and max-width, so its
   padding is reset back to 0 to avoid a double inset. */
#prog-couples .sr-cover h3.proto-name,
#prog-corporate .sr-cover h3.proto-name,
#prog-couples .sr-cover .proto-landing-desc,
#prog-corporate .sr-cover .proto-landing-desc{padding:0 16px}
#couples-protocol-page .proto-item .sr-proto-banner-copy .proto-name,
#corporate-protocol-page .proto-item .sr-proto-banner-copy .proto-name,
#couples-protocol-page .proto-item .sr-proto-banner-copy .proto-landing-desc,
#corporate-protocol-page .proto-item .sr-proto-banner-copy .proto-landing-desc{padding:0}

/* B14 · Practice & Journal — neutral tonal ladder ──────────────
   The platform's --card2/--surface tokens this block used to inherit
   (#242438, #2A2A42) run noticeably bluer than red/green — a violet
   cast — and sit too close together in value. Replaced with a flat,
   self-contained neutral ladder, scoped to .jprog-section only:
     page #0A0A0D    → .jprog-section itself (the block's own ground)
     section #131317 → .jprog-journal-block (the Journal sub-group —
                        nested one level into the page, one tone up)
     card #1C1C21    → jprog-tier-card/rec-box/stat ("Where You Are",
                        "What's Next") and jprog-prompt-card
     input #24242A   → select / textareas
     hairline #33333B, used only for the tab strip border and the
     entry-list dividers — nothing else in this block gets a border.
   Gold is var(--sr-accent) throughout (replacing var(--primary)'s #D4A843
   here specifically) and only appears on genuinely interactive/accent
   elements — active tab, badges, buttons, the active prompt chip —
   not as a background tint (the old rgba(212,168,67,.08) note/prefill
   washes are gone, replaced by the card tone). */
#prog-couples .jprog-section,
#prog-corporate .jprog-section{
  background:#0A0A0D;padding:28px 30px 32px;border-radius:var(--sr-r-md);max-width:none}
#prog-couples .jprog-eyebrow,
#prog-corporate .jprog-eyebrow{color:#77747C}
#prog-couples .jprog-title,
#prog-corporate .jprog-title{color:#F2EDE3}
#prog-couples .jprog-sub,
#prog-corporate .jprog-sub{color:#95929A}
#prog-couples .jprog-tabs,
#prog-corporate .jprog-tabs{border-color:#33333B}
#prog-couples .jprog-tab,
#prog-corporate .jprog-tab{color:#77747C}
#prog-couples .jprog-tab:hover,
#prog-corporate .jprog-tab:hover{color:#95929A}
#prog-couples .jprog-tab.active,
#prog-corporate .jprog-tab.active{color:#0A0A0D;background:var(--sr-accent);box-shadow:none}
#prog-couples .jprog-status-box,
#prog-corporate .jprog-status-box,
#prog-couples .jprog-tier-card,
#prog-corporate .jprog-tier-card{
  background:#1C1C21;padding:16px 18px;border-radius:6px}
#prog-couples .jprog-status-head,
#prog-corporate .jprog-status-head,
#prog-couples .jprog-tier-head,
#prog-corporate .jprog-tier-head{color:#F2EDE3}
#prog-couples .jprog-status-pill,
#prog-corporate .jprog-status-pill,
#prog-couples .jprog-tier-badge,
#prog-corporate .jprog-tier-badge{
  color:var(--sr-accent);background:var(--sr-accent-wash);border-color:var(--sr-accent-border)}
#prog-couples .jprog-status-box p,
#prog-corporate .jprog-status-box p,
#prog-couples .jprog-tier-text,
#prog-corporate .jprog-tier-text{color:#95929A}
#prog-couples .jprog-next,
#prog-corporate .jprog-next,
#prog-couples .jprog-rec-box,
#prog-corporate .jprog-rec-box{background:#1C1C21;color:#95929A;border-radius:6px}
#prog-couples .jprog-next strong,
#prog-corporate .jprog-next strong,
#prog-couples .jprog-rec-box strong,
#prog-corporate .jprog-rec-box strong{color:var(--sr-accent)}
#prog-couples .jprog-stat,
#prog-corporate .jprog-stat{background:#1C1C21;border-color:#33333B}
#prog-couples .jprog-stat-label,
#prog-corporate .jprog-stat-label{color:#77747C}
#prog-couples .jprog-stat-value,
#prog-corporate .jprog-stat-value{color:#F2EDE3}
#prog-couples .jprog-why,
#prog-corporate .jprog-why{color:#77747C}
#prog-couples .jprog-why strong,
#prog-corporate .jprog-why strong{color:var(--sr-accent)}
#prog-couples .jprog-label,
#prog-corporate .jprog-label{color:#77747C}
#prog-couples .jprog-select,
#prog-corporate .jprog-select,
#prog-couples .jprog-log-note,
#prog-corporate .jprog-log-note,
#prog-couples .jprog-journal-text,
#prog-corporate .jprog-journal-text{
  background:#24242A;border-color:#33333B;color:#F2EDE3}
#prog-couples .jprog-select::placeholder,
#prog-corporate .jprog-select::placeholder,
#prog-couples .jprog-log-note::placeholder,
#prog-corporate .jprog-log-note::placeholder,
#prog-couples .jprog-journal-text::placeholder,
#prog-corporate .jprog-journal-text::placeholder{color:#77747C}
#prog-couples .jprog-btn,
#prog-corporate .jprog-btn{background:var(--sr-accent);color:#0A0A0D}
#prog-couples .jprog-log-list,
#prog-corporate .jprog-log-list,
#prog-couples .jprog-journal-list,
#prog-corporate .jprog-journal-list{color:#77747C}
#prog-couples .jprog-entry,
#prog-corporate .jprog-entry{border-color:#33333B}
#prog-couples .jprog-entry-meta,
#prog-corporate .jprog-entry-meta{color:#77747C}
#prog-couples .jprog-entry-text,
#prog-corporate .jprog-entry-text{color:#95929A}
/* Item 4 (later session) — Log a Session and Journal each get their own
   #1C1C21 card enclosure with real vertical gap between them; the
   status/meta content around them (status-group, jprog-recent,
   jprog-past) stays outside both, unstyled as a "surface" at all, so
   the two things a member actually DOES stay the visually loudest
   things in the block. */
#prog-couples .jprog-enclosure,
#prog-corporate .jprog-enclosure{
  background:#1C1C21;border-radius:10px;padding:24px 26px;margin:22px 0}
#prog-couples .jprog-enclosure .jprog-subhead,
#prog-corporate .jprog-enclosure .jprog-subhead{margin-top:0}
#prog-couples .jprog-status-group,
#prog-corporate .jprog-status-group{margin-bottom:4px}
#prog-couples .jprog-recent,
#prog-corporate .jprog-recent,
#prog-couples .jprog-past,
#prog-corporate .jprog-past{margin:22px 0}
#prog-couples .jprog-prompt-card,
#prog-corporate .jprog-prompt-card{background:#24242A;border-radius:6px}
#prog-couples .jprog-prompt-kicker,
#prog-corporate .jprog-prompt-kicker{color:var(--sr-accent)}
#prog-couples .jprog-prompt-text,
#prog-corporate .jprog-prompt-text{color:#F2EDE3}
#prog-couples .jprog-prompt-chip,
#prog-corporate .jprog-prompt-chip{border-color:#33333B;color:#77747C}
#prog-couples .jprog-prompt-chip.active,
#prog-corporate .jprog-prompt-chip.active{background:var(--sr-accent);color:#0A0A0D;border-color:var(--sr-accent)}
#prog-couples .jprog-prompt-use,
#prog-corporate .jprog-prompt-use{border-color:var(--sr-accent);color:var(--sr-accent)}
#prog-couples .jprog-prompt-shuffle,
#prog-corporate .jprog-prompt-shuffle{border-color:#33333B;color:#77747C}
#prog-couples .jprog-past,
#prog-corporate .jprog-past{border-top:0;margin-top:28px;padding-top:0}
#prog-couples .jprog-consult-prefill,
#prog-corporate .jprog-consult-prefill{background:#1C1C21;border-color:#33333B;color:#95929A}
#prog-couples .jprog-consult-prefill strong,
#prog-corporate .jprog-consult-prefill strong{color:#F2EDE3}
#prog-couples .jprog-consult-intro,
#prog-corporate .jprog-consult-intro{color:#95929A}
#prog-couples .jprog-textarea,
#prog-corporate .jprog-textarea{background:#24242A;border-color:#33333B;color:#F2EDE3}
#prog-couples .jprog-textarea::placeholder,
#prog-corporate .jprog-textarea::placeholder{color:#77747C}
#prog-couples .jprog-consult-btn,
#prog-corporate .jprog-consult-btn{background:var(--sr-accent);color:#0A0A0D}
#prog-couples .jprog-consult-note,
#prog-corporate .jprog-consult-note{color:#77747C}
#prog-couples .jprog-subhead,
#prog-corporate .jprog-subhead{color:#F2EDE3}

/* .id-evidence-card ("The Chosen Self" / "Open the Decision") is a
   fifth panel injected into .jprog-section by a separate script
   (initIdentityEvidence) — a gold-washed card the .jprog-* audit above
   doesn't reach. A later !important rule elsewhere in the file already
   strips its background to transparent for Reader "decision" pages
   and reinstates gold-tinted top/bottom hairlines; both need
   !important here to still win inside this block. */
#prog-couples .id-evidence-card,
#prog-corporate .id-evidence-card{
  background:#1C1C21!important;border:0!important;border-radius:6px!important;padding:18px!important}
#prog-couples .id-evidence-card small,
#prog-corporate .id-evidence-card small{color:var(--sr-accent)}
#prog-couples .id-evidence-card strong,
#prog-corporate .id-evidence-card strong{color:#F2EDE3}
#prog-couples .id-evidence-card p,
#prog-corporate .id-evidence-card p{color:#95929A}
#prog-couples .id-evidence-open,
#prog-corporate .id-evidence-open{border-color:#33333B;color:var(--sr-accent)}
#prog-couples .id-evidence-open:hover,
#prog-corporate .id-evidence-open:hover{border-color:var(--sr-accent)}

/* B16 · Personal Transformation — page-level neutral ladder ────
   B14 put the neutral ladder inside Section 4's cards but left the
   surfaces those cards (and everything else on the page) sit on still
   painting the platform's own --bg/--bg3/--card/--card2/--surface/
   --surface2 tokens — every one of which carries a violet cast (blue
   channel 8–30 above red/green). Extended here to the whole page:
     page    #0A0A0D  → #prog-personal itself (was var(--bg) #080810)
     raised  #131317  → tab chrome, side panels (was var(--bg3))
     card    #1C1C21  → media frames, resource rows (was var(--card))
     input   #24242A  → nested media controls, icon chips
                         (was var(--card2)/var(--surface2))
     hairline #33333B → replaces every var(--border)'s gold tint on
                         these same elements — a gold border on a
                         neutral surface still read like a stray accent
   Scoped to #prog-personal throughout — the underlying --bg3/--card/
   --surface tokens stay untouched for the other three portals. */
#prog-couples.prog-overlay,
#prog-corporate.prog-overlay{background:#0A0A0D}

#prog-couples .media-block,
#prog-corporate .media-block,
#prog-couples .exp-tab,
#prog-corporate .exp-tab,
#prog-couples .hero-tab,
#prog-corporate .hero-tab,
#prog-couples .listen-side,
#prog-corporate .listen-side,
#prog-couples .res-item,
#prog-corporate .res-item,
#prog-couples .jp5-card,
#prog-corporate .jp5-card{background:#131317}
#prog-couples .exp-tab:hover,
#prog-corporate .exp-tab:hover,
#prog-couples .hero-tab:hover,
#prog-corporate .hero-tab:hover,
#prog-couples .res-item:hover,
#prog-corporate .res-item:hover{background:#1C1C21}
#prog-couples .exp-tab.active,
#prog-corporate .exp-tab.active,
#prog-couples .hero-tab.active,
#prog-corporate .hero-tab.active{background:#1C1C21}

#prog-couples .video-placeholder,
#prog-corporate .video-placeholder,
#prog-couples .audio-placeholder,
#prog-corporate .audio-placeholder,
#prog-couples .pdf-placeholder,
#prog-corporate .pdf-placeholder{background:#1C1C21}
#prog-couples .pdf-placeholder:hover,
#prog-corporate .pdf-placeholder:hover{background:#24242A}

#prog-couples .video-bar,
#prog-corporate .video-bar,
#prog-couples .res-icon,
#prog-corporate .res-icon,
#prog-couples .pdf-icon,
#prog-corporate .pdf-icon,
#prog-couples .jp5-modal,
#prog-corporate .jp5-modal,
#prog-couples .jp5-input,
#prog-corporate .jp5-input,
#prog-couples .jp5-close,
#prog-corporate .jp5-close{background:#24242A;border-color:#33333B}

/* Border audit (item 4): .media-block and .listen-side carried a full
   1px outline with no hover/active state ever changing it — pure panel
   chrome, redundant now that the raised/card contrast above already
   reads as a distinct surface. Dropped outright. .exp-tab/.hero-tab/
   .res-item DO use their border to signal state (hover, active/selected)
   so the border itself stays, just transparent at rest instead of a
   visible neutral-grey outline — the gold on hover/active is the only
   version of it a visitor ever needs to see. fit-meter-row's own
   bottom-border row dividers are dropped too: B13 (previous session)
   already settled on keeping exactly one divider style on this page
   (.j-step, between numbered stages) and this was a second style that
   slipped through that pass. */
#prog-couples .media-block,
#prog-corporate .media-block,
#prog-couples .listen-side,
#prog-corporate .listen-side{border:0}
#prog-couples .exp-tab,
#prog-corporate .exp-tab,
#prog-couples .hero-tab,
#prog-corporate .hero-tab,
#prog-couples .res-item,
#prog-corporate .res-item{border-color:transparent}
#prog-couples .exp-tab:hover,
#prog-corporate .exp-tab:hover,
#prog-couples .hero-tab:hover,
#prog-corporate .hero-tab:hover{border-color:transparent}
#prog-couples .exp-tab.active,
#prog-corporate .exp-tab.active,
#prog-couples .hero-tab.active,
#prog-corporate .hero-tab.active,
#prog-couples .res-item:hover,
#prog-corporate .res-item:hover{border-color:var(--primary)}
#prog-couples .fit-meter-row,
#prog-corporate .fit-meter-row{border-bottom:0}

/* B17 · Services section (Monthly Workshop / Premium 1:1) ──────
   .sr-human sat directly on the page background with no surface of
   its own; its two .sr-svc cards painted rgba(23,23,40,*)→(14,14,26,*)
   — a violet-tinted gradient. Raised tone on the section (padded and
   rounded so it reads as one lifted block, not just a colour change
   flush with the page edges), card tone on the cards themselves —
   the same two-step relationship B14/B16 already use elsewhere. */
#prog-couples .sr-human,
#prog-corporate .sr-human{
  background:#131317;border-radius:20px;padding:56px 56px 60px}
#prog-couples .sr-svc,
#prog-corporate .sr-svc{background:#1C1C21}
#prog-couples .sr-svc:hover,
#prog-corporate .sr-svc:hover{box-shadow:0 30px 60px -28px rgba(0,0,0,.92)}
@media(max-width:760px){
  #prog-couples .sr-human,
#prog-corporate .sr-human{padding:40px 24px 44px;border-radius:16px}
}

/* B15 · Reader — dark reading surface + mode toggle ────────────
   The Reader is one shared modal reused by every portal — there is
   no per-track DOM to hang an id off — so unlike the rest of this
   file, every rule here is scoped by #reader-overlay (the modal's
   own id) rather than a portal id. That also gives each rule enough
   specificity to beat the platform's v8–v12 Reader patches (all
   !important, all loaded earlier in the document) regardless of
   source order, which plain class-for-class !important cannot do.

   Three modes, switched by [data-reader-mode] on .reader-modal:
   dark (default) / sepia / light, each defining the same variable
   set so every rule below is only written once. */
#reader-overlay .reader-modal{
  --rd-ground:#0D0D11; --rd-sidebar:#141419; --rd-rail:#17171D;
  --rd-quote:#16161B; --rd-card:#1C1C21; --rd-hair:rgba(232,227,217,.12);
  --rd-heading:#E8E3D9; --rd-body:#C4BFB7; --rd-meta:#8B8791;
  --rd-accent:#D4A843; --rd-on-accent:#0D0D11;
}
#reader-overlay .reader-modal[data-reader-mode="sepia"]{
  --rd-ground:#1A1712; --rd-sidebar:#221D16; --rd-rail:#26211A;
  --rd-quote:#221D17; --rd-card:#2B251D; --rd-hair:rgba(237,228,211,.14);
  --rd-heading:#EDE4D3; --rd-body:#C9BEA8; --rd-meta:#8F8570;
  --rd-accent:#D4A843; --rd-on-accent:#1A1712;
}
#reader-overlay .reader-modal[data-reader-mode="light"]{
  --rd-ground:#F2EAD8; --rd-sidebar:#FBF7EE; --rd-rail:#F7F1E3;
  --rd-quote:#ECE1CB; --rd-card:#E7DCC5; --rd-hair:rgba(43,38,32,.14);
  --rd-heading:#2B2620; --rd-body:#4A4438; --rd-meta:#857A66;
  --rd-accent:#A47B22; --rd-on-accent:#FBF7EE;
}

/* Container width: was max-width:1440px (near full-viewport). The open
   protocol page's own container is 1100px (the site's canonical
   .container gutter), so the Reader now matches it — still enough for
   the 300px sidebar + 64px×2 page padding + a 70ch reading column. */
#reader-overlay .reader-modal{max-width:1100px!important;background:var(--rd-ground)!important}

/* Chrome — ground must read darker than sidebar/rail in every mode */
#reader-overlay .reader-sidebar{background:var(--rd-sidebar)!important}
#reader-overlay .reader-rail{background:var(--rd-rail)!important}
#reader-overlay .reader-content{background:var(--rd-ground)!important}
#reader-overlay .reader-content-topbar{background:var(--rd-sidebar)!important;border-bottom-color:var(--rd-hair)!important;color:var(--rd-meta)!important}
#reader-overlay .reader-bottom-nav{background:var(--rd-sidebar)!important;border-top-color:var(--rd-hair)!important}
#reader-overlay .reader-sidebar-head{border-bottom-color:var(--rd-hair)!important}
#reader-overlay .reader-rail-actions{border-top-color:var(--rd-hair)!important}
#reader-overlay .reader-back-link{color:var(--rd-meta)!important}
#reader-overlay .reader-back-link:hover{color:var(--rd-accent)!important}
#reader-overlay .reader-nav-btn{color:var(--rd-meta)!important}
#reader-overlay .reader-protocol-title,
#reader-overlay .reader-sidebar-quote{color:var(--rd-heading)!important}
#reader-overlay .reader-progress-line,
#reader-overlay .reader-sidebar-label,
#reader-overlay .reader-rail-label,
#reader-overlay .reader-rail-count{color:var(--rd-meta)!important}
#reader-overlay .reader-progress-track{background:var(--rd-card)!important}
#reader-overlay .reader-progress-fill{background:var(--rd-accent)!important}
#reader-overlay .reader-tab-title{color:var(--rd-body)!important}
#reader-overlay .reader-tab.active .reader-tab-title{color:var(--rd-heading)!important}
#reader-overlay .reader-tab-desc,
#reader-overlay .reader-tab-meta-row{color:var(--rd-meta)!important}
#reader-overlay .reader-tab-icon{background:var(--rd-card)!important;border-color:var(--rd-hair)!important}
#reader-overlay .reader-tab-icon svg{stroke:var(--rd-meta)!important}
#reader-overlay .reader-tab.active .reader-tab-icon{border-color:var(--rd-accent)!important}
#reader-overlay .reader-tab.active .reader-tab-icon svg{stroke:var(--rd-accent)!important}
#reader-overlay .reader-tab.active{background:color-mix(in srgb, var(--rd-accent) 10%, transparent)!important;border-left-color:var(--rd-accent)!important}
#reader-overlay .reader-tab:hover{background:color-mix(in srgb, var(--rd-heading) 6%, transparent)!important}
#reader-overlay .reader-sidebar-footer,
#reader-overlay .reader-rail-footer{background:var(--rd-card)!important;border-color:var(--rd-hair)!important}
#reader-overlay .reader-sidebar-footer p,
#reader-overlay .reader-rail-footer p{color:var(--rd-body)!important}
#reader-overlay .reader-step-node{background:var(--rd-card)!important;border-color:var(--rd-hair)!important;color:var(--rd-meta)!important}
#reader-overlay .reader-step-node.current{background:var(--rd-accent)!important;border-color:var(--rd-accent)!important;color:var(--rd-on-accent)!important}
#reader-overlay .reader-step-connector{background:var(--rd-hair)!important}
#reader-overlay .reader-step-label{color:var(--rd-meta)!important}
#reader-overlay .reader-step-label.current,
#reader-overlay .reader-step.current .reader-step-label{color:var(--rd-heading)!important}
#reader-overlay .reader-rail-action svg{color:var(--rd-meta)!important}
#reader-overlay .reader-rail-action span{color:var(--rd-body)!important}
#reader-overlay .reader-rail-card{background:var(--rd-card)!important;border-color:var(--rd-hair)!important}
#reader-overlay .reader-rail-card p{color:var(--rd-body)!important}
#reader-overlay .reader-dot{background:var(--rd-hair)!important}
#reader-overlay .reader-dot.active{background:var(--rd-accent)!important}

/* Reading content — the actual document */
#reader-overlay .reader-page-title{color:var(--rd-heading)!important}
#reader-overlay .reader-page-tags,
#reader-overlay .reader-page-meta{color:var(--rd-meta)!important}
#reader-overlay .reader-page-meta{border-bottom-color:var(--rd-hair)!important}
#reader-overlay .reader-page-divider .mark{color:var(--rd-accent)!important}
#reader-overlay .reader-page-divider .line{background:var(--rd-hair)!important}
#reader-overlay .reader-page-body,
#reader-overlay .reader-page-body p{color:var(--rd-body)!important}
#reader-overlay .reader-page-body h2,
#reader-overlay .reader-page-body h3,
#reader-overlay .reader-page-body h4{color:var(--rd-heading)!important}
#reader-overlay .reader-page-quote{background:var(--rd-quote)!important;border-radius:8px}
#reader-overlay .reader-page-quote p{color:var(--rd-heading)!important}
#reader-overlay .reader-page-quote .attr{color:var(--rd-accent)!important}
#reader-overlay .reader-page-body p.rm-quote,
#reader-overlay .reader-page-body .rm-pullquote{
  background:var(--rd-quote)!important;color:var(--rd-heading)!important;border-left-color:var(--rd-accent)!important}
#reader-overlay .reader-page-locked{background:var(--rd-card)!important;border-color:var(--rd-accent)!important}
#reader-overlay .reader-page-locked p{color:var(--rd-body)!important}
#reader-overlay .video-placeholder{
  background-color:var(--rd-card)!important;
  background-image:radial-gradient(120% 120% at 50% 0%,rgba(212,168,67,.10),transparent 60%)!important}

/* Reading rhythm — 70ch measure, 18/1.8, in every mode */
#reader-overlay .reader-page-body{max-width:70ch!important;font-size:18px!important;line-height:1.8!important}
#reader-overlay .reader-page-body>p{margin:0 0 24px!important}

/* Best-effort neutral pass over the resource-specific components below
   (id-evidence excluded — that one's covered by B14, reachable directly
   from the protocol page). These were hand-tuned to the old navy-purple
   palette across the v8–v12 patches; rather than leave them frozen to
   one mode's colours, their surfaces/text now track the same variables
   as everything else in the reader. */
#reader-overlay .reader-page-body .rm-archetype,
#reader-overlay .sr-perspective,
#reader-overlay .sr-everyday-box,
#reader-overlay .sr-bodymap-wrap,
#reader-overlay .sr-zones>div,
#reader-overlay .sr-activity-grid>div,
#reader-overlay .sr-disclosure-card,
#reader-overlay .sr-distinction>div,
#reader-overlay .sr-tier-card,
#reader-overlay .sr-tier-detail,
#reader-overlay .sr-easy-list li,
#reader-overlay .sr-highlight-row>div,
#reader-overlay .sr-number-step,
#reader-overlay .sr-section-block,
#reader-overlay .sr-guide-intro,
#reader-overlay .sr-first-minute li,
#reader-overlay .sr-founder-insight{background:var(--rd-card)!important;border-color:var(--rd-hair)!important}
#reader-overlay .reader-page-body .rm-archetype-name,
#reader-overlay .sr-perspective strong,
#reader-overlay .sr-tier-title,
#reader-overlay .sr-disclosure-card b,
#reader-overlay .sr-distinction b,
#reader-overlay .sr-number-step h4,
#reader-overlay .sr-guide-intro h3,
#reader-overlay .sr-section-block h3,
#reader-overlay .sr-ref-hero h3,
#reader-overlay .sr-founder-head h3{color:var(--rd-heading)!important}
#reader-overlay .reader-page-body .rm-archetype p,
#reader-overlay .sr-perspective p,
#reader-overlay .sr-everyday-box p,
#reader-overlay .sr-zones em,
#reader-overlay .sr-activity-grid p,
#reader-overlay .sr-disclosure-card p,
#reader-overlay .sr-distinction p,
#reader-overlay .sr-tier-summary,
#reader-overlay .sr-tier-detail span,
#reader-overlay .sr-number-step p,
#reader-overlay .sr-guide-intro p,
#reader-overlay .sr-easy-list li,
#reader-overlay .sr-highlight-row span,
#reader-overlay .sr-founder-copy p{color:var(--rd-body)!important}
#reader-overlay .reader-page-body .rm-step-text{color:var(--rd-body)!important}
#reader-overlay .reader-page-body .rm-step-title,
#reader-overlay .rm-deeper-label,
#reader-overlay .sr-section-kicker,
#reader-overlay .sr-perspective small,
#reader-overlay .sr-tier-no small,
#reader-overlay .sr-zones b,
#reader-overlay .sr-activity-grid b{color:var(--rd-meta)!important}
#reader-overlay .reader-page-body .rm-step-num{background:var(--rd-card)!important;color:var(--rd-accent)!important;border-color:var(--rd-accent)!important}
#reader-overlay .sr-lead,
#reader-overlay .sr-note,
#reader-overlay .sr-callout,
#reader-overlay .sr-script-card,
#reader-overlay .sr-body-notice{
  background:var(--rd-card)!important;border-color:var(--rd-hair)!important;color:var(--rd-body)!important}
#reader-overlay .sr-lead strong,
#reader-overlay .sr-note strong,
#reader-overlay .sr-callout strong,
#reader-overlay .sr-founder-takeaway{color:var(--rd-heading)!important}

/* Reading-mode toggle */
#reader-overlay .reader-mode-toggle{display:inline-flex;gap:2px;padding:2px;border-radius:999px;
  background:var(--rd-card);border:1px solid var(--rd-hair)}
#reader-overlay .reader-mode-btn{border:0;cursor:pointer;background:none;color:var(--rd-meta);
  font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;transition:background .18s,color .18s}
#reader-overlay .reader-mode-btn:hover{color:var(--rd-body)}
#reader-overlay .reader-mode-btn.active{background:var(--rd-accent);color:var(--rd-on-accent)}

/* Resource-type colour coding — reduced to one small dot; the badge and
   sidebar label it sits beside are both neutral now. */
#reader-overlay .reader-page-kind{background:var(--rd-card)!important;color:var(--rd-meta)!important;
  display:inline-flex!important;align-items:center;gap:7px}
#reader-overlay .reader-tab-kind{color:var(--rd-meta)!important;display:flex;align-items:center;gap:6px}
#reader-overlay .reader-kind-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ═════════════════════════════════════════════════════════════
   B19 · Relationship Healing & Professional — content parity
   (What's Included, Testimonial, Services pair, CTA band, FAQ).
   Clone of B4-B9 above (Personal's own use of these same shared
   components), scoped to #prog-couples/#prog-corporate so the
   base B4-B9 rules — and #prog-personal — are untouched. Every
   gold reference (var(--primary)/var(--primary2)/var(--sr-gold),
   and the various rgba(212,168,67,X) hairlines) is replaced with
   var(--sr-accent) or an equivalent color-mix() at the same alpha,
   so one shared rule renders in each track's own colour — rose
   for Relationship, teal for Professional — automatically.
   ═════════════════════════════════════════════════════════════ */
/* B4 · centred section head ───────────────────────────────── */
#prog-couples .sr-head,
#prog-corporate .sr-head{max-width:760px;margin:0 auto 52px;text-align:center}
#prog-couples .sr-head .sr-kick,
#prog-corporate .sr-head .sr-kick{margin:0 0 12px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:5px;
  text-transform:uppercase;color:var(--sr-accent)}
#prog-couples .sr-head h2,
#prog-corporate .sr-head h2{margin:0 0 16px;font:400 clamp(28px,3.4vw,42px)/1.12 'Cinzel',serif;color:var(--text)}
#prog-couples .sr-head p,
#prog-corporate .sr-head p{margin:0;font:italic 400 19px/1.7 'Cormorant Garamond',Georgia,serif;color:var(--text2)}
/* margin-bottom is negative on purpose: .sr-section (its parent) has no
   bottom padding/border, so this collapses straight through into the
   next section's own margin-top — the only lever available for closing
   that gap without touching the next section's CSS. Collapsing sums the
   largest positive margin with the most negative one, so -32px here
   trims the gap by exactly 32px (measured 176px → 144px against
   .sr-human's 104px margin-top), not 32px off some margin of its own. */
#prog-couples .sr-note,
#prog-corporate .sr-note{margin:44px auto -32px;text-align:center;max-width:74ch;
  font:400 13px/1.7 'DM Sans',sans-serif;color:var(--text3)}
/* index.html reuses the bare class name .sr-note for an unrelated Reader
   callout box, and both of its style blocks (#sr-v8-cool-reader,
   #sr-v9-lighter-resource-body) set its background with !important. A
   normal-weight rule here, however late it loads, cannot win against
   that — !important only loses to !important. This is the one place
   the system CSS uses it, specifically to null out those properties —
   and, now, to pull color back to the intended var(--text3): v8 also
   sets color:#D8D2DF!important, which at ~13.5:1 against the page
   background reads far brighter than a footnote should. */
#prog-couples .sr-note,
#prog-corporate .sr-note{background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;color:var(--text3)!important}

/* B5 · feature grid — "what's included" ───────────────────── */
#prog-couples .sr-section,
#prog-corporate .sr-section{margin-top:104px;padding-top:72px;border-top:1px solid color-mix(in srgb, var(--sr-accent) 20%, transparent)}
#prog-couples .sr-features,
#prog-corporate .sr-features{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px}
#prog-couples .sr-feat,
#prog-corporate .sr-feat{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
#prog-couples .sr-feat .sr-ico,
#prog-corporate .sr-feat .sr-ico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb, var(--sr-accent) 30%, transparent);background:linear-gradient(155deg,#1B1B2E,#12121F);
  transition:border-color .3s var(--sr-ease),transform .3s var(--sr-ease)}
#prog-couples .sr-feat .sr-ico svg,
#prog-corporate .sr-feat .sr-ico svg{width:22px;height:22px;fill:none;stroke:var(--sr-accent);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
#prog-couples .sr-feat:hover .sr-ico,
#prog-corporate .sr-feat:hover .sr-ico{border-color:var(--sr-accent);transform:translateY(-2px)}
#prog-couples .sr-feat h3,
#prog-corporate .sr-feat h3{margin:6px 0 8px;font:400 19px/1.25 'Cinzel',serif;color:var(--text)}
#prog-couples .sr-feat p,
#prog-corporate .sr-feat p{margin:0;font:400 14px/1.68 'DM Sans',sans-serif;color:var(--text3)}
#prog-couples .sr-feat .sr-tagline,
#prog-corporate .sr-feat .sr-tagline{color:var(--sr-accent);font-style:italic;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}

/* B7 · human services pair ────────────────────────────────── */
#prog-couples .sr-human,
#prog-corporate .sr-human{margin-top:104px}
#prog-couples .sr-svc-pair,
#prog-corporate .sr-svc-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#prog-couples .sr-svc,
#prog-corporate .sr-svc{position:relative;display:flex;flex-direction:column;padding:38px 36px 34px;
  border-radius:16px;border:1px solid color-mix(in srgb, var(--sr-accent) 22%, transparent);overflow:hidden;
  background:linear-gradient(158deg,rgba(23,23,40,.96),rgba(14,14,26,.98));
  transition:transform .34s var(--sr-ease),box-shadow .34s var(--sr-ease),border-color .3s}
#prog-couples .sr-svc::before,
#prog-corporate .sr-svc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
#prog-couples .sr-svc::after,
#prog-corporate .sr-svc::after{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:80%;
  border-radius:50%;background:var(--accent);opacity:.12;filter:blur(56px);pointer-events:none}
#prog-couples .sr-svc-group,
#prog-corporate .sr-svc-group{--accent:var(--sr-accent)}
#prog-couples .sr-svc-solo,
#prog-corporate .sr-svc-solo{--accent:var(--sr-accent)}
#prog-couples .sr-svc:hover,
#prog-corporate .sr-svc:hover{transform:translateY(-5px);border-color:color-mix(in srgb, var(--sr-accent) 50%, transparent);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.92)}
#prog-couples .sr-svc-tag,
#prog-corporate .sr-svc-tag{position:absolute;top:20px;right:22px;z-index:1;
  font:700 8.5px/1 'DM Sans',sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--sr-accent);border:1px solid color-mix(in srgb, var(--sr-accent) 42%, transparent);
  border-radius:var(--sr-r-pill);padding:6px 11px}
#prog-couples .sr-svc-ico,
#prog-corporate .sr-svc-ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:22px;border:1px solid var(--accent);background:rgba(255,255,255,.03)}
#prog-couples .sr-svc-ico svg,
#prog-corporate .sr-svc-ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
#prog-couples .sr-svc-kick,
#prog-corporate .sr-svc-kick{margin:0 0 10px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:3px;
  text-transform:uppercase;color:var(--accent)}
#prog-couples .sr-svc h3,
#prog-corporate .sr-svc h3{margin:0 0 14px;font:400 25px/1.2 'Cinzel',serif;color:var(--text)}
#prog-couples .sr-svc-body,
#prog-corporate .sr-svc-body{margin:0 0 24px;font:400 15px/1.72 'DM Sans',sans-serif;color:var(--text3)}
#prog-couples .sr-svc-meta,
#prog-corporate .sr-svc-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0}
#prog-couples .sr-svc-meta li,
#prog-corporate .sr-svc-meta li{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text2);border:1px solid var(--border);border-radius:var(--sr-r-pill);padding:8px 13px}
#prog-couples .sr-svc-cta,
#prog-corporate .sr-svc-cta{margin-top:auto;width:100%;padding:16px;cursor:pointer;border-radius:var(--sr-r-pill);
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  font:700 11px/1 'DM Sans',sans-serif;letter-spacing:2.4px;text-transform:uppercase;
  transition:background .22s,color .22s}
#prog-couples .sr-svc-cta:hover,
#prog-corporate .sr-svc-cta:hover{background:var(--accent);color:#0B0B14}

/* B8 · slim CTA band ──────────────────────────────────────── */
#prog-couples .sr-ctabar,
#prog-corporate .sr-ctabar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:88px;padding:22px 30px;border-radius:var(--sr-r-pill);
  border:1px solid color-mix(in srgb, var(--sr-accent) 30%, transparent);
  background:linear-gradient(100deg,color-mix(in srgb, var(--sr-accent) 9%, transparent),rgba(23,23,40,.9) 46%,rgba(14,14,26,.95))}
#prog-couples .sr-ctabar[hidden],
#prog-corporate .sr-ctabar[hidden]{display:none}
#prog-couples .sr-ctabar .sr-say,
#prog-corporate .sr-ctabar .sr-say{margin:0;flex:1 1 320px;
  font:italic 400 19px/1.45 'Cormorant Garamond',Georgia,serif;color:var(--text)}
#prog-couples .sr-ctabar .sr-say b,
#prog-corporate .sr-ctabar .sr-say b{font-style:normal;font-weight:400;color:var(--sr-accent)}
#prog-couples .sr-ctabar .sr-acts,
#prog-corporate .sr-ctabar .sr-acts{display:flex;align-items:center;gap:20px;flex:none}
#prog-couples .sr-ctabar .sr-start,
#prog-corporate .sr-ctabar .sr-start{background:var(--sr-accent);color:#0B0B14;border:none;cursor:pointer;
  white-space:nowrap;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:2.4px;
  text-transform:uppercase;padding:16px 30px;border-radius:var(--sr-r-pill);
  transition:transform .2s var(--sr-ease),box-shadow .25s}
#prog-couples .sr-ctabar .sr-start:hover,
#prog-corporate .sr-ctabar .sr-start:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px color-mix(in srgb, var(--sr-accent) 70%, transparent)}
#prog-couples .sr-ctabar .sr-free,
#prog-corporate .sr-ctabar .sr-free{white-space:nowrap;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--sr-accent) 40%, transparent);padding-bottom:2px;
  font:500 13px/1 'DM Sans',sans-serif;color:var(--text2);transition:color .2s}
#prog-couples .sr-ctabar .sr-free:hover,
#prog-corporate .sr-ctabar .sr-free:hover{color:var(--sr-accent)}

/* B9 · FAQ ────────────────────────────────────────────────── */
#prog-couples .sr-faq-cols,
#prog-corporate .sr-faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
#prog-couples details.sr-q,
#prog-corporate details.sr-q{border-bottom:1px solid var(--border)}
#prog-couples details.sr-q summary,
#prog-corporate details.sr-q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font:400 18px/1.4 'Cormorant Garamond',Georgia,serif;color:var(--text);
  transition:color .22s}
#prog-couples details.sr-q summary::-webkit-details-marker,
#prog-corporate details.sr-q summary::-webkit-details-marker{display:none}
#prog-couples details.sr-q summary:hover,
#prog-corporate details.sr-q summary:hover,
#prog-couples details.sr-q[open] summary,
#prog-corporate details.sr-q[open] summary{color:var(--sr-accent)}
#prog-couples details.sr-q summary .sr-sign,
#prog-corporate details.sr-q summary .sr-sign{flex:none;width:18px;height:18px;margin-top:3px;position:relative}
#prog-couples details.sr-q summary .sr-sign::before,
#prog-corporate details.sr-q summary .sr-sign::before,
#prog-couples details.sr-q summary .sr-sign::after,
#prog-corporate details.sr-q summary .sr-sign::after{content:"";
  position:absolute;background:var(--sr-accent);
  transition:transform .28s var(--sr-ease),opacity .28s}
#prog-couples details.sr-q summary .sr-sign::before,
#prog-corporate details.sr-q summary .sr-sign::before{top:8px;left:0;width:18px;height:1.5px}
#prog-couples details.sr-q summary .sr-sign::after,
#prog-corporate details.sr-q summary .sr-sign::after{left:8px;top:0;width:1.5px;height:18px}
#prog-couples details.sr-q[open] summary .sr-sign::after,
#prog-corporate details.sr-q[open] summary .sr-sign::after{transform:rotate(90deg);opacity:0}
#prog-couples details.sr-q .sr-a,
#prog-corporate details.sr-q .sr-a{padding:0 0 22px 34px;margin:0;
  font:400 15px/1.75 'DM Sans',sans-serif;color:var(--text3);max-width:56ch}
#prog-couples details.sr-q .sr-a + .sr-a,
#prog-corporate details.sr-q .sr-a + .sr-a{padding-top:0;margin-top:-8px}
#prog-couples details.sr-q .sr-a a,
#prog-corporate details.sr-q .sr-a a{color:var(--sr-accent)}

/* ─────────────────────────────────────────────────────────────
   ATTENTION ADVISORY — inline safety note above a protocol's
   player (SR-002). Same slot pattern as .crisis-note but gold,
   not red: this is a caution about how to practise, not a crisis
   escalation. Kept namespaced sr- since it's new; .crisis-note
   itself predates this system and stays where it is.
   ───────────────────────────────────────────────────────────── */
.sr-advisory-note{display:flex;gap:12px;align-items:flex-start;
  background:rgba(212,168,67,.08);border:1px solid rgba(212,168,67,.35);
  border-radius:4px;padding:14px 16px;margin:0 0 22px}
.sr-advisory-note svg{stroke:var(--primary);flex-shrink:0;margin-top:2px;width:18px;height:18px}
.sr-advisory-note p{font-size:12.5px;line-height:1.55;color:var(--text2);margin:0}
.sr-advisory-note strong{color:var(--text)}

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE + MOTION
   ═════════════════════════════════════════════════════════════ */
@media (max-width:1180px){ .sr-covers{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1100px){ .sr-features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:980px){
  .sr-covers{grid-template-columns:repeat(3,1fr)}
  .sr-banner{aspect-ratio:auto;height:auto;min-height:0;max-height:none;padding:110px 0 96px}
  .sr-banner-copy{position:static;transform:none;padding:0 26px;max-width:none}
  .sr-play{top:auto;bottom:96px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;padding:120px 22px 64px;min-height:auto}
  .sr-faq-cols{grid-template-columns:1fr;gap:0}
  .sr-foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sr-foot-brand{grid-column:1/-1}
  .section-body{font-size:18px}
}
@media (max-width:760px){
  .sr-features{grid-template-columns:1fr;gap:32px}
  .sr-svc-pair{grid-template-columns:1fr}
  .sr-svc{padding:32px 24px 28px}
  .sr-ctabar{border-radius:18px;padding:24px 22px;gap:20px}
  .sr-ctabar .sr-acts{width:100%;justify-content:space-between}
}
@media (max-width:680px){
  .sr-covers{grid-template-columns:repeat(2,1fr);gap:12px}
  .sr-cover h3{font-size:19px}
  .sr-cover .sr-num{font-size:104px}
}
@media (max-width:560px){
  .sr-foot-grid{grid-template-columns:1fr}
  .sr-foot-in{padding:0 20px}
  .sr-scope{padding:24px 20px}
}
/* SR-303 · Phase E — motion suppression removed site-wide; animations now run
   for every visitor regardless of prefers-reduced-motion. This block keeps only
   the SR-288 unconditional visibility override: it guarantees .sr-stagger and
   .sr-tp-revealsec targets read opacity:1 even when their triggering animation
   never ran (JS blocked, IntersectionObserver never fired, never scrolled into
   view) — a visibility guarantee, not a motion suppression, so it stays. */
@media (prefers-reduced-motion:reduce){
  .sr-stagger>*{opacity:1;transform:none}
  .sr-tp-revealsec .sr-tp-eyebrow,
  .sr-tp-revealsec h1,
  .sr-tp-revealsec h2,
  .sr-tp-revealsec .sr-tp-lede,
  .sr-tp-revealsec .sr-tp-herorule,
  .sr-tp-revealsec .sr-tp-body,
  .sr-tp-revealsec .sr-tp-sechead+*,
  .sr-tp-revealsec .sr-tp-lede+*{opacity:1;transform:none}

  /* SR-343 · the four track diagrams render in their final, static state —
     an explicit exception to this file's own SR-303 decision to run
     motion regardless of this media query everywhere else, made for this
     one new feature at the founder's specific instruction. Every loop is
     hidden or held at its resting frame rather than frozen mid-travel,
     which would read as a rendering fault, not a still image. */
  .sr-tp-breathcurve{animation:none;stroke-dashoffset:0}
  .sr-tp-fourlight,
  .sr-tp-fastlight,.sr-tp-slowlight,
  .sr-tp-halflight,.sr-tp-roomlight{animation:none;opacity:0}
  .sr-tp-braced{animation:none;opacity:.9}
  .sr-tp-steady{animation:none;opacity:.35}
  .sr-tp-loaddraw{animation:none;stroke-dashoffset:0}
  .sr-tp-orbitwide{animation:none;opacity:0}
  .sr-tp-orbitnarrow{animation:none;opacity:1}
}

/* SR-029 — honest "video not yet available" state for the Watch pane.
   No video file exists yet, so this replaces the old fake play button
   (which toggled a simulated progress bar with nothing behind it) with
   a plain, truthful unavailable state instead of an implied player.
   Group 3 (mockup diff): .video-placeholder's base padding-top:56.25%
   (a 16:9-ratio hack) made this ~620-900px tall depending on viewport
   width — far taller than the real player it stands in for (the Listen
   pane measures ~138px). Fixed height replaces the aspect-ratio hack so
   the page reads the same whether Watch or Listen is selected. */
.sr-video-unavailable{padding-top:0;height:200px}
.sr-video-unavailable .video-inner{gap:10px}
.sr-video-unavailable-icon{color:var(--text3)}
.sr-video-unavailable-title{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:2px;color:var(--text2);text-transform:uppercase;text-align:center;padding:0 20px;}
.sr-video-unavailable-sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;color:var(--text3);text-align:center;padding:0 24px;max-width:360px;}

/* SR-027 — "The journey begins" collapsible wrapper around the Experience
   journey visual. .pt-journey-visual keeps its own rules everywhere else
   it's used; nested inside this wrapper it drops its own border/radius so
   the two don't double up. */
.sr-journey-details{margin-top:20px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.02)}
.sr-journey-details .pt-journey-visual{margin-top:0;border:0;border-radius:0;border-top:1px solid var(--border);background:transparent}
.sr-journey-summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;list-style:none;cursor:pointer;padding:14px 20px;}
.sr-journey-summary::-webkit-details-marker{display:none}
.sr-journey-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--primary);font-weight:700;}
.sr-journey-meta{font-size:11.5px;color:var(--text3);}
.sr-journey-toggle::before{content:" \2014  Open";}
.sr-journey-details[open] .sr-journey-toggle::before{content:" \2014  Close";}

/* SR-027 — "quiet short alternative": offers the 4-line Crisis Card as a
   brief on-ramp.
   Correction 4: label/button color was --pt-mob (salmon) — the mockup's
   base .crisis .cl/.cb rule is salmon too, but a later override
   (.crisis .cl{color:var(--teal)}, .crisis .cb{border-color:rgba(78,154,
   166,.38);color:#89B8C0}) wins by source order in the mockup's own
   cascade, so the label/button are teal in the resolved mockup, not
   salmon. Fixed to match. Card's own border/background left as-is —
   out of scope for this correction, which is about the two labels. */
.sr-quiet-alt{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;padding:18px 22px;border:1px solid rgba(201,122,90,.3);border-radius:9px;background:rgba(201,122,90,.06);}
.sr-quiet-alt-copy{flex:1;min-width:220px;}
.sr-quiet-alt-label{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--pt-teal,#4E9AA6);font-weight:700;margin-bottom:6px;}
.sr-quiet-alt-title{font-family:'Cinzel',serif;font-weight:400;font-size:16px;color:var(--text);margin-bottom:5px;}
.sr-quiet-alt-body{font-size:12.5px;color:var(--text3);line-height:1.6;}
.sr-quiet-alt-btn{flex-shrink:0;border:1px solid rgba(78,154,166,.38);color:#89B8C0;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:12px 20px;border-radius:3px;cursor:pointer;white-space:nowrap;}
.sr-quiet-alt-btn:hover{background:rgba(78,154,166,.12);}

/* SR-027 — Decision editorial block, Go Deeper section. Two-column layout
   per the approved mockup; collapses to one column under 760px like every
   other two-column block on this page. */
.sr-decision-editorial{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;align-items:start;margin:0 0 28px;padding:28px 0 32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.sr-decision-eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--primary);font-weight:700;}
.sr-decision-heading{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.2;margin-top:10px;color:var(--text);}
.sr-decision-copy{border-left:1px solid var(--border);padding-left:28px;}
.sr-decision-quote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(19px,2.4vw,24px);line-height:1.4;color:var(--text);margin-bottom:14px;}
.sr-decision-body{font-size:13.5px;color:var(--text2);line-height:1.75;max-width:560px;margin-bottom:16px;}
.sr-decision-link{display:inline-block;color:var(--primary);font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-bottom:1px solid rgba(212,168,67,.45);padding-bottom:4px;}
.sr-decision-link:hover{color:var(--primary2);}
@media(max-width:760px){
  .sr-decision-editorial{grid-template-columns:1fr;gap:18px;}
  .sr-decision-copy{padding-left:0;border-left:0;border-top:1px solid var(--border);padding-top:18px;}
  .sr-quiet-alt{flex-direction:column;align-items:flex-start;}
  .sr-quiet-alt-btn{width:100%;text-align:center;}
}

/* Group 1 (mockup diff) — .shift-drop had markup with zero CSS anywhere
   in the codebase: native disclosure triangle, title running into the
   preview text. Ported from the mockup's shift-drop rules onto live
   tokens (var(--primary)/var(--border) in place of --gold/--hair).
   Correction 1: margin changed from margin-top:28px (a standalone-card
   value, from when this sat outside .experience-box) to the mockup's
   actual .shift-drop rule — 18px 28px 28px, 16px 18px 18px narrow — now
   that it's the last direct child inside the box. */
.shift-drop{margin:18px 28px 28px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(115deg,rgba(212,168,67,.04),rgba(78,154,166,.02));overflow:hidden}
.shift-drop summary{list-style:none;cursor:pointer;padding:17px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.shift-drop summary::-webkit-details-marker{display:none}
.shift-title{font-family:'Cinzel',serif;font-size:15px;color:var(--text);white-space:nowrap}
.shift-preview{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shift-toggle{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--primary);font-weight:700}
.shift-toggle::before{content:"Open"}
.shift-toggle::after{content:"  \25BE"}
.shift-drop[open] .shift-toggle::before{content:"Close"}
.shift-drop[open] .shift-toggle::after{content:"  \25B4"}
.shift-drop .heals{margin:0;border-top:1px solid var(--border);padding:20px}
.heals-lede{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14.5px;color:var(--text2);line-height:1.7;margin-bottom:16px}
@media(max-width:900px){
  .shift-drop{margin:16px 18px 18px}
}
@media(max-width:600px){
  .shift-drop summary{grid-template-columns:1fr auto}
  .shift-preview{grid-column:1/-1;grid-row:2}
  .shift-title{white-space:normal}
}

/* Group 1 (mockup diff) — .sr-logdrop / .sr-journal: <details> shells
   newly built around the existing Log a Session / Journal internals
   (which previously had no collapse mechanism at all — always visible,
   no summary row). Same shell pattern as .sr-journey-details already
   on this page. #prog-personal's own .jprog-enclosure card treatment is
   neutralized when nested in one of these so the section reads as one
   card, not two stacked ones — the same relationship the mockup's own
   .logdrop/.logcard pair uses (outer card, inner card stripped to a
   plain divider). */
/* Correction 7: gold-tinted baseline (was neutral var(--border)/var(--card))
   so sections 2 and 3 read as one family with the resource library. */
.sr-logdrop,.sr-journal{border:1px solid rgba(212,168,67,.2);border-radius:12px;
  background:linear-gradient(145deg,rgba(212,168,67,.026),rgba(255,255,255,.006) 42%,transparent);
  margin-top:14px;overflow:hidden}
.sr-logdrop:hover,.sr-journal:hover{border-color:rgba(212,168,67,.32)}
.sr-logdrop summary,.sr-journal summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:64px}
.sr-logdrop summary::-webkit-details-marker,.sr-journal summary::-webkit-details-marker{display:none}
.sr-logdrop-jt,.sr-journal-jt{font-family:'Cinzel',serif;font-size:18px;color:var(--text)}
.sr-logdrop-jq,.sr-journal-jq{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;color:var(--text3);flex:1;min-width:200px}
.sr-logdrop-jx,.sr-journal-jx{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--primary);font-weight:700}
.sr-logdrop-jx::before,.sr-journal-jx::before{content:"Open"}
.sr-logdrop-jx::after,.sr-journal-jx::after{content:" \25BE"}
.sr-logdrop[open] .sr-logdrop-jx::before,.sr-journal[open] .sr-journal-jx::before{content:"Close"}
.sr-logdrop[open] .sr-logdrop-jx::after,.sr-journal[open] .sr-journal-jx::after{content:" \25B4"}
.sr-logdrop .jprog-recent,.sr-journal .jprog-past{padding:0 26px 26px;margin:0}
.sr-journal>.jprog-why{padding:0 26px 26px;margin:0}
#prog-personal .sr-journal .jprog-enclosure{background:transparent;border-radius:0;border-top:1px solid var(--border);padding:26px;margin:0}
/* Correction 2: "Practice & Journal"/sub, "Where You Are" and "What's
   Next" (plus the Chosen Self card, injected right after .jprog-rec-box
   by addEvidenceCards()) moved from always-visible above both drops to
   inside .sr-logdrop's own reveal, ahead of the log form — so they're
   now direct children of the <details> instead of a padded wrapper, and
   need the same 26px horizontal inset the rest of the reveal uses. The
   divider that used to sit between the summary and .jprog-enclosure (the
   first thing revealed) moves to sit above .jprog-title instead, since
   that's the first thing revealed now. */
#prog-personal .sr-logdrop>.jprog-title{padding:22px 26px 0;margin:0 0 6px;border-top:1px solid var(--border)}
#prog-personal .sr-logdrop>.jprog-sub,
#prog-personal .sr-logdrop>.jprog-status-group{padding-left:26px;padding-right:26px}
#prog-personal .sr-logdrop .jprog-enclosure{background:transparent;border-radius:0;border-top:0;padding:26px;margin:0}

/* Resources-Final diff, Group 1 — Section 1 is ONE bordered object
   (.sr-experience-box), not a stack of separate cards with gaps between
   them. Header, advisory and player are regions of it: header bleeds to
   the box's top edge and keeps only a bottom border; the player's own
   border/background are stripped since the box already provides them. */
/* Correction 3: had no margin-bottom of its own, while .sr-sec-box (the
   other three boxes) forces margin-top:0 and does its spacing entirely
   via its own margin-bottom (68px, to beat .j-step + .j-step's
   margin-top:34px — see that rule's own comment). Net effect was a 0px
   gap between this box and the next, against 68px between every other
   pair. Matched here so every gap between enclosures is identical. */
.sr-experience-box{border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 42%);margin-bottom:68px}
@media(max-width:900px){
  .sr-experience-box{margin-bottom:44px}
}

/* Experience hero card / #experience .sechead--lead: the protocol title
   used to render twice (once overlaid on the banner photo, once as
   generic j-title copy "Practice It Right Now" below it) — this is the
   single place it lives now. Kicker row reuses the existing
   .j-kicker/.j-num/.j-eyebrow — same numbered-badge component every
   other section head already uses, not a new one. Bleeds to the box's
   top edge (no top border/radius of its own); the cover photo (moved in
   by syncExperienceHeroMedia()) sits behind it in .sr-exp-hero-media. */
.sr-exp-hero{position:relative;padding:34px 36px 32px;margin:0;
  border:0;border-bottom:1px solid var(--border);border-radius:0;overflow:hidden;
  background:#0A0A0D}
.sr-exp-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sr-exp-hero-media .sr-proto-banner-copy{display:none}
.sr-exp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 54%,rgba(238,207,158,.06) 100%)}
.sr-exp-hero>*:not(.sr-exp-hero-media){position:relative;z-index:1}
.sr-exp-hero .j-kicker{margin-bottom:12px}
.sr-exp-hero-title{font-family:'Cinzel',serif;font-weight:400;
  font-size:clamp(28px,3.8vw,42px);line-height:1.15;margin-bottom:14px;color:var(--text)}
.sr-exp-hero-lede{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:19px;color:#D8D0C0;max-width:600px;margin-bottom:16px;line-height:1.5}
.sr-exp-hero-subline{font-size:14px;color:#A7A5AA;letter-spacing:.01em}
@media(max-width:900px){
  .sr-exp-hero{padding:24px 22px}
}

/* Player: border/radius/background stripped since .sr-experience-box
   already provides them (mockup's .experience-box .player rule). */
.sr-player{border:0;border-radius:0;background:transparent}
/* Resources-Final diff, Group 4 — tabs: mockup's .ptabs/.ptab is a seamless
   divided row (one border-right between the two, border-bottom under the
   whole row), not individually-bordered, gap-separated pill buttons. The
   bare .exp-tabs/.exp-tab classes are shared with Tracks 02/03 and the
   homepage previews, so this is scoped to .sr-player (Track 01's player
   only) rather than changed globally. */
.sr-player .exp-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid var(--border);
  background:rgba(10,10,16,.74);border-radius:0}
.sr-player .exp-tab{border:0;border-right:1px solid var(--border);border-radius:0;
  padding:15px 18px;background:transparent}
.sr-player .exp-tab:last-child{border-right:0}
.sr-player .exp-tab:hover{background:rgba(255,255,255,.03)}
.sr-player .exp-tab.active{background:rgba(212,168,67,.09)}
.sr-player .exp-tab-label{font-size:9.5px;letter-spacing:.2em;margin-bottom:4px}
.sr-player .exp-tab.active .exp-tab-name{color:var(--text)}
.sr-pbody{padding:24px 28px 0}
@media(max-width:900px){
  .sr-pbody{padding:20px 18px 0}
}
/* Quiet short alternative + journey visual sit inside .sr-pbody now —
   margins match the mockup's .experience-box .crisis rule (was a
   standalone margin-top:20px card before this box existed). */
.sr-pbody .sr-quiet-alt{margin:14px 0 0}
.sr-pbody .sr-journey-details{margin-top:20px;margin-bottom:0}
@media(max-width:900px){
  .sr-pbody .sr-quiet-alt{margin-top:12px}
}

/* Resources-Final diff, Group 3 — Attention Advisory: a divided row with
   a gold left label column, not an icon-in-a-box card. Sits between the
   hero header and the player, divided from both by its own border. */
.sr-attention-advisory{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:16px 28px;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(212,168,67,.055),rgba(212,168,67,.012) 62%,transparent)}
.sr-attention-label{padding-top:2px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--primary);font-weight:700;white-space:nowrap}
.sr-attention-advisory p{font-size:12px;line-height:1.65;color:var(--text3);max-width:790px}
.sr-attention-advisory strong{color:var(--text2);font-weight:500}
@media(max-width:900px){
  .sr-attention-advisory{grid-template-columns:1fr;gap:6px;padding:14px 20px}
  .sr-attention-label{white-space:normal}
}

/* Group 4 (mockup diff) — Beyond Self-Guided: the mockup's two-card grid
   (monthly workshop + premium 1:1) never made it across; this section
   was one plain .jp5-card. Values merged from the mockup's base .beyond/
   .bcard rules plus its own later "support-section"/"v17" refinement
   passes (both apply to this exact component in the mockup, no conflict
   between them the way the banner/hero passes had — see Group 2's commit
   note for that one). var(--pt-teal)/var(--pt-mob) already exist as
   #prog-personal accent tokens; --pt-teal doubles for the mockup's
   --teal here since Personal Transformation has no separate teal token
   of its own outside this component. */
.sr-beyond{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2px}
.sr-bcard{border:1px solid var(--border);border-radius:12px;padding:26px;
  min-height:304px;display:flex;flex-direction:column;overflow:hidden;
  text-align:left;position:relative;background:var(--card)}
.sr-bcard-teal{border-color:rgba(78,154,166,.35);
  background:linear-gradient(135deg,rgba(78,154,166,.09),rgba(20,20,27,.96) 58%)}
.sr-bcard-gold{border-color:rgba(212,168,67,.35);
  background:linear-gradient(135deg,rgba(212,168,67,.09),rgba(20,20,27,.96) 58%)}
.sr-bicon{width:38px;height:38px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;margin:0 0 18px;font-size:13px}
.sr-bcard-teal .sr-bicon{color:var(--pt-teal,#4E9AA6)}
.sr-bcard-gold .sr-bicon{color:var(--primary)}
.sr-bl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin:0 0 8px}
.sr-bcard-teal .sr-bl{color:var(--pt-teal,#4E9AA6)}
.sr-bcard-gold .sr-bl{color:var(--primary)}
.sr-bcard h3{font-size:20px;line-height:1.3;max-width:390px;margin:0 0 11px;color:var(--text)}
.sr-bcard>p:not(.sr-bl){font-size:13px;color:var(--text2);line-height:1.65;max-width:440px;margin:0 0 17px}
.sr-btags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;margin-bottom:18px}
.sr-btag{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  border:1px solid var(--border);padding:6px 10px;border-radius:16px;line-height:1.2}
.sr-bbtn{min-height:42px;padding:0 16px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;border:0;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.sr-bcard-teal .sr-bbtn{color:#071014;background:var(--pt-teal,#4E9AA6)}
.sr-bcard-teal .sr-bbtn:hover{background:#65B4C0}
.sr-bcard-gold .sr-bbtn{color:#110D05;background:var(--primary)}
.sr-bcard-gold .sr-bbtn:hover{background:var(--primary2)}
.sr-blimited{position:absolute;top:26px;right:26px;font-size:7.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);border:1px solid rgba(212,168,67,.4);
  padding:5px 9px;border-radius:12px}
@media(max-width:900px){
  .sr-bcard{padding:23px;min-height:0}
  .sr-blimited{top:23px;right:23px}
}
@media(max-width:700px){
  .sr-beyond{grid-template-columns:1fr}
}

/* Resources-Final diff, Group 2 — Sections 2, 3 and 4 (Log & Journal, Go
   Deeper, Beyond Self-Guided) were bare .j-step divs divided only by a
   border-top rule, with a small (18px) .j-title. Mockup makes every
   non-experience section its own bordered enclosure with an
   edge-bleeding header carrying a gold left bar — this is the part
   earlier passes missed entirely. .j-step's own border-top/margin-top
   divider rule is neutralized on these three (border-top:0!important)
   since the box now supplies its own full border. */
/* !important on padding/margin-top and border-top: .j-step + .j-step
   (index.html, base stylesheet) sets these with higher specificity
   (two classes) for the plain-divider look between ordinary steps —
   needs to be beaten explicitly now that steps 2-4 are their own boxes. */
.sr-sec-box{padding:0 32px 40px!important;margin:0 0 68px!important;
  border:1px solid var(--border)!important;border-top:0!important;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.003) 44%,transparent)}
/* Correction 3: mockup gives the last enclosure MORE space before the
   footer (72px / 52px narrow), not less — this was wrongly zeroed out. */
.sr-sec-box:last-child{margin-bottom:72px!important}
.sr-sechead{position:relative;max-width:none;margin:0 -32px 38px;padding:27px 30px 29px;
  border-bottom:1px solid var(--border);overflow:hidden;
  background:linear-gradient(100deg,rgba(212,168,67,.085) 0%,rgba(212,168,67,.035) 34%,
             rgba(78,154,166,.018) 66%,transparent 100%)}
.sr-sechead:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(180deg,var(--primary),rgba(212,168,67,.08))}
.sr-sechead .j-kicker{margin-bottom:14px}
.sr-sechead h2{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(27px,3.25vw,36px);
  line-height:1.18;letter-spacing:-.018em;margin-bottom:12px;color:var(--text)}
.sr-sechead-lede{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:18px;line-height:1.55;max-width:680px;color:var(--text2)}
.sr-sechead .j-num{width:23px;height:23px;font-size:10px;line-height:23px}
.sr-sechead .j-eyebrow{font-size:10px;letter-spacing:.27em}
@media(max-width:900px){
  /* !important: the base rule's margin shorthand is !important (needed to
     beat .j-step + .j-step), so this override needs it too or it's
     silently ignored regardless of media-query/cascade order — caught
     during Correction 3 verification (this rule wasn't taking effect at
     414px). */
  .sr-sec-box{padding:0 18px 28px;margin-bottom:44px!important;border-radius:11px}
  .sr-sec-box:last-child{margin-bottom:52px!important}
  .sr-sechead{margin:0 -18px 30px;padding:22px 21px 24px}
  .sr-sechead h2{font-size:clamp(25px,8vw,32px)}
  .sr-sechead-lede{font-size:17px}
}

/* Resources-Final diff, Group 5 — Go Deeper's resource list: was a flat
   .res-row of undifferentiated cards. Mockup groups them under labelled
   headers inside one bordered library. Live's item markup keeps its own
   class names (.res-item/.res-icon/.res-kind/.res-title/.res-meta/
   .res-action — unchanged since ptResItem() already used them before this
   pass) rather than adopting the mockup's shorter .res/.ic/.rl/.rt/.rm/.go
   names, so all of this is scoped under .resource-group instead of renaming
   a helper used in more than one place. */
.resource-library{margin-top:2px;border:1px solid rgba(212,168,67,.2);border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,rgba(212,168,67,.026),rgba(255,255,255,.006) 42%,transparent)}
.resource-group+.resource-group{border-top:1px solid rgba(212,168,67,.2)}
.resource-group-label{display:flex;align-items:center;gap:15px;padding:19px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.035);
  background:linear-gradient(90deg,rgba(212,168,67,.075),rgba(78,154,166,.018) 62%,transparent)}
.resource-group-label:before{content:"";width:22px;height:1px;background:var(--primary);opacity:.75}
.resource-group-label span{font-size:9px;line-height:1.2;letter-spacing:.24em;text-transform:uppercase;
  color:var(--primary);font-weight:700}
/* Correction 5: horizontal inset was margin (0 26px) while vertical was
   padding (23px 0) — margin falls outside the element's own box, so the
   #prog-personal-scoped hover highlight (#prog-personal .res-item:hover,
   background #1C1C21 — higher specificity than anything set here, an ID
   always wins) landed flush on the icon and Read button left/right while
   having full breathing room top/bottom. Moved the horizontal inset into
   padding so the highlight box itself is evenly inset. The divider that
   inset used to provide for free (a shrunk border-box) is rebuilt as a
   ::after inset independently by the same amount, since the row now
   spans the full card width. */
.resource-group .res-item{display:grid;grid-template-columns:42px minmax(0,1fr) 120px;gap:21px;
  align-items:center;min-height:102px;margin:0;padding:23px 26px;background:transparent;
  border:0;position:relative}
.resource-group .res-item:not(:last-child):after{content:"";position:absolute;left:26px;right:26px;
  bottom:0;height:1px;background:rgba(255,255,255,.035)}
.resource-group .res-item+.res-item{margin-top:0}
.resource-group .res-icon{width:42px;height:42px;border-radius:50%;border-color:rgba(212,168,67,.18);
  background:rgba(8,8,12,.26)}
.resource-group .res-kind{margin-bottom:6px;font-size:9px;letter-spacing:.21em}
.resource-group .res-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:400;
  line-height:1.35;letter-spacing:.005em;color:var(--text)}
.resource-group .res-meta{font-size:11.5px;line-height:1.5}
.resource-group .res-action{width:120px;min-height:44px;border-color:rgba(212,168,67,.42);
  background:rgba(212,168,67,.025);justify-content:center}
.resource-group .res-action:hover{border-color:var(--primary);background:rgba(212,168,67,.09)}
.resource-note{margin:20px 3px 0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:16px;line-height:1.55;color:var(--text3)}
@media(max-width:900px){
  .resource-group .res-item{grid-template-columns:40px minmax(0,1fr) 112px;margin:0;padding:23px 20px;gap:17px}
  .resource-group .res-item:not(:last-child):after{left:20px;right:20px}
}
@media(max-width:560px){
  .resource-group .res-item{grid-template-columns:1fr;margin:0;padding:23px 17px;gap:10px}
  .resource-group .res-item:not(:last-child):after{left:17px;right:17px}
  .resource-group .res-icon{display:none}
  .resource-group .res-action{grid-column:1;width:100%;justify-self:stretch}
  .resource-group-label{padding-left:18px;padding-right:18px}
}

/* Resources-Final diff, Group 5 — Go Deeper's own mini-banner header
   (mockup's #resources>.sechead): unlike Log & Journal / Beyond
   Self-Guided, this section's header carries its own cover-photo layer
   (a clone of the same photo already in .sr-exp-hero-media, placed by
   syncResourcesHeroMedia()) and a "Back to the practice" link, instead
   of the plain gold-gradient background the other two sechead uses. */
.sr-resources-sechead{min-height:238px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px 36px 35px;background:#0A0A0D}
/* #personal-protocol-page .proto-item .sr-proto-banner-scrim (1 id + 2
   classes) outranks a plain 2-class override — matched here with an id
   of its own so the resources header actually gets its own scrim recipe
   instead of silently inheriting the experience hero's. */
#personal-protocol-page .proto-item .sr-resources-hero-media .sr-proto-banner-scrim{
  background:linear-gradient(90deg,rgba(8,8,12,.96) 0%,rgba(8,8,12,.78) 45%,
             rgba(8,8,12,.28) 74%,rgba(8,8,12,.48) 100%)}
.sr-resource-back{position:absolute;z-index:2;top:26px;left:30px;color:#D7C19A;font-size:9px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;cursor:pointer}
.sr-resource-back:hover{color:var(--primary)}
.sr-resources-sechead h2{font-size:clamp(30px,3.6vw,40px)}
.sr-resources-sechead .sr-sechead-lede{color:#CEC4B2;max-width:610px}
@media(max-width:900px){
  .sr-resources-sechead{min-height:218px;padding:31px 24px 29px}
  .sr-resource-back{left:23px;top:22px}
}

/* Correction 6 — next-step marker (.is-next). Values given verbatim by
   the person who approved them after several rounds of toning down; do
   not brighten, thicken, speed up or otherwise "improve" them.
   Two mechanical fixes were needed to make the given rules actually take
   effect against this file's existing selectors, values themselves
   untouched:
   - "knum" doesn't exist anywhere in this codebase; the section-kicker
     number badge is .j-num, so the marker rule targets that instead.
   - .j-num has no border at all today (background only), so a
     border-color with no border-width/style is invisible — added a
     matching thin solid border so the given colour renders.
   .sr-sec-box's own border is !important (beats a same-specificity base
   rule elsewhere), so its is-next override needs !important too or it's
   silently ignored — same pattern as Correction 3's narrow-width fix. */
.sr-sec-box,.sr-logdrop,.sr-journal,.sr-player{transition:border-color 1.2s ease,background 1.2s ease}
.sr-sec-box.is-next{border-color:rgba(212,168,67,.26)!important}
.sr-sec-box.is-next>.sr-sechead:after{
  width:3px;
  background:linear-gradient(180deg,var(--gold,var(--primary)),rgba(212,168,67,.3))}
.sr-sec-box.is-next .j-num{
  background:rgba(212,168,67,.2);border:1.5px solid rgba(212,168,67,.6)}

.sr-logdrop.is-next,.sr-journal.is-next{
  position:relative;overflow:hidden;
  border-color:rgba(212,168,67,.5);
  background:linear-gradient(145deg,rgba(212,168,67,.05),rgba(255,255,255,.008) 46%,transparent)}
.sr-logdrop.is-next:before,.sr-journal.is-next:before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(180deg,var(--gold,var(--primary)),rgba(212,168,67,.25))}

.sr-player.is-next{border-color:rgba(212,168,67,.5)}
/* .play-btn no longer exists in this player (SR-029 replaced the fake
   Watch play button with an honest "not yet available" state) — .audio-play
   is the one real control left, so it's targeted alongside .play-btn
   rather than in place of it, in case Watch gets a real player later. */
.sr-player.is-next .play-btn,.sr-player.is-next .audio-play{border-color:var(--gold,var(--primary))}

/* The word "Next" on the marked row — carries the actual meaning of the
   cue (screen readers, quick scanning), not just a decorative glow. */
.sr-cuetag{display:none;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,var(--primary));font-weight:700;opacity:.85;white-space:nowrap}
/* A plain ".is-next .sr-cuetag" descendant rule lights up BOTH rows once
   section 2 itself carries is-next (Stages 2/3 mark the section AND one
   row), since both .sr-logdrop and .sr-journal sit inside that same
   is-next section — narrowed to each row's own is-next so only the
   actually-marked row shows the tag. */
.sr-logdrop.is-next .sr-cuetag,.sr-journal.is-next .sr-cuetag{display:inline}

/* Breath — soft, slow, contained; opt-in via body.sr-breath so it can be
   switched off in one place. Default cycle 14s via --sr-pulse. */
body.sr-breath .sr-sec-box.is-next{animation:srSecQuiet var(--sr-pulse,14s) ease-in-out infinite}
@keyframes srSecQuiet{
  0%,100%{border-color:rgba(212,168,67,.2);
          box-shadow:0 0 26px -16px rgba(212,168,67,.14)}
  50%    {border-color:rgba(212,168,67,.38);
          box-shadow:0 0 60px -14px rgba(212,168,67,.3)}
}

body.sr-breath .sr-sec-box.is-next>.sr-sechead:after{
  animation:srBarQuiet var(--sr-pulse,14s) ease-in-out infinite}
@keyframes srBarQuiet{
  0%,100%{box-shadow:0 0 10px -2px rgba(212,168,67,.25)}
  50%    {box-shadow:0 0 22px 0 rgba(212,168,67,.55)}
}

body.sr-breath .sr-logdrop.is-next,
body.sr-breath .sr-journal.is-next{animation:srRowQuiet var(--sr-pulse,14s) ease-in-out infinite}
@keyframes srRowQuiet{
  0%,100%{border-color:rgba(212,168,67,.44);
          background:linear-gradient(145deg,rgba(212,168,67,.045),rgba(255,255,255,.006) 46%,transparent);
          box-shadow:0 0 24px -14px rgba(212,168,67,.2),
                     inset 0 0 30px -22px rgba(212,168,67,.16)}
  50%    {border-color:rgba(212,168,67,.66);
          background:linear-gradient(145deg,rgba(212,168,67,.09),rgba(255,255,255,.012) 46%,transparent);
          box-shadow:0 0 56px -12px rgba(212,168,67,.4),
                     inset 0 0 60px -18px rgba(212,168,67,.34)}
}
body.sr-breath .sr-logdrop.is-next:before,
body.sr-breath .sr-journal.is-next:before{
  animation:srBarQuiet var(--sr-pulse,14s) ease-in-out infinite}

body.sr-breath .sr-player.is-next{animation:srPlQuiet var(--sr-pulse,14s) ease-in-out infinite}
@keyframes srPlQuiet{
  0%,100%{border-color:rgba(212,168,67,.44);
          box-shadow:0 0 26px -14px rgba(212,168,67,.2),
                     inset 0 0 40px -26px rgba(212,168,67,.18)}
  50%    {border-color:rgba(212,168,67,.66);
          box-shadow:0 0 64px -12px rgba(212,168,67,.42),
                     inset 0 0 90px -22px rgba(212,168,67,.34)}
}
body.sr-breath .sr-player.is-next .play-btn,
body.sr-breath .sr-player.is-next .audio-play{
  animation:srBtnQuiet var(--sr-pulse,14s) ease-in-out infinite}
@keyframes srBtnQuiet{
  0%,100%{box-shadow:0 0 14px -6px rgba(212,168,67,.24);background:rgba(212,168,67,.05)}
  50%    {box-shadow:0 0 34px -6px rgba(212,168,67,.5);background:rgba(212,168,67,.11)}
}

/* No per-component prefers-reduced-motion block here — SR-303 (Phase E)
   removed the sitewide transition/animation-duration suppression that used
   to neutralize every animation under this media query. These pulse
   animations now run unconditionally for every visitor, reduced-motion
   preference included, same as everywhere else on the site. */

/* ══════════════════════════════════════════════════
   PART B2 · THE PROTOCOL COVER · SR-162
   One component, two surfaces. Markup comes from
   js/saferise-card.js, which both dashboard.html and the
   track pages load. This block lives in the shared sheet
   because it is the one sheet BOTH of them load —
   saferise-dashboard.css is the dashboard's alone.

   Deliberately NOT namespaced `sr-tp-`: it is not a track
   page component. Deliberately NOT `sr-cover-*` either —
   that is taken, by the Clearing card and the index tiles
   (.sr-cover / .sr-cover-art / .sr-cover-scrim /
   .sr-cover-kick / .sr-cover-sub). CLAUDE.md's `.track`
   warning is this exact trap; `sr-pcover` was checked free
   across every css, js and html file before it was used.

   This owns the picture and what sits over it, nothing
   else. The frame — border, radius — belongs to whichever
   card is holding it, because the two frames genuinely
   differ. Everything below the art stays with each surface.
   ══════════════════════════════════════════════════ */
.sr-pcover{position:relative;aspect-ratio:3/4;overflow:hidden;isolation:isolate;
  /* the ground under a missing or still-loading cover. A track surface
     overrides it per track; a page with no track context keeps this. */
  background:linear-gradient(145deg,#151526,#343044 58%,#76607b)}
/* inset rather than a plain block image: the number and label are absolutely
   positioned siblings, and a static img would push them out of the box —
   which is precisely how the track card broke. */
.sr-pcover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Top and bottom only. The middle stays clear so the photograph is not
   veiled — the scrim exists to keep the overlay legible against whatever
   the cover happens to be, not to darken the art. */
.sr-pcover-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,8,12,.62) 0%,rgba(8,8,12,.14) 26%,rgba(8,8,12,.1) 52%,rgba(8,8,12,.76) 100%)}
.sr-pcover-label{position:absolute;top:11px;left:13px;right:13px;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:rgba(245,237,216,.86);line-height:1.4}
.sr-pcover-no{position:absolute;right:12px;bottom:7px;font-family:'Cinzel',serif;font-size:30px;
  color:rgba(245,237,216,.88);line-height:1}


/* ═════════════════════════════════════════════════════════════
   PART C · TRACK PAGE TEMPLATE
   One template, three routes: personal-transformation,
   relationship-healing, professional-performance. Markup is
   built by js/saferise-track.js from content/tracks.js.

   Namespaced `sr-tp-` rather than plain `sr-` because five of
   the template class names (.note .on .scope .sechead .pbody)
   already exist under `sr-` in this codebase.

   Tokens are scoped to .sr-tp, NOT :root. index.html loads this
   sheet last and defines its own conflicting values
   (--bg:#080810 vs #0A0A0F, --card:#1C1C2E vs the decorated
   gradient below, --text2:#D0C8B0 vs #9C9AA4). A :root block here
   would repaint the landing page. See the token-ownership question
   in docs/fix-register.md.

   SR-320 · two-surface conversion. This template and the reader's
   .sr-tp usage sit on the PUBLIC side of the line (decorated:
   Cormorant Garamond 300 headings, gradient card/band fills, the
   public ground and hairline). dashboard.html, protocol.html,
   resource.html and the resource reader inside index.html are the
   MEMBER side and stay restrained — never apply this block's
   pattern to their own selectors. gold, gold-lt, teal, text, text2,
   text3, mob, safe and shut are shared across both sides and are
   unchanged by SR-320. See docs/page-invariants.md.
   ═════════════════════════════════════════════════════════════ */

/* SR-320 · two-surface conversion, presentation only. Ground, band and card
   tokens moved to the decorated public values (matching :root in plans.html /
   method.html / live-sessions.html / about.html exactly). gold, gold-lt, teal,
   text, text2, text3, mob, safe and shut are UNCHANGED — these never differ
   between the public and member surfaces, and mob/safe/shut in particular
   name autonomic states, not tracks; do not repurpose them. */
.sr-tp{
  --bg:#0A0A0F;
  --band:linear-gradient(145deg,rgba(24,24,34,.86),rgba(14,14,21,.92));
  --band2:linear-gradient(145deg,rgba(28,28,40,.9),rgba(16,16,24,.94));
  --card:linear-gradient(145deg,rgba(24,24,34,.86),rgba(14,14,21,.92));
  --hair:rgba(245,237,216,.09);
  --gold:#D4A843; --gold-lt:#ECC96A; --teal:#4E9AA6;
  --text:#F5EDD8; --text2:#9C9AA4; --text3:#6A6874;
  --mob:#C97A5A; --safe:#7FA88C; --shut:#5A6B84;
  /* SR-343 · track accent for the two shared diagrams (breath rhythm, four-step)
     — the same t1/t2/t3 triplet the nav dropdown and footer already use, not a
     new palette. Never repurposes --gold/--gold-lt/--teal, which page-invariants
     documents as identical across both themes and both surfaces; this is a
     separate token, defaulting to the site's plain gold until a track body
     class below overrides it. */
  --t1:#C97B5A; --t2:#7A8FA8; --t3:#6E9080;
  --tp-accent:var(--gold);
}
.sr-tp-t1{--tp-accent:var(--t1)}
.sr-tp-t2{--tp-accent:var(--t2)}
.sr-tp-t3{--tp-accent:var(--t3)}
.sr-tp .gold{font-style:italic;color:var(--gold-lt)}

.sr-tp{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
.sr-tp img, .sr-tp svg{display:block;max-width:100%}
.sr-tp .sr-tp-shell{max-width:1180px;margin:0 auto;padding:0 24px}
/* SR-341 · the shared public .nav is position:fixed (~97px tall) and, unlike
   the .sr-tp-nav it replaces, contributes nothing to document flow — without
   this, page content starts under the nav instead of below it. */
.sr-tp #main{padding-top:110px}
.sr-tp .sr-tp-band{background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 46%),var(--band);border:1px solid rgba(255,255,255,.035);border-radius:18px;padding:80px 56px;margin:24px 0;overflow:hidden}
.sr-tp .sr-tp-band--alt{background:var(--band2)}
.sr-tp .sr-tp-band--flush{padding-left:0;padding-right:0}
.sr-tp .sr-tp-inner{max-width:900px;margin:0 auto}
.sr-tp .sr-tp-wide{max-width:1060px;margin:0 auto}
.sr-tp .sr-tp-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px}
.sr-tp h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(30px,4.4vw,48px);line-height:1.14}
.sr-tp h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(27px,3.4vw,44px);line-height:1.12;letter-spacing:-.018em}
.sr-tp h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:21px;line-height:1.28}
.sr-tp .sr-tp-lede{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:var(--text2);line-height:1.68;max-width:600px}
.sr-tp .sr-tp-sechead{text-align:left;margin-bottom:44px;max-width:760px}
.sr-tp .sr-tp-sechead--center{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
.sr-tp .sr-tp-h2--oneline{white-space:nowrap;font-size:clamp(20px,2.9vw,36px)}
.sr-tp .sr-tp-sechead h2{margin-bottom:16px}
.sr-tp .sr-tp-sechead .sr-tp-lede{margin:0}
.sr-tp .sr-tp-sechead--center .sr-tp-lede{margin:0 auto;max-width:640px}
.sr-tp p.sr-tp-body{font-size:15px;color:var(--text2);line-height:1.8}
.sr-tp .sr-tp-note{font-size:12.5px;color:var(--text3);line-height:1.7}
.sr-tp .sr-tp-footnote{max-width:640px;margin:34px auto 0;text-align:center}
.sr-tp /* nav */
.sr-tp-nav{border-bottom:1px solid var(--hair);background:rgba(8,8,12,.95);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.sr-tp .sr-tp-navtop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.sr-tp .sr-tp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.sr-tp .sr-tp-brandmark{width:25px;height:25px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-size:11px;color:var(--gold)}
.sr-tp .sr-tp-brandname{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.22em;line-height:1.2}
.sr-tp .sr-tp-brandsub{font-size:11px;letter-spacing:.22em;color:var(--text3);display:block;margin-top:2px}
.sr-tp .sr-tp-navlinks{display:flex;gap:8px 18px;justify-content:center;padding-bottom:12px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);flex-wrap:wrap;align-items:center}
.sr-tp .sr-tp-navlinks a{color:inherit;text-decoration:none;padding:6px 0}
.sr-tp .sr-tp-navlinks .sr-tp-on{color:var(--gold);background:rgba(212,168,67,.09);padding:6px 14px;border-radius:18px}
.sr-tp .sr-tp-pill{display:inline-block;background:var(--gold);color:#08080C;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;padding:15px 24px;border-radius:3px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:44px;line-height:1.2;display:inline-flex;align-items:center}
.sr-tp .sr-tp-ghost{display:inline-block;background:transparent;color:var(--gold);border:1px solid rgba(212,168,67,.5);font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;padding:14px 24px;border-radius:3px;text-decoration:none;white-space:nowrap;min-height:44px;line-height:1.2;display:inline-flex;align-items:center}
.sr-tp a:focus-visible, .sr-tp button:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:3px}
.sr-tp .sr-tp-faqq:focus-visible{outline-offset:-2px}
.sr-tp .sr-tp-pill, .sr-tp .sr-tp-ghost, .sr-tp .sr-tp-jpill{transition:background .18s,border-color .18s}
.sr-tp .sr-tp-pill:hover, .sr-tp .sr-tp-pill:focus-visible{background:var(--gold-lt)}
.sr-tp .sr-tp-ghost:hover, .sr-tp .sr-tp-ghost:focus-visible{background:rgba(212,168,67,.12);border-color:var(--gold)}
.sr-tp .sr-tp-jpill{min-height:44px;display:inline-flex;align-items:center;line-height:1.2}
.sr-tp .sr-tp-jpill:hover, .sr-tp .sr-tp-jpill:focus-visible{background:rgba(212,168,67,.12);border-color:var(--gold)}
.sr-tp /* ---------- inline cta ---------- */
.sr-tp-inlinecta{text-align:center;border:1px solid rgba(212,168,67,.28);border-radius:14px;padding:40px 30px;margin:24px 0;
  background:linear-gradient(180deg,rgba(212,168,67,.045),transparent)}
.sr-tp .sr-tp-inlineline{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--text);line-height:1.5;margin-bottom:24px}
.sr-tp /* hero */
.sr-tp-hero{position:relative;border:1px solid rgba(212,168,67,.15);border-radius:16px;overflow:hidden;margin-top:24px;background:radial-gradient(circle at 79% 36%,rgba(236,201,106,.2),transparent 15%),linear-gradient(96deg,#0B0B12 0%,#0B0B12 40%,rgba(11,11,18,.74) 56%,rgba(11,11,18,.2) 75%,transparent 90%),linear-gradient(135deg,#17131b 35%,#4a3a24 70%,#8a7148 100%)}
.sr-tp .sr-tp-hero:after{content:"";position:absolute;right:8%;bottom:-32%;width:340px;height:500px;border-radius:48% 48% 20% 20%;background:linear-gradient(155deg,rgba(245,237,216,.16),rgba(212,168,67,.025));transform:rotate(4deg);box-shadow:0 0 100px rgba(212,168,67,.08)}
.sr-tp .sr-tp-heroin{padding:88px 60px 92px;max-width:640px;position:relative;z-index:2}
.sr-tp .sr-tp-heroin h1{margin-bottom:32px}
.sr-tp .sr-tp-herorule{border-left:2px solid var(--gold);padding-left:22px;margin:0 0 34px;max-width:500px}
.sr-tp .sr-tp-herorule p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--text);line-height:1.6}
.sr-tp .sr-tp-heroin .sr-tp-body{max-width:470px;font-size:15px;line-height:1.9}
.sr-tp .sr-tp-heroin .sr-tp-body + .sr-tp-body{margin-top:11px}
.sr-tp /* finished editorial graphics */
.sr-tp-graphic{position:relative;border:1px solid color-mix(in srgb,var(--tp-accent) 18%,transparent);border-radius:16px;background:linear-gradient(145deg,#12121d 0%,#0c0c14 62%,#111019 100%);padding:30px;overflow:hidden;min-height:220px;box-shadow:inset 0 1px rgba(255,255,255,.025),0 22px 60px rgba(0,0,0,.16)}
.sr-tp .sr-tp-glabel{position:relative;font-size:11px;letter-spacing:.31em;text-transform:uppercase;color:var(--tp-accent);font-weight:700;margin-bottom:24px}
.sr-tp .sr-tp-graphic svg{position:relative;width:100%;height:auto;overflow:visible}
.sr-tp .sr-tp-graphic-caption{position:relative;display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:18px;margin-top:12px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--text3)}
.sr-tp .sr-tp-graphic-caption strong{color:var(--text);font-weight:500}
.sr-tp .sr-tp-graphic-scroll{position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.sr-tp .sr-tp-graphic-scroll svg{min-width:720px}
.sr-tp /* states */

/* numbered rows */

.sr-tp-pull{max-width:680px;margin:40px auto 0;text-align:center}
.sr-tp .sr-tp-pull p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(19px,2.2vw,22px);line-height:1.52;color:var(--gold-lt)}
.sr-tp /* steps */

/* carousel */
.sr-tp-carhead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;padding:0 56px}
.sr-tp .sr-tp-carkick{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sr-tp .sr-tp-carnav{display:flex;align-items:center;gap:12px}
/* SR-163 · the numeric counter is gone. It read the active index against the
   total — "1 / 10" with five cards on screen — asserting a position it was
   not measuring. A dot per page of visible cards shows position without
   claiming a quantity. Same pattern as the hero's #srHeroDots. */
.sr-tp .sr-tp-cardots{display:flex;align-items:center;gap:7px}
.sr-tp .sr-tp-cardot{width:7px;height:7px;padding:0;border-radius:50%;border:1px solid rgba(245,237,216,.45);
  background:transparent;cursor:pointer;transition:width .22s,background-color .22s,border-color .22s}
.sr-tp .sr-tp-cardot.sr-tp-on{background:var(--gold);border-color:var(--gold);width:20px;border-radius:4px}
.sr-tp .sr-tp-carbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center;transition:border-color .18s,color .18s}
.sr-tp .sr-tp-carbtn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.sr-tp .sr-tp-carbtn:disabled{opacity:.3;cursor:default}
.sr-tp .sr-tp-carbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
/* SR-163 · the viewport is a clip, not a scroller. It carried BOTH
   overflow-x:auto with scroll-snap-type:x mandatory AND a JS transform on
   the track — two mechanisms driving one strip, which is why it read as
   stuck: scrollLeft sat at 56 at rest, snap having already moved it.
   The 56px gutter moved from padding to margin so the clip happens at the
   gutter rather than inside it; a card sliding out now disappears at the
   edge instead of showing through the padding. */
/* SR-174b · grab, because dragging genuinely works now. This is the opposite
   case to SR-178's card: an affordance the surface can actually keep.
   touch-action:pan-y lets the browser keep vertical page scrolling while
   the horizontal gesture is ours. */
.sr-tp .sr-tp-carviewport{overflow:hidden;padding:4px 0 8px;margin:0 56px;cursor:grab;touch-action:pan-y}
.sr-tp .sr-tp-cartrack{display:flex;gap:14px}
/* SR-178 · no cursor:pointer. Nothing is bound to this card and nothing can be:
   protocol.html hardcodes PAGE_PROTOCOL to t1-p01 and ignores ?track= and
   ?protocol= entirely, so any of the thirty cards could only ever land on
   Anxiety Reset. A pointer cursor on a card that does not open is a promise
   the page cannot keep. It returns when there is something to open. */
.sr-tp .sr-tp-pcard{position:relative;flex:0 0 236px;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:var(--card);transition:border-color .2s;display:flex;flex-direction:column}
.sr-tp .sr-tp-pcard:hover{border-color:rgba(212,168,67,.45)}
/* SR-162 · the cover is now the shared .sr-pcover component (PART B2).
   What stood here went with it, all of it:
     .sr-tp-pimg          a fixed 152px band on a 236px card, which cropped a
                          900x1200 portrait cover to a landscape strip — and
                          with no rule for the img at all, the image rendered
                          212x283 and sat 119px ABOVE its own container.
     .sr-tp-pimg:before   a 104x104 radial blob, and
     .sr-tp-pimg:after    a 92x145 leaf shape — decorative placeholders from
                          before the photography existed, still painting.
     13 nth-child rules   ten per-card gradients plus 2n/3n/4n variants that
                          repositioned the blobs. Retired with them.
     .sr-tp-pkick/-pno    the number and label, now drawn by the shared
                          component from the same record fields (p[0], p[1]).
     .sr-tp-pimgnote      an orphan display:none with no markup emitting it
                          anywhere in the repo. Inert; it described a defect
                          that no longer existed.
   The card keeps its own frame — border, 12px radius, overflow:hidden —
   which clips the cover's corners, so the cover needs no radius of its own. */
/* SR-326 · the free-protocol mark, passed as SafeRiseCover.art()'s `extra`
   for t1-01 only. Same corner-label treatment as .sr-pcover-label/-no
   (10px/.26em/uppercase/700), gold rather than the near-white the number
   and state word use, and the opposite top corner so it never collides
   with the label. Text only — no border, no fill, no pill shape. */
.sr-tp .sr-tp-free{position:absolute;top:11px;right:13px;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--gold);line-height:1.4}
.sr-tp .sr-tp-pmeta{padding:16px 16px 20px;text-align:left;display:flex;flex-direction:column;gap:8px}
/* SR-174 · the title was 13.5px — the same size as the promise line beneath it,
   so nothing read as a title. It now takes `.sr-tp h3` from the system scale
   (18px/1.34 Cinzel, line 2390) instead of overriding it down to body size.
   No new size was invented: this is the scale's own h3. */
.sr-tp .sr-tp-pmeta h3{font-size:18px;line-height:1.34}
.sr-tp .sr-tp-pdesc{font-size:12.5px;color:var(--text2);line-height:1.62}

/* ══ SR-174, redone at SR-368 · progressive disclosure on the protocol card ══
   Permanently visible: title, promise line, and the struggle chips — moved
   here from inside the reveal (below). Revealed on hover: one line, the
   signature, over the foot of the cover.

   SR-368 (PASS-track-page-quality.md §2): the previous version of this reveal
   carried the signature line AND the struggle chips, ~257px over a ~315px
   cover — measured at 79% of the cover obscured on hover, on a component
   whose whole point is the cover art. The chips are real content, not part of
   a hover reveal; they now render in normal flow, always visible, below the
   promise line. Only the signature line stays in .sr-tp-preveal.

   The reveal is still absolutely positioned over the foot of the cover — that
   part of SR-174's reasoning holds unchanged. Three constraints have to hold
   at once: the card must not get taller, the strip must not reflow when one
   card opens, and .sr-tp-carviewport is overflow:hidden so anything extending
   below the card is clipped. Out-of-flow is the only way to satisfy the first
   two, and upward over the cover is the only direction with room inside the
   card box. What changed is how much of the cover it is allowed to take: one
   line and its padding, not a panel.

   No background of its own now — legibility comes from .sr-pcover-scrim
   deepening under it (below), the same layer the label and number already
   read against, so the art is never veiled by two competing gradients.

   Timing is the sheet's existing reveal — .28s var(--sr-ease) on transform and
   opacity, the same pair used at lines 463 and 1739 — not a new curve.
   Reduced motion is handled centrally and is not repeated here (CLAUDE.md). */
.sr-tp .sr-tp-preveal{
  position:absolute;left:0;right:0;bottom:100%;
  padding:0 16px 18px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:transform .28s var(--sr-ease),opacity .28s}
.sr-tp .sr-tp-pmeta{position:relative}
.sr-tp .sr-tp-pcard:hover .sr-tp-preveal,
.sr-tp .sr-tp-pcard:focus-within .sr-tp-preveal{opacity:1;transform:translateY(0)}

/* The cover itself answers hover too, scoped to the track-page card only —
   .sr-pcover is shared with other surfaces (dashboard rotator among them)
   and neither of these is touched there (CLAUDE.md — never modify a shared
   selector to fix one page). Image scale 1.01→1.06 and the scrim deepening
   are the two motions PASS-track-page-quality.md §2 asked for; the cover
   stays visible throughout either way. */
.sr-tp .sr-tp-pcard .sr-pcover-img{transform:scale(1.01);transition:transform 1.1s var(--sr-ease)}
.sr-tp .sr-tp-pcard:hover .sr-pcover-img{transform:scale(1.06)}
/* SR-368 (PASS-track-page-quality.md §4b) · the shared .sr-pcover-scrim's own
   top stop (.62) left two of the ten covers' verb label under 4.5:1 at rest
   — 4.28:1 on Anger Alchemy, 4.27:1 on Shame Dissolution, measured against
   the real cover photographs. Nudged to .7 here, scoped to the track-page
   card only, rather than raising the shared rule's own value for every
   surface that reuses it. */
.sr-tp .sr-tp-pcard .sr-pcover-scrim{transition:background .28s var(--sr-ease);
  background:linear-gradient(180deg,rgba(8,8,12,.7) 0%,rgba(8,8,12,.14) 26%,rgba(8,8,12,.1) 52%,rgba(8,8,12,.76) 100%)}
.sr-tp .sr-tp-pcard:hover .sr-pcover-scrim{background:
  linear-gradient(180deg,rgba(8,8,12,.7) 0%,rgba(8,8,12,.16) 22%,rgba(8,8,12,.4) 55%,rgba(8,8,12,.92) 100%)}

/* Keyboard: the card is the only focusable thing tied to the reveal now, so
   it has to be reachable itself for a keyboard user to see the signature
   line. tabindex="0" with no role and no handler — it is a readable region,
   not a control (SR-178). */
.sr-tp .sr-tp-pcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Touch, and anything else with no hover: the reveal is not a reveal at all.
   Hover-only content does not exist on a phone, and per SR-178 there is no tap
   target competing with it. Both conditions are covered — the pointer query
   catches tablets that are wide, the width query catches a narrow mouse window. */
@media (hover:none),(max-width:560px){
  .sr-tp .sr-tp-preveal{
    position:static;opacity:1;transform:none;pointer-events:auto;
    /* no transition here: there is nothing to reveal, so a 0→1 fade would be an
       entrance animation on page load that nobody asked for */
    transition:none;
    padding:0;margin-top:2px}
  .sr-tp .sr-tp-pcard .sr-pcover-img{transform:none;transition:none}
}
.sr-tp .sr-tp-pbody{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px;color:var(--text);line-height:1.42;text-shadow:0 1px 10px rgba(8,8,12,.9)}
.sr-tp /* cost of the state */
.sr-tp-costimg{position:relative;border-radius:14px;overflow:hidden;line-height:0;margin-top:6px;aspect-ratio:16/7}
.sr-tp .sr-tp-costimg img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sr-tp .sr-tp-costscrim{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,8,12,.5) 48%,rgba(8,8,12,.9))}
.sr-tp .sr-tp-costcap{position:absolute;bottom:9%;max-width:26%}
.sr-tp .sr-tp-cc-a{left:4%}
.sr-tp .sr-tp-cc-b{left:37%;max-width:29%}
.sr-tp .sr-tp-cc-c{left:69%}
.sr-tp .sr-tp-cctime{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px;line-height:1.4}
.sr-tp .sr-tp-ccname{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-weight:700;line-height:1.5}
.sr-tp .sr-tp-costnote{margin-top:18px;font-size:12.5px;color:var(--text3);line-height:1.75}
.sr-tp .sr-tp-costgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 26px;margin-top:40px}
.sr-tp .sr-tp-citem{padding-top:20px;border-top:1px solid var(--edge)}
.sr-tp .sr-tp-cikey{font-family:'Cinzel',serif;font-size:18px;color:var(--gold);margin-bottom:12px}
.sr-tp .sr-tp-cival{font-size:13.5px;color:var(--text2);line-height:1.78}
.sr-tp .sr-tp-costclose{margin-top:46px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,22px);color:var(--text);line-height:1.5}
.sr-tp /* six areas */
.sr-tp-sixwrap{position:relative;border-radius:14px;overflow:hidden;margin-top:10px;min-height:520px}
.sr-tp .sr-tp-sixbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.sr-tp .sr-tp-sixscrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,12,.97) 0%,rgba(8,8,12,.94) 38%,rgba(8,8,12,.62) 56%,rgba(8,8,12,.2) 78%,rgba(8,8,12,.35) 100%)}
.sr-tp .sr-tp-sixinner{position:relative;padding:36px 38px 34px;max-width:70%}
.sr-tp .sr-tp-sixkick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sr-tp .sr-tp-sixgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:26px}
.sr-tp .sr-tp-sixi{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid;font-size:13.5px;margin-bottom:12px}
.sr-tp .sr-tp-sixname{font-family:'Cinzel',serif;font-size:18px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.sr-tp .sr-tp-sixfrom{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;color:var(--text3);margin-bottom:10px}
.sr-tp .sr-tp-sixbody{font-size:13.5px;color:#D8D4CB;line-height:1.7}
.sr-tp .sr-tp-sixclose{margin-top:34px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,22px);color:var(--text)}
.sr-tp .sr-tp-graphic{position:relative;border:1px solid color-mix(in srgb,var(--tp-accent) 18%,transparent);border-radius:16px;background:linear-gradient(145deg,#12121d 0%,#0c0c14 62%,#111019 100%);padding:30px;overflow:hidden;min-height:220px;box-shadow:inset 0 1px rgba(255,255,255,.025),0 22px 60px rgba(0,0,0,.16)}
.sr-tp .sr-tp-graphic:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 0,color-mix(in srgb,var(--tp-accent) 12%,transparent),transparent 33%),radial-gradient(circle at 5% 100%,rgba(78,154,166,.08),transparent 27%);pointer-events:none}
.sr-tp .sr-tp-graphic--feature{padding:38px 40px}
.sr-tp .sr-tp-gsub{font-size:12.5px;color:var(--text2);line-height:1.72;margin:-6px 0 16px;max-width:440px}
.sr-tp .sr-tp-glabel{position:relative;font-size:8.5px;letter-spacing:.31em;text-transform:uppercase;color:var(--tp-accent);font-weight:700;margin-bottom:24px}
.sr-tp .sr-tp-graphic svg{position:relative;width:100%;height:auto;overflow:visible}
.sr-tp .sr-tp-graphic-caption{position:relative;display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:18px;margin-top:12px;border-top:1px solid var(--hair);font-size:11px;color:var(--text3)}
.sr-tp .sr-tp-graphic-caption strong{color:var(--text);font-weight:500}
.sr-tp .sr-tp-graphic-scroll{position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.sr-tp .sr-tp-graphic-scroll svg{min-width:720px}

/* ══════════════════════════════════════════════════════════════════════
   SR-343 · track diagram animation. SVG stroke-dasharray/dashoffset and
   CSS keyframes only — no JS animation loop, no library. Motion stays
   inside each diagram's own lines and light; nothing here scales or
   parallaxes. .sr-tp-graphic--off (toggled by js/saferise-track.js's
   IntersectionObserver, not a scroll listener) pauses every loop while
   its card is off-screen; the once-only Floor-family draws are triggered
   by the same observer adding .sr-tp-graphic--play once, never removed.
   prefers-reduced-motion overrides live centrally, this file's existing
   @media(prefers-reduced-motion:reduce) block — not repeated here. ══ */

/* breath rhythm — 4s expanding, 6s contracting, infinite, no start button */
.sr-tp-breathcurve{stroke-dasharray:820;stroke-dashoffset:820;
  animation:srTpBreathDraw 10s ease-in-out infinite}
@keyframes srTpBreathDraw{
  0%{stroke-dashoffset:820}
  40%{stroke-dashoffset:0}
  100%{stroke-dashoffset:820}
}

/* four-step — light rests briefly at each of the four marks, then choice.
   One pass every 8s. Dashoffset values are the real cumulative length to
   each node, measured live off the path's own d attribute
   (SVGPathElement.getTotalLength/getPointAtLength), not estimated. */
.sr-tp-fourlight{stroke-dasharray:16 3000;stroke-dashoffset:40;opacity:.85;
  animation:srTpFourLight 8s linear infinite}
@keyframes srTpFourLight{
  0%{stroke-dashoffset:40}
  6%{stroke-dashoffset:0}
  16%{stroke-dashoffset:0}
  22%{stroke-dashoffset:-229}
  32%{stroke-dashoffset:-229}
  38%{stroke-dashoffset:-465}
  48%{stroke-dashoffset:-465}
  54%{stroke-dashoffset:-826}
  64%{stroke-dashoffset:-826}
  72%{stroke-dashoffset:-1033}
  84%{stroke-dashoffset:-1033}
  92%{stroke-dashoffset:40}
  100%{stroke-dashoffset:40}
}

.sr-tp-graphic--off .sr-tp-breathcurve,
.sr-tp-graphic--off .sr-tp-fourlight,
.sr-tp-graphic--off .sr-tp-halflight,
.sr-tp-graphic--off .sr-tp-fastlight,
.sr-tp-graphic--off .sr-tp-slowlight,
.sr-tp-graphic--off .sr-tp-roomlight{animation-play-state:paused}

/* two-timeline family — t1 keeps its own dual pulse (fast route arrives at
   35%, slower route follows and arrives at 55% of the same 7s cycle; the
   gap between those two numbers is the argument); t2 and t3 each carry one
   pulse on the same 7s pace, so no track reads as more or less animated
   than the others. Lengths are measured off each path's own d attribute
   (SVGPathElement.getTotalLength()), not estimated. */
.sr-tp-fastlight{stroke-dasharray:14 3000;stroke-dashoffset:30;opacity:.9;
  animation:srTpFastPulse 7s linear infinite}
@keyframes srTpFastPulse{
  0%{stroke-dashoffset:30}
  35%{stroke-dashoffset:-588}
  88%{stroke-dashoffset:-588}
  100%{stroke-dashoffset:30}
}
.sr-tp-slowlight{stroke-dasharray:14 3000;stroke-dashoffset:30;opacity:.9;
  animation:srTpSlowPulse 7s linear infinite}
@keyframes srTpSlowPulse{
  0%{stroke-dashoffset:30}
  55%{stroke-dashoffset:-585}
  88%{stroke-dashoffset:-585}
  100%{stroke-dashoffset:30}
}
.sr-tp-halflight{stroke-dasharray:10 3000;stroke-dashoffset:20;opacity:.9;
  animation:srTpHalfPulse 7s linear infinite}
@keyframes srTpHalfPulse{
  0%{stroke-dashoffset:20}
  35%{stroke-dashoffset:-140}
  88%{stroke-dashoffset:-140}
  100%{stroke-dashoffset:20}
}
.sr-tp-roomlight{stroke-dasharray:10 3000;stroke-dashoffset:20;opacity:.9;
  animation:srTpRoomPulse 7s linear infinite}
@keyframes srTpRoomPulse{
  0%{stroke-dashoffset:20}
  35%{stroke-dashoffset:-160}
  88%{stroke-dashoffset:-160}
  100%{stroke-dashoffset:20}
}
.sr-tp-braced{animation:srTpBracedDim 7s linear infinite}
.sr-tp-steady{animation:srTpSteadyLight 7s linear infinite}
@keyframes srTpBracedDim{0%{opacity:.9}33%{opacity:.9}42%{opacity:.35}88%{opacity:.35}100%{opacity:.9}}
@keyframes srTpSteadyLight{0%{opacity:.35}33%{opacity:.35}42%{opacity:1}88%{opacity:1}100%{opacity:.35}}
.sr-tp-graphic--off .sr-tp-braced,
.sr-tp-graphic--off .sr-tp-steady{animation-play-state:paused}

/* floor family — plays once, ~1.4s, on entering the viewport. A statement,
   not a rhythm, so .sr-tp-graphic--play is added once and never removed
   (a one-shot IntersectionObserver hit, not the continuous --off toggle
   above). One shared dasharray/keyframe pair for every "draw the line"
   diagram in the family (t1's own curve, t3's two lines) — 600 safely
   exceeds each path's real measured length (555 / 490 / 476), and a
   dasharray value only needs to be at least as long as the path itself
   for a full reveal at dashoffset:0, so one definition covers all three
   without matching each path's own number. */
.sr-tp-loaddraw{stroke-dasharray:600;stroke-dashoffset:600}
.sr-tp-graphic--play .sr-tp-loaddraw{animation:srTpLoadDraw 1.4s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes srTpLoadDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.sr-tp-orbitwide{opacity:1}
.sr-tp-orbitnarrow{opacity:0}
.sr-tp-graphic--play .sr-tp-orbitwide{animation:srTpOrbitOut 1.4s cubic-bezier(.22,.61,.36,1) forwards}
.sr-tp-graphic--play .sr-tp-orbitnarrow{animation:srTpOrbitIn 1.4s cubic-bezier(.22,.61,.36,1) .1s forwards}
@keyframes srTpOrbitOut{from{opacity:1}to{opacity:0}}
@keyframes srTpOrbitIn{from{opacity:0}to{opacity:1}}

.sr-tp .sr-tp-mini-kicker{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.sr-tp .sr-tp-insight-points{display:grid;gap:18px}
.sr-tp .sr-tp-insight-point{border-left:1px solid rgba(212,168,67,.32);padding-left:18px}
.sr-tp .sr-tp-insight-point strong{display:block;font-family:'Cinzel',serif;font-size:13px;font-weight:400;color:var(--text);margin-bottom:6px}
.sr-tp .sr-tp-insight-point p{font-size:13.5px;color:var(--text2);line-height:1.72}
.sr-tp .sr-tp-graphpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.sr-tp .sr-tp-graphpair{grid-template-columns:minmax(0,1fr)}
@media(max-width:480px){.sr-tp .sr-tp-shell{padding:0 14px}.sr-tp .sr-tp-band{padding:46px 19px;margin:18px 0}.sr-tp .sr-tp-hero{min-height:560px;display:flex;align-items:flex-end}.sr-tp .sr-tp-hero:after{opacity:.7}.sr-tp .sr-tp-graphic, .sr-tp .sr-tp-graphic--feature{padding:20px}.sr-tp .sr-tp-graphic-caption{align-items:flex-start;flex-direction:column;gap:5px}}
/* .sr-tp-stickycta's own 480px override moved to line ~2969 (SR-368), next
   to the rest of its rebuilt rules rather than in this unrelated batch. */
.sr-tp .sr-tp-graphpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.sr-tp /* protocol foundation */
.sr-tp-pfimg{position:relative;border-radius:14px;overflow:hidden;line-height:0}
.sr-tp .sr-tp-pfimg img{width:100%;height:auto;display:block}
.sr-tp .sr-tp-pfsteps{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:0 26px 20px;background:linear-gradient(180deg,transparent,rgba(8,8,12,.7) 60%,rgba(8,8,12,.9))}
.sr-tp .sr-tp-pfsteps span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.sr-tp .sr-tp-pfcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px;margin-top:34px}
.sr-tp .sr-tp-pfcol{padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column}
.sr-tp .sr-tp-pfname{font-family:'Cinzel',serif;font-size:18px;color:var(--text);letter-spacing:.04em;margin-bottom:14px;text-transform:uppercase}
.sr-tp .sr-tp-pfbody{font-size:13.5px;color:var(--text2);line-height:1.78}
.sr-tp .sr-tp-pfcite{margin-top:auto;padding-top:24px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);line-height:1.8}
.sr-tp .sr-tp-pfclose{text-align:center;margin-top:44px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,22px);color:var(--text)}
.sr-tp /* nervous system range */
.sr-tp-rangefig{margin-top:8px}
.sr-tp .sr-tp-rangeimg{position:relative;border-radius:14px;overflow:hidden;line-height:0}
.sr-tp .sr-tp-rangeimg img{width:100%;height:auto;display:block}
.sr-tp .sr-tp-rangeframe{position:absolute;left:31%;right:31%;top:4%;bottom:4%;border:1px solid rgba(212,168,67,.75);
  border-radius:2px;box-shadow:0 0 60px rgba(212,168,67,.14) inset;pointer-events:none}
/* SR-368 (PASS-track-page-quality.md §4a) · the old stops — transparent at
   0%, only reaching .72 by 55% — left the label row (which sits near the top
   of this box, not its middle) under a scrim too weak to read against a
   light patch of photograph: measured 2.45:1 for Safety, 2.52:1 for
   Shutdown, both against `#F5EDD8`-family text on `--pt-safe`/`--pt-shut`
   colour, well under the 4.5:1 line, while Mobilisation happened to clear it
   at 5.84:1 only because that third of the photo is dark red rather than
   light. Starting the gradient already dark, not transparent, fixes the
   labels without darkening the photograph's own bottom edge any further
   than before. */
.sr-tp .sr-tp-rangecaps{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  padding:0 30px 22px;line-height:1.5;
  background:linear-gradient(180deg,rgba(8,8,12,.6),rgba(8,8,12,.82) 45%,rgba(8,8,12,.94))}
.sr-tp .sr-tp-rcap{padding-right:16px}
.sr-tp .sr-tp-rcname{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.sr-tp .sr-tp-rcsub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3)}
.sr-tp .sr-tp-rangecols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;margin-top:34px}
.sr-tp .sr-tp-rcol{padding-top:20px;border-top:1px solid var(--edge)}
.sr-tp .sr-tp-rquote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--text);
  line-height:1.5;margin-bottom:18px}
.sr-tp .sr-tp-rbody{font-size:15px;color:var(--text2);line-height:1.8}
.sr-tp .sr-tp-rangeclose{text-align:center;margin-top:46px}
.sr-tp .sr-tp-rcloseq{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(19px,2.2vw,22px);color:var(--text);margin-bottom:12px}
.sr-tp .sr-tp-rclosek{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sr-tp /* journey — triptych */
.sr-tp-journey{margin:34px 0 0;border-top:1px solid var(--hair);padding-top:44px}
.sr-tp .sr-tp-jtop{padding:0 56px 26px}
.sr-tp .sr-tp-jkick{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:18px}
.sr-tp .sr-tp-jtitle{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(24px,3.2vw,36px);line-height:1.28;color:var(--text);margin-bottom:14px}
.sr-tp .sr-tp-jsub{font-size:15px;color:var(--text2);line-height:1.7}
.sr-tp .sr-tp-jband{line-height:0}
.sr-tp .sr-tp-jband img{width:100%;height:auto;display:block}
.sr-tp .sr-tp-jrule{height:2px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,#6E8E93 62%,var(--teal) 100%)}
.sr-tp .sr-tp-jcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:44px 56px 0}
.sr-tp .sr-tp-jcol{padding:0 34px;border-left:1px solid var(--hair);display:flex;flex-direction:column}
.sr-tp .sr-tp-jcol:first-child{padding-left:0;border-left:0}
.sr-tp .sr-tp-jcol:last-child{padding-right:0}
.sr-tp .sr-tp-jtag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.sr-tp .sr-tp-jname{font-family:'Cinzel',serif;font-size:21px;color:var(--text);line-height:1.2;margin-bottom:10px}
.sr-tp .sr-tp-jvalue{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--text2);line-height:1.45;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--hair)}
.sr-tp .sr-tp-jbody{font-size:15px;color:var(--text2);line-height:1.8}
.sr-tp .sr-tp-jbody + .sr-tp-jbody{margin-top:14px}
.sr-tp .sr-tp-jnote{margin-top:16px;padding-left:16px;border-left:2px solid rgba(78,154,166,.6);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;color:var(--text2);line-height:1.62}
.sr-tp .sr-tp-jmeta{margin-top:auto;padding-top:26px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);line-height:1.9}
.sr-tp .sr-tp-jopt{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;
  margin:40px 56px 0;padding-top:30px;border-top:1px solid var(--hair)}
.sr-tp .sr-tp-jopttag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text3);font-weight:700;margin-bottom:10px}
.sr-tp .sr-tp-jopttitle{font-family:'Cinzel',serif;font-size:21px;color:var(--text);line-height:1.35;white-space:nowrap}
.sr-tp .sr-tp-joptbody{font-size:15px;color:var(--text2);line-height:1.78;max-width:620px}
.sr-tp .sr-tp-joptbtns{display:flex;gap:12px}
.sr-tp .sr-tp-jpill{color:var(--gold);border:1px solid rgba(212,168,67,.45);border-radius:30px;font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;padding:13px 24px;text-decoration:none;white-space:nowrap}
.sr-tp .sr-tp-figcell + 
/* observable shifts */

/* cost / notices */
.sr-tp-notices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sr-tp .sr-tp-notice{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:24px 22px;text-align:left}
.sr-tp .sr-tp-notice h3{font-size:15px;margin-bottom:9px}
.sr-tp .sr-tp-notice p{font-size:13.5px;color:var(--text2);line-height:1.72}
.sr-tp /* included */
.sr-tp-inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 30px}
.sr-tp .sr-tp-incitem{display:grid;grid-template-columns:42px minmax(0,1fr);gap:15px;align-items:start;text-align:left}
.sr-tp .sr-tp-icon{width:42px;height:42px;border-radius:9px;background:var(--card);border:1px solid var(--hair);display:grid;place-items:center;color:var(--gold)}
.sr-tp .sr-tp-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sr-tp .sr-tp-incitem h3{font-size:15px;margin-bottom:6px}
.sr-tp .sr-tp-inctag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13.5px;color:var(--gold);margin-bottom:7px;line-height:1.5}
.sr-tp .sr-tp-incitem p{font-size:13.5px;color:var(--text2);line-height:1.72}
.sr-tp /* dont */

/* pricing */
.sr-tp-pricewrap{border:1px solid rgba(212,168,67,.4);border-radius:14px;padding:52px 44px;background:linear-gradient(180deg,rgba(212,168,67,.055),transparent);text-align:center}
.sr-tp .sr-tp-pricebox{max-width:460px;margin:0 auto}
.sr-tp .sr-tp-pricenum{font-family:'Cinzel',serif;font-size:42px;color:var(--gold);line-height:1;margin-bottom:22px}
.sr-tp .sr-tp-priceper{font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--text3)}
.sr-tp .sr-tp-pricelist{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:6px 0;margin-bottom:26px}
.sr-tp .sr-tp-pricelist p{font-size:13.5px;color:var(--text2);padding:11px 0;line-height:1.6}
.sr-tp .sr-tp-pricelist p + p{border-top:1px solid var(--hair)}
.sr-tp /* rooms */

/* faq */
.sr-tp-faqcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;text-align:left}
.sr-tp .sr-tp-faqcol{display:flex;flex-direction:column}
.sr-tp .sr-tp-faqitem{border-bottom:1px solid var(--hair)}
.sr-tp .sr-tp-faqq{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;width:100%;background:none;border:0;padding:17px 0;font-family:inherit;font-size:15px;color:var(--text2);text-align:left;cursor:pointer;line-height:1.6}
.sr-tp .sr-tp-faqq:hover{color:var(--text)}
.sr-tp .sr-tp-faqq .sr-tp-plus{color:var(--gold);opacity:.85;transition:transform .2s}
.sr-tp .sr-tp-faqitem.sr-tp-open .sr-tp-plus{transform:rotate(45deg)}
.sr-tp .sr-tp-faqitem.sr-tp-open .sr-tp-faqq{color:var(--text)}
.sr-tp .sr-tp-faqa{display:none;padding:0 0 20px 30px;font-size:13.5px;color:var(--text2);line-height:1.8}
.sr-tp .sr-tp-faqa p + p{margin-top:12px}
.sr-tp .sr-tp-faqitem.sr-tp-open .sr-tp-faqa{display:block}
/* SR-368 (PASS-track-page-quality.md §6) · measured at 106px total, a 74px
   pill inside it, on a 768px viewport — 14% of the screen, permanently, with
   no way to dismiss it. Rebuilt to the approved slim bar: 44px, sentence
   case, dismissible. The base .sr-tp-pill and .sr-tp-stickycta p rules stay
   untouched — both are shared with other CTAs on the page — so every change
   below is scoped under .sr-tp-stickycta itself, a smaller instance of the
   same component rather than a second one. */
.sr-tp /* sticky cta */
.sr-tp-stickycta{position:sticky;bottom:16px;z-index:30;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--hair);border-radius:24px;padding:6px 8px 6px 18px;background:var(--band2);margin:24px 0}
.sr-tp .sr-tp-stickycta p{margin:0;font-family:'DM Sans',system-ui,sans-serif;font-style:normal;font-size:13px;color:var(--text2);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-tp .sr-tp-stickycta .sr-tp-pill{box-sizing:border-box;font-size:11px;padding:9px 16px;text-transform:none;letter-spacing:.02em;height:32px;min-height:0;flex:0 0 auto}
.sr-tp .sr-tp-stickyx{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:transparent;
  color:var(--text3);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sr-tp .sr-tp-stickyx:hover,.sr-tp .sr-tp-stickyx:focus-visible{color:var(--text);background:rgba(255,255,255,.06)}
.sr-tp .sr-tp-stickycta.sr-tp-dismissed{display:none}
@media(max-width:480px){.sr-tp .sr-tp-stickycta{border-radius:20px;padding:6px 6px 6px 16px}}
.sr-tp .sr-tp-scope{border:1px solid var(--hair);border-radius:12px;padding:26px 28px;background:var(--band2);font-size:12.5px;color:var(--text2);line-height:1.85}
.sr-tp .sr-tp-scope .sr-tp-sk{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sr-tp footer{padding:46px 0 60px;font-size:12.5px;color:var(--text3);text-align:center;line-height:1.9}
@media(max-width:760px){.sr-tp .sr-tp-band{padding:52px 22px;border-radius:12px}.sr-tp .sr-tp-carhead{padding-left:22px;padding-right:22px}.sr-tp .sr-tp-carviewport{margin-left:22px;margin-right:22px}.sr-tp .sr-tp-jtop, .sr-tp .sr-tp-jcols{padding-left:22px;padding-right:22px}.sr-tp .sr-tp-jopt{margin-left:22px;margin-right:22px}.sr-tp .sr-tp-jcols{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px}.sr-tp .sr-tp-rangecols{grid-template-columns:minmax(0,1fr);gap:26px}.sr-tp .sr-tp-pfcols{grid-template-columns:minmax(0,1fr);gap:26px}.sr-tp .sr-tp-graphpair{grid-template-columns:minmax(0,1fr)}.sr-tp .sr-tp-sixinner{max-width:100%;padding:26px 22px}.sr-tp .sr-tp-costgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.sr-tp .sr-tp-costscrim{display:none}.sr-tp .sr-tp-costcap{position:static;max-width:none;margin-top:14px}.sr-tp .sr-tp-costcap:first-of-type{margin-top:18px}.sr-tp .sr-tp-sixgrid{grid-template-columns:minmax(0,1fr);gap:24px}.sr-tp .sr-tp-sixscrim{background:linear-gradient(180deg,rgba(8,8,12,.9),rgba(8,8,12,.96))}.sr-tp .sr-tp-pfnotes{grid-template-columns:minmax(0,1fr);gap:24px}.sr-tp .sr-tp-pfsteps{position:static;background:none;padding:14px 0 0}.sr-tp .sr-tp-rangecaps{position:static;background:none;padding:16px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sr-tp .sr-tp-rangeframe{display:none}.sr-tp .sr-tp-jcol{padding:32px 0 0;border-left:0;border-top:1px solid var(--hair)}.sr-tp .sr-tp-jcol:first-child{padding-top:0;border-top:0}.sr-tp .sr-tp-jopt{grid-template-columns:minmax(0,1fr);gap:18px}.sr-tp .sr-tp-jopttitle{white-space:normal}.sr-tp .sr-tp-inc, .sr-tp .sr-tp-notices, .sr-tp .sr-tp-faqcols, .sr-tp .sr-tp-costgrid, .sr-tp .sr-tp-pfcols, .sr-tp .sr-tp-rangecols, .sr-tp .sr-tp-sixgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.sr-tp .sr-tp-h2--oneline{white-space:normal;font-size:clamp(22px,5.6vw,30px)}.sr-tp .sr-tp-heroin{padding:52px 24px 56px}.sr-tp .sr-tp-heroin h1{margin-bottom:26px}.sr-tp .sr-tp-herorule{margin-bottom:28px;padding-left:18px}.sr-tp .sr-tp-herorule p{font-size:21px}.sr-tp .sr-tp-hero{background:linear-gradient(180deg,rgba(11,11,18,.5),#0B0B12 60%),linear-gradient(120deg,#241d13,#7a6140)}.sr-tp .sr-tp-pricewrap{padding:34px 20px}.sr-tp .sr-tp-insight-layout{grid-template-columns:minmax(0,1fr)!important}.sr-tp .sr-tp-navlinks{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sr-tp .sr-tp-navlinks::-webkit-scrollbar{display:none}}
.sr-tp .sr-tp-struggle{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.sr-tp .sr-tp-struggle span{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:12.5px;color:var(--text3);border:1px solid var(--hair);border-radius:14px;padding:2px 10px}
.sr-tp .sr-tp-ph{width:100%;border:1px dashed rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);display:grid;place-items:center;margin:0 0 18px}
.sr-tp .sr-tp-ph span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.sr-tp .sr-tp-costimg .sr-tp-ph, .sr-tp .sr-tp-rangeimg .sr-tp-ph, .sr-tp .sr-tp-pfimg .sr-tp-ph, .sr-tp .sr-tp-sixwrap .sr-tp-ph{margin:0}
.sr-tp .sr-tp-costimg{position:relative}
.sr-tp .sr-tp-costcaps{display:flex;justify-content:space-around;gap:20px;margin:14px 0 6px}
.sr-tp .sr-tp-costcaps .sr-tp-costcap{position:static;inset:auto;transform:none;text-align:center;flex:1}
.sr-tp .sr-tp-insight-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(430px,1.28fr);gap:30px;align-items:center}
.sr-tp /* ══ readability pass ══ */
.sr-tp-glabel{font-size:10.5px !important}
.sr-tp .sr-tp-gsub{font-size:13.5px !important;line-height:1.75}
.sr-tp .sr-tp-pdesc{font-size:13.5px !important;line-height:1.6}
.sr-tp .sr-tp-pbody{font-size:13.5px !important;line-height:1.6}
.sr-tp .sr-tp-costnote, .sr-tp .sr-tp-note, .sr-tp .sr-tp-note.sr-tp-footnote{font-size:13px !important;line-height:1.75}
.sr-tp .sr-tp-rcname{font-size:13.5px !important}
.sr-tp .sr-tp-rcsub, .sr-tp .sr-tp-cctime, .sr-tp .sr-tp-pfcite{font-size:11.5px !important}
.sr-tp .sr-tp-pfstep{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:9px}
.sr-tp .sr-tp-pfcol .sr-tp-pfname{margin-bottom:12px}
.sr-tp .sr-tp-graphic-caption span, .sr-tp .sr-tp-graphic-caption strong{font-size:13px}
.sr-tp .sr-tp-jbody, .sr-tp .sr-tp-jnote, .sr-tp .sr-tp-cival, .sr-tp .sr-tp-sixbody, .sr-tp .sr-tp-rbody{font-size:13.5px;line-height:1.72}
.sr-tp .sr-tp-sixfrom{font-size:12.5px}
.sr-tp .sr-tp-struggle span{font-size:13px}
.sr-tp .sr-tp-faqitem .sr-tp-faqa{max-height:0;overflow:hidden;transition:max-height .35s ease}
.sr-tp .sr-tp-faqitem.sr-tp-on .sr-tp-faqa{max-height:600px}
.sr-tp .sr-tp-faqitem.sr-tp-on .sr-tp-plus{transform:rotate(45deg)}
.sr-tp .sr-tp-plus{display:inline-block;transition:transform .25s ease;margin-right:10px;color:var(--gold)}
.sr-tp .sr-tp-faqq{font-size:14px;line-height:1.5}
.sr-tp .sr-tp-faqa p{font-size:13.5px;line-height:1.75;color:var(--text2)}
.sr-tp footer{text-align:center;padding:40px 24px 70px;font-size:12px;color:var(--text3);border-top:1px solid var(--hair);margin-top:40px}
.sr-tp .sr-tp-nav{position:static !important}
.sr-tp .sr-tp-scope{margin-bottom:70px}
@media(max-width:760px){.sr-tp .sr-tp-insight-layout{grid-template-columns:1fr}}

/* Skip link — ported from the mockup's .skip, renamed for the sr-tp
   namespace. Kept because the template's first interactive element is
   otherwise the carousel, several screens into the document. */
.sr-tp .sr-tp-skiplink{position:fixed;left:16px;top:-90px;z-index:60;background:var(--gold);color:#08080C;font-size:12.5px;font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none}
.sr-tp .sr-tp-skiplink:focus{top:16px}

/* ═════════════════════════════════════════════════════════════
   SR-190 · SUPPORT ADVISORY  (getting-help.html)
   Ten Safe Practice resources across Track 01 resolve "a helpline
   in your country" to this page, so it has to exist before Track
   01 ships and be reachable without an account.

   Scoped under .sr-tp like everything else in this file — the
   tokens live on that class, not :root, deliberately (see the
   token-ownership note above). The page is prose, so this is a
   measure and a rhythm, not a component set.

   Deliberately NO duration, count, progress or score styling
   here: the authored content forbids all four platform-wide, and
   a hook in the stylesheet is an invitation to render one.
   ═════════════════════════════════════════════════════════════ */

.sr-tp .sr-adv{max-width:720px;margin:0 auto;padding:0 24px}
.sr-tp .sr-adv-hd{padding:72px 0 8px}
.sr-tp .sr-adv-hd h1{margin:0 0 18px;font:400 clamp(30px,4vw,46px)/1.14 'Cinzel',serif;color:var(--text)}

/* The immediate-danger block leads the page and must read as the
   most urgent thing on it without shouting. Left rule, not a
   filled alert box — a red panel on a page someone opens in a bad
   state is the wrong register. */
.sr-tp .sr-adv-urgent{margin:0 0 44px;padding:18px 22px;border-left:2px solid var(--gold);
  background:rgba(212,168,67,.06);border-radius:0 var(--sr-r-sm) var(--sr-r-sm) 0}
.sr-tp .sr-adv-urgent p{margin:0;font:400 16px/1.7 'DM Sans',sans-serif;color:var(--text)}
.sr-tp .sr-adv-urgent b{font-weight:700;color:var(--text)}

.sr-tp .sr-adv h2{margin:52px 0 18px;font:400 clamp(22px,2.4vw,28px)/1.25 'Cinzel',serif;color:var(--text)}
.sr-tp .sr-adv h3{margin:38px 0 14px;font:700 11px/1.4 'DM Sans',sans-serif;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--gold)}
.sr-tp .sr-adv p{margin:0 0 18px;font:400 15.5px/1.8 'DM Sans',sans-serif;color:var(--text2);max-width:62ch}
.sr-tp .sr-adv p b{color:var(--text);font-weight:700}
.sr-tp .sr-adv p i, .sr-tp .sr-adv p em{color:var(--text);font-style:italic}
.sr-tp .sr-adv a{color:var(--gold-lt)}

.sr-tp .sr-adv-close{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--hair)}
@media(max-width:760px){
  .sr-tp .sr-adv-hd{padding-top:48px}
  .sr-tp .sr-adv h2{margin-top:40px}
}

/* ═════════════════════════════════════════════════════════════
   SR-182 · PROTOCOL NOT FOUND
   Shown when protocol.html was asked for a protocol the record
   does not hold. Deliberately plain: this is an error state, not
   a destination, and it should not look like somewhere to stay.
   Not scoped to .sr-tp — protocol.html carries its own tokens,
   so these are literals matched to that page's ground.
   ═════════════════════════════════════════════════════════════ */
.sr-notfound{display:flex;align-items:center;justify-content:center;
  min-height:70vh;padding:48px 24px;background:#08080C}
.sr-notfound-in{max-width:520px;text-align:center}
.sr-notfound-in h1{margin:0 0 18px;
  font:400 clamp(24px,3vw,34px)/1.2 'Cinzel',Georgia,serif;color:#F5EDD8}
.sr-notfound-in p{margin:0 0 14px;
  font:400 15px/1.75 'DM Sans',system-ui,sans-serif;color:#9C9AA4}
.sr-notfound-in a{color:#ECC96A}
.sr-notfound-req{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:#6A6874}

/* ═════════════════════════════════════════════════════════════
   SR-182 · THE CARD AFFORDANCE RETURNS
   SR-178 removed `cursor:pointer` from .sr-tp-pcard because the
   destination did not exist — every one of the thirty cards could
   only land on Anxiety Reset. protocol.html now resolves ?track=
   and ?protocol= against the record, so there is something to
   open and the affordance is honest again.

   SR-178's own words: "The cursor returns when there is something
   to open." This is that. The card takes role="button" and a
   handler alongside it; tabindex was already there for the
   SR-174 reveal.
   ═════════════════════════════════════════════════════════════ */
.sr-tp .sr-tp-pcard[role="button"]{cursor:pointer}

/* ═════════════════════════════════════════════════════════════
   SR-209 · DIAGRAM THEMING
   The 31 delivered SVGs carry no hardcoded colour. Every value
   resolves through six custom properties, each with a fallback,
   so a diagram opened standalone still renders. This binds them
   to the platform's own tokens wherever a diagram appears.

   THIS REPLACED A RECOLOUR. SR-205 was raised to recolour the
   diagrams for a dark ground; the delivered set inherits instead,
   which also survives the Reader's light and sepia modes — a
   recolour would have had to be redone for each. Closed as
   superseded, not as done.

   TWO THINGS THE SPEC FORBIDS CHANGING, AND THEY ARE NOT BUGS:
   · Fills use the SAME token as strokes. The solid gate dot is
     filled with --sr-ink so it inverts with everything else —
     navy on paper, cream on midnight. Giving fills their own
     token breaks that on the first theme that is not a straight
     inversion.
   · --sr-surface defaults to TRANSPARENT, not white. A white fill
     behind box labels reads correctly on paper and appears as a
     bright rectangle on a dark ground.
   Do not "fix" either.

   ⚠ --sr-accent is the one token with no platform equivalent. It
   is the diagram's second structural colour — the loop, the
   second column — and the platform's only comparable value is
   --sr-track03, which is Track 03's identity colour and would be
   borrowing a semantic that does not apply. The values below are
   the diagram author's own verified pair from the theming spec.
   REPLACE WITH A PLATFORM TOKEN when one exists.
   ═════════════════════════════════════════════════════════════ */

/* Dark ground — the platform's default, and the Reader's default mode. */
.sr-tp,
#reader-overlay .reader-modal{
  --sr-ink:    var(--rd-heading, #E8E3D9);
  --sr-accent: #6FBFA6;
  --sr-mark:   var(--rd-accent, #D4A843);
  --sr-muted:  var(--rd-meta, #8B8791);
  --sr-rule:   var(--rd-hair, rgba(232,227,217,.12));
  --sr-surface: transparent;
  --sr-bg:      transparent;
}
#reader-overlay .reader-modal[data-reader-mode="sepia"]{
  --sr-accent: #5FA98E;
}
/* Light mode inverts the ground, so the diagram returns to the
   author's paper values rather than the dark pair. */
#reader-overlay .reader-modal[data-reader-mode="light"]{
  --sr-ink:    var(--rd-heading, #2B2620);
  --sr-accent: #2E7D6B;
  --sr-mark:   var(--rd-accent, #A47B22);
  --sr-muted:  var(--rd-meta, #857A66);
  --sr-rule:   var(--rd-hair, rgba(43,38,32,.14));
}

/* The legibility floor. A diagram compressed to a phone width is
   unreadable, not small, so it holds its size and the container
   scrolls instead. */
.sr-diagram{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:28px 0;
  max-width:100%;
}
.sr-diagram svg{
  display:block;
  min-width:600px;
  width:100%;
  height:auto;
}
.sr-diagram img{
  display:block;
  min-width:600px;
  width:100%;
  height:auto;
}

/* ═════════════════════════════════════════════════════════════
   SR-213 · IMAGE SLOTS
   The slot keeps its placeholder styling and gains an image
   layer. The placeholder is not an error state — it is what a
   slot with no asset renders, carrying the brief so the image
   lane can still read what the slot wants. Track 03 renders this
   on all four of its slots today.

   The img sits ABOVE the label and covers it. If the file 404s,
   the inline onerror removes the img and the label is revealed
   underneath — the same degrade as having no src at all, rather
   than a broken-image glyph over a label nobody can read.
   ═════════════════════════════════════════════════════════════ */
.sr-tp .sr-tp-ph{position:relative;overflow:hidden}
.sr-tp .sr-tp-slotimg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* ═════════════════════════════════════════════════════════════
   SR-213 · THE HERO BANNER
   Two modes, because one does not work at both ends.

   ≥1024 — full-bleed behind the copy. The photograph sits
   BETWEEN the warm base layer and the 96deg scrim, never above
   the scrim; get that order wrong and the scrim renders under
   the image and does nothing. Layer order in `background` is
   top-first, so: glow, scrim, photo, base.

   <1024 — STACKED. The panel has no aspect-ratio and its height
   is content-driven, so a 2.4:1 image in a cover fit loses 25%
   of its width at 768 and 73% at 390 — cropping out exactly the
   right-third figures the briefs were composed around, and
   putting type over the photograph at the width where the scrim
   is weakest. Below 1024 the image stops being a background and
   becomes a real 2.4:1 band above the copy, uncropped. The crop
   problem and the contrast problem are the same problem, and
   stacking dissolves both.

   --sr-hero-img and --sr-hero-scrim come from the record. A page
   carries neither a path nor a gradient. With no src, neither
   property is set and the panel keeps its original abstract.
   ═════════════════════════════════════════════════════════════ */

.sr-tp .sr-tp-hero--photo{
  background:
    radial-gradient(circle at 79% 36%,rgba(236,201,106,.2),transparent 15%),
    var(--sr-hero-scrim, linear-gradient(96deg,#0B0B12 0%,#0B0B12 40%,rgba(11,11,18,.74) 56%,rgba(11,11,18,.2) 75%,transparent 90%)),
    var(--sr-hero-img) center/cover no-repeat,
    linear-gradient(135deg,#17131b 35%,#4a3a24 70%,#8a7148 100%);
}
/* the abstract retires only where a photograph actually replaced it */
.sr-tp .sr-tp-hero--photo:after{content:none}

/* the stacked image is present in the DOM at all widths and hidden
   above the breakpoint, so the switch needs no second render pass */
.sr-tp .sr-tp-herostack{display:none}

@media(max-width:1023px){
  .sr-tp .sr-tp-hero--photo{
    background:
      radial-gradient(circle at 79% 36%,rgba(236,201,106,.2),transparent 15%),
      linear-gradient(135deg,#17131b 35%,#4a3a24 70%,#8a7148 100%);
  }
  .sr-tp .sr-tp-hero--photo .sr-tp-herostack{
    display:block;
    width:100%;
    aspect-ratio:2400/1000;
    object-fit:cover;
    border-radius:16px 16px 0 0;
  }
  /* the copy no longer sits on the photograph, so it needs no scrim */
  .sr-tp .sr-tp-hero--photo .sr-tp-heroin{padding-top:52px}
}
@media(max-width:480px){
  .sr-tp .sr-tp-hero--photo{min-height:0;display:block}
}

/* ═════════════════════════════════════════════════════════════
   PART C½ · PUBLIC-PAGE TOKENS (SR-338)

   Six self-contained public pages — about.html, anxiety-reset.html,
   coming-soon.html, live-sessions.html, method.html, plans.html — each
   carried their own byte-identical copy of this token block in their own
   inline <style>. SR-336 confirmed all six matched exactly before this was
   written; migrating meant moving one already-agreed block, not
   reconciling six different ones.

   Scoped to .sr-public, not :root, for the same reason PART C's own
   comment gives for .sr-tp and PART D's gives for .sr-home: index.html
   already has its own unscoped :root (--bg, --card, --primary, --text2…)
   that the reader, resource modals and every .prog-overlay still depend
   on, and dashboard.html/the three track pages define their own,
   differently-valued tokens too. A bare :root block here would repaint
   all of it. Each of the six pages adds class="sr-public" to <body> and
   nothing else needs to change — every existing rule on those pages
   already reads var(--bg)/var(--gold)/etc unscoped, and a custom property
   set on an ancestor is visible to every descendant regardless of what
   selector the descendant's own rule uses. */
.sr-public{
  --bg:#0A0A0F; --bg2:#0E0E15; --bg3:#13131C;
  --card:linear-gradient(145deg,rgba(24,24,34,.86),rgba(14,14,21,.92));
  --hair:rgba(245,237,216,.09);
  --hair2:rgba(245,237,216,.16);
  --text:#F5EDD8; --text2:#9C9AA4; --text3:#6A6874;
  --gold:#D4A843; --gold-lt:#E8C877; --gold-dim:rgba(212,168,67,.42);
  --t1:#C97B5A; --t2:#7A8FA8; --t3:#6E9080;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}
[data-theme="sunrise"] .sr-public{
  --bg:#465578; --bg2:#4D5C82; --bg3:#54648C;
  --card:linear-gradient(145deg,rgba(90,106,150,.9),rgba(77,92,130,.94));
  --hair:#8492B4; --hair2:rgba(255,253,248,.3);
  --text:#FFFDF8; --text2:#DDE3F0; --text3:#AEB7CE;
  --gold:#FFD894; --gold-lt:#FFE8B6; --gold-dim:rgba(255,216,148,.42);
}

/* ═════════════════════════════════════════════════════════════
   PART D · HOMEPAGE NAV + HERO + FILM + DOORS + TRACK PANELS (SR-332)
   index.html's #main-nav (legacy, inline-styled) and .sr-home content
   are both replaced by this block, lifted from home-v84.html — the
   same .nav/.ndrop/.foot pattern every other public page already
   uses, plus the .sr-home-scoped homepage body (hero film, doors,
   track panels, protocol carousels) that supersedes SR-322's version.

   .nav and .foot sit OUTSIDE .sr-home in the markup (siblings of
   #main-content, and the last child of #main-content respectively),
   so each carries its own small local token block rather than relying
   on .sr-home's — same reasoning as PART C's comment: index.html
   already has its own unscoped :root (--bg, --card, --primary,
   --text2…) that the reader, resource modals and every .prog-overlay
   still depend on, so nothing here touches a bare :root.

   sessionStorage['sr-theme'] now HAS a real toggle (#tog/#togl in
   .nav) — the same mechanism every other public page uses. Sunrise
   overrides are scoped per-component ([data-theme="sunrise"] .nav /
   .foot / .sr-home), matching plans.html's :root values exactly. See
   docs/page-invariants.md. */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}

.nav{
  --bg:#0A0A0F; --bg2:#0E0E15; --bg3:#13131C;
  --hair:rgba(245,237,216,.09); --hair2:rgba(245,237,216,.16);
  --text:#F5EDD8; --text2:#9C9AA4; --text3:#6A6874;
  --gold:#D4A843; --gold-lt:#E8C877; --gold-dim:rgba(212,168,67,.42);
  --t1:#C97B5A; --t2:#7A8FA8; --t3:#6E9080;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}
[data-theme="sunrise"] .nav{
  --bg:#465578; --bg2:#4D5C82; --bg3:#54648C;
  --hair:#8492B4; --hair2:rgba(255,253,248,.3);
  --text:#FFFDF8; --text2:#DDE3F0; --text3:#AEB7CE;
  --gold:#FFD894; --gold-lt:#FFE8B6; --gold-dim:rgba(255,216,148,.42);
}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hair);transition:background-color 1.4s ease}
.navin{max-width:var(--wrap);margin:0 auto;padding:17px 30px;
  display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.bmark{color:var(--gold);font-size:15px;line-height:1}
.bname{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase}
.navlinks a{font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--text2);
  text-decoration:none;transition:color .3s var(--ease)}
.navlinks a:hover{color:var(--text)}
.themetog{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text3);padding:7px 0}
.themetog:hover{color:var(--gold)}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.navcta{font-family:'DM Sans',sans-serif;font-size:13px;text-decoration:none;
  color:var(--text);border:1px solid var(--hair2);border-radius:999px;
  padding:9px 21px;transition:all .35s var(--ease)}
.navcta:hover{border-color:var(--gold);color:var(--gold-lt)}
.navlinks{display:flex;gap:28px;margin-left:auto;align-items:center}
.ndrop{position:relative}
.ntop{background:none;border:0;cursor:pointer;padding:0;display:flex;align-items:center;gap:7px;
  font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--text2);
  transition:color .3s var(--ease)}
.ncar{font-size:9px;transition:transform .3s var(--ease)}
.nmenu{position:absolute;top:calc(100% + 16px);left:-22px;width:330px;padding:10px;
  background:var(--bg2);border:1px solid var(--hair2);border-radius:18px;
  box-shadow:0 26px 64px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nm{display:block;padding:13px 15px;border-radius:12px;text-decoration:none;
  position:relative;transition:background .25s var(--ease)}
.nm::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;
  border-radius:2px;background:var(--accent,transparent);opacity:0;transition:opacity .25s var(--ease)}
.nm:hover{background:var(--bg3)}
.nm:hover::before{opacity:1}
.nmk{display:block;font-family:'DM Sans',sans-serif;font-size:8.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.nmn{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--text);
  line-height:1.2}
.nmd{display:block;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text3);
  margin-top:3px}
.nmrule{height:1px;background:var(--hair);margin:8px 15px}
.ntop:hover, .ndrop.open .ntop{color:var(--text)}
.ndrop.open .ncar{transform:rotate(180deg)}
.ndrop.open .nmenu{opacity:1;visibility:visible;transform:none}
.nm.t1{--accent:var(--t1)}
.nm.t2{--accent:var(--t2)}
.nm.t3{--accent:var(--t3)}
.nm.free{--accent:var(--gold)}
.nm.free .nmk{color:var(--gold)}
.nm.soon{opacity:.62}
.nav,.navcta,.nmenu{transition:background-color 1.4s ease,border-color 1.4s ease,color 1.4s ease}
/* SR-341 · bridge the gap so the cursor can travel to the menu — this block
   already existed for index.html (SR-332) but never carried method.html's
   and live-sessions.html's own later fix, which each still supply locally
   in their own inline <style>. Adding it here (rather than a third time)
   means a page with no inline nav CSS of its own — the three track pages —
   gets the fix too, for free, the moment it loads this stylesheet. */
.ndrop::after{content:'';position:absolute;top:100%;left:-22px;width:330px;height:20px;
  display:none}
.ndrop:hover::after,.ndrop.open::after{display:block}
.nmenu{margin-top:0}
.ndrop:hover .nmenu,.ndrop:focus-within .nmenu{opacity:1;visibility:visible;transform:none}
/* SR-341 · current-page marking in the Protocols dropdown, reusing the
   existing hover accent-bar mechanism (.nm::before) rather than a new
   visual language. Set by the host page as aria-current="page" on the
   matching .nm — never assumed from the URL by CSS alone. */
.nm[aria-current="page"]{background:var(--bg3)}
.nm[aria-current="page"]::before{opacity:1}

.foot{
  --bg:#0A0A0F; --bg2:#0E0E15; --bg3:#13131C;
  --hair:rgba(245,237,216,.09); --hair2:rgba(245,237,216,.16);
  --text:#F5EDD8; --text2:#9C9AA4; --text3:#6A6874;
  --gold:#D4A843; --gold-lt:#E8C877; --gold-dim:rgba(212,168,67,.42);
  --t1:#C97B5A; --t2:#7A8FA8; --t3:#6E9080;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}
[data-theme="sunrise"] .foot{
  --bg:#465578; --bg2:#4D5C82; --bg3:#54648C;
  --hair:#8492B4; --hair2:rgba(255,253,248,.3);
  --text:#FFFDF8; --text2:#DDE3F0; --text3:#AEB7CE;
  --gold:#FFD894; --gold-lt:#FFE8B6; --gold-dim:rgba(255,216,148,.42);
}
.foot{border-top:1px solid var(--hair);padding:44px 0 40px;background:var(--bg)}
.scope{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.62;
  color:var(--text3);max-width:74ch}
.scope strong{color:var(--text2);font-weight:500}
.flinks{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.flinks a{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text3);
  text-decoration:none;transition:color .3s var(--ease)}
.flinks a:hover{color:var(--gold)}
.foot{transition:background-color 1.4s ease,border-color 1.4s ease,color 1.4s ease}

.sr-home{
  --bg:#0A0A0F; --bg2:#0E0E15; --bg3:#13131C;
  --card:linear-gradient(145deg,rgba(24,24,34,.86),rgba(14,14,21,.92));
  --hair:rgba(245,237,216,.09);
  --hair2:rgba(245,237,216,.16);
  --text:#F5EDD8; --text2:#9C9AA4; --text3:#6A6874;
  --gold:#D4A843; --gold-lt:#E8C877; --gold-dim:rgba(212,168,67,.42);
  --t1:#C97B5A; --t2:#7A8FA8; --t3:#6E9080;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}
[data-theme="sunrise"] .sr-home{
  --bg:#465578; --bg2:#4D5C82; --bg3:#54648C;
  --card:linear-gradient(145deg,rgba(90,106,150,.9),rgba(77,92,130,.94));
  --hair:#8492B4; --hair2:rgba(255,253,248,.3);
  --text:#FFFDF8; --text2:#DDE3F0; --text3:#AEB7CE;
  --gold:#FFD894; --gold-lt:#FFE8B6; --gold-dim:rgba(255,216,148,.42);
}
.sr-home{background:var(--bg);color:var(--text);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color 1.4s ease,color 1.4s ease}
.sr-home .skip{position:absolute;left:-9999px}
.sr-home .skip:focus{left:20px;top:20px;z-index:200;background:var(--gold);color:#000;padding:10px 16px;border-radius:6px}
.sr-home, .sr-home .door, .sr-home .panel, .sr-home .pcimg, .sr-home .step, .sr-home .cta{
  transition:background-color 1.4s ease,border-color 1.4s ease,color 1.4s ease}
.sr-home .door, .sr-home .cta, .sr-home .navcta{transition:background-color 1.4s ease,border-color 1.4s ease,
  color 1.4s ease,transform .45s var(--ease),box-shadow .45s var(--ease)}
.sr-home .hero{position:relative;max-width:none;margin:0;padding:124px 0 0;overflow:hidden}
.sr-home .heroart{position:absolute;inset:0;z-index:0}
.sr-home .heroart img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.5;filter:saturate(.7) contrast(1.02)}
.sr-home .heroart::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 34%,
      color-mix(in srgb,var(--bg) 82%,transparent) 74%,var(--bg) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,
      color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 100%)}
.sr-home .heroin{position:relative;z-index:2;padding:78px 0 54px}
.sr-home .eyebrow{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:13px}
.sr-home .eyebrow::before{content:'';width:26px;height:1px;background:var(--gold-dim)}
.sr-home h1{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(38px,5.4vw,70px);line-height:1.04;letter-spacing:-.022em;
  max-width:19ch;margin:26px 0 0}
.sr-home h1 em{font-style:italic;color:var(--gold-lt)}
.sr-home .herolead{font-size:clamp(17px,1.6vw,20px);line-height:1.62;color:var(--text2);
  max-width:50ch;margin:24px 0 0}
.sr-home .herorule{border-left:2px solid var(--gold);padding-left:20px;margin:30px 0 0;
  max-width:46ch}
.sr-home .herorule p{font-family:'Cormorant Garamond',serif;font-size:19px;font-style:italic;
  color:var(--text);line-height:1.5}
.sr-home .doorswrap{position:relative;z-index:2;padding-bottom:64px}
.sr-home .doorcue{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--text3);margin-bottom:20px}
.sr-home .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sr-home .door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:520px;padding:30px 26px 28px;border-radius:18px;text-decoration:none;
  color:var(--text);border:1px solid var(--hair);overflow:hidden;background:var(--bg3);
  transition:transform .55s var(--ease),border-color .55s var(--ease)}
.sr-home .door:hover, .sr-home .door:focus-visible{transform:translateY(-4px);border-color:var(--accent);outline:none}
.sr-home .door::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--accent);opacity:.55;transition:opacity .45s var(--ease)}
.sr-home .door::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease)}
.sr-home .door:hover{transform:translateY(-4px);border-color:var(--hair2);
  box-shadow:0 22px 54px rgba(0,0,0,.42)}
.sr-home .door:hover::before{opacity:1}
.sr-home .door:hover::after{opacity:1}
.sr-home .door:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sr-home .door.t1{--accent:var(--t1)}
.sr-home .door.t2{--accent:var(--t2)}
.sr-home .door.t3{--accent:var(--t3)}
.sr-home .dglyph{position:relative;z-index:2;width:38px;height:30px;color:var(--accent);opacity:.95;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.sr-home .dglyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sr-home .door h3, .sr-home .door .dh{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:29px;
  line-height:1.1;letter-spacing:-.01em}
.sr-home .door p{position:relative;z-index:2;font-size:14.5px;line-height:1.55;color:var(--text2);
  font-family:'DM Sans',sans-serif;text-shadow:0 1px 12px rgba(0,0,0,.75)}
.sr-home .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
.sr-home .door:hover .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
body[data-open] .sr-home .door{opacity:.4;transition:opacity .5s var(--ease),transform .45s var(--ease)}
body[data-open="t1"] .sr-home .door.t1, body[data-open="t2"] .sr-home .door.t2, body[data-open="t3"] .sr-home .door.t3{opacity:1}
@media(max-width:860px){
.sr-home .doors{grid-template-columns:1fr}
}
.sr-home .step{display:none;position:relative;padding:74px 0 78px;border-top:1px solid var(--hair);
  background:var(--bg2)}
body[data-open="t1"] .sr-home #step-t1, body[data-open="t2"] .sr-home #step-t2, body[data-open="t3"] .sr-home #step-t3{display:block;animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sr-home .ghost{position:absolute;left:-8px;top:34px;font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:186px;line-height:.8;color:var(--text);opacity:.028;
  pointer-events:none;user-select:none}
.sr-home .narrow{max-width:64ch;position:relative;z-index:2}
.sr-home .step h2{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(29px,3.6vw,46px);line-height:1.11;letter-spacing:-.018em;
  margin:22px 0 20px;max-width:20ch}
.sr-home .step h2 em{font-style:italic;color:var(--gold-lt)}
.sr-home .step .body{font-size:17.5px;line-height:1.68;color:var(--text2);margin-bottom:15px}
.sr-home .step .body strong{color:var(--text);font-weight:400}
.sr-home .cta{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bg);background:var(--gold);
  padding:15px 30px;border-radius:999px;transition:all .4s var(--ease)}
.sr-home .cta:hover{background:var(--gold-lt);gap:19px;transform:translateY(-2px);
  box-shadow:0 14px 34px color-mix(in srgb,var(--gold) 24%,transparent)}
.sr-home .cta:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.sr-home .ctaalt{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text2);
  text-decoration:none;border-bottom:1px solid var(--hair2);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.sr-home .ctaalt:hover{color:var(--gold-lt);border-color:var(--gold)}
.sr-home .panel img{background:var(--bg3);position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.sr-home .panel:hover img{transform:scale(1.055)}
.sr-home .panel::after{content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 20%,transparent) 0%,
      transparent 34%,color-mix(in srgb,var(--bg) 78%,transparent) 72%,
      color-mix(in srgb,var(--bg) 96%,transparent) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,
      color-mix(in srgb,var(--bg) 74%,transparent) 44%,
      color-mix(in srgb,var(--bg) 58%,transparent) 100%)}
.sr-home .pk{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:13px}
.sr-home .panelin h3{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(24px,2.7vw,34px);line-height:1.16;letter-spacing:-.015em;
  margin-bottom:12px;max-width:22ch}
.sr-home .panelin h3 em{font-style:italic;color:var(--gold-lt)}
.sr-home .panelin p{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;
  color:var(--text2);max-width:48ch}
.sr-home .paneldo{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.sr-home .split{display:grid;grid-template-columns:1.06fr .94fr;gap:0;margin-top:44px;
  border-radius:22px;overflow:hidden;border:1px solid var(--hair)}
.sr-home .splitart{position:relative;min-height:330px}
.sr-home .splitart img{background:var(--bg3);position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr-home .splitart::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,color-mix(in srgb,var(--bg3) 92%,transparent) 100%)}
.sr-home .splittxt{background:var(--bg3);padding:38px 38px 34px;display:flex;
  flex-direction:column;justify-content:center}
.sr-home .splittxt h3{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(22px,2.4vw,30px);line-height:1.18;margin-bottom:12px;max-width:20ch}
.sr-home .splittxt p{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;color:var(--text2)}
@media(max-width:860px){
.sr-home .split{grid-template-columns:1fr}
.sr-home .splitart{min-height:230px}
}
.sr-home .panel{position:relative;margin-top:44px;border-radius:22px;overflow:hidden;
  border:1px solid var(--hair);isolation:isolate;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:0;min-height:clamp(400px,46vw,520px)}
.sr-home .panelin{position:relative;z-index:2;padding:44px 34px 42px 40px;max-width:none}
.sr-home .panelcar{position:relative;z-index:2;padding:34px 34px 34px 0;min-width:0}
@media(max-width:980px){
.sr-home .panel{grid-template-columns:1fr;min-height:0}
.sr-home .panelin{padding:34px 28px 8px}
.sr-home .panelcar{padding:0 28px 34px}
}
.sr-home .panelcar .pcar{margin-top:0}
.sr-home .panelcar .pcarhead{margin-bottom:16px}
.sr-home .panelcar .pcarhead .cnt{font-size:10px}
.sr-home .panelcar .pcimg{margin-bottom:8px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.sr-home .panelcar .pcname{font-size:13.5px;line-height:1.26}
.sr-home .panelcar .pcnum{font-size:30px;left:13px;bottom:11px}
.sr-home .panelcar .pcstate{font-size:8.5px}
.sr-home .pcar{margin-top:40px;position:relative}
.sr-home .pcarhead{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.sr-home .pcarhead .pk{margin:0}
.sr-home .pcarhead .cnt{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text3);
  margin-left:auto;letter-spacing:.12em}
.sr-home .pcarview{overflow:hidden;position:relative;padding:6px 0 4px}
.sr-home .pcartrack{display:flex;gap:16px;width:max-content;will-change:transform}
.sr-home .pcar:hover .pcartrack{animation-play-state:paused}
.sr-home .pc{flex:0 0 var(--cw);text-decoration:none;color:var(--text);display:block;
  opacity:0;transform:scale(.94);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.sr-home .pc.on{opacity:1;transform:scale(1)}
.sr-home .pc.edge{opacity:.16;transform:scale(.94)}
.sr-home .pcimg{display:block;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  border:1px solid var(--hair);margin-bottom:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  background:
    radial-gradient(120% 80% at 50% 8%,color-mix(in srgb,var(--accent,var(--gold)) 16%,transparent),transparent 62%),
    linear-gradient(160deg,var(--bg3),var(--bg2))}
.sr-home .pcimg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;
  transition:opacity .5s var(--ease)}
.sr-home .pcimg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--bg) 90%,transparent) 100%)}
.sr-home .pcnum{display:block;position:absolute;left:16px;bottom:13px;z-index:2;
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;
  color:var(--text);opacity:.52;line-height:1}
.sr-home .pcstate{display:block;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.sr-home .pcname{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px;
  line-height:1.2}
@keyframes pcroll{from{transform:translateX(0)}to{transform:translateX(var(--w))}}
.sr-home .hero-follow{margin-top:13px}
.sr-home .hero{padding-bottom:54px}
.sr-home .heroin{padding-bottom:32px}
.sr-home .costsec{padding:88px 0 84px;background:var(--bg2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sr-home .costgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:64px;align-items:center}
.sr-home .costcopy h2, .sr-home .homeclose h2{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(36px,4.5vw,58px);line-height:1.05;letter-spacing:-.025em;
  margin:20px 0 24px;max-width:15ch
}
.sr-home .costcopy h2 em, .sr-home .homeclose h2 em{font-style:italic;color:var(--gold-lt)}
.sr-home .costlead{
  font-family:'DM Sans',sans-serif;font-size:15.5px;line-height:1.75;color:var(--text2);
  max-width:61ch;margin-top:14px
}
.sr-home .costart{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;border:1px solid var(--hair)}
.sr-home .costart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.02);z-index:1}
.sr-home .costfallback{position:absolute;inset:0;background:
  linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.18)),
  radial-gradient(90% 70% at 30% 40%,rgba(212,168,67,.08),transparent 65%),
  var(--bg3)}
.sr-home .costart::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 5%,transparent),color-mix(in srgb,var(--bg) 34%,transparent))}
.sr-home .costcases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2)}
.sr-home .costcases article{padding:28px 30px 30px 0;border-right:1px solid var(--hair);margin-right:30px}
.sr-home .costcases article:last-child{border-right:0;margin-right:0}
.sr-home .casek{font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.2;color:var(--gold-lt);margin-bottom:10px}
.sr-home .costcases article p:last-child{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.7;color:var(--text2)}
.sr-home .costclose{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:34px}
.sr-home .costclose p{font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.48;color:var(--text)}
.sr-home .costfinal{font-style:italic;color:var(--gold-lt)!important}
.sr-home .routersec{background:var(--bg);padding:72px 0 74px;border-bottom:1px solid var(--hair)}
.sr-home .routersec .doorswrap{padding-bottom:0}
.sr-home .door{padding:34px 30px 34px;gap:0}
.sr-home .doorart{position:absolute;inset:0;display:block;aspect-ratio:auto;overflow:hidden;
  border-bottom:0;margin-bottom:0;background:var(--bg3);z-index:0}
.sr-home .doorart::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,15,.16) 0%,rgba(10,10,15,.58) 46%,
    rgba(10,10,15,.92) 82%,var(--bg) 100%)}
.sr-home .doorart img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.03);opacity:1;
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.sr-home .door:hover .doorart img{transform:scale(1.045);filter:saturate(.92) contrast(1.05)}
.sr-home .doorart::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,color-mix(in srgb,var(--bg) 84%,transparent) 100%)}
.sr-home .door .dglyph, .sr-home .door .dh, .sr-home .door>p, .sr-home .door .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
.sr-home .door .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
.sr-home .homeclose{padding:84px 0 92px;background:var(--bg)}
.sr-home .homeclose .wrap{max-width:840px}
.sr-home .homeclose p:not(.eyebrow){
  font-family:'DM Sans',sans-serif;font-size:15.5px;line-height:1.72;color:var(--text2);
  max-width:66ch;margin-top:12px
}
.sr-home .closeactions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.sr-home .closealt{display:inline-block}
@media(max-width:900px){
.sr-home .costgrid{grid-template-columns:1fr;gap:34px}
.sr-home .costart{max-width:640px}
.sr-home .costcases{grid-template-columns:1fr}
.sr-home .costcases article{border-right:0;border-bottom:1px solid var(--hair);margin:0;padding:24px 0}
.sr-home .costcases article:last-child{border-bottom:0}
.sr-home .costclose{grid-template-columns:1fr;gap:20px}
}
.sr-home{--glow:rgba(212,168,67,.15)}
.sr-home{background:
  radial-gradient(1200px 760px at 82% 7%,rgba(58,78,115,.08),transparent 65%),
  var(--bg)}
.sr-home .hero{min-height:760px;display:flex;flex-direction:column;justify-content:flex-end}
.sr-home .heroart img{transform:scale(1.045);animation:heroDrift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.045) translate3d(0,0,0)}to{transform:scale(1.085) translate3d(-1.4%,.6%,0)}}
.sr-home .heroart::after{background:
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 14%,transparent) 0%,color-mix(in srgb,var(--bg) 43%,transparent) 36%,color-mix(in srgb,var(--bg) 86%,transparent) 82%,var(--bg) 100%),
  linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 36%,color-mix(in srgb,var(--bg) 36%,transparent) 72%,transparent 100%)}
.sr-home .heroin{padding-top:104px}
.sr-home .herolead{max-width:52ch}
.sr-home .hero-signal{margin-top:30px;display:flex;align-items:center;gap:6px;width:max-content}
.sr-home .hero-signal span{display:block;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.42;animation:signal 1.8s ease-in-out infinite}
.sr-home .hero-signal span:nth-child(2){animation-delay:.18s}
.sr-home .hero-signal span:nth-child(3){animation-delay:.36s}
.sr-home .hero-signal small{margin-left:9px;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.23em;color:var(--text3)}
@keyframes signal{0%,100%{transform:scale(.8);opacity:.25}50%{transform:scale(1.4);opacity:.9}}
.sr-home .costsec{position:relative;overflow:hidden}
.sr-home .costsec::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 360px at 85% 25%,rgba(212,168,67,.06),transparent 70%)}
.sr-home .costart{box-shadow:0 34px 90px rgba(0,0,0,.32)}
.sr-home .costart img{transform:scale(1.03);transition:transform 1.4s var(--ease)}
.sr-home .costart:hover img{transform:scale(1.075)}
.sr-home .costcases article{position:relative}
.sr-home .costcases article::before{content:'';position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--gold);transition:width .8s var(--ease)}
.sr-home .costcases article:hover::before{width:72px}
.sr-home .consequence-thread{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:60px;padding:34px 0 10px}
.sr-home .ct-line{position:absolute;left:4%;right:4%;top:49px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),var(--t2),var(--t3),transparent);opacity:.7}
.sr-home .ct-node{position:relative;padding-top:36px}
.sr-home .ct-node::before{content:'';position:absolute;top:10px;left:0;width:12px;height:12px;border-radius:50%;background:var(--bg2);border:1px solid var(--gold);box-shadow:0 0 0 7px rgba(212,168,67,.06)}
.sr-home .ct-num{position:absolute;top:-8px;right:8px;font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--text);opacity:.045}
.sr-home .ct-k{font-family:'DM Sans',sans-serif;font-size:8.5px;letter-spacing:.25em;font-weight:700;color:var(--gold);margin-bottom:8px}
.sr-home .ct-node h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:400;line-height:1.15;margin-bottom:7px}
.sr-home .ct-node>p:last-child{font-family:'DM Sans',sans-serif;font-size:12.7px;line-height:1.55;color:var(--text3)}
.sr-home .router-intro{padding:56px 0 0;background:var(--bg)}
.sr-home .router-intro-in{display:grid;grid-template-columns:280px 1fr;gap:46px;align-items:start;padding-bottom:8px}
.sr-home .router-intro-copy{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.42;color:var(--text);max-width:35ch}
.sr-home .routersec{padding-top:48px}
.sr-home .door{min-height:430px;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .7s var(--ease)}
.sr-home .doorart{position:absolute;inset:0;display:block;aspect-ratio:auto;overflow:hidden;
  border-bottom:0;margin-bottom:0;background:var(--bg3);z-index:0}
.sr-home .doorart::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,15,.16) 0%,rgba(10,10,15,.58) 46%,
    rgba(10,10,15,.92) 82%,var(--bg) 100%)}
.sr-home .doorart img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.03);opacity:1;
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.sr-home .door:hover .doorart img{transform:scale(1.045);filter:saturate(.92) contrast(1.05)}
.sr-home .door:hover .doorart img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.03);opacity:1;
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.sr-home .door:hover .doorart img{transform:scale(1.045);filter:saturate(.92) contrast(1.05)}
.sr-home .door:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(0,0,0,.34)}
.sr-home .door .dh{font-size:31px}
.sr-home .door .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
.sr-home .step{scroll-margin-top:78px}
.sr-home .panel{box-shadow:0 24px 72px rgba(0,0,0,.18)}
.sr-home .panelcar{position:relative}
.sr-home .panelcar::before{content:'';position:absolute;inset:-18px -12px;background:radial-gradient(70% 70% at 50% 30%,color-mix(in srgb,var(--accent,var(--gold)) 8%,transparent),transparent 70%);pointer-events:none}
.sr-home .homeclose{position:relative;overflow:hidden}
.sr-home .homeclose::before{content:'';position:absolute;inset:auto -10% -160px 35%;height:420px;background:radial-gradient(circle,rgba(212,168,67,.07),transparent 67%);pointer-events:none}
.sr-home .homeclose h2{max-width:19ch}
.sr-home .closeactions .cta{box-shadow:0 12px 30px rgba(212,168,67,.16)}
.sr-home .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sr-home .reveal.is-visible{opacity:1;transform:none}
.sr-home .reveal:nth-child(2){transition-delay:.08s}
.sr-home .reveal:nth-child(3){transition-delay:.16s}
.sr-home .reveal:nth-child(4){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
.sr-home .heroart img, .sr-home .hero-signal span{animation:none}
.sr-home .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:900px){
.sr-home .hero{min-height:auto}
.sr-home .heroart img{object-position:62% center}
.sr-home .consequence-thread{grid-template-columns:1fr 1fr}
.sr-home .ct-line{display:none}
.sr-home .router-intro-in{grid-template-columns:1fr;gap:16px}
}
@media(max-width:620px){
.sr-home .consequence-thread{grid-template-columns:1fr}
.sr-home .door{min-height:0}
}
.sr-home .hero{min-height:690px}
.sr-home .heroin{max-width:760px;padding-top:94px;padding-bottom:44px}
.sr-home .hero h1{max-width:15ch}
.sr-home .hero-positioning{
  margin-top:26px;max-width:66ch;padding:18px 20px;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(212,168,67,.06),transparent 78%)
}
.sr-home .hero-positioning p{
  font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.5;color:var(--text)
}
.sr-home .hero-positioning strong{font-weight:500;color:var(--gold-lt)}
.sr-home .hero-signal{display:none!important}
.sr-home .costsec{padding-top:74px;padding-bottom:70px}
.sr-home .costgrid{gap:52px}
.sr-home .costcases{margin-top:42px}
.sr-home .costclose{display:block;padding-top:28px}
.sr-home .costsingle{
  max-width:48ch!important;font-family:'Cormorant Garamond',serif!important;
  font-size:24px!important;line-height:1.45!important;color:var(--gold-lt)!important;
  font-style:italic
}
.sr-home .consequence-thread, .sr-home .router-intro{display:none!important}
.sr-home .routersec{padding-top:56px}
.sr-home .router-question{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,3.5vw,44px);
  line-height:1.08;
  letter-spacing:-.018em;
  text-transform:none;
  color:var(--text);
  margin-bottom:28px
}
.sr-home .router-question::before{display:none}
.sr-home .door{min-height:400px}
.sr-home .door .dgo{position:relative;z-index:2;margin-top:16px;padding-top:0;font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:9px;transition:color .35s var(--ease)}
.sr-home .step{padding-top:64px;padding-bottom:66px}
.sr-home .step .split{margin-top:34px}
.sr-home .costsec + .routersec{border-top:0}
.sr-home .homeclose{padding-top:72px}
@media(max-width:900px){
.sr-home .hero{min-height:auto}
.sr-home .hero-positioning{max-width:100%}
.sr-home .router-question{font-size:34px}
}
.sr-home .filmhero{
  position:relative;min-height:720px;padding:0 0 72px;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;border-bottom:1px solid var(--hair)
}
.sr-home .filmhero .heroart{inset:0}
.sr-home .filmhero .heroart img{
  width:100%;height:100%;object-fit:cover;object-position:center 36%;
  opacity:1;filter:none;transform:scale(1.02);animation:filmDrift 18s ease-in-out infinite alternate
}
@keyframes filmDrift{from{transform:scale(1.02)}to{transform:scale(1.055) translate3d(-.8%,.3%,0)}}
.sr-home .filmhero .heroart::after{
  background:
    linear-gradient(90deg,rgba(10,10,15,.92) 0%,rgba(10,10,15,.80) 34%,rgba(10,10,15,.46) 59%,rgba(10,10,15,.24) 100%),
    linear-gradient(180deg,rgba(10,10,15,.24) 0%,rgba(10,10,15,.20) 48%,rgba(10,10,15,.92) 100%)
}
.sr-home .filmgrain{
  position:absolute;inset:0;opacity:.12;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")
}
.sr-home .filmcopy{position:relative;z-index:3;width:100%;padding-top:155px;padding-bottom:0}
.sr-home .filmcopy h1 em{display:block}
.sr-home .router-question em{display:block}
.sr-home .filmcopy h1{max-width:13ch;font-size:clamp(32px,3.7vw,52px)}
.sr-home .filmlead{max-width:62ch!important;font-family:'DM Sans',sans-serif!important;font-size:15.5px!important;line-height:1.7!important}
.sr-home .filmlead strong{color:var(--gold-lt);font-weight:600}
.sr-home .filmdesc{max-width:62ch;margin:14px auto 0;font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.6;color:var(--text3)}
.sr-home .filmdesc strong{color:var(--gold-lt);font-weight:600}
.sr-home .filmfooter-solo{position:relative;z-index:3;display:flex;justify-content:center;padding-top:0}
.sr-home .filmplay{
  position:relative;left:auto;top:auto;bottom:auto;transform:none;z-index:3;
  align-self:center;margin:38px 0 0;
  display:inline-flex;align-items:center;gap:16px;background:none;border:0;color:var(--text);cursor:pointer;
  padding:0;text-align:left
}
.sr-home .playring{
  width:82px;height:82px;flex:none;border-radius:50%;border:1px solid rgba(232,200,119,.75);
  display:grid;place-items:center;background:rgba(8,9,13,.48);backdrop-filter:blur(8px);
  box-shadow:0 0 0 14px rgba(212,168,67,.05),0 18px 60px rgba(0,0,0,.32);
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)
}
.sr-home .filmplay:hover .playring{transform:scale(1.06);background:rgba(212,168,67,.16);box-shadow:0 0 0 20px rgba(212,168,67,.06),0 22px 70px rgba(0,0,0,.4)}
.sr-home .playtri{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:17px solid var(--gold-lt);margin-left:5px}
.sr-home .playmeta{display:flex;flex-direction:column;gap:5px;text-align:left;text-shadow:0 2px 18px #000}
.sr-home .playmeta strong{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sr-home .playmeta small{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text2)}
.sr-home .filmfooter>p{font-family:'Cormorant Garamond',serif;font-size:19px;font-style:italic;color:var(--text2);max-width:36ch}
.sr-home .filmfooter .herorule{margin:0}
.sr-home .routersec{padding-top:68px}
.sr-home .router-eyebrow{margin-bottom:14px}
.sr-home .router-question{margin:0 0 30px;font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4vw,52px);font-weight:300;letter-spacing:-.02em;text-transform:none}
.sr-home .router-question::before{display:none}
.sr-home .filmmodal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:28px}
.sr-home .filmmodal.open{display:flex}
.sr-home .filmmodalback{position:absolute;inset:0;background:rgba(2,3,6,.88);backdrop-filter:blur(12px)}
.sr-home .filmframe{position:relative;z-index:2;width:min(1100px,94vw);background:#090a0f;border:1px solid var(--hair2);border-radius:22px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.66)}
.sr-home .filmclose{position:absolute;right:16px;top:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--hair2);background:rgba(5,5,8,.72);color:var(--text);font-size:24px;cursor:pointer}
.sr-home .filmpreview{position:relative;aspect-ratio:16/7;overflow:hidden}
.sr-home .filmpreview img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.58)}
.sr-home .previewshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,8,.8),rgba(4,5,8,.2),rgba(4,5,8,.55))}
.sr-home .previewcenter{position:absolute;left:7%;top:50%;transform:translateY(-50%);max-width:560px}
.sr-home .previewlabel{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.24em;color:var(--gold)}
.sr-home .previewcenter h2{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;margin:10px 0 8px}
.sr-home .previewcenter p{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;color:var(--text2)}
.sr-home .filmchapters{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sr-home .filmchapters>div{padding:20px 18px;border-right:1px solid var(--hair)}
.sr-home .filmchapters>div:last-child{border-right:0}
.sr-home .filmchapters span{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--text3)}
.sr-home .filmchapters strong{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--gold-lt);margin:4px 0 6px}
.sr-home .filmchapters small{font-family:'DM Sans',sans-serif;font-size:11px;line-height:1.45;color:var(--text3)}
.sr-home .filmtimeline{display:flex;align-items:center;gap:12px;padding:17px 20px;font-family:'DM Sans',sans-serif;font-size:10px;color:var(--text3)}
.sr-home .timelinebar{flex:1;height:3px;background:var(--hair2);border-radius:3px;overflow:hidden}
.sr-home .timelinebar i{display:block;width:16%;height:100%;background:var(--gold)}
.sr-home .timecurrent{color:var(--gold-lt)}
@media(max-width:900px){
.sr-home .filmhero{min-height:760px;padding-bottom:56px}
.sr-home .filmcopy{padding-top:140px;padding-bottom:0}
.sr-home .filmcopy h1{max-width:11ch}
.sr-home .filmchapters{grid-template-columns:1fr 1fr}
.sr-home .filmchapters>div:nth-child(2){border-right:0}
.sr-home .filmchapters>div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media(max-width:620px){
.sr-home .filmhero{min-height:700px}
.sr-home .filmcopy{padding-top:128px;padding-bottom:0}
.sr-home .filmlead{font-size:14px!important}
.sr-home .filmdesc{font-size:12.5px}
.sr-home .filmchapters{grid-template-columns:1fr}
.sr-home .filmchapters>div{border-right:0;border-bottom:1px solid var(--hair)}
}
@media(max-width:820px){
.sr-home .playring{width:68px;height:68px}
.sr-home .filmfooter-solo{padding-top:0}
.sr-home .filmplay{gap:13px;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
.sr-home .filmhero .heroart img{animation:none}
}
.sr-home .panelnote{
  margin-top:20px;padding:18px 0 0;border-top:1px solid var(--hair2)
}
.sr-home .panelnote-k{
  font-family:'DM Sans',sans-serif!important;font-size:8.5px!important;
  font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;
  color:var(--gold)!important;margin:0 0 7px!important
}
.sr-home .panelnote h4{
  font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;
  line-height:1.15;margin:0 0 7px;color:var(--text)
}
.sr-home .panelnote p:last-child{
  font-family:'DM Sans',sans-serif;font-size:13px!important;line-height:1.6!important;
  color:var(--text2)!important;margin:0!important
}
.sr-home .panel .panelin{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.sr-home .panel .paneldo{margin-top:22px}
.sr-home .step:last-of-type{padding-bottom:78px}
.sr-home .postfilm-recognition{
  background:var(--bg2);
  border-bottom:1px solid var(--hair);
  padding:62px 0 58px
}
.sr-home .postfilm-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:64px;
  align-items:end
}
.sr-home .postfilm-copy h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px,4vw,50px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.022em;
  max-width:24ch;
  margin:18px 0 18px
}
.sr-home .postfilm-copy h2 em{font-style:italic;color:var(--gold-lt)}
.sr-home .postfilm-copy>p:not(.eyebrow){
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.72;
  color:var(--text2);
  max-width:66ch;
  margin-top:12px
}
.sr-home .postfilm-pull{
  border-left:1px solid var(--gold-dim);
  padding:6px 0 6px 26px
}
.sr-home .postfilm-pull p{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  line-height:1.42;
  font-style:italic;
  color:var(--text)
}
.sr-home .postfilm-recognition + .routersec{padding-top:58px}
@media(max-width:900px){
.sr-home .postfilm-grid{grid-template-columns:1fr;gap:28px}
.sr-home .postfilm-pull{max-width:560px}
}
.sr-home .filmhero .heroart img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.01);
}
@keyframes filmDrift{
  from{transform:scale(1.01) translate3d(0,0,0)}
  to{transform:scale(1.035) translate3d(-.45%,.15%,0)}
}
.sr-home .track-panel{
  position:relative;
  overflow:hidden;
  min-height:500px;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  background:var(--bg3);
}
.sr-home .track-panel>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:.84!important;
  filter:saturate(.62) contrast(1.05) brightness(.72);
  transform:scale(1.025);
  z-index:0;
}
.sr-home .track-panel::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(8,9,13,.93) 0%,rgba(8,9,13,.82) 33%,rgba(8,9,13,.52) 58%,rgba(8,9,13,.74) 100%),
    linear-gradient(180deg,rgba(8,9,13,.18),rgba(8,9,13,.54) 80%,rgba(8,9,13,.80));
  pointer-events:none;
}
.sr-home .track-panel .panelin, .sr-home .track-panel .panelcar{
  position:relative;
  z-index:3;
}
.sr-home .track-panel .panelin{
  background:linear-gradient(90deg,rgba(7,8,12,.70),rgba(7,8,12,.18));
  padding:42px 36px 40px 40px;
}
.sr-home .track-panel .panelcar{
  padding:34px 32px 34px 12px;
}
.sr-home .trackicon{
  width:48px;height:48px;border:1px solid color-mix(in srgb,var(--gold) 62%,transparent);
  border-radius:50%;display:grid;place-items:center;color:var(--gold-lt);
  margin-bottom:20px;background:rgba(6,7,10,.28);backdrop-filter:blur(6px)
}
.sr-home .trackicon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-home .track-panel .pk{color:var(--gold-lt)}
.sr-home .track-panel .panelin h3{font-size:clamp(29px,3vw,39px);max-width:16ch}
.sr-home .track-panel .panelin>p:not(.pk):not(.panelnote-k){max-width:38ch}
.sr-home .track-panel .panelnote{
  background:rgba(8,9,13,.38);
  border:1px solid rgba(245,237,216,.10);
  border-radius:14px;
  padding:16px 17px;
  margin-top:20px;
  backdrop-filter:blur(5px)
}
.sr-home .doorart img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.03);opacity:1;
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.sr-home .door:hover .doorart img{transform:scale(1.045);filter:saturate(.92) contrast(1.05)}
.sr-home .door:hover .doorart img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.03);opacity:1;
  transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.sr-home .door:hover .doorart img{transform:scale(1.045);filter:saturate(.92) contrast(1.05)}
@media(max-width:980px){
.sr-home .track-panel{grid-template-columns:1fr;min-height:0}
.sr-home .track-panel>img{object-position:center 28%}
.sr-home .track-panel .panelin{padding:34px 28px 28px}
.sr-home .track-panel .panelcar{padding:8px 28px 34px}
}
.sr-home .track-panel{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  border:1px solid var(--hair2);
  border-radius:22px;
  background:transparent !important;
  isolation:isolate;
}
.sr-home .track-panel > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  filter:saturate(.66) contrast(1.05) brightness(.70) !important;
  transform:scale(1.02);
  z-index:0 !important;
}
.sr-home .track-panel::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(7,8,12,.92) 0%,
      rgba(7,8,12,.78) 28%,
      rgba(7,8,12,.42) 52%,
      rgba(7,8,12,.48) 72%,
      rgba(7,8,12,.66) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7,8,12,.10) 0%,
      rgba(7,8,12,.18) 45%,
      rgba(7,8,12,.60) 100%
    );
}
.sr-home .track-panel .panelin, .sr-home .track-panel .panelcar{
  position:relative;
  z-index:3;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.sr-home .track-panel .panelin{
  padding:42px 36px 40px 40px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sr-home .track-panel .panelcar{
  padding:34px 32px 34px 12px;
  align-self:center;
}
.sr-home .track-panel .panelnote{
  margin-top:20px;
  padding:18px 0 0 !important;
  border:0 !important;
  border-top:1px solid rgba(245,237,216,.18) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.sr-home .track-panel .pcimg{
  background:rgba(8,9,13,.24) !important;
  border-color:rgba(245,237,216,.14) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
.sr-home .track-panel .pcimg::after{
  background:linear-gradient(180deg,transparent 38%,rgba(7,8,12,.86) 100%) !important;
}
.sr-home .track-panel .trackicon{
  background:rgba(5,6,9,.26) !important;
  backdrop-filter:blur(6px);
  box-shadow:none !important;
}
.sr-home .track-panel:hover > img{
  transform:scale(1.055);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  filter:saturate(.74) contrast(1.06) brightness(.73) !important;
}
@media(max-width:980px){
.sr-home .track-panel{
    grid-template-columns:1fr;
    min-height:0;
  }
.sr-home .track-panel > img{
    object-position:center 30% !important;
  }
.sr-home .track-panel::after{
    background:
      linear-gradient(180deg,rgba(7,8,12,.44) 0%,rgba(7,8,12,.68) 42%,rgba(7,8,12,.90) 100%);
  }
.sr-home .track-panel .panelin{
    padding:34px 28px 22px;
  }
.sr-home .track-panel .panelcar{
    padding:6px 28px 34px;
  }
}
.sr-home .door h2, .sr-home .door .dh{position:relative;z-index:2;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.sr-home .door .dgo{margin-top:16px}
@media(max-width:900px){
.sr-home .door{min-height:420px}
}
.sr-home .door{align-items:center;text-align:center;justify-content:flex-end;padding:34px 30px 34px}
.sr-home .dglyph{position:relative;z-index:2;width:44px;height:40px;color:var(--accent);opacity:.95;
  margin:0 auto 16px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.8))}
.sr-home .dglyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sr-home .door h2, .sr-home .door .dh{position:relative;z-index:2;font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:38px;line-height:1.05;letter-spacing:-.02em;color:var(--text);
  text-shadow:0 2px 18px rgba(0,0,0,.85);margin-bottom:12px}
.sr-home .door .dbody{position:relative;z-index:2;font-family:'DM Sans',sans-serif;font-size:14.5px;
  line-height:1.6;color:var(--text2);max-width:26ch;margin:0 auto;min-height:7.68em;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}
.sr-home .door .dgo{position:relative;z-index:2;justify-content:center;margin-top:20px;padding-top:0;
  font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text3);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.sr-home .door:hover .dgo{color:var(--accent)}
@media(max-width:900px){
.sr-home .door{min-height:400px}
.sr-home .door h2, .sr-home .door .dh{font-size:32px}
}
.sr-home .routerhead{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:26px}
.sr-home .routernote{margin-left:auto;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:19px;line-height:1.45;color:var(--gold-lt);
  border-left:2px solid var(--gold);padding-left:18px;text-align:left}
@media(max-width:820px){
.sr-home .routernote{margin-left:0;margin-top:14px}
}
.sr-router-body{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.7;color:var(--text2);max-width:62ch;margin:0 0 26px}
.sr-router-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--gold-lt);margin:0 0 26px}
.sr-home .heroin.filmcopy{text-align:center;max-width:none}
.sr-home .heroin.filmcopy .eyebrow{justify-content:center}
.sr-home .heroin.filmcopy .eyebrow::before{display:none}
.sr-home .heroin.filmcopy h1{margin-left:auto;margin-right:auto;max-width:30ch}
.sr-home .heroin.filmcopy .herolead{margin-left:auto;margin-right:auto;max-width:66ch}
@media(max-width:820px){
.sr-home .heroin.filmcopy h1{max-width:30ch}
.sr-home .heroin.filmcopy{padding-left:30px;padding-right:30px}
}


/* --- SR: nav touch targets to 44px minimum (WCAG 2.5.8) --- */
/* Type sizes unchanged; only the hit box grows. 7/7 items were under 44px. */
.nav .brand, .sr-home .nav .brand,
.nav .ntop, .sr-home .nav .ntop,
.navlinks > a, .sr-home .navlinks > a,
.navcta, .sr-home .navcta{
  display:inline-flex; align-items:center;
  min-height:44px; padding-top:0; padding-bottom:0;
}
.nav .ndrop, .sr-home .nav .ndrop{display:inline-flex;align-items:center}

/* --- SR: legal-page tables (terms/privacy/refunds) --- */
/* No table styling existed anywhere in this stylesheet before this — flagged
   per pass/legal/LEGAL-PAGES-BRIEF.md Task 1, which explicitly sanctions
   adding a minimal scoped rule for exactly this case. Colours reuse the
   existing --hair/--text/--text2/--band tokens rather than new values, so
   this follows the same theme (Midnight/Sunrise) as everything else. */
.sr-legal-table{width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6}
.sr-legal-table th,.sr-legal-table td{text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.sr-legal-table th{color:var(--text);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.sr-legal-table td{color:var(--text2)}

/* --- PASS-track-boxes · coming-soon.html's card redesign, reduced motion ---
   CLAUDE.md: reduced motion is handled centrally here, never as a
   per-component block on the page itself. .tb and every .sr-cs-* selector
   below are unique to coming-soon.html's own track-box section (confirmed:
   neither class exists on any other page) — this block only ever matches
   there, it is simply filed centrally per that rule. */
@media(prefers-reduced-motion:reduce){
.tb{transition:none!important}
.tb:hover,.tb:focus-within{transform:none}
.sr-cs-pane>img,.sr-cs-rule,.sr-cs-cover,.sr-cs-tint,.sr-cs-tint2{transition:none!important}
.tb:hover .sr-cs-pane>img,.tb:focus-within .sr-cs-pane>img{transform:none}
}

/* --- PASS-protocol-access · protocol.html's per-protocol "recognise it"
   block (body signature + the three first-person quotes, tracks.js row
   fields [4]/[5]). Filed centrally per CLAUDE.md; .sr-pp-* is unique to
   protocol.html (confirmed: grepped, exists nowhere else). */
.sr-pp-sigline{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:15.5px;color:var(--text2,#9C9AA4);line-height:1.6;margin:14px 0 10px;max-width:62ch}
.sr-pp-quotes{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.sr-pp-quotes li{font:italic 14px/1.5 'Cormorant Garamond',Georgia,serif;color:var(--text3,#6A6874)}
.sr-pp-quotes li::before{content:"\201C"}
.sr-pp-quotes li::after{content:"\201D"}