/* THE VERTICAL LANDINGS' DESIGN LAYER (2026-10-07): /long-term-care,
   /industrial and the free resources under /resources.

   DISTILLED FROM /therapy-practices, not linked to it. That page keeps its own
   rules inline so they leave with it; these pages are nine, so the shared part
   lives here once. Every class is vl-*, because site.css owns .panel, .plan and
   .card globally and a page that reused one restyled itself the day somebody
   edited the shared rule (2026-09, the pricing cards). Everything is scoped
   under .vl, the wrapper each page draws, so nothing here reaches the rest of
   the site.

   THE EVERTRUST LANGUAGE (2026-10-08). The owner asked for the two landings
   to feel like the EverTrust Garage Doors page: a thin info bar over a dark
   photo hero with a glass card of key facts, trust badges and a scroll cue; a
   bright ticker; numbered dark cards; a full-width call-to-action strip; a
   deep band of big figures; a big-word marquee; a pinned run of step cards
   with pictures; warm paper sections in a strong rhythm. Those components are
   below, after the original ones. What did not come across, on purpose:
   EverTrust's photographs (we have none of homes or plants, and staged ones
   would be fake), its review badge and testimonials (there are none to show),
   and its Archivo face (a Google font; the site serves its own type only).

   The motion is opt-in: hidden starting states exist only under .vl-js, which
   vertical.js sets, so a page with no script — or reduced motion — is the same
   page with nothing moving. */

@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/fonts/instrument-serif-italic-latin.woff2") format("woff2"); }

/* ONE SMOOTH SCROLL, NOT TWO (2026-10-08). site.css gives every page
   html { scroll-behavior: smooth }, and Lenis (vertical.js) moves the page
   with window.scrollTo on every frame. Both on, the browser eased each of
   Lenis's steps and turned every instant jump — a focused field, an invalid
   one, scrollIntoView — into a half-second glide that Lenis then chased: the
   demo form's submit button would not hold still long enough to be pressed
   in the release gate's browser test. Lenis adds .lenis to <html> only while
   it runs, so without it the site's own smooth anchors stay as they were. */
html.lenis { scroll-behavior: auto; }

/* ---------------------------------------------------------------- tokens */
/* THE THEME IS FOUR VARIABLES, so /industrial is a re-colouring and not a
   second stylesheet (2026-10-08): --hi is the highlight on dark ground, --strip
   and --strip-ink the bright ticker, --acc-text the accent used AS TEXT on
   light ground, which on /industrial cannot be the amber itself (1.9:1 on
   white); the page sets a dark amber there. --btn and --btn-ink colour the
   filled buttons. Defaults are the site's blue. --vl-ease is a curve alone,
   and is not called --ease because site.css's --ease carries its duration
   too: redefined on .vl, every site.css transition inside the landing (the
   demo form's fields among them) lost its duration (Codex, 2026-10-08). */
