/* Reboot Vitality: the NEW HEADER (D1, 2026-10-24). Loads after base.css (which keeps the island, tel, CTA and sticky bar
   exactly as approved). Adds: the two drop-down triggers, the Treatments mega panel and the Conditions panel (double-bezel:
   a paper shell, 6 px, around a surface core), the travelling link point under the open trigger, the page scrim, the 390
   full-height sheet with accordions, the burger, and the preview-only route note. Class prefix rvn-. No @keyframes; motion is
   GSAP in nav.js (transform / opacity only); every CSS transition here is a hover / press colour or a transform with a
   custom curve. JS off: html:not(.js) opens a panel on :hover / :focus-within and the sheet with :target (plain link lists). */

.rvn { --rvn-ease: var(--ease-out-expo); --rvn-hair: color-mix(in srgb, var(--fg) 10%, transparent); --rvn-gap: 10px; }

/* ================= desktop links ================= */
.rvn-links { position: static; }   /* the panels and the link point position against the island */
.rvn-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.rvn-item { position: static; }
.rv-nav-links .rvn-top {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--fg-muted); text-decoration: none; cursor: pointer;
  transition: color .3s var(--ease-out-quart), background-color .3s var(--ease-out-quart);
}
.rv-nav-links .rvn-top:hover, .rv-nav-links .rvn-trigger[aria-expanded="true"] { color: var(--fg); }
.rv-nav-links .rvn-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.rvn-chev { width: 11px; height: 11px; transition: transform .55s var(--rvn-ease); }
.rvn-trigger[aria-expanded="true"] .rvn-chev { transform: rotate(180deg); }
/* the link point: the brand's accent dot travels to the open trigger (nav.js), as the rings' link point seats on the mark */
.rvn-pip { position: absolute; z-index: 3; left: 0; bottom: 5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); opacity: 0; pointer-events: none; }

/* ================= the panels (both): positioned against the island ================= */
.rvn-island { position: relative; }
.rvn .rv-nav-cta, .rv-nav-links .rvn-top { white-space: nowrap; }
.rvn-panel {
  position: absolute; top: calc(100% + var(--rvn-gap)); z-index: 2; visibility: hidden; opacity: 0;
  color: var(--fg); text-align: left; font-size: 15px; font-weight: 400;
}
.rvn-panel::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--rvn-gap) - 4px); height: calc(var(--rvn-gap) + 4px); }  /* hover bridge */
.rvn-panel--treat { left: 0; right: 0; }
.rvn-panel--cond { left: var(--rvn-cx, auto); right: var(--rvn-cr, 150px); width: min(960px, 100%); }
html.js .rvn-item[data-open] > .rvn-panel { visibility: visible; opacity: 1; }
html:not(.js) .rvn-item--drop:hover > .rvn-panel, html:not(.js) .rvn-item--drop:focus-within > .rvn-panel { visibility: visible; opacity: 1; }
/* double bezel: paper shell (hairline + soft tinted shadow) around a surface core with its own top highlight */
.rvn-shell {
  padding: var(--bezel-pad); border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px color-mix(in srgb, var(--fg) 7%, transparent), 0 40px 80px -36px rgba(60, 54, 44, .42), 0 14px 30px -18px rgba(60, 54, 44, .25);
}
.rvn-core {
  position: relative; overflow: auto; overscroll-behavior: contain; max-height: calc(100vh - var(--nav-h) - 60px);
  border-radius: calc(var(--r-xl) - var(--bezel-pad)); background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px color-mix(in srgb, var(--fg) 5%, transparent);
  --rings-gap: var(--surface);
}
.rvn .rv-glyph { width: 22px; }
.rv-nav-links .rvn-panel a { color: var(--fg); }
.rv-nav-links .rvn-panel .rvn-feature a.rvn-feature-k { color: var(--fg-on-ink); }
.rv-nav-links .rvn-panel .rvn-feature a.rvn-feature-cta { color: var(--ink); }

