/* /learn-clinic-vetting-candidates: its own sheet, loaded after site.css.
   One idea runs the page: a case is a sheet of paper that has to be signed.
   The hero draws the sheet and checks its four lines; the four gates are
   those lines walked one at a time; the conditions sort under three marks.
   Script: scripts/learn-clinic-vetting-candidates.js. With that script absent
   every part is visible, every gate is laid out in full and every link jumps. */

html:has(body.vcand) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --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) + 12px);
}
.vcand {
  --vc-ease: cubic-bezier(.16, 1, .3, 1);
  --vc-gut: clamp(20px, 4vw, 56px);
  --vc-no: #8a3a3a;            /* the declined mark, a key used only in the conditions */
  --vc-maybe: #4a6480;         /* the case-by-case mark */
}

/* ============ GROUND RULES ============ */
.vc-wrap { max-width: calc(1240px + 2 * var(--vc-gut)); margin-inline: auto; padding-inline: var(--vc-gut); }
/* text fills its column; the column sets the measure */
.vcand main p { max-width: none; margin: 0; text-wrap: wrap; }
.vcand main a:not(.btn) { border-bottom: 0; }
.vcand main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.vcand main :is(h3, h4) { margin: 0; max-width: none; }
.vcand main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.vcand .vc-line :is(a, summary):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.vcand main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a link inside a sentence */
.vc-in { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-thickness 200ms; }
.vc-in:hover { color: var(--accent-blue-hover); text-decoration-thickness: 2.5px; }

