/* ============================================================
   Neurologic, cardiovascular & autoimmune hub (hub-systemic.html)
   The page's only stylesheet beside site.css. Every class is
   prefixed sys- (the bar that follows the reader is hc-bar, the
   name the site's other long pages use), so nothing here meets a
   site.css rule. Type: var(--font-display) and var(--font-body)
   are Ivy Presto and Geist on the live site.
   Colour: white ground; the wash once (what it can and can't do);
   navy twice (how the cells work, the closing call).
   ============================================================ */
html:has(body.sys-page) {
  --hc-nav-h: 76px;
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 20px);
}
.sys {
  --sys-ink: #0B1D3A;
  --sys-soft: #1C3461;
  --sys-muted: #4A6480;
  --sys-navy: #132C5B;
  --sys-blue: #2D6EB1;
  --sys-blue-deep: #1A4B7A;
  --sys-ice: #7CA9D1;
  --sys-wash: #EAF1F8;
  --sys-rule: rgba(11, 29, 58, 0.14);
  --sys-ease: cubic-bezier(.16, 1, .3, 1);
  --sys-wrap: 1200px;
  --sys-gutter: clamp(20px, 4vw, 56px);
  --sys-pad: clamp(64px, 9vw, 128px);
  color: var(--sys-ink);
  font-family: var(--font-body);
  /* parts waiting to slide in from the side never widen the page */
  overflow-x: clip;
}
/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>:
   here the column sets the measure, and each link draws its own line. */
.sys p { max-width: none; }
:where(.sys) p { margin: 0; }
.sys a:not(.sys-btn, .sys-route) { border-bottom: 0; }
:where(.sys) :is(h1, h2, h3) { margin: 0; }
.sys h1, .sys h2, .sys h3 { font-family: var(--font-display); letter-spacing: 0.015em; color: inherit; }
.sys h1, .sys h2 { text-wrap: balance; }
:where(.sys) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.sys-wrap { max-width: var(--sys-wrap); margin: 0 auto; padding: 0 var(--sys-gutter); }
.sys-sec { padding: var(--sys-pad) 0; position: relative; }
.sys-sec--navy { background: var(--sys-navy); color: #fff; }
.sys-h2 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); font-weight: 300; line-height: 1.04; }
.sys-lede { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--sys-soft); }