/* ---------- Treatments: four phase columns ---------- */
.rvn-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rvn-col { position: relative; padding: 26px 26px 30px; min-width: 0; }
.rvn-col + .rvn-col::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 30px; width: 1px; background: var(--rvn-hair); }
.rvn-phase { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name go" "alias go"; align-items: end; gap: 0 10px; padding: 4px 6px 16px 0; margin-bottom: 14px; border-bottom: 1px solid var(--rvn-hair); color: var(--fg); text-decoration: none; }
.rvn-phase-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rvn-phase-n { font-family: var(--font-display); font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--line); font-variant-numeric: lining-nums; transition: color .45s var(--ease-out-quart); }
.rvn-mini { width: 26px; height: 26px; overflow: visible; }
.rvn-mini-o { fill: none; stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1.4; }
.rvn-mini-p { fill: var(--surface); stroke: color-mix(in srgb, var(--fg) 55%, transparent); stroke-width: 1.4; }
.rvn-mini-p.is-on { fill: var(--accent); stroke: var(--fg); }
.rvn-phase-name { grid-area: name; font-family: var(--font-display); font-size: 29px; line-height: 1.05; letter-spacing: -0.01em; }
.rvn-phase-alias { grid-area: alias; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg-muted); }
.rvn-phase-go { grid-area: go; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 6%, transparent); transition: transform .55s var(--rvn-ease), background-color .35s var(--ease-out-quart); }
.rvn-arrow { width: 16px; height: 16px; }
.rvn-phase:hover .rvn-phase-n, .rvn-phase:focus-visible .rvn-phase-n { color: var(--taupe-deep); }
.rvn-phase:hover .rvn-phase-go, .rvn-phase:focus-visible .rvn-phase-go { background: var(--accent); transform: rotate(-45deg); }
.rvn-group-k { margin: 14px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg-muted); }
.rvn-group { list-style: none; margin: 0; padding: 0; }
.rvn-a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.35; color: var(--fg); text-decoration: none; }
.rvn-a > span:last-child { transition: transform .5s var(--rvn-ease); }
/* the ring dot (the breadcrumb separator, 7 px ring) slides in on hover / focus */
.rvn-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .32; transition: opacity .35s var(--ease-out-quart), transform .5s var(--rvn-ease), background-color .35s var(--ease-out-quart); }
.rvn-a:hover .rvn-dot, .rvn-a:focus-visible .rvn-dot { opacity: 1; background: var(--accent); transform: scale(1.25); }
.rvn-a:hover > span:last-child, .rvn-a:focus-visible > span:last-child { transform: translateX(3px); }

/* the featured protocol card (ink), inside the Reset column */
.rvn-feature { position: relative; display: grid; gap: 6px; margin: 4px 0 8px; padding: 18px 18px 18px 20px; border-radius: var(--r-lg); background: var(--ink); color: var(--fg-on-ink); overflow: hidden; --rings-ink: var(--fg-on-ink); --rings-gap: var(--ink); isolation: isolate; }
.rvn-feature-rings { position: absolute; z-index: 0; right: 16px; top: 16px; width: 58px; }
.rvn-feature-tag { min-height: 36px; font-size: 10.5px; line-height: 1.5; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg-on-ink-muted); padding-right: 70px; }
.rvn-feature-k { font-family: var(--font-display); font-size: 19px; line-height: 1.15; color: var(--fg-on-ink); text-decoration: none; }
.rvn-feature-k::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the whole card opens the protocol page */
.rvn-feature-k:focus-visible { outline: none; }
.rvn-feature-k:focus-visible::after { box-shadow: inset 0 0 0 var(--focus-w) var(--focus); }
.rvn-feature-line { display: grid; margin-top: 6px; font-family: var(--font-display); font-size: 30px; line-height: 1.02; letter-spacing: -0.015em; }
.rvn-feature-line em { font-style: italic; }
.rvn-feature-sub { font-size: 13px; line-height: 1.45; color: var(--fg-on-ink-muted); }
.rvn-feature-cta { position: relative; z-index: 2; justify-self: start; display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 4px 4px 4px 16px; min-height: 42px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .45s var(--rvn-ease); }
.rvn-feature-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ink); transition: transform .6s var(--rvn-ease); }
.rvn-feature-ic .rvn-arrow { width: 15px; height: 15px; }
.rvn-feature-cta:hover .rvn-feature-ic { transform: translateX(2px) rotate(-45deg); }
.rvn-feature-cta:active { transform: scale(var(--press-scale)); }
.rvn-feature .rv-linkpoint-dot { stroke: var(--ink); }