.vl { --sand: #f5f1ea; --sand-2: #ece5d8; --ink-900: #0a1226; --ink-800: #101b36; --ink-700: #1a2848;
      --mist: #c9d3e6; --sky: #a9c8ff; --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
      --vl-ease: cubic-bezier(.2, .7, .1, 1);
      --hi: var(--sky); --strip: var(--accent); --strip-ink: #fff; --acc-text: var(--accent);
      --btn: var(--accent); --btn-hover: var(--accent-ink); --btn-ink: #fff; --btn-glow: rgba(37, 99, 235, .3);
      --tile: var(--accent-pale); --tile-ink: var(--accent-ink);
      --band-1: #1e3a8a; --band-2: #0c1a45; }
.vl em.acc { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  color: var(--acc-text); font-size: 1.07em; }
.vl-dark em.acc, .vl-hero em.acc, .vl-band em.acc { color: var(--hi); }
.vl section.vl-sec { padding: 128px 0; }
.vl .tint { background: var(--sand); }
.vl .vl-paper { background: #faf8f4; }
/* GREY TEXT ON SAND IS DARKER (integration pass, 2026-10-07, after review
   finding 10). The site's --muted (#64748b) is 4.8:1 on white but 4.2:1 on
   --sand, under the 4.5:1 that the lead paragraphs and the 14px price note
   need, and both sit on tinted sections on these pages. #4a5568 is 6.7:1. */
.vl .tint .lead, .vl .tint .vl-tiers-note, .vl .vl-paper .lead { color: #4a5568; }
.vl h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800;
  margin: 0 0 18px; max-width: 22ch; text-wrap: balance; }
.vl .lead { font-size: 18.5px; line-height: 1.7; max-width: 60ch; }
.vl-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12.5px;
  font-weight: 750; letter-spacing: .18em; text-transform: uppercase; color: var(--acc-text); }
.vl-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.vl-dark .vl-eyebrow, .vl-hero .vl-eyebrow, .vl-band .vl-eyebrow { color: var(--hi); }
.vl-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.vl-head .lead { margin: 0; }
.vl-dark { background: var(--ink-900); color: var(--mist); }
.vl-dark h2, .vl-dark h3, .vl-dark strong { color: #fff; }
.vl-dark .lead, .vl-dark p { color: var(--mist); }
.vl-dark a { color: var(--sky); }
.vl-ico { width: 22px; height: 22px; display: block; flex: none; }
/* THE SITE'S BLUE FOCUS RING VANISHES ON THE DARK BANDS (#3b82f6 is 3.4:1 on
   --ink-900 and less on the deep blue), so on dark ground it is white. */
.vl-hero :focus-visible, .vl-dark :focus-visible, .vl-band :focus-visible, .vl-ncard :focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; }
/* site.css's focus ring also sets a 4px radius, which squared off these
   rounded controls the moment they took focus; each keeps its own shape. */
.vl .vl-btn:focus-visible { border-radius: 12px; }
.vl .vl-btn--sm:focus-visible { border-radius: 10px; }
.vl .vl-glass-link:focus-visible { border-radius: 14px; }
.vl .vl-motion:focus-visible, .vl .vl-ncard-foot span:focus-visible { border-radius: 50%; }
.vl .vl-mbar a:focus-visible { border-radius: 999px; }
/* The demo form's .panel is site.css's dark box; its accent word takes the
   light highlight, as on every other dark ground here. */
.vl .panel em.acc { color: var(--hi); }
/* Beside the long form its short intro left an empty column; it stays in
   view instead while the form scrolls past (one column below 980px, where
   site.css stacks the panel). site.css clips the panel's glow with overflow:
   hidden, which makes the panel the box a sticky child sticks in, so here it
   clips with overflow: clip, which does not; a browser without clip keeps
   hidden and the intro simply does not stick. */
@media (min-width: 981px) {
  .vl .panel { overflow: clip; }
  .vl .panel > div:first-child { position: sticky; top: 100px; align-self: start; }
}

/* ---------------------------------------------------------------- hero */
.vl-hero { position: relative; overflow: hidden; padding: 96px 0 88px; background:
  radial-gradient(900px 520px at 85% 0%, rgba(37, 99, 235, .32), transparent), var(--ink-900); color: var(--mist); }
.vl-hero .wrap { position: relative; z-index: 1; }
.vl-hero-content { max-width: 800px; }
.vl-hero h1 { color: #fff; font-size: clamp(38px, 5.4vw, 74px); line-height: 1; letter-spacing: -.05em;
  font-weight: 800; margin: 0 0 20px; }
.vl-hero h1 em.acc { display: inline-block; font-size: 1.08em; }
.vl-sub { color: #d5ddeb; font-size: 19px; line-height: 1.55; max-width: 56ch; margin: 0 0 28px; }
.vl-hero--short { padding: 72px 0 60px; }
.vl-hero--short h1 { font-size: clamp(32px, 4.4vw, 56px); }

/* THE FULL HERO (2026-10-08): EverTrust's first screen. An info bar along the
   top, the headline beside a glass card, and a foot with the trust row and the
   scroll cue, the whole at least a screen tall less the site's 61px header,
   and capped so a tall monitor does not float the copy in a sea of film. */
.vl-hero--full { padding: 0; display: flex; flex-direction: column;
  min-height: clamp(640px, calc(100vh - 61px), 940px); }
.vl-hero-main { flex: 1 0 auto; display: flex; align-items: center; padding: 64px 0 56px; }
.vl-hero-main > .wrap { width: 100%; }
.vl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 64px; align-items: center; }
.vl-hero--full h1 { font-size: clamp(40px, 4.7vw, 66px); line-height: 1.02; }
.vl-hero--full .vl-sub { font-size: 18.5px; max-width: 58ch; }

.vl-topbar { position: relative; z-index: 1; border-bottom: 1px solid rgba(255, 255, 255, .13); font-size: 13.5px; color: #d5ddeb; }
.vl-topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 46px; }
.vl-topbar p { display: flex; align-items: center; gap: 9px; margin: 0; }
.vl-topbar .vl-ico { width: 16px; height: 16px; color: var(--hi); }
.vl-topbar nav { display: flex; gap: 26px; }
.vl-topbar nav a { color: #d5ddeb; text-decoration: none; font-weight: 600; }
.vl-topbar nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.vl-hero-foot { position: relative; z-index: 1; }
.vl-hero-foot .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 22px; padding-bottom: 26px; }
/* The rule spans the text, not the wrap's gutters. */
.vl-hero-foot .wrap::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
.vl-trust { display: flex; flex-wrap: wrap; gap: 12px 30px; list-style: none; margin: 0; padding: 0; }
.vl-trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 650; color: #fff; }
.vl-trust .vl-ico { width: 18px; height: 18px; color: var(--hi); }

.vl-scroll { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 750;
  letter-spacing: .22em; text-transform: uppercase; color: #d5ddeb; }
.vl-scroll i { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 12px; }
.vl-scroll i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: #fff; }
.vl-js .vl-scroll i::after { animation: vl-wheel 1.9s var(--vl-ease) infinite; }
@keyframes vl-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; } }

/* THE GLASS CARD. Dark glass rather than EverTrust's lighter one: on
   /long-term-care it sits over the bright right half of the reception film,
   and mist text on .72 of --ink over a white wall is still about 5:1, where
   .5 fell under 4.5:1 on the poster's brightest frame. */
.vl-glass { position: relative; border-radius: 22px; padding: 24px 26px 22px; color: var(--mist);
  background: rgba(9, 15, 32, .72); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.vl-glass-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.vl-glass-label { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.vl-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hi); white-space: nowrap; }
.vl-chip .vl-ico { width: 15px; height: 15px; }
.vl-glass-big { margin: 10px 0 16px; font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #fff; }
.vl-glass-rows { margin: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.vl-glass-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; }
.vl-glass-rows dt { color: var(--mist); }
.vl-glass-rows dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }
.vl-glass-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;
  padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .25s, border-color .25s; }