/* ---------- buttons and links ---------- */
.sys-btn {
  display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden;
  min-height: 52px; padding: 0 30px; border-radius: 4px; background: var(--sys-blue); color: #fff;
  font: 500 16px/1 var(--font-body); letter-spacing: .01em; text-decoration: none;
  transition: background .3s var(--sys-ease), transform .3s var(--sys-ease), box-shadow .3s var(--sys-ease);
}
.sys-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); }
.sys-btn:hover { background: var(--sys-blue-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,29,58,.22); color: #fff; }
.sys-btn:hover::after { animation: sys-sheen .9s var(--sys-ease); }
.sys-btn:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .08s; }
.sys-arr { display: inline-block; transition: transform .3s var(--sys-ease); }
.sys-btn:hover .sys-arr, .sys-link:hover .sys-arr { transform: translateX(4px); }
/* a jump that stays on this page points down, and nudges that way */
.sys-link--down:hover .sys-arr { transform: translateY(3px); }
.sys-btn--ice { background: #fff; color: var(--sys-navy); }
.sys-btn--ice:hover { background: var(--sys-wash); color: var(--sys-navy); }
/* a link in running text: a faint line that fills in when pointed at */
.sys-link {
  color: var(--sys-blue); font-weight: 500; text-decoration: none; white-space: nowrap;
  padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(rgba(45,110,177,.3), rgba(45,110,177,.3)) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--sys-ease), color .2s;
}
.sys-link:hover { background-size: 100% 1px, 100% 1px; color: var(--sys-blue-deep); }
/* a way on to one of the three pages under this one: a whole row, one link */
.sys-route {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 14px 0; position: relative;
  border-top: 1px solid var(--sys-rule); border-bottom: 1px solid var(--sys-rule);
  font-family: var(--font-display); font-size: clamp(1.375rem, 1.9vw, 1.75rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.2;
  color: var(--sys-ink); text-decoration: none;
  transition: color .3s var(--sys-ease), padding .45s var(--sys-ease);
}
.sys-route::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sys-blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--sys-ease); }
.sys-route__go {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--sys-rule); font-family: var(--font-body); font-size: 18px; color: var(--sys-blue);
  transition: background .35s var(--sys-ease), border-color .35s var(--sys-ease), color .35s var(--sys-ease), transform .45s var(--sys-ease);
}
.sys-route:hover { color: var(--sys-blue-deep); padding-left: 10px; }
.sys-route:hover::after { transform: scaleX(1); }
.sys-route:hover .sys-route__go { background: var(--sys-blue); border-color: var(--sys-blue); color: #fff; transform: translateX(4px); }
.sys-route:active .sys-route__go { transform: translateX(4px) scale(.94); transition-duration: .08s; }
.sys ::selection { background: var(--sys-wash); color: var(--sys-ink); }
.sys-sec--navy ::selection, .sys-close ::selection { background: var(--sys-ice); color: var(--sys-navy); }
/* the page's own pressed states answer a tap, so the grey flash is not needed */
.sys a, .sys summary { -webkit-tap-highlight-color: transparent; }
.sys-faq__item summary:active .sys-faq__ic, .sys-plan__stop > summary:active .sys-chev { scale: .9; }
.sys-link:active { color: var(--sys-blue-deep); }
.sys a:focus-visible, .sys summary:focus-visible { outline: 2px solid var(--sys-blue); outline-offset: 4px; border-radius: 3px; }
.sys-sec--navy a:focus-visible, .sys-sec--navy summary:focus-visible, .sys-close a:focus-visible { outline-color: var(--sys-ice); }
.sys :is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

/* ---------- hero: the heading, then the words beside the photograph ---------- */
.sys-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 110px); }
.sys-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(32px, 4vw, 56px); align-items: start; }
.sys-hero__h1 { grid-column: 1 / -1; font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 300; line-height: 1.02; animation: sys-h1-in 1.1s var(--sys-ease) both; }
.sys-hero__text { padding-top: 8px; }
.sys-hero__lead { font-family: var(--font-display); font-size: clamp(1.625rem, 2.5vw, 2.25rem); font-weight: 300; line-height: 1.2; letter-spacing: 0.015em; animation: sys-fade-up .9s var(--sys-ease) .35s both; }
.sys-hero__sub { margin-top: 20px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--sys-soft); animation: sys-fade-up .9s var(--sys-ease) .5s both; }
.sys-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; animation: sys-fade-up .9s var(--sys-ease) .65s both; }
.sys-hero__ctas .sys-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-bottom: 0; background-position: 0 calc(100% - 9px), 0 calc(100% - 9px); }
.sys-hero__media { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; background: var(--sys-wash); animation: sys-unveil 1.4s var(--sys-ease) .15s both; }
/* The parallax moves the picture up to 40px (scripts/hub-systemic.js); it
   overhangs the frame by 44px each way so the frame's edge is never shown. */
.sys-hero__media img { position: absolute; left: 0; top: -44px; width: 100%; height: calc(100% + 88px); object-fit: cover; object-position: 50% 40%; display: block; animation: sys-settle 2.2s var(--sys-ease) .15s both; }