/* Treatments foot */
.rvn-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 26px 18px; border-top: 1px solid var(--rvn-hair); background: color-mix(in srgb, var(--fg) 2.5%, var(--surface)); }
.rvn-foot-line { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg-muted); }
.rvn-textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; }
.rvn-textlink .rvn-arrow, .rvn-aside-link .rvn-arrow, .rvn-all .rvn-arrow { width: 15px; height: 15px; transition: transform .5s var(--rvn-ease); }
.rvn-textlink:hover .rvn-arrow, .rvn-aside-link:hover .rvn-arrow, .rvn-all:hover .rvn-arrow { transform: translateX(3px); }
.rvn-textlink:hover > span, .rvn-aside-link:hover > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Conditions: aside + 3 x 3 ---------- */
.rvn-core--cond { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0; }
.rvn-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 8px; padding: 22px 22px 22px; border-radius: calc(var(--r-xl) - var(--bezel-pad) - 8px); background: var(--bg-2); --rings-gap: var(--bg-2); }
.rvn-aside-k { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; }
.rvn-aside-h { font-family: var(--font-display); font-size: 25px; line-height: 1.1; letter-spacing: -0.01em; }
.rvn-aside-h em { font-style: italic; }
.rvn-aside-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; white-space: nowrap; }
.rvn-aside-link .rvn-arrow { flex: none; }
/* S1 2026-10-24: with 11 conditions the aside is taller; a quiet ghost-rings watermark (the sheet's) holds the space between the
   assessment and the crisis line */
.rvn-aside > :not(.rvn-aside-ghost) { position: relative; z-index: 1; }
.rvn-aside-ghost { position: absolute; z-index: 0; right: -30%; bottom: 70px; width: 86%; pointer-events: none; --rings-ink: color-mix(in srgb, var(--fg) 7%, var(--bg-2)); --rings-gap: var(--bg-2); }
.rvn-aside-ghost .rv-linkpoint { display: none; }
.rvn-crisis { margin-top: auto; padding-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--fg-muted); }
.rvn-crisis a { color: var(--fg); font-weight: 600; text-underline-offset: 3px; }
.rvn-cwrap { display: flex; flex-direction: column; padding: 14px 16px 14px 8px; min-width: 0; }
.rvn-cgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.rvn-cond { display: grid; gap: 4px; padding: 14px 14px 15px; border-radius: var(--r-md); color: var(--fg); text-decoration: none; transition: background-color .35s var(--ease-out-quart); }
.rvn-cond-k { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.rvn-cond-k .rvn-dot { margin-top: 9px; }   /* S1: top-aligned, so a two-line name (Chronic Inflammation) keeps the dot on line one */
.rvn-cond-v { padding-left: 16px; font-size: 13.5px; line-height: 1.4; color: var(--fg-muted); }
.rvn-cond:hover, .rvn-cond:focus-visible { background: color-mix(in srgb, var(--fg) 4.5%, transparent); }
.rvn-cond:hover .rvn-dot, .rvn-cond:focus-visible .rvn-dot { opacity: 1; background: var(--accent); transform: scale(1.25); }
/* the panel foot (S1 2026-10-24): View all conditions, then (apart from the list) the audience link to the veterans pillar */
.rvn-cfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; margin: 10px 6px 4px 14px; padding-top: 14px; border-top: 1px solid var(--rvn-hair); }
.rvn-all { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; }
.rvn-vet { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; }
.rvn-vet .rv-glyph { flex: none; }
.rvn-vet .rvn-arrow { width: 15px; height: 15px; flex: none; transition: transform .5s var(--rvn-ease); }
.rvn-vet:hover .rvn-arrow { transform: translateX(3px); }
.rvn-vet:hover > span, .rvn-vet:focus-visible > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rvn-all-n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
.rvn-all:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ================= page scrim (desktop panels) ================= */
.rvn-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(25, 25, 25, .12); opacity: 0; visibility: hidden; pointer-events: none; }
html.js .rvn[data-open-panel] .rvn-scrim { visibility: visible; opacity: 1; pointer-events: auto; }
.rvn-island { z-index: 1; }