.vl-glass-link small { display: block; font-weight: 500; font-size: 13px; color: var(--mist); }
.vl-glass-link .vl-ico { width: 18px; height: 18px; color: var(--hi); }
.vl-glass-link:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); color: #fff; }

/* ---------------------------------------------------------------- buttons */
.vl-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0; }
.vl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 12px;
  font-weight: 750; font-size: 16px; text-decoration: none; background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 14px 30px var(--btn-glow); transition: background .2s, box-shadow .2s, transform .2s; }
.vl-btn:hover { background: var(--btn-hover); color: var(--btn-ink); box-shadow: 0 18px 40px var(--btn-glow); transform: translateY(-1px); }
.vl-btn--line { background: transparent; color: var(--ink); border: 1px solid #cfd6e2; box-shadow: none; }
.vl-btn--line:hover { background: var(--tile); color: var(--ink); box-shadow: none; }
.vl-dark .vl-btn--line, .vl-hero .vl-btn--line, .vl-band .vl-btn--line { color: #fff; background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .3); }
.vl-dark .vl-btn--line:hover, .vl-hero .vl-btn--line:hover, .vl-band .vl-btn--line:hover { background: rgba(255, 255, 255, .13); color: #fff; }
/* The arrow EverTrust puts after a button's words, drawn by CSS so the link's
   text stays exactly its words (tests/test_vertical_landings.py reads it). */
.vl-btn--go::after { content: ""; width: 16px; height: 16px; background: currentColor; transition: transform .25s var(--vl-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.vl-btn--go:hover::after { transform: translateX(3px); }
.vl-btn--sm { padding: 10px 18px; font-size: 14.5px; border-radius: 10px; }
.vl-note { color: #8fa0bd; font-size: 14px; margin: 22px 0 0; }
/* THE LIGHT LINK ON THE DARK HERO (review finding 10, 2026-10-07). The note's
   link inherited the site's #2563eb, about 3.6:1 on --ink-900, under the 4.5:1
   that 14px text needs; --sky is the hero's own light accent and well over it.
   .vl-dark already does this for every link it holds. */
.vl-hero .vl-note a { color: var(--sky); }
.vl-hero .vl-note { color: #b4c0d4; }

/* ---------------------------------------------------------------- ticker */
/* Still and wrapping by default; a single moving line only under .vl-js
   (the macro in _vertical_macros.html says why). */
.vl-ticker { position: relative; overflow: hidden; background: var(--strip); color: var(--strip-ink); }
.vl-ticker-track { display: flex; justify-content: center; }
.vl-ticker-list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 6px 24px; list-style: none; }
.vl-ticker-list[aria-hidden] { display: none; }
.vl-ticker li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; text-align: center;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vl-js .vl-ticker li { white-space: nowrap; }
.vl-ticker .vl-ico { width: 18px; height: 18px; }
.vl-js .vl-ticker-track { justify-content: flex-start; width: max-content; animation: vl-run 46s linear infinite; }
.vl-js .vl-ticker-list { flex-wrap: nowrap; padding: 6px 0; }
.vl-js .vl-ticker-list[aria-hidden] { display: flex; }
.vl-js .vl-ticker li::after { content: ""; width: 6px; height: 6px; margin-left: 34px; border-radius: 50%; background: currentColor; opacity: .7; }
.vl-ticker:hover .vl-ticker-track { animation-play-state: paused; }
@keyframes vl-run { to { transform: translateX(-33.3333%); } }
.vl-motion { position: absolute; right: 12px; top: 50%; z-index: 1; width: 34px; height: 34px; margin-top: -17px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--strip); color: var(--strip-ink); border: 1.5px solid currentColor;
  box-shadow: -26px 0 22px 8px var(--strip); }
.vl-motion[hidden] { display: none; }
.vl-motion svg { fill: currentColor; display: block; }
.vl-motion .vl-motion-play { display: none; margin-left: 2px; }
.vl-motion[data-paused="true"] .vl-motion-pause { display: none; }
.vl-motion[data-paused="true"] .vl-motion-play { display: block; }
.vl-motion:focus-visible { outline: 2px solid var(--strip-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- big-word marquee */
.vl-marquee { overflow: hidden; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; }
.vl-marquee-track { display: flex; width: max-content; }
.vl-marquee-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.vl-marquee li { display: flex; align-items: center; gap: 56px; padding-right: 56px; white-space: nowrap;
  font-size: clamp(48px, 7vw, 100px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; color: var(--ink); }
.vl-marquee li:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--acc-text); }
.vl-marquee li::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--strip); }
.vl-js .vl-marquee-track { animation: vl-run 60s linear infinite; }

/* Every moving thing stops together, from the ticker's button.
   THE TICKER STOPS AS A LIST, NOT A FROZEN FRAME (Codex, 2026-10-08): paused
   mid-run, or under reduced motion, the one long row was cut at both edges and
   a phone never showed its longer labels at all. Stopped, it is the wrapping
   list a page without script shows, its copies gone, every label whole. The
   marquee freezes where it is: it is aria-hidden decoration, said in full
   elsewhere. */
.vl-still .vl-ticker-track, .vl-still .vl-marquee-track, .vl-still .vl-scroll i::after { animation-play-state: paused; }
.vl-js.vl-still .vl-ticker-track { animation: none; width: auto; justify-content: center; }
.vl-js.vl-still .vl-ticker-list { flex-wrap: wrap; padding: 6px 56px 6px 24px; }
.vl-js.vl-still .vl-ticker-list[aria-hidden] { display: none; }
.vl-js.vl-still .vl-ticker li { white-space: normal; }
.vl-js.vl-still .vl-ticker li::after { display: none; }

/* ---------------------------------------------------------------- tiles */
.vl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vl-tile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px 28px 30px;
  transition: transform .4s var(--vl-ease), box-shadow .4s var(--vl-ease), border-color .4s; }
.vl-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11, 18, 32, .1); border-color: transparent; }
.vl-tile-no { font-size: 13px; font-weight: 750; letter-spacing: .14em; color: var(--acc-text); }
.vl-tile h3 { margin: 16px 0 10px; font-size: 21px; letter-spacing: -.025em; line-height: 1.25; }
.vl-tile p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.vl-dark .vl-tile, .vl-band .vl-tile { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.vl-dark .vl-tile:hover, .vl-band .vl-tile:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }
.vl-dark .vl-tile-no { color: var(--sky); }
.vl-band .vl-tile h3 { color: #fff; }
.vl-band .vl-tile p { color: var(--mist); }
/* EverTrust's icon tile at the top of a card. */
.vl-tile-ico, .vl-res-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--tile); color: var(--tile-ink); }
.vl-tile-ico .vl-ico, .vl-res-ico .vl-ico { width: 24px; height: 24px; }
.vl-band .vl-tile-ico { background: var(--hi); color: var(--ink-900); }