/* ---------- the bar that follows the reader ---------- */
.hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sys-rule);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--sys-ease), visibility 0s 360ms;
}
.hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--sys-ease); }
body.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: var(--sys-wrap); margin: 0 auto; padding: 0 var(--sys-gutter);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.hc-bar__track::-webkit-scrollbar { display: none; }
.hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--sys-muted); white-space: nowrap; text-decoration: none;
  transition: color 200ms;
}
.hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sys-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--sys-ease);
}
.hc-bar__track a:hover, .hc-bar__track a[aria-current] { color: var(--sys-ink); }
.hc-bar__track a:hover::after { transform: scaleX(.3); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.sys .hc-bar__track a:focus-visible { outline-offset: -4px; border-radius: 4px; }
.hc-bar__progress { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--sys-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }

/* ---------- what it can and can't do: two statements either side of a balance ---------- */
.sys-can { background: var(--sys-wash); }
.sys-can__pair { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 17vw, 230px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(36px, 4.5vw, 64px); }
.sys-can__side { padding-top: 22px; border-top: 2px solid var(--sys-blue); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: var(--sys-soft); }
.sys-can__side--no { border-top-color: rgba(11, 29, 58, 0.28); }
.sys-scale { width: 100%; height: auto; overflow: visible; color: var(--sys-navy); margin-top: -6px; }
.sys-scale * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sys-scale .sys-scale__lit { fill: rgba(45,110,177,.16); stroke: var(--sys-blue); }
/* at rest the beam is tipped and each pan hangs plumb from its end */
.sys-scale__beam { transform-box: view-box; transform-origin: 130px 70px; transform: rotate(-7deg); }
.sys-scale__pan { transform-box: view-box; transform: rotate(7deg); }
.sys-scale__pan--left { transform-origin: 36px 70px; }
.sys-scale__pan--right { transform-origin: 224px 70px; }
.sys-can__between { margin-top: clamp(36px, 4.5vw, 60px); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: var(--sys-soft); }
.sys-can__limit { margin-top: 20px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 300; line-height: 1.28; letter-spacing: 0.015em; color: var(--sys-ink); }

/* ---------- could this help you: four things the physicians look for ---------- */
.sys-who__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 7vw, 112px); grid-template-rows: auto auto 1fr; align-items: start; }
.sys-who__title { grid-column: 1 / -1; margin-bottom: clamp(32px, 4vw, 56px); }
.sys-who__lede { grid-column: 1; grid-row: 2; }
.sys-who__tail { grid-column: 1; grid-row: 3; margin-top: 28px; display: grid; gap: 28px; font-size: 1.0625rem; line-height: 1.65; color: var(--sys-soft); }
.sys-cand { grid-column: 2; grid-row: 2 / span 2; border-top: 1px solid var(--sys-rule); }
.sys-cand__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 32px); align-items: start; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--sys-rule); }
.sys-cand__icon { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--sys-blue); display: grid; place-items: center; color: var(--sys-blue); }
.sys-cand__icon svg { width: 26px; height: 26px; }
.sys-cand__row h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 400; line-height: 1.15; margin-bottom: 8px; }
.sys-cand__row p { font-size: 1.0625rem; line-height: 1.6; color: var(--sys-soft); }