/* the onward link: the arrow leans the way it points */
.vc-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.vc-go span { display: inline-block; transition: transform 360ms var(--vc-ease); }
.vc-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.vc-go:hover span { transform: translateX(6px); }
.vc-go[href^="#"] span { transform: rotate(90deg); }
.vc-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (vc-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.vc-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--vc-ease); }
.vc-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.vc-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
/* these three bring their own entrance, part by part */
.vc-js :is([data-r="rows"], [data-r="sort"], [data-r="track"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.vc-hero { padding-block: clamp(36px, 5vw, 72px) clamp(44px, 6vw, 88px); }
.vc-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vc-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(20px, 3vw, 44px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.vc-hero__h1 > .h-lead, .vc-hero__h1 > em { display: inline-block; }
.vc-hero__h1 > em { color: var(--accent-blue); }
.vc-hero__answer { font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.6; color: var(--ink); margin-bottom: 18px !important; }
.vc-hero__fig { margin: 0; }

/* the case sheet */
.vc-sheet { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; overflow: visible; }
.vc-sheet :is(path, circle, rect) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vc-sheet .vc-sheet__back { fill: var(--accent-wash); stroke: var(--border-strong); stroke-width: 1.4; }
.vc-sheet .vc-sheet__page { fill: #fff; filter: drop-shadow(0 18px 28px rgba(11, 29, 58, .12)); }
.vc-sheet .vc-row__badge { fill: var(--accent-wash); stroke: none; transform-box: fill-box; transform-origin: center; }
.vc-sheet .vc-row__ic { stroke-width: 1.5; }
.vc-sheet .vc-row__ln { stroke: var(--border-strong); stroke-width: 5; }
.vc-sheet .vc-row__ln--b { stroke: var(--border); }
.vc-sheet .vc-row__rule { stroke: var(--border); stroke-width: 1; }
.vc-sheet .vc-row__ok { fill: var(--accent-blue); stroke: none; transform-box: fill-box; transform-origin: center; }
.vc-sheet .vc-row__tick { stroke: #fff; stroke-width: 2.2; }
.vc-sheet .vc-sheet__sigline { stroke: var(--border-strong); stroke-width: 1.2; stroke-dasharray: 2 5; }
.vc-sheet .vc-sheet__sig { stroke: var(--accent-blue); stroke-width: 2; }

/* first paint: the heading, then the sheet lands, its four lines are checked
   one after another, and the signature is written last */
@keyframes vc-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes vc-land { from { opacity: 0; transform: translateY(26px) rotate(-2deg); } }
@keyframes vc-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes vc-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.22); opacity: 1; } }
@keyframes vc-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.vc-js .vc-hero__h1 > :is(span, em) { animation: vc-up 900ms var(--vc-ease) both; }
.vc-js .vc-hero__h1 > em { animation-delay: 110ms; }
.vc-js .vc-hero__text > :is(p, a) { animation: vc-up 900ms var(--vc-ease) 240ms both; }
.vc-js .vc-hero__text > a { animation-delay: 340ms; }
.vc-js .vc-sheet { animation: vc-land 1000ms var(--vc-ease) 150ms both; }
.vc-js .vc-sheet :is(.vc-sheet__clip, .vc-row__ic, .vc-row__ln, .vc-row__tick) { stroke-dasharray: 1; animation: vc-draw 620ms var(--vc-ease) both; }
.vc-js .vc-sheet .vc-sheet__clip { animation-delay: 700ms; }
.vc-js .vc-row .vc-row__badge { animation: vc-pop 420ms var(--vc-ease) calc(800ms + var(--i) * 520ms) both; }
.vc-js .vc-row .vc-row__ic { animation-delay: calc(900ms + var(--i) * 520ms); }
.vc-js .vc-row .vc-row__ln { animation-delay: calc(980ms + var(--i) * 520ms); animation-duration: 420ms; }
.vc-js .vc-row .vc-row__ln--b { animation-delay: calc(1060ms + var(--i) * 520ms); }
.vc-js .vc-row .vc-row__ok { animation: vc-pop 420ms var(--vc-ease) calc(1220ms + var(--i) * 520ms) both; }
.vc-js .vc-row .vc-row__tick { animation-delay: calc(1340ms + var(--i) * 520ms); animation-duration: 320ms; }
.vc-js .vc-sheet .vc-sheet__sig { stroke-dasharray: 1; animation: vc-write 1500ms cubic-bezier(.45, .05, .3, 1) 3300ms both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.vcand .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(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--vc-ease), visibility 0s 360ms;
}
.vcand .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--vc-ease); }
body.vcand.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.vcand .hc-bar__track {
  max-width: calc(1240px + 2 * var(--vc-gut)); margin: 0 auto; padding: 0 var(--vc-gut);
  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;
}
.vcand .hc-bar__track::-webkit-scrollbar { display: none; }
.vcand .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.vcand .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--vc-ease);
}
.vcand .hc-bar__track a:hover, .vcand .hc-bar__track a[aria-current] { color: var(--ink); }
.vcand .hc-bar__track a:hover::after { transform: scaleX(.35); }
.vcand .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.vcand .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.vcand .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ THE FOUR GATES ============ */
.vc-decide { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.vc-decide__lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: clamp(14px, 1.8vw, 22px) 0 0 !important; }
.vc-decide__how { font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin: 4px 0 0 !important; }
.vc-gates { margin-top: clamp(28px, 4vw, 48px); }
/* the instruction only makes sense when the gates can be played */
html:not(.vc-js) .vc-decide__how, html:not(.vc-js) .vc-gates__bar { display: none; }