/* ---------------------------------------------------------------- numbered dark cards */
/* EverTrust's problem cards: a picture under a dark fade, a number chip, the
   title and words at the foot and a link row. The pictures here are drawn
   (an inline SVG per card), because there is no photograph of a gate binder
   to show and a stock one would be a fake. */
.vl-ncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vl-ncard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: 0 30px 28px; border-radius: 22px; color: var(--mist);
  background: radial-gradient(420px 260px at 70% 10%, rgba(242, 169, 0, .14), transparent), linear-gradient(180deg, #1b2230, #0d1119);
  box-shadow: 0 26px 50px rgba(11, 18, 32, .16); transition: transform .45s var(--vl-ease), box-shadow .45s var(--vl-ease); }
.vl-ncard:hover { transform: translateY(-6px); box-shadow: 0 34px 60px rgba(11, 18, 32, .24); }
/* The drawing sits above the words, not under them: line art behind a
   heading is noise, where EverTrust's darkened photographs are not. */
.vl-ncard-art { position: relative; height: 230px; margin: 0 -30px 6px; }
.vl-ncard-art svg { width: 100%; height: 100%; display: block; }
.vl-ncard-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px;
  background: linear-gradient(180deg, rgba(13, 17, 25, 0), #0f141d); }
.vl-ncard-no { position: absolute; top: 24px; left: 24px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 750;
  letter-spacing: .14em; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.vl-ncard h3 { margin: 0 0 10px; color: #fff; font-size: 29px; line-height: 1.1; letter-spacing: -.035em; }
.vl-ncard p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--mist); }
.vl-ncard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .13); color: var(--hi); text-decoration: none; font-size: 12.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; }
.vl-ncard-foot span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .1); transition: background .25s, transform .25s var(--vl-ease); }
.vl-ncard-foot .vl-ico { width: 17px; height: 17px; }
.vl-ncard-foot:hover { color: #fff; }
.vl-ncard-foot:hover span { background: var(--hi); color: var(--ink-900); transform: translateX(3px); }

/* ---------------------------------------------------------------- strip */
/* EverTrust's full-width emergency strip: an icon tile, a line or two, and
   the buttons at the right. Light by default; .vl-strip--glass is the same
   strip on dark ground. */
.vl-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; margin-top: 40px; padding: 26px 30px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--strip); border-radius: 18px;
  box-shadow: 0 18px 40px rgba(11, 18, 32, .06); }
.vl-strip-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--tile); color: var(--tile-ink); }
.vl-strip h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.vl-strip p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.vl-strip--glass { grid-template-columns: auto 1fr; align-items: start; margin-top: 56px; background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12); border-left-color: var(--hi); box-shadow: none; }
.vl-strip--glass .vl-strip-ico { background: rgba(255, 255, 255, .08); color: var(--hi); }

/* ---------------------------------------------------------------- pinned steps */
/* HOW IT WORKS, PINNED (desktop): the section holds still and the steps slide
   past sideways as the reader scrolls, each with the screen it describes, as
   on /therapy-practices; the progress rule and the step names under them are
   EverTrust's index. vertical.js pins .vl-steps-pin only at 1024px and up, on
   a window at least 780px tall (the held block is about 765px, measured on
   both landings, and a shorter window would cut its foot off while it is
   held), with motion allowed and the libraries loaded. Anywhere else
   it is the same cards stacked in order. */
/* .vl section.vl-steps, to outweigh .vl section.vl-sec's padding: the pinned
   part carries its own top padding so its heading clears the sticky header. */
.vl-steps { overflow: hidden; }
.vl section.vl-steps { padding: 0 0 128px; }
.vl-steps-pin { padding: 88px 0 20px; }
/* Smaller than the page's other headings: the held block has to fit a
   laptop's window, heading, cards and index together. */