/* ---------- how the cells work: a circulation drawn through a figure ---------- */
.sys-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.sys-flow__svg { width: 100%; max-width: 420px; height: auto; justify-self: center; overflow: visible; }
.sys-flow__svg .sys-body { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.sys-flow__svg .sys-vessel { fill: none; stroke: rgba(124,169,209,.4); stroke-width: 2; stroke-linecap: round; }
.sys-flow__svg .sys-vessel--flow { stroke: var(--sys-ice); stroke-dasharray: 2 14; }
.sys-flow__svg .sys-site__rim { fill: var(--sys-navy); stroke: var(--sys-ice); stroke-width: 1.6; }
.sys-flow__svg .sys-site__core { fill: var(--sys-ice); }
.sys-flow__svg .sys-site { transform-box: fill-box; transform-origin: center; }
.sys-flow__svg .sys-ring { fill: none; stroke: var(--sys-ice); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.sys-flow__svg .sys-bag { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.7); stroke-width: 1.6; }
.sys-flow__svg .sys-drop { fill: var(--sys-ice); }
.sys-flow__svg .sys-cell { fill: #fff; }
/* the loops run only while the drawing is on screen (the script sets is-live) */
.sys-flow__svg.is-live .sys-vessel--flow { animation: sys-flow 2s linear infinite; }
.sys-flow__svg.is-live .sys-ring { animation: sys-ripple 3.6s var(--sys-ease) infinite; }
.sys-flow__svg.is-live .sys-ring--2 { animation-delay: 1.2s; }
.sys-flow__svg.is-live .sys-ring--3 { animation-delay: 2.4s; }
.sys-flow__svg.is-live .sys-drop { animation: sys-drip 1.8s cubic-bezier(.5,0,.8,.4) infinite; }
.sys-flow__svg:not(.is-live) .sys-cells { visibility: hidden; }
.sys-flow__text { display: flex; flex-direction: column; gap: 20px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: rgba(255,255,255,.82); }

/* ---------- a passage a phone reader can skip (open everywhere else) ---------- */
.sys-fold > summary { display: none; }
.sys-chev { flex: none; width: 20px; height: 20px; transition: transform .35s var(--sys-ease); }
.sys details[open] > summary .sys-chev { transform: rotate(180deg); }
.sys-fold__less, .sys-fold[open] .sys-fold__more { display: none; }
.sys-fold[open] .sys-fold__less { display: inline; }

/* ---------- the decision rail: fills as it is read, ends in three answers ---------- */
.sys-day__list { margin-top: clamp(40px, 5vw, 64px); }
.sys-day__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); padding: 0 0 clamp(34px, 3.6vw, 48px); }
.sys-day__step:last-child { padding-bottom: 0; }
/* one connector per gap, circle to circle, and nothing after the last */
.sys-day__step:not(:last-child)::before, .sys-day__step:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--sys-rule); }
.sys-day__step:not(:last-child)::after { background: var(--sys-blue); transform-origin: top; transform: scaleY(var(--sys-seg, 1)); }
.sys-day__icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--sys-blue); display: grid; place-items: center; color: var(--sys-blue); position: relative; z-index: 1; transition: border-color .5s var(--sys-ease), color .5s var(--sys-ease), background .5s var(--sys-ease); }
.sys-day__icon svg { width: 24px; height: 24px; }
.sys-day__step h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 400; line-height: 1.15; padding-top: 12px; margin-bottom: 10px; }
.sys-day__step p { font-size: 1.0625rem; line-height: 1.65; color: var(--sys-soft); }
.sys-day__step:last-child { row-gap: 0; }
.sys-day__step:last-child > .sys-day__icon { grid-column: 1; grid-row: 1; }
.sys-day__step:last-child > div { grid-column: 2; grid-row: 1; padding-bottom: 26px; }
/* The line leaves the last circle, runs down past its words and forks: one
   tooth to each of the three answers. */
.sys-day__step:last-child::before { content: ""; grid-column: 1; grid-row: 1; justify-self: center; width: 2px; margin-top: 56px; background: var(--sys-blue); transition: background-color .6s var(--sys-ease); }
.sys-fork { --fork-gap: clamp(20px, 3vw, 44px); grid-column: 1 / -1; grid-row: 2; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--fork-gap); }
.sys-fork::before, .sys-fork::after { content: ""; position: absolute; left: 27px; top: 0; height: 2px; width: calc(100% - (100% - 2 * var(--fork-gap)) / 3); background: var(--sys-rule); }
.sys-fork::after { background: var(--sys-blue); transform-origin: left; }
.sys-fork li { position: relative; padding: 36px 0 0 14px; display: grid; gap: 12px; align-content: start; }
.sys-fork li::before { content: ""; position: absolute; left: 27px; top: 0; width: 2px; height: 24px; background: var(--sys-blue); transition: background-color .5s var(--sys-ease); }
.sys-fork__icon { width: 28px; height: 28px; fill: none; stroke: var(--sys-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--sys-ease); }
.sys-day .sys-route { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- a case we declined: his face beside his words ---------- */
.sys-no { padding-top: 0; }
.sys-declined { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.sys-declined__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--sys-wash); position: relative; }
.sys-declined__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.sys-declined__q { margin: 0; font-family: var(--font-display); font-size: clamp(1.625rem, 2.8vw, 2.625rem); font-weight: 300; font-style: normal; line-height: 1.28; letter-spacing: 0.015em; color: var(--sys-ink); border: 0; padding: 0; }
/* The opening mark hangs in the margin so the words line up with the name below. */
.sys-declined__q { text-indent: -0.42em; }
.sys-declined__who { margin-top: 24px; font-weight: 500; color: var(--sys-ink); }
.sys-declined__role { margin-top: 2px; color: var(--sys-muted); font-size: .9375rem; }
.sys-declined__note { margin-top: 28px; font-size: 1.0625rem; line-height: 1.65; color: var(--sys-soft); }
.sys-declined .sys-route { margin-top: 28px; }