.vc-gates__bar { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: start; }
.vc-gates__play { position: relative; width: 56px; height: 56px; margin-top: 4px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-blue); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color 200ms, transform 360ms var(--vc-ease); }
.vc-gates__play:hover { background: var(--accent-blue-hover); transform: scale(1.06); }
.vc-gates__play:active { transform: scale(.96); }
.vc-gates__glyph { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; transition: opacity 200ms, transform 360ms var(--vc-ease); }
.vc-gates__glyph--play { margin-left: 3px; }
.vc-gates__glyph--pause, .is-playing .vc-gates__glyph--play { opacity: 0; transform: scale(.4); }
.is-playing .vc-gates__glyph--pause { opacity: 1; transform: none; }
/* while it plays, a ring around the button runs down the time left on this gate */
.vc-gates__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.vc-gates__ring circle { fill: none; stroke: transparent; stroke-width: 2; }
.vc-gates__ring .vc-gates__ring-run { stroke: var(--accent-blue); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.is-playing .vc-gates__ring-run { opacity: 1; }
@keyframes vc-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.is-playing .vc-gates__ring-run.is-running { animation: vc-run var(--vc-step, 3200ms) linear both; }

.vc-gates__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* one line, first gate to last, filled as far as the gate being read */
.vc-gates__line { position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 2px; background: var(--border); }
.vc-gates__line i { position: absolute; inset: 0; background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--vc-p, 0)); transition: transform 720ms var(--vc-ease); }
.vc-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 6px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-muted); }
.vc-stop__ic { width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); transition: border-color 320ms, background-color 320ms, transform 420ms var(--vc-ease), box-shadow 420ms; }
.vc-stop__ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 320ms; }
.vc-stop__name { font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; transition: color 200ms; }
.vc-stop:hover .vc-stop__ic { border-color: var(--accent-blue); box-shadow: 0 0 0 5px rgba(45, 110, 177, .12); }
.vc-stop:active .vc-stop__ic { transform: scale(.94); }
.vc-stop:hover .vc-stop__name { color: var(--ink); }
.vc-stop.is-done .vc-stop__ic { border-color: var(--accent-blue); color: var(--accent-blue-hover); }
.vc-stop[aria-selected="true"] { color: var(--ink); }
.vc-stop[aria-selected="true"] .vc-stop__ic { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; box-shadow: 0 0 0 7px rgba(45, 110, 177, .16); }
/* the gate that has just been reached draws its own icon */
.vc-stop.is-fresh .vc-stop__ic path { stroke-dasharray: 1; animation: vc-draw 700ms var(--vc-ease) both; }
.vc-stop:focus-visible { outline-offset: 4px; }

/* with the script, one gate is shown at a time; the others carry hidden="until-found",
   so a search of the page still reaches them */