.vl-steps h2 { font-size: clamp(32px, 3.8vw, 50px); }
.vl-steps .vl-head { margin-bottom: 28px; }
.vl-steps-track { position: relative; display: flex; gap: 28px; margin: 0; list-style: none; will-change: transform;
  padding: 0 max(24px, calc((100vw - 1160px) / 2 + 24px)); }
.vl-step { flex: 0 0 min(76vw, 900px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center;
  padding: 30px; border-radius: 26px; background: linear-gradient(160deg, var(--ink-700), var(--ink-800));
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.vl-step-no { display: flex; align-items: flex-start; gap: 10px; font-size: 60px; line-height: .9; font-weight: 800;
  letter-spacing: -.05em; color: #fff; }
.vl-step-no em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: .08em; color: var(--hi); }
.vl-step h3 { margin: 18px 0 10px; font-size: 27px; line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.vl-step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mist); }
.vl-step-art { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px;
  padding: 18px 18px 12px; border-radius: 20px; background: radial-gradient(380px 260px at 70% 15%, rgba(59, 130, 246, .3), transparent), #0d1730; }
.vl-step-art figcaption { font-size: 13px; color: #9fb0cc; text-align: center; }
.vl-steps-foot { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 28px; margin-top: 28px; }
.vl-steps-bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.vl-steps-bar i { display: block; height: 100%; background: var(--hi); transform: scaleX(0); transform-origin: left; }
.vl-steps-foot span { display: flex; gap: 12px; font-size: 14.5px; font-weight: 650; color: #8fa0bd; transition: color .3s; }
.vl-steps-foot span b { font-size: 12px; letter-spacing: .12em; color: inherit; padding-top: 2px; }
.vl-steps-foot span.is-on { color: #fff; }
.vl-steps-foot span.is-on b { color: var(--hi); }
.vl-steps:not(.is-pinned) .vl-steps-track { flex-direction: column; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.vl-steps:not(.is-pinned) .vl-step { flex: auto; }
.vl-steps:not(.is-pinned) .vl-steps-foot { display: none; }

/* DEVICE FRAMES for the real screens: a browser for the staff pages, which
   are wide; the arrival text is already a phone in its own picture. */
.vl-frame { position: relative; width: 100%; max-width: 460px; overflow: hidden; border-radius: 12px; background: #e9edf3;
  padding-top: 24px; box-shadow: 0 28px 56px rgba(0, 0, 0, .45); }
.vl-frame::before { content: ""; position: absolute; top: 8px; left: 12px; width: 40px; height: 8px;
  background: radial-gradient(circle at 4px 4px, #f87171 3.2px, transparent 3.6px), radial-gradient(circle at 18px 4px, #fbbf24 3.2px, transparent 3.6px),
    radial-gradient(circle at 32px 4px, #34d399 3.2px, transparent 3.6px); }
.vl-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: #fff; }
.vl-phone { display: block; width: auto; max-width: 100%; height: 260px; border-radius: 30px; box-shadow: 0 28px 56px rgba(0, 0, 0, .45); }

/* ---------------------------------------------------------------- deep band of figures */
.vl-band { position: relative; overflow: hidden; color: var(--mist);
  background: radial-gradient(900px 560px at 92% -10%, rgba(255, 255, 255, .09), transparent 60%),
    linear-gradient(160deg, var(--band-1), var(--band-2)); }
/* EverTrust's faint panel lines, so the band reads as a surface and not a fill. */
.vl-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 25%); }
.vl-band .wrap { position: relative; }
.vl-band h2, .vl-band h3 { color: #fff; }
.vl-band .lead, .vl-band p { color: var(--mist); }
.vl-band a { color: var(--sky); }
.vl-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 56px; padding: 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.vl-facts li { padding: 34px 26px 30px 0; }
.vl-facts li + li { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .16); }
.vl-fact-num { display: block; white-space: nowrap; font-size: clamp(50px, 5.6vw, 84px); line-height: .95; font-weight: 800; letter-spacing: -.05em; color: #fff; }
.vl-fact-num em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .48em; letter-spacing: 0; margin-left: 6px; color: var(--hi); }
.vl-facts p { margin: 14px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--mist); max-width: 26ch; }

/* ---------------------------------------------------------------- about block */
.vl-about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.vl-collage { position: relative; margin: 0; padding: 0 0 46px 0; }
.vl-collage .vl-frame { max-width: none; box-shadow: 0 34px 70px rgba(11, 18, 32, .2); }
.vl-collage .vl-frame img { aspect-ratio: 1200 / 820; }
.vl-collage figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.vl-badge { position: absolute; left: -22px; bottom: 74px; padding: 18px 20px; border-radius: 16px; background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 20px 40px rgba(11, 18, 32, .22); }
.vl-badge b { display: block; font-size: 46px; line-height: .9; letter-spacing: -.05em; }
.vl-badge span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; max-width: 16ch; }
.vl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.vl-checks li { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 15.5px; }
.vl-checks li i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); }
.vl-checks .vl-ico { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---------------------------------------------------------------- quoted regulation */
.vl-quote { margin: 0 0 28px; padding: 26px 30px; border-left: 3px solid var(--accent); background: #fff;
  border-radius: 0 18px 18px 0; font-size: 16.5px; line-height: 1.7; }
.vl-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--muted); }
/* The regulation set as a card, its accent a short bar along the top. Not a
   large serif quotation mark: the quoted text already opens with its own, and
   nothing may be added inside a blockquote, which the test holds to the saved
   text word for word. */
.vl-quote--card { position: relative; padding: 42px 40px 34px; border: 1px solid var(--line); border-left: 0; border-radius: 24px;
  font-size: 18px; box-shadow: 0 24px 50px rgba(11, 18, 32, .07); }
.vl-quote--card::before { content: ""; position: absolute; top: 0; left: 40px; width: 64px; height: 4px; border-radius: 0 0 4px 4px; background: var(--strip); }

/* ---------------------------------------------------------------- resource card */
.vl-res { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 30px 28px; transition: transform .4s var(--vl-ease), box-shadow .4s var(--vl-ease); }
.vl-res:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(11, 18, 32, .09); }
.vl-res h3 { margin: 6px 0 0; font-size: 21px; letter-spacing: -.02em; line-height: 1.25; }
.vl-res h3 a { color: var(--ink); text-decoration: none; }
.vl-res h3 a:hover { text-decoration: underline; }
.vl-res p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.vl-res .vl-actions { gap: 10px; margin-top: auto; padding-top: 8px; }
.vl-legal { font-size: 13px; color: var(--muted); }
.vl-legal a { color: inherit; }
.vl-res-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Four cards in auto-fit columns lay out three and an orphan at desktop width
   (/industrial, verify pass 2026-10-07); an even count reads better in pairs. */
@media (min-width: 701px) { .vl-res-grid--pairs { grid-template-columns: 1fr 1fr; } }
/* A resource page's own download card is one card, and stretched across the
   whole wrap it was a long empty box; it lines up with the text below it. */
.vl-res-grid--one { max-width: 760px; }

/* ---------------------------------------------------------------- product CTA box */
.vl-cta { display: grid; grid-template-columns: 1.3fr auto; gap: 28px; align-items: center; padding: 36px 40px;
  border-radius: 26px; background: linear-gradient(160deg, var(--ink-700), var(--ink-900)); color: var(--mist); }
.vl-cta h3 { color: #fff; margin: 0 0 8px; font-size: 26px; letter-spacing: -.03em; }
.vl-cta p { margin: 0; color: var(--mist); }

/* ---------------------------------------------------------------- pricing */
.vl-tiers { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vl-tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 34px 30px 30px; transition: transform .4s var(--vl-ease), box-shadow .4s var(--vl-ease); }
.vl-tier::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--strip); }
.vl-tier:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11, 18, 32, .1); }
.vl-tier h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.vl-amount { font-size: 56px; font-weight: 800; letter-spacing: -.05em; color: var(--ink); margin: 18px 0 4px; line-height: 1; }
.vl-tier ul { padding: 0; margin: 22px 0 28px; list-style: none; }
.vl-tier li { padding: 9px 0 9px 30px; position: relative; font-size: 15px; border-top: 1px solid var(--line); }
.vl-tier li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 10px; height: 5px;
  border-left: 2px solid var(--acc-text); border-bottom: 2px solid var(--acc-text); transform: rotate(-45deg); }