/* ---------- if you're accepted: four stops on a line ---------- */
.sys-next { border-top: 1px solid var(--sys-rule); }
.sys-next__lede { margin-top: 20px; }
.sys-plan { position: relative; margin-top: clamp(44px, 5vw, 72px); }
/* from the first badge's centre to the last one's (the badges sit over its ends) */
.sys-plan__bar { position: absolute; left: 26px; right: calc((100% - 3 * clamp(16px, 2.4vw, 36px)) / 4 - 26px); top: 25px; height: 2px; background: var(--sys-rule); }
.sys-plan__bar > span { position: absolute; inset: 0; background: var(--sys-blue); transform-origin: left; }
.sys-plan__stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.sys-plan__stop > summary { display: block; list-style: none; cursor: default; pointer-events: none; }
.sys-plan__stop > summary::-webkit-details-marker { display: none; }
.sys-plan__stop .sys-chev { display: none; }
.sys-plan__icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1.5px solid var(--sys-blue); color: var(--sys-blue); display: grid; place-items: center; position: relative; z-index: 1; }
.sys-plan__icon svg { width: 24px; height: 24px; }
/* each stop's head holds room for a two-line heading, so the four paragraphs start on one line */
.sys-plan__stop > summary { min-height: calc(70px + 2.3 * clamp(1.375rem, 1.8vw, 1.75rem)); }
.sys-plan__stop h3 { margin-top: 18px; font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 400; line-height: 1.15; text-wrap: balance; }
.sys-plan__stop p { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--sys-soft); }

/* ---------- questions ---------- */
.sys-faq { border-top: 1px solid var(--sys-rule); }
.sys-faq__list { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--sys-rule); }
.sys-faq__item { border-bottom: 1px solid var(--sys-rule); }
.sys-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 24px 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1.9vw, 1.75rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.2; transition: color .3s var(--sys-ease), padding .45s var(--sys-ease); }
.sys-faq__item summary::-webkit-details-marker { display: none; }
.sys-faq__item summary::after { content: none; }
.sys-faq__ic { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--sys-rule); position: relative; transition: background .35s var(--sys-ease), border-color .35s var(--sys-ease), color .35s var(--sys-ease), transform .45s var(--sys-ease); }
.sys-faq__ic::before, .sys-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--sys-ease); }
.sys-faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.sys-faq__item[open] .sys-faq__ic { background: var(--sys-blue); border-color: var(--sys-blue); color: #fff; transform: rotate(180deg); }
.sys-faq__item[open] .sys-faq__ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.sys-faq__a { overflow: hidden; }
.sys-faq__a > div { padding: 0 60px 28px 0; font-size: 1.0625rem; line-height: 1.7; color: var(--sys-soft); }

/* ---------- the closing call ---------- */
.sys-close { background: var(--sys-navy); color: #fff; text-align: center; overflow: hidden; }
.sys-close__rings { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); pointer-events: none; }
.sys-close__rings circle { fill: none; stroke: rgba(124,169,209,.16); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.sys-close.is-live .sys-close__rings circle { animation: sys-ripple-slow 9s linear infinite; }
.sys-close.is-live .sys-close__rings circle:nth-child(2) { animation-delay: 3s; }
.sys-close.is-live .sys-close__rings circle:nth-child(3) { animation-delay: 6s; }
.sys-close .sys-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sys-close h2 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); font-weight: 300; line-height: 1.02; }
.sys-close p { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; color: rgba(255,255,255,.82); max-width: 720px; }

/* ---------- hover only where there is a real pointer ---------- */
@media (hover: hover) and (pointer: fine) {
  .sys-faq__item summary:hover { color: var(--sys-blue); padding-left: 8px; }
  .sys-faq__item:not([open]) summary:hover .sys-faq__ic { border-color: var(--sys-blue); color: var(--sys-blue); }
}