.vc-gate__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 3.6vw, 48px) 4px; }
html:not(.vc-js) .vc-gate + .vc-gate .vc-gate__in { border-top: 1px solid var(--border); margin-top: clamp(24px, 3vw, 40px); }
.vc-gate__when { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--accent-blue); }
.vcand .vc-gate h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink); margin-bottom: 12px; }
.vc-gate h3 em { color: var(--ink-muted); }
.vc-gate__body p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.vc-gate__body strong { font-weight: 600; color: var(--ink); }
/* the fourth gate ends the way the case does: signed, then checked */
.vc-signed { display: block; width: 260px; max-width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.vc-signed path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vc-signed__line { stroke: var(--border-strong); stroke-width: 1.2; stroke-dasharray: 2 5; }
.vc-signed__sig { stroke: var(--accent-blue); stroke-width: 2; }
.vc-signed__ok { fill: var(--accent-blue); transform-box: fill-box; transform-origin: center; }
.vc-signed__tick { stroke: #fff; stroke-width: 2.4; }
.vc-js .vc-gate.is-on.is-moved .vc-signed__sig { stroke-dasharray: 1; animation: vc-write 1300ms cubic-bezier(.45, .05, .3, 1) 500ms both; }
.vc-js .vc-gate.is-on.is-moved .vc-signed__ok { animation: vc-pop 420ms var(--vc-ease) 1750ms both; }
.vc-js .vc-gate.is-on.is-moved .vc-signed__tick { stroke-dasharray: 1; animation: vc-draw 320ms var(--vc-ease) 1900ms both; }
/* the gate arriving: the day counts in from the side the reader came from */
@keyframes vc-slide { from { opacity: 0; transform: translateX(var(--vc-from, 28px)); } }
@keyframes vc-fade { from { opacity: 0; transform: translateY(10px); } }
.vc-js .vc-gate.is-on.is-moved .vc-gate__when { animation: vc-slide 620ms var(--vc-ease) both; }
.vc-js .vc-gate.is-on.is-moved .vc-gate__body { animation: vc-fade 620ms var(--vc-ease) 90ms both; }

.vc-decide__foot { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.vc-decide__foot p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.vc-decide__foot .vc-decide__rule { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 400; line-height: 1.35; color: var(--ink); margin-bottom: 12px !important; }

/* the track's entrance: the stops rise in turn along the line */
.vc-js .vc-gates:not(.is-in) .vc-stop, .vc-js .vc-gates:not(.is-in) .vc-gates__play { opacity: 0; transform: translateY(16px); }
.vc-js .vc-gates:not(.is-in) .vc-gates__line { transform: scaleX(0); }
.vc-js .vc-gates .vc-stop, .vc-js .vc-gates .vc-gates__play { transition: opacity 520ms ease, transform 720ms var(--vc-ease); }
.vc-js .vc-gates__line { transform-origin: left; transition: transform 900ms var(--vc-ease) 120ms; }
.vc-js .vc-gates .vc-stop:nth-of-type(2) { transition-delay: 90ms; }
.vc-js .vc-gates .vc-stop:nth-of-type(3) { transition-delay: 180ms; }
.vc-js .vc-gates .vc-stop:nth-of-type(4) { transition-delay: 270ms; }
.vc-js .vc-gates.is-settled .vc-stop { transition-delay: 0ms; }

/* ============ WHY PEOPLE ARE TURNED AWAY ============ */
.vc-why-sec { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 104px); overflow-x: clip; }
.vc-why-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.vc-why-sec__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.vcand .vc-why-sec h2 { margin-bottom: clamp(24px, 3.4vw, 44px); }
.vc-why-sec__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.vc-why-sec__head p + p { margin-top: 18px !important; }

.vc-why { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--border); transition: box-shadow 320ms; }
.vc-why + .vc-why { margin-top: 10px; }
.vc-why[open] { box-shadow: 0 0 0 1.5px var(--accent-blue), 0 18px 36px -28px rgba(11, 29, 58, .5); }
/* the name and its one-line reason are the summary's own children (a summary
   holds headings and phrases, no boxes): rows two and three, with a free row
   above and below so the pair sits centred against the mark */
.vc-why summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 14px; grid-template-rows: 1fr auto auto 1fr; gap: 0 clamp(12px, 1.6vw, 20px); align-items: center; min-height: 44px; padding: 18px clamp(16px, 2vw, 24px); cursor: pointer; list-style: none; border-radius: 10px; }
.vc-why summary::-webkit-details-marker { display: none; }
.vc-why summary::after { content: ""; grid-column: 4; grid-row: 1 / 5; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--accent-blue-hover); border-bottom: 2px solid var(--accent-blue-hover); transform: rotate(45deg); transition: transform 360ms var(--vc-ease), margin 360ms; }
.vc-why summary:hover::after { transform: translateY(3px) rotate(45deg); }
.vc-why[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.vc-why[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.vc-why__ic { grid-column: 1; grid-row: 1 / 5; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-wash); color: var(--ink); transition: background-color 320ms, color 320ms, transform 420ms var(--vc-ease); }
.vc-why__ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vc-why summary:hover .vc-why__ic { transform: scale(1.06); }
.vc-why[open] .vc-why__ic { background: var(--accent-blue); color: #fff; }
.vc-js .vc-why[open] .vc-why__ic path { stroke-dasharray: 1; animation: vc-draw 760ms var(--vc-ease) both; }
.vc-why h3 { grid-column: 2; grid-row: 2; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); transition: color 200ms; }
.vc-why summary:hover h3 { color: var(--accent-blue-hover); }
.vc-why__s { grid-column: 2; grid-row: 3; display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
/* once it is open the body says the same and more */
.vc-why[open] .vc-why__s { display: none; }
.vc-why__f { grid-column: 3; grid-row: 1 / 5; font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.vc-why__body { padding: 0 clamp(16px, 2vw, 24px) 22px calc(56px + clamp(12px, 1.6vw, 20px) + clamp(16px, 2vw, 24px)); }
.vc-why__body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.vc-why__body strong { font-weight: 600; color: var(--ink); }
@keyframes vc-unfold { from { opacity: 0; transform: translateY(-8px); } }
.vc-why[open] .vc-why__body { animation: vc-unfold 420ms var(--vc-ease); }
/* the five reasons come in from the side, in order */
.vc-js .vc-whys .vc-why { transition: opacity 560ms ease, transform 760ms var(--vc-ease), box-shadow 320ms; transition-delay: calc(var(--i) * 80ms), calc(var(--i) * 80ms), 0ms; }
.vc-js .vc-whys:not(.is-in) .vc-why { opacity: 0; transform: translateX(36px); }

/* ============ THE CONDITIONS ============ */
.vc-cond { padding-block: clamp(56px, 7vw, 104px); }
.vc-cond__lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: clamp(14px, 1.8vw, 22px) 0 clamp(28px, 4vw, 48px) !important; }
.vc-sort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: start; }
.vc-col__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 3px solid; }
.vcand .vc-col h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; color: var(--ink); }
.vc-col--yes .vc-col__head { border-color: var(--accent-blue); }
.vc-col--maybe .vc-col__head { border-color: var(--vc-maybe); border-bottom-style: dashed; }
.vc-col--no .vc-col__head { border-color: var(--vc-no); }
.vc-mark { flex: none; width: 56px; height: 56px; overflow: visible; }
.vc-mark circle { fill: none; stroke-width: 2; }
.vc-mark path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vc-col--yes .vc-mark circle { fill: var(--accent-blue); stroke: var(--accent-blue); }
.vc-col--yes .vc-mark path { stroke: #fff; }
.vc-col--maybe .vc-mark :is(circle, path) { stroke: var(--vc-maybe); }
.vc-col--no .vc-mark :is(circle, path) { stroke: var(--vc-no); }
.vc-col ul { list-style: none; margin: 0; padding: 0; }
.vc-col li { padding-block: 20px; border-bottom: 1px solid var(--border); }
.vc-col li:last-child { border-bottom: 0; }
.vcand .vc-col h4 { font-family: var(--font-body); font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 6px; }
.vc-col li p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.vc-col li .vc-need { margin-top: 8px !important; padding-left: 14px; border-left: 2px solid var(--border-strong); font-size: 15px; color: var(--ink-muted); }
.vc-col__more { margin-top: 6px; font-size: 15.5px; line-height: 1.4; }
/* the marks are drawn, then each condition drops into its column */
.vc-js .vc-sort .vc-mark path { stroke-dasharray: 1; }
.vc-js .vc-sort:not(.is-in) .vc-mark path { stroke-dashoffset: 1; opacity: 0; }
.vc-js .vc-sort.is-in .vc-mark path { animation: vc-draw 700ms var(--vc-ease) 200ms both; }
.vc-js .vc-sort.is-in .vc-col--maybe .vc-mark path { animation-delay: 380ms; }
.vc-js .vc-sort.is-in .vc-col--no .vc-mark path { animation-delay: 560ms; }
@keyframes vc-drop { from { opacity: 0; transform: translateY(-18px); } 70% { transform: translateY(3px); } }
.vc-js .vc-sort:not(.is-in) :is(li, .vc-col__more) { opacity: 0; }
.vc-js .vc-sort.is-in li { animation: vc-drop 620ms var(--vc-ease) calc(420ms + var(--i) * 110ms) both; }
.vc-js .vc-sort.is-in .vc-col__more { animation: vc-fade 620ms var(--vc-ease) 1100ms both; }

.vc-cond__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.vc-cond__foot > p { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.35; color: var(--ink); }
.vc-cond__next p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px !important; }
.vc-cond__next .btn { transition: transform 360ms var(--vc-ease), background-color 200ms, box-shadow 360ms; }
.vc-cond__next .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(11, 29, 58, .55); }