.vl-tier .vl-btn { margin-top: auto; justify-content: center; }
.vl-tiers-note { color: var(--muted); font-size: 14px; margin-top: 22px; }

/* ---------------------------------------------------------------- the paid pilot */
/* WHAT A PAID PILOT INCLUDES, as EverTrust's dark service card (2026-10-08).
   Shared by both landings; it was two page-scoped copies of the same white
   box. The words, the figures and the id the price test reads are each
   page's own and unchanged. */
.vl-pilot { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 64px; padding: 44px;
  border-radius: 26px; color: var(--mist); background: radial-gradient(700px 400px at 0% 0%, rgba(255, 255, 255, .07), transparent 60%),
  linear-gradient(160deg, var(--ink-700), var(--ink-900)); box-shadow: 0 30px 60px rgba(11, 18, 32, .18); }
/* The intro runs across the top, its button at the right, and the six terms
   sit three across under it; side by side, the intro left a tall empty column
   beside them. */
.vl-pilot > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.vl-pilot > div:first-child > .vl-actions { grid-column: 2; grid-row: 1 / span 2; }
.vl-pilot h3 { margin: 0 0 10px; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; color: #fff; }
.vl-pilot p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--mist); max-width: 62ch; }
.vl-pilot dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vl-pilot dl > div { padding: 20px 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.vl-pilot dt { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-weight: 750; line-height: 1.35; color: #fff; }
.vl-pilot dt .vl-ico { width: 20px; height: 20px; margin-top: 1px; color: var(--hi); }
.vl-pilot dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mist); }
.vl-pilot :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------- FAQ */
.vl-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.vl-faq details { border-top: 1px solid #ddd6c9; }
.vl-faq details:last-child { border-bottom: 1px solid #ddd6c9; }
.vl-faq:not(.tint *) details { border-color: var(--line); }
.vl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px;
  align-items: center; padding: 22px 0; font-weight: 700; color: var(--ink); font-size: 19px; letter-spacing: -.02em; line-height: 1.35; }
.vl-faq summary::-webkit-details-marker { display: none; }
.vl-faq summary::after { content: "+"; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid #cfd6e2; font-weight: 400; font-size: 21px; color: var(--ink);
  transition: transform .35s var(--vl-ease), background .3s, border-color .3s, color .3s; }
.vl-faq summary:hover::after { border-color: var(--ink); }
.vl-faq details[open] summary::after { transform: rotate(45deg); background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.vl-faq details p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; max-width: 62ch; }
/* THE FAQ IN GROUPS (FAQ pass, 2026-10-08, moved here from the two pages on
   2026-10-08). Twenty questions in one run was a wall nobody scans, so each
   group has a small heading and the side column carries a jump list to them.
   The heading grey is #4a5568 because --muted on the tint is 4.2:1, under the
   4.5:1 that 13px text needs. The side column sticks only where it sits
   beside the questions; once the grid is one column (1000px) a sticky block
   would ride over the answers. scroll-margin keeps a jumped-to heading out
   from under site.css's sticky header.
   The jump list is drawn as EverTrust's numbered index: a rule, a number, a
   name and an arrow. */
.vl-faqlead { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: #4a5568; }
.vl-faqnav { display: flex; flex-direction: column; margin: 30px 0 0; padding: 0; border-top: 1px solid #ddd6c9; counter-reset: vlq; }
.vl-faqnav a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ddd6c9; color: var(--ink);
  font-weight: 650; font-size: 15.5px; text-decoration: none; counter-increment: vlq; }
.vl-faqnav a::before { content: counter(vlq, decimal-leading-zero); font-size: 12px; font-weight: 750; letter-spacing: .12em; color: var(--acc-text); }
.vl-faqnav a::after { content: ""; margin-left: auto; width: 14px; height: 14px; background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.vl-faqnav a:hover { color: var(--acc-text); }
.vl-faqnav a:hover::after { opacity: 1; }
.vl-faqgroup { scroll-margin-top: 96px; }
.vl-faqgroup + .vl-faqgroup { margin-top: 52px; }
.vl-faqgroup h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #4a5568; }
@media (min-width: 1001px) { .vl-faqside { position: sticky; top: 96px; } }

/* ---------------------------------------------------------------- resource page body */
.vl-doc { max-width: 760px; }
.vl-doc h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 48px; }
.vl-doc p, .vl-doc li { font-size: 17px; line-height: 1.7; }
.vl-doc table { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: 15px; }
.vl-doc th, .vl-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vl-doc th { background: var(--sand); font-weight: 750; }

/* ---------------------------------------------------------------- mobile action bar */
/* WHAT CHANGED ON 2026-10-07 (review finding 11), each for a reader it failed:
   - SET UP BY vertical.js WHATEVER THE MOTION SETTING. It used to be wired
     after the reduced-motion return, so that reader never got the bar. Shown
     only once the script marks it .is-ready: with no script it would never
     hide, so it is not shown at all.
   - HIDDEN MEANS HIDDEN. Translated below the screen it was still in the tab
     order; visibility (delayed until the slide-out ends) takes it out of the
     focus order and the accessibility tree, and vertical.js adds inert.
   - ABOVE THE ADS NOTICE. That notice is fixed to the same bottom edge
     (_ads_tag.html); vertical.js measures it while it shows and lifts the bar
     by --vl-mbar-lift, so neither covers the other's buttons.
   - CLEAR OF THE HOME INDICATOR, by the bottom safe-area inset where the
     browser reports one; elsewhere env() is 0 and the bar sits where it did. */
.vl-mbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 50; display: none; gap: 10px; padding: 10px; border-radius: 999px; background: rgba(10, 18, 38, .92);
  backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px) + var(--vl-mbar-lift, 0px)));
  visibility: hidden;
  transition: transform .45s var(--vl-ease), bottom .3s var(--vl-ease), visibility 0s linear .45s; }