/* ================= burger (below 1024 px only) ================= */
.rvn-burger { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.rvn-burger-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); }
.rvn-burger-ic i { position: absolute; left: 9px; width: 12px; height: 1.6px; border-radius: 2px; background: var(--paper); }
.rvn-burger-ic i:first-child { top: 11.5px; }
.rvn-burger-ic i:last-child { top: 16.5px; }
.rvn-burger[aria-expanded="true"] .rvn-burger-ic i:first-child { transform: translateY(2.5px) rotate(45deg); }   /* end state for reduced motion; GSAP tweens it otherwise */
.rvn-burger[aria-expanded="true"] .rvn-burger-ic i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

/* ================= the sheet (below 1024 px) ================= */
html.rvn-lock, html.rvn-lock body { overflow: hidden; }
.rvn-sheet { display: none; position: fixed; inset: 0; z-index: 0; background: var(--bg); pointer-events: auto; }
html:not(.js) .rvn-sheet:target { display: block; }
html.js .rvn-sheet.is-open { display: block; }
.rvn-sheet-scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; overflow-x: clip;
  padding: calc(10px + var(--nav-h) + 22px) var(--gutter) calc(var(--sticky-bar-h) + 56px + env(safe-area-inset-bottom)); }
.rvn-s-close-nojs { display: none; }
html:not(.js) .rvn-s-close-nojs { display: inline-flex; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--fg); }
.rvn-s-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.rvn-s-list > li { border-bottom: 1px solid var(--rvn-hair); }
.rvn-s-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 10px 2px; border: 0; background: none; font-family: var(--font-display); font-size: 32px; line-height: 1.05; letter-spacing: -0.015em; color: var(--fg); text-decoration: none; text-align: left; cursor: pointer; }
.rvn-s-top .rvn-arrow { width: 20px; height: 20px; color: var(--fg-muted); }
/* plus / minus inside a ring (the accordion state) */
.rvn-pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 28%, transparent); transition: background-color .35s var(--ease-out-quart), box-shadow .35s var(--ease-out-quart); }
.rvn-pm::before, .rvn-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .55s var(--rvn-ease); }
.rvn-pm::after { transform: rotate(90deg); }
[aria-expanded="true"] > .rvn-pm { background: var(--ink); color: var(--paper); box-shadow: none; }
[aria-expanded="true"] > .rvn-pm::after { transform: rotate(0deg); }
html:not(.js) .rvn-pm { display: none; }
.rvn-s-region { padding: 2px 0 18px; }
.rvn-s-region[hidden] { display: none; }
/* phases inside Treatments */
.rvn-s-phase { border-top: 1px solid var(--rvn-hair); }
.rvn-s-phase:first-child { border-top: 0; }
.rvn-s-pbtn { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 2px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.rvn-s-pn { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--taupe-deep); }
.rvn-s-pname { display: grid; gap: 2px; font-family: var(--font-display); font-size: 24px; line-height: 1.05; }
.rvn-s-palias { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg-muted); }
.rvn-s-pbtn .rvn-mini { width: 22px; height: 22px; }
.rvn-s-pbtn .rvn-pm { width: 28px; height: 28px; }
.rvn-s-pregion { padding: 0 0 16px 46px; }
.rvn-s-items { list-style: none; margin: 0; padding: 0; display: grid; }
.rvn-s-gk { margin: 10px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--utility-track); text-transform: uppercase; color: var(--fg-muted); }
.rvn-s-a { display: flex; align-items: center; min-height: 44px; font-size: 17px; color: var(--fg); text-decoration: none; }
.rvn-s-feature-li { margin: 4px 0 6px; }
.rvn-s-feature { position: relative; display: grid; gap: 4px; padding: 16px 64px 16px 18px; border-radius: var(--r-lg); background: var(--ink); color: var(--fg-on-ink); text-decoration: none; --rings-ink: var(--fg-on-ink); --rings-gap: var(--ink); }
.rvn-s-feature-k { font-family: var(--font-display); font-size: 19px; line-height: 1.15; }
.rvn-s-feature-line { font-family: var(--font-display); font-size: 24px; line-height: 1.05; }
.rvn-s-feature-line em { font-style: italic; }
.rvn-s-feature .rv-glyph { position: absolute; right: 18px; top: 50%; width: 36px; translate: 0 -50%; }
.rvn-s-hub { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--fg); text-decoration: none; }
.rvn-s-hub .rvn-arrow { width: 16px; height: 16px; flex: none; }
.rvn-s-hub--quiet { margin-top: 0; font-weight: 600; color: var(--fg-muted); }
/* conditions inside the sheet */
.rvn-s-conds { list-style: none; margin: 0; padding: 0; display: grid; }
.rvn-s-cond { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); text-decoration: none; }
.rvn-s-conds li:first-child .rvn-s-cond { border-top: 0; }
.rvn-s-cond-k { font-family: var(--font-display); font-size: 21px; line-height: 1.15; }
.rvn-s-cond-v { font-size: 14px; color: var(--fg-muted); }
.rvn-s-cmore { display: grid; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--rvn-hair); }
/* sheet foot */
.rvn-s-foot { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 30px; }
.rvn-s-tel { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 27px; color: var(--fg); text-decoration: none; }
.rvn-s-tel-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.rvn-s-tel-ic svg { width: 18px; }
.rvn-s-hours { font-size: 14px; color: var(--fg-muted); }
.rvn-crisis--sheet { margin-top: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); font-size: 13.5px; color: var(--fg); }
/* the ghost rings: a large, quiet watermark that links as the sheet opens */
.rvn-s-ghost { position: absolute; z-index: 0; right: -22%; bottom: 120px; width: 92%; max-width: 560px; pointer-events: none; --rings-ink: color-mix(in srgb, var(--fg) 7%, var(--bg)); --rings-gap: var(--bg); transition: opacity .6s var(--ease-out-quart); }
.rvn-sheet[data-any-open] .rvn-s-ghost { opacity: 0; }
/* a soft paper fade under the island, so rows scroll away under it cleanly */
.rvn-sheet::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(10px + var(--nav-h) + 18px); background: linear-gradient(var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent)); pointer-events: none; }
.rvn-s-ghost .rv-linkpoint { display: none; }