/* ================= arrivals (the script adds sys-js to <html>; without it nothing is hidden) ================= */
.sys-js .sys [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--sys-ease), transform .9s var(--sys-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.sys-js .sys [data-r].is-in { opacity: 1; transform: none; }
.sys-js .sys [data-r="fade"] { transform: none; }
.sys-js .sys [data-r="left"] { transform: translateX(-36px); }
.sys-js .sys [data-r="right"] { transform: translateX(36px); }
.sys-js .sys [data-r="scale"] { transform: scale(.94); }
.sys-js .sys [data-r="quote"] { transform: translateY(14px); transition-duration: 1.3s; }
/* Headings come out of a soft blur. Never a clip: an element clipped to no
   area can read as off screen to an observer and then never arrive. */
.sys-js .sys [data-r="head"] { transform: translateY(18px); filter: blur(8px); transition: opacity 1s var(--sys-ease), transform 1s var(--sys-ease), filter 1s var(--sys-ease); }
.sys-js .sys [data-r="head"].is-in { filter: none; }
/* Each of the four looks draws its own icon as it arrives. Matched by element,
   never by [pathLength]: Chromium does not always restyle on an ancestor's
   class change through that mixed-case attribute selector, and icons stayed
   undrawn. */
.sys-js .sys-cand__icon svg :is(path, polyline, circle, line) { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) .1s; }
.sys-js .sys-cand__row.is-in .sys-cand__icon svg :is(path, polyline, circle, line) { stroke-dashoffset: 0; }
/* the balance starts level and settles toward the side that is supported */
.sys-js .sys-scale .sys-scale__beam { transform: rotate(0deg); }
.sys-js .sys-scale .sys-scale__pan { transform: rotate(0deg); }
.sys-js .sys-scale.is-in .sys-scale__beam { animation: sys-tip 2s cubic-bezier(.3, 0, .2, 1) .3s both; }
.sys-js .sys-scale.is-in .sys-scale__pan { animation: sys-tip-back 2s cubic-bezier(.3, 0, .2, 1) .3s both; }
.sys-js .sys-scale.is-in.is-live .sys-scale__beam { animation: sys-tip 2s cubic-bezier(.3, 0, .2, 1) .3s both, sys-weigh 7s cubic-bezier(.45, 0, .55, 1) 2.3s infinite; }
.sys-js .sys-scale.is-in.is-live .sys-scale__pan { animation: sys-tip-back 2s cubic-bezier(.3, 0, .2, 1) .3s both, sys-weigh-back 7s cubic-bezier(.45, 0, .55, 1) 2.3s infinite; }
/* the route draws from the bag into the body, then the three sites come up in turn */
.sys-js .sys-flow__svg .sys-vessel--line, .sys-js .sys-flow__svg .sys-vessel--loop { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.sys-js .sys-flow__svg.is-in .sys-vessel--line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .3s; }
.sys-js .sys-flow__svg.is-in .sys-vessel--loop { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) 1.2s; }
.sys-js .sys-flow__svg .sys-vessel--flow, .sys-js .sys-flow__svg .sys-cells { opacity: 0; }
.sys-js .sys-flow__svg.is-in .sys-vessel--flow { opacity: 1; transition: opacity .8s 2.6s; }
.sys-js .sys-flow__svg.is-in .sys-cells { opacity: 1; transition: opacity .8s 2.6s; }
.sys-js .sys-flow__svg .sys-site { transform: scale(0); }
.sys-js .sys-flow__svg.is-in .sys-site { animation: sys-pop .6s var(--sys-ease) both; }
.sys-js .sys-flow__svg.is-in .sys-site--1 { animation-delay: 1.7s; }
.sys-js .sys-flow__svg.is-in .sys-site--2 { animation-delay: 2.1s; }
.sys-js .sys-flow__svg.is-in .sys-site--3 { animation-delay: 2.5s; }
/* the rail: each gap fills as the reading line passes through it, and the
   last circle sends the line on into its three answers, one after another */