.vl-mbar.is-on { transform: none; visibility: visible;
  transition: transform .45s var(--vl-ease), bottom .3s var(--vl-ease), visibility 0s; }
.vl-mbar.is-lifted { bottom: calc(var(--vl-mbar-lift, 0px) + 8px); }
/* Sized to their words: an equal split gave "Request a paid pilot", the
   longer label, the same width as "Book a demo" and wrapped it on a phone. */
.vl-mbar a { flex: 1 1 auto; text-align: center; padding: 13px 14px; border-radius: 999px; font-weight: 750;
  font-size: 15px; line-height: 1.2; text-decoration: none; color: #fff; }
.vl-mbar a:first-child { background: var(--btn); color: var(--btn-ink); }
.vl-mbar a:last-child { border: 1px solid rgba(255, 255, 255, .25); }
.vl-mbar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- motion (opt-in, script-driven) */
.vl-js [data-reveal] { opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--vl-ease) var(--d, 0s), transform 1.1s var(--vl-ease) var(--d, 0s); }
.vl-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--vl-ease) calc(var(--i, 0) * .09s), transform 1s var(--vl-ease) calc(var(--i, 0) * .09s); }
.vl-js .is-in[data-reveal], .vl-js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.vl-js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.vl-js [data-split] .w > span { display: inline-block; transform: translateY(105%);
  transition: transform 1.1s var(--vl-ease) calc(.15s + var(--wi) * .055s); }
.vl-js [data-split].is-in .w > span { transform: none; }
/* A staggered card's own hover lift must not wait out the stagger's delay. */
.vl-js [data-reveal-stagger].is-in > .vl-ncard, .vl-js [data-reveal-stagger].is-in > .vl-res,
.vl-js [data-reveal-stagger].is-in > .vl-tier, .vl-js [data-reveal-stagger].is-in > .vl-tile {
  transition: opacity .9s var(--vl-ease) calc(var(--i, 0) * .09s), transform .45s var(--vl-ease), box-shadow .45s var(--vl-ease); }