/* ================= the preview-only route note (desktop) ================= */
.rvn-route { position: fixed; z-index: 45; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: min(680px, calc(100vw - 32px)); padding: 9px 16px 9px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--fg-on-ink); font-size: 13px; line-height: 1.3; box-shadow: 0 14px 30px -16px rgba(25, 25, 25, .55); pointer-events: none; }
.rvn-route-k { flex: none; padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rvn-route-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvn-route-v code { font-family: inherit; font-weight: 600; color: var(--paper); }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .rvn-list { gap: 0; }
  .rv-nav-links .rvn-top { padding: 0 8px; }
  .rvn .rv-wordmark { width: 152px; }
  .rvn .rv-nav-island { gap: 16px; }
  .rvn-col { padding: 22px 18px 26px; }
  .rvn-phase-n { font-size: 40px; }
  .rvn-phase-name { font-size: 25px; }
  .rvn-feature-line { font-size: 23px; }
}
@media (max-width: 1023.98px) {
  .rvn-burger--js { display: inline-flex; }
  html:not(.js) .rvn-burger--nojs { display: inline-flex; }
  html.js .rvn-burger--nojs { display: none; }
  .rvn-panel, .rvn-scrim, .rvn-pip, .rvn-route { display: none !important; }
}
@media (min-width: 1024px) {
  .rvn-sheet { display: none !important; }
  .rvn-burger { display: none !important; }
}
@media (max-width: 767.98px) {
  .rvn-burger { height: 42px; padding: 0 6px 0 14px; }
  .rvn-burger-ic { width: 30px; height: 30px; }
  .rv-nav-actions { gap: 6px; }
}
@media (max-height: 760px) and (min-width: 1024px) {
  .rvn-phase { padding-bottom: 12px; margin-bottom: 10px; }
  .rvn-phase-n { font-size: 36px; }
  .rvn-a { padding: 5px 0; }
  .rvn-feature-sub { display: none; }
  .rvn-cond { padding: 10px 14px 11px; }
}