.sys-js .sys-day__step:not(:last-child)::after { transform: scaleY(var(--sys-seg, 0)); }
.sys-js .sys-day__step:not(.is-lit) .sys-day__icon { border-color: var(--sys-rule); color: var(--sys-muted); }
.sys-js .sys-day__step.is-lit .sys-day__icon { background: var(--sys-wash); }
.sys-js .sys-day__step.is-lit .sys-day__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--sys-blue); opacity: 0; animation: sys-halo 1.6s var(--sys-ease); }
.sys-js .sys-day__step:last-child:not(.is-lit)::before, .sys-js .sys-day__step:not(.is-lit) .sys-fork li::before { background: var(--sys-rule); }
.sys-js .sys-day__step:not(.is-lit) .sys-fork__icon { stroke: rgba(74, 100, 128, .55); }
.sys-js .sys-fork::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.65, 0, .35, 1) .25s; }
.sys-js .sys-day__step.is-lit .sys-fork::after { transform: scaleX(1); }
.sys-js .sys-day__step.is-lit .sys-fork__icon { animation: sys-land .6s var(--sys-ease) both; }
.sys-js .sys-fork li:nth-child(1)::before, .sys-js .sys-fork li:nth-child(1) .sys-fork__icon { transition-delay: .3s; animation-delay: .3s; }
.sys-js .sys-fork li:nth-child(2)::before, .sys-js .sys-fork li:nth-child(2) .sys-fork__icon { transition-delay: .6s; animation-delay: .6s; }
.sys-js .sys-fork li:nth-child(3)::before, .sys-js .sys-fork li:nth-child(3) .sys-fork__icon { transition-delay: .9s; animation-delay: .9s; }
/* the plan: the line grows and each badge lands as it is reached */
.sys-js .sys-plan__bar > span { transform: scaleX(0); }
.sys-js .sys-plan.is-in .sys-plan__bar > span { animation: sys-grow 2.6s var(--sys-ease) .2s forwards; }
.sys-js .sys-plan__icon { transform: scale(.6); opacity: 0; }
.sys-js .sys-plan.is-in .sys-plan__icon { animation: sys-pop-in .6s var(--sys-ease) forwards; animation-delay: calc(var(--i, 0) * 520ms + .3s); }