@media (prefers-reduced-motion: reduce) {
  .vl-js [data-reveal], .vl-js [data-reveal-stagger] > *, .vl-js [data-split] .w > span {
    opacity: 1; transform: none; transition: none; }
  .vl-tile, .vl-tier, .vl-res, .vl-ncard, .vl-btn { transition: none; }
  .vl-tile:hover, .vl-tier:hover, .vl-res:hover, .vl-ncard:hover, .vl-btn:hover { transform: none; }
  .vl-ticker-track, .vl-marquee-track, .vl-scroll i::after { animation: none !important; }
  /* Reduced motion switched on after the script ran: the same still list. */
  .vl-js .vl-ticker-track { width: auto; justify-content: center; }
  .vl-js .vl-ticker-list { flex-wrap: wrap; padding: 6px 24px; }
  .vl-js .vl-ticker-list[aria-hidden] { display: none; }
  .vl-js .vl-ticker li { white-space: normal; }
  .vl-js .vl-ticker li::after { display: none; }
  .vl-motion { display: none; }
  /* The bar still comes and goes, without sliding. */
  .vl-mbar, .vl-mbar.is-on { transition: none; }
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1100px) {
  .vl-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .vl-hero-grid > .vl-glass { max-width: 520px; }
}
@media (max-width: 1000px) {
  .vl-head, .vl-faq-grid, .vl-about { grid-template-columns: 1fr; gap: 24px; }
  .vl-about { gap: 48px; }
  .vl-pilot > div:first-child { grid-template-columns: 1fr; }
  .vl-pilot > div:first-child > .vl-actions { grid-column: 1; grid-row: auto; margin-top: 22px; }
  .vl-pilot dl { grid-template-columns: 1fr 1fr; }
  .vl-tiles, .vl-ncards { grid-template-columns: 1fr 1fr; }
  .vl-cta { grid-template-columns: 1fr; }
  .vl-facts { grid-template-columns: 1fr 1fr; }
  .vl-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .vl-facts li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .vl-strip { grid-template-columns: auto 1fr; }
  .vl-strip > .vl-actions { grid-column: 1 / -1; }
  .vl-step { grid-template-columns: 1fr; }
  .vl-step-art { min-height: 0; }
}
@media (max-width: 860px) {
  .vl-topbar { display: none; }
}
@media (max-width: 700px) {
  .vl section.vl-sec { padding: 80px 0; }
  .vl section.vl-steps { padding: 0 0 80px; }
  .vl-steps-pin { padding: 80px 0 32px; }
  .vl-hero { padding: 64px 0 56px; }
  .vl-hero--full { padding: 0; min-height: 0; }
  .vl-hero-main { padding: 48px 0 40px; }
  .vl-hero-foot .wrap { padding-top: 18px; padding-bottom: 22px; }
  .vl-scroll { display: none; }
  .vl-trust { gap: 10px 20px; }
  .vl-trust li { font-size: 13.5px; }
  .vl-tiles, .vl-ncards, .vl-checks { grid-template-columns: 1fr; }
  .vl-ncard { padding: 0 24px 24px; }
  .vl-ncard-art { height: 200px; margin: 0 -24px 4px; }
  .vl-ncard h3 { font-size: 26px; }
  .vl-cta { padding: 28px; }
  .vl-strip { grid-template-columns: 1fr; padding: 24px 22px; gap: 16px; }
  .vl-strip > .vl-actions .vl-btn { flex: 1 1 auto; justify-content: center; }
  .vl-step { padding: 22px; gap: 24px; }
  .vl-step-art { padding: 16px 12px 12px; }
  .vl-step-no { font-size: 54px; }
  .vl-step h3 { font-size: 23px; }
  .vl-phone { height: 260px; }
  .vl-pilot { padding: 26px 20px; }
  .vl-pilot dl { grid-template-columns: 1fr; }
  .vl-facts li { padding: 26px 14px 24px 0; }
  .vl-facts li + li { padding-left: 14px; }
  .vl-facts li:nth-child(3) { padding-left: 0; }
  .vl-fact-num { font-size: 44px; }
  .vl-facts p { font-size: 13.5px; }
  .vl-badge { left: 12px; bottom: 60px; padding: 14px 16px; }
  .vl-badge b { font-size: 36px; }
  .vl-marquee { padding: 20px 0; }
  .vl-marquee li { gap: 34px; padding-right: 34px; }
  .vl-marquee li::after { width: 22px; height: 22px; border-radius: 6px; }
  .vl-faq summary { font-size: 17.5px; }
  .vl-quote--card { padding: 36px 24px 26px; font-size: 17px; }
  .vl-quote--card::before { left: 24px; }
  .vl-doc table { display: block; overflow-x: auto; }
  .vl-mbar.is-ready { display: flex; }
  /* Room for the action bar over the landing's own last lines (it hides once
     the end of .vl comes up, so the footer is never under it), and for the
     Ads notice beneath it while that is lifting the bar. Only on a page whose
     bar is working (vertical.js sets .vl-has-mbar). */
  .vl.vl-has-mbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--vl-mbar-lift, 0px)); }
}
@media (max-width: 360px) {
  .vl-mbar { gap: 8px; padding: 8px; }
  .vl-mbar a { padding: 12px 10px; font-size: 14px; }
}

@media print {
  .vl-mbar, .vl-cta, .vl-hero .vl-actions, .vl-ticker, .vl-marquee, .vl-scroll { display: none !important; }
}