/* ============ THE BOTTOM LINE ============ */
.vc-line { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.vc-line__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.vcand .vc-line h2 { color: #fff; }
.vc-ask { display: block; width: min(100%, 300px); height: auto; overflow: visible; margin-bottom: clamp(20px, 3vw, 36px); }
.vc-ask path { fill: none; stroke: var(--accent-ice); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-ask__old { opacity: .5; }
.vc-ask__new path { stroke: #fff; }
.vc-ask__new path:first-child { fill: rgba(124, 169, 209, .16); }
.vc-ask .vc-ask__x { stroke-width: 3; }
.vc-line__q { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.2; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.vc-line__text p { font-size: 17.5px; line-height: 1.7; color: rgba(255, 255, 255, .84); margin-top: 16px !important; }
.vc-line__text strong { font-weight: 600; color: #fff; }
.vc-line__text .vc-line__lead { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.3; color: var(--accent-ice); }
/* the question that is asked gives way to the one worth asking */
@keyframes vc-swap { from { opacity: 0; transform: translate(-20px, -14px) scale(.9); } }
.vc-ask__new { transform-box: fill-box; transform-origin: left top; }
.vc-js .vc-line__ask:not(.is-in) .vc-ask__new { opacity: 0; }
.vc-js .vc-line__ask:not(.is-in) .vc-ask__old { opacity: 1; }
.vc-js .vc-line__ask .vc-ask__old { transition: opacity 700ms ease 900ms; }
.vc-js .vc-line__ask :is(.vc-ask__strike, .vc-ask__x) { stroke-dasharray: 1; }
.vc-js .vc-line__ask:not(.is-in) :is(.vc-ask__strike, .vc-ask__x) { stroke-dashoffset: 1; opacity: 0; }
.vc-js .vc-line__ask.is-in .vc-ask__strike { animation: vc-draw 520ms var(--vc-ease) 500ms both; }
.vc-js .vc-line__ask.is-in .vc-ask__new { animation: vc-swap 760ms var(--vc-ease) 1000ms both; }
.vc-js .vc-line__ask.is-in .vc-ask__x { animation: vc-draw 520ms var(--vc-ease) 1600ms both; }

/* native "Read more": opened for print, found by in-page search */
.vc-more { margin-top: 10px; }
.vc-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: #c9def2; transition: color 200ms; }
.vc-more summary::-webkit-details-marker { display: none; }
.vc-more summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--vc-ease); }
.vc-more summary:hover { color: #fff; }
.vc-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.vc-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.vc-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.vc-more__shut, .vc-more[open] .vc-more__open { display: none; }
.vc-more[open] .vc-more__shut { display: inline; }
.vc-more__body p { margin-top: 4px !important; }
.vc-more[open] .vc-more__body { animation: vc-unfold 420ms var(--vc-ease); }

/* ============ READ ON ============ */
.vc-on { padding-block: clamp(56px, 7vw, 104px); }
.vc-on__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; margin-bottom: clamp(16px, 2vw, 28px); }
.vc-on__up { display: flex; flex-wrap: wrap; gap: 0 32px; }
.vc-on__title { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.vc-book { flex: none; width: 64px; height: 56px; overflow: visible; }
.vc-book path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vc-book .vc-book__ln { stroke: var(--accent-blue); stroke-width: 1.5; }
/* the book is opened, then its lines are written */
.vc-js .vc-on__title path { stroke-dasharray: 1; }
.vc-js .vc-on__title:not(.is-in) path { stroke-dashoffset: 1; opacity: 0; }
.vc-js .vc-on__title.is-in path { animation: vc-draw 900ms var(--vc-ease) 150ms both; }
.vc-js .vc-on__title.is-in .vc-book__ln { animation-delay: 700ms; }
.vc-route { list-style: none; margin: 0; padding: 0; }
.vc-route li { position: relative; padding-left: 44px; }
/* a stop for each article, and one connector per gap: nothing runs on past the last stop */
.vc-route li::before { content: ""; position: absolute; left: 0; top: 30px; width: 15px; height: 15px; box-sizing: border-box; border: 2px solid var(--border-strong); border-radius: 50%; background: #fff; z-index: 1; transition: border-color 320ms, background-color 320ms, transform 420ms var(--vc-ease); }
.vc-route li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 45px; bottom: -30px; width: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat top / 100% 0, var(--border); transition: background-size 620ms var(--vc-ease); }
.vc-route li.is-passed::before { border-color: var(--accent-blue); background: var(--accent-blue); transform: scale(1.12); }
.vc-route li.is-passed:not(:last-child)::after { background-size: 100% 100%, auto; }
.vcand .vc-route a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 20px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
.vcand .vc-route li:last-child a { border-bottom: 0; }
.vc-route__t { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.2; transition: color 200ms, transform 420ms var(--vc-ease); }
.vc-route__go { font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--vc-ease); }
.vc-route a:hover .vc-route__t, .vc-route a:focus-visible .vc-route__t { color: var(--accent-blue-hover); transform: translateX(6px); }
.vc-route a:hover .vc-route__go, .vc-route a:focus-visible .vc-route__go { transform: translateX(8px); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .vcand .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: 900px) {
  .vc-hero__grid, .vc-why-sec__grid, .vc-line__grid, .vc-cond__foot { grid-template-columns: minmax(0, 1fr); }
  .vc-sheet { max-width: 380px; }
  .vc-why-sec__head { position: static; }
  /* stacked, the question and its answer come before the line to take away */
  .vc-line__text { order: -1; }
  .vc-sort { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .vc-gate__in { grid-template-columns: minmax(0, 1fr); }
  .vc-js [data-r="left"]:not(.is-in) { transform: translateY(18px); }
  /* stacked, the reasons rise instead of sliding in from a side that is off the screen */
  .vc-js .vc-whys:not(.is-in) .vc-why { transform: translateY(20px); }
}
@media (max-width: 600px) {
  html:has(body.vcand) { --hc-bar-h: 48px; }
  .vcand .hc-bar__track { gap: 22px; }
  .vc-sheet { max-width: 300px; }
  /* the play button sits above the track, which needs the whole width */
  .vc-gates__bar { grid-template-columns: minmax(0, 1fr); }
  .vc-gates__play { width: 48px; height: 48px; margin: 0 auto 6px; }
  .vc-stop__ic { width: 52px; height: 52px; }
  .vc-gates__line { top: 25px; }
  .vc-stop__name { font-size: 13.5px; }
  .vc-why summary { grid-template-columns: 48px minmax(0, 1fr) 14px; padding: 14px; }
  .vc-why__ic { width: 48px; height: 48px; }
  /* how often each reason comes up moves under its name */
  .vc-why__f { grid-column: 2; grid-row: 5; margin-top: 6px; }
  .vc-why summary::after { grid-column: 3; grid-row: 1 / 5; }
  .vc-why__body { padding: 0 14px 18px; }
  .vc-mark { width: 48px; height: 48px; }
  .vc-cond__next .btn { width: 100%; }
  .vc-route li { padding-left: 32px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .vcand main *, .vcand main *::before, .vcand main *::after { animation: none !important; transition: none !important; }
  .vc-js [data-r]:not(.is-in) { opacity: 1 !important; transform: none !important; }
  .vc-js :is(.vc-gates, .vc-whys, .vc-sort, .vc-line__ask, .vc-on__title):not(.is-in) * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .vc-js .vc-gates:not(.is-in) .vc-gates__line { transform: none !important; }
  .vcand main [pathLength] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .vc-gates__ring { display: none; }
  .vcand .hc-bar { transition: none !important; }
  .vc-stop:hover .vc-stop__ic, .vc-go:hover span, .vc-route a:hover :is(.vc-route__t, .vc-route__go), .vc-gates__play:hover, .vc-cond__next .btn:hover { transform: none; }
  .vc-go[href^="#"]:hover span { transform: rotate(90deg); }
}
@media print {
  .vcand .hc-bar, .vc-gates__bar, .vc-decide__how, .vc-more > summary { display: none !important; }
  .vc-js [data-r], .vc-js [data-r] * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .vc-why__body, .vc-more__body { display: block; }
  .vc-line { background: #fff; color: var(--ink); }
  .vcand .vc-line h2, .vc-line__q, .vc-line__text p, .vc-line__text strong { color: var(--ink); }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}