/* ---------- keyframes ---------- */
@keyframes sys-h1-in { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sys-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sys-unveil { from { clip-path: inset(100% 0 0 0 round 6px); } to { clip-path: inset(0 0 0 0 round 6px); } }
@keyframes sys-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes sys-sheen { to { transform: translateX(120%); } }
@keyframes sys-flow { to { stroke-dashoffset: -32; } }
@keyframes sys-drip { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes sys-ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sys-ripple-slow { 0% { transform: scale(.25); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes sys-halo { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes sys-grow { to { transform: scaleX(1); } }
@keyframes sys-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sys-land { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes sys-pop-in { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sys-tip { 0% { transform: rotate(0deg); } 45% { transform: rotate(-10deg); } 72% { transform: rotate(-5.5deg); } 100% { transform: rotate(-7deg); } }
@keyframes sys-tip-back { 0% { transform: rotate(0deg); } 45% { transform: rotate(10deg); } 72% { transform: rotate(5.5deg); } 100% { transform: rotate(7deg); } }
@keyframes sys-weigh { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-4.5deg); } }
@keyframes sys-weigh-back { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(4.5deg); } }
@keyframes sys-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ================= narrower screens ================= */
@media (max-width: 1024px) {
  .sys-hero__grid, .sys-flow, .sys-declined, .sys-who__grid { grid-template-columns: minmax(0, 1fr); }
  .sys-who__lede, .sys-who__tail, .sys-cand { grid-column: 1; grid-row: auto; }
  .sys-cand { margin-top: 32px; }
  .sys-who__tail { margin-top: 32px; }
  .sys-can__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
  .sys-can__pair .sys-scale { grid-column: 1 / -1; grid-row: 1; width: 200px; justify-self: center; margin: 0 0 4px; }
  .sys-plan__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sys-plan__stop > summary { min-height: 0; }
  .sys-plan__bar { display: none; }
  .sys-declined__photo { max-width: 280px; }
  .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 760px) {
  html:has(body.sys-page) { --hc-bar-h: 48px; }
  .hc-bar__track { gap: 22px; }
  .sys-hero__ctas .sys-btn { width: 100%; justify-content: center; }
  .sys-can__pair { grid-template-columns: minmax(0, 1fr); }
  .sys-can__pair .sys-scale { grid-row: 2; width: 150px; margin: 0; }
  .sys-cand__row, .sys-day__step { grid-template-columns: 48px minmax(0, 1fr); }
  .sys-cand__icon, .sys-day__icon { width: 48px; height: 48px; }
  .sys-day__step:not(:last-child)::before, .sys-day__step:not(:last-child)::after { left: 23px; top: 48px; }
  .sys-day__step h3 { padding-top: 8px; }
  /* on a phone the three answers sit under the step's own words, no fork drawn */
  .sys-day__step:last-child > div { padding-bottom: 0; }
  .sys-day__step:last-child::before, .sys-fork::before, .sys-fork::after, .sys-fork li::before { content: none; }
  .sys-fork { grid-column: 2; grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
  .sys-fork li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 14px 0 0; }
  /* the folds: a passage a phone reader can skip, and the plan's four stops */
  .sys-fold > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-weight: 500; color: var(--sys-ice); }
  .sys-fold > summary::-webkit-details-marker { display: none; }
  .sys-fold[open] > p { animation: sys-unfold .45s var(--sys-ease); }
  .sys-plan__stops { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 1px solid var(--sys-rule); }
  .sys-plan__stop { border-bottom: 1px solid var(--sys-rule); }
  .sys-plan__stop > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; column-gap: 16px; min-height: 76px; padding: 14px 0; cursor: pointer; pointer-events: auto; }
  .sys-plan__stop .sys-chev { display: block; color: var(--sys-blue); }
  .sys-plan__icon { width: 44px; height: 44px; }
  .sys-plan__stop h3 { margin-top: 0; }
  .sys-plan__stop p { margin: 0 0 22px 60px; }
  .sys-plan__stop[open] > p { animation: sys-unfold .45s var(--sys-ease); }
  .sys-faq__a > div { padding-right: 0; }
  .sys-route { min-height: 64px; }
}

/* ================= reduced motion: every part holds its end state ================= */
@media (prefers-reduced-motion: reduce) {
  .sys *, .sys *::before, .sys *::after { animation: none !important; transition: none !important; }
  .sys-flow__svg .sys-cells { display: none; }
}

/* ================= on paper: the finished page, dark on white ================= */
@media print {
  .sys *, .sys *::before, .sys *::after { animation: none !important; transition: none !important; }
  .sys-js .sys [data-r] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sys-js .sys :is(.sys-cand__icon svg *, .sys-vessel--line, .sys-vessel--loop) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .sys-js .sys-fork::after { transform: none !important; }
  .sys-js .sys-day__step .sys-fork__icon { stroke: var(--sys-blue) !important; }
  .sys-js .sys-day__step:last-child::before, .sys-js .sys-day__step .sys-fork li::before { background: var(--sys-blue) !important; }
  .sys-js .sys-flow__svg :is(.sys-vessel--flow, .sys-site) { opacity: 1 !important; transform: none !important; }
  .sys-js .sys-scale .sys-scale__beam { transform: rotate(-7deg) !important; }
  .sys-js .sys-scale .sys-scale__pan { transform: rotate(7deg) !important; }
  .sys-js .sys-day__step:not(:last-child)::after, .sys-js .sys-plan__bar > span { transform: none !important; }
  .sys-js .sys-plan__icon { opacity: 1 !important; transform: none !important; }
  .sys-js .sys-day__step .sys-day__icon { border-color: var(--sys-blue) !important; color: var(--sys-blue) !important; }
  .hc-bar, .sys-cells, .sys-ring, .sys-drop, .sys-close__rings, .sys-faq__ic, .sys-chev, .sys-fold > summary, .sys-route__go { display: none !important; }
  .sys-sec { padding: 28px 0; break-inside: avoid-page; }
  .sys-can, .sys-sec--navy, .sys-close { background: #fff !important; color: var(--sys-ink) !important; }
  .sys-flow__text, .sys-close p { color: var(--sys-soft) !important; }
  .sys-flow__svg .sys-body, .sys-flow__svg .sys-bag { stroke: var(--sys-ink); }
  .sys-flow__svg .sys-vessel { stroke: var(--sys-blue); }
  .sys-flow__svg .sys-site__rim { fill: #fff; stroke: var(--sys-blue); }
  .sys-flow__svg .sys-site__core { fill: var(--sys-blue); }
  .sys-btn { background: #fff !important; color: var(--sys-ink) !important; border: 1px solid var(--sys-ink); }
}