/* src/styles/htva-bookmodal-1.css */
/* src/styles/htva-bookmodal-1.css: booking pop-up #bkm (the GHL calendar), opened by htva-bookmodal.js. */
.htva.htva.htva .v10-bkm { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.htva.htva.htva .v10-bkm.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
.htva.htva.htva .v10-bkm-back { position: absolute; inset: 0; background: rgba(4, 9, 16, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.htva.htva.htva .v10-bkm-box { position: relative; width: min(880px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: auto; overscroll-behavior: contain; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .4), 0 40px 100px -30px rgba(0, 0, 0, .7);
  transform: translateY(12px) scale(.98); transition: transform .2s ease; }
.htva.htva.htva .v10-bkm.open .v10-bkm-box { transform: none; }
.htva.htva.htva .v10-bkm-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 14px 24px; background: inherit; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.htva.htva.htva .v10-bkm-title { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: 18px; color: #0f172a; }
.htva.htva.htva .v10-bkm-x { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0;
  background: rgba(15, 23, 42, .06); color: #0f172a; font-size: 24px; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: none; }
.htva.htva.htva .v10-bkm-x:hover, .htva.htva.htva .v10-bkm-x:focus-visible { background: rgba(249, 115, 22, .15); color: #c2410c; outline: none; }
.htva.htva.htva .v10-bkm-cal { padding: 4px 8px 8px; }
.htva.htva.htva .v10-bkm-cal iframe { display: block; width: 100%; min-height: 640px; border: 0; }
@media (prefers-color-scheme: dark) {
  .htva.htva.htva .v10-bkm-box { background: #0f1b2a; }
  .htva.htva.htva .v10-bkm-head { border-bottom-color: rgba(140, 195, 240, .14); }
  .htva.htva.htva .v10-bkm-title { color: #e9f1f8; }
  .htva.htva.htva .v10-bkm-x { background: rgba(233, 241, 248, .08); color: #e9f1f8; }
}
@media (max-width: 640px) {
  .htva.htva.htva .v10-bkm { padding: 0; place-items: end center; }
  .htva.htva.htva .v10-bkm-box { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 18px 18px 0 0; }
  .htva.htva.htva .v10-bkm-head { padding-left: 18px; }
  .htva.htva.htva .v10-bkm-cal { padding: 0; }
}


/* src/styles/htva-bookmodal-2.css */
/* src/styles/htva-bookmodal-2.css: the pop-up sits above the fixed site header; the title bar goes (GHL shows the
   call details itself) so the calendar fits a laptop screen without scrolling; the close button floats top-right. */
.htva.htva.htva .v10-bkm { z-index: 2147483000; }
.htva.htva.htva .v10-bkm-head { position: absolute; top: 10px; right: 10px; left: auto; padding: 0; border: 0; background: none; z-index: 2; }
.htva.htva.htva .v10-bkm-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.htva.htva.htva .v10-bkm-cal { padding: 0; }
.htva.htva.htva .v10-bkm-x { background: rgba(15, 23, 42, .08); }


/* src/styles/htva-bookmodal-3.css */
/* src/styles/htva-bookmodal-3.css: GHL calendar frames declare the same colour scheme as the visitor's device (what the
   calendar's own CSS follows), so Chrome doesn't paint an opaque white backdrop behind a dark calendar. Pop-up and /start. */
.htva.htva.htva .v10-bkm-cal iframe, .htva.htva.htva .start-calwrap iframe { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  .htva.htva.htva .v10-bkm-cal iframe, .htva.htva.htva .start-calwrap iframe { color-scheme: dark; }
}


/* src/styles/htva-bookmodal-4.css */
/* src/styles/htva-bookmodal-4.css: supersedes -3. GHL's page declares no color-scheme ("normal" = light); a frame whose
   color-scheme differs gets an opaque white backdrop from Chrome. Declaring light on our side always matches, so the
   GHL page stays transparent; its dark palette still follows prefers-color-scheme (the device), not this property. */
.htva.htva.htva .v10-bkm-cal iframe, .htva.htva.htva .start-calwrap iframe { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  .htva.htva.htva .v10-bkm-cal iframe, .htva.htva.htva .start-calwrap iframe { color-scheme: light; }
}


/* src/styles/htva-bookmodal-5.css */
/* src/styles/htva-bookmodal-5.css: the pop-up and the /start calendar frame follow the SITE theme (.htva[data-theme]),
   not the device. The calendar inside follows the same theme via ?theme= (htva-bookmodal-3.js + GHL custom code v2). */
.htva.htva.htva[data-theme="light"] .v10-bkm-box { background: #fff; }
.htva.htva.htva[data-theme="light"] .v10-bkm-title { color: #0f172a; }
.htva.htva.htva[data-theme="light"] .v10-bkm-x { background: rgba(15, 23, 42, .08); color: #0f172a; }
.htva.htva.htva[data-theme="dark"] .v10-bkm-box { background: #0f1b2a; }
.htva.htva.htva[data-theme="dark"] .v10-bkm-title { color: #e9f1f8; }
.htva.htva.htva[data-theme="dark"] .v10-bkm-x { background: rgba(233, 241, 248, .08); color: #e9f1f8; }
.htva.htva.htva[data-theme="light"] .start-calwrap { background: #fff; }
.htva.htva.htva[data-theme="dark"] .start-calwrap { background: #0f1b2a; }


/* src/styles/htva-bookmodal-8.css */
/* src/styles/htva-bookmodal-8.css: replaces -6/-7 (a fixed box height left dead space under a shorter frame and let
   GHL scroll inside its own frame). The box sizes to the calendar again; instead the frame never drops below the
   calendar step (~806px), so it doesn't shrink and jump while GHL loads, and the calendar never scrolls inside the
   frame. A taller step (the form) scrolls the box, with a thin brand-orange scrollbar. */
.htva.htva.htva .v10-bkm-box { scrollbar-width: thin; scrollbar-color: rgba(234, 88, 12, .55) transparent; }
.htva.htva.htva .v10-bkm-box::-webkit-scrollbar { width: 8px; }
.htva.htva.htva .v10-bkm-box::-webkit-scrollbar-track { background: transparent; }
.htva.htva.htva .v10-bkm-box::-webkit-scrollbar-thumb { background: rgba(234, 88, 12, .55); border-radius: 8px; }
.htva.htva.htva .v10-bkm-box::-webkit-scrollbar-thumb:hover { background: #ea580c; }
@media (min-width: 961px) {
  .htva.htva.htva .v10-bkm-cal iframe { min-height: 806px; }
}


/* src/styles/htva-closer9.css */

/* == HTVA closer: The Timepiece (generated from the approved artifact) == */
.tp-closer {

    --void: #0b0b0e;
    --case-hi: #23252c;
    --case-lo: #101116;
    --dial: #0a0a0d;
    --ember: #ff6a2b;
    --ember-hot: #ffc49b;
    --ember-deep: #b33a12;
    --pulse: #4d7dff;
    --pulse-ice: #bfd6ff;
    --pulse-deep: #2447c4;
    --joint-red: #ff3b30;
    --ink: #eceaf6;
    --dim: #9b9aa8;
  
}
.tp-closer {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family: var(--f-body);
  color: var(--ink);
  background: radial-gradient(90% 120% at 30% 50%, #101014 0%, var(--void) 62%);
  background-color: #0b0b0e;
  color-scheme: dark;
}
.tp-closer .tp-inner {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  max-width: 1600px;
  margin-inline: auto;
  height: clamp(600px, 45vw, 700px);
  position: relative;
}
/* ghost-button star icon (inline svg in a button does not survive the stack) */
.tp-closer .tp-btn--dark::before {
  content: "";
  width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 1080px) {
  .tp-closer .tp-inner { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; padding: 60px 0 40px; }
  .tp-closer .tp-copy, .tp-closer .tp-stage { grid-column: 1; }
  .tp-closer .tp-copy { grid-row: 2; padding: 0 8%; text-align: center; }
  .tp-closer .tp-stage { grid-row: 1; justify-self: center; margin: -30px 0 -50px; transform: scale(.7); width: 100%; max-width: 560px; }
  .tp-closer .tp-copy p { margin-inline: auto; }
  .tp-closer .tp-cta-row, .tp-closer .tp-reassure { justify-content: center; }
}
@media (max-width: 560px) {
  .tp-closer .tp-stage { transform: scale(.55); margin: -90px 0 -100px; }
}


  /* == The HTVA Timepiece — a wind-up closer. Single committed dark look. == */
  
  @property --tp-tail {
    syntax: '<angle>';
    inherits: true;
    initial-value: 32deg;
  }
  
  
  

  
  

  /* ---- ONE light plane, measured from the reference: a single 19.85deg
     line through the watch center. Ember lights its top face before the
     case, pulse the underside past it; the case shadow is baked into the
     texture around the anchor point (1060,130) = the watch center. ---- */
  .tp-beamline {
    position: absolute; left: 50%; top: 50%;
    width: 2000px; height: 400px;
    transform: translate(-1060px, -170px) rotate(19.85deg);
    transform-origin: 1060px 170px;
    background: url(/uploads/htva-closer-beam.png) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
  }

  /* ------------------------------ the watch ------------------------------ */
  .tp-stage {
    position: relative;
    grid-column: 1; grid-row: 1;
    justify-self: start;
    width: 560px; height: 560px;
    display: grid; place-items: center;
    transform: scale(.82);
  }
  .tp-watch { position: relative; width: 520px; height: 520px; }

  .tp-case {
    position: absolute; inset: 0; border-radius: 50%;
    background:
      radial-gradient(120% 120% at 32% 22%, var(--case-hi) 0%, #16171c 38%, var(--case-lo) 68%, #0c0d11 100%);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,.10),
      inset 0 -14px 30px rgba(0,0,0,.75),
      0 40px 90px rgba(0,0,0,.8);
  }
  .tp-crown {
    position: absolute; right: -13px; top: calc(50% - 17px);
    width: 22px; height: 34px; border-radius: 6px;
    background: linear-gradient(180deg, #24262d, #101116 70%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.10), 4px 6px 14px rgba(0,0,0,.6);
  }

  .tp-dial {
    position: absolute; inset: 26px; border-radius: 50%;
    background:
      radial-gradient(100% 100% at 50% 38%, #101116 0%, var(--dial) 58%, #07070a 100%);
    box-shadow:
      inset 0 3px 14px rgba(0,0,0,.9),
      inset 0 -1px 1px rgba(255,255,255,.05);
    overflow: hidden;
  }
  /* halftone face texture, lit where each arc glows */
  .tp-dial::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background-image: radial-gradient(circle, rgba(214,222,240,.75) .8px, transparent 1.15px);
    background-size: 5px 5px;
    opacity: .5;
    -webkit-mask-image:
      radial-gradient(46% 46% at 30% 66%, rgba(0,0,0,.85), transparent 72%),
      radial-gradient(42% 42% at 68% 26%, rgba(0,0,0,.55), transparent 74%),
      radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.10), transparent 90%);
            mask-image:
      radial-gradient(46% 46% at 30% 66%, rgba(0,0,0,.85), transparent 72%),
      radial-gradient(42% 42% at 68% 26%, rgba(0,0,0,.55), transparent 74%),
      radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.10), transparent 90%);
  }
  /* colour washes the glow leaves on the face */
  .tp-dial::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background:
      radial-gradient(52% 52% at 27% 68%, rgba(255,106,43,.24), transparent 70%),
      radial-gradient(46% 46% at 70% 24%, rgba(77,125,255,.13), transparent 72%);
    mix-blend-mode: screen;
  }

  /* minute track: dashed-circle ticks + a few faint numerals */
  .tp-track { position: absolute; inset: 26px; }
  .tp-track svg { width: 100%; height: 100%; display: block; }
  .tp-track text {
    font-family: var(--f-body); font-size: 11px;
    fill: rgba(214,220,238,.20);
  }

  /* ------- long-exposure trails: light dragged behind each hand tip -------
     Each trail rides at its hand's TIP radius (minute tip r=164 -> outer,
     hour tip r=116 -> inner). The white head is fixed at 215deg inside the
     element; the wrapper turns 143deg so the head sits ~2deg behind the tip;
     the element itself runs the SAME rotation keyframes as its hand.
     --tp-tail is the exposure: it stretches with speed, shrinks when slow. */
  .tp-arc { position: absolute; inset: 0; border-radius: 50%; }
  .tp-arc, .tp-arc * { pointer-events: none; }
  /* the artifact carried this 145deg as an inline style; Instatic drops inline
     style attrs, so it must live here or the trail heads ride 145deg off the tips */
  .tp-arc__wrap { position: absolute; border-radius: 50%; transform: rotate(145deg); }
  .tp-arc__wrap--pulse { inset: 84px; }
  .tp-arc__wrap--ember { inset: 115px; }
  .tp-arc__ring, .tp-arc__glow { position: absolute; inset: 0; border-radius: 50%; }

  .tp-comet--pulse .tp-arc__ring {
    background: conic-gradient(from calc(215deg - var(--tp-tail)),
      transparent 0deg,
      rgba(36,71,196,0) calc(var(--tp-tail)*.07),
      var(--pulse-deep) calc(var(--tp-tail)*.34),
      var(--pulse) calc(var(--tp-tail)*.62),
      var(--pulse-ice) calc(var(--tp-tail)*.88),
      #eaf1ff calc(var(--tp-tail)*.95),
      #fff calc(var(--tp-tail) - 1deg),
      #fff var(--tp-tail),
      transparent calc(var(--tp-tail) + 1.2deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 11.5px), #000 calc(100% - 9.5px), transparent calc(100% - 8px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 11.5px), #000 calc(100% - 9.5px), transparent calc(100% - 8px));
  }
  .tp-comet--pulse .tp-arc__glow {
    inset: -58px;
    background: conic-gradient(from calc(218deg - var(--tp-tail)*1.06),
      transparent 0deg,
      rgba(36,71,196,0) calc(var(--tp-tail)*.12),
      var(--pulse-deep) calc(var(--tp-tail)*.44),
      var(--pulse) calc(var(--tp-tail)*.72),
      var(--pulse-ice) var(--tp-tail),
      transparent calc(var(--tp-tail)*1.06 + 4deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 118px), rgba(0,0,0,.9) calc(100% - 66px), rgba(0,0,0,.4) calc(100% - 30px), transparent 100%);
            mask-image: radial-gradient(closest-side, transparent calc(100% - 118px), rgba(0,0,0,.9) calc(100% - 66px), rgba(0,0,0,.4) calc(100% - 30px), transparent 100%);
    filter: blur(13px);
    opacity: .9;
  }

  .tp-comet--ember .tp-arc__ring {
    background: conic-gradient(from calc(215deg - var(--tp-tail)),
      transparent 0deg,
      rgba(140,30,20,0) calc(var(--tp-tail)*.06),
      #8c1e14 calc(var(--tp-tail)*.3),
      var(--ember-deep) calc(var(--tp-tail)*.5),
      var(--ember) calc(var(--tp-tail)*.72),
      #ff9a52 calc(var(--tp-tail)*.87),
      var(--ember-hot) calc(var(--tp-tail)*.93),
      #fff6ec calc(var(--tp-tail)*.97),
      #fff var(--tp-tail),
      transparent calc(var(--tp-tail) + 1.4deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 12.5px), #000 calc(100% - 10px), transparent calc(100% - 8.5px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 12.5px), #000 calc(100% - 10px), transparent calc(100% - 8.5px));
  }
  /* stroke decay: mid-width layer over the last 55%, full-width at the head */
  .tp-arc__ring2, .tp-arc__ring3 { position: absolute; inset: 0; border-radius: 50%; }
  .tp-comet--pulse .tp-arc__ring2 {
    background: conic-gradient(from calc(215deg - var(--tp-tail)*.55),
      transparent 0deg,
      rgba(77,125,255,.5) calc(var(--tp-tail)*.11),
      var(--pulse) calc(var(--tp-tail)*.3),
      var(--pulse-ice) calc(var(--tp-tail)*.46),
      #fff calc(var(--tp-tail)*.55 - 1deg),
      #fff calc(var(--tp-tail)*.55),
      transparent calc(var(--tp-tail)*.55 + 1.2deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 13px), #000 calc(100% - 8px), transparent calc(100% - 6.5px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 13px), #000 calc(100% - 8px), transparent calc(100% - 6.5px));
  }
  .tp-comet--pulse .tp-arc__ring3 {
    background: conic-gradient(from calc(215deg - var(--tp-tail)*.22),
      transparent 0deg,
      rgba(191,214,255,.6) calc(var(--tp-tail)*.08),
      #fff calc(var(--tp-tail)*.22 - .6deg),
      #fff calc(var(--tp-tail)*.22),
      transparent calc(var(--tp-tail)*.22 + 1deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 16.5px), #000 calc(100% - 14px), #000 calc(100% - 7px), transparent calc(100% - 5px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 16.5px), #000 calc(100% - 14px), #000 calc(100% - 7px), transparent calc(100% - 5px));
  }
  .tp-comet--ember .tp-arc__ring2 {
    background: conic-gradient(from calc(215deg - var(--tp-tail)*.55),
      transparent 0deg,
      rgba(255,106,43,.5) calc(var(--tp-tail)*.11),
      var(--ember) calc(var(--tp-tail)*.3),
      #ff9a52 calc(var(--tp-tail)*.42),
      var(--ember-hot) calc(var(--tp-tail)*.5),
      #fff calc(var(--tp-tail)*.55 - 1deg),
      #fff calc(var(--tp-tail)*.55),
      transparent calc(var(--tp-tail)*.55 + 1.4deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 14px), #000 calc(100% - 8.5px), transparent calc(100% - 7px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 14px), #000 calc(100% - 8.5px), transparent calc(100% - 7px));
  }
  .tp-comet--ember .tp-arc__ring3 {
    background: conic-gradient(from calc(215deg - var(--tp-tail)*.22),
      transparent 0deg,
      rgba(255,196,155,.65) calc(var(--tp-tail)*.08),
      #fff calc(var(--tp-tail)*.22 - .6deg),
      #fff calc(var(--tp-tail)*.22),
      transparent calc(var(--tp-tail)*.22 + 1.2deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 17.5px), #000 calc(100% - 15px), #000 calc(100% - 7.5px), transparent calc(100% - 5.5px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 17.5px), #000 calc(100% - 15px), #000 calc(100% - 7.5px), transparent calc(100% - 5.5px));
  }
  .tp-comet--ember .tp-arc__glow {
    inset: -76px;
    background: conic-gradient(from calc(218deg - var(--tp-tail)*1.06),
      transparent 0deg,
      rgba(140,30,20,0) calc(var(--tp-tail)*.1),
      var(--ember-deep) calc(var(--tp-tail)*.42),
      var(--ember) calc(var(--tp-tail)*.72),
      var(--ember-hot) var(--tp-tail),
      transparent calc(var(--tp-tail)*1.06 + 4deg),
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 140px), rgba(0,0,0,.9) calc(100% - 82px), rgba(0,0,0,.4) calc(100% - 36px), transparent 100%);
            mask-image: radial-gradient(closest-side, transparent calc(100% - 140px), rgba(0,0,0,.9) calc(100% - 82px), rgba(0,0,0,.4) calc(100% - 36px), transparent 100%);
    filter: blur(14px);
    opacity: .95;
  }

  /* soft room bloom the ember throws outside the case, lower-left */
  .tp-roombloom {
    position: absolute; inset: -130px; border-radius: 50%;
    background: radial-gradient(46% 46% at 22% 74%, rgba(255,106,43,.26), transparent 68%);
    filter: blur(6px);
  }

  /* --------------------------- star watermark ---------------------------- */
  .tp-mark { position: absolute; inset: 0; display: grid; place-items: center; }
  .tp-mark { transform: translateY(4px); }
  .tp-mark svg { width: 206px; height: 196px; opacity: .95; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,106,43,.10)); }

  /* ---- watermark light sweep: during the SLOW drift phases (14-33 / 47-66 /
     80-100 on the master map — the whip and settle stay dark), a stroke of
     light traces the human (pulse blue on the swoosh + head dot) and the star
     (ember). pathLength=100 on the source paths; dasharray period 300 so the
     dash enters and exits without wrapping. */
  .tp-sweep {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 14 286;
    stroke-dashoffset: 14;
    opacity: 0;
    mix-blend-mode: screen;
  }
  /* per-element sweep colours, SATURATED so they never read as white:
     the human (swoosh + head dot) sweeps pulse blue, the star sweeps ember. */
  .tp-sweep--pulse {
    stroke: #5d89ff;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(77,125,255,.85)) drop-shadow(0 0 9px rgba(77,125,255,.5));
    animation: tpk-sweep 36s infinite;
  }
  .tp-sweep--dot {
    stroke: #5d89ff;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px rgba(77,125,255,.85)) drop-shadow(0 0 8px rgba(77,125,255,.45));
    animation: tpk-sweep 36s infinite;
  }
  .tp-sweep--ember {
    stroke: #ff7a35;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(255,106,43,.9)) drop-shadow(0 0 9px rgba(255,106,43,.55));
    animation: tpk-sweep-ember 36s infinite;
  }
  @keyframes tpk-sweep {
    0%, 15% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    16.5% { opacity: .95; }
    24.5% { opacity: .95; }
    26% { stroke-dashoffset: -100; opacity: 0; }
    26.05%, 48% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    49.5% { opacity: .95; }
    57.5% { opacity: .95; }
    59% { stroke-dashoffset: -100; opacity: 0; }
    59.05%, 81% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    82.5% { opacity: .95; }
    90.5% { opacity: .95; }
    92% { stroke-dashoffset: -100; opacity: 0; }
    92.05%, 100% { stroke-dashoffset: 14; opacity: 0; }
  }
  /* ember lags the pulse by ~1.2% of the loop so the two reads feel hand-made */
  @keyframes tpk-sweep-ember {
    0%, 16.2% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    17.7% { opacity: .95; }
    25.7% { opacity: .95; }
    27.2% { stroke-dashoffset: -100; opacity: 0; }
    27.25%, 49.2% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    50.7% { opacity: .95; }
    58.7% { opacity: .95; }
    60.2% { stroke-dashoffset: -100; opacity: 0; }
    60.25%, 82.2% { stroke-dashoffset: 14; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.35,.95); }
    83.7% { opacity: .95; }
    91.7% { opacity: .95; }
    93.2% { stroke-dashoffset: -100; opacity: 0; }
    93.25%, 100% { stroke-dashoffset: 14; opacity: 0; }
  }

  /* light-sweep bands across the filled marks while the stroke runs: a sheen
     clipped to each shape crosses the human in pulse blue and the star in
     ember. Static skew sits on the parent g ATTRIBUTE (a CSS transform would
     override it); CSS animates only the band rect's translate. */
  /* ONE band: both clip groups hold an IDENTICAL rect running IDENTICAL
     keyframes — a single light crosses the whole mark, reading blue over the
     human and ember over the star as it passes. */
  .tp-shine { opacity: 0; mix-blend-mode: screen; }
  .tp-shine--pulse { fill: url(#tp-shinep); animation: tpk-shine 36s infinite; }
  .tp-shine--ember { fill: url(#tp-shinee); animation: tpk-shine 36s infinite; }
  @keyframes tpk-shine {
    0%, 17% { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(.4,.1,.4,.9); }
    18% { opacity: .9; }
    22.5% { opacity: .9; }
    23.5% { transform: translateX(380px); opacity: 0; }
    23.55%, 50% { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(.4,.1,.4,.9); }
    51% { opacity: .9; }
    55.5% { opacity: .9; }
    56.5% { transform: translateX(380px); opacity: 0; }
    56.55%, 83% { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(.4,.1,.4,.9); }
    84% { opacity: .9; }
    88.5% { opacity: .9; }
    89.5% { transform: translateX(380px); opacity: 0; }
    89.55%, 100% { transform: translateX(0); opacity: 0; }
  }

  /* ------------------------------- hands --------------------------------- */
  .tp-hands { position: absolute; inset: 26px; }
  .tp-hands svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .tp-hand { transform-origin: 234px 234px; }
  .tp-hands .tp-cap { filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
  .tp-tipglow {
    filter: blur(6px); mix-blend-mode: screen;
    transform-box: fill-box; transform-origin: center;
    animation: tpk-m-glowsize 36s infinite;
  }
  .tp-tipglow-inner { filter: blur(2.5px); mix-blend-mode: screen; }

  /* light theme pierces: .htva[data-theme="light"] h2 paints a literal steel
     blue (0,2,1). The closer is single-committed-dark — re-assert its ink at
     (0,3,1) so the section never changes with the theme. */
  .htva[data-theme="light"] .tp-closer h2,
  .htva[data-theme="light"] .tp-closer h3,
  .htva[data-theme="light"] .tp-closer p { color: var(--ink); }
  .htva[data-theme="light"] .tp-closer .tp-copy p { color: var(--dim); }
  .htva[data-theme="light"] .tp-closer .tp-copy .tp-mk {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* ------------------------------ the copy ------------------------------- */
  .tp-copy { grid-column: 2; grid-row: 1; padding: 0 5% 0 2%; position: relative; z-index: 2; }
  .tp-copy h2 {
    font-family: var(--f-head);
    font-weight: 600;
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink);
  }
  .tp-copy .tp-mk {
    background: linear-gradient(100deg, var(--ember-hot), var(--ember) 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .tp-reassure {
    margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px;
    font-size: 13px; color: var(--dim); letter-spacing: .01em;
  }
  .tp-reassure span { display: inline-flex; align-items: center; gap: 7px; }
  .tp-reassure svg { width: 13px; height: 13px; flex: none; }
  .tp-copy p {
    margin-top: 22px;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--dim);
  }
  .tp-cta-row { margin-top: 34px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .tp-btn {
    font-family: var(--f-head);
    font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    border-radius: 999px;
    padding: 15px 28px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    transition: transform 140ms cubic-bezier(.23,1,.32,1), box-shadow 140ms cubic-bezier(.23,1,.32,1);
  }
  .tp-btn:active { transform: translateY(1px) scale(.985); }
  .tp-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
  .tp-btn--lit {
    position: relative;
    color: #56260c;
    background: radial-gradient(130% 160% at 78% 30%, #fff 30%, #ffd9b8 72%, #ffb277 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 10px 44px rgba(255,106,43,.42),
      0 2px 14px rgba(255,140,64,.5);
  }
  .tp-btn--lit:hover { box-shadow:
      0 0 0 1px rgba(255,255,255,.2),
      0 12px 58px rgba(255,120,50,.6),
      0 2px 18px rgba(255,150,70,.65); }
  .tp-btn--dark {
    color: var(--ink);
    background: rgba(20,21,26,.6);
    box-shadow: inset 0 0 0 1px rgba(214,220,238,.16);
  }
  .tp-btn--dark:hover { box-shadow: inset 0 0 0 1px rgba(214,220,238,.34); }
  .tp-btn--dark svg { width: 15px; height: 14px; }

  /* ============================ CHOREOGRAPHY ==============================
     One 36s seamless loop, ONE master timing map shared by every moving part
     (identical keyframe percents + easings), three wind-up -> stop cycles,
     each settling at a different pose. Net rotation per loop = n x 360.
       windup   0-6    33-39   66-72     accelerate together
       settle   6-14   39-47   72-80     ease home together
       hold     14-33  47-66   80-100    stopped (second hand keeps sweeping) */
  .tp-arc--pulse { animation: tpk-m-minute 36s infinite, tpk-m-exposure 36s infinite; }
  .tp-arc--ember { animation: tpk-m-hour 36s infinite, tpk-m-exposure-slow 36s infinite; }
  .tp-hand--minute { animation: tpk-m-minute 36s infinite; }
  .tp-hand--hour   { animation: tpk-m-hour 36s infinite; }
  .tp-hand--second { animation: tpk-m-second 36s infinite; }
  .tp-arc__glow    { animation: tpk-m-breathe 36s infinite; }
  .tp-roombloom    { animation: tpk-m-breathe 36s infinite; }

  /* hands carry their BASE pose inside the keyframes. Nothing ever fully
     stops: the old holds are now slow drifts (linear), so the motion reads
     slow -> whip -> settle -> slow. Totals stay exact multiples of 360. */
  @keyframes tpk-m-minute {
    0% { transform: rotate(64deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    14% { transform: rotate(1204deg); animation-timing-function: linear; }
    33% { transform: rotate(1264deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    47% { transform: rotate(2404deg); animation-timing-function: linear; }
    67% { transform: rotate(2464deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    81% { transform: rotate(3604deg); animation-timing-function: linear; }
    100% { transform: rotate(3664deg); }
  }
  @keyframes tpk-m-hour {
    0% { transform: rotate(-55deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    14% { transform: rotate(645deg); animation-timing-function: linear; }
    33% { transform: rotate(665deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    47% { transform: rotate(1365deg); animation-timing-function: linear; }
    67% { transform: rotate(1385deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    81% { transform: rotate(2085deg); animation-timing-function: linear; }
    100% { transform: rotate(2105deg); }
  }
  @keyframes tpk-m-second {
    0% { transform: rotate(148deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    14% { transform: rotate(1584deg); animation-timing-function: linear; }
    33% { transform: rotate(1824deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    47% { transform: rotate(3260deg); animation-timing-function: linear; }
    67% { transform: rotate(3512deg); animation-timing-function: cubic-bezier(.6,.03,.5,.97); }
    81% { transform: rotate(4948deg); animation-timing-function: linear; }
    100% { transform: rotate(5188deg); }
  }
  /* long-exposure: more movement = longer light line */
  @keyframes tpk-m-exposure {
    0% { --tp-tail: 10deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    10% { --tp-tail: 354deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    14% { --tp-tail: 80deg; animation-timing-function: linear; }
    33% { --tp-tail: 10deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    43% { --tp-tail: 354deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    47% { --tp-tail: 80deg; animation-timing-function: linear; }
    67% { --tp-tail: 10deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    77% { --tp-tail: 354deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    81% { --tp-tail: 80deg; animation-timing-function: linear; }
    100% { --tp-tail: 10deg; }
  }
  @keyframes tpk-m-exposure-slow {
    0% { --tp-tail: 8deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    10% { --tp-tail: 336deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    14% { --tp-tail: 70deg; animation-timing-function: linear; }
    33% { --tp-tail: 8deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    43% { --tp-tail: 336deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    47% { --tp-tail: 70deg; animation-timing-function: linear; }
    67% { --tp-tail: 8deg; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    77% { --tp-tail: 336deg; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    81% { --tp-tail: 70deg; animation-timing-function: linear; }
    100% { --tp-tail: 8deg; }
  }
  @keyframes tpk-m-glowsize {
    0% { transform: scale(.6); opacity: .7; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    10% { transform: scale(1.75); opacity: 1; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    14% { transform: scale(1); opacity: .85; animation-timing-function: linear; }
    33% { transform: scale(.6); opacity: .7; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    43% { transform: scale(1.75); opacity: 1; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    47% { transform: scale(1); opacity: .85; animation-timing-function: linear; }
    67% { transform: scale(.6); opacity: .7; animation-timing-function: cubic-bezier(.5,.05,.6,.5); }
    77% { transform: scale(1.75); opacity: 1; animation-timing-function: cubic-bezier(.35,.4,.45,.95); }
    81% { transform: scale(1); opacity: .85; animation-timing-function: linear; }
    100% { transform: scale(.6); opacity: .7; }
  }
  @keyframes tpk-m-breathe {
    0% { opacity: .82; } 10% { opacity: 1; } 14% { opacity: .88; }
    33% { opacity: .82; } 43% { opacity: 1; } 47% { opacity: .88; }
    67% { opacity: .82; } 77% { opacity: 1; } 81% { opacity: .88; }
    100% { opacity: .82; }
  }

  /* phosphor numerals: flash as the minute hand sweeps past, then decay */
  @keyframes tpk-phos-1 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    5.83% { fill: rgba(214,220,238,.20); filter: none; }
    5.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    7.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.9399999999999995% { fill: rgba(214,220,238,.20); filter: none; }
    8.04% { fill: rgba(214,220,238,.20); filter: none; }
    8.19% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.39% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    10.87% { fill: rgba(214,220,238,.20); filter: none; }
    10.97% { fill: rgba(214,220,238,.20); filter: none; }
    11.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    12.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    16.62% { fill: rgba(214,220,238,.20); filter: none; }
    37.79% { fill: rgba(214,220,238,.20); filter: none; }
    37.94% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    39.14% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.25% { fill: rgba(214,220,238,.20); filter: none; }
    40.35% { fill: rgba(214,220,238,.20); filter: none; }
    40.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    41.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    42.56% { fill: rgba(214,220,238,.20); filter: none; }
    42.66% { fill: rgba(214,220,238,.20); filter: none; }
    42.81% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    44.01% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    48.31% { fill: rgba(214,220,238,.20); filter: none; }
    70.18% { fill: rgba(214,220,238,.20); filter: none; }
    70.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    71.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    73.54% { fill: rgba(214,220,238,.20); filter: none; }
    73.64% { fill: rgba(214,220,238,.20); filter: none; }
    73.79% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    74.99% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    75.67% { fill: rgba(214,220,238,.20); filter: none; }
    75.77% { fill: rgba(214,220,238,.20); filter: none; }
    75.92% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    77.12% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    81.42% { fill: rgba(214,220,238,.20); filter: none; }
    89.08% { fill: rgba(214,220,238,.20); filter: none; }
    89.23% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    90.43% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    94.73% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn1 { animation: tpk-phos-1 36s infinite; }
  @keyframes tpk-phos-2 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    6.05% { fill: rgba(214,220,238,.20); filter: none; }
    6.2% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    7.4% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    8.11% { fill: rgba(214,220,238,.20); filter: none; }
    8.21% { fill: rgba(214,220,238,.20); filter: none; }
    8.36% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.56% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    11.36% { fill: rgba(214,220,238,.20); filter: none; }
    11.46% { fill: rgba(214,220,238,.20); filter: none; }
    11.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    12.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    17.11% { fill: rgba(214,220,238,.20); filter: none; }
    38.08% { fill: rgba(214,220,238,.20); filter: none; }
    38.23% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    39.43% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.42% { fill: rgba(214,220,238,.20); filter: none; }
    40.52% { fill: rgba(214,220,238,.20); filter: none; }
    40.67% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    41.87% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    42.83% { fill: rgba(214,220,238,.20); filter: none; }
    42.93% { fill: rgba(214,220,238,.20); filter: none; }
    43.08% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    44.28% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    48.58% { fill: rgba(214,220,238,.20); filter: none; }
    70.68% { fill: rgba(214,220,238,.20); filter: none; }
    70.83% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    72.03% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    73.73% { fill: rgba(214,220,238,.20); filter: none; }
    73.83% { fill: rgba(214,220,238,.20); filter: none; }
    73.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    75.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    75.87% { fill: rgba(214,220,238,.20); filter: none; }
    75.97% { fill: rgba(214,220,238,.20); filter: none; }
    76.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    77.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    81.62% { fill: rgba(214,220,238,.20); filter: none; }
    98.58% { fill: rgba(214,220,238,.20); filter: none; }
    98.73% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    99.55% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn2 { animation: tpk-phos-2 36s infinite; }
  @keyframes tpk-phos-3 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    1.65% { fill: rgba(214,220,238,.20); filter: none; }
    1.8% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    3.0% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    6.16% { fill: rgba(214,220,238,.20); filter: none; }
    6.26% { fill: rgba(214,220,238,.20); filter: none; }
    6.41% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    7.61% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    8.29% { fill: rgba(214,220,238,.20); filter: none; }
    8.39% { fill: rgba(214,220,238,.20); filter: none; }
    8.54% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.74% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    12.03% { fill: rgba(214,220,238,.20); filter: none; }
    12.13% { fill: rgba(214,220,238,.20); filter: none; }
    12.28% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    13.48% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    17.78% { fill: rgba(214,220,238,.20); filter: none; }
    38.35% { fill: rgba(214,220,238,.20); filter: none; }
    38.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    39.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.59% { fill: rgba(214,220,238,.20); filter: none; }
    40.69% { fill: rgba(214,220,238,.20); filter: none; }
    40.84% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.04% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    43.13% { fill: rgba(214,220,238,.20); filter: none; }
    43.23% { fill: rgba(214,220,238,.20); filter: none; }
    43.38% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    44.58% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    48.88% { fill: rgba(214,220,238,.20); filter: none; }
    71.1% { fill: rgba(214,220,238,.20); filter: none; }
    71.25% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    72.45% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    73.91% { fill: rgba(214,220,238,.20); filter: none; }
    74.01% { fill: rgba(214,220,238,.20); filter: none; }
    74.16% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    75.36% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    76.09% { fill: rgba(214,220,238,.20); filter: none; }
    76.19% { fill: rgba(214,220,238,.20); filter: none; }
    76.34% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    77.54% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    81.84% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn3 { animation: tpk-phos-3 36s infinite; }
  @keyframes tpk-phos-4 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    2.54% { fill: rgba(214,220,238,.20); filter: none; }
    2.69% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    3.89% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    6.36% { fill: rgba(214,220,238,.20); filter: none; }
    6.46% { fill: rgba(214,220,238,.20); filter: none; }
    6.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    7.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    8.48% { fill: rgba(214,220,238,.20); filter: none; }
    8.58% { fill: rgba(214,220,238,.20); filter: none; }
    8.73% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.93% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    13.28% { fill: rgba(214,220,238,.20); filter: none; }
    13.38% { fill: rgba(214,220,238,.20); filter: none; }
    13.53% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    14.73% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    19.03% { fill: rgba(214,220,238,.20); filter: none; }
    38.6% { fill: rgba(214,220,238,.20); filter: none; }
    38.75% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    39.95% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.77% { fill: rgba(214,220,238,.20); filter: none; }
    40.87% { fill: rgba(214,220,238,.20); filter: none; }
    41.02% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.22% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    43.47% { fill: rgba(214,220,238,.20); filter: none; }
    43.57% { fill: rgba(214,220,238,.20); filter: none; }
    43.72% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    44.92% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    49.22% { fill: rgba(214,220,238,.20); filter: none; }
    71.47% { fill: rgba(214,220,238,.20); filter: none; }
    71.62% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    72.82% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.08% { fill: rgba(214,220,238,.20); filter: none; }
    74.18% { fill: rgba(214,220,238,.20); filter: none; }
    74.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    75.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    76.31% { fill: rgba(214,220,238,.20); filter: none; }
    76.41% { fill: rgba(214,220,238,.20); filter: none; }
    76.56% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    77.76% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    82.06% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn4 { animation: tpk-phos-4 36s infinite; }
  @keyframes tpk-phos-5 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    3.18% { fill: rgba(214,220,238,.20); filter: none; }
    3.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    4.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    6.54% { fill: rgba(214,220,238,.20); filter: none; }
    6.64% { fill: rgba(214,220,238,.20); filter: none; }
    6.79% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    7.99% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    8.67% { fill: rgba(214,220,238,.20); filter: none; }
    8.77% { fill: rgba(214,220,238,.20); filter: none; }
    8.92% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    10.12% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    14.42% { fill: rgba(214,220,238,.20); filter: none; }
    22.08% { fill: rgba(214,220,238,.20); filter: none; }
    22.23% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    23.43% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    27.73% { fill: rgba(214,220,238,.20); filter: none; }
    38.83% { fill: rgba(214,220,238,.20); filter: none; }
    38.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    40.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.94% { fill: rgba(214,220,238,.20); filter: none; }
    41.04% { fill: rgba(214,220,238,.20); filter: none; }
    41.19% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.39% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    43.87% { fill: rgba(214,220,238,.20); filter: none; }
    43.97% { fill: rgba(214,220,238,.20); filter: none; }
    44.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    45.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    49.62% { fill: rgba(214,220,238,.20); filter: none; }
    71.79% { fill: rgba(214,220,238,.20); filter: none; }
    71.94% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    73.14% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.25% { fill: rgba(214,220,238,.20); filter: none; }
    74.35% { fill: rgba(214,220,238,.20); filter: none; }
    74.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    75.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    76.56% { fill: rgba(214,220,238,.20); filter: none; }
    76.66% { fill: rgba(214,220,238,.20); filter: none; }
    76.81% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    78.01% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    82.31% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn5 { animation: tpk-phos-5 36s infinite; }
  @keyframes tpk-phos-6 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    3.68% { fill: rgba(214,220,238,.20); filter: none; }
    3.83% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    5.03% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    6.73% { fill: rgba(214,220,238,.20); filter: none; }
    6.83% { fill: rgba(214,220,238,.20); filter: none; }
    6.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    8.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    8.87% { fill: rgba(214,220,238,.20); filter: none; }
    8.97% { fill: rgba(214,220,238,.20); filter: none; }
    9.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    10.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    14.62% { fill: rgba(214,220,238,.20); filter: none; }
    31.58% { fill: rgba(214,220,238,.20); filter: none; }
    31.73% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    32.93% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    37.23% { fill: rgba(214,220,238,.20); filter: none; }
    39.05% { fill: rgba(214,220,238,.20); filter: none; }
    39.2% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    40.4% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    41.11% { fill: rgba(214,220,238,.20); filter: none; }
    41.21% { fill: rgba(214,220,238,.20); filter: none; }
    41.36% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.56% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    44.36% { fill: rgba(214,220,238,.20); filter: none; }
    44.46% { fill: rgba(214,220,238,.20); filter: none; }
    44.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    45.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    50.11% { fill: rgba(214,220,238,.20); filter: none; }
    72.08% { fill: rgba(214,220,238,.20); filter: none; }
    72.23% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    73.43% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.42% { fill: rgba(214,220,238,.20); filter: none; }
    74.52% { fill: rgba(214,220,238,.20); filter: none; }
    74.67% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    75.87% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    76.83% { fill: rgba(214,220,238,.20); filter: none; }
    76.93% { fill: rgba(214,220,238,.20); filter: none; }
    77.08% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    78.28% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    82.58% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn6 { animation: tpk-phos-6 36s infinite; }
  @keyframes tpk-phos-7 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    4.1% { fill: rgba(214,220,238,.20); filter: none; }
    4.25% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    5.45% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    6.91% { fill: rgba(214,220,238,.20); filter: none; }
    7.01% { fill: rgba(214,220,238,.20); filter: none; }
    7.16% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    8.36% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    9.09% { fill: rgba(214,220,238,.20); filter: none; }
    9.19% { fill: rgba(214,220,238,.20); filter: none; }
    9.34% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    10.54% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    14.84% { fill: rgba(214,220,238,.20); filter: none; }
    34.65% { fill: rgba(214,220,238,.20); filter: none; }
    34.8% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    36.0% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    39.16% { fill: rgba(214,220,238,.20); filter: none; }
    39.26% { fill: rgba(214,220,238,.20); filter: none; }
    39.41% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    40.61% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    41.29% { fill: rgba(214,220,238,.20); filter: none; }
    41.39% { fill: rgba(214,220,238,.20); filter: none; }
    41.54% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.74% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    45.03% { fill: rgba(214,220,238,.20); filter: none; }
    45.13% { fill: rgba(214,220,238,.20); filter: none; }
    45.28% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    46.48% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    50.78% { fill: rgba(214,220,238,.20); filter: none; }
    72.35% { fill: rgba(214,220,238,.20); filter: none; }
    72.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    73.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.59% { fill: rgba(214,220,238,.20); filter: none; }
    74.69% { fill: rgba(214,220,238,.20); filter: none; }
    74.84% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.04% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    77.13% { fill: rgba(214,220,238,.20); filter: none; }
    77.23% { fill: rgba(214,220,238,.20); filter: none; }
    77.38% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    78.58% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    82.88% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn7 { animation: tpk-phos-7 36s infinite; }
  @keyframes tpk-phos-8 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    4.47% { fill: rgba(214,220,238,.20); filter: none; }
    4.62% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    5.82% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.08% { fill: rgba(214,220,238,.20); filter: none; }
    7.18% { fill: rgba(214,220,238,.20); filter: none; }
    7.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    8.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    9.31% { fill: rgba(214,220,238,.20); filter: none; }
    9.41% { fill: rgba(214,220,238,.20); filter: none; }
    9.56% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    10.76% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    15.06% { fill: rgba(214,220,238,.20); filter: none; }
    35.54% { fill: rgba(214,220,238,.20); filter: none; }
    35.69% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    36.89% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    39.36% { fill: rgba(214,220,238,.20); filter: none; }
    39.46% { fill: rgba(214,220,238,.20); filter: none; }
    39.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    40.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    41.48% { fill: rgba(214,220,238,.20); filter: none; }
    41.58% { fill: rgba(214,220,238,.20); filter: none; }
    41.73% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    42.93% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    46.28% { fill: rgba(214,220,238,.20); filter: none; }
    46.38% { fill: rgba(214,220,238,.20); filter: none; }
    46.53% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    47.73% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    52.03% { fill: rgba(214,220,238,.20); filter: none; }
    72.6% { fill: rgba(214,220,238,.20); filter: none; }
    72.75% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    73.95% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.77% { fill: rgba(214,220,238,.20); filter: none; }
    74.87% { fill: rgba(214,220,238,.20); filter: none; }
    75.02% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.22% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    77.47% { fill: rgba(214,220,238,.20); filter: none; }
    77.57% { fill: rgba(214,220,238,.20); filter: none; }
    77.72% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    78.92% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    83.22% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn8 { animation: tpk-phos-8 36s infinite; }
  @keyframes tpk-phos-9 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    4.79% { fill: rgba(214,220,238,.20); filter: none; }
    4.94% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    6.14% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.25% { fill: rgba(214,220,238,.20); filter: none; }
    7.35% { fill: rgba(214,220,238,.20); filter: none; }
    7.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    8.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    9.56% { fill: rgba(214,220,238,.20); filter: none; }
    9.66% { fill: rgba(214,220,238,.20); filter: none; }
    9.81% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    11.01% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    15.31% { fill: rgba(214,220,238,.20); filter: none; }
    36.18% { fill: rgba(214,220,238,.20); filter: none; }
    36.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    37.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    39.54% { fill: rgba(214,220,238,.20); filter: none; }
    39.64% { fill: rgba(214,220,238,.20); filter: none; }
    39.79% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    40.99% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    41.67% { fill: rgba(214,220,238,.20); filter: none; }
    41.77% { fill: rgba(214,220,238,.20); filter: none; }
    41.92% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    43.12% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    47.42% { fill: rgba(214,220,238,.20); filter: none; }
    55.52% { fill: rgba(214,220,238,.20); filter: none; }
    55.67% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    56.87% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    61.17% { fill: rgba(214,220,238,.20); filter: none; }
    72.83% { fill: rgba(214,220,238,.20); filter: none; }
    72.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    74.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    74.94% { fill: rgba(214,220,238,.20); filter: none; }
    75.04% { fill: rgba(214,220,238,.20); filter: none; }
    75.19% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.39% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    77.87% { fill: rgba(214,220,238,.20); filter: none; }
    77.97% { fill: rgba(214,220,238,.20); filter: none; }
    78.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    79.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    83.62% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn9 { animation: tpk-phos-9 36s infinite; }
  @keyframes tpk-phos-10 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    5.08% { fill: rgba(214,220,238,.20); filter: none; }
    5.23% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    6.43% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.42% { fill: rgba(214,220,238,.20); filter: none; }
    7.52% { fill: rgba(214,220,238,.20); filter: none; }
    7.67% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    8.87% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    9.83% { fill: rgba(214,220,238,.20); filter: none; }
    9.93% { fill: rgba(214,220,238,.20); filter: none; }
    10.08% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    11.28% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    15.58% { fill: rgba(214,220,238,.20); filter: none; }
    36.68% { fill: rgba(214,220,238,.20); filter: none; }
    36.83% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    38.03% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    39.73% { fill: rgba(214,220,238,.20); filter: none; }
    39.83% { fill: rgba(214,220,238,.20); filter: none; }
    39.98% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    41.18% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    41.87% { fill: rgba(214,220,238,.20); filter: none; }
    41.97% { fill: rgba(214,220,238,.20); filter: none; }
    42.12% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    43.32% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    47.62% { fill: rgba(214,220,238,.20); filter: none; }
    65.52% { fill: rgba(214,220,238,.20); filter: none; }
    65.67% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    66.87% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    71.17% { fill: rgba(214,220,238,.20); filter: none; }
    73.05% { fill: rgba(214,220,238,.20); filter: none; }
    73.2% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    74.4% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    75.11% { fill: rgba(214,220,238,.20); filter: none; }
    75.21% { fill: rgba(214,220,238,.20); filter: none; }
    75.36% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.56% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    78.36% { fill: rgba(214,220,238,.20); filter: none; }
    78.46% { fill: rgba(214,220,238,.20); filter: none; }
    78.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    79.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    84.11% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn10 { animation: tpk-phos-10 36s infinite; }
  @keyframes tpk-phos-11 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    5.35% { fill: rgba(214,220,238,.20); filter: none; }
    5.5% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    6.7% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.59% { fill: rgba(214,220,238,.20); filter: none; }
    7.69% { fill: rgba(214,220,238,.20); filter: none; }
    7.84% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.04% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    10.13% { fill: rgba(214,220,238,.20); filter: none; }
    10.23% { fill: rgba(214,220,238,.20); filter: none; }
    10.38% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    11.58% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    15.88% { fill: rgba(214,220,238,.20); filter: none; }
    37.1% { fill: rgba(214,220,238,.20); filter: none; }
    37.25% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    38.45% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    39.91% { fill: rgba(214,220,238,.20); filter: none; }
    40.01% { fill: rgba(214,220,238,.20); filter: none; }
    40.16% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    41.36% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    42.09% { fill: rgba(214,220,238,.20); filter: none; }
    42.19% { fill: rgba(214,220,238,.20); filter: none; }
    42.34% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    43.54% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    47.84% { fill: rgba(214,220,238,.20); filter: none; }
    68.65% { fill: rgba(214,220,238,.20); filter: none; }
    68.8% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    70.0% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    73.16% { fill: rgba(214,220,238,.20); filter: none; }
    73.26% { fill: rgba(214,220,238,.20); filter: none; }
    73.41% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    74.61% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    75.29% { fill: rgba(214,220,238,.20); filter: none; }
    75.39% { fill: rgba(214,220,238,.20); filter: none; }
    75.54% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.74% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    79.03% { fill: rgba(214,220,238,.20); filter: none; }
    79.13% { fill: rgba(214,220,238,.20); filter: none; }
    79.28% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    80.48% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    84.78% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn11 { animation: tpk-phos-11 36s infinite; }
  @keyframes tpk-phos-12 {
    0% { fill: rgba(214,220,238,.20); filter: none; }
    5.6% { fill: rgba(214,220,238,.20); filter: none; }
    5.75% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    6.95% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    7.77% { fill: rgba(214,220,238,.20); filter: none; }
    7.87% { fill: rgba(214,220,238,.20); filter: none; }
    8.02% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    9.22% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    10.47% { fill: rgba(214,220,238,.20); filter: none; }
    10.57% { fill: rgba(214,220,238,.20); filter: none; }
    10.72% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    11.92% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    16.22% { fill: rgba(214,220,238,.20); filter: none; }
    37.47% { fill: rgba(214,220,238,.20); filter: none; }
    37.62% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    38.82% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    40.08% { fill: rgba(214,220,238,.20); filter: none; }
    40.18% { fill: rgba(214,220,238,.20); filter: none; }
    40.33% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    41.53% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    42.31% { fill: rgba(214,220,238,.20); filter: none; }
    42.41% { fill: rgba(214,220,238,.20); filter: none; }
    42.56% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    43.76% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    48.06% { fill: rgba(214,220,238,.20); filter: none; }
    69.54% { fill: rgba(214,220,238,.20); filter: none; }
    69.69% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    70.89% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    73.36% { fill: rgba(214,220,238,.20); filter: none; }
    73.46% { fill: rgba(214,220,238,.20); filter: none; }
    73.61% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    74.81% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    75.48% { fill: rgba(214,220,238,.20); filter: none; }
    75.58% { fill: rgba(214,220,238,.20); filter: none; }
    75.73% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    76.93% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    80.28% { fill: rgba(214,220,238,.20); filter: none; }
    80.38% { fill: rgba(214,220,238,.20); filter: none; }
    80.53% { fill: #eaf3ff; filter: drop-shadow(0 0 6px rgba(140,180,255,.9)) drop-shadow(0 0 14px rgba(90,140,255,.5)); animation-timing-function: cubic-bezier(.2,.6,.45,1); }
    81.73% { fill: rgba(190,216,255,.6); filter: drop-shadow(0 0 4px rgba(120,160,255,.35)); animation-timing-function: cubic-bezier(.3,.6,.6,1); }
    86.03% { fill: rgba(214,220,238,.20); filter: none; }
    100% { fill: rgba(214,220,238,.20); filter: none; }
  }
  .tp-tn12 { animation: tpk-phos-12 36s infinite; }
  @media (prefers-reduced-motion: reduce) {
    .tp-arc--pulse, .tp-arc--ember, .tp-hand--minute, .tp-hand--hour, .tp-hand--second,
    .tp-arc__glow, .tp-roombloom, .tp-tipglow, .tp-track text { animation: none; }
  }

  /* ------------------------------ responsive ----------------------------- */
  
  

/* button color: outrank .htva a { color: inherit } (0,1,1) */
.tp-closer a.tp-btn--lit, .tp-closer a.tp-btn--lit:hover { color: #56260c; }
.tp-closer a.tp-btn--dark, .tp-closer a.tp-btn--dark:hover { color: var(--ink); }



/* src/styles/htva-dotpack1.css */
/* ========= HTVA dot pack v1: orange/blue dotted style carry-over =========
   REVERSIBLE: this whole pack lives in this ONE style asset. To roll back,
   run apply-dotpack-revert.js (removes the asset) and publish.
   1 Draftboard LED meters   2 CTA band halftone glow   3 Stat LED strips
   4 Process dotted signal   5 Roles tile hover matrix  6 Testimonial grain
   7 Virtual-floor viewfinder brackets */

/* -- 1. draftboard: score bars read as LED meters (dimmed base, lit pixels) -- */
.htva .dim .bar i {
  background:
    radial-gradient(circle at 2.5px 50%, var(--accent-ink) 1.05px, transparent 1.45px) 0 0 / 5px 100% repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 34%, transparent), color-mix(in srgb, var(--accent) 34%, transparent));
}

/* -- 2. CTA band: the last smooth glow on the page becomes halftone,
      with a faint warm flank low-left for the second colour -- */
.htva .cta__glow::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, var(--accent-ink) .6px, transparent .9px) 0 0 / 3.6px 3.6px;
  -webkit-mask-image: radial-gradient(50% 55% at 50% 50%, rgba(0,0,0,.85), transparent 66%);
          mask-image: radial-gradient(50% 55% at 50% 50%, rgba(0,0,0,.85), transparent 66%);
  opacity: .38;
}
.htva .cta__glow::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, #ff8a45 .6px, transparent .9px) 1.8px 1.8px / 3.6px 3.6px;
  -webkit-mask-image: radial-gradient(34% 42% at 22% 64%, rgba(0,0,0,.7), transparent 70%);
          mask-image: radial-gradient(34% 42% at 22% 64%, rgba(0,0,0,.7), transparent 70%);
  opacity: .28;
}

/* -- 3. hero stat counters: an LED strip lights left-to-right with the
      count-up (.tstat gains .on when it reveals); the rejection stat is warm -- */
.htva .tstat b::after {
  content: ""; display: block; height: 4px; width: 64px; margin-top: 7px;
  background: radial-gradient(circle at 2px 50%, var(--accent) 1.1px, transparent 1.5px) 0 0 / 6px 100% repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.22,1,.36,1) .6s;
}
.htva .tstat.on b::after { clip-path: inset(0 0 0 0); }
.htva .tstat .tstat-i:nth-child(2) b::after { transition-delay: .85s; }
.htva .tstat .tstat-i:nth-child(3) b::after {
  background: radial-gradient(circle at 2px 50%, #fb923c 1.1px, transparent 1.5px) 0 0 / 6px 100% repeat-x;
  transition-delay: 1.1s;
}

/* -- 4. process: the solid step tick continues as a dotted signal path;
      each "// Day" stamp gets a warm live dot -- */
.htva .step::after {
  content: ""; position: absolute; top: -1px; left: 56px; right: 0; height: 2px;
  background: radial-gradient(circle at 2px 50%, var(--accent) .9px, transparent 1.25px) 0 0 / 7px 100% repeat-x;
  opacity: .45;
}
.htva .step .when::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warm); box-shadow: 0 0 6px rgba(249,115,22,.8);
  margin-right: 7px; vertical-align: 1px;
}

/* -- 5. roles: a tile hover lights a faint matrix from the top edge,
      count chip warms up -- */
.htva .tile { position: relative; }
.htva .tile::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  background: radial-gradient(circle, var(--accent) .55px, transparent .8px) 0 0 / 3px 3px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000, transparent 78%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.htva .tile:hover::after { opacity: .22; }
.htva .tile:hover .cnt { color: #fb923c; background: color-mix(in srgb, #fb923c 14%, transparent); }

/* -- 6. testimonial cards: same faint grain family as the map cards,
      rising from the lower-right corner -- */
.htva .vcard { position: relative; }
.htva .vcard::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  background: radial-gradient(circle, var(--accent) .5px, transparent .75px) 0 0 / 3px 3px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000, transparent 70%);
          mask-image: radial-gradient(120% 120% at 100% 100%, #000, transparent 70%);
  opacity: .14; pointer-events: none;
}

/* -- 7. virtual floor: viewfinder corner brackets around the video frame
      + a warm rec dot -- */
.htva .vf3-vidw::before {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 2px 18px,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 18px 2px,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 18px;
  background-repeat: no-repeat;
  opacity: .55;
}
.htva .vf3-vidw::after {
  content: ""; position: absolute; top: -24px; right: 2px; width: 6px; height: 6px;
  border-radius: 50%; background: #fb923c;
  box-shadow: 0 0 8px rgba(249,115,22,.9);
}


/* src/styles/htva-hero-copy-1.css */
/* src/styles/htva-hero-copy-1.css: homepage hero headline sized for the 12-word CEO copy (2026-10-15) */
.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: clamp(34px, 3.4vw, 54px); line-height: 1.04; }
@media (max-width: 375px) { .htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: 30px; } }


/* src/styles/htva-hero-copy-2.css */
/* src/styles/htva-hero-copy-2.css: homepage hero, two-size headline (2026-10-15).
   "Hire vetted, trained" is one lede span on its own line; "and" / "all" are small connectors, so
   "virtual assistants", "Digital Employees" and "managed for you" carry the size. max-width in em keeps
   the four lines the same at every desktop width. Lead drops 20px -> 17px over a wider measure. */
.htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: clamp(36px, 3.3vw, 54px); line-height: 1.04; max-width: 10.4em; }
.htva.htva.htva.htva .sec.hero .hero-title .hl-lede { display: block; font-size: .56em; line-height: 1.2; margin-bottom: .14em; }
.htva.htva.htva.htva .sec.hero .hero-title .hl-sm { font-size: .56em; }
.htva.htva.htva.htva .sec.hero .hero__grid .lead { font-size: 17px; line-height: 1.6; max-width: 470px; }
@media (max-width: 375px) { .htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: 32px; } }


/* src/styles/htva-hero-copy-3.css */
/* src/styles/htva-hero-copy-3.css: hero headline, one size + an orange sub-line (2026-10-15).
   Supersedes htva-hero-copy-2.css (two sizes, rejected) and fixes htva-hero-de-1.css: `scale` on the
   pill's <g> also scaled its translate(), pushing it ~150px right of the text column; the scale now
   sits on the inner link, so talentmap's placeAI() centring over the headline holds. */
.htva.htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: clamp(32px, 2.9vw, 48px); line-height: 1.08; max-width: none; }
.htva.htva.htva.htva.htva .sec.hero .hero-title .hl-sub { display: block; margin-top: .5em; font-size: .54em; line-height: 1.2; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fdba74, #fb923c 45%, #f97316); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(249, 115, 22, .35)); }
.htva.htva.htva .twn--ai { scale: none; }
.htva.htva.htva .twn--ai .tai-link { scale: 1.2; transform-box: fill-box; transform-origin: center; }
@media (max-width: 375px) { .htva.htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: 30px; } }


/* src/styles/htva-hero-copy-4.css */
/* src/styles/htva-hero-copy-4.css: "Hire trained Virtual Assistants" on one line (desktop), then
   "& Digital Employees" with a small orange ampersand (2026-10-15). Line 1 is wider than the copy
   column, so it is allowed to run past it over the map; min-width:0 stops the nowrap line from
   widening the grid track (which would drag the kicker, lead and the DE pill with it). */
.htva.htva.htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: clamp(32px, 2.9vw, 50px); max-width: none; }
.htva.htva.htva .sec.hero .hero__grid > div { min-width: 0; }
@media (min-width: 900px) { .htva.htva.htva .sec.hero .hero-title .hl-l1 { display: block; white-space: nowrap; } }
.htva.htva.htva .sec.hero .hero-title .hl-amp { font-size: .6em; color: #fb923c; margin-right: .08em; vertical-align: .12em; }


/* src/styles/htva-hero-copy-5.css */
/* src/styles/htva-hero-copy-5.css: three headline lines at every width (2026-10-15):
   "Hire trained" / "Virtual Assistants" / "& Digital Employees". The longest line is the third, so the
   size is set to fit it inside the copy column; nothing runs over the map any more. */
.htva.htva.htva.htva.htva.htva.htva .sec.hero .hero__grid .hero-title { font-size: clamp(32px, 2.9vw, 52px); line-height: 1.06; }
.htva.htva.htva.htva .sec.hero .hero-title .hl-l1,
.htva.htva.htva.htva .sec.hero .hero-title .hl-l2 { display: block; white-space: nowrap; }


/* src/styles/htva-hero-copy-6.css */
/* src/styles/htva-hero-copy-6.css: the ampersand as a connector (2026-10-15, owner). "Digital Employees"
   lines up under "Virtual Assistants", and the small orange "&" hangs in the left margin between the
   two lines. Absolute with auto offsets keeps its static spot at the start of line 3; the negative
   margins lift it half a line and move it into the gutter (~0.65em of the headline: fits the 24px
   phone gutter too). */
.htva.htva.htva.htva .sec.hero .hero-title .hl-amp { position: absolute; font-size: .7em; line-height: 1; margin: -.42em 0 0 -.95em; vertical-align: baseline; color: #fb923c; }


/* src/styles/htva-hero-de-1.css */
/* src/styles/htva-hero-de-1.css: the Digital Employees pill on the hero map (2026-10-15). It sat in
   the map's muted ink (dark fill, 28% cyan stroke, 85%/70% text) and read as decoration. Warm it to
   the hero's orange (the hero is the one place DEs get the orange robot), lift the text to full
   strength and size it up a touch, so the launch reads as news. */
.htva.htva .twn--ai { scale: 1.2; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 14px rgba(249, 115, 22, .55)); }
.htva.htva .twn--ai .tai-pill { fill: rgba(40, 18, 6, .9); stroke: #fb923c; stroke-width: 1.4; }
.htva.htva .twn--ai .tai-l { fill: #fff; opacity: 1; font-weight: 800; }
.htva.htva .twn--ai .tai-l2 { fill: #fdba74; opacity: 1; font-weight: 700; }
.htva.htva .twn--ai .tai-bs { stroke: #fb923c; }


/* src/styles/htva-hero-h1-1.css */
/* src/styles/htva-hero-h1-1.css : homepage hero heading swap (2026-09-29, SEO)
   The eyebrow is now the page's only <h1> ("Hire managed virtual assistants and Digital Employees")
   and the display line "Your team, run like an operation." is a plain div.hero-title.
   1) the h1 eyebrow keeps the eyebrow look: undo every generic h1 rule (.htva h1 display type,
      the hero h1 colour/text-shadow) at a specificity above all of them;
   2) .hero-title re-creates exactly what the h1 rules gave the display line. */
.htva.htva.htva .sec.hero .hero__grid h1.kicker {
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; letter-spacing: .2em;
  line-height: inherit; margin: 0; text-shadow: none; text-wrap-style: balance;
  color: var(--accent-ink);
}
.htva.htva.htva[data-theme="light"] .sec.hero .hero__grid h1.kicker { color: #0e7490; }
.htva.htva .sec.hero .hero__grid .hero-title {
  font-family: var(--f-head); margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(40px, 6vw, 74px); text-wrap-mode: wrap; text-wrap-style: balance;
  color: var(--text); overflow-wrap: break-word;
  text-shadow: 0 1px 2px rgba(5,9,15,.9), 0 3px 14px rgba(5,9,15,.75), 0 0 34px rgba(5,9,15,.55);
}
@media (max-width: 375px) { .htva.htva .sec.hero .hero__grid .hero-title { font-size: 20px; } }


/* src/styles/htva-hero-measure-2.css */
/* Home hero: keep the copy column clear of the talent map's west coast (2026-09-28).
   The coast sits about 445px right of the column's left edge at every desktop width
   and drifts about 14px, so the lead is capped at 400px. Single-column layouts
   (920px and below) and heroes without the map are untouched. */
@media (min-width: 921px) {
  .htva.htva .sec.hero:has(.tmap) .hero__grid .lead { max-width: 400px; }
  .htva.htva .sec.hero:has(.tmap) .hero__grid .hero__trust { max-width: 560px; }
}


/* src/styles/htva-hero-mobile-1.css */
/* src/styles/htva-hero-mobile-1.css: phone hero without the map (2026-10-15, owner request).
   At <=760px the three talent-map SVGs are hidden and the hero gets a still gradient (orange glow top
   right, cyan bottom left, the map's own palette). The Digital Employees pill lived inside the map SVG,
   so the visually-hidden .tai-sr link talentmap adds to the text column is shown as the orange pill
   instead, first in the column. Its accessible name stays "Digital Employees: what they are and how
   they work"; the pill text is drawn with ::before/::after. */
@media (max-width: 760px) {
  .htva.htva.htva .sec.hero > svg.tmap { display: none; }
  .htva.htva.htva .sec.hero {
    background:
      radial-gradient(120% 70% at 85% 0%, rgba(249, 115, 22, .36), transparent 60%),
      radial-gradient(90% 60% at 0% 100%, rgba(8, 145, 178, .32), transparent 65%),
      linear-gradient(180deg, #0b1522, #070d16);
  }
  .htva.htva.htva .sec.hero .hero__grid > div { display: flex; flex-direction: column; align-items: flex-start; }
  .htva.htva.htva .sec.hero .tai-sr {
    order: -1; position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible;
    white-space: nowrap; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px;
    border: 1.4px solid #fb923c; background: rgba(40, 18, 6, .9); box-shadow: 0 0 14px rgba(249, 115, 22, .45);
    font-size: 0; line-height: 1; text-decoration: none;
  }
  .htva.htva.htva .sec.hero .tai-sr::before { content: "Digital Employees"; font: 800 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
  .htva.htva.htva .sec.hero .tai-sr::after { content: " \00b7  Early access"; font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #fdba74; white-space: pre; }
}


/* src/styles/htva-hero-mobile-2.css */
/* src/styles/htva-hero-mobile-2.css: with the map gone (htva-hero-mobile-1.css) the phone hero kept the
   height the map needed, leaving ~120px of empty gradient above and below the copy. */
@media (max-width: 760px) {
  .htva.htva.htva.htva .sec.hero { min-height: 0; height: auto; padding-top: 44px; padding-bottom: 56px; }
}


/* src/styles/htva-hero-mobile-3.css */
/* src/styles/htva-hero-mobile-3.css: the empty space on the phone hero came from
   `.sec.hero > .wrap { min-height: min(660px, 86vh) }` (room for the map), not from .sec.hero itself.
   Without the map, let the copy set the height. */
@media (max-width: 760px) {
  .htva.htva.htva.htva .sec.hero > .wrap { min-height: 0; }
}


/* src/styles/htva-hero-mobile-4.css */
/* src/styles/htva-hero-mobile-4.css: phone Digital Employees pill, second half "Early access" ->
   "See what they do →" (2026-10-15, owner: early access read as unfinished). Matches the desktop pill
   drawn by htva-talentmap-2.js. */
@media (max-width: 760px) {
  .htva.htva.htva.htva .sec.hero .tai-sr::after { content: " \00b7  See what they do \2192"; }
}


/* src/styles/htva-hire-pages-2.css */
/* Hire, Digital Employees and Hybrid Teams pages, plus the Hire menu. Only pages using these classes are affected. */

/* Role and option cards */
.htva.htva.htva.sw-core .hde-cards .card{display:flex;flex-direction:column;text-align:left}
.htva.htva.htva.sw-core .hde-cards .card>p{margin:0 0 14px;color:var(--text);font-weight:600;line-height:1.45}
.htva.htva.htva.sw-core .hde-cards .card>ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.htva.htva.htva.sw-core .hde-cards .card li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--dim)}
.htva.htva.htva.sw-core .hde-cards .card li .ck{flex:none;width:16px;height:16px;margin-top:3px;color:var(--accent)}
.htva.htva.htva.sw-core .hde-cards .card>a.hde-go{margin-top:auto;padding-top:18px;font-weight:700;color:var(--accent-ink,var(--accent));text-decoration:none}

/* Hire menu in the header: a link that also opens on hover or keyboard focus. */
.htva.htva header.nav .hde-nav{position:relative;display:inline-flex;align-items:center}
.htva.htva header.nav .hde-nav>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.htva.htva header.nav .hde-nav__menu{position:absolute;top:100%;left:-14px;z-index:60;display:none;min-width:290px;padding:8px;margin-top:0;border-radius:14px;background:var(--panel,#0b1522);border:1px solid var(--panel-brd,rgba(140,195,240,.2));box-shadow:0 20px 44px -18px rgba(0,0,0,.55)}
.htva.htva header.nav .hde-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.htva.htva header.nav .hde-nav:hover .hde-nav__menu,.htva.htva header.nav .hde-nav:focus-within .hde-nav__menu{display:grid;gap:2px;top:calc(100% + 8px)}
.htva.htva header.nav .hde-nav__menu a{display:block;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--text)}
.htva.htva header.nav .hde-nav__menu a span{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--dim)}
.htva.htva header.nav .hde-nav__menu a:hover,.htva.htva header.nav .hde-nav__menu a:focus-visible{background:rgba(249,115,22,.12)}


/* src/styles/htva-home-v2-2.css */
/* Homepage V2 only. Every selector is scoped by [data-hv2] on the page root. */

/* Trust band: the logo card now owns the row, so it reads as one horizontal band. */
.htva.htva.htva.htva.htva[data-hv2] .v9-trust{padding:44px 0 52px}
.htva.htva.htva.htva.htva[data-hv2] .v9-trust>.wrap{display:block}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients.sec{padding:30px 36px}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients.sec>.wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:44px;align-items:center}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .v2trusted{grid-column:1;grid-row:1;align-self:end;margin:0;text-align:left;font-size:clamp(24px,2.1vw,30px);line-height:1.12}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust .v2trusted::after{margin:14px 0 0;width:180px}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .v10-trust-note{grid-column:1;grid-row:2;align-self:start;margin:12px 0 0;max-width:none;text-align:left}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .logowall{grid-column:2;grid-row:1/span 2;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;margin:0}
@media (max-width:900px){
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust{padding:32px 0 40px}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients.sec{padding:28px 20px}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients.sec>.wrap{display:block}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .v2trusted{text-align:center}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust .v2trusted::after{margin:14px auto 0}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .logowall{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px;margin-top:22px}
.htva.htva.htva.htva.htva.htva[data-hv2] .v9-trust #clients .v10-trust-note{text-align:center;margin-top:20px}
}

/* Roles: a role without its own page is a plain line, with no link hover. */
.htva.htva.htva.htva.htva[data-hv2] .v10-roles .tile li:not(:has(a)):hover{color:var(--dim);background:transparent;box-shadow:none}
.htva.htva.htva.htva.htva[data-hv2] .v10-roles .tile li:not(:has(a)):hover .ck{color:var(--accent)}

/* Ask AI: full-bleed lead-in on the closer's own ground, on the closer's own column line. */
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai{position:relative;z-index:2;padding:80px 0 64px;text-align:left;background:#0b0b0e;border:0;overflow:hidden}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,138,76,.55) .7px,transparent 1.2px) 0 0/4px 4px;-webkit-mask-image:radial-gradient(52% 120% at 100% 0,#000,transparent 72%);mask-image:radial-gradient(52% 120% at 100% 0,#000,transparent 72%);opacity:.34}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai::after{content:"";position:absolute;left:50%;bottom:0;width:min(1148px,calc(100% - 52px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(34,211,238,.5) 25%,rgba(255,106,43,.6) 75%,transparent)}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-wrap{position:relative;z-index:1;display:grid;grid-template-columns:42% 58%;grid-template-rows:auto auto auto;max-width:1600px;margin:0 auto;align-items:start}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2tag{grid-column:1;grid-row:1;margin:0 0 12px;padding-left:max(26px,calc((100vw - 1148px)/2));color:var(--ember-hot)}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai h2{grid-column:1;grid-row:2/span 2;margin:0;padding-left:max(26px,calc((100vw - 1148px)/2));font-size:clamp(30px,2.9vw,42px);line-height:1.08;text-wrap:balance}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-hl{display:inline-block;margin-top:4px}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-wrap>p{grid-column:2;grid-row:1/span 2;align-self:start;margin:-3px 0 0;padding:0 5% 0 2%;max-width:calc(60ch + 7%);font-size:17px;line-height:1.55;color:#a7a6b4}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-row{grid-column:2;grid-row:3;justify-content:flex-start;margin:24px 0 0;padding:0 5% 0 2%;gap:10px}
@media (max-width:1080px){
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai{padding:60px 0 54px;text-align:center}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-wrap{display:block;padding:0 26px;max-width:680px}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2tag,.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai h2{padding-left:0}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-wrap>p{padding:0;margin:16px auto 0;max-width:56ch}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-row{justify-content:center;padding:0;margin-top:24px}
}
@media (max-width:480px){
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.htva.htva.htva.htva.htva[data-hv2] main>#ask-ai .v2askai-btn{justify-content:center;padding:12px 8px}
}


/* src/styles/htva-home-v2-4.css */
/* Homepage V2 only. Every selector is scoped by [data-hv2] on the page root. */

/* Tiles with a line of text in each, used by the Hybrid and Digital panels. */
.htva.htva.htva.htva.htva[data-hv2] .hv2-de-lede{margin:12px auto 0;max-width:62ch;font-size:17px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.htva.htva.htva.htva.htva[data-hv2] .hv2-de .tile{display:flex;flex-direction:column}
.htva.htva.htva.htva.htva[data-hv2] .hv2-de .tile>p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--dim)}

/* Selector: Hybrid, Human, Digital. Without the script every panel shows, stacked. */
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tabs{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 34px}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__tabs{display:flex}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tab{appearance:none;cursor:pointer;padding:12px 22px;border-radius:999px;border:1px solid var(--panel-brd);background:transparent;color:var(--dim);font:inherit;font-size:15.5px;font-weight:700;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tab:hover{color:var(--text)}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tab[aria-selected="true"]{background:rgba(249,115,22,.12);border-color:var(--accent);color:var(--text)}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__panel{margin-top:40px;scroll-margin-top:96px}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__panel{margin-top:0}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__head{text-align:center;margin-bottom:26px}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__t{margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--text)}
/* Desktop: panels share one cell, so rotating never moves the page. */
@media (min-width:761px){
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__panels{display:grid}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__panel{grid-area:1/1;transition:opacity .35s}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__panel:not(.is-on){visibility:hidden;opacity:0}
}
@media (max-width:760px){
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel__tab{flex:1 1 auto;padding:11px 12px;font-size:14px}
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel[data-ready] .hv2-sel__panel:not(.is-on){display:none}
}
@media (prefers-reduced-motion:reduce){
.htva.htva.htva.htva.htva[data-hv2] .hv2-sel .hv2-sel__panel{transition:none}
}


/* src/styles/htva-light-4.css */
/* src/styles/htva-light-1.css — light theme: paper ground (less blue), deeper bands, more halftone depth.
   Overrides ONLY colours; selectors copied verbatim from htva-site4-25 / htva-v2at so the cascade order decides. */
.htva.htva[data-theme="light"]{ --bg:#f4f6f9; --bg-2:#e8ecf1; --panel:#ffffff; --panel-2:#f6f8fa; --panel-brd:rgba(18,45,75,.13); --hair:rgba(18,45,75,.13); --grid:rgba(20,70,120,.06); --v4dot:rgba(14,116,144,.32); }
.htva.htva[data-theme="light"] main::before{ opacity:.30; }
.htva.htva[data-theme="light"] #draftboard{ background:radial-gradient(56% 64% at 100% 0%, rgba(36,71,196,.14), transparent 62%), #f4f6f9; }
.htva.htva[data-theme="light"] .v2wall{ background:radial-gradient(60% 60% at 50% 0%, rgba(8,145,178,.18), transparent 64%), linear-gradient(180deg, #dfe5ec, #e9edf2); }
.htva.htva[data-theme="light"] .v2band{ background:#e9edf2; }
.htva.htva[data-theme="light"] .v2journey{ background:radial-gradient(50% 60% at 0% 40%, rgba(221,84,7,.10), transparent 60%), radial-gradient(50% 60% at 100% 70%, rgba(36,71,196,.12), transparent 60%), #f6f8fa; }
.htva.htva[data-theme="light"] #capabilities{ background:radial-gradient(56% 60% at 100% 100%, rgba(221,84,7,.12), transparent 62%), #e8ecf1; }
.htva.htva[data-theme="light"] .sec:has(.vf3-stage){ background:radial-gradient(70% 60% at 50% 100%, rgba(8,145,178,.14), transparent 66%), #f6f8fa; }
.htva.htva[data-theme="light"] #founder{ background:radial-gradient(48% 70% at 0% 100%, rgba(36,71,196,.16), transparent 62%), linear-gradient(180deg, #e8ecf1, #dfe5ec); }
.htva.htva[data-theme="light"] .sec:has(> .wrap > .faq){ background:radial-gradient(60% 60% at 50% 0%, rgba(8,145,178,.12), transparent 66%), #f4f6f9; }
.htva.htva[data-theme="light"] #clients{ background:radial-gradient(60% 90% at 50% 0%, rgba(8,145,178,.16), transparent 62%), #e8ecf1; }
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){ background:radial-gradient(55% 60% at 100% 0%, rgba(8,145,178,.14), transparent 62%), #e9edf2; }
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(odd):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){ background:radial-gradient(50% 60% at 0% 100%, rgba(221,84,7,.10), transparent 62%), #f4f6f9; }
.v2page[data-theme="light"] .v2rowline .v2i{ background:#eef1f5; }
.v2page[data-theme="light"] .v2xr-in{ background:#f3f5f8; }
.v2page[data-theme="light"] #clients{ background: radial-gradient(58% 95% at 50% 0%, color-mix(in srgb, var(--v2cool) 10%, transparent), transparent 62%), linear-gradient(180deg, var(--bg-2,#e8ecf1), var(--bg,#f4f6f9)); }
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid))::before{ opacity:.2; }


/* src/styles/htva-logos-color-1.css */
/* src/styles/htva-logos-color-1.css: client logos in their own colours in the light theme (2026-10-15,
   owner). The uploads are full-colour PNGs; the theme flattened them to grey with
   `filter: brightness(0) opacity(.55)` + opacity .5. Dark theme keeps the white treatment. Site-wide. */
.htva.htva[data-theme="light"] .logowall .clogo,
.htva.htva[data-theme="light"] .logowall .clogo-mix img { filter: none; opacity: 1; }
.htva.htva[data-theme="light"] .logowall .clogo-mix { opacity: 1; }
.htva.htva[data-theme="light"] .logowall .clogo:hover { transform: translateY(-1px); }


/* src/styles/htva-role-new-1.css */
/* New role pages (cold caller, accounting, SEO): a responsive four-step flow inside .rolefig, plus quote cards. Only these pages use these classes. */
.htva.htva.htva.sw-roles .rolefig .swr-flow-t{margin:0;font-family:var(--f-head);font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.2;color:#e9f1f8}
.htva.htva.htva.sw-roles .rolefig .swr-flow-s{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:#8fa3b8}
.htva.htva.htva.sw-roles .rolefig .swr-flow{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:swrf}
.htva.htva.htva.sw-roles .rolefig .swr-flow li{position:relative;margin:0;padding:18px 18px 20px;border-radius:14px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.22);counter-increment:swrf}
.htva.htva.htva.sw-roles .rolefig .swr-flow li:last-child{background:rgba(255,106,43,.1);border-color:rgba(255,106,43,.42)}
.htva.htva.htva.sw-roles .rolefig .swr-flow li::before{content:counter(swrf);display:block;margin-bottom:10px;font-family:var(--f-head);font-size:15px;font-weight:700;color:#67e8f9}
.htva.htva.htva.sw-roles .rolefig .swr-flow li:last-child::before{color:#ffc49b}
.htva.htva.htva.sw-roles .rolefig .swr-flow .swr-flow-n{display:block;font-family:var(--f-head);font-size:17px;font-weight:700;line-height:1.25;color:#e9f1f8}
.htva.htva.htva.sw-roles .rolefig .swr-flow .swr-flow-d{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:#b6c6d6}
@media (max-width:900px){.htva.htva.htva.sw-roles .rolefig .swr-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.htva.htva.htva.sw-roles .rolefig .swr-flow{grid-template-columns:minmax(0,1fr)}}
.htva.htva.htva.sw-roles .swr-quote .card p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.htva.htva.htva.sw-roles .swr-quote .card .swr-who{margin-top:16px;font-size:14px;line-height:1.4;color:var(--dim)}
.htva.htva.htva.sw-roles .swr-quote .card .swr-who-n{display:block;font-family:var(--f-head);font-weight:700;color:var(--text)}


/* src/styles/htva-site4-25.css */
/* ============ HTVA homepage v4 preview (SITEWIDE - every page) ============
   ONE language for the whole page, taken from the two parts that already work: the talent
   map (hero) and the Timepiece (closer).

   1. ONE GROUND. No hairline dividers between sections. The page is one continuous black
      field with a single halftone dot spec (4px / .7px / 1.2px). Sections are separated by
      LIGHT (a vignette, the closer's 19.85deg beam), never by a line.
   2. ONE PALETTE. Ember (#ff6a2b) and pulse (#4d7dff / cyan #22d3ee) on black. Green and
      purple are removed everywhere (journey, pills, chips, live dots, ticker avatars).
   3. ONE MATERIAL. Every panel is a dial: solid dark ground, dot texture, one edge-light,
      a real offset shadow. No glass, no translucent 4.5%-white cards, no white cards.
   4. ONE CLOSE. The footer sits on the Timepiece's ground so the page ends where it peaked.
   Layered on top of the v2 sheet (the v4 row keeps .v2page so v2 JS/CSS keep running). */

/* ---------- tokens ---------- */
.htva.htva{
  --ember:#ff6a2b; --ember-hot:#ffc49b; --ember-deep:#b33a12; --warm:#ff6a2b;
  --pulse:#4d7dff; --pulse-ice:#bfd6ff; --pulse-deep:#2447c4;
  --live:#22d3ee;                                 /* the green "live" becomes the pulse */
  --v2warm:#ff6a2b; --v2warm-2:#ff6a2b; --v2amber:#ffc49b; --v2live:#22d3ee;
  --v4dot:rgba(205,238,255,.26);
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%);
  --v4dots:radial-gradient(var(--v4dot) .6px, transparent 1.1px);
  --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  --v4dial-2:#0b1522;
  --v4line:rgba(140,195,240,.20);
  --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  --v4glow-cool:0 0 40px -10px rgba(34,211,238,.45);
  --v4glow-warm:0 0 40px -10px rgba(255,106,43,.5);
}
.htva.htva[data-theme="dark"]{
  --dim:#b6c6d6; --mut:#8298ad;
  --panel:#0b1522; --panel-2:rgba(150,200,240,.10); --panel-brd:rgba(140,195,240,.20);
  --hair:rgba(140,195,240,.14); --glass:#0a1220;
  --v2mut:color-mix(in srgb, var(--text) 80%, transparent);
}
.htva.htva[data-theme="light"]{
  --v2mut:color-mix(in srgb, var(--text) 86%, transparent);
  --v2warm:#dd5407; --v2warm-2:#dd5407; --v2amber:#f59e0b; --v2live:#0e7490; --live:#0e7490;
  --ember:#dd5407; --pulse:#2447c4;
  --v4dot:rgba(14,116,144,.22);
  --v4plate:radial-gradient(110% 85% at 50% 50%, #ffffff 0%, #ffffff 34%, rgba(255,255,255,0) 82%);
  --v4dial:linear-gradient(180deg, #ffffff, #f2f6fa);
  --v4dial-2:#ffffff;
  --v4line:rgba(18,45,75,.14);
  --v4edge:rgba(255,255,255,.95);
  --v4shadow:0 30px 60px -30px rgba(18,45,75,.35), 0 10px 22px -14px rgba(18,45,75,.18);
  --v4glow-cool:0 0 40px -10px rgba(8,145,178,.25);
  --v4glow-warm:0 0 40px -10px rgba(221,84,7,.25);
  --glass:#ffffff;
}
.htva.htva .v2ops{--dim:#b6c6d6; --mut:#8298ad; --panel:#0b1522; --panel-brd:rgba(140,195,240,.20); --glass:#0a1220; --live:#22d3ee;}

/* ---------- selection / focus carry the palette ---------- */
.htva.htva ::selection{background:rgba(255,106,43,.35); color:#fff;}
.htva.htva{caret-color:var(--ember);}
.htva.htva a:focus-visible, .htva.htva button:focus-visible, .htva.htva summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}

/* ================= 1. ONE GROUND ================= */
.htva.htva main{position:relative; isolation:isolate; background:var(--bg);}
/* the continuous halftone field behind the whole middle, fading in under the hero and out into the closer */
.htva.htva main::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--v4dots); background-size:4px 4px; opacity:.16;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), radial-gradient(52% 60% at 50% 50%, transparent 30%, #000 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), radial-gradient(52% 60% at 50% 50%, transparent 30%, #000 100%); mask-composite:intersect; opacity:.22;}
.htva.htva main > section{position:relative; z-index:1;}
.htva.htva main > .sec.hero, .htva.htva main > .tp-closer{z-index:2;}

/* kill every hairline divider the v2 sheet drew between sections */
.htva.htva .v2wall, .htva.htva .v2band, .htva.htva #clients, .htva.htva .v2statsband,
.htva.htva .v2funnel, .htva.htva .v2journey, .htva.htva .v2askai, .htva.htva #founder{border-top:0; border-bottom:0;}
.htva.htva .v2journey::before{display:none;}
.htva.htva #clients::before, .htva.htva .v2funnel::before, .htva.htva .v2funnel::after{display:none;}  /* the page-wide field replaces the per-section ones */

/* rhythm */
.htva.htva .sec{padding:96px 0;}
.htva.htva .sec.sm{padding:56px 0;}
.htva.htva .v2funnel{padding:100px 24px;}
.htva.htva .sec .h2{font-size:clamp(32px, 4.1vw, 52px); line-height:1.02; letter-spacing:-.025em;}
.htva.htva .sec .lead{font-size:clamp(17px, 1.7vw, 20px); margin-top:20px;}
.htva.htva .kicker{color:var(--accent-ink);}
@media (max-width:700px){ .htva.htva .sec{padding:64px 0;} .htva.htva .v2funnel{padding:64px 20px;} }

/* light falls differently in each room - the vignettes are the only section separators */
.htva.htva .v2statsband{margin-top:-84px; padding:0 24px 90px; background:transparent; z-index:3;}
.htva.htva #clients{background:radial-gradient(60% 90% at 50% 0%, rgba(34,211,238,.13), transparent 62%);}
.htva.htva .v2funnel{background:
  radial-gradient(60% 70% at 0% 0%, rgba(255,106,43,.20), transparent 60%),
  radial-gradient(64% 70% at 100% 100%, rgba(34,211,238,.16), transparent 62%);
  isolation:isolate; overflow:hidden;}
.htva.htva #draftboard{background:radial-gradient(56% 64% at 100% 0%, rgba(77,125,255,.16), transparent 62%);}
.htva.htva .v2wall{background:
  radial-gradient(60% 60% at 50% 0%, rgba(34,211,238,.14), transparent 64%),
  radial-gradient(40% 50% at 100% 100%, rgba(255,106,43,.12), transparent 62%);}
.htva.htva .v2band{background:transparent;}
.htva.htva .v2journey{background:radial-gradient(50% 60% at 0% 40%, rgba(255,106,43,.12), transparent 60%), radial-gradient(50% 60% at 100% 70%, rgba(77,125,255,.14), transparent 60%);}
.htva.htva #capabilities{background:radial-gradient(56% 60% at 100% 100%, rgba(255,106,43,.14), transparent 62%);}
.htva.htva .v2ops{background:var(--bg); isolation:isolate; overflow:hidden;}
.htva.htva .sec:has(.vf3-stage){background:radial-gradient(70% 60% at 50% 100%, rgba(34,211,238,.12), transparent 66%);}
.htva.htva #founder{background:radial-gradient(48% 70% at 0% 100%, rgba(77,125,255,.16), transparent 62%), radial-gradient(40% 50% at 100% 0%, rgba(255,106,43,.10), transparent 60%);}
.htva.htva .sec:has(> .wrap > .faq){background:radial-gradient(60% 60% at 50% 0%, rgba(34,211,238,.09), transparent 66%);}
.htva.htva .v2askai{background:radial-gradient(60% 100% at 50% 100%, rgba(255,106,43,.12), transparent 64%), #0b0b0e;}

/* the Timepiece's beam, reused as the floor under the two big instruments */
.htva.htva .v2ops::before, .htva.htva .v2funnel::before{
  content:""; display:block; position:absolute; left:50%; top:50%; width:2000px; height:400px; z-index:0; pointer-events:none;
  transform:translate(-560px, 40px) rotate(19.85deg); transform-origin:1060px 170px;
  background:url(/uploads/htva-closer-beam.png) 0 0 / 100% 100% no-repeat; opacity:.42;
  -webkit-mask:radial-gradient(55% 70% at 50% 50%, #000 0%, rgba(0,0,0,.6) 45%, transparent 78%);
  mask:radial-gradient(55% 70% at 50% 50%, #000 0%, rgba(0,0,0,.6) 45%, transparent 78%);}
.htva.htva .v2funnel::before{transform:translate(-1240px, 120px) rotate(19.85deg); opacity:.4;}
.htva.htva .v2ops > .wrap, .htva.htva .v2funnel > *{position:relative; z-index:1;}
.htva.htva[data-theme="light"] .v2funnel::before{opacity:.18;}

/* ================= 2. ONE PALETTE (green + purple out) ================= */
.htva.htva .chip.done{color:var(--accent-ink); border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.12);}
.htva.htva .chip.run{color:var(--ember-hot); border-color:rgba(255,106,43,.5); background:rgba(255,106,43,.14);}
.htva.htva .row .av{background:linear-gradient(135deg, #4ce0ff, #22d3ee); color:#04222b;}
.htva.htva .row .av.b{background:linear-gradient(135deg, #ffb27a, #ff6a2b); color:#2a0d02;}
.htva.htva .v2av.a1{background:var(--ember-deep);}
.htva.htva .v2av.a2{background:#0e7490;}
.htva.htva .v2av.a3{background:var(--pulse-deep);}
.htva.htva .v2av.a4{background:#c2410c;}
.htva.htva .v2station.good .v2tag, .htva.htva .v2c .v2g, .htva.htva .v2station.good .v2rowline .v2i{color:var(--accent-ink);}
.htva.htva .v2station.good .v2node{border-color:rgba(34,211,238,.45);}
.htva.htva .v2station.good.lit .v2node{border-color:var(--accent); color:#04222b; background:var(--accent); box-shadow:0 10px 24px rgba(34,211,238,.3);}
.htva.htva .v2station .v2node.start, .htva.htva .v2station:first-child .v2node{background:var(--ember); border-color:var(--ember); color:#fff; box-shadow:0 10px 24px rgba(255,106,43,.34);}
.htva.htva .v2pill-good{background:rgba(34,211,238,.14); color:var(--accent-ink);}
.htva.htva .v2pill-warm{background:rgba(255,106,43,.16); color:var(--ember-hot);}
.htva.htva .v2xr-ticks li::before, .htva.htva .v2xr-ticks > div::before{color:var(--accent-ink);}
.htva.htva .v2fn-cnt, .htva.htva .v2fn-tnum{fill:var(--ember-hot);}
.htva.htva .v2fn-hl, .htva.htva .stat .n.warm, .htva.htva .v2sb-pre, .htva.htva .v2sb-suf{color:var(--ember-hot);}
.htva.htva .v2funnel .v2tag, .htva.htva .v2jhead .v2tag{color:var(--ember-hot);}
.htva.htva .vcard .rt{color:var(--ember-hot);}

/* ================= 3. ONE MATERIAL: the dial ================= */
.htva.htva .vcard, .htva.htva .scorecard, .htva.htva .console, .htva.htva .v2artcard,
.htva.htva .faq details, .htva.htva .bento, .htva.htva .v2band .stats, .htva.htva .v2sb-copy,
.htva.htva .v2xr-panel, .htva.htva .v2dbm-panel{
  background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px, var(--v4dial);
  border:1px solid var(--v4line); backdrop-filter:none;
  box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow);}
.htva.htva .scorecard, .htva.htva .console{box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-cool); border-color:rgba(34,211,238,.28);}
.htva.htva .v2band .stats{box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-warm); border-color:rgba(255,106,43,.28);}
.htva.htva .ic-chip, .htva.htva .v2pcard, .htva.htva .v2askai-btn, .htva.htva .social a, .htva.htva .v2c, .htva.htva .vmore a{
  background:var(--v4dial-2); border:1px solid var(--v4line); box-shadow:inset 0 1px 0 var(--v4edge), 0 12px 24px -16px rgba(0,0,0,.8);}
.htva.htva .ic-chip:hover, .htva.htva .v2askai-btn:hover, .htva.htva .vcard:hover, .htva.htva .social a:hover, .htva.htva .vmore a:hover{
  border-color:rgba(255,106,43,.6); box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-warm);}
.htva.htva .ic-chip:hover .ck{color:var(--ember);}
.htva.htva .kpi{background:rgba(150,200,240,.05);}
.htva.htva .con__kpis{background:var(--hair);}
.htva.htva .kpi .n b{color:var(--accent-ink);}
.htva.htva .scorecard .hd, .htva.htva .con__bar{color:var(--dim); border-bottom:1px solid var(--hair);}
.htva.htva .fitrow .n{text-shadow:0 0 22px rgba(34,211,238,.45);}
.htva.htva .dim .dl{color:var(--dim);}
.htva.htva .stat .n{text-shadow:0 0 26px rgba(34,211,238,.35);}
.htva.htva .stat .n.warm{text-shadow:0 0 26px rgba(255,106,43,.45); filter:none;}
.htva.htva .stat .l, .htva.htva .feat li, .htva.htva .tile li, .htva.htva .cred li, .htva.htva .faq .a, .htva.htva .v2sbody > p{color:var(--dim);}

/* the ops console: the SaaS glow-blooms go, the beam + an edge-light do the lighting */
.htva.htva .gedge, .htva.htva .cbeam, .htva.htva .console .innerglow{display:none;}
.htva.htva .v2glowwrap{background:none; box-shadow:none;}
.htva.htva .console{border-radius:22px;}
.htva.htva .console .row{border-radius:12px;}
.htva.htva .console .row:hover{background:rgba(150,200,240,.06);}

/* funnel slabs: filled, lit dials instead of thin outlines */
.htva.htva .v2fn-slab{fill:rgba(255,106,43,.14); stroke:rgba(255,106,43,.75); stroke-width:1.2; filter:drop-shadow(0 0 7px rgba(255,106,43,.45));}
.htva.htva .v2fn-draft{fill:rgba(34,211,238,.16); stroke:rgba(34,211,238,.8); stroke-width:1.2; filter:drop-shadow(0 0 10px rgba(34,211,238,.5));}
.htva.htva .v2fn-brace{stroke:rgba(255,106,43,.6);}
.htva.htva .v2fn-brace--hot{stroke:rgba(34,211,238,.7);}
.htva.htva .v2fn-ben{border-left:2px solid rgba(34,211,238,.55);}

/* FAQ */
.htva.htva .faq{max-width:860px; margin-top:40px; gap:12px;}
.htva.htva .faq details{border-radius:16px; padding:2px 24px;}
.htva.htva .faq details[open]{border-color:rgba(255,106,43,.55); box-shadow:inset 3px 0 0 var(--ember), inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-warm);}
.htva.htva .faq summary::after{color:var(--ember-hot);}
.htva.htva .faq .q{color:var(--ember-hot);}
.htva.htva .faq summary{color:var(--text);}

/* founder */
.htva.htva .founder img{border-radius:22px; outline:1px solid var(--v4line); box-shadow:var(--v4shadow), var(--v4glow-cool);}
.htva.htva .social a{border-radius:999px; padding:9px 16px; color:var(--text);}

/* trusted logos step forward */
.htva.htva .clogo{opacity:.78;} .htva.htva .clogo:hover{opacity:1;}
.htva.htva .v2trusted::after{background:linear-gradient(90deg, transparent, var(--accent) 25%, var(--ember) 75%, transparent);}

/* hero handoff: the portrait panel sits into the hero's foot */
.htva.htva .v2sb-panel{box-shadow:var(--v4shadow), 0 0 0 1px var(--v4line), inset 0 1px 0 var(--v4edge);}
.htva.htva .v2sb-copy::before{display:none;}
.htva.htva .v2sb-copy{border-radius:0 22px 22px 0; border-left:0;}
.htva.htva .v2fn-cta{color:var(--accent-ink); border-bottom-color:rgba(255,106,43,.6);}
@media (max-width:980px){ .htva.htva .v2statsband{margin-top:-40px;} .htva.htva .v2sb-copy{border-radius:0 0 22px 22px;} }

/* ================= STRUCTURE ================= */
/* testimonials: one featured story + five compact rows */
.htva.htva .vgrid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-auto-rows:auto; gap:12px 22px; margin-top:46px; align-items:stretch;}
.htva.htva .vgrid .vcard:nth-child(2){
  grid-column:1; grid-row:1 / 6; padding:36px 38px 34px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; border-radius:22px;
  background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px,
    radial-gradient(70% 60% at 0% 0%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(50% 50% at 100% 100%, rgba(255,106,43,.18), transparent 62%),
    var(--v4dial);
  border-color:rgba(34,211,238,.35);}
.htva.htva .vgrid .vcard:nth-child(2)::before{content:"\201C"; position:absolute; right:22px; top:-26px; font-family:var(--f-head); font-weight:800; font-size:260px; line-height:1; color:rgba(255,106,43,.07); pointer-events:none;}
.htva.htva .vgrid .vcard:nth-child(2) .rt{margin:0; font-size:15px; letter-spacing:.08em;}
.htva.htva .vgrid .vcard:nth-child(2) .rt button{margin-left:auto; width:54px; height:54px;}
.htva.htva .vgrid .vcard:nth-child(2) p{font-family:var(--f-head); font-weight:700; font-size:clamp(21px, 2.05vw, 28px); line-height:1.28; letter-spacing:-.012em; color:var(--text); margin:22px 0 26px; text-wrap:pretty;}
.htva.htva .vgrid .vcard:nth-child(2) .who img, .htva.htva .vgrid .vcard:nth-child(2) .who .av{width:52px; height:52px;}
.htva.htva .vgrid .vcard:nth-child(2) .who .nm{font-size:16px;}
.htva.htva .vgrid .vcard:nth-child(2) .who .rl{font-size:12px;}
.htva.htva .vgrid .vcard:not(:nth-child(2)){grid-column:2; display:grid; grid-template-columns:1fr auto; grid-template-areas:"who rt" "p p"; align-items:center; gap:8px 14px; padding:14px 16px 15px; border-radius:16px;}
.htva.htva .vgrid .vcard:not(:nth-child(2)) .who{grid-area:who; margin:0;}
.htva.htva .vgrid .vcard:not(:nth-child(2)) .who img, .htva.htva .vgrid .vcard:not(:nth-child(2)) .who .av{width:36px; height:36px;}
.htva.htva .vgrid .vcard:not(:nth-child(2)) .rt{grid-area:rt; font-size:11px; letter-spacing:.06em; gap:10px; align-items:center;}
.htva.htva .vgrid .vcard:not(:nth-child(2)) .rt button{width:34px; height:34px;}
.htva.htva .vgrid .vcard:not(:nth-child(2)) p{grid-area:p; margin:0; font-size:14px; line-height:1.5; color:var(--dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.htva.htva .vcard .who img{box-shadow:0 0 0 1px var(--v4line), 0 0 0 4px rgba(34,211,238,.14);}
.htva.htva .vmore a{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; color:var(--text); letter-spacing:.08em;}
.htva.htva .v2marqnote{color:var(--dim);}
@media (max-width:900px){
  .htva.htva .vgrid{grid-template-columns:1fr;}
  .htva.htva .vgrid .vcard:nth-child(2){grid-column:auto; grid-row:auto; padding:28px 26px;}
  .htva.htva .vgrid .vcard:not(:nth-child(2)){grid-column:auto;}
}

/* proof strip straddling the wall's foot */
.htva.htva .v2band{padding:0 0 96px;}
.htva.htva .v2band::before{display:none;}
.htva.htva .v2band > .wrap{margin-top:-52px;}
.htva.htva .v2band .stats{gap:0; padding:28px 12px; border-radius:22px;}
.htva.htva .v2band .stat{padding:4px 28px; border-left:1px solid var(--hair);}
.htva.htva .v2band .stat:first-child{border-left:0;}
.htva.htva .v2band .stat .n{font-size:clamp(30px, 3.4vw, 44px);}
.htva.htva .v2band .stat .l{font-size:13px; margin-top:6px;}
@media (max-width:768px){ .htva.htva .v2band > .wrap{margin-top:-30px;} .htva.htva .v2band .stats{gap:22px 0; padding:22px 8px;} .htva.htva .v2band .stat{border-left:0; padding:0 18px;} }

/* process: a horizontal rail, ember at the start, pulse at the end */
.htva.htva .v2jrail{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px; position:relative; padding:0;}
.htva.htva .v2jrail::before{content:""; position:absolute; left:26px; right:26px; top:25px; height:2px; z-index:0;
  background:linear-gradient(90deg, var(--ember), var(--pulse) 55%, var(--accent)); opacity:.6;
  -webkit-mask:linear-gradient(90deg, #000, #000 92%, transparent); mask:linear-gradient(90deg, #000, #000 92%, transparent);}
.htva.htva .v2spine{display:none;}
.htva.htva .v2station{display:flex; flex-direction:column; gap:18px; padding:0;}
.htva.htva .v2node{position:relative; left:0; top:0; transform:none; margin:0; background:var(--v4dial-2);}
.htva.htva .v2sbody h3{font-size:clamp(1.05rem, 1.25vw, 1.25rem);}
.htva.htva .v2sbody > p{max-width:none; font-size:.95rem; margin-top:9px;}
.htva.htva .v2chips{margin-top:12px;}
.htva.htva .v2aside{margin-top:auto;}
.htva.htva .v2artcard{width:100%; border-radius:18px;}
.htva.htva .v2artcard .v2t{font-size:.9rem;}
.htva.htva .v2artcard .v2h{gap:8px; margin-bottom:10px;}
.htva.htva .v2pill{font-size:.58rem; padding:4px 8px;}
.htva.htva .v2station.good .v2artcard, .htva.htva .v2station.good.lit .v2artcard{background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px, var(--v4dial); box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-cool);}
.htva.htva .v2artcard::after{display:none;}
@media (max-width:1040px){ .htva.htva .v2jrail{grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 26px;} .htva.htva .v2jrail::before{display:none;} }
@media (max-width:600px){ .htva.htva .v2jrail{grid-template-columns:1fr;} }

/* roles: one board, industries beneath it */
.htva.htva .bento{gap:0; margin-top:46px; border-radius:22px; overflow:hidden;}
.htva.htva .bento::before{content:"22 specialized roles \00a0\00b7\00a0 four disciplines \00a0\00b7\00a0 one accountable roof"; grid-column:1 / -1; display:flex; align-items:center; gap:10px;
  padding:13px 22px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--hair); background:rgba(34,211,238,.06);}
.htva.htva .bento::after{content:""; grid-column:1 / -1; grid-row:1; justify-self:end; align-self:center; margin-right:22px; width:8px; height:8px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(255,106,43,.22); animation:v4blip 2.2s ease-in-out infinite;}
@keyframes v4blip{0%,100%{opacity:1} 50%{opacity:.35}}
.htva.htva .bento .tile{background:transparent; border:0; border-radius:0; padding:26px 24px 30px; box-shadow:1px 0 0 0 var(--hair), 0 1px 0 0 var(--hair);}
.htva.htva .bento .tile:hover{transform:none; z-index:2; background:rgba(34,211,238,.06); box-shadow:1px 0 0 0 var(--hair), 0 1px 0 0 var(--hair), inset 0 0 0 1px rgba(34,211,238,.22);}
.htva.htva .bento .tile::before{border-radius:0;}
.htva.htva .tile h3{font-size:16px; color:var(--text);}
.htva.htva .tile li{font-size:14px;}
.htva.htva .tile .cnt{color:var(--ember-hot); background:rgba(255,106,43,.14); border:1px solid rgba(255,106,43,.3); font-weight:600;}
.htva.htva .v4rowlbl{margin:38px auto 16px; max-width:76ch; text-align:center; font-size:15.5px; line-height:1.6; color:var(--dim); text-wrap:pretty;}
.htva.htva .v4rowlbl strong{color:var(--text); font-weight:700;}
.htva.htva #capabilities .ind-fly{justify-content:center; gap:10px;}
.htva.htva .ic-chip{padding:12px 18px; color:var(--text);}

/* ================= 4. ONE CLOSE: the footer sits on the Timepiece's ground ================= */
.htva.htva .foot{
  --bg:#0b0b0e; --bg-2:#0b0b0e; --text:#eceaf6; --dim:#a7a6b4; --mut:#7c7b8a; --hair:rgba(255,255,255,.08);
  color:var(--text); color-scheme:dark; position:relative; isolation:isolate; overflow:hidden; border-top:0;
  padding:74px 0 34px;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255,106,43,.16), transparent 60%),
    radial-gradient(50% 70% at 92% 100%, rgba(77,125,255,.14), transparent 60%),
    radial-gradient(90% 120% at 30% 50%, #101014 0%, #0b0b0e 62%);}
.htva.htva .foot::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,196,155,.5) .6px, transparent 1.1px); background-size:4px 4px; opacity:.12;
  -webkit-mask:radial-gradient(70% 90% at 10% 0%, #000, rgba(0,0,0,.35) 50%, transparent 80%);
  mask:radial-gradient(70% 90% at 10% 0%, #000, rgba(0,0,0,.35) 50%, transparent 80%);}
.htva.htva .foot::after{content:""; position:absolute; left:50%; top:-120px; width:2000px; height:400px; z-index:-1; pointer-events:none;
  transform:translate(-400px, 0) rotate(19.85deg); transform-origin:1060px 170px;
  background:url(/uploads/htva-closer-beam.png) 0 0 / 100% 100% no-repeat; opacity:.35;}
.htva.htva .foot a{color:var(--dim);} .htva.htva .foot a:hover{color:var(--ember-hot);}
.htva.htva .foot h4{color:var(--mut);}
.htva.htva .foot .foot__bot{border-top:1px solid var(--hair); color:var(--mut);}
.htva.htva .foot .l-light{display:none !important;} .htva.htva .foot .l-dark{display:block !important;}

@media (prefers-reduced-motion: reduce){ .htva.htva .bento::after{animation:none;} }

/* Ask AI is committed-dark like the closer: pin its type in BOTH themes */
.htva.htva .v2askai{--text:#eceaf6; --dim:#a7a6b4; color:#eceaf6; color-scheme:dark;}
.htva.htva[data-theme="light"] .v2askai h2, .htva.htva .v2askai h2{color:#eceaf6;}
.htva.htva .v2askai-wrap > p{color:#a7a6b4;}
.htva.htva .v2askai-hl{color:#67e8f9;}
.htva.htva .v2askai-btn, .htva.htva[data-theme="light"] .v2askai-btn{background:#15151b; color:#eceaf6; border-color:rgba(255,255,255,.12);}


/* ================= committed-dark rooms stay dark in the light theme ================= */
/* funnel + ops: clone the dark tokens (the hero's dark-lock pattern) so nothing pierces */
.htva.htva .v2funnel, .htva.htva .v2ops{
  --bg:#05090f; --bg-2:#0a1420; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad;
  --panel:#0b1522; --panel-2:rgba(150,200,240,.10); --panel-brd:rgba(140,195,240,.20); --hair:rgba(140,195,240,.14);
  --glass:#0a1220; --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32);
  --cta-bg:linear-gradient(135deg,#22d3ee,#0ea5c4); --cta-fg:#03212b; --live:#22d3ee;
  --v2warm:#ff6a2b; --v2warm-2:#ff6a2b; --v2amber:#ffc49b; --v2live:#22d3ee; --v2cool-ink:#67e8f9;
  --v2mut:color-mix(in srgb, #e9f1f8 80%, transparent); --ember:#ff6a2b; --pulse:#4d7dff;
  --v4dot:rgba(205,238,255,.26); --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%); --v4dial-2:#0b1522;
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%);
  --v4line:rgba(140,195,240,.20); --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  --v4glow-cool:0 0 40px -10px rgba(34,211,238,.45); --v4glow-warm:0 0 40px -10px rgba(255,106,43,.5);
  color:var(--text); color-scheme:dark;}
.htva.htva .v2funnel{background:
  radial-gradient(60% 70% at 0% 0%, rgba(255,106,43,.20), transparent 60%),
  radial-gradient(64% 70% at 100% 100%, rgba(34,211,238,.16), transparent 62%), #05090f;}
.htva.htva[data-theme="light"] .v2funnel::before{opacity:.4;}
.htva.htva[data-theme="light"] .v2funnel h2, .htva.htva[data-theme="light"] .v2funnel h3,
.htva.htva[data-theme="light"] .v2funnel p, .htva.htva[data-theme="light"] .v2funnel .v2fn-bname{color:var(--text);}
.htva.htva[data-theme="light"] .v2funnel .v2fn-bdesc, .htva.htva[data-theme="light"] .v2funnel .v2fn-copy > p{color:var(--v2mut);}
.htva.htva[data-theme="light"] .v2funnel .v2fn-hl{color:#ffc49b;}
.htva.htva[data-theme="light"] .v2funnel .v2fn-lbl{fill:#e9f1f8;}
.htva.htva[data-theme="light"] .v2funnel .v2fn-cta{color:#67e8f9;}
.htva.htva[data-theme="light"] .v2ops h2, .htva.htva[data-theme="light"] .v2ops h3, .htva.htva[data-theme="light"] .v2ops .mk,
.htva.htva[data-theme="light"] .v2ops p, .htva.htva[data-theme="light"] .v2ops .feat li, .htva.htva[data-theme="light"] .v2ops .kpi .n,
.htva.htva[data-theme="light"] .v2ops .row .t{color:var(--text);}
.htva.htva[data-theme="light"] .v2ops .kpi .l, .htva.htva[data-theme="light"] .v2ops .row .s, .htva.htva[data-theme="light"] .v2ops .con__bar{color:var(--dim);}
.htva.htva[data-theme="light"] .v2ops .kpi{background:rgba(150,200,240,.05);}

/* light theme: real tonal steps between the light rooms, so the page is not one white sheet */
.htva.htva[data-theme="light"] #draftboard{background:radial-gradient(56% 64% at 100% 0%, rgba(36,71,196,.14), transparent 62%), #eaeff5;}
.htva.htva[data-theme="light"] .v2wall{background:radial-gradient(60% 60% at 50% 0%, rgba(8,145,178,.18), transparent 64%), linear-gradient(180deg, #d9e3ee, #e4ebf3);}
.htva.htva[data-theme="light"] .v2band{background:#e4ebf3;}
.htva.htva[data-theme="light"] .v2journey{background:radial-gradient(50% 60% at 0% 40%, rgba(221,84,7,.10), transparent 60%), radial-gradient(50% 60% at 100% 70%, rgba(36,71,196,.12), transparent 60%), #f1f5f9;}
.htva.htva[data-theme="light"] #capabilities{background:radial-gradient(56% 60% at 100% 100%, rgba(221,84,7,.12), transparent 62%), #e2e9f1;}
.htva.htva[data-theme="light"] .sec:has(.vf3-stage){background:radial-gradient(70% 60% at 50% 100%, rgba(8,145,178,.14), transparent 66%), #f1f5f9;}
.htva.htva[data-theme="light"] #founder{background:radial-gradient(48% 70% at 0% 100%, rgba(36,71,196,.16), transparent 62%), linear-gradient(180deg, #e2e9f1, #d9e3ee);}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .faq){background:radial-gradient(60% 60% at 50% 0%, rgba(8,145,178,.12), transparent 66%), #eaeff5;}
.htva.htva[data-theme="light"] #clients{background:radial-gradient(60% 90% at 50% 0%, rgba(8,145,178,.16), transparent 62%), #e2e9f1;}

/* ================= instruments are dark objects in BOTH themes ================= */
/* scorecard (the sliders), the proof strip and the client ticker pills keep the dial in light mode */
.htva.htva .scorecard, .htva.htva .v2band .stats, .htva.htva .v2pcard{
  --bg:#05090f; --bg-2:#0a1420; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad;
  --panel:#0b1522; --panel-2:rgba(150,200,240,.10); --panel-brd:rgba(140,195,240,.20); --hair:rgba(140,195,240,.14);
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32); --live:#22d3ee;
  --warm:#ff6a2b; --v2warm:#ff6a2b; --v2amber:#ffc49b; --v2live:#22d3ee; --v2mut:color-mix(in srgb, #e9f1f8 80%, transparent);
  --v4dot:rgba(205,238,255,.26); --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%); --v4dial-2:#0b1522;
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%);
  --v4line:rgba(140,195,240,.20); --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  --v4glow-cool:0 0 40px -10px rgba(34,211,238,.45); --v4glow-warm:0 0 40px -10px rgba(255,106,43,.5);
  color:var(--text); color-scheme:dark;}
.htva.htva .v2band .stats{background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px, var(--v4dial);}
.htva.htva .v2pcard{background:var(--v4dial-2);}
.htva.htva[data-theme="light"] .scorecard .hd, .htva.htva[data-theme="light"] .scorecard .dim .dl,
.htva.htva[data-theme="light"] .scorecard .fitrow .l, .htva.htva[data-theme="light"] .scorecard .fitrow .leg{color:var(--dim);}
.htva.htva[data-theme="light"] .scorecard .fitrow .n{color:var(--accent-ink);}
.htva.htva[data-theme="light"] .scorecard .dim .bar{background:var(--panel-2); border-color:var(--hair);}
.htva.htva[data-theme="light"] .v2band .stat .n{color:var(--accent-ink);}
.htva.htva[data-theme="light"] .v2band .stat .n.warm{color:#ffc49b;}
.htva.htva[data-theme="light"] .v2band .stat .l{color:var(--dim);}
.htva.htva[data-theme="light"] .v2pcard .v2nm{color:var(--text);}
.htva.htva[data-theme="light"] .v2pcard .v2rl{color:var(--dim);}

/* ================= the ticker + proof strip form ONE dark band in both themes ================= */
.htva.htva .v2wall{padding-bottom:0;}
.htva.htva .v2marqwrap, .htva.htva .v2marqnote, .htva.htva .v2band{
  --bg:#05090f; --bg-2:#0a1420; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14);
  --accent:#22d3ee; --accent-ink:#67e8f9; --v2mut:color-mix(in srgb, #e9f1f8 80%, transparent);
  color:var(--text); color-scheme:dark;}
.htva.htva .v2marqwrap{margin-top:0; padding:56px 0 14px;
  background:radial-gradient(60% 80% at 50% 0%, rgba(34,211,238,.12), transparent 60%), #05090f;}
.htva.htva .v2marqnote{margin:0; padding:6px 24px 72px; background:#05090f; color:var(--dim);}
.htva.htva .v2band{background:radial-gradient(50% 90% at 50% 100%, rgba(255,106,43,.10), transparent 62%), #05090f;}
.htva.htva .vmore{margin-top:30px; padding-bottom:56px;}
.htva.htva[data-theme="light"] .v2band{background:radial-gradient(50% 90% at 50% 100%, rgba(255,106,43,.10), transparent 62%), #05090f;}
.htva.htva[data-theme="light"] .v2marqnote{color:#b6c6d6;}

/* ================= light theme headings: one ink, not a 95% slate blue ================= */
/* (dark-locked rooms keep their own, higher-specificity heading rules) */
.htva.htva[data-theme="light"] h1, .htva.htva[data-theme="light"] h2, .htva.htva[data-theme="light"] h3,
.htva.htva[data-theme="light"] .h2{color:#0f1e2e;}
.htva.htva[data-theme="light"] .mk{background-image:linear-gradient(90deg, rgba(8,145,178,.55), transparent);}
.htva.htva[data-theme="light"] .kicker{color:#0e7490;}

/* ================= dark rooms are theme-proof: identical accents in both themes ================= */
.htva.htva .tp-closer, .htva.htva .v2askai, .htva.htva .foot, .htva.htva .v2funnel, .htva.htva .v2ops,
.htva.htva .scorecard, .htva.htva .v2band, .htva.htva .v2marqwrap, .htva.htva .v2marqnote, .htva.htva .v2pcard{
  --v2warm:#ff6a2b; --v2warm-2:#ff6a2b; --v2amber:#ffc49b; --v2live:#22d3ee; --live:#22d3ee;
  --v2cool:#22d3ee; --v2cool-ink:#67e8f9; --v2surface:#0b1522; --v2line:rgba(140,195,240,.16);
  --v2mut:color-mix(in srgb, #e9f1f8 80%, transparent);
  --ember:#ff6a2b; --ember-hot:#ffc49b; --ember-deep:#b33a12; --pulse:#4d7dff; --pulse-deep:#2447c4; --warm:#ff6a2b;
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32);
  --v4dot:rgba(205,238,255,.26); --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%); --v4dial-2:#0b1522;
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%);
  --v4line:rgba(140,195,240,.20); --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  --v4glow-cool:0 0 40px -10px rgba(34,211,238,.45); --v4glow-warm:0 0 40px -10px rgba(255,106,43,.5);}
.htva.htva .v2askai-btn, .htva.htva[data-theme="light"] .v2askai-btn{background:#15151b; color:#eceaf6; border-color:rgba(255,255,255,.12);}
.htva.htva .v2askai-btn::before{background:linear-gradient(135deg, #22d3ee, #ff6a2b);}
.htva.htva[data-theme="light"] .foot a{color:#a7a6b4;} .htva.htva[data-theme="light"] .foot a:hover{color:#ffc49b;}
.htva.htva[data-theme="light"] .foot h4, .htva.htva[data-theme="light"] .foot .foot__bot{color:#7c7b8a;}
.htva.htva[data-theme="light"] .foot p{color:#a7a6b4;}
.htva.htva[data-theme="light"] .v2askai-hl{color:#67e8f9; text-decoration-color:#ff6a2b;}
/* the light-ink heading rule must never reach a dark room */
.htva.htva[data-theme="light"] .tp-closer h2, .htva.htva[data-theme="light"] .tp-closer h3,
.htva.htva[data-theme="light"] .v2askai h2, .htva.htva[data-theme="light"] .v2funnel h2, .htva.htva[data-theme="light"] .v2funnel h3,
.htva.htva[data-theme="light"] .v2ops h2, .htva.htva[data-theme="light"] .v2ops h3, .htva.htva[data-theme="light"] .foot h4{color:#eceaf6;}
.htva.htva[data-theme="light"] .tp-closer .tp-mk{color:#ff6a2b;}

/* ================= headings: one ink + the 98% ember for the key phrase; eyebrows neutral ================= */
.htva.htva .sec:not(.hero) .mk, .htva.htva .v2sb-copy .mk{
  background:linear-gradient(100deg, #ffc49b 0%, #ff6a2b 55%, #ea580c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#ff6a2b;
  padding-right:.06em; text-shadow:none;}
.htva.htva[data-theme="light"] .sec:not(.hero) .mk{
  background:linear-gradient(100deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#ea580c;}
.htva.htva[data-theme="light"] .sec:not(.hero) h2, .htva.htva[data-theme="light"] .sec:not(.hero) .h2,
.htva.htva[data-theme="light"] .sec:not(.hero) h3{color:#0f1e2e;}
/* eyebrows: dark blue on light, pale on dark - never the accent */
.htva.htva .sec:not(.hero) .kicker{color:#d5e3ef;}
.htva.htva[data-theme="light"] .sec:not(.hero) .kicker{color:#274a6e;}
.htva.htva[data-theme="light"] .v2funnel .kicker, .htva.htva[data-theme="light"] .v2ops .kicker{color:#d5e3ef;}
.htva.htva .sec:not(.hero) .v2tag{color:#d5e3ef;}
.htva.htva[data-theme="light"] .v2journey .v2tag{color:#274a6e;}
.htva.htva .v2station.good .v2tag{color:#d5e3ef;}
.htva.htva[data-theme="light"] .v2station.good .v2tag{color:#274a6e;}
.htva.htva .sec:not(.hero) .kicker .hmark, .htva.htva .sec:not(.hero) .kicker::before{color:inherit; background-color:currentcolor;}

/* ops room: outrank the broad light-mode ink rule (.sec:not(.hero) is (0,5,x)) */
.htva.htva[data-theme="light"] .sec.v2ops h2, .htva.htva[data-theme="light"] .sec.v2ops h3,
.htva.htva[data-theme="light"] .sec.v2ops .h2{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec.v2ops .kicker, .htva.htva .sec.v2ops .kicker{color:#d5e3ef;}
/* the beam under the console: more presence */
.htva.htva .v2ops::before{opacity:.8; transform:translate(-620px, 10px) rotate(19.85deg);
  -webkit-mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.75) 45%, transparent 80%);
  mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.75) 45%, transparent 80%);}

/* ================= SUBPAGES: the same language on every template ================= */

/* ---- hero: follows the theme (dark room only on the homepage); framed photo ---- */
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs){
  --bg:#eaeff5; --bg-2:#e2e9f1; --grid:rgba(20,70,120,.05); --panel:#ffffff; --panel-2:#f5f8fc; --panel-brd:rgba(18,45,75,.10);
  --glass:rgba(255,255,255,.7); --text:#10202f; --dim:#4c6076; --mut:#748899; --hair:rgba(18,45,75,.10);
  --accent:#0891b2; --accent-2:#0284c7; --accent-ink:#0e7490; --accent-glow:rgba(8,145,178,.20);
  --cta-bg:linear-gradient(135deg,#0891b2,#0e7490); --cta-fg:#ffffff; --halo:rgba(10,140,190,.12); --logo-op:.07;
  color-scheme:light; color:var(--text);
  background:radial-gradient(60% 70% at 100% 0%, rgba(8,145,178,.14), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(221,84,7,.10), transparent 60%), #eaeff5;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) h1, .htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .kin{color:#0f1e2e;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .mk{color:#ea580c;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .btn-ghost{color:#10202f; border-color:rgba(18,45,75,.2);}
.htva.htva[data-theme="dark"] .sec.hero:has(.crumbs), .htva.htva .page-hero{
  background:radial-gradient(60% 70% at 100% 0%, rgba(34,211,238,.14), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(255,106,43,.12), transparent 60%), var(--bg);}
.htva.htva[data-theme="light"] .page-hero{
  background:radial-gradient(60% 70% at 100% 0%, rgba(8,145,178,.14), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(221,84,7,.10), transparent 60%), #eaeff5;}
.htva.htva .sec.hero:has(.crumbs) .hero__grid img, .htva.htva .page-hero img.roleshero, .htva.htva .page-hero .rhero__media img{
  border-radius:22px; outline:1px solid var(--v4line); box-shadow:var(--v4shadow), var(--v4glow-cool);}
.htva.htva .sec.hero:has(.crumbs){padding-bottom:120px;}

/* ---- proof strip: the stat band right under a hero lifts into its foot, dark in both themes ---- */
.htva.htva .sec.hero + .sec.sm:has(> .wrap > .stats):not(.v2band), .htva.htva .page-hero + .sec.sm:has(> .wrap > .stats){
  padding:0 0 72px; margin-top:-60px; position:relative; z-index:3; background:transparent;}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stats{
  --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14); --accent-ink:#67e8f9; --warm:#ff6a2b;
  gap:0; padding:28px 12px; border-radius:22px; color:var(--text); color-scheme:dark;
  background:var(--v4plate-dark), var(--v4dots-dark) 0 0 / 4px 4px, linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  border:1px solid rgba(140,195,240,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.085), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(255,106,43,.35);}
.htva.htva{--v4plate-dark:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%); --v4dots-dark:radial-gradient(rgba(205,238,255,.26) .6px, transparent 1.1px);}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat{padding:4px 28px; border-left:1px solid var(--hair);}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat:first-child{border-left:0;}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat .n{font-size:clamp(30px, 3.4vw, 44px); color:#67e8f9; text-shadow:0 0 26px rgba(34,211,238,.35);}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat .n.warm{color:#ffc49b; text-shadow:0 0 26px rgba(255,106,43,.45); filter:none;}
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat .l{font-size:13px; margin-top:6px; color:#b6c6d6;}
@media (max-width:768px){
  .htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stats{gap:22px 0; padding:22px 8px;}
  .htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band) .stat{border-left:0; padding:0 18px;}
}

/* ---- cards: the dial, both themes; image cards keep the photo flush at the top ---- */
.htva.htva .card{background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px, var(--v4dial); border:1px solid var(--v4line);
  border-radius:18px; box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow);}
.htva.htva .card:hover{border-color:rgba(255,106,43,.6); box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow), var(--v4glow-warm); transform:translateY(-3px);}
.htva.htva .card .idx{color:var(--ember-hot);}
.htva.htva[data-theme="light"] .card .idx{color:#dd5407;}
.htva.htva a.card:has(.rc-media){padding:0;}
.htva.htva .rc-media{height:160px; border-bottom:1px solid var(--hair);}
.htva.htva .card:hover .rc-media img{transform:scale(1.04);}
.htva.htva .card h3, .htva.htva .card .h3{color:var(--text);}
.htva.htva .card p{color:var(--dim);}

/* ---- steps: the process rail language ---- */
.htva.htva .step{border-top:1px solid var(--hair); padding-top:22px;}
.htva.htva .step .no{color:var(--ember-hot);}
.htva.htva[data-theme="light"] .step .no{color:#dd5407;}
.htva.htva .step .no::before{background:linear-gradient(90deg, var(--ember), var(--accent)); width:56px;}
.htva.htva .step h3{color:var(--text);}
.htva.htva .step p{color:var(--dim);}

/* ---- timeline cards (about) + stat tiles ---- */
.htva.htva .tl li > div, .htva.htva .tl .tlc{background:var(--v4plate), var(--v4dots) 0 0 / 4px 4px, var(--v4dial); border:1px solid var(--v4line); box-shadow:inset 0 1px 0 var(--v4edge), var(--v4shadow);}
.htva.htva .tl::before{background:linear-gradient(180deg, var(--ember), var(--accent) 60%, transparent);}

/* ---- section rhythm: alternate light falls; no hairlines ---- */
.htva.htva main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){
  background:radial-gradient(55% 60% at 100% 0%, rgba(34,211,238,.10), transparent 62%), var(--bg);}
.htva.htva main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(odd):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){
  background:radial-gradient(50% 60% at 0% 100%, rgba(255,106,43,.09), transparent 62%), var(--bg);}
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){
  background:radial-gradient(55% 60% at 100% 0%, rgba(8,145,178,.14), transparent 62%), #e4ebf3;}
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(odd):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){
  background:radial-gradient(50% 60% at 0% 100%, rgba(221,84,7,.10), transparent 62%), #eef2f7;}
.htva.htva .sec{border-top:0; border-bottom:0;}

/* ---- CTA close: the Timepiece's room, both themes, flowing into the footer ---- */
.htva.htva .sec.cta{
  --bg:#0b0b0e; --text:#eceaf6; --dim:#a7a6b4; --mut:#7c7b8a; --hair:rgba(255,255,255,.08); --accent:#22d3ee; --accent-ink:#67e8f9;
  --accent-glow:rgba(34,211,238,.32); --cta-bg:linear-gradient(135deg,#22d3ee,#0ea5c4); --cta-fg:#03212b; --panel-brd:rgba(255,255,255,.14);
  color:var(--text); color-scheme:dark; border-top:0; isolation:isolate; overflow:hidden; padding:110px 0 120px;
  background:radial-gradient(60% 80% at 10% 100%, rgba(255,106,43,.18), transparent 60%), radial-gradient(50% 70% at 92% 0%, rgba(77,125,255,.16), transparent 60%),
    radial-gradient(90% 120% at 30% 50%, #101014 0%, #0b0b0e 62%);}
.htva.htva .sec.cta .cta__glow{display:none;}
.htva.htva .sec.cta::before{content:""; position:absolute; left:50%; top:50%; width:2000px; height:400px; z-index:0; pointer-events:none;
  transform:translate(-1500px, -40px) rotate(19.85deg); transform-origin:1060px 170px;
  background:url(/uploads/htva-closer-beam.png) 0 0 / 100% 100% no-repeat; opacity:.5;
  -webkit-mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%); mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%);}
.htva.htva .sec.cta::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,196,155,.5) .6px, transparent 1.1px); background-size:4px 4px; opacity:.12;
  -webkit-mask:radial-gradient(70% 90% at 10% 100%, #000, rgba(0,0,0,.35) 50%, transparent 80%); mask:radial-gradient(70% 90% at 10% 100%, #000, rgba(0,0,0,.35) 50%, transparent 80%);}
.htva.htva .sec.cta > .wrap{position:relative; z-index:1;}
.htva.htva .sec.cta h2, .htva.htva[data-theme="light"] .sec.cta h2, .htva.htva[data-theme="light"] .sec.cta .h2{color:#eceaf6; font-size:clamp(34px, 4.4vw, 56px);}
.htva.htva .sec.cta .mk, .htva.htva[data-theme="light"] .sec.cta .mk{background:linear-gradient(100deg, #ffc49b 0%, #ff6a2b 55%, #ea580c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.htva.htva .sec.cta .lead, .htva.htva .sec.cta p, .htva.htva[data-theme="light"] .sec.cta p{color:#a7a6b4;}
.htva.htva .sec.cta .kicker, .htva.htva[data-theme="light"] .sec.cta .kicker{color:#d5e3ef;}
.htva.htva .sec.cta .btn-primary{background:linear-gradient(180deg, #fff7ef, #ffd7b8); color:#2a0d02; box-shadow:0 0 0 1px rgba(255,196,155,.5), 0 18px 44px -12px rgba(255,106,43,.6); text-shadow:none;}
.htva.htva .sec.cta .btn-ghost{color:#eceaf6; border-color:rgba(255,255,255,.18);}
.htva.htva .sec.cta .ck, .htva.htva .sec.cta .hero__trust, .htva.htva .sec.cta .tp-reassure{color:#a7a6b4;}
.htva.htva .sec.cta .ck{color:#ff6a2b;}
.htva.htva .foot{padding-top:64px;}

/* stat bands anywhere on a subpage are dark instrument strips (not only under a hero) */
.htva.htva .sec.sm:has(> .wrap > .stats):not(.v2band){background:transparent; padding:24px 0 64px;}
.htva.htva .sec.hero + .sec.sm:has(> .wrap > .stats):not(.v2band), .htva.htva .page-hero + .sec.sm:has(> .wrap > .stats){padding:0 0 72px; margin-top:-60px;}
/* dark CTA room: ghost buttons must read on the dark ground in light mode too */
.htva.htva .sec.cta .btn-ghost, .htva.htva[data-theme="light"] .sec.cta .btn-ghost{background:transparent; color:#eceaf6; border:1px solid rgba(255,255,255,.22); box-shadow:none;}
.htva.htva .sec.cta .btn-ghost:hover, .htva.htva[data-theme="light"] .sec.cta .btn-ghost:hover{border-color:#ff6a2b; color:#ffc49b;}
.htva.htva .sec.cta .btn-primary, .htva.htva[data-theme="light"] .sec.cta .btn-primary{background:linear-gradient(180deg, #fff7ef, #ffd7b8); color:#2a0d02;}
/* check icons are always small (contact page rendered two of them at column width) */
.htva.htva svg.ck{width:16px; height:16px; flex:none;}

/* ================= hero map: the US contour burns (ember gradient + glow), not pale ================= */
.htva.htva .tmap .tusa-o{stroke:url(#tcontgrad); stroke-opacity:1; stroke-width:3; filter:drop-shadow(0 0 5px rgba(255,106,43,.55)) drop-shadow(0 0 14px rgba(255,106,43,.25));}
.htva.htva .tmap .tusa-i{stroke:rgba(255,196,155,.55); stroke-width:1;}
/* subpage heroes: key phrase burns in both themes (the homepage map hero keeps its own marker) */
.htva.htva .sec.hero:has(.crumbs) .mk, .htva.htva .page-hero .mk{
  background:linear-gradient(100deg, #ffc49b 0%, #ff6a2b 55%, #ea580c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#ff6a2b; padding-right:.06em; text-shadow:none;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .mk, .htva.htva[data-theme="light"] .page-hero .mk{
  background:linear-gradient(100deg, #f97316 0%, #ea580c 55%, #c2410c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#ea580c;}

/* ================= LIGHT THEME RHYTHM: dark rooms like the homepage ================= */
/* 1. every hero is a dark room (header + hero always dark), with corner dots like the homepage hero */
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs), .htva.htva[data-theme="light"] .page-hero,
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid), .htva.htva[data-theme="light"] .sec:has(> .wrap > .head + .vgrid),
.htva.htva[data-theme="light"] .rsc-hero{
  --bg:#05090f; --bg-2:#0a1420; --grid:rgba(120,190,240,.05); --panel:#0b1522; --panel-2:rgba(150,200,240,.10); --panel-brd:rgba(140,195,240,.20);
  --glass:#0a1220; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14);
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32);
  --cta-bg:linear-gradient(135deg,#22d3ee,#0ea5c4); --cta-fg:#03212b; --halo:rgba(34,150,220,.20); --logo-op:.16;
  --v2mut:color-mix(in srgb, #e9f1f8 80%, transparent); --ember:#ff6a2b; --ember-hot:#ffc49b; --pulse:#4d7dff;
  --v4dot:rgba(205,238,255,.26); --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%); --v4dial-2:#0b1522;
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%);
  --v4line:rgba(140,195,240,.20); --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  --v4glow-cool:0 0 40px -10px rgba(34,211,238,.45); --v4glow-warm:0 0 40px -10px rgba(255,106,43,.5);
  color:var(--text); color-scheme:dark;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs), .htva.htva[data-theme="light"] .page-hero{
  background:radial-gradient(60% 70% at 100% 0%, rgba(34,211,238,.16), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(255,106,43,.14), transparent 60%), #05090f;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) h1, .htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .kin,
.htva.htva[data-theme="light"] .page-hero h1, .htva.htva[data-theme="light"] .page-hero .kin,
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) h2, .htva.htva[data-theme="light"] .page-hero h2{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .lead, .htva.htva[data-theme="light"] .page-hero .lead,
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) p, .htva.htva[data-theme="light"] .page-hero p{color:#b6c6d6;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .kicker, .htva.htva[data-theme="light"] .page-hero .kicker{color:#d5e3ef;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .btn-ghost, .htva.htva[data-theme="light"] .page-hero .btn-ghost{color:#e9f1f8; border-color:rgba(255,255,255,.2); background:transparent;}
.htva.htva[data-theme="light"] .sec.hero:has(.crumbs) .crumbs, .htva.htva[data-theme="light"] .page-hero .crumbs{color:#b6c6d6;}

/* 2. the testimonial section is the mid-page dark room (roles, industries, about, industry pages) */
.htva.htva .sec:has(> .wrap > .vgrid), .htva.htva .sec:has(> .wrap > .head + .vgrid){
  position:relative; isolation:isolate;
  background:radial-gradient(60% 60% at 50% 0%, rgba(34,211,238,.14), transparent 64%), radial-gradient(40% 50% at 100% 100%, rgba(255,106,43,.12), transparent 62%), #05090f;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) h2, .htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .h2,
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) h3{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .lead, .htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) p{color:#b6c6d6;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .vcard p{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .vcard:not(:nth-child(2)) p{color:#b6c6d6;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .kicker{color:#d5e3ef;}
.htva.htva[data-theme="light"] .sec:has(> .wrap > .vgrid) .vmore a{color:#e9f1f8;}

/* 3. dots in the grounds: corner fields on the dark rooms, a faint one on every other light section, footer ember corner stronger */
.htva.htva .sec.hero:has(.crumbs)::before, .htva.htva .page-hero::before, .htva.htva .sec:has(> .wrap > .vgrid)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(205,238,255,.55) .7px, transparent 1.2px); background-size:4px 4px; opacity:.2;
  -webkit-mask:radial-gradient(50% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask:radial-gradient(50% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);}
.htva.htva .sec.hero:has(.crumbs), .htva.htva .page-hero{position:relative; isolation:isolate;}
.htva.htva .sec.hero:has(.crumbs) > .wrap, .htva.htva .page-hero > .wrap, .htva.htva .sec:has(> .wrap > .vgrid) > .wrap{position:relative; z-index:1;}
.htva.htva .sec:has(> .wrap > .vgrid)::before{
  -webkit-mask:radial-gradient(60% 70% at 50% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%); mask:radial-gradient(60% 70% at 50% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%);}
.htva.htva main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid)):not(:has(> .wrap > .rolefig)):not(:has(> .wrap > .chips)):not(:has(.head > .lead):has(.head > .feat)):not(:has(.vibe__row)){position:relative; isolation:isolate;}
.htva.htva main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid))::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(205,238,255,.5) .7px, transparent 1.2px); background-size:4px 4px; opacity:.16;
  -webkit-mask:radial-gradient(45% 60% at 100% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); mask:radial-gradient(45% 60% at 100% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);}
.htva.htva[data-theme="light"] main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even):not(:has(> .wrap > .vgrid))::before{
  background-image:radial-gradient(rgba(14,116,144,.55) .7px, transparent 1.2px); opacity:.14;}
.htva.htva main > .sec:not(.hero):not(.page-hero):not(.cta):not(.sm):nth-of-type(even) > .wrap{position:relative; z-index:1;}
.htva.htva .foot::before{opacity:.22; background-image:radial-gradient(rgba(255,196,155,.65) .7px, transparent 1.2px);
  -webkit-mask:radial-gradient(60% 90% at 8% 0%, #000, rgba(0,0,0,.45) 50%, transparent 80%); mask:radial-gradient(60% 90% at 8% 0%, #000, rgba(0,0,0,.45) 50%, transparent 80%);}
.htva.htva .sec.cta::after{opacity:.2;}

/* article pages: hero + close dark, the body stays one continuous light read */
.htva.htva[data-theme="light"] .rsc-hero h1, .htva.htva[data-theme="light"] .rsc-hero .h1{color:#e9f1f8;}
.htva.htva[data-theme="light"] .rsc-hero p, .htva.htva[data-theme="light"] .rsc-hero .rsc-meta, .htva.htva[data-theme="light"] .rsc-hero .crumbs{color:#b6c6d6;}
.htva.htva .rsc-hero{position:relative; isolation:isolate; background:radial-gradient(60% 70% at 100% 0%, rgba(34,211,238,.14), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(255,106,43,.12), transparent 60%), #05090f; color-scheme:dark;}
.htva.htva .rsc-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(205,238,255,.55) .7px, transparent 1.2px); background-size:4px 4px; opacity:.18;
  -webkit-mask:radial-gradient(50% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask:radial-gradient(50% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);}
.htva.htva .rsc-hero > *{position:relative; z-index:1;}
/* the reassurance line under a CTA button: `.htva p{margin:0}` was beating `.reassure{margin-top}` on the <p> variant */
.htva.htva p.reassure, .htva.htva div.reassure{margin-top:24px; line-height:1.8; row-gap:6px; column-gap:18px; max-width:64ch; margin-inline:auto; text-wrap:balance;}
.htva.htva .sec.cta .reassure{color:#a7a6b4;}
.htva.htva .hero__cta + .reassure{margin-top:24px;}

/* ================= ROLE PAGES: two dark rooms between the hero and the close ================= */
/* room A: the comparison figure sits in a dark instrument panel (both themes; dark svg variant shown) */
.htva.htva .sec.sm:has(> .wrap > .rolefig){
  --bg:#05090f; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14); --accent:#22d3ee; --accent-ink:#67e8f9;
  position:relative; isolation:isolate; color:var(--text); color-scheme:dark; padding:72px 0;
  background:radial-gradient(55% 70% at 0% 0%, rgba(34,211,238,.14), transparent 60%), radial-gradient(45% 60% at 100% 100%, rgba(255,106,43,.12), transparent 60%), #05090f;}
.htva.htva .sec.sm:has(> .wrap > .rolefig)::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(205,238,255,.55) .7px, transparent 1.2px); background-size:4px 4px; opacity:.18;
  -webkit-mask:radial-gradient(50% 70% at 100% 100%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask:radial-gradient(50% 70% at 100% 100%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);}
.htva.htva .sec.sm:has(> .wrap > .rolefig) > .wrap{position:relative; z-index:1;}
.htva.htva .rolefig{padding:26px 28px; border-radius:22px; border:1px solid rgba(34,211,238,.28);
  background:var(--v4plate-dark), var(--v4dots-dark) 0 0 / 4px 4px, linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(34,211,238,.45);}
.htva.htva[data-theme="light"] .rolefig .l-dark{display:block;} .htva.htva[data-theme="light"] .rolefig .l-light{display:none;}
.htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .rolefig) h2, .htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .rolefig) h3,
.htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .rolefig) p{color:var(--text);}

/* room B: "Placed and managed" + the "where this role fits" chips = one dark band with the beam (the ops room) */
.htva.htva .sec:not(.sm):has(.head > .lead):has(.head > .feat), .htva.htva .sec.sm:has(> .wrap > .chips){
  --bg:#05090f; --bg-2:#0a1420; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14); --panel:#0b1522; --panel-brd:rgba(140,195,240,.2);
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32); --ember:#ff6a2b; --ember-hot:#ffc49b;
  --v4dot:rgba(205,238,255,.26); --v4dial:linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%); --v4dial-2:#0b1522;
  --v4plate:radial-gradient(110% 85% at 50% 50%, #0b1522 0%, #0b1522 34%, rgba(11,21,34,0) 82%); --v4line:rgba(140,195,240,.20); --v4edge:rgba(255,255,255,.085);
  --v4shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 10px 22px -14px rgba(0,0,0,.7);
  position:relative; isolation:isolate; overflow:hidden; color:var(--text); color-scheme:dark; background:#05090f;}
.htva.htva .sec:not(.sm):has(.head > .lead):has(.head > .feat){padding-bottom:40px;
  background:radial-gradient(50% 70% at 100% 0%, rgba(255,106,43,.14), transparent 60%), #05090f;}
.htva.htva .sec.sm:has(> .wrap > .chips){padding-top:8px; padding-bottom:88px;
  background:radial-gradient(50% 80% at 0% 100%, rgba(34,211,238,.14), transparent 60%), #05090f;}
.htva.htva .sec:not(.sm):has(.head > .lead):has(.head > .feat)::before{content:""; position:absolute; left:50%; top:50%; width:2000px; height:400px; z-index:0; pointer-events:none;
  transform:translate(-300px, -60px) rotate(19.85deg); transform-origin:1060px 170px;
  background:url(/uploads/htva-closer-beam.png) 0 0 / 100% 100% no-repeat; opacity:.5;
  -webkit-mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%); mask:radial-gradient(60% 75% at 50% 50%, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%);}
.htva.htva .sec:not(.sm):has(.head > .lead):has(.head > .feat) > .wrap, .htva.htva .sec.sm:has(> .wrap > .chips) > .wrap{position:relative; z-index:1;}
.htva.htva[data-theme="light"] .sec:not(.sm):has(.head > .lead):has(.head > .feat) h2, .htva.htva[data-theme="light"] .sec:not(.sm):has(.head > .lead):has(.head > .feat) .h2,
.htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .chips) h2, .htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .chips) h3{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec:not(.sm):has(.head > .lead):has(.head > .feat) .lead,
.htva.htva[data-theme="light"] .sec:not(.sm):has(.head > .lead):has(.head > .feat) .feat li, .htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .chips) p{color:#b6c6d6;}
.htva.htva[data-theme="light"] .sec:not(.sm):has(.head > .lead):has(.head > .feat) .kicker, .htva.htva[data-theme="light"] .sec.sm:has(> .wrap > .chips) .kicker{color:#d5e3ef;}
.htva.htva .sec.sm:has(> .wrap > .chips) .chips a, .htva.htva .sec.sm:has(> .wrap > .chips) .chips span{background:#0b1522; color:#e9f1f8; border-color:rgba(140,195,240,.2);}
/* these rooms opt out of the parity tints */
.htva.htva main > .sec:has(> .wrap > .rolefig), .htva.htva main > .sec:has(> .wrap > .chips), .htva.htva main > .sec:has(.head > .lead):has(.head > .feat){}

/* ================= ABOUT: the V.I.B.E. values are a dark room (emphasis) ================= */
.htva.htva .sec:has(> .wrap > .vibe__row), .htva.htva .sec:has(.vibe__row){
  --bg:#05090f; --bg-2:#0a1420; --text:#e9f1f8; --dim:#b6c6d6; --mut:#8298ad; --hair:rgba(140,195,240,.14); --panel:#0b1522; --panel-brd:rgba(140,195,240,.2);
  --accent:#22d3ee; --accent-2:#38bdf8; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32); --ember:#ff6a2b; --ember-hot:#ffc49b;
  position:relative; isolation:isolate; overflow:hidden; color:var(--text); color-scheme:dark;
  background:radial-gradient(50% 70% at 0% 0%, rgba(34,211,238,.14), transparent 60%), radial-gradient(45% 60% at 100% 100%, rgba(255,106,43,.14), transparent 60%), #05090f;}
.htva.htva .sec:has(.vibe__row)::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,196,155,.55) .7px, transparent 1.2px); background-size:4px 4px; opacity:.18;
  -webkit-mask:radial-gradient(50% 70% at 100% 100%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask:radial-gradient(50% 70% at 100% 100%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);}
.htva.htva .sec:has(.vibe__row) > .wrap{position:relative; z-index:1;}
.htva.htva[data-theme="light"] .sec:has(.vibe__row) h2, .htva.htva[data-theme="light"] .sec:has(.vibe__row) .h2,
.htva.htva[data-theme="light"] .sec:has(.vibe__row) .vibe__name, .htva.htva[data-theme="light"] .sec:has(.vibe__row) h3{color:#e9f1f8;}
.htva.htva[data-theme="light"] .sec:has(.vibe__row) .vibe__body, .htva.htva[data-theme="light"] .sec:has(.vibe__row) p{color:#b6c6d6;}
.htva.htva[data-theme="light"] .sec:has(.vibe__row) .kicker{color:#d5e3ef;}
.htva.htva .sec:has(.vibe__row) .vibe__img img, .htva.htva .sec:has(.vibe__row) .vibe__img{border-radius:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(255,106,43,.35);}

/* ================= ARTICLES: tighter top, crumbs inline with the category pill (greyed) ================= */
/* .rsc-hero is the IMAGE wrapper, not a title block - undo the dark-room treatment applied to it */
.htva.htva .rsc-hero, .htva.htva[data-theme="light"] .rsc-hero{background:none; isolation:auto; color-scheme:inherit; color:inherit;}
.htva.htva .rsc-hero::before{display:none;}
.htva.htva .sec.rsc-post{padding-top:44px;}
.htva.htva .rsc-post > .wrap{display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;}
.htva.htva .rsc-post > .wrap > *{grid-column:1 / -1;}
.htva.htva .rsc-post > .wrap > .rsc-tag{grid-column:1; grid-row:1; margin-top:0 !important; justify-self:start;}
.htva.htva .rsc-post > .wrap > .crumbs{grid-column:2; grid-row:1; margin:0; font-size:12.5px; color:var(--mut); opacity:.85;}
.htva.htva .rsc-post > .wrap > .crumbs a{color:var(--mut);} .htva.htva .rsc-post > .wrap > .crumbs a:hover{color:var(--text);}
.htva.htva .rsc-post > .wrap > .crumbs .here{color:var(--mut);}
.htva.htva .rsc-post > .wrap > h1{margin-top:18px !important;}
.htva.htva .rsc-post > .wrap > .rsc-ameta{margin-top:12px;}
.htva.htva .rsc-post > .wrap > .rsc-hero{margin-top:22px;}


/* src/styles/htva-start-1.css */
/* src/styles/htva-start-1.css: /start booking page. The calendar sits in a white card at its full height
   (the GHL shim sizes the frame), so the page never shows a second scrollbar. */
.htva.htva.htva .start-hero { padding-top: 128px; }
.htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 56px; }
.htva.htva.htva .start-hero .panel2 > .reveal { position: sticky; top: 110px; }
.htva.htva.htva .start-calwrap {
  background: #fff; border-radius: 18px; padding: 10px; min-width: 0;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .35), 0 30px 80px -34px rgba(249, 115, 22, .5), 0 24px 60px -30px rgba(0, 0, 0, .55);
}
.htva.htva.htva .start-calwrap iframe { display: block; width: 100%; border: 0; border-radius: 12px; overflow: hidden; }
@media (max-width: 960px) {
  .htva.htva.htva .start-hero { padding-top: 104px; }
  .htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .htva.htva.htva .start-hero .panel2 > .reveal { position: static; }
  .htva.htva.htva .start-calwrap { padding: 4px; border-radius: 14px; }
}


/* src/styles/htva-start-2.css */
/* src/styles/htva-start-2.css: /start calendar at 440px, GHL's compact layout; no white mat around GHL's own card. */
.htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; }
.htva.htva.htva .start-hero .panel2 > .reveal { padding-top: 56px; }
.htva.htva.htva .start-calwrap { width: 100%; max-width: 440px; justify-self: end; padding: 0; overflow: hidden; border-radius: 16px; }
.htva.htva.htva .start-calwrap iframe { border-radius: 16px; }
@media (max-width: 960px) {
  .htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva .start-hero .panel2 > .reveal { padding-top: 0; }
  .htva.htva.htva .start-calwrap { justify-self: center; }
}


/* src/styles/htva-start-3.css */
/* src/styles/htva-start-3.css: /start, owner: copy one third, calendar two thirds. At ~760px GHL lays the month
   and the time slots side by side, so times show without scrolling. Supersedes the 440px column of htva-start-2. */
.htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.htva.htva.htva .start-hero .panel2 > .reveal { padding-top: 40px; }
.htva.htva.htva .start-hero .feat { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.htva.htva.htva .start-calwrap { max-width: none; justify-self: stretch; }
@media (max-width: 960px) {
  .htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .htva.htva.htva .start-hero .panel2 > .reveal { padding-top: 0; }
}


/* src/styles/htva-start-4.css */
/* src/styles/htva-start-4.css: /start, owner: the calendar card keeps one height on desktop so it doesn't jump
   when a day has fewer time slots or the form step opens. 844px = the tallest step (calendar with a full day of slots);
   the GHL shim can still grow it, never shrink it. */
@media (min-width: 961px) {
  .htva.htva.htva .start-calwrap iframe { min-height: 844px; }
}


/* src/styles/htva-start-5.css */
/* src/styles/htva-start-5.css: /start, the GHL calendar turns dark with the visitor's device setting (its custom CSS
   uses prefers-color-scheme; a cross-origin frame can't see the site toggle). The frame around it follows the same signal. */
@media (prefers-color-scheme: dark) {
  .htva.htva.htva .start-calwrap { background: #0F1B2A; box-shadow: 0 0 0 1px rgba(249, 115, 22, .35), 0 30px 80px -34px rgba(249, 115, 22, .45), 0 24px 60px -30px rgba(0, 0, 0, .6); }
}


/* src/styles/htva-start-6.css */
/* src/styles/htva-start-6.css: /start, owner: keep GHL's two-column calendar (month beside the times). GHL drops to its
   stacked mobile layout below a ~730px frame, so the calendar column never goes under 780px: the section widens to
   1320px, and where copy + 780px don't fit side by side the copy sits above and the calendar takes the full width. */
.htva.htva.htva .start-hero .wrap { max-width: 1320px; }
@media (min-width: 1200px) {
  .htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr) minmax(780px, 2fr); }
}
@media (max-width: 1199px) {
  .htva.htva.htva .start-hero .panel2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .htva.htva.htva .start-hero .panel2 > .reveal { position: static; padding-top: 0; max-width: 680px; }
}


/* src/styles/htva-start-7.css */
/* src/styles/htva-start-7.css: /start, on the step to the form GHL calls scrollIntoView(true) on its card, which
   scrolls every ancestor of the frame. The hero clipped with overflow:hidden (still a scroll container, so it slid
   its contents up 128px), and the window scrolled the card under the fixed header. clip looks the same but can't be
   scrolled; the scroll padding stops the window at the card's own resting place, so the page stays put. */
.htva.htva.htva .start-hero { overflow: clip; }
html:has(.start-calwrap) { scroll-padding-top: 210px; }


/* src/styles/htva-sw-core-2.css */
/* src/styles/htva-sw-core-2.css: sitewide style sweep, CORE family (/human-talent, /digital-employees, /how-it-works,
   /global-recruiting), 2026-10-16. Matches the /v10 homepage language; adapted from htva-sw-industries-3.css.
   Everything is scoped to .sw-core, a class only these four pages' root .htva div carries.
   1. Body-font kickers, chips, card indexes, step stamps (the homepage re-tokens --f-mono the same way).
   2. Section surfaces: .swc-plain (page), .swc-paper (dotted grid on --panel), .swc-dark (navy, orange/cyan glows, both themes).
   3. Shared blocks: answer card, checklist as a card grid, cards with a gradient edge, quotes, chips, steps, table.
   4. Page graphics: stat strip + VA/Digital Employee pairing (human-talent), virtual floor (how-it-works),
      five-regions flow + language bubbles (global-recruiting).
   5. Closer buttons as the homepage closer pills; hover lifts everywhere (reduced motion respected). */

.htva.htva.htva.sw-core {
  --f-mono: var(--f-body);
  --swc-card: #0d1826; --swc-card-brd: rgba(140, 195, 240, .16);
  --swc-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
}
.htva.htva.htva.sw-core[data-theme="light"] {
  --swc-card: #ffffff; --swc-card-brd: rgba(18, 45, 75, .10);
  --swc-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 35, 60, .38), 0 2px 6px -2px rgba(15, 35, 60, .08);
}

/* ---- 1. section heads ---- */
.htva.htva.htva.sw-core .swc-c .head { text-align: center; margin-inline: auto; }
.htva.htva.htva.sw-core .swc-c .head .kicker { justify-content: center; }
.htva.htva.htva.sw-core .swc-c .head .lead { margin-inline: auto; max-width: 62ch; }
.htva.htva.htva.sw-core .swc-c .cap-more { justify-content: center; }
.htva.htva.htva.sw-core .kicker--logo .hmark { flex: none; }
.htva.htva.htva.sw-core .head .kicker.c { justify-content: center; }
.htva.htva.htva.sw-core .kicker { letter-spacing: .14em; }

/* ---- 2. surfaces (the light theme's parity tints carry very high specificity, hence !important) ---- */
.htva.htva.htva.sw-core main > .sec:is(.swc-plain, .swc-paper) {
  --bg: inherit; --bg-2: inherit; --text: inherit; --dim: inherit; --mut: inherit; --hair: inherit; --panel: inherit;
  --panel-brd: inherit; --accent: inherit; --accent-2: inherit; --accent-ink: inherit; --accent-glow: inherit;
  color-scheme: inherit; color: var(--text);
}
.htva.htva.htva.sw-core main > .sec.swc-plain { background: var(--bg) !important; }
.htva.htva.htva.sw-core main > .sec.swc-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel) !important;
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva.sw-core main > .sec:is(.swc-plain, .swc-paper, .swc-dark)::before { display: none; }
.htva.htva.htva.sw-core main > .sec.swc-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --hair: rgba(140, 195, 240, .14); --accent: #22d3ee; --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16);
  --swc-card: #0d1826; --swc-card-brd: rgba(140, 195, 240, .16);
  --swc-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark; color: var(--text); position: relative; isolation: isolate; border: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
}
.htva.htva.htva.sw-core main > .sec.swc-dark :is(h2, h3, .h2, .h3) { color: #f1f6fb; }
.htva.htva.htva.sw-core main > .sec.swc-dark :is(p, .lead) { color: #b6c6d6; }
.htva.htva.htva.sw-core main > .sec.swc-dark .kicker { color: #d5e3ef; }
.htva.htva.htva.sw-core main > .sec.swc-dark .mk { color: #ff8a45; }
.htva.htva.htva.sw-core main > .sec.swc-dark .cpx-go { color: #67e8f9; }

/* ---- 3a. answer card ---- */
.htva.htva.htva.sw-core .swc-what .cap-answer {
  position: relative; overflow: hidden; max-width: 880px; margin: 30px auto 0; padding: 32px 40px 30px 44px;
  border-radius: 18px; background: var(--swc-card); border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow);
  text-align: left;
}
.htva.htva.htva.sw-core .swc-what .cap-answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-core .swc-what .cap-answer::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 43, .16), transparent);
}
.htva.htva.htva.sw-core .swc-what .cap-answer p { position: relative; z-index: 1; font-size: 16.5px; line-height: 1.75; color: var(--dim); max-width: none; }
.htva.htva.htva.sw-core .swc-what .cap-answer p:last-child { margin-bottom: 0; }
.htva.htva.htva.sw-core .swc-what .cap-answer strong {
  display: block; margin-bottom: 10px; font-family: var(--f-head); font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--text);
}

/* ---- 3b. checklist (feat cols2) as a card grid ---- */
.htva.htva.htva.sw-core .swc-feat .feat.cols2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px auto 0; max-width: 1040px;
}
.htva.htva.htva.sw-core .swc-feat .feat li {
  position: relative; display: flex; align-items: center; min-height: 70px; margin: 0; padding: 14px 20px 14px 70px; border-radius: 16px;
  background: var(--swc-card); border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow);
  color: var(--text) !important; font-size: 15.5px; line-height: 1.5; text-align: left;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.htva.htva.htva.sw-core .swc-feat .feat li::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 138, 69, .20), rgba(255, 106, 43, .10)); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .30);
}
.htva.htva.htva.sw-core .swc-feat .feat li .ck { position: absolute; left: 27px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; color: #ff6a2b; }
.htva.htva.htva.sw-core .swc-feat .feat li:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45); }

/* ---- 3c. cards with a gradient top edge ---- */
.htva.htva.htva.sw-core .swc-cards .card {
  position: relative; overflow: hidden; border-radius: 18px; text-align: left;
  background: var(--swc-card); border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow);
}
.htva.htva.htva.sw-core .swc-cards .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-core .swc-cards .card .idx { letter-spacing: .12em; font-weight: 600; }
.htva.htva.htva.sw-core .swc-cards .card:hover { border-color: rgba(255, 106, 43, .45); }

/* ---- 3d. quotes on a dark band ---- */
.htva.htva.htva.sw-core .swc-quotes .card.quote {
  border-radius: 18px; text-align: left; background: linear-gradient(180deg, #101c2c, #0b1522) !important;
  border: 1px solid rgba(140, 195, 240, .16) !important; box-shadow: var(--swc-shadow) !important;
}
.htva.htva.htva.sw-core .swc-quotes .card.quote p { color: #d5e3ef !important; }
.htva.htva.htva.sw-core .swc-quotes .card.quote .rt { color: #ffb37f !important; }
.htva.htva.htva.sw-core .swc-quotes .card.quote .who,
.htva.htva.htva.sw-core .swc-quotes .card.quote .who * { color: #b6c6d6 !important; }
.htva.htva.htva.sw-core .swc-quotes .card.quote .who :first-child { color: #f1f6fb !important; }
.htva.htva.htva.sw-core .swc-quotes .card.quote:hover { border-color: rgba(255, 106, 43, .45) !important; }
.htva.htva.htva.sw-core .swc-quotes .qgrid:not(:has(> :nth-child(3))) { max-width: 760px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- 3e. chips ---- */
.htva.htva.htva.sw-core main > .sec.swc-chipsec.swc-dark { padding-top: 76px; padding-bottom: 80px; }
.htva.htva.htva.sw-core .swc-chipsec .chips { justify-content: center; gap: 10px 12px; }
.htva.htva.htva.sw-core .swc-chipsec .ic-chip {
  border-radius: 999px; padding: 10px 18px; font-size: 14px; letter-spacing: 0; text-transform: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.htva.htva.htva.sw-core .swc-chipsec .ic-chip:hover { transform: translateY(-2px); border-color: rgba(255, 106, 43, .55); }
.htva.htva.htva.sw-core .swc-chipsec.swc-plain .ic-chip {
  background: var(--swc-card) !important; border: 1px solid var(--swc-card-brd) !important; box-shadow: var(--swc-shadow); color: var(--text) !important;
}
.htva.htva.htva.sw-core .swc-chipsec.swc-plain .ic-chip:hover { border-color: rgba(255, 106, 43, .55) !important; }
.htva.htva.htva.sw-core .swc-chipsec .ic-chip .ck { color: #ff6a2b; }

/* ---- 3f. steps: numbered cards on one rail ---- */
.htva.htva.htva.sw-core .swc-steps ol.cap-steps { position: relative; gap: 18px; counter-reset: none; }
.htva.htva.htva.sw-core .swc-steps .cap-steps .step {
  position: relative; text-align: left; padding: 24px 22px 22px; border-radius: 18px; border: 1px solid var(--swc-card-brd) !important;
  background: var(--swc-card); box-shadow: var(--swc-shadow);
}
.htva.htva.htva.sw-core .swc-steps .cap-steps .step::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #ff6a2b, #ffc49b 60%, transparent);
}
.htva.htva.htva.sw-core .swc-steps .cap-steps .step::after { display: none; }
.htva.htva.htva.sw-core .swc-steps .cap-steps .step .no {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-weight: 700; letter-spacing: .12em; font-size: 11px;
  color: #c2410c; background: rgba(255, 106, 43, .10); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .30);
}
.htva.htva.htva.sw-core:not([data-theme="light"]) .swc-steps .cap-steps .step .no { color: #ffb37f; }
.htva.htva.htva.sw-core .swc-steps .cap-steps .step:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45) !important; }

/* ---- 3g. status table ---- */
.htva.htva.htva.sw-core .swc-table .cap-table {
  margin: 30px auto 0; max-width: 1040px; border-radius: 18px; overflow: hidden; background: var(--swc-card);
  border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow); text-align: left;
}
.htva.htva.htva.sw-core .swc-table .rsc-table { margin: 0; }
.htva.htva.htva.sw-core .swc-table .rsc-table :is(th, td) { padding-left: 22px; padding-right: 22px; }
.htva.htva.htva.sw-core .swc-table .rsc-table th { letter-spacing: .1em; }
.htva.htva.htva.sw-core .swc-table .rsc-table tbody tr:hover td { background: color-mix(in srgb, #ff6a2b 6%, transparent); }

/* ---- 3h. hybrid lane on the dark band ---- */
.htva.htva.htva.sw-core .swc-hybrid .cap-lane--wide { margin: 36px auto 0; text-align: left; border-color: rgba(34, 211, 238, .28); }

/* ---- 4a. human-talent: stat strip + pairing figure ---- */
.htva.htva.htva.sw-core .swc-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; margin: 34px auto 0; border-radius: 18px; overflow: hidden;
  background: var(--swc-card); border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow);
}
.htva.htva.htva.sw-core .swc-stat { display: grid; gap: 4px; padding: 22px 24px; text-align: center; }
.htva.htva.htva.sw-core .swc-stat + .swc-stat { border-left: 1px solid var(--swc-card-brd); }
.htva.htva.htva.sw-core .swc-stat__n {
  font-family: var(--f-head); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(90deg, #ff6a2b, #ff9a5c); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.htva.htva.htva.sw-core .swc-stat__l { font-size: 14px; line-height: 1.4; color: var(--dim); }

.htva.htva.htva.sw-core .swc-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px;
  max-width: 1000px; margin: 38px auto 6px;
}
.htva.htva.htva.sw-core .swc-pair__card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 20px 22px; border-radius: 18px; text-align: center;
  background: var(--swc-card); border: 1px solid var(--swc-card-brd); box-shadow: var(--swc-shadow);
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-core .swc-pair__card:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45); }
.htva.htva.htva.sw-core .swc-pair__card--both {
  border-color: rgba(255, 106, 43, .38);
  background: radial-gradient(90% 80% at 50% 0%, rgba(255, 106, 43, .10), transparent 70%), var(--swc-card);
}
.htva.htva.htva.sw-core .swc-pair__ic { display: flex; gap: 6px; margin-bottom: 6px; }
.htva.htva.htva.sw-core .swc-pair__ic :is(.cpx-av, .cpx-de) { width: 44px; height: 44px; }
.htva.htva.htva.sw-core .swc-pair__ic :is(.cpx-av, .cpx-de)::before { width: 22px; height: 22px; }
.htva.htva.htva.sw-core .swc-pair__k { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: var(--text); }
.htva.htva.htva.sw-core .swc-pair__t { font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.htva.htva.htva.sw-core .swc-pair__op {
  align-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--f-head); font-weight: 800; font-size: 20px; color: #ff6a2b;
  background: rgba(255, 106, 43, .08); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .3);
}

/* ---- 4b. how-it-works: virtual floor ---- */
.htva.htva.htva.sw-core .swc-floor {
  position: relative; overflow: hidden; max-width: 1040px; margin: 36px auto 0; padding: 20px 22px 22px; border-radius: 22px; text-align: left;
  border: 1px solid rgba(34, 211, 238, .28);
  background: radial-gradient(60% 90% at 90% 0%, rgba(255, 106, 43, .12), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
  --text: #e9f1f8; --dim: #b6c6d6; --accent: #22d3ee; --accent-ink: #67e8f9; --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --hair: rgba(140, 195, 240, .14);
}
.htva.htva.htva.sw-core .swc-floor::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  background-size: 200% 100%; animation: cpxScan 5s linear infinite; opacity: .75;
}
.htva.htva.htva.sw-core .swc-floor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(140, 195, 240, .14); }
.htva.htva.htva.sw-core .swc-live { width: 9px; height: 9px; border-radius: 50%; background: #34d399; flex: none; animation: swcPing 2.4s ease-out infinite; }
.htva.htva.htva.sw-core .swc-floor__t { font-family: var(--f-head); font-weight: 800; font-size: 18px; color: #f1f6fb; }
.htva.htva.htva.sw-core .swc-floor__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.htva.htva.htva.sw-core .swc-floor__chip {
  font-size: 12.5px; font-weight: 600; color: #d5e3ef; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(140, 195, 240, .2); background: rgba(15, 27, 42, .8);
}
.htva.htva.htva.sw-core .swc-floor__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.htva.htva.htva.sw-core .swc-desk {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 14px;
  border: 1px solid rgba(140, 195, 240, .14); background: rgba(15, 27, 42, .75);
  opacity: 0; transform: translateY(6px); animation: cpxIn .6s ease forwards;
}
.htva.htva.htva.sw-core .swc-desk:nth-child(2) { animation-delay: .1s } .htva.htva.htva.sw-core .swc-desk:nth-child(3) { animation-delay: .2s }
.htva.htva.htva.sw-core .swc-desk:nth-child(4) { animation-delay: .3s } .htva.htva.htva.sw-core .swc-desk:nth-child(5) { animation-delay: .4s }
.htva.htva.htva.sw-core .swc-desk:nth-child(6) { animation-delay: .5s } .htva.htva.htva.sw-core .swc-desk:nth-child(7) { animation-delay: .6s }
.htva.htva.htva.sw-core .swc-desk:nth-child(8) { animation-delay: .7s }
.htva.htva.htva.sw-core .swc-desk .cpx-av { color: #67e8f9; background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .35); }
.htva.htva.htva.sw-core .swc-desk__tx { display: grid; min-width: 0; }
.htva.htva.htva.sw-core .swc-desk__r { font-size: 14px; font-weight: 600; color: #e9f1f8; line-height: 1.3; }
.htva.htva.htva.sw-core .swc-desk__s { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #8fa6bb; margin-top: 2px; }
.htva.htva.htva.sw-core .swc-desk__s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex: none; }
.htva.htva.htva.sw-core .swc-desk--am { border-color: rgba(255, 106, 43, .5); background: linear-gradient(180deg, rgba(255, 106, 43, .14), rgba(255, 106, 43, .05)); }
.htva.htva.htva.sw-core .swc-desk--am .cpx-av { color: #ffb37f; background: rgba(255, 106, 43, .16); border-color: rgba(255, 106, 43, .45); }
.htva.htva.htva.sw-core .swc-desk--am .swc-desk__s { color: #ffc49b; }
.htva.htva.htva.sw-core .swc-desk--am .swc-desk__s::before { background: #ff6a2b; animation: swcPing 2.4s ease-out infinite; }
@keyframes swcPing { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* ---- 4c. global-recruiting: five regions -> one short list; language bubbles ---- */
.htva.htva.htva.sw-core .swc-pool { max-width: 1040px; margin: 38px auto 0; }
.htva.htva.htva.sw-core .swc-pool__regs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.htva.htva.htva.sw-core .swc-reg {
  display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 16px; text-align: center;
  border: 1px solid rgba(34, 211, 238, .24); background: rgba(13, 24, 38, .85); box-shadow: var(--swc-shadow);
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-core .swc-reg:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .5); }
.htva.htva.htva.sw-core .swc-reg__dot { width: 10px; height: 10px; border-radius: 50%; background: #22d3ee; margin-bottom: 4px; box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 0 14px rgba(34, 211, 238, .6); }
.htva.htva.htva.sw-core .swc-reg__n { font-family: var(--f-head); font-weight: 700; font-size: 16.5px; color: #f1f6fb; }
.htva.htva.htva.sw-core .swc-reg__s { font-size: 12.5px; color: #8fa6bb; }
.htva.htva.htva.sw-core .swc-pool__wires { display: block; height: 110px; padding: 0 10%; }
.htva.htva.htva.sw-core .swc-pool__wires svg { display: block; width: 100%; height: 110px; overflow: visible; }
.htva.htva.htva.sw-core .swc-pool__wires svg path:nth-of-type(n+6) { animation: swcFlow 1.6s linear infinite; }
@keyframes swcFlow { to { stroke-dashoffset: -60; } }
.htva.htva.htva.sw-core .swc-pool__out {
  position: relative; display: grid; justify-items: center; gap: 4px; max-width: 500px; margin: 0 auto; padding: 20px 26px; border-radius: 18px; text-align: center;
  border: 1px solid rgba(255, 106, 43, .5);
  background: radial-gradient(90% 90% at 50% 0%, rgba(255, 106, 43, .20), transparent 70%), #0d1826;
  box-shadow: 0 0 0 6px rgba(255, 106, 43, .06), 0 24px 60px -30px rgba(255, 106, 43, .55);
}
.htva.htva.htva.sw-core .swc-pool__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb37f; }
.htva.htva.htva.sw-core .swc-pool__t { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: #f1f6fb; }
.htva.htva.htva.sw-core .swc-pool__s { font-size: 14px; color: #b6c6d6; }

.htva.htva.htva.sw-core .swc-bubbles { display: flex; justify-content: center; margin: 26px auto 0; }
.htva.htva.htva.sw-core .swc-bubbles svg { display: block; width: 300px; height: auto; overflow: visible; filter: drop-shadow(0 16px 24px rgba(15, 35, 60, .22)); }
.htva.htva.htva.sw-core .swc-bubbles svg g { animation: swcBob 5s ease-in-out infinite; }
.htva.htva.htva.sw-core .swc-bubbles svg g + g { animation-delay: -2.5s; }
@keyframes swcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* cards and tiles lift on hover */
.htva.htva.htva.sw-core main :is(.card, .step) { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.htva.htva.htva.sw-core main .card:hover { transform: translateY(-3px); }

/* ---- 5. closer: homepage closer pills ---- */
.htva.htva.htva.sw-core .sec.cta .hero__cta { justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
.htva.htva.htva.sw-core .sec.cta .btn {
  border-radius: 999px; padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 10px;
}
.htva.htva.htva.sw-core .sec.cta .btn-ghost::before {
  content: ""; width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
.htva.htva.htva.sw-core .sec.cta .reassure { font-size: 13px; letter-spacing: .01em; max-width: 920px; }

@media (max-width: 980px) {
  .htva.htva.htva.sw-core .swc-floor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htva.htva.htva.sw-core .swc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htva.htva.htva.sw-core .swc-stat:nth-child(3) { border-left: 0; }
  .htva.htva.htva.sw-core .swc-stat:nth-child(n+3) { border-top: 1px solid var(--swc-card-brd); }
  .htva.htva.htva.sw-core .swc-pair { grid-template-columns: minmax(0, 1fr); max-width: 460px; justify-items: stretch; }
  .htva.htva.htva.sw-core .swc-pair__op { justify-self: center; }
}
@media (max-width: 760px) {
  .htva.htva.htva.sw-core .swc-feat .feat.cols2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-core .swc-what .cap-answer { padding: 24px 22px 22px 26px; }
  .htva.htva.htva.sw-core .swc-what .cap-answer strong { font-size: 18.5px; }
  .htva.htva.htva.sw-core .swc-pool__regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htva.htva.htva.sw-core .swc-reg:last-child { grid-column: 1 / -1; }
  .htva.htva.htva.sw-core .swc-pool__wires { height: 56px; padding: 0; }
  .htva.htva.htva.sw-core .swc-pool__wires svg { height: 56px; }
  .htva.htva.htva.sw-core .swc-quotes .qgrid:not(:has(> :nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-core .swc-floor { padding: 16px 14px 16px; }
  .htva.htva.htva.sw-core .swc-floor__chips { margin-left: 0; }
  .htva.htva.htva.sw-core .swc-desk { padding: 12px 10px; gap: 9px; }
  .htva.htva.htva.sw-core .swc-desk .cpx-av { width: 30px; height: 30px; }
  .htva.htva.htva.sw-core .swc-desk__r { font-size: 13px; }
  .htva.htva.htva.sw-core .swc-stat { padding: 18px 12px; }
  .htva.htva.htva.sw-core .swc-stat__n { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.sw-core :is(.swc-feat .feat li, main .card, main .step, .swc-chipsec .ic-chip, .swc-pair__card, .swc-reg) { transition: none; }
  .htva.htva.htva.sw-core :is(.swc-feat .feat li, main .card, main .step, .swc-chipsec .ic-chip, .swc-pair__card, .swc-reg):hover { transform: none; }
  .htva.htva.htva.sw-core .swc-desk { opacity: 1; transform: none; animation: none; }
  .htva.htva.htva.sw-core :is(.swc-live, .swc-pool__wires svg path, .swc-bubbles svg g) { animation: none; }
  .htva.htva.htva.sw-core .swc-floor::after, .htva.htva.htva.sw-core .swc-desk--am .swc-desk__s::before { animation: none; }
}


/* src/styles/htva-sw-industries-3.css */
/* src/styles/htva-sw-industries-3.css: sitewide style sweep, INDUSTRIES family (/industries + 10 industry pages), 2026-10-16.
   Matches the /v10 homepage language; adapted from htva-sw-roles-2.css. Everything is scoped to .sw-ind, a class only the
   industries family's root .htva div carries, so nothing reaches the homepage, the roles family or anything else.
   1. Body-font kickers, chips, card indexes, step stamps (the homepage re-tokens --f-mono the same way).
   2. Section surfaces: .swi-plain (page), .swi-paper (dotted grid on --panel), .swi-dark (navy, orange/cyan glows, both themes).
   3. Industry pages: answer card, roles checklist as a card grid, AI-edge cards with a gradient edge, chip pills.
   4. Real estate: bento tiles, comparison table, panels. Hub: industry cards, inline timeline figure.
   5. Closer buttons as the homepage closer pills; hover lifts everywhere (reduced motion respected). */

.htva.htva.htva.sw-ind {
  --f-mono: var(--f-body);
  --swi-card: #0d1826; --swi-card-brd: rgba(140, 195, 240, .16);
  --swi-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
}
.htva.htva.htva.sw-ind[data-theme="light"] {
  --swi-card: #ffffff; --swi-card-brd: rgba(18, 45, 75, .10);
  --swi-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 35, 60, .38), 0 2px 6px -2px rgba(15, 35, 60, .08);
}

/* ---- 1. section heads ---- */
.htva.htva.htva.sw-ind .swi-c .head { text-align: center; margin-inline: auto; }
.htva.htva.htva.sw-ind .swi-c .head .kicker { justify-content: center; }
.htva.htva.htva.sw-ind .swi-c .head .lead { margin-inline: auto; max-width: 62ch; }
.htva.htva.htva.sw-ind .kicker--logo .hmark { flex: none; }
.htva.htva.htva.sw-ind .head .kicker.c { justify-content: center; }
.htva.htva.htva.sw-ind .kicker { letter-spacing: .14em; }

/* ---- 2. surfaces (the light theme's nth-of-type parity tints carry very high specificity, hence !important) ---- */
/* light surfaces take the page tokens back from sections the base sheet re-tokens dark (.sec.sm with chips) */
.htva.htva.htva.sw-ind main > .sec:is(.swi-plain, .swi-paper) {
  --bg: inherit; --bg-2: inherit; --text: inherit; --dim: inherit; --mut: inherit; --hair: inherit; --panel: inherit;
  --panel-brd: inherit; --accent: inherit; --accent-2: inherit; --accent-ink: inherit; --accent-glow: inherit;
  color-scheme: inherit; color: var(--text);
}
.htva.htva.htva.sw-ind main > .sec.swi-plain { background: var(--bg) !important; }
.htva.htva.htva.sw-ind main > .sec.swi-also { padding-top: 56px; padding-bottom: 72px; }
.htva.htva.htva.sw-ind main > .sec.swi-also .kicker { color: var(--mut) !important; }
.htva.htva.htva.sw-ind main > .sec.swi-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel) !important;
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva.sw-ind main > .sec:is(.swi-plain, .swi-paper, .swi-dark)::before { display: none; }
.htva.htva.htva.sw-ind main > .sec.swi-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --hair: rgba(140, 195, 240, .14); --accent: #22d3ee; --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16);
  --swi-card: #0d1826; --swi-card-brd: rgba(140, 195, 240, .16);
  --swi-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark; color: var(--text); position: relative; isolation: isolate; border: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
}
/* a dark band split over two sections: orange glow on the first, cyan on the second, no seam */
.htva.htva.htva.sw-ind main > .sec.swi-dark.swi-dark--top {
  background: radial-gradient(70% 70% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%), #08111b !important;
  padding-bottom: 28px;
}
.htva.htva.htva.sw-ind main > .sec.swi-dark.swi-dark--join {
  background: radial-gradient(60% 90% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
  padding-top: 8px;
}
.htva.htva.htva.sw-ind main > .sec.swi-dark :is(h2, h3, .h2, .h3) { color: #f1f6fb; }
.htva.htva.htva.sw-ind main > .sec.swi-dark :is(p, .lead) { color: #b6c6d6; }
.htva.htva.htva.sw-ind main > .sec.swi-dark .kicker { color: #d5e3ef; }
.htva.htva.htva.sw-ind main > .sec.swi-dark .mk { color: #ff8a45; }
.htva.htva.htva.sw-ind main > .sec.swi-dark .feat li { color: #d5e3ef; }

/* ---- 3a. "What does ... do?": the answer as a card ---- */
.htva.htva.htva.sw-ind .swi-what .answer {
  position: relative; overflow: hidden; max-width: 880px; margin: 30px auto 0; padding: 32px 40px 32px 44px;
  border-radius: 18px; background: var(--swi-card); border: 1px solid var(--swi-card-brd); box-shadow: var(--swi-shadow);
  text-align: left;
}
.htva.htva.htva.sw-ind .swi-what .answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-ind .swi-what .answer::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 43, .16), transparent);
}
.htva.htva.htva.sw-ind .swi-what .answer p { position: relative; z-index: 1; margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--dim); max-width: none; }
.htva.htva.htva.sw-ind .swi-what .answer strong {
  display: block; margin-bottom: 10px; font-family: var(--f-head); font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--text);
}

/* ---- 3b. "<industry> roles" checklist: card grid ---- */
.htva.htva.htva.sw-ind .swi-handles .feat.cols2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px auto 0; max-width: 1040px;
}
.htva.htva.htva.sw-ind .swi-handles .feat li {
  position: relative; display: flex; align-items: center; min-height: 70px; margin: 0; padding: 14px 20px 14px 70px; border-radius: 16px;
  background: var(--swi-card); border: 1px solid var(--swi-card-brd); box-shadow: var(--swi-shadow);
  color: var(--text); font-size: 15.5px; line-height: 1.5;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.htva.htva.htva.sw-ind .swi-handles .feat li::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 138, 69, .20), rgba(255, 106, 43, .10)); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .30);
}
.htva.htva.htva.sw-ind .swi-handles .feat li .ck {
  position: absolute; left: 27px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; color: #ff6a2b;
}
.htva.htva.htva.sw-ind .swi-handles .feat li:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45); }

/* ---- 3c. AI-edge cards: gradient top edge ---- */
.htva.htva.htva.sw-ind .swi-edge .card {
  position: relative; overflow: hidden; border-radius: 18px;
  background: var(--swi-card); border: 1px solid var(--swi-card-brd); box-shadow: var(--swi-shadow);
}
.htva.htva.htva.sw-ind .swi-edge .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-ind .swi-edge .card .idx { letter-spacing: .12em; font-weight: 600; }
.htva.htva.htva.sw-ind .swi-edge .card:hover { border-color: rgba(255, 106, 43, .45); }

/* ---- 3d. chip sections: pills that lift ---- */
.htva.htva.htva.sw-ind .swi-chipsec .head { text-align: center; }
.htva.htva.htva.sw-ind .swi-chipsec .head .kicker { justify-content: center; }
.htva.htva.htva.sw-ind .swi-chipsec .chips { justify-content: center; gap: 10px 12px; }
.htva.htva.htva.sw-ind .swi-chipsec .ic-chip {
  border-radius: 999px; padding: 10px 18px; font-size: 14px; letter-spacing: 0; text-transform: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.htva.htva.htva.sw-ind .swi-chipsec .ic-chip:hover { transform: translateY(-2px); border-color: rgba(255, 106, 43, .55); }
.htva.htva.htva.sw-ind .swi-also .ic-chip {
  background: var(--swi-card) !important; border: 1px solid var(--swi-card-brd) !important; box-shadow: var(--swi-shadow); color: var(--text) !important;
}
.htva.htva.htva.sw-ind .swi-also .ic-chip:hover { border-color: rgba(255, 106, 43, .55) !important; }
.htva.htva.htva.sw-ind .swi-also .ic-chip .ck { color: #ff6a2b; }

/* ---- 3e. zone figure: framed like the homepage panels ---- */
.htva.htva.htva.sw-ind .swi-fig .rolefig figcaption { color: #b6c6d6; }

/* cards and tiles lift on hover */
.htva.htva.htva.sw-ind main :is(.card, .tile, .step, .vcard) { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.htva.htva.htva.sw-ind main :is(.card, .tile):hover { transform: translateY(-3px); }

/* ---- 4a. real estate ---- */
.htva.htva.htva.sw-ind .swi-bento .bento::before { content: "20+ roles \00a0\00b7\00a0 four disciplines \00a0\00b7\00a0 one accountable roof"; }
.htva.htva.htva.sw-ind .swi-bento .tile { border-radius: 18px; }
/* "Five roles": the deal timeline figure is 1180 wide; give it the full row under the copy instead of a half column */
.htva.htva.htva.sw-ind .swi-five .panel2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
.htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child > :is(.kicker, h2) { grid-column: 1; }
.htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child > .lead { grid-column: 1; margin-top: 14px; }
.htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child > .feat { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
.htva.htva.htva.sw-ind .swi-five .rolefig {
  margin: 0; padding: 26px 30px 18px; border-radius: 22px; border: 1px solid rgba(34, 211, 238, .28);
  background: radial-gradient(60% 90% at 85% 50%, rgba(255, 106, 43, .10), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.htva.htva.htva.sw-ind .swi-five .rolefig img.l-dark { display: block !important; width: 100%; height: auto; }
.htva.htva.htva.sw-ind .swi-five .rolefig img.l-light { display: none !important; }
.htva.htva.htva.sw-ind .swi-five .rolefig figcaption { color: #b6c6d6; margin-top: 8px; }
.htva.htva.htva.sw-ind .swi-bento .tile:hover { border-color: rgba(255, 106, 43, .45); }
.htva.htva.htva.sw-ind .swi-panel .roleshero,
.htva.htva.htva.sw-ind .swi-panel .rhero__media img { border-radius: 18px; }
.htva.htva.htva.sw-ind .swi-panel .rolefig {
  border-radius: 18px; overflow: hidden; box-shadow: var(--swi-shadow);
}
.htva.htva.htva.sw-ind .swi-table .rsc-tablewrap {
  margin-top: 30px; border-radius: 18px; overflow: hidden; background: var(--swi-card);
  border: 1px solid var(--swi-card-brd); box-shadow: var(--swi-shadow);
}
.htva.htva.htva.sw-ind .swi-table .rsc-table { margin: 0; }
.htva.htva.htva.sw-ind .swi-table .rsc-table :is(th, td) { padding-left: 20px; padding-right: 20px; }
.htva.htva.htva.sw-ind .swi-table .rsc-table th { letter-spacing: .1em; }
.htva.htva.htva.sw-ind .swi-table .rsc-table tbody tr:hover td { background: color-mix(in srgb, #ff6a2b 6%, transparent); }
.htva.htva.htva.sw-ind .swi-steps .step .no { letter-spacing: .12em; font-weight: 600; }
.htva.htva.htva.sw-ind .swi-steps .step .when { font-weight: 600; letter-spacing: .02em; }

/* ---- 4b. hub ---- */
.htva.htva.htva.sw-ind .swi-cards .head .h2 .mk { display: block; }
.htva.htva.htva.sw-ind .swi-cards .card {
  border-radius: 18px; overflow: hidden; background: var(--swi-card); border: 1px solid var(--swi-card-brd); box-shadow: var(--swi-shadow);
}
.htva.htva.htva.sw-ind .swi-cards .card:hover { border-color: rgba(255, 106, 43, .5); box-shadow: var(--swi-shadow), 0 24px 50px -32px rgba(255, 106, 43, .55); }
.htva.htva.htva.sw-ind .swi-cards .card .rc-media img { transition: transform .5s ease; }
.htva.htva.htva.sw-ind .swi-cards .card:hover .rc-media img { transform: scale(1.04); }
.htva.htva.htva.sw-ind .swi-cards .card--nav {
  background: radial-gradient(80% 90% at 100% 0%, rgba(255, 106, 43, .10), transparent 60%), var(--swi-card);
}

.htva.htva.htva.sw-ind .swi-tl {
  margin: 34px auto 0; max-width: 1080px; padding: 22px 26px 12px; border-radius: 22px;
  border: 1px solid rgba(34, 211, 238, .28);
  background: radial-gradient(60% 90% at 85% 50%, rgba(255, 106, 43, .10), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.htva.htva.htva.sw-ind .swi-tl svg { display: block; width: 100%; height: auto; overflow: visible; }
.htva.htva.htva.sw-ind .swi-tl svg circle:last-child {
  transform-box: fill-box; transform-origin: center; animation: swiPulse 2.6s ease-out infinite;
}
@keyframes swiPulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* ---- 5. closer: homepage closer pills ---- */
.htva.htva.htva.sw-ind .sec.cta .hero__cta { justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
.htva.htva.htva.sw-ind .sec.cta .btn {
  border-radius: 999px; padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 10px;
}
.htva.htva.htva.sw-ind .sec.cta .btn-ghost::before {
  content: ""; width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
.htva.htva.htva.sw-ind .sec.cta .reassure { font-size: 13px; letter-spacing: .01em; max-width: 920px; }

@media (max-width: 760px) {
  .htva.htva.htva.sw-ind .swi-handles .feat.cols2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-ind .swi-what .answer { padding: 24px 22px 24px 26px; }
  .htva.htva.htva.sw-ind .swi-what .answer strong { font-size: 18.5px; }
  .htva.htva.htva.sw-ind .swi-tl { overflow-x: auto; padding: 16px 14px 6px; }
  .htva.htva.htva.sw-ind .swi-tl svg { min-width: 760px; }
  .htva.htva.htva.sw-ind .swi-table .rsc-tablewrap { overflow-x: auto; }
  .htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child { display: block; }
  .htva.htva.htva.sw-ind .swi-five .panel2 > div:first-child > .feat { margin-top: 22px; }
  .htva.htva.htva.sw-ind .swi-five .rolefig { overflow-x: auto; padding: 16px 14px 10px; }
  .htva.htva.htva.sw-ind .swi-five .rolefig img.l-dark { min-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.sw-ind :is(.swi-handles .feat li, main .card, main .tile, .swi-chipsec .ic-chip, .swi-cards .card .rc-media img) { transition: none; }
  .htva.htva.htva.sw-ind :is(.swi-handles .feat li, main .card, main .tile, .swi-chipsec .ic-chip):hover { transform: none; }
  .htva.htva.htva.sw-ind .swi-cards .card:hover .rc-media img { transform: none; }
  .htva.htva.htva.sw-ind .swi-tl svg circle:last-child { animation: none; opacity: 0; }
}


/* src/styles/htva-sw-roles-2.css */
/* src/styles/htva-sw-roles-2.css (replaces -1): sitewide style sweep, ROLES family (/roles + 12 role pages), 2026-10-16.
   Matches the /v10 homepage language. Everything is scoped to .sw-roles, a class only the roles family's root
   .htva div carries, so nothing reaches the homepage or other families.
   1. Body-font kickers, chips, step stamps and footer meta (the homepage re-tokens --f-mono the same way).
   2. Section surfaces: .swr-paper (dotted grid on --panel), .swr-dark (navy with orange/cyan glows in both themes).
   3. "What does ... do?" answer as a card; "... handles" checklist as a card grid.
   4. Closer buttons as the homepage closer pills; ghost button carries the star.
   5. Hub: compare cards on the dark surface, the inline timeline figure, hover lifts. */

.htva.htva.htva.sw-roles {
  --f-mono: var(--f-body);
  --swr-card: #0d1826; --swr-card-brd: rgba(140, 195, 240, .16);
  --swr-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
}
.htva.htva.htva.sw-roles[data-theme="light"] {
  --swr-card: #ffffff; --swr-card-brd: rgba(18, 45, 75, .10);
  --swr-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 35, 60, .38), 0 2px 6px -2px rgba(15, 35, 60, .08);
}

/* ---- 1. section heads ---- */
.htva.htva.htva.sw-roles .swr-c .head { text-align: center; }
.htva.htva.htva.sw-roles .swr-c .head .kicker { justify-content: center; }
.htva.htva.htva.sw-roles .swr-c .head .lead { margin-inline: auto; max-width: 62ch; }
.htva.htva.htva.sw-roles .kicker--logo .hmark { flex: none; }

/* ---- 2. surfaces (the light theme's nth-of-type parity tints carry very high specificity, hence !important) ---- */
.htva.htva.htva.sw-roles main > .sec.swr-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel) !important;
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva.sw-roles main > .sec.swr-paper::before,
.htva.htva.htva.sw-roles main > .sec.swr-dark::before { display: none; }
.htva.htva.htva.sw-roles main > .sec.swr-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --hair: rgba(140, 195, 240, .14); --accent: #22d3ee; --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16);
  --swr-card: #0d1826; --swr-card-brd: rgba(140, 195, 240, .16);
  --swr-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark; color: var(--text); position: relative; isolation: isolate;
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
}
.htva.htva.htva.sw-roles main > .sec.swr-dark :is(h2, h3, .h2, .h3) { color: #f1f6fb; }
.htva.htva.htva.sw-roles main > .sec.swr-dark :is(p, .lead) { color: #b6c6d6; }
.htva.htva.htva.sw-roles main > .sec.swr-dark .kicker { color: #d5e3ef; }
.htva.htva.htva.sw-roles main > .sec.swr-dark .mk { color: #ff8a45; }

/* ---- 3a. "What does ... do?": the answer as a card ---- */
.htva.htva.htva.sw-roles .swr-what .answer {
  position: relative; overflow: hidden; max-width: 880px; margin: 30px auto 0; padding: 32px 40px 32px 44px;
  border-radius: 18px; background: var(--swr-card); border: 1px solid var(--swr-card-brd); box-shadow: var(--swr-shadow);
  text-align: left;
}
.htva.htva.htva.sw-roles .swr-what .answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-roles .swr-what .answer::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 43, .16), transparent);
}
.htva.htva.htva.sw-roles .swr-what .answer p { position: relative; z-index: 1; margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--dim); max-width: none; }
.htva.htva.htva.sw-roles .swr-what .answer strong {
  display: block; margin-bottom: 10px; font-family: var(--f-head); font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--text);
}

/* ---- 3b. "... handles": card grid ---- */
.htva.htva.htva.sw-roles .swr-handles .feat.cols2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px auto 0; max-width: 1040px;
}
.htva.htva.htva.sw-roles .swr-handles .feat li {
  position: relative; display: flex; align-items: center; min-height: 70px; margin: 0; padding: 14px 20px 14px 70px; border-radius: 16px;
  background: var(--swr-card); border: 1px solid var(--swr-card-brd); box-shadow: var(--swr-shadow);
  color: var(--text); font-size: 15.5px; line-height: 1.5;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* the check is a CSS mask over currentColor, so the tile is the li's ::before and the check sits on top of it */
.htva.htva.htva.sw-roles .swr-handles .feat li::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 138, 69, .20), rgba(255, 106, 43, .10)); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .30);
}
.htva.htva.htva.sw-roles .swr-handles .feat li .ck {
  position: absolute; left: 27px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; color: #ff6a2b;
}
/* text with inline emphasis split into flex items ("how  you  delegate"); plain block flow keeps it one sentence */
.htva.htva.htva.sw-roles .feat:not(.cols2) li { display: block; position: relative; padding-left: 28px; }
.htva.htva.htva.sw-roles .feat:not(.cols2) li .ck { position: absolute; left: 0; top: 0; margin-top: 3px; }
.htva.htva.htva.sw-roles .swr-handles .feat li:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45); }

/* cards lift on hover (AI-edge cards, hub bench and compare cards) */
.htva.htva.htva.sw-roles main .card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.htva.htva.htva.sw-roles main .card:hover { transform: translateY(-3px); }

/* ---- 4. closer: homepage closer pills ---- */
.htva.htva.htva.sw-roles .sec.cta .hero__cta { justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
.htva.htva.htva.sw-roles .sec.cta .btn {
  border-radius: 999px; padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 10px;
}
.htva.htva.htva.sw-roles .sec.cta .btn-ghost::before {
  content: ""; width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
.htva.htva.htva.sw-roles .sec.cta .reassure { font-size: 13px; letter-spacing: .01em; max-width: 920px; }

/* ---- 5. hub ---- */
.htva.htva.htva.sw-roles .swr-compare .card {
  background: var(--swr-card); border: 1px solid var(--swr-card-brd); box-shadow: var(--swr-shadow); border-radius: 18px;
}
.htva.htva.htva.sw-roles .swr-compare .card p { color: #b6c6d6; }
.htva.htva.htva.sw-roles .swr-compare .card:last-child {
  border-color: rgba(255, 106, 43, .5);
  box-shadow: var(--swr-shadow), 0 0 0 1px rgba(255, 106, 43, .25), 0 24px 60px -30px rgba(255, 106, 43, .55);
}
.htva.htva.htva.sw-roles .swr-compare .card:hover { border-color: rgba(255, 106, 43, .55); }

.htva.htva.htva.sw-roles .swr-tl {
  margin: 34px auto 0; max-width: 1080px; padding: 22px 26px 12px; border-radius: 22px;
  border: 1px solid rgba(34, 211, 238, .28);
  background: radial-gradient(60% 90% at 85% 50%, rgba(255, 106, 43, .10), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.htva.htva.htva.sw-roles .swr-tl svg { display: block; width: 100%; height: auto; overflow: visible; }
.htva.htva.htva.sw-roles .swr-tl svg circle:last-child {
  transform-box: fill-box; transform-origin: center; animation: swrPulse 2.6s ease-out infinite;
}
@keyframes swrPulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* the light theme hid dark figure variants; the hub figures stay legible on their own surfaces */
.htva.htva.htva.sw-roles .head .kicker.c { justify-content: center; }

@media (max-width: 760px) {
  .htva.htva.htva.sw-roles .swr-handles .feat.cols2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-roles .swr-what .answer { padding: 24px 22px 24px 26px; }
  .htva.htva.htva.sw-roles .swr-what .answer strong { font-size: 18.5px; }
  .htva.htva.htva.sw-roles .swr-tl { overflow-x: auto; padding: 16px 14px 6px; }
  .htva.htva.htva.sw-roles .swr-tl svg { min-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.sw-roles .swr-handles .feat li,
  .htva.htva.htva.sw-roles main .card { transition: none; }
  .htva.htva.htva.sw-roles .swr-handles .feat li:hover,
  .htva.htva.htva.sw-roles main .card:hover { transform: none; }
  .htva.htva.htva.sw-roles .swr-tl svg circle:last-child { animation: none; opacity: 0; }
}


/* src/styles/htva-sw-trust-1.css */
/* src/styles/htva-sw-trust-1.css: sitewide style sweep, TRUST family (/about, /testimonials, /podcast, /contact), 2026-10-16.
   Matches the /v10 homepage language; adapted from htva-sw-core-2.css. /start is copy-only and does not carry the class.
   Everything is scoped to .sw-trust, a class only these four pages' root .htva div carries.
   1. Body-font kickers, card indexes, timeline labels (the homepage re-tokens --f-mono the same way).
   2. Section surfaces: .swt-plain (page), .swt-paper (dotted grid on --panel), .swt-dark (navy, orange/cyan glows, both themes).
   3. Shared blocks: answer card, cards with a gradient edge, stat cards, quotes on a dark band.
   4. Page blocks: about (timeline, standard flow, founder panel), podcast (listen panel, equalizer), contact (booking card, call card).
   5. Closer buttons as the homepage closer pills; hover lifts everywhere (reduced motion respected). */

.htva.htva.htva.sw-trust {
  --f-mono: var(--f-body);
  --swt-card: #0d1826; --swt-card-brd: rgba(140, 195, 240, .16);
  --swt-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
}
.htva.htva.htva.sw-trust[data-theme="light"] {
  --swt-card: #ffffff; --swt-card-brd: rgba(18, 45, 75, .10);
  --swt-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 35, 60, .38), 0 2px 6px -2px rgba(15, 35, 60, .08);
}

/* ---- 1. section heads ---- */
.htva.htva.htva.sw-trust .swt-c .head { text-align: center; margin-inline: auto; }
.htva.htva.htva.sw-trust .swt-c .head .kicker { justify-content: center; }
.htva.htva.htva.sw-trust .swt-c .head .lead { margin-inline: auto; max-width: 62ch; }
.htva.htva.htva.sw-trust .swt-c .head .hero__cta { justify-content: center; }
.htva.htva.htva.sw-trust .kicker--logo .hmark { flex: none; }
.htva.htva.htva.sw-trust .kicker { letter-spacing: .14em; }

/* ---- 2. surfaces (the light theme's parity tints carry very high specificity, hence !important) ---- */
.htva.htva.htva.sw-trust main > .sec:is(.swt-plain, .swt-paper) {
  --bg: inherit; --bg-2: inherit; --text: inherit; --dim: inherit; --mut: inherit; --hair: inherit; --panel: inherit;
  --panel-brd: inherit; --accent: inherit; --accent-2: inherit; --accent-ink: inherit; --accent-glow: inherit;
  color-scheme: inherit; color: var(--text);
}
.htva.htva.htva.sw-trust main > .sec.swt-plain { background: var(--bg) !important; }
.htva.htva.htva.sw-trust main > .sec.swt-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel) !important;
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva.sw-trust main > .sec:is(.swt-plain, .swt-paper, .swt-dark)::before { display: none; }
.htva.htva.htva.sw-trust main > .sec.swt-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --hair: rgba(140, 195, 240, .14); --accent: #22d3ee; --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16);
  --swt-card: #0d1826; --swt-card-brd: rgba(140, 195, 240, .16);
  --swt-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark; color: var(--text); position: relative; isolation: isolate; border: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
}
.htva.htva.htva.sw-trust main > .sec.swt-dark :is(h2, h3, .h2, .h3) { color: #f1f6fb; }
.htva.htva.htva.sw-trust main > .sec.swt-dark :is(p, .lead) { color: #b6c6d6; }
.htva.htva.htva.sw-trust main > .sec.swt-dark .kicker { color: #d5e3ef; }
.htva.htva.htva.sw-trust main > .sec.swt-dark .mk { color: #ff8a45; }

/* ---- 3a. answer card ---- */
.htva.htva.htva.sw-trust .swt-what .answer {
  position: relative; overflow: hidden; max-width: 880px; margin: 30px auto 0; padding: 32px 40px 32px 44px;
  border-radius: 18px; background: var(--swt-card); border: 1px solid var(--swt-card-brd); box-shadow: var(--swt-shadow); text-align: left;
}
.htva.htva.htva.sw-trust .swt-what .answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-trust .swt-what .answer::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 43, .16), transparent);
}
.htva.htva.htva.sw-trust .swt-what .answer p { position: relative; z-index: 1; margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--dim); max-width: none; }
.htva.htva.htva.sw-trust .swt-what .answer strong {
  display: block; margin-bottom: 10px; font-family: var(--f-head); font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--text);
}

/* ---- 3b. cards with a gradient top edge ---- */
.htva.htva.htva.sw-trust .swt-cards .card {
  position: relative; overflow: hidden; border-radius: 18px; text-align: left; padding: 26px 24px 24px;
  background: var(--swt-card) !important; border: 1px solid var(--swt-card-brd) !important; box-shadow: var(--swt-shadow) !important;
}
.htva.htva.htva.sw-trust .swt-cards .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-trust .swt-cards .card .idx { letter-spacing: .12em; font-weight: 700; font-size: 11.5px; color: #c2410c; }
.htva.htva.htva.sw-trust:not([data-theme="light"]) .swt-cards .card .idx,
.htva.htva.htva.sw-trust .swt-dark.swt-cards .card .idx { color: #ffb37f; }
.htva.htva.htva.sw-trust .swt-cards .card:hover { border-color: rgba(255, 106, 43, .45) !important; }
/* stat cards (testimonials "numbers behind the words") */
.htva.htva.htva.sw-trust .swt-nums .card .h3 {
  font-size: 34px; line-height: 1.1; letter-spacing: -.01em; margin: 10px 0 8px;
  background: linear-gradient(90deg, #ff6a2b, #ff9a5c); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.htva.htva.htva.sw-trust .swt-nums .grid { margin-top: 28px; }
/* contact steps on the dark band: numbered rail */
.htva.htva.htva.sw-trust .swt-steps3 .grid { position: relative; margin-top: 34px; }

/* ---- 3c. quotes on a dark band, the first one featured ---- */
.htva.htva.htva.sw-trust .swt-quotes .qgrid { margin-top: 36px; }
.htva.htva.htva.sw-trust .swt-quotes .card.quote {
  border-radius: 18px; text-align: left; background: linear-gradient(180deg, #101c2c, #0b1522) !important;
  border: 1px solid rgba(140, 195, 240, .16) !important; box-shadow: var(--swt-shadow) !important;
}
.htva.htva.htva.sw-trust .swt-quotes .card.quote p { color: #d5e3ef !important; }
.htva.htva.htva.sw-trust .swt-quotes .card.quote .rt { color: #ffb37f !important; }
.htva.htva.htva.sw-trust .swt-quotes .card.quote .who,
.htva.htva.htva.sw-trust .swt-quotes .card.quote .who * { color: #b6c6d6 !important; }
.htva.htva.htva.sw-trust .swt-quotes .card.quote .who .nm,
.htva.htva.htva.sw-trust .swt-quotes .card.quote .who .nm * { color: #f1f6fb !important; }
.htva.htva.htva.sw-trust .swt-quotes .card.quote:hover { border-color: rgba(255, 106, 43, .45) !important; }
.htva.htva.htva.sw-trust .swt-quotes .qgrid > .card.quote:first-child {
  grid-column: 1 / -1; padding: 34px 40px 30px; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255, 106, 43, .16), transparent 60%), linear-gradient(180deg, #12233a, #0b1522) !important;
  border-color: rgba(255, 106, 43, .38) !important;
}
.htva.htva.htva.sw-trust .swt-quotes .qgrid > .card.quote:first-child p {
  font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 1.38; color: #f1f6fb !important; max-width: 900px;
}

/* ---- 4a. about ---- */
/* timeline: orange-to-cyan rail, label pills, homepage cards */
.htva.htva.htva.sw-trust .swt-journey .tl::before { background: linear-gradient(180deg, #ff6a2b, #ffc49b 40%, #22d3ee 80%, transparent); }
.htva.htva.htva.sw-trust .swt-journey .tl__i::before { background: #ff6a2b; box-shadow: 0 0 0 4px rgba(255, 106, 43, .16); }
.htva.htva.htva.sw-trust .swt-journey .tl__card {
  border-radius: 18px; background: var(--swt-card) !important; border: 1px solid var(--swt-card-brd) !important; box-shadow: var(--swt-shadow) !important;
}
.htva.htva.htva.sw-trust .swt-journey .tl__card:hover { border-color: rgba(255, 106, 43, .45) !important; transform: translateY(-3px); }
.htva.htva.htva.sw-trust .swt-journey .tl__yr {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: .12em;
  color: #c2410c; background: rgba(255, 106, 43, .10); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .30);
}
.htva.htva.htva.sw-trust:not([data-theme="light"]) .swt-journey .tl__yr { color: #ffb37f; }
.htva.htva.htva.sw-trust .swt-journey :is(.tl__i--pivot, .tl__i--now) .tl__card {
  border-color: rgba(255, 106, 43, .4) !important;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 106, 43, .10), transparent 65%), var(--swt-card) !important;
}
.htva.htva.htva.sw-trust .swt-journey :is(.tl__i--pivot, .tl__i--now) .tl__t { color: #ff6a2b; }
.htva.htva.htva.sw-trust .swt-journey :is(.tl__i--pivot, .tl__i--now)::before { background: #ff6a2b; box-shadow: 0 0 0 5px rgba(255, 106, 43, .18), 0 0 26px rgba(255, 106, 43, .7); }
.htva.htva.htva.sw-trust .swt-journey .jr2__lead strong { color: #ff6a2b; }
/* standard: the funnel as stat cards */
.htva.htva.htva.sw-trust .swt-std .std__step {
  border-radius: 18px; background: var(--swt-card) !important; border: 1px solid var(--swt-card-brd) !important; box-shadow: var(--swt-shadow) !important;
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-trust .swt-std .std__step:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45) !important; }
.htva.htva.htva.sw-trust .swt-std .std__n { color: var(--text) !important; }
.htva.htva.htva.sw-trust .swt-std .std__step--win {
  border-color: rgba(255, 106, 43, .5) !important;
  background: radial-gradient(90% 90% at 50% 0%, rgba(255, 106, 43, .16), transparent 70%), var(--swt-card) !important;
  box-shadow: 0 0 0 5px rgba(255, 106, 43, .06), 0 24px 50px -30px rgba(255, 106, 43, .55) !important;
}
.htva.htva.htva.sw-trust .swt-std .std__step--win .std__n {
  background: linear-gradient(90deg, #ff6a2b, #ff9a5c); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.htva.htva.htva.sw-trust .swt-std .std__arrow { color: #ff6a2b; }
.htva.htva.htva.sw-trust .swt-std .std__pts li::marker { color: #ff6a2b; }
/* founder panel */
.htva.htva.htva.sw-trust .swt-fn .fn__card {
  position: relative; overflow: hidden; border-radius: 22px; background: var(--swt-card) !important; border: 1px solid var(--swt-card-brd) !important; box-shadow: var(--swt-shadow) !important;
}
.htva.htva.htva.sw-trust .swt-fn .fn__card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-trust .swt-fn .fn__q { font-weight: 600; }
.htva.htva.htva.sw-trust .swt-fn .fn__sig { color: var(--dim); }
.htva.htva.htva.sw-trust .swt-fn .fn__sig > :first-child { color: var(--text); }
.htva.htva.htva.sw-trust .swt-fn .swt-fn__cta { margin-top: 18px; }

/* ---- 4b. podcast: listen panel ---- */
.htva.htva.htva.sw-trust .swt-listen {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; align-items: center;
  max-width: 900px; margin: 36px auto 0; padding: 26px 30px 26px 26px; border-radius: 22px; text-align: left;
  border: 1px solid rgba(34, 211, 238, .28);
  background: radial-gradient(60% 90% at 90% 0%, rgba(255, 106, 43, .14), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.htva.htva.htva.sw-trust .swt-listen::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  background-size: 200% 100%; animation: cpxScan 5s linear infinite; opacity: .75;
}
.htva.htva.htva.sw-trust .swt-listen__art { display: block; width: 220px; }
.htva.htva.htva.sw-trust .swt-listen__art svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(255, 106, 43, .55), 0 0 0 1px rgba(140, 195, 240, .16); }
.htva.htva.htva.sw-trust .swt-listen__body { display: grid; gap: 8px; min-width: 0; }
.htva.htva.htva.sw-trust .swt-listen__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb37f; }
.htva.htva.htva.sw-trust .swt-listen__t { font-family: var(--f-head); font-weight: 800; font-size: 30px; line-height: 1.1; color: #f1f6fb; }
.htva.htva.htva.sw-trust .swt-eq { display: flex; align-items: center; gap: 4px; height: 44px; margin: 6px 0 10px; }
.htva.htva.htva.sw-trust .swt-eq__b {
  flex: 1 1 0; max-width: 8px; height: 100%; border-radius: 4px; transform-origin: 50% 50%;
  background: linear-gradient(180deg, #ff9a5c, #ff6a2b 50%, #22d3ee); transform: scaleY(.3);
  animation: swtEq 1.3s ease-in-out infinite alternate;
}
.htva.htva.htva.sw-trust .swt-eq__b:nth-child(3n) { animation-duration: 1.05s; animation-delay: -.4s; }
.htva.htva.htva.sw-trust .swt-eq__b:nth-child(3n+1) { animation-duration: 1.5s; animation-delay: -.9s; }
.htva.htva.htva.sw-trust .swt-eq__b:nth-child(4n) { animation-duration: .9s; animation-delay: -.2s; }
.htva.htva.htva.sw-trust .swt-eq__b:nth-child(5n+2) { animation-duration: 1.7s; animation-delay: -1.2s; }
@keyframes swtEq { 0% { transform: scaleY(.18); } 50% { transform: scaleY(.75); } 100% { transform: scaleY(.4); } }
.htva.htva.htva.sw-trust .swt-listen__btns { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.htva.htva.htva.sw-trust .swt-listen__btns .btn { border-radius: 999px; padding: 12px 20px; font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.htva.htva.htva.sw-trust .swt-guest .head .hero__cta { margin-top: 22px; }

/* ---- 4c. contact: booking card + call card ---- */
.htva.htva.htva.sw-trust .swt-contact .cols2c { gap: 40px; align-items: start; }
.htva.htva.htva.sw-trust .swt-contact .ccol { gap: 0; }
.htva.htva.htva.sw-trust .swt-book {
  position: relative; overflow: hidden; display: grid; gap: 18px; margin-top: 22px; padding: 22px 24px 24px; border-radius: 20px;
  border: 1px solid rgba(34, 211, 238, .28); color: #e9f1f8;
  background: radial-gradient(60% 90% at 90% 0%, rgba(255, 106, 43, .16), transparent 70%), linear-gradient(180deg, #101b2a 0%, #0a1420 58%, #08111b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .085), 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.htva.htva.htva.sw-trust .swt-book__top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(140, 195, 240, .14); }
.htva.htva.htva.sw-trust .swt-live { width: 9px; height: 9px; border-radius: 50%; background: #34d399; flex: none; animation: swtPing 2.4s ease-out infinite; }
@keyframes swtPing { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.htva.htva.htva.sw-trust .swt-book__t { font-family: var(--f-head); font-weight: 800; font-size: 18px; color: #f1f6fb; }
.htva.htva.htva.sw-trust .swt-book__chip {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: #ffb37f; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 106, 43, .12); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .35);
}
.htva.htva.htva.sw-trust .swt-book__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.htva.htva.htva.sw-trust .swt-day {
  display: grid; gap: 6px; justify-items: stretch; padding: 10px 8px; border-radius: 12px;
  border: 1px solid rgba(140, 195, 240, .14); background: rgba(15, 27, 42, .75);
}
.htva.htva.htva.sw-trust .swt-day__d { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fa6bb; }
.htva.htva.htva.sw-trust .swt-day__slot { height: 6px; border-radius: 3px; background: rgba(140, 195, 240, .16); }
.htva.htva.htva.sw-trust .swt-day--on { border-color: rgba(255, 106, 43, .55); background: linear-gradient(180deg, rgba(255, 106, 43, .16), rgba(255, 106, 43, .05)); }
.htva.htva.htva.sw-trust .swt-day--on .swt-day__d { color: #ffc49b; }
.htva.htva.htva.sw-trust .swt-day--on .swt-day__slot:nth-of-type(2) { background: #ff6a2b; animation: swtSlot 2.6s ease-in-out infinite; }
@keyframes swtSlot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.htva.htva.htva.sw-trust .swt-book__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.htva.htva.htva.sw-trust .swt-book__rows li { position: relative; padding-left: 26px; font-size: 15px; color: #d5e3ef; }
.htva.htva.htva.sw-trust .swt-book__rows li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255, 106, 43, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23ff8a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.htva.htva.htva.sw-trust .swt-book .btn { justify-self: start; border-radius: 999px; padding: 14px 26px; text-transform: none; letter-spacing: 0; }
.htva.htva.htva.sw-trust .swt-callcard {
  margin-top: 22px; padding: 20px 22px; border-radius: 18px; gap: 14px;
  background: var(--swt-card); border: 1px solid var(--swt-card-brd); box-shadow: var(--swt-shadow);
}
.htva.htva.htva.sw-trust .swt-callcard > div:first-child { font-family: var(--f-head); font-size: 22px; font-weight: 800; }
.htva.htva.htva.sw-trust .swt-callcard > div:first-child a { color: var(--text); }
.htva.htva.htva.sw-trust .swt-callcard > div:first-child a:hover { color: #ff6a2b; }
.htva.htva.htva.sw-trust .swt-callcard .ck, .htva.htva.htva.sw-trust .swt-callcard svg { color: #ff6a2b; }

/* cards and tiles lift on hover */
.htva.htva.htva.sw-trust main :is(.card, .tl__card) { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.htva.htva.htva.sw-trust main .card:hover { transform: translateY(-3px); }

/* ---- 5. closer: homepage closer pills ---- */
.htva.htva.htva.sw-trust .sec.cta .hero__cta { justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
.htva.htva.htva.sw-trust .sec.cta .btn {
  border-radius: 999px; padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 10px;
}
.htva.htva.htva.sw-trust .sec.cta .btn-ghost::before {
  content: ""; width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
.htva.htva.htva.sw-trust .sec.cta .reassure { font-size: 13px; letter-spacing: .01em; max-width: 920px; }

@media (max-width: 980px) {
  .htva.htva.htva.sw-trust .swt-quotes .qgrid > .card.quote:first-child p { font-size: 22px; }
}
@media (max-width: 760px) {
  .htva.htva.htva.sw-trust .swt-what .answer { padding: 24px 22px 24px 26px; }
  .htva.htva.htva.sw-trust .swt-what .answer strong { font-size: 18.5px; }
  .htva.htva.htva.sw-trust .swt-quotes .qgrid > .card.quote:first-child { padding: 26px 22px 24px; }
  .htva.htva.htva.sw-trust .swt-quotes .qgrid > .card.quote:first-child p { font-size: 19px; }
  .htva.htva.htva.sw-trust .swt-listen { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px 22px; justify-items: center; text-align: center; }
  .htva.htva.htva.sw-trust .swt-listen__art { width: 180px; }
  .htva.htva.htva.sw-trust .swt-listen__body { justify-items: center; width: 100%; }
  .htva.htva.htva.sw-trust .swt-eq { width: 100%; justify-content: center; }
  .htva.htva.htva.sw-trust .swt-listen__btns { justify-content: center; }
  .htva.htva.htva.sw-trust .swt-book { padding: 18px 16px 20px; }
  .htva.htva.htva.sw-trust .swt-book__days { gap: 5px; }
  .htva.htva.htva.sw-trust .swt-day { padding: 8px 4px; }
  .htva.htva.htva.sw-trust .swt-day__d { font-size: 10.5px; letter-spacing: .04em; }
  .htva.htva.htva.sw-trust .swt-nums .card .h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.sw-trust :is(main .card, .tl__card, .std__step) { transition: none; }
  .htva.htva.htva.sw-trust :is(main .card, .tl__card, .std__step):hover { transform: none !important; }
  .htva.htva.htva.sw-trust :is(.swt-live, .swt-eq__b, .swt-day__slot) { animation: none; }
  .htva.htva.htva.sw-trust .swt-eq__b { transform: scaleY(.5); }
  .htva.htva.htva.sw-trust .swt-listen::after { animation: none; }
}


/* src/styles/htva-sw-utility-2.css */
/* src/styles/htva-sw-utility-2.css: sitewide style sweep, UTILITY family, 2026-10-16.
   Matches the /v10 homepage language; adapted from htva-sw-trust-1.css.
   .sw-util  = root .htva of /resources, /resources/page/2-4, /resources/what-do-real-estate-virtual-assistants-do,
               /privacy, /terms, /page-not-found (the 404 template).
   .sw-post  = root .htva of the blog entry template (tpl-blog-post), so it reaches every post LIVE. Post bodies are
               never edited: only their CTA cards, buttons and mono labels are restyled here.
   1. Body-font kickers and labels (the homepage re-tokens --f-mono the same way).
   2. Section surfaces: .swu-plain (page), .swu-paper (dotted grid on --panel), .swu-dark (navy, orange/cyan glows).
   3. Resources hub: tool cards, featured card on a dark band, post cards with readable tags, pager.
   4. Prose (legal pages + the real estate article page): readable column.
   5. 404: route art + quick-link cards.
   6. Closer pills (cloned homepage-style closer).
   7. Blog posts: buttons, CTA cards, author pills, FAQ labels. */

.htva.htva.htva:is(.sw-util, .sw-post) {
  --f-mono: var(--f-body);
  --swu-card: #0d1826; --swu-card-brd: rgba(140, 195, 240, .16);
  --swu-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
}
.htva.htva.htva:is(.sw-util, .sw-post)[data-theme="light"] {
  --swu-card: #ffffff; --swu-card-brd: rgba(18, 45, 75, .10);
  --swu-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 35, 60, .38), 0 2px 6px -2px rgba(15, 35, 60, .08);
}

/* ---- 1. heads ---- */
.htva.htva.htva.sw-util .swu-c .head { text-align: center; margin-inline: auto; }
.htva.htva.htva.sw-util .swu-c .head .kicker { justify-content: center; }
.htva.htva.htva.sw-util .swu-c .head .lead { margin-inline: auto; max-width: 62ch; }
.htva.htva.htva.sw-util .kicker--logo .hmark { flex: none; }
.htva.htva.htva.sw-util .kicker { letter-spacing: .14em; font-family: var(--f-body); }

/* ---- 2. surfaces ---- */
.htva.htva.htva.sw-util main > .sec:is(.swu-plain, .swu-paper) {
  --bg: inherit; --bg-2: inherit; --text: inherit; --dim: inherit; --mut: inherit; --hair: inherit; --panel: inherit;
  --panel-brd: inherit; --accent: inherit; --accent-2: inherit; --accent-ink: inherit; --accent-glow: inherit;
  color-scheme: inherit; color: var(--text);
}
.htva.htva.htva.sw-util main > .sec.swu-plain { background: var(--bg) !important; }
.htva.htva.htva.sw-util main > .sec.swu-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel) !important;
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva.sw-util main > .sec:is(.swu-plain, .swu-paper, .swu-dark)::before { display: none; }
.htva.htva.htva.sw-util main > .sec.swu-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --muted: #8298ad; --hair: rgba(140, 195, 240, .14); --accent: #22d3ee; --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16); --border: rgba(140, 195, 240, .2);
  --swu-card: #0d1826; --swu-card-brd: rgba(140, 195, 240, .16);
  --swu-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark; color: var(--text); position: relative; isolation: isolate; border: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b !important;
}
.htva.htva.htva.sw-util main > .sec.swu-dark :is(h2, h3, .h2, .h3) { color: #f1f6fb; }
.htva.htva.htva.sw-util main > .sec.swu-dark :is(p, .lead) { color: #b6c6d6; }
.htva.htva.htva.sw-util main > .sec.swu-dark .kicker { color: #d5e3ef; }
.htva.htva.htva.sw-util main > .sec.swu-dark .mk { color: #ff8a45; }

/* ---- 3. resources hub ---- */
.htva.htva.htva.sw-util .rsc-tools { margin-top: 30px; gap: 22px; }
.htva.htva.htva.sw-util .rsc-tool {
  position: relative; overflow: hidden; border-radius: 18px; padding: 26px 26px 24px; text-align: left;
  background: var(--swu-card) !important; border: 1px solid var(--swu-card-brd) !important; box-shadow: var(--swu-shadow) !important;
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-util .rsc-tool::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-util .rsc-tool:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45) !important; }
.htva.htva.htva.sw-util .rsc-tool__ic { border-radius: 12px; color: #ff6a2b; background: rgba(255, 106, 43, .10); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .28); }
/* featured playbook on the dark band */
.htva.htva.htva.sw-util .swu-feat .rsc-feat {
  margin-top: 30px; border-radius: 20px; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #101b2a 0%, #0a1420 100%) !important; border: 1px solid rgba(140, 195, 240, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -40px rgba(0, 0, 0, .9) !important;
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-util .swu-feat .rsc-feat:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .5) !important; }
.htva.htva.htva.sw-util .swu-feat .rsc-feat__body { padding: 36px 38px; }
.htva.htva.htva.sw-util .swu-feat .rsc-feat__title { color: #f1f6fb; font-family: var(--f-head); font-size: 28px; }
.htva.htva.htva.sw-util .swu-feat .rsc-feat__body p { color: #b6c6d6; }
.htva.htva.htva.sw-util .swu-feat .rsc-feat .rsc-go { color: #ff8a45; font-size: 15px; font-weight: 700; }
.htva.htva.htva.sw-util .page-hero .crumbs + .kicker { margin-top: 34px; }
.htva.htva.htva.sw-util .swu-feat .rsc-tag { align-self: flex-start; width: auto; border-radius: 999px; padding: 4px 11px 4px 9px; color: #ffd2b8 !important; background: rgba(255, 106, 43, .12) !important; border-color: rgba(255, 106, 43, .35) !important; }
/* post cards */
.htva.htva.htva.sw-util .grid.g3 { margin-top: 30px; }
.htva.htva.htva.sw-util .rsc-card--media {
  border-radius: 18px; text-align: left;
  background: var(--swu-card) !important; border: 1px solid var(--swu-card-brd) !important; box-shadow: var(--swu-shadow) !important;
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-util .rsc-card--media:hover { transform: translateY(-4px); border-color: rgba(255, 106, 43, .45) !important; }
.htva.htva.htva.sw-util .rsc-card--media .rsc-tag,
.htva.htva.htva.sw-util[data-theme="light"] .rsc-card--media .rsc-tag {
  color: #ffffff !important; background: rgba(8, 17, 27, .68) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 999px; padding: 4px 11px 4px 9px; letter-spacing: .08em; font-weight: 700;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.htva.htva.htva.sw-util .rsc-card--media .rsc-tag::before { background-color: #ff8a45; }
/* pager */
.htva.htva.htva.sw-util .rsc-pager :is(a, span) { border-radius: 999px; min-width: 42px; height: 42px; font-weight: 600; background: var(--swu-card); border-color: var(--swu-card-brd); }
.htva.htva.htva.sw-util .rsc-pager .is-current {
  color: #56260c; border-color: #e9aa79;
  background: radial-gradient(130% 160% at 78% 30%, #fff 30%, #ffd9b8 72%, #ffb277 100%);
  box-shadow: 0 3px 12px rgba(99, 39, 9, .16), 0 0 24px rgba(255, 133, 63, .16);
}
.htva.htva.htva.sw-util .rsc-pager a:hover { border-color: #ff6a2b; color: #ff6a2b; transform: translateY(-1px); }

/* ---- 4. prose: legal pages and the article page ---- */
.htva.htva.htva.sw-util .swu-prose .legal {
  max-width: 760px; position: relative; padding: 44px 52px 40px; border-radius: 20px;
  background: var(--swu-card); border: 1px solid var(--swu-card-brd); box-shadow: var(--swu-shadow);
}
.htva.htva.htva.sw-util .swu-prose .legal::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-util .swu-prose .legal :is(p, li) { font-size: 16.5px; line-height: 1.78; }
.htva.htva.htva.sw-util .swu-prose .legal h2 { font-family: var(--f-head); font-size: 22px; line-height: 1.3; margin: 38px 0 12px; color: var(--text); }
.htva.htva.htva.sw-util .swu-prose .legal > h2:first-child { margin-top: 0; }
.htva.htva.htva.sw-util .swu-prose .legal h3 { font-family: var(--f-head); color: var(--text); }
.htva.htva.htva.sw-util .swu-prose .legal-ul li::before { background: #ff6a2b; }
.htva.htva.htva.sw-util .swu-article .legal h2 { font-size: 25px; margin-top: 42px; }
.htva.htva.htva.sw-util .swu-article .legal > p:first-of-type { margin-top: 0; }
.htva.htva.htva.sw-util .page-hero .legal-updated { color: #8fa6bb; }

/* ---- 5. 404 ---- */
.htva.htva.htva.sw-util .page-hero .rhero:has(.swu-404art) { grid-template-columns: 1.1fr .9fr; align-items: center; }
.htva.htva.htva.sw-util .swu-404art { display: block; min-width: 0; }
.htva.htva.htva.sw-util .swu-404art svg { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; overflow: visible; }
.htva.htva.htva.sw-util .swu-404art .swu-route { stroke-dasharray: 6 9; animation: swuDash 2.8s linear infinite; }
.htva.htva.htva.sw-util .swu-404art .swu-pin { transform-origin: 368px 88px; animation: swuPin 2.6s ease-in-out infinite; }
@keyframes swuDash { to { stroke-dashoffset: -60; } }
@keyframes swuPin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.htva.htva.htva.sw-util .swu-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.htva.htva.htva.sw-util .swu-link {
  position: relative; overflow: hidden; display: grid; gap: 6px; padding: 24px 24px 22px; border-radius: 18px; text-align: left; text-decoration: none; color: var(--text);
  background: var(--swu-card); border: 1px solid var(--swu-card-brd); box-shadow: var(--swu-shadow);
  transition: transform .22s ease, border-color .22s ease;
}
.htva.htva.htva.sw-util .swu-link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-util .swu-link:hover { transform: translateY(-3px); border-color: rgba(255, 106, 43, .45); }
.htva.htva.htva.sw-util .swu-link__t { font-family: var(--f-head); font-weight: 700; font-size: 19px; color: var(--text); }
.htva.htva.htva.sw-util .swu-link__d { font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.htva.htva.htva.sw-util .swu-link__go { margin-top: 4px; font-size: 14px; font-weight: 700; color: #c2410c; }
.htva.htva.htva.sw-util:not([data-theme="light"]) .swu-link__go { color: #ff8a45; }

/* ---- 6. closer: homepage closer pills ---- */
.htva.htva.htva.sw-util .sec.cta .hero__cta { justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
.htva.htva.htva.sw-util .sec.cta .btn {
  border-radius: 999px; padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 10px;
}
.htva.htva.htva.sw-util .sec.cta .btn-ghost::before {
  content: ""; width: 15px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
.htva.htva.htva.sw-util .sec.cta .reassure { font-size: 13px; letter-spacing: .01em; max-width: 920px; }
.htva.htva.htva.sw-util .page-hero .hero__cta .btn { text-transform: none; letter-spacing: -.01em; }

/* ---- 7. blog posts (template-level; post bodies untouched) ---- */
/* buttons: the homepage .btn-primary size and weight everywhere in a post */
.htva.htva.htva.sw-post main .btn {
  min-height: 54px; padding: 14px 24px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-transform: none; border-radius: 12px;
}
.htva.htva.htva.sw-post .rsc-side .rsc-cta .btn { width: 100%; justify-content: center; padding: 14px 18px; }
/* mono labels -> body font */
.htva.htva.htva.sw-post :is(.rsc-authorlinks a, .rsc-tag, .rsc-cta__k, .rsc-endcta .k, .rsc-callout__k, .rsc-toc__h, summary .q, .ph .d) { font-family: var(--f-body); }
.htva.htva.htva.sw-post .rsc-authorlinks a {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 6px 14px; border-radius: 999px;
  background: var(--swu-card); border-color: var(--swu-card-brd); transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.htva.htva.htva.sw-post .rsc-authorlinks a:hover { color: #ff6a2b; border-color: rgba(255, 106, 43, .5); transform: translateY(-1px); }
.htva.htva.htva.sw-post .rsc-related .rsc-tag { align-self: flex-start; justify-self: start; width: max-content; max-width: 100%; border-radius: 999px; padding: 4px 11px 4px 9px; }
.htva.htva.htva.sw-post summary .q { font-weight: 700; letter-spacing: .06em; color: #ff6a2b; }
/* kicker labels get the brand star */
.htva.htva.htva.sw-post :is(.rsc-cta__k, .rsc-endcta .k) { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .14em; }
.htva.htva.htva.sw-post :is(.rsc-cta__k, .rsc-endcta .k)::before {
  content: ""; width: 13px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418 125 256 244'%3E%3Cpath d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z' fill='%23ff6a2b'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* in-body CTA cards: house card with a gradient edge and a warm corner glow */
.htva.htva.htva.sw-post .rsc-post .wrap .rsc-body .rsc-inline-cta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 28px 30px;
  background: var(--swu-card) !important; border: 1px solid var(--swu-card-brd) !important; box-shadow: var(--swu-shadow) !important;
}
.htva.htva.htva.sw-post .rsc-body .rsc-inline-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff6a2b 0%, #ffc49b 55%, #22d3ee 100%);
}
.htva.htva.htva.sw-post .rsc-body .rsc-inline-cta::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 43, .16), transparent);
}
.htva.htva.htva.sw-post .rsc-body .rsc-inline-cta b { font-family: var(--f-head); font-size: 20px; line-height: 1.3; color: var(--text); }
.htva.htva.htva.sw-post .rsc-body .rsc-inline-cta span { font-size: 15px; line-height: 1.6; }
/* sticky side card */
.htva.htva.htva.sw-post .rsc-side .rsc-cta {
  position: relative; overflow: hidden; border-radius: 18px; padding: 22px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 106, 43, .14), transparent 70%), var(--swu-card) !important;
  border: 1px solid var(--swu-card-brd) !important; box-shadow: var(--swu-shadow) !important;
}
.htva.htva.htva.sw-post .rsc-side .rsc-cta b { font-family: var(--f-head); font-size: 18px; }
/* end-of-post CTA: a dark closer panel in both themes, like the homepage closer */
.htva.htva.htva.sw-post .rsc-endcta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 44px 40px 40px; text-align: center;
  color: #e9f1f8; border: 1px solid rgba(140, 195, 240, .18) !important;
  background: radial-gradient(70% 90% at 88% 0%, rgba(249, 115, 22, .22), transparent 62%),
              radial-gradient(60% 90% at 0% 100%, rgba(8, 145, 178, .2), transparent 65%), #08111b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -40px rgba(0, 0, 0, .9) !important;
}
.htva.htva.htva.sw-post .rsc-endcta::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  background-size: 200% 100%; animation: cpxScan 5s linear infinite; opacity: .7;
}
.htva.htva.htva.sw-post .rsc-endcta h3 { font-family: var(--f-head); font-size: 28px; line-height: 1.2; color: #f1f6fb; margin: 12px 0 10px; }
.htva.htva.htva.sw-post .rsc-endcta p { color: #b6c6d6; font-size: 16px; line-height: 1.65; }
.htva.htva.htva.sw-post .rsc-endcta .k { color: #ffb37f; font-size: 12px; }
.htva.htva.htva.sw-post .rsc-endcta .btn { margin-top: 22px; }

@media (max-width: 980px) {
  .htva.htva.htva.sw-util .page-hero .rhero:has(.swu-404art) { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-util .swu-404art svg { max-width: 360px; }
  .htva.htva.htva.sw-util .swu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .htva.htva.htva.sw-util .swu-prose .legal { padding: 28px 20px 24px 24px; border-radius: 16px; }
  .htva.htva.htva.sw-util .swu-prose .legal :is(p, li) { font-size: 16px; }
  .htva.htva.htva.sw-util .swu-article .legal h2 { font-size: 21px; }
  .htva.htva.htva.sw-util .swu-feat .rsc-feat__body { padding: 24px 22px; }
  .htva.htva.htva.sw-util .swu-feat .rsc-feat__title { font-size: 22px; }
  .htva.htva.htva.sw-util .swu-links { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.sw-util .swu-404art svg { max-width: 300px; }
  .htva.htva.htva.sw-post .rsc-endcta { padding: 32px 20px 28px; border-radius: 18px; }
  .htva.htva.htva.sw-post .rsc-endcta h3 { font-size: 23px; }
  .htva.htva.htva.sw-post .rsc-post .wrap .rsc-body .rsc-inline-cta { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva:is(.sw-util, .sw-post) :is(.rsc-tool, .rsc-feat, .rsc-card--media, .swu-link, .rsc-authorlinks a, .rsc-pager a) { transition: none; }
  .htva.htva.htva:is(.sw-util, .sw-post) :is(.rsc-tool, .rsc-feat, .rsc-card--media, .swu-link, .rsc-authorlinks a, .rsc-pager a):hover { transform: none !important; }
  .htva.htva.htva.sw-util :is(.swu-route, .swu-pin) { animation: none; }
  .htva.htva.htva.sw-post .rsc-endcta::after { animation: none; }
}


/* src/styles/htva-v10-1.css */
/* src/styles/htva-v10-1.css: /v10 section rhythm (2026-10-15). Light theme alternates dark and light:
   hero D, trust L, offer L-paper, funnel D, booking L, clients D, comparison L, ops D, roles L,
   how-it-works D (.v10-dark), founder, FAQ L, closer D. Two lights in a row use different surfaces.
   .v10-dark re-tokens a section dark in the light theme (same values the site's dark instrument strips use). */
.htva.htva.htva .sec.v10-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel);
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva[data-theme="light"] .v10-dark {
  --text: #e9f1f8; --dim: #b6c6d6; --mut: #8298ad; --hair: rgba(140, 195, 240, .14); --accent-ink: #67e8f9;
  --panel: #0f1b2a; --panel-brd: rgba(140, 195, 240, .16); --bg: #08111b; --line: rgba(140, 195, 240, .16);
  color-scheme: dark; color: var(--text);
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b;
}
.htva.htva.htva .v10-trust-note { margin: 22px auto 0; max-width: 420px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--mut); }


/* src/styles/htva-v10-10.css */
/* src/styles/htva-v10-10.css: /v10 #cost savings version: the yearly saving is the big number, the US cost sits small below. */
.htva.htva.htva .v10-calc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 8px 0 6px; }
.htva.htva.htva .v10-calc-big > span:first-child { background: linear-gradient(100deg, #ffc49b 0%, #ff6a2b 55%, #ea580c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.htva.htva.htva .v10-calc-per { font-family: var(--f-body, inherit); font-weight: 600; font-size: 20px; color: #d5e3ef; }
.htva.htva.htva .v10-calc-sub { font-size: 15px; color: #e9f1f8; }
.htva.htva.htva .v10-calc-range { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(249, 115, 22, .25); font-size: 13.5px; color: #b6c6d6; }
.htva.htva.htva .v10-calc-row { padding: 9px 2px; font-size: 14px; }
.htva.htva.htva .v10-calc-row:first-child { font-size: 15px; }
.htva.htva.htva .v10-calc-row:first-child .v10-calc-val { font-size: 16px; }
.htva.htva.htva .v10-calc-row:not(:first-child) { color: #b6c6d6; }


/* src/styles/htva-v10-11.css */
/* src/styles/htva-v10-11.css: /v10 #cost, owner: make it unmistakable that the big number is a SAVING, not our price.
   "You could save up to" turns bold electric orange, and a light band sweeps across it left to right every ~5s.
   Reduced motion: the label stays solid orange with no sweep. */
.htva.htva.htva .v10-calc-res > .v10-calc-cap {
  display: inline-block; font-size: 15px; font-weight: 800; letter-spacing: .14em; color: #ff5a00;
  background: linear-gradient(100deg, #ff5a00 0%, #ff5a00 42%, #fff1e0 50%, #ff5a00 58%, #ff5a00 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 90, 0, .35);
  animation: v10-calc-shine 5s ease-in-out 1s infinite;
}
@keyframes v10-calc-shine {
  0% { background-position: 100% 0; }
  28% { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva .v10-calc-res > .v10-calc-cap { animation: none; background: none; -webkit-text-fill-color: #ff5a00; }
}


/* src/styles/htva-v10-12.css */
/* src/styles/htva-v10-12.css: /v10 roles board, owner: HTVA places beyond four disciplines (medical, roofing, more), so the
   board's strip no longer says "four disciplines". Scoped to .v10-roles: the shared strip rule still serves the live home. */
.htva.htva.htva .v10-roles .bento::before { content: "Our most-requested roles \00a0\00b7\00a0 don\2019t see yours? ask us \00a0\00b7\00a0 one accountable roof"; }


/* src/styles/htva-v10-13.css */
/* src/styles/htva-v10-13.css: /v10 roles board, owner: the strip above the columns was barely readable and its
   "most-requested" ranked roles against each other, so it goes (the "ask us" invite lives in the industries line). */
.htva.htva.htva .v10-roles .bento::before { content: none; display: none; }


/* src/styles/htva-v10-14.css */
/* src/styles/htva-v10-14.css: /v10 roles board, the orange status dot belonged to the removed strip (-13); it goes too. */
.htva.htva.htva .v10-roles .bento::after { content: none; display: none; }


/* src/styles/htva-v10-15.css */
/* src/styles/htva-v10-15.css: /v10 roles board, owner: the board must not read as the full list, so its last row says
   "Don't see your role?" with a booking CTA. Full width under the four columns; light and dark follow the site theme. */
.htva.htva.htva .v10-roles-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 28px; padding: 22px 26px; border-top: 1px solid rgba(15, 23, 42, .09); background: rgba(234, 88, 12, .045); }
.htva.htva.htva .v10-roles-more p { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.5; color: inherit; }
.htva.htva.htva .v10-roles-more-h { font-weight: 700; margin-right: 6px; }
.htva.htva.htva .v10-roles-more .btn { flex: none; }
.htva.htva.htva[data-theme="dark"] .v10-roles-more { border-top-color: rgba(140, 195, 240, .16); background: rgba(249, 115, 22, .06); }
@media (max-width: 640px) { .htva.htva.htva .v10-roles-more { padding: 18px; } }


/* src/styles/htva-v10-16.css */
/* src/styles/htva-v10-16.css: /v10 "Experience" section (2026-10-15, owner), replaces the cost calculator in the
   ops slot, so it keeps the dark surface of the rhythm (htva-v10-1.css). A row of cards that loops right to left:
   first name, role, country, then "Previously supported" + the company logo. Logos are inline SVG in currentColor
   (--logo-ko paints their knockouts in the card colour) so they follow both themes. htva-expmarquee-1.js clones the
   one card set for a seamless loop (clone is aria-hidden + inert); without the script the row scrolls sideways. */
.htva.htva.htva #experience.sec.v10-exp {
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b;
  color: var(--text); overflow: clip;
}
.htva.htva.htva .v10-exp-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.htva.htva.htva .v10-exp-head .kicker { justify-content: center; }
.htva.htva.htva .v10-exp-head .lead { margin: 18px auto 0; max-width: 640px; }

.htva.htva.htva .v10-exp-marquee {
  --card: #0f1b2a; --logo-ko: #0f1b2a;
  position: relative; overflow-x: auto; scrollbar-width: none; padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.htva.htva.htva .v10-exp-marquee::-webkit-scrollbar { display: none; }
.htva.htva.htva .v10-exp-marquee.is-loop { overflow: hidden; }
.htva.htva.htva .v10-exp-track { display: flex; width: max-content; }
.htva.htva.htva .v10-exp-marquee.is-loop .v10-exp-track { animation: v10-exp-run 70s linear infinite; }
.htva.htva.htva .v10-exp-marquee.is-loop:hover .v10-exp-track,
.htva.htva.htva .v10-exp-marquee.is-loop:focus-within .v10-exp-track { animation-play-state: paused; }
@keyframes v10-exp-run { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva .v10-exp-marquee.is-loop { overflow-x: auto; }
  .htva.htva.htva .v10-exp-marquee.is-loop .v10-exp-track { animation: none; }
  .htva.htva.htva .v10-exp-track > [aria-hidden="true"] { display: none; }
}

.htva.htva.htva .v10-exp-set { display: flex; gap: 18px; margin: 0; padding: 0 9px; list-style: none; }
.htva.htva.htva .v10-exp-card {
  flex: none; width: 272px; display: flex; flex-direction: column; border-radius: 18px; padding: 20px 20px 18px;
  background: var(--card); border: 1px solid rgba(140, 195, 240, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 30px -18px rgba(0, 0, 0, .7);
}
.htva.htva.htva .v10-exp-who { display: flex; align-items: center; gap: 12px; }
.htva.htva.htva .v10-exp-ini {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(140deg, #fb923c, #ea580c); box-shadow: 0 6px 16px -6px rgba(234, 88, 12, .7);
}
.htva.htva.htva .v10-exp-id { display: flex; flex-direction: column; min-width: 0; }
.htva.htva.htva .v10-exp-name { font-weight: 800; font-size: 18px; line-height: 1.2; color: #f1f6fb; }
.htva.htva.htva .v10-exp-role { font-size: 14px; line-height: 1.35; color: #b6c6d6; }
.htva.htva.htva .v10-exp-ctry { margin-top: 2px; font-size: 12px; letter-spacing: .04em; color: #8298ad; }
.htva.htva.htva .v10-exp-prev {
  margin: 16px 0 10px; padding-top: 14px; border-top: 1px dashed rgba(140, 195, 240, .2);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fb923c;
}
.htva.htva.htva .v10-exp-logo { height: 40px; display: flex; align-items: center; gap: 8px; color: #e9f1f8; }
.htva.htva.htva .v10-exp-logo svg { display: block; width: auto; height: 26px; max-width: 170px; }
.htva.htva.htva .v10-exp-logo[data-logo="att"] svg { height: 32px; }
.htva.htva.htva .v10-exp-logo[data-logo="quickbooks"] svg { height: 26px; }
.htva.htva.htva .v10-exp-logo[data-logo="tmobile"] svg { height: 23px; }
.htva.htva.htva .v10-exp-logo[data-logo="directv"] svg { height: 22px; }
.htva.htva.htva .v10-exp-logo[data-logo="optum"] svg { height: 27px; }
.htva.htva.htva .v10-exp-logo[data-logo="ringcentral"] svg { height: 20px; }
.htva.htva.htva .v10-exp-logo[data-logo="royalcaribbean"] svg { height: 38px; }
.htva.htva.htva .v10-exp-logo[data-logo="jpmc"] svg { height: 19px; }
.htva.htva.htva .v10-exp-logo[data-logo="wellsfargo"] svg { height: 38px; }
.htva.htva.htva .v10-exp-logo[data-logo="optimum"] svg { height: 23px; }
.htva.htva.htva .v10-exp-logo[data-logo="googleads"] svg { height: 24px; }
.htva.htva.htva .v10-exp-gads { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.htva.htva.htva .v10-exp-foot { margin: 40px auto 0; max-width: 760px; text-align: center; }
.htva.htva.htva .v10-exp-foot .btn { margin: 0 auto; }
.htva.htva.htva .v10-exp-note { margin: 18px auto 0; max-width: 600px; font-size: 12px; line-height: 1.5; color: #8298ad; }
@media (max-width: 640px) {
  .htva.htva.htva .v10-exp-card { width: 236px; padding: 16px; }
  .htva.htva.htva .v10-exp-head { margin-bottom: 30px; }
}


/* src/styles/htva-v10-17.css */
/* src/styles/htva-v10-17.css: /v10 Experience fixes after the live check. Light theme kept the heading and kicker in
   their light-page ink on the dark surface (they are not tokened by .v10-dark), and the card row stopped at the
   content width; it now runs edge to edge. */
.htva.htva.htva #experience .v10-exp-head .h2 { color: #f1f6fb; }
.htva.htva.htva #experience .v10-exp-head .kicker { color: #b6c6d6; }
.htva.htva.htva #experience .v10-exp-head .lead { color: #b6c6d6; }
.htva.htva.htva #experience .v10-exp-marquee {
  margin-inline: calc(50% - 50vw); width: 100vw;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}


/* src/styles/htva-v10-18.css */
/* src/styles/htva-v10-18.css: /v10 Experience: a role that wraps to two lines pushed that card's logo lower than its
   neighbours; the "Previously supported" block now sits at the foot of every card so the logos line up. */
.htva.htva.htva #experience .v10-exp-prev { margin-top: auto; }
.htva.htva.htva #experience .v10-exp-who { margin-bottom: 16px; }


/* src/styles/htva-v10-19.css */
/* src/styles/htva-v10-19.css: /v10 Experience heading, owner: white line "Virtual assistants with experience" on one
   smaller line, the orange "from brands you know." as its own full line beneath. */
.htva.htva.htva #experience .v10-exp-head { max-width: 1040px; }
.htva.htva.htva #experience .v10-exp-head .h2 { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.12; }
.htva.htva.htva #experience .v10-exp-head .h2 .mk { display: block; font-size: 1.42em; line-height: 1.05; margin-top: 4px; }
@media (max-width: 640px) { .htva.htva.htva #experience .v10-exp-head .h2 { font-size: 24px; } .htva.htva.htva #experience .v10-exp-head .h2 .mk { font-size: 1.4em; } }


/* src/styles/htva-v10-2.css */
/* src/styles/htva-v10-2.css: htva-v10-1.css lost to section rules keyed on ids (#how, #capabilities) and
   the light theme's nth-of-type alternation; same surfaces, keyed on the ids. */
.htva.htva.htva #capabilities.sec.v10-paper {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--panel);
}
.htva.htva.htva[data-theme="light"] #how.sec.v10-dark {
  background: radial-gradient(70% 60% at 85% 0%, rgba(249, 115, 22, .14), transparent 60%),
              radial-gradient(60% 60% at 0% 100%, rgba(8, 145, 178, .16), transparent 65%), #08111b;
}


/* src/styles/htva-v10-20.css */
/* src/styles/htva-v10-20.css: /v10 Experience cards, round 2 (owner): name + one-line role beside the initial tile,
   the country as a round flag on the tile's corner, a small right-aligned "Previously at", and the logo centred in
   the lower half of the card. Overrides htva-v10-16/-18. */
.htva.htva.htva #experience .v10-exp-card { width: 280px; min-height: 200px; padding: 18px 20px 16px; }
.htva.htva.htva #experience .v10-exp-who { margin-bottom: 0; }
.htva.htva.htva #experience .v10-exp-av { position: relative; flex: none; display: block; width: 42px; height: 42px; }
.htva.htva.htva #experience .v10-exp-flag {
  position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px var(--card, #0f1b2a), 0 2px 6px rgba(0, 0, 0, .5);
}
.htva.htva.htva #experience .v10-exp-flag svg { display: block; width: 100%; height: 100%; }
.htva.htva.htva #experience .v10-exp-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htva.htva.htva #experience .v10-exp-id { flex: 1; }
.htva.htva.htva #experience .v10-exp-prev {
  margin: 16px 0 0; padding-top: 10px; text-align: right;
  font-size: 10px; letter-spacing: .12em; font-weight: 600; color: #8298ad;
}
.htva.htva.htva #experience .v10-exp-logo { flex: 1; height: auto; min-height: 64px; justify-content: center; }
.htva.htva.htva #experience .v10-exp-logo[data-logo="clickfunnels"] svg { height: 22px; }
.htva.htva.htva #experience .v10-exp-logo[data-logo="primemover"] svg { height: 19px; }
.htva.htva.htva #experience .v10-exp-logo[data-logo="sevenff"] svg { height: 20px; }
@media (max-width: 640px) { .htva.htva.htva #experience .v10-exp-card { width: 250px; } }


/* src/styles/htva-v10-21.css */
/* src/styles/htva-v10-21.css: /v10 Experience hover (owner): the row already pauses under the mouse; the card under
   it now lifts 5% and turns a shade of orange (background, border, glow), so moving across the row highlights one
   card at a time. --card / --logo-ko follow the tint so logo knockouts and the flag ring stay seamless. The row gets
   vertical room so the scaled card isn't clipped. Reduced motion: tint only, no scale. */
.htva.htva.htva #experience .v10-exp-marquee { padding: 16px 0 18px; }
.htva.htva.htva #experience .v10-exp-card {
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
  background-color: var(--card);
}
.htva.htva.htva #experience .v10-exp-card:hover {
  --card: #2a1a12; --logo-ko: #2a1a12;
  transform: scale(1.05); position: relative; z-index: 1;
  background-color: var(--card); border-color: rgba(249, 115, 22, .6);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .25), 0 18px 40px -16px rgba(234, 88, 12, .55);
}
.htva.htva.htva #experience .v10-exp-card:hover .v10-exp-prev { color: #fdba74; border-top-color: rgba(249, 115, 22, .35); }
.htva.htva.htva #experience .v10-exp-card:hover .v10-exp-logo { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva #experience .v10-exp-card:hover { transform: none; }
}


/* src/styles/htva-v10-22.css */
/* src/styles/htva-v10-22.css: launch polish (2026-10-16, owner "fix all what's messed").
   1. Closing section buttons were ALL CAPS (htva-closer9.css .tp-btn); every other button is sentence case.
   2. Roles board count badges were barely readable in the light theme.
   3. Hero map: the "Medellin" label sat under the headline's "&" at desktop widths; the dot stays, the label goes. */
.htva.htva.htva .tp-closer .tp-btn { text-transform: none; letter-spacing: 0; font-size: 15px; }
.htva.htva.htva[data-theme="light"] .v10-roles .cnt {
  opacity: 1; color: #9a3412; background: rgba(234, 88, 12, .12); border-color: rgba(234, 88, 12, .4);
}
.htva.htva.htva .tmap .twn[data-name="Medellin"] .twl { display: none; }


/* src/styles/htva-v10-23.css */
/* src/styles/htva-v10-23.css: homepage "Human talent + AI" cards (2026-10-16, owner): on hover each card gets a
   light blue tint, the dotted texture in its top-right corner (same dots as the roles tiles, .tile::after) and a
   2.5% zoom. A small accent that follows the other emphasised cards, not a new effect. ::after is the scan line,
   so the dots use ::before. */
.htva.htva.htva .cpx-lane {
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.htva.htva.htva .cpx-lane::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, var(--accent) .55px, transparent .8px) 0 0 / 3px 3px;
  -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%);
          mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%);
  opacity: 0; transition: opacity .25s ease;
}
.htva.htva.htva .cpx-lane > * { position: relative; }
.htva.htva.htva .cpx-lane:hover,
.htva.htva.htva .cpx-lane:focus-within {
  transform: scale(1.025); z-index: 1;
  background-color: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.htva.htva.htva .cpx-lane:hover::before,
.htva.htva.htva .cpx-lane:focus-within::before { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva .cpx-lane:hover, .htva.htva.htva .cpx-lane:focus-within { transform: none; }
}


/* src/styles/htva-v10-3.css */
/* src/styles/htva-v10-3.css: "How it works" as a dark band in the light theme: its heading, lead, step
   titles and the four brief cards had light-theme colours hardcoded; pinned to the dark band's palette. */
.htva.htva.htva[data-theme="light"] #how .v2jhead > :nth-child(2),
.htva.htva.htva[data-theme="light"] #how .v2jhead > :nth-child(2) *,
.htva.htva.htva[data-theme="light"] #how .v2sbody > :nth-child(2),
.htva.htva.htva[data-theme="light"] #how .v2sbody > :nth-child(2) * { color: #f1f5f9; -webkit-text-fill-color: currentColor; }
.htva.htva.htva[data-theme="light"] #how .v2jhead > :nth-child(3),
.htva.htva.htva[data-theme="light"] #how .v2sbody > :nth-child(3) { color: #b6c6d6; }
.htva.htva.htva[data-theme="light"] #how .v2tag { color: #fdba74; }
.htva.htva.htva[data-theme="light"] #how .v2artcard {
  background: linear-gradient(180deg, #13233a, #0d1828); border: 1px solid rgba(140, 195, 240, .18);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7);
}
.htva.htva.htva[data-theme="light"] #how .v2artcard .v2t,
.htva.htva.htva[data-theme="light"] #how .v2artcard .v2t * { color: #f1f5f9; }
.htva.htva.htva[data-theme="light"] #how .v2artcard .v2rowline,
.htva.htva.htva[data-theme="light"] #how .v2artcard .v2rowline * { color: #cfe0ee; border-color: rgba(140, 195, 240, .14); }
.htva.htva.htva[data-theme="light"] #how .v2artcard .v2h { border-color: rgba(140, 195, 240, .14); }


/* src/styles/htva-v10-4.css */
/* src/styles/htva-v10-4.css: "How it works" dark band, the brief cards' status pills and icon tiles. */
.htva.htva.htva.htva[data-theme="light"] #how .v2artcard .v2pill { color: #67e8f9; background: rgba(103, 232, 249, .12); border-color: rgba(103, 232, 249, .3); }
.htva.htva.htva.htva[data-theme="light"] #how .v2artcard .v2i { background: rgba(103, 232, 249, .12); border-color: rgba(103, 232, 249, .25); color: #67e8f9; }
.htva.htva.htva.htva[data-theme="light"] #how .v2artcard .v2i svg { color: #67e8f9; stroke: currentColor; }


/* src/styles/htva-v10-5.css */
/* src/styles/htva-v10-5.css: /v10 round 2. Roles: hover/focus marks the one role link, not the column.
   Comparison: green circled checks vs red circled X's, equal-height columns. */
.htva.htva.htva .v10-roles .bento .tile:hover {
  transform: none; background: transparent;
  box-shadow: 1px 0 0 0 var(--hair), 0 1px 0 0 var(--hair);
}
.htva.htva.htva .v10-roles .tile li {
  position: relative; margin: 0 -10px; padding: 5px 10px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.htva.htva.htva .v10-roles .tile li a { color: inherit; text-decoration: none; }
.htva.htva.htva .v10-roles .tile li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.htva.htva.htva .v10-roles .tile li:hover,
.htva.htva.htva .v10-roles .tile li:has(a:focus-visible) {
  color: #fdba74; background: rgba(249, 115, 22, .14); box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .45);
}
.htva.htva.htva[data-theme="light"] .v10-roles .tile li:hover,
.htva.htva.htva[data-theme="light"] .v10-roles .tile li:has(a:focus-visible) {
  color: #c2410c; background: rgba(249, 115, 22, .1); box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .4);
}
.htva.htva.htva .v10-roles .tile li:hover .ck,
.htva.htva.htva .v10-roles .tile li:has(a:focus-visible) .ck { color: currentColor; }
.htva.htva.htva .v10-roles .tile li a:focus-visible { outline: none; }

.htva.htva.htva .v10-vs { align-items: stretch; }
.htva.htva.htva .v10-vs .v9-col li { grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.htva.htva.htva .v10-vs .v9-col li::before {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: 0;
  font-size: 12px; font-weight: 800; line-height: 1; border: 1px solid;
}
.htva.htva.htva .v10-vs .v9-col--us li::before { content: "✓"; color: #4ade80; background: rgba(34, 197, 94, .16); border-color: rgba(74, 222, 128, .5); }
.htva.htva.htva .v10-vs .v9-col--them li::before { content: "✕"; color: #f87171; background: rgba(239, 68, 68, .14); border-color: rgba(248, 113, 113, .45); }
.htva.htva.htva[data-theme="light"] .v10-vs .v9-col--us li::before { color: #15803d; background: #dcfce7; border-color: #86efac; }
.htva.htva.htva[data-theme="light"] .v10-vs .v9-col--them li::before { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }


/* src/styles/htva-v10-6.css */
/* src/styles/htva-v10-6.css: roles hover, dark theme: the column's animated edge beam (.v2page .tile:hover::before)
   still lit the whole column; only the role link marks the hover now. */
.htva.htva.htva .v10-roles .tile:hover::before { opacity: 0; animation: none; }


/* src/styles/htva-v10-7.css */
/* src/styles/htva-v10-7.css: /v10 ops section, owner: the four checkmarks repeated the comparison list, so the column
   ends in a booking CTA instead (opens the pop-up). */
.htva.htva.htva .v10-ops-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }


/* src/styles/htva-v10-8.css */
/* src/styles/htva-v10-8.css: /v10 #cost, the US in-house cost calculator in the dark ops band (dark in both themes). */
.htva.htva.htva .v10-calc-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.htva.htva.htva .v10-calc-steps li { display: flex; align-items: center; gap: 14px; color: #d5e3ef; font-size: 17px; }
.htva.htva.htva .v10-calc-steps li > span:first-child { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px -8px rgba(249, 115, 22, .7); }
.htva.htva.htva .v10-calc-note { margin: 22px 0 0; max-width: 520px; font-size: 12.5px; line-height: 1.55; color: #8298ad; }

.htva.htva.htva .v10-calc { position: relative; align-self: start; display: grid; gap: 18px; padding: 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 30, 46, .92), rgba(9, 17, 28, .96)); border: 1px solid rgba(140, 195, 240, .2);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .12), 0 40px 90px -40px rgba(249, 115, 22, .35), 0 30px 70px -40px rgba(0, 0, 0, .8); color: #e9f1f8; }
.htva.htva.htva .v10-calc-top { display: grid; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8298ad; }
.htva.htva.htva .v10-calc-sel { appearance: none; -webkit-appearance: none; width: 100%; padding: 14px 44px 14px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(249, 115, 22, .45); background: #0b1522 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f97316' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: #e9f1f8; font: 600 17px/1.2 var(--f-body, inherit); letter-spacing: 0; text-transform: none; color-scheme: dark; }
.htva.htva.htva .v10-calc-sel:focus-visible { outline: none; border-color: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); }
.htva.htva.htva .v10-calc-res { padding: 20px 22px; border-radius: 16px; background: linear-gradient(135deg, rgba(249, 115, 22, .16), rgba(249, 115, 22, .04)); border: 1px solid rgba(249, 115, 22, .3); }
.htva.htva.htva .v10-calc-cap { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #b6c6d6; }
.htva.htva.htva .v10-calc-big { margin: 6px 0 2px; font-family: var(--f-head); font-weight: 800; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: #fff; }
.htva.htva.htva .v10-calc-sub { margin: 0; font-size: 14px; color: #b6c6d6; }
.htva.htva.htva .v10-calc-rows { display: grid; }
.htva.htva.htva .v10-calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 2px; border-bottom: 1px solid rgba(140, 195, 240, .12); font-size: 15px; color: #d5e3ef; }
.htva.htva.htva .v10-calc-row b { color: #fff; font-weight: 700; white-space: nowrap; }
.htva.htva.htva .v10-calc-soc { margin: -6px 0 0; font-size: 12px; color: #8298ad; }
.htva.htva.htva .v10-calc-us { padding: 18px 20px; border-radius: 16px; background: rgba(34, 211, 238, .05); border: 1px solid rgba(34, 211, 238, .22); }
.htva.htva.htva .v10-calc-ush { margin: 0 0 10px; font-weight: 700; font-size: 16px; color: #fff; }
.htva.htva.htva .v10-calc-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.htva.htva.htva .v10-calc-inc li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; color: #d5e3ef; }
.htva.htva.htva .v10-calc-inc li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px; border-left: 2px solid #22d3ee; border-bottom: 2px solid #22d3ee; transform: rotate(-45deg); }
.htva.htva.htva .v10-calc-price { margin: 12px 0 0; font-size: 13.5px; color: #b6c6d6; }
.htva.htva.htva .v10-calc-all { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.htva.htva.htva .v10-calc-all .v10-calc-cap { grid-column: 1 / -1; margin-bottom: 4px; }
.htva.htva.htva .v10-calc-pick { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid rgba(140, 195, 240, .14); background: rgba(150, 200, 240, .04); color: #d5e3ef; font: 500 13.5px/1.3 var(--f-body, inherit); box-shadow: none; }
.htva.htva.htva .v10-calc-pick b { color: #fff; font-weight: 700; white-space: nowrap; }
.htva.htva.htva .v10-calc-pick:hover { border-color: rgba(249, 115, 22, .5); }
.htva.htva.htva .v10-calc-pick[aria-pressed="true"] { border-color: #f97316; background: rgba(249, 115, 22, .12); }
@media (max-width: 640px) {
  .htva.htva.htva .v10-calc { padding: 18px; }
  .htva.htva.htva .v10-calc-inc, .htva.htva.htva .v10-calc-all { grid-template-columns: 1fr; }
}


/* src/styles/htva-v10-9.css */
/* src/styles/htva-v10-9.css: /v10 #cost, the figures are span.v10-calc-val (base.text can't render a <b>). */
.htva.htva.htva .v10-calc-row .v10-calc-val, .htva.htva.htva .v10-calc-pick .v10-calc-val { color: #fff; font-weight: 700; white-space: nowrap; }


/* src/styles/htva-v2at.css */
/* ============ HTVA homepage v2 preview (scoped: .v2page only) ============
   Everything here is inert on pages without the .v2page wrapper class. */

.v2page{
  --v2warm:#fb923c; --v2warm-2:var(--warm,#f97316); --v2amber:#fdba74;
  --v2cool:var(--accent,#22d3ee); --v2cool-ink:var(--accent-ink,#67e8f9);
  --v2live:var(--live,#34d399);
  --v2surface:var(--panel,rgba(150,200,240,.045));
  --v2line:var(--hair,rgba(140,195,240,.12));
  --v2mut:color-mix(in srgb, var(--text,#e9f1f8) 60%, transparent);
  --v2ease:var(--ease,cubic-bezier(.22,1,.36,1));
  /* SITE RULE: every background halftone uses ONE grid - 4px pitch, .7px dot,
     1.2px falloff. Matches the hero glow and the timepiece dial. Never hand-roll
     another size; reference these three tokens so the whole page reads as one field. */
  --v2dot-pitch:4px; --v2dot-r:.7px; --v2dot-fade:1.2px;
}

/* ---- reveal ---- */
.v2page .v2rev{opacity:0; transform:translateY(20px); transition:opacity .7s var(--v2ease), transform .7s var(--v2ease);}
.v2page .v2rev.in{opacity:1; transform:none;}

/* ---- section rhythm washes ---- */
.v2page .v2wall{background:var(--bg-2,#0a1420); border-top:1px solid var(--v2line); border-bottom:1px solid var(--v2line);}
.v2page .v2band{background:linear-gradient(180deg, var(--bg,#05090f), color-mix(in srgb, var(--v2cool) 7%, var(--bg,#05090f)));}
.v2page #difference{position:relative; background:
  radial-gradient(72% 68% at 100% 0%, color-mix(in srgb, var(--v2warm) 13%, transparent), transparent 58%),
  radial-gradient(68% 62% at 0% 100%, color-mix(in srgb, var(--v2cool) 10%, transparent), transparent 60%),
  var(--bg,#05090f);}
.v2page .v2journey{position:relative;}
.v2page .v2journey::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--v2line) 18%, var(--v2line) 82%, transparent);}

/* ---- journey ---- */
.v2page .v2jhead{text-align:center; max-width:760px; margin:0 auto 40px; padding:0 24px;}
.v2page .v2jhead p{color:var(--v2mut); margin-top:14px;}
.v2page .v2jrail{position:relative; max-width:1010px; margin:0 auto; padding:0 24px;}
.v2page .v2spine{position:absolute; left:50px; top:8px; bottom:70px; width:2px;
  background:var(--v2line); z-index:0;}
.v2page .v2spinefill{position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--v2live);
  background-repeat:no-repeat; background-position:top; background-size:100% var(--sfh,1200px);
  transition:height .12s linear;}
.v2page .v2station{position:relative; display:grid; grid-template-columns:1fr 316px; gap:34px;
  align-items:start; padding:0 0 44px 74px;}
.v2page .v2station:last-child{padding-bottom:0;}
.v2page .v2node{position:absolute; left:26px; top:0; transform:translateX(-50%); width:52px; height:52px;
  border-radius:50%; background:var(--bg-2,#0a1420); border:2px solid var(--v2line); display:grid;
  place-items:center; font-family:var(--f-head); font-weight:800; font-size:1.1rem;
  color:var(--v2mut); z-index:3; transition:all .4s var(--v2ease);}
.v2page .v2station.bad .v2node, .v2page .v2node.start{background:var(--v2warm-2); border-color:var(--v2warm-2);
  color:#fff; box-shadow:0 10px 24px rgba(249,115,22,.34);}
.v2page .v2node .v2nd{width:12px; height:12px; border-radius:50%; background:#fff; display:block;}
.v2page .v2station.good .v2node{border-color:color-mix(in srgb, var(--v2live) 46%, var(--v2line));}
.v2page .v2station.good.lit .v2node{border-color:var(--v2live); color:#04110a; background:var(--v2live);
  box-shadow:0 10px 24px rgba(52,211,153,.32);}
.v2page .v2tag{font-weight:600; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--v2warm); display:block; margin-bottom:9px; font-family:var(--f-mono);}
.v2page .v2station.good .v2tag{color:var(--v2live);}
.v2page .v2station h3{font-size:clamp(1.15rem,1.5vw,1.4rem); letter-spacing:-.02em; margin:0;}
.v2page .v2sbody > p{color:var(--v2mut); margin-top:11px; font-size:1rem; max-width:48ch;}
.v2page .v2chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;}
.v2page .v2c{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:.8rem; font-weight:500; color:var(--text,#e9f1f8); background:var(--v2surface);
  border:1px solid var(--v2line); border-radius:999px; padding:7px 13px;}
.v2page .v2c .v2g{color:var(--v2live); font-weight:700;}

/* journey aside cards */
.v2page .v2artcard{position:relative; background:var(--v2surface); border:1px solid var(--v2line);
  border-radius:var(--r,16px); padding:20px; width:100%;
  transition:border-color .5s var(--v2ease), box-shadow .5s var(--v2ease), transform .5s var(--v2ease);}
.v2page .v2station.bad .v2artcard{background:linear-gradient(158deg, color-mix(in srgb, var(--v2warm) 14%, var(--v2surface)) 0%, var(--v2surface) 66%);}
.v2page .v2station.good .v2artcard{background:linear-gradient(158deg, color-mix(in srgb, var(--v2live) 11%, var(--v2surface)) 0%, var(--v2surface) 66%);}
.v2page .v2station.lit .v2artcard{transform:scale(1.02) translateY(-2px);}
.v2page .v2station.bad.lit .v2artcard{box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 40px -8px color-mix(in srgb, var(--v2warm) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--v2warm) 22%, transparent);}
.v2page .v2station.good.lit .v2artcard{box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 40px -8px color-mix(in srgb, var(--v2live) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--v2live) 20%, transparent);}
.v2page .v2artcard:hover{transform:scale(1.05) translateY(-3px); z-index:3;}
.v2page .v2artcard .v2h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px;}
.v2page .v2artcard .v2t{font-family:var(--f-head); font-weight:700; color:var(--text,#e9f1f8); font-size:.98rem;}
.v2page .v2pill{font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; font-family:var(--f-mono); white-space:nowrap;}
.v2page .v2pill-warm{background:color-mix(in srgb, var(--v2warm) 16%, transparent); color:var(--v2warm);}
.v2page .v2pill-cool{background:color-mix(in srgb, var(--v2cool) 16%, transparent); color:var(--v2cool-ink);}
.v2page .v2pill-good{background:color-mix(in srgb, var(--v2live) 14%, transparent); color:var(--v2live);}
.v2page .v2rowline{display:flex; align-items:center; gap:10px; padding:10px 0;
  border-top:1px solid var(--v2line); font-size:.9rem; font-weight:500; color:var(--text,#e9f1f8);}
.v2page .v2rowline:first-of-type{border-top:none;}
.v2page .v2rowline .v2i{width:24px; height:24px; border-radius:7px; background:var(--bg-2,#0a1420);
  color:var(--v2warm); display:grid; place-items:center; flex:none;}
.v2page .v2station.good .v2rowline .v2i{color:var(--v2live);}
.v2page .v2cardlink{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-weight:600;
  font-size:.85rem; color:var(--v2cool-ink); cursor:pointer; background:none; border:none; padding:0;
  font-family:var(--f-body);}
.v2page .v2cardlink:hover{text-decoration:underline;}

/* ---- managed-live console ---- */
.v2page .v2consolewrap{max-width:980px; margin:52px auto 0; padding:0 24px; position:relative;}
.v2page .v2console{position:relative; isolation:isolate; background:var(--bg-2,#0a1420);
  border:1px solid var(--v2line); border-radius:24px; padding:10px;
  box-shadow:0 34px 80px rgba(0,0,0,.45);}
.v2page .v2console::before, .v2page .v2console::after{content:""; position:absolute; top:12%; bottom:12%;
  width:130px; z-index:-1; filter:blur(34px); pointer-events:none;}
.v2page .v2console::before{left:-34px; background:radial-gradient(closest-side, color-mix(in srgb, var(--v2cool) 55%, transparent), transparent);}
.v2page .v2console::after{right:-34px; background:radial-gradient(closest-side, color-mix(in srgb, var(--v2warm) 55%, transparent), transparent);}
.v2page .v2cbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--v2line);}
.v2page .v2lbl{font-weight:600; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--v2mut); display:flex; align-items:center; gap:8px; white-space:nowrap; flex:none;
  font-family:var(--f-mono);}
.v2page .v2livedot{width:8px; height:8px; border-radius:50%; background:var(--v2live);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--v2live) 22%, transparent); animation:v2blip 2.4s var(--v2ease) infinite;}
@keyframes v2blip{0%,100%{opacity:1}50%{opacity:.35}}
.v2page .v2ticker{overflow:hidden; flex:1; min-width:0; margin-left:14px;}
.v2page .v2roll{display:block; font-family:var(--f-mono); font-weight:600; font-size:.84rem;
  color:var(--v2warm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
  transition:opacity .22s ease;}
.v2page .v2bridge{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;}
.v2page .v2side{padding:22px 18px;}
.v2page .v2side.us{text-align:right;}
.v2page .v2who{font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; font-family:var(--f-mono);}
.v2page .v2side.us .v2who{justify-content:flex-end; color:var(--v2cool-ink);}
.v2page .v2side.you .v2who{color:var(--v2warm);}
.v2page .v2pin{width:8px; height:8px; border-radius:50%; display:inline-block;}
.v2page .v2side.you .v2pin{background:var(--v2warm);}
.v2page .v2side.us .v2pin{background:var(--v2cool);}
.v2page .v2place{font-family:var(--f-head); font-weight:700; font-size:1.02rem; color:var(--text,#e9f1f8);
  margin-top:10px; letter-spacing:-.02em; white-space:nowrap; transition:opacity .25s ease;}
.v2page .v2clock{font-family:var(--f-head); font-weight:700; font-size:1.7rem; letter-spacing:-.03em;
  margin-top:6px; color:var(--text,#e9f1f8); font-variant-numeric:tabular-nums;}
.v2page .v2clock .v2ap{font-size:1rem; color:var(--v2mut); margin-left:4px;}
.v2page .v2note{font-size:.7rem; color:var(--v2mut); margin-top:8px; white-space:nowrap;}
.v2page .v2linkcell{position:relative; width:120px;}
.v2page .v2wire{position:absolute; top:50%; left:8px; right:8px; height:2px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--v2line) 0 7px, transparent 7px 14px);}
.v2page .v2pulse{position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--v2warm);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--v2warm) 20%, transparent);
  animation:v2travel 2.8s ease-in-out infinite alternate;}
@keyframes v2travel{0%{left:12px; background:var(--v2amber);} 50%{background:var(--v2warm);} 100%{left:calc(100% - 12px); background:var(--v2cool);}}

/* ---- placement marquee ---- */
.v2page .v2marqwrap{display:flex; flex-direction:column; gap:12px; margin-top:44px; overflow:hidden;}
.v2page .v2marqnote{text-align:center; color:var(--v2mut); font-size:.9rem; margin-top:4px;}
.v2page .v2marq{display:flex; width:max-content; animation:v2slide 147s linear infinite;}
.v2page .v2marq.s2{animation-direction:reverse; animation-duration:173s;}
.v2page .v2marq.s3{animation-duration:200s;}
@keyframes v2slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.v2page .v2mgroup{display:flex; gap:12px; padding-right:12px; flex:none;}
.v2page .v2pcard{flex:0 0 auto; display:flex; align-items:center; gap:9px; background:var(--v2surface);
  border:1px solid var(--v2line); border-radius:999px; padding:6px 14px 6px 6px;}
.v2page .v2av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-family:var(--f-head); font-weight:700; flex:none; font-size:.82rem;}
.v2page .v2av.a1{background:#b45309;}
.v2page .v2av.a2{background:#0e7490;}
.v2page .v2av.a3{background:#047857;}
.v2page .v2av.a4{background:#6d28d9;}
.v2page .v2nm{font-weight:650; font-size:.84rem; color:var(--text,#e9f1f8); line-height:1.3;}
.v2page .v2rl{font-size:.71rem; color:var(--v2mut); line-height:1.3;}


/* ---- draftboard modal trigger ---- */
.v2page .v2seemore{text-align:center; margin-top:34px;}
.v2page .v2seebtn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  color:var(--v2cool-ink); background:var(--v2surface); border:1px solid var(--v2line);
  border-radius:999px; padding:12px 22px; cursor:pointer; font-family:var(--f-body);
  transition:border-color .2s, transform .2s, box-shadow .2s;}
.v2page .v2seebtn:hover{border-color:color-mix(in srgb, var(--v2cool) 45%, var(--v2line));
  transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.3);}

/* ---- draftboard modal ---- */
.v2page .v2dbm{position:fixed; inset:0; z-index:120; display:none;}
.v2page .v2dbm.open{display:block;}
.v2page .v2dbm-back{position:absolute; inset:0; background:rgba(3,7,12,.72); backdrop-filter:blur(6px);}
.v2page .v2dbm-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1560px, calc(100vw - 40px)); max-height:calc(100vh - 48px); overflow:hidden;
  background:var(--bg-2,#0a1420); border:1px solid var(--v2line); border-radius:20px; padding:26px 28px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);}
.v2page .v2dbm-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:30px; align-items:start;}
.v2page .v2dbm-right{max-height:calc(100vh - 110px); overflow:auto; padding-right:4px;}
.v2page .v2dbm-fig img{max-height:calc(100vh - 220px); object-fit:contain; object-position:top left;}
@media (max-width:1100px){
  .v2page .v2dbm-grid{grid-template-columns:1fr;}
  .v2page .v2dbm-panel{overflow:auto;}
  .v2page .v2dbm-right{max-height:none; overflow:visible;}
}
.v2page .v2dbm-x{position:absolute; top:16px; right:16px; z-index:5; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--v2line); background:var(--bg,#05090f); color:var(--text,#e9f1f8);
  cursor:pointer; font-size:1rem; line-height:1;}
.v2page .v2dbm-panel h3{font-size:1.35rem; letter-spacing:-.02em; margin:0 0 10px; padding-right:44px;}
.v2page .v2dbm-panel > p{color:var(--v2mut); font-size:.96rem; max-width:64ch;}
.v2page .v2dbm-tabs{display:flex; gap:8px; margin:18px 0 14px;}
.v2page .v2dbm-tab{font-weight:600; font-size:.85rem; color:var(--v2mut); background:var(--v2surface);
  border:1px solid var(--v2line); border-radius:999px; padding:8px 16px; cursor:pointer;
  font-family:var(--f-body);}
.v2page .v2dbm-tab.on{color:var(--text,#e9f1f8); border-color:color-mix(in srgb, var(--v2cool) 55%, var(--v2line));
  background:color-mix(in srgb, var(--v2cool) 10%, transparent);}
.v2page .v2dbm-fig{display:none; margin:0;}
.v2page .v2dbm-fig.on{display:block;}
.v2page .v2dbm-fig img{width:100%; height:auto; border-radius:12px; border:1px solid var(--v2line);}
.v2page .v2dbm-fig figcaption{font-size:.8rem; color:var(--v2mut); margin-top:8px;}
.v2page .v2dbm-dims{margin-top:22px;}
.v2page .v2dbm-dims h4{font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  font-family:var(--f-mono); color:var(--v2cool-ink); margin:0 0 12px;}
.v2page .v2dbm-dims ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr; gap:6px 0;}
.v2page .v2dbm-dims ul > div, .v2page .v2dbm-dims li{font-size:.9rem; color:var(--v2mut); padding:9px 0;
  border-top:1px solid var(--v2line);}
.v2page .v2dbm-dims ul > div strong, .v2page .v2dbm-dims li strong{color:var(--text,#e9f1f8); display:block; font-size:.92rem; margin-bottom:2px;}
.v2page .v2dbm-note{margin-top:18px; font-size:.92rem; color:var(--v2mut);}
.v2page .v2dbm-cta{display:inline-block; margin-top:18px; font-weight:700; font-size:.98rem;
  color:#08131c; background:linear-gradient(135deg, var(--v2amber), var(--v2warm)); border-radius:999px;
  padding:13px 26px; text-decoration:none;}

/* ---- light theme touch-ups ---- */
.v2page[data-theme="light"] .v2console{box-shadow:0 24px 60px rgba(18,45,75,.16);}
.v2page[data-theme="light"] .v2node{background:#ffffff;}
.v2page[data-theme="light"] .v2rowline .v2i{background:#eef4fa;}
.v2page[data-theme="light"] .v2dbm-panel, .v2page[data-theme="light"] .v2dbm-x{background:#ffffff;}
.v2page[data-theme="light"] .v2station.bad .v2node, .v2page[data-theme="light"] .v2node.start{color:#fff;}

/* ---- mobile ---- */
@media (max-width:860px){
  .v2page .v2station{grid-template-columns:1fr; padding-left:64px;}
  .v2page .v2aside{max-width:340px;}
  .v2page .v2bridge{grid-template-columns:1fr 1fr;}
  .v2page .v2linkcell{display:none;}
  .v2page .v2side{padding:14px 12px;}
  .v2page .v2place{font-size:.84rem; white-space:normal;}
  .v2page .v2clock{font-size:1.15rem;}
  .v2page .v2note{display:none;}
  .v2page .v2dbm-dims ul{grid-template-columns:1fr;}
  .v2page .v2console::before, .v2page .v2console::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .v2page .v2marq{animation:none; flex-wrap:wrap;}
  .v2page .v2pulse, .v2page .v2livedot{animation:none;}
  .v2page .v2rev{opacity:1; transform:none; transition:none;}
}

/* ---- journey cards: VAinUSA card language (traveling stroke, zoom, glow) ---- */
@property --v2ca{syntax:"<angle>"; inherits:false; initial-value:0deg;}
.v2page .v2artcard::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:3; padding:1.4px;
  background:conic-gradient(from var(--v2ca,0deg) at 50% 50%, transparent 0deg,
    rgba(255,255,255,.92) 44deg, transparent 100deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:v2cardbeam 3s linear infinite;}
@keyframes v2cardbeam{from{--v2ca:0deg;} to{--v2ca:360deg;}}
.v2page .v2jrail > .v2station:nth-child(3) .v2artcard::after{animation-delay:-.7s;}
.v2page .v2jrail > .v2station:nth-child(4) .v2artcard::after{animation-delay:-1.4s;}
.v2page .v2jrail > .v2station:nth-child(5) .v2artcard::after{animation-delay:-2.1s;}
.v2page .v2jrail > .v2station:nth-child(6) .v2artcard::after{animation-delay:-2.8s;}
.v2page .v2artcard{border-color:color-mix(in srgb, var(--text,#e9f1f8) 16%, transparent);}
.v2page .v2artcard:hover{transform:scale(1.05) translateY(-3px); z-index:4;}
.v2page .v2station.bad .v2artcard:hover{box-shadow:0 18px 46px rgba(0,0,0,.45), 0 0 44px -6px color-mix(in srgb, var(--v2warm) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--v2warm) 26%, transparent);}
.v2page .v2station.good .v2artcard:hover{box-shadow:0 18px 46px rgba(0,0,0,.45), 0 0 44px -6px color-mix(in srgb, var(--v2live) 55%, transparent), 0 0 40px -4px color-mix(in srgb, var(--v2cool) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--v2live) 24%, transparent);}
@media (max-width:860px){ .v2page .v2artcard::after{display:none;} }
@media (prefers-reduced-motion: reduce){ .v2page .v2artcard::after{animation:none;} }

/* ===== VAinUSA console glow, ported verbatim (radii adapted to the 22px panel) ===== */
.v2page .v2glowwrap{position:relative; isolation:isolate; border-radius:22px;}
.v2page .v2glowwrap > .console{position:relative; z-index:1;}
.v2page .v2glowwrap, .v2page .console{position:relative; isolation:isolate;
  --twotone: conic-gradient(from 0deg at 50% 50%,
    #ff5028 0deg, #ff5028 165deg, #2f88ff 195deg, #2f88ff 345deg, #ff5028 360deg);
  --beamgrad: conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 26deg, rgba(255,255,255,.08) 52deg, rgba(255,255,255,.5) 74deg, rgba(255,255,255,1) 84deg, rgba(255,255,255,1) 96deg, rgba(255,255,255,.5) 106deg, rgba(255,255,255,.08) 128deg, rgba(255,255,255,0) 154deg,
    rgba(255,255,255,0) 206deg, rgba(255,255,255,.08) 232deg, rgba(255,255,255,.5) 254deg, rgba(255,255,255,1) 264deg, rgba(255,255,255,1) 276deg, rgba(255,255,255,.5) 286deg, rgba(255,255,255,.08) 308deg, rgba(255,255,255,0) 334deg,
    rgba(255,255,255,0) 360deg);
  --colormask: conic-gradient(from 0deg at 50% 50%,
    rgba(0,0,0,0) 22deg, rgba(0,0,0,.08) 48deg, rgba(0,0,0,.5) 70deg, #000 83deg, #000 97deg, rgba(0,0,0,.5) 110deg, rgba(0,0,0,.08) 132deg, rgba(0,0,0,0) 158deg,
    rgba(0,0,0,0) 202deg, rgba(0,0,0,.08) 228deg, rgba(0,0,0,.5) 250deg, #000 263deg, #000 277deg, rgba(0,0,0,.5) 290deg, rgba(0,0,0,.08) 312deg, rgba(0,0,0,0) 338deg,
    rgba(0,0,0,0) 360deg);}
.v2page .console > :not(.gedge):not(.cbeam):not(.innerglow){position:relative; z-index:1;}
.v2page .gedge{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.v2page .console .innerglow{position:absolute; inset:1px; z-index:0; border-radius:21px; overflow:hidden; pointer-events:none; opacity:.42;}
.v2page .console .innerglow .igorbit{position:absolute; left:50%; top:50%; width:126%; aspect-ratio:1; transform:translate(-50%,-50%) scaleY(.85);}
.v2page .console .innerglow .igspin{position:absolute; left:50%; top:50%; width:100%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg);
  background:
    radial-gradient(circle at 93% 50%, rgba(47,136,255,.85) 0%, rgba(47,136,255,0) 26%),
    radial-gradient(circle at 7% 50%, rgba(255,80,40,.85) 0%, rgba(255,80,40,0) 26%);
  filter:blur(22px) saturate(1.4); animation:v2glowspin 13s linear infinite;}
.v2page .gedge .cglow{position:absolute; inset:-16px; z-index:-1; pointer-events:none; filter:blur(22px) saturate(3) brightness(1.9);}
.v2page .gedge .cglow2{mix-blend-mode:overlay; opacity:.8; inset:-17px; filter:blur(30px) saturate(3) brightness(1.9);}
.v2page .gedge .cglow .frame{position:absolute; inset:0; border-radius:38px; box-sizing:border-box; padding:16px; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.v2page .gedge .cglow2 .frame{padding:17px; border-radius:39px;}
.v2page .gedge .cglow .frame .cg2{position:absolute; left:50%; top:50%; width:178%; aspect-ratio:1; display:block;
  transform:translate(-50%,-50%) rotate(0deg); background:var(--twotone);
  -webkit-mask:var(--colormask); mask:var(--colormask);
  animation:v2glowspin 13s linear infinite; will-change:transform;}
.v2page .gedge .dotmask{position:absolute; inset:-50px; z-index:-1; pointer-events:none; mix-blend-mode:screen;}
.v2page .gedge .dotmask .dsp{position:absolute; inset:0; filter:blur(20px);
  -webkit-mask:radial-gradient(#000 0.55px, transparent 0.95px) 0 0 / 3.2px 3.2px, radial-gradient(rgba(0,0,0,.35) 0.5px, transparent 0.9px) 1.6px 1.6px / 3.2px 3.2px;
  mask:radial-gradient(#000 0.55px, transparent 0.95px) 0 0 / 3.2px 3.2px, radial-gradient(rgba(0,0,0,.35) 0.5px, transparent 0.9px) 1.6px 1.6px / 3.2px 3.2px;}
.v2page .gedge .dotmask .dsp .dframe{position:absolute; inset:30px; border-radius:34px; box-sizing:border-box; padding:14px; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.v2page .gedge .dotmask .dsp .dframe .dfill{position:absolute; left:50%; top:50%; width:190%; aspect-ratio:1; display:block;
  transform:translate(-50%,-50%) rotate(0deg); background:#fff;
  -webkit-mask:var(--colormask); mask:var(--colormask);
  animation:v2glowspin 13s linear infinite; will-change:transform;}
.v2page .gedge .cover{position:absolute; inset:0; border-radius:22px; background:var(--bg-2,#0a1420);}
.v2page[data-theme="light"] .gedge .cglow{opacity:.55;}
.v2page .cbeam{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:22px; box-sizing:border-box; padding:1.2px; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 1.6px rgba(255,255,255,.75)) drop-shadow(0 0 6px rgba(255,255,255,.4)) drop-shadow(0 0 15px rgba(255,255,255,.3));}
.v2page .cbeam .b2{position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1; display:block;
  transform:translate(-50%,-50%) rotate(0deg); background:var(--beamgrad); animation:v2glowspin 13s linear infinite; will-change:transform;}
@keyframes v2glowspin{
  0%{transform:translate(-50%,-50%) rotate(27deg); animation-timing-function:cubic-bezier(.5,0,.5,1);}
  25%{transform:translate(-50%,-50%) rotate(153deg); animation-timing-function:cubic-bezier(.5,0,.5,1);}
  50%{transform:translate(-50%,-50%) rotate(207deg); animation-timing-function:cubic-bezier(.5,0,.5,1);}
  75%{transform:translate(-50%,-50%) rotate(333deg); animation-timing-function:cubic-bezier(.5,0,.5,1);}
  100%{transform:translate(-50%,-50%) rotate(387deg);}}
@media (max-width:860px){
  .v2page .gedge, .v2page .cbeam, .v2page .console .innerglow{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .v2page .gedge *, .v2page .cbeam .b2, .v2page .console .innerglow .igspin{animation:none;}
}

/* ---- ops section: always dark (VAinUSA hero pattern: dark tokens cloned onto the section) ---- */
.v2page .v2ops{
  --bg:#05090f; --bg-2:#0a1420; --panel:rgba(150,200,240,.045); --hair:rgba(140,195,240,.12);
  --text:#e9f1f8; --dim:#93a8bc; --accent:#22d3ee; --accent-ink:#67e8f9; --accent-glow:rgba(34,211,238,.32);
  --glass:rgba(10,18,30,.6); --panel-brd:rgba(140,195,240,.14); --grid:rgba(120,190,240,.05);
  background:var(--bg); color:var(--text);}
.v2page[data-theme="light"] .v2ops h2, .v2page[data-theme="light"] .v2ops h3,
.v2page[data-theme="light"] .v2ops .mk, .v2page[data-theme="light"] .v2ops p{color:var(--text);}
.v2page[data-theme="light"] .v2ops a{color:var(--accent-ink);}

/* ---- roles tiles: hover zoom + glow + running white stroke (dots come from the dot pack) ---- */
.v2page .tile{position:relative; transition:transform .22s var(--v2ease), box-shadow .22s var(--v2ease), border-color .22s var(--v2ease);}
.v2page .tile:hover{transform:scale(1.03) translateY(-2px); z-index:2;
  box-shadow:0 14px 38px rgba(0,0,0,.35), 0 0 30px -6px color-mix(in srgb, var(--accent,#22d3ee) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent,#22d3ee) 22%, transparent);}
.v2page .tile::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:3; padding:1.4px; opacity:0; transition:opacity .3s var(--v2ease);
  background:conic-gradient(from var(--v2ca,0deg) at 50% 50%, transparent 0deg, rgba(255,255,255,.92) 44deg, transparent 100deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;}
.v2page .tile:hover::before{opacity:1; animation:v2cardbeam 2.6s linear infinite;}

/* ---- journey cards: hover dot matrix rising from the bottom-right corner, colour-matched ---- */
.v2page .v2artcard > *{position:relative; z-index:1;}
.v2page .v2artcard::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:0; opacity:0;
  background-image:radial-gradient(color-mix(in srgb, var(--v2cool) 85%, transparent) var(--v2dot-r), transparent var(--v2dot-fade));
  background-size:var(--v2dot-pitch) var(--v2dot-pitch); background-position:100% 100%;
  -webkit-mask:radial-gradient(130% 140% at 100% 100%, #000 0%, rgba(0,0,0,.5) 36%, transparent 64%);
  mask:radial-gradient(130% 140% at 100% 100%, #000 0%, rgba(0,0,0,.5) 36%, transparent 64%);
  transform:translateY(8px); transition:opacity .45s var(--v2ease), transform .45s var(--v2ease);}
.v2page .v2station.bad .v2artcard::before{background-image:radial-gradient(color-mix(in srgb, var(--v2warm) 90%, transparent) var(--v2dot-r), transparent var(--v2dot-fade));}
.v2page .v2artcard:hover::before{opacity:.55; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .v2page .tile:hover::before{animation:none;} }

/* ---- Founder's X-Ray opt-in popup ---- */
.v2page .v2xr{position:fixed; inset:0; z-index:130; display:none;}
.v2page .v2xr.open{display:block;}
.v2page .v2xr-back{position:absolute; inset:0; background:rgba(3,7,12,.7); backdrop-filter:blur(6px);}
.v2page .v2xr-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(880px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--bg-2,#0a1420); border:1px solid var(--v2line); border-radius:20px; padding:30px 32px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);}
.v2page .v2xr-panel::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:3; padding:1.5px; opacity:.85;
  background:conic-gradient(from var(--v2ca,0deg) at 50% 50%, transparent 0deg, rgba(255,255,255,.85) 44deg, transparent 100deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:v2cardbeam 3.2s linear infinite;}
.v2page .v2xr-x{position:absolute; top:14px; right:14px; z-index:5; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--v2line); background:var(--bg,#05090f); color:var(--text,#e9f1f8); cursor:pointer; font-size:1rem; line-height:1;}
.v2page .v2xr-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:30px; align-items:center;}
.v2page .v2xr-left h3{font-size:1.5rem; letter-spacing:-.02em; margin:10px 0 12px;}
.v2page .v2xr-left > p{color:var(--v2mut); font-size:.97rem;}
.v2page .v2xr-ticks{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.v2page .v2xr-ticks li, .v2page .v2xr-ticks > div{font-weight:500; font-size:.95rem; padding-left:26px; position:relative;}
.v2page .v2xr-ticks li::before, .v2page .v2xr-ticks > div::before{content:"✓"; position:absolute; left:0; top:0; color:var(--v2live); font-weight:700;}
.v2page .v2xr-price{display:flex; align-items:baseline; gap:10px; margin-top:18px;}
.v2page .v2xr-was{color:var(--v2mut); text-decoration:line-through; font-size:1rem;}
.v2page .v2xr-now{font-family:var(--f-head); font-weight:800; font-size:1.7rem; color:var(--v2warm);}
.v2page .v2xr-deal{font-size:.78rem; color:var(--v2mut);}
.v2page .v2xr-form{display:grid; grid-template-columns:1fr 1.3fr auto; gap:10px; margin-top:16px;}
.v2page .v2xr-in{background:var(--bg,#05090f); border:1px solid var(--v2line); border-radius:12px;
  padding:13px 14px; color:var(--text,#e9f1f8); font-family:var(--f-body); font-size:.93rem; min-width:0;}
.v2page .v2xr-in:focus{outline:none; border-color:color-mix(in srgb, var(--v2cool) 55%, var(--v2line));}
.v2page .v2xr-btn{font-weight:700; font-size:.95rem; color:#08131c; white-space:nowrap; cursor:pointer;
  background:linear-gradient(135deg, var(--v2amber), var(--v2warm)); border:none; border-radius:12px; padding:13px 20px;
  font-family:var(--f-body);}
.v2page .v2xr-btn:hover{filter:brightness(1.06);}
.v2page .v2xr-fine{font-size:.76rem; color:var(--v2mut); margin-top:10px;}
.v2page .v2xr-sample{background:var(--v2surface); border:1px solid var(--v2line); border-radius:16px; padding:20px;}
.v2page .v2xr-sh{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.v2page .v2xr-st{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--v2mut);}
.v2page .v2xr-bar{display:grid; grid-template-columns:110px 1fr 40px; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--v2line);}
.v2page .v2xr-bar:first-of-type{border-top:none;}
.v2page .v2xr-bl{font-size:.8rem; color:var(--text,#e9f1f8);}
.v2page .v2xr-track{position:relative; height:8px; border-radius:99px; background:var(--bg,#05090f); overflow:hidden; display:block;}
.v2page .v2xr-fill{position:absolute; left:0; top:0; bottom:0; border-radius:99px; display:block;}
.v2page .v2xr-fill.warm{background:linear-gradient(90deg, var(--v2amber), var(--v2warm));}
.v2page .v2xr-fill.cool{background:linear-gradient(90deg, var(--v2cool), var(--v2cool-ink));}
.v2page .v2xr-pct{font-family:var(--f-mono); font-size:.74rem; color:var(--v2mut); text-align:right;}
.v2page .v2xr-cost{margin-top:14px; font-size:.82rem; color:var(--v2mut);}
.v2page .v2xr-cost strong{color:var(--v2warm); font-family:var(--f-head);}
.v2page[data-theme="light"] .v2xr-panel, .v2page[data-theme="light"] .v2xr-x{background:#ffffff;}
.v2page[data-theme="light"] .v2xr-in{background:#f4f8fc;}
@media (max-width:820px){
  .v2page .v2xr-grid{grid-template-columns:1fr;}
  .v2page .v2xr-form{grid-template-columns:1fr;}
}

.v2page .v2xr-fill.w38{width:38%;}
.v2page .v2xr-fill.w27{width:27%;}
.v2page .v2xr-fill.w35{width:35%;}

/* ---- Ask AI section ---- */
.v2page .v2askai{padding:78px 24px 86px; text-align:center; position:relative;
  background:linear-gradient(180deg, color-mix(in srgb, var(--v2cool) 5%, var(--bg,#05090f)), var(--bg,#05090f));
  border-top:1px solid var(--v2line);}
.v2page .v2askai-wrap{max-width:680px; margin:0 auto;}
.v2page .v2askai h2{font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em; margin:0 0 14px;}
.v2page .v2askai-hl{color:var(--v2cool-ink); text-decoration:underline; text-underline-offset:6px;
  text-decoration-thickness:3px; text-decoration-color:var(--v2warm);}
.v2page .v2askai-wrap > p{color:var(--v2mut); font-size:.98rem; max-width:56ch; margin:0 auto;}
.v2page .v2askai-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px;}
.v2page .v2askai-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.93rem;
  color:var(--text,#e9f1f8); background:var(--v2surface); border:1px solid var(--v2line);
  border-radius:999px; padding:12px 22px; text-decoration:none;
  transition:border-color .2s var(--v2ease), transform .2s var(--v2ease), box-shadow .2s var(--v2ease);}
.v2page .v2askai-btn::before{content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--v2cool), var(--v2warm));}
.v2page .v2askai-btn:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--v2cool) 50%, var(--v2line));
  box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 24px -6px color-mix(in srgb, var(--v2cool) 50%, transparent);}

/* ---- logos band heading ---- */
.v2page .v2trusted{text-align:center; font-size:clamp(1.35rem,2vw,1.9rem); letter-spacing:-.02em;
  margin:0 auto 34px; max-width:900px;}

/* ---- Trusted band: own ground (gradient wash + halftone dots + hairlines) ---- */
.v2page #clients{position:relative; isolation:isolate;
  border-top:1px solid var(--v2line); border-bottom:1px solid var(--v2line);
  background:
    radial-gradient(58% 95% at 50% 0%, color-mix(in srgb, var(--v2cool) 9%, transparent), transparent 62%),
    radial-gradient(40% 70% at 12% 100%, color-mix(in srgb, var(--v2warm) 6%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-2,#0a1420), var(--bg,#05090f));}
.v2page #clients::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(205,238,255,.55) var(--v2dot-r), transparent var(--v2dot-fade));
  background-size:var(--v2dot-pitch) var(--v2dot-pitch); opacity:.15;
  -webkit-mask:radial-gradient(68% 105% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 78%);
  mask:radial-gradient(68% 105% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 78%);}
.v2page .v2trusted::after{content:""; display:block; width:300px; height:1.5px; margin:16px auto 0;
  border-radius:2px; opacity:.75; background:linear-gradient(90deg, transparent, var(--v2cool) 25%, var(--v2warm) 75%, transparent);}
.v2page[data-theme="light"] #clients{background:
    radial-gradient(58% 95% at 50% 0%, color-mix(in srgb, var(--v2cool) 10%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-2,#e2e9f1), var(--bg,#eaeff5));}
.v2page[data-theme="light"] #clients::before{background-image:radial-gradient(rgba(14,116,144,.5) var(--v2dot-r), transparent var(--v2dot-fade));}

/* ---- light-theme contrast pass: darker muted text + deeper accent inks ---- */
.v2page[data-theme="light"]{
  --v2mut:color-mix(in srgb, var(--text,#10202f) 84%, transparent);
  --v2live:#059669; --v2warm:#dd5407; --v2amber:#f59e0b;
  --v2cool-ink:#0e7490;}


/* ---- stats + company: ONE panel, flush portrait strip left, solid copy panel right ---- */
.v2page .v2statsband{padding:74px 24px; position:relative;
  background:linear-gradient(180deg, var(--bg-2,#0a1420) 0%, var(--bg,#05090f) 100%);
  border-top:1px solid var(--v2line);}
.v2page .v2sb-panel{max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.42); min-height:430px;}
/* the three portraits butt against each other: one continuous strip, no seams or gaps */
.v2page .v2sb-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.v2page .v2sb-card{position:relative; overflow:hidden; border:0; border-radius:0;}
.v2page .v2sb-card + .v2sb-card{box-shadow:inset 1px 0 0 rgba(255,255,255,.07);}
.v2page .v2sb-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 18%; display:block; transition:transform .5s var(--v2ease);}
.v2page .v2sb-card:hover img{transform:scale(1.04);}
.v2page .v2sb-card::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(4,8,14,.94) 100%);}
.v2page .v2sb-cap{position:absolute; left:16px; right:12px; bottom:16px; z-index:2;}
.v2page .v2sb-num{font-family:var(--f-head); font-weight:800; display:flex; align-items:baseline; gap:1px;
  font-size:clamp(1.5rem,2.3vw,2.15rem); letter-spacing:-.03em; line-height:1.05;
  color:#ffffff; font-variant-numeric:tabular-nums;}
.v2page .v2sb-num > *{display:inline-block; white-space:nowrap;}
.v2page .v2sb-pre, .v2page .v2sb-suf{color:#fdba74;}
.v2page .v2sb-lbl{display:block; font-family:var(--f-body); font-size:.66rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.88); margin-top:5px; line-height:1.35;}
.v2page .v2sb-copy{position:relative; background:var(--bg-2,#0a1420); padding:44px 42px;
  display:flex; flex-direction:column; justify-content:center;}
/* the stroke belongs to the text panel only, and dissolves as it runs back toward the faces */
.v2page .v2sb-copy::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--v2line); border-left:0; border-radius:0 22px 22px 0;
  -webkit-mask:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%, #000 100%);
  mask:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 34%, #000 100%);}
.v2page .v2sb-copy h2{font-size:clamp(1.45rem,2.3vw,1.95rem); letter-spacing:-.02em; margin:0 0 14px;}
.v2page .v2sb-copy p{color:var(--v2mut); font-size:.97rem; margin-bottom:12px; max-width:46ch;}
.v2page[data-theme="light"] .v2sb-copy{background:#ffffff;}
@media (max-width:980px){
  .v2page .v2sb-panel{grid-template-columns:1fr; min-height:0;}
  .v2page .v2sb-copy::before{border-left:1px solid var(--v2line); border-radius:0 0 22px 22px;
    -webkit-mask:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
    mask:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);}
  .v2page .v2sb-row{min-height:320px;}
  .v2page .v2sb-copy{padding:34px 28px;}
}
@media (max-width:560px){
  .v2page .v2sb-row{grid-template-columns:1fr; min-height:0;}
  .v2page .v2sb-card{aspect-ratio:16/10;}
  .v2page .v2sb-card + .v2sb-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
}
/* ---- screening funnel section ---- */
.v2page .v2funnel{padding:86px 24px; position:relative; isolation:isolate;
  border-top:1px solid var(--v2line);
  background:
    radial-gradient(66% 70% at 2% 6%, color-mix(in srgb, var(--v2warm) 12%, transparent), transparent 62%),
    radial-gradient(70% 74% at 98% 97%, color-mix(in srgb, var(--v2cool) 12%, transparent), transparent 64%),
    var(--bg,#05090f);}
/* halftone in the corners only: warm at the top-left where the gauntlet is, cool at the
   bottom-right where the hires come out, both dissolving before they reach the middle. */
.v2page .v2funnel::before, .v2page .v2funnel::after{content:""; position:absolute; inset:0;
  z-index:0; pointer-events:none; background-size:var(--v2dot-pitch) var(--v2dot-pitch);}
.v2page .v2funnel::before{
  background-image:radial-gradient(rgba(251,146,60,.62) var(--v2dot-r), transparent var(--v2dot-fade));
  -webkit-mask:radial-gradient(64% 68% at 1% 4%, #000 0%, rgba(0,0,0,.42) 40%, transparent 70%);
  mask:radial-gradient(64% 68% at 1% 4%, #000 0%, rgba(0,0,0,.42) 40%, transparent 70%);
  opacity:.34;}
.v2page .v2funnel::after{
  background-image:radial-gradient(rgba(34,211,238,.6) var(--v2dot-r), transparent var(--v2dot-fade));
  background-position:2px 2px;
  -webkit-mask:radial-gradient(66% 70% at 99% 97%, #000 0%, rgba(0,0,0,.42) 40%, transparent 70%);
  mask:radial-gradient(66% 70% at 99% 97%, #000 0%, rgba(0,0,0,.42) 40%, transparent 70%);
  opacity:.34;}
.v2page .v2funnel > *{position:relative; z-index:1;}
.v2page[data-theme="light"] .v2funnel::before{background-image:radial-gradient(rgba(194,65,12,.5) var(--v2dot-r), transparent var(--v2dot-fade));}
.v2page[data-theme="light"] .v2funnel::after{background-image:radial-gradient(rgba(14,116,144,.5) var(--v2dot-r), transparent var(--v2dot-fade));}
.v2page .v2fn-grid{max-width:1160px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; align-items:center;}
.v2page .v2fn-viz{position:relative; display:flex; justify-content:center;}
.v2page #v2fnSvg{width:100%; height:auto; display:block; max-height:660px;}
.v2page .v2fn-slab{fill:rgba(251,146,60,.06); stroke:color-mix(in srgb, var(--v2warm) 38%, transparent); stroke-width:1;}
.v2page .v2fn-lbl{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.13em; fill:var(--text,#e9f1f8); opacity:.9;}
.v2page .v2fn-cnt{font-family:var(--f-mono); font-size:16px; font-weight:700; fill:var(--v2warm); font-variant-numeric:tabular-nums;}
.v2page .v2fn-placed{font-family:var(--f-mono); font-size:15px; letter-spacing:.14em; fill:var(--v2cool-ink);}
.v2page .v2fn-brace{fill:none; stroke:color-mix(in srgb, var(--v2warm) 48%, transparent); stroke-width:1.4;}
.v2page .v2fn-brace--hot{stroke:color-mix(in srgb, var(--v2cool) 60%, transparent);}
.v2page .v2fn-tlab{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; fill:var(--v2mut);}
.v2page .v2fn-tlab--hot{fill:var(--v2cool-ink); opacity:.95;}
.v2page .v2fn-draft{fill:rgba(34,211,238,.10); stroke:color-mix(in srgb, var(--v2cool) 55%, transparent); stroke-width:1;}
.v2page .v2fn-dlabel{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.13em; fill:var(--v2cool-ink); opacity:.95;}

.v2page .v2fn-copy h2{font-size:clamp(1.55rem,2.5vw,2.15rem); letter-spacing:-.02em; margin:10px 0 14px;}
.v2page .v2fn-copy > p{color:var(--v2mut); font-size:1rem; max-width:54ch;}
.v2page .v2fn-bens{margin-top:24px; display:grid; gap:16px;}
.v2page .v2fn-ben{padding-left:16px; border-left:2px solid color-mix(in srgb, var(--v2cool) 45%, transparent);}
.v2page .v2fn-bname{font-weight:650; font-size:.99rem; color:var(--text,#e9f1f8);}
.v2page .v2fn-bdesc{color:var(--v2mut); font-size:.9rem; margin-top:4px; max-width:54ch;}
.v2page .v2fn-cta{display:inline-block; margin-top:24px; font-weight:600; font-size:.95rem;
  color:var(--v2cool-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--v2cool) 45%, transparent); padding-bottom:2px;}
.v2page .v2fn-cta:hover{color:var(--v2warm); border-color:var(--v2warm);}
.v2page .v2fn-cnt.tick, .v2page .v2fn-placed.tick{animation:v2fnTick .45s var(--v2ease);}
@keyframes v2fnTick{0%{opacity:1}25%{opacity:.4}100%{opacity:1}}
.v2page #v2fnScene{transition:opacity .9s var(--v2ease);}
.v2page #v2fnScene.fade{opacity:0;}
@media (max-width:900px){
  .v2page .v2fn-grid{grid-template-columns:1fr; gap:30px;}
  .v2page .v2fn-viz{max-width:420px; margin:0 auto; order:2;}
}

/* ---- the rejection number carries the warm gradient ---- */
.v2page .v2fn-hl{color:var(--v2warm);
  background:linear-gradient(100deg, var(--v2amber) 0%, var(--v2warm) 55%, #ea580c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-right:.06em;}

/* the funnel's kicker reads positive (blue); the 98% stays warm because it is the hard news */
.v2page .v2funnel .v2tag{color:var(--v2cool-ink);}

/* ---- warm the typography: monospace is what reads as machine-made ----
   .v2page sits on the SAME element as .htva, so the compound selector wins the
   custom-property duel and every var(--f-mono) user on this page re-resolves. */
.htva.v2page{--f-mono:var(--f-body);}
.v2page .v2tag,
.v2page .v2fn-lbl, .v2page .v2fn-dlabel, .v2page .v2fn-tlab,
.v2page .v2sb-lbl, .v2page .v2pill, .v2page .v2xr-st{letter-spacing:.1em; font-weight:600;}
.v2page .v2fn-cnt, .v2page .v2fn-placed, .v2page .v2sb-num{letter-spacing:0; font-weight:700;}
.v2page .v2fn-cnt{font-size:16px;}
.v2page .v2fn-lbl{font-size:13px;}
.v2page .v2fn-dlabel{font-size:13px;}
.v2page .v2fn-tlab{font-size:11px; letter-spacing:.16em;}

/* ---- eyebrows ~18% larger: micro-caps are hard to read and read as machine chrome ---- */
.v2page .kicker{font-size:13.5px; font-weight:600; letter-spacing:.2em;}
.v2page .v2tag{font-size:.8rem; letter-spacing:.14em;}
.v2page .v2sb-lbl{font-size:.76rem;}
.v2page .v2xr-st{font-size:.78rem;}

/* the time each brace represents: our screening bill vs the buyer's couple of hours */
.v2page .v2fn-tnum{font-family:var(--f-body); font-size:14px; font-weight:700; letter-spacing:.02em; fill:var(--v2warm);}
.v2page .v2fn-tnum--hot{fill:var(--v2cool-ink);}

/* the one label that needs translating: DRAFTBOARD is our word, not the buyer's */
.v2page .v2fn-note text{font-family:var(--f-body); font-size:11px; font-weight:600;
  letter-spacing:.11em; fill:var(--v2cool-ink); opacity:.9;}
.v2page .v2fn-noteline{stroke:color-mix(in srgb, var(--v2cool) 45%, transparent); stroke-width:1;}

/* the survivors of each gate, in the payoff colour, right under the intake number */
.v2page .v2fn-pass{font-family:var(--f-body); font-size:11px; font-weight:600; letter-spacing:.04em;
  fill:var(--v2cool-ink); opacity:.92; font-variant-numeric:tabular-nums;}


/* src/styles/htva-v3-2.css */
/* ============ HTVA homepage v3 preview (scoped: .v3page only) ============
   Layered ON TOP of the v2 sheet (the v3 row keeps .v2page so v2 CSS/JS keep running).
   Everything here is inert on pages without the .v3page wrapper class.

   The brief: header, hero and the timepiece closer are right; the middle read as
   WASHED - one flat near-black field, 4.5%-white panels, blue-grey copy, uniform
   104px gaps. v3 gives the middle the same instrument world the hero and the watch
   live in: layered grounds (halftone field + one colour vignette per section),
   raised edge-lit surfaces with real offset shadows, brighter tinted copy, and a
   tighter rhythm. Halftone spec is the SITE RULE: 4px pitch / .7px dot / 1.2px fade. */

/* ---------- tokens ---------- */
.htva.v3page[data-theme="dark"]{
  --dim:#b6c6d6;                 /* body copy: lifted from #93a8bc, tinted not grey */
  --mut:#8298ad;                 /* labels: lifted from #657a8e */
  --panel:rgba(150,200,240,.075);
  --panel-2:rgba(150,200,240,.11);
  --panel-brd:rgba(140,195,240,.22);
  --hair:rgba(140,195,240,.16);
  --v2mut:color-mix(in srgb, var(--text) 80%, transparent);
  --v3surf:linear-gradient(180deg, rgba(150,200,240,.115), rgba(150,200,240,.045) 62%, rgba(150,200,240,.035));
  --v3surf-solid:#0b1522;
  --v3line:rgba(140,195,240,.22);
  --v3line-hot:rgba(34,211,238,.55);
  --v3edge:rgba(255,255,255,.085);
  --v3shadow:0 26px 54px -30px rgba(0,0,0,.85), 0 8px 18px -12px rgba(0,0,0,.6);
  --v3dot:rgba(205,238,255,.55);
  --v3dot-warm:rgba(251,146,60,.6);
  --v3warm:#fb923c; --v3amber:#fdba74;
}
.htva.v3page[data-theme="light"]{
  --v2mut:color-mix(in srgb, var(--text) 86%, transparent);
  --v3surf:linear-gradient(180deg, #ffffff, #f6f9fc);
  --v3surf-solid:#ffffff;
  --v3line:rgba(18,45,75,.14);
  --v3line-hot:rgba(8,145,178,.5);
  --v3edge:rgba(255,255,255,.95);
  --v3shadow:0 26px 54px -30px rgba(18,45,75,.35), 0 8px 18px -12px rgba(18,45,75,.18);
  --v3dot:rgba(14,116,144,.5);
  --v3dot-warm:rgba(221,84,7,.5);
  --v3warm:#dd5407; --v3amber:#f59e0b;
}
/* the ops section clones the dark tokens on itself (dark-lock) - restate the lifted copy there */
.htva.v3page .v2ops{--dim:#b6c6d6; --mut:#8298ad; --panel-brd:rgba(140,195,240,.22);}

/* ---------- rhythm ---------- */
.htva.v3page .sec{padding:92px 0;}
.htva.v3page .sec.sm{padding:60px 0;}
.htva.v3page .v2statsband{padding:70px 24px 80px;}
.htva.v3page .v2funnel{padding:96px 24px;}
.htva.v3page .lead{margin-top:20px;}
@media (max-width:700px){
  .htva.v3page .sec{padding:64px 0;}
  .htva.v3page .sec.sm{padding:44px 0;}
  .htva.v3page .v2funnel{padding:64px 20px;}
}

/* ---------- grounds: one halftone field, one vignette per section ---------- */
.htva.v3page #draftboard, .htva.v3page #capabilities, .htva.v3page #industries,
.htva.v3page #founder, .htva.v3page .v2wall, .htva.v3page .v2band,
.htva.v3page .sec:has(> .wrap > .faq), .htva.v3page .sec:has(.vf3-stage){
  position:relative; isolation:isolate;}
.htva.v3page #draftboard > .wrap, .htva.v3page #capabilities > .wrap, .htva.v3page #industries > .wrap,
.htva.v3page #founder > .wrap, .htva.v3page .v2wall > .wrap, .htva.v3page .v2band > .wrap,
.htva.v3page .sec:has(> .wrap > .faq) > .wrap, .htva.v3page .sec:has(.vf3-stage) > .wrap{
  position:relative; z-index:1;}

/* the dot field */
.htva.v3page #draftboard::before, .htva.v3page #capabilities::before, .htva.v3page #industries::before,
.htva.v3page #founder::before, .htva.v3page .v2wall::before, .htva.v3page .v2band::before,
.htva.v3page .sec:has(> .wrap > .faq)::before, .htva.v3page .sec:has(.vf3-stage)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--v3dot) var(--v2dot-r,.7px), transparent var(--v2dot-fade,1.2px));
  background-size:var(--v2dot-pitch,4px) var(--v2dot-pitch,4px); opacity:.13;}

/* vignettes: where the light falls in each room */
.htva.v3page #draftboard{
  background:radial-gradient(56% 64% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%), var(--bg);}
.htva.v3page #draftboard::before{
  -webkit-mask:radial-gradient(60% 70% at 4% 6%, #000 0%, rgba(0,0,0,.45) 45%, transparent 76%);
  mask:radial-gradient(60% 70% at 4% 6%, #000 0%, rgba(0,0,0,.45) 45%, transparent 76%);}

.htva.v3page .v2wall{
  border-top:1px solid var(--v3line); border-bottom:1px solid var(--v3line);
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 64%),
    radial-gradient(38% 60% at 100% 100%, color-mix(in srgb, var(--v3warm) 6%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg-2), var(--bg));}
.htva.v3page .v2wall::before{
  -webkit-mask:radial-gradient(66% 100% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 80%);
  mask:radial-gradient(66% 100% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 80%);}

.htva.v3page #capabilities{
  background:radial-gradient(52% 60% at 100% 100%, color-mix(in srgb, var(--v3warm) 7%, transparent), transparent 62%), var(--bg);}
.htva.v3page #capabilities::before{
  background-image:radial-gradient(var(--v3dot-warm) var(--v2dot-r,.7px), transparent var(--v2dot-fade,1.2px));
  -webkit-mask:radial-gradient(56% 66% at 98% 96%, #000 0%, rgba(0,0,0,.42) 42%, transparent 72%);
  mask:radial-gradient(56% 66% at 98% 96%, #000 0%, rgba(0,0,0,.42) 42%, transparent 72%);}

.htva.v3page .sec:has(.vf3-stage){
  background:radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%), var(--bg);}
.htva.v3page .sec:has(.vf3-stage)::before{
  -webkit-mask:radial-gradient(70% 70% at 50% 100%, #000 0%, rgba(0,0,0,.4) 50%, transparent 78%);
  mask:radial-gradient(70% 70% at 50% 100%, #000 0%, rgba(0,0,0,.4) 50%, transparent 78%);}

.htva.v3page .v2band{
  border-top:1px solid var(--v3line); border-bottom:1px solid var(--v3line);
  background:
    radial-gradient(46% 90% at 62% 50%, color-mix(in srgb, var(--v3warm) 8%, transparent), transparent 62%),
    radial-gradient(50% 100% at 8% 50%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));}
.htva.v3page .v2band::before{
  -webkit-mask:linear-gradient(90deg, #000, rgba(0,0,0,.35) 50%, #000);
  mask:linear-gradient(90deg, #000, rgba(0,0,0,.35) 50%, #000); opacity:.11;}

.htva.v3page #industries{
  background:radial-gradient(54% 60% at 0% 0%, color-mix(in srgb, var(--v3warm) 8%, transparent), transparent 62%), var(--bg);}
.htva.v3page #industries::before{
  background-image:radial-gradient(var(--v3dot-warm) var(--v2dot-r,.7px), transparent var(--v2dot-fade,1.2px));
  -webkit-mask:radial-gradient(58% 66% at 2% 4%, #000 0%, rgba(0,0,0,.42) 42%, transparent 72%);
  mask:radial-gradient(58% 66% at 2% 4%, #000 0%, rgba(0,0,0,.42) 42%, transparent 72%);}

.htva.v3page #founder{
  border-top:1px solid var(--v3line);
  background:
    radial-gradient(48% 70% at 0% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg-2));}
.htva.v3page #founder::before{
  -webkit-mask:radial-gradient(56% 80% at 2% 100%, #000 0%, rgba(0,0,0,.42) 45%, transparent 76%);
  mask:radial-gradient(56% 80% at 2% 100%, #000 0%, rgba(0,0,0,.42) 45%, transparent 76%);}

.htva.v3page .sec:has(> .wrap > .faq){
  background:linear-gradient(180deg, var(--bg-2), var(--bg) 40%);}
.htva.v3page .sec:has(> .wrap > .faq)::before{
  -webkit-mask:radial-gradient(60% 60% at 50% 0%, #000 0%, rgba(0,0,0,.35) 50%, transparent 78%);
  mask:radial-gradient(60% 60% at 50% 0%, #000 0%, rgba(0,0,0,.35) 50%, transparent 78%); opacity:.09;}

/* ---------- raised, edge-lit surfaces (max three elevation steps sitewide) ---------- */
.htva.v3page .vcard, .htva.v3page .faq details, .htva.v3page .v2artcard,
.htva.v3page .ic-chip, .htva.v3page .v2pcard, .htva.v3page .v2askai-btn, .htva.v3page .social a{
  background:var(--v3surf); border:1px solid var(--v3line);
  box-shadow:inset 0 1px 0 var(--v3edge), var(--v3shadow);}
.htva.v3page .scorecard, .htva.v3page .console{
  border-color:var(--v3line);
  box-shadow:inset 0 1px 0 var(--v3edge), 0 40px 90px -36px rgba(0,0,0,.85);}
.htva.v3page .ic-chip, .htva.v3page .v2pcard, .htva.v3page .v2askai-btn, .htva.v3page .social a{
  box-shadow:inset 0 1px 0 var(--v3edge), 0 10px 22px -14px rgba(0,0,0,.7);}
.htva.v3page .vcard:hover, .htva.v3page .ic-chip:hover, .htva.v3page .v2askai-btn:hover{
  border-color:var(--v3line-hot);
  box-shadow:inset 0 1px 0 var(--v3edge), 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);}

/* ---------- draftboard: the scorecard reads as an instrument, the copy sits closer ---------- */
.htva.v3page .scorecard .hd{background:color-mix(in srgb, var(--accent) 6%, transparent); color:var(--dim);}
.htva.v3page .scorecard > div:not(.hd){background:linear-gradient(180deg, transparent, rgba(150,200,240,.03));}
.htva.v3page .fitrow .n{text-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);}
.htva.v3page .dim .dl{color:var(--dim);}

/* ---------- testimonials ---------- */
.htva.v3page .vcard{padding:24px 24px 22px; border-radius:var(--r-lg);}
.htva.v3page .vcard p{color:var(--text); font-size:15px; line-height:1.6;}
.htva.v3page .vcard .who img, .htva.v3page .vcard .who .av{
  box-shadow:0 0 0 1px var(--v3line), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);}
.htva.v3page .vcard .who .rl{color:var(--mut);}
.htva.v3page .vmore a{
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px;
  background:var(--v3surf); border:1px solid var(--v3line); box-shadow:inset 0 1px 0 var(--v3edge), 0 10px 22px -14px rgba(0,0,0,.7);
  color:var(--text); letter-spacing:.08em;}
.htva.v3page .vmore a:hover{border-color:var(--v3line-hot); color:var(--accent-ink);}
.htva.v3page .v2marqnote{color:var(--dim);}

/* ---------- process journey ---------- */
.htva.v3page .v2artcard{border-radius:var(--r-lg);}
.htva.v3page .v2sbody > p{color:var(--dim);}
.htva.v3page .v2c{background:var(--v3surf); border-color:var(--v3line); box-shadow:inset 0 1px 0 var(--v3edge);}
.htva.v3page .v2node{background:var(--v3surf-solid); box-shadow:0 8px 18px -10px rgba(0,0,0,.8), inset 0 1px 0 var(--v3edge);}

/* ---------- roles: one segmented board instead of four floating cards ---------- */
.htva.v3page .bento{
  gap:0; margin-top:46px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--v3surf-solid); border:1px solid var(--v3line);
  box-shadow:inset 0 1px 0 var(--v3edge), var(--v3shadow);}
.htva.v3page .bento::before{
  content:"22 specialized roles \00a0\00b7\00a0 four disciplines \00a0\00b7\00a0 one accountable roof";
  grid-column:1 / -1; display:flex; align-items:center; gap:10px;
  padding:13px 22px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); border-bottom:1px solid var(--hair);
  background:color-mix(in srgb, var(--accent) 5%, transparent);}
.htva.v3page .bento::after{
  content:""; grid-column:1 / -1; grid-row:1; justify-self:end; align-self:center; margin-right:22px;
  width:8px; height:8px; border-radius:50%; background:var(--live, #34d399);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--live, #34d399) 20%, transparent); animation:v3blip 2.2s ease-in-out infinite;}
@keyframes v3blip{0%,100%{opacity:1} 50%{opacity:.35}}
.htva.v3page .bento .tile{
  background:linear-gradient(180deg, rgba(150,200,240,.05), transparent 70%);
  border:0; border-radius:0; padding:26px 24px 30px;
  box-shadow:1px 0 0 0 var(--hair), 0 1px 0 0 var(--hair);}
.htva.v3page .bento .tile:hover{transform:none; z-index:2;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), rgba(150,200,240,.03) 75%);
  box-shadow:1px 0 0 0 var(--hair), 0 1px 0 0 var(--hair), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);}
.htva.v3page .bento .tile::before{border-radius:0;}
.htva.v3page .tile h3{font-size:16px; color:var(--text);}
.htva.v3page .tile li{color:var(--dim); font-size:14px;}
.htva.v3page .tile .cnt{
  color:var(--v3amber); background:color-mix(in srgb, var(--v3warm) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--v3warm) 30%, transparent); font-weight:600;}
.htva.v3page[data-theme="light"] .bento .tile{background:linear-gradient(180deg, #ffffff, #f6f9fc 70%);}

/* ---------- ops console: brighten the KPI cells so the instrument reads at a glance ---------- */
.htva.v3page .kpi{background:linear-gradient(180deg, rgba(150,200,240,.09), rgba(150,200,240,.04));}
.htva.v3page .kpi .l, .htva.v3page .con__bar{color:var(--dim);}
.htva.v3page .row .s{color:var(--mut);}

/* ---------- stat band ---------- */
.htva.v3page .stat .n{font-size:clamp(38px, 5vw, 58px); text-shadow:0 0 26px color-mix(in srgb, var(--accent) 35%, transparent);}
.htva.v3page .stat .n.warm{text-shadow:0 0 26px rgba(249,115,22,.4);}
.htva.v3page .stat .l{color:var(--dim); font-size:14px;}

/* ---------- industries ---------- */
.htva.v3page .ic-chip{padding:12px 18px; color:var(--text);}
.htva.v3page .ic-chip:hover{border-color:color-mix(in srgb, var(--v3warm) 55%, transparent);}
.htva.v3page .ic-chip:hover .ck{color:var(--v3warm);}

/* ---------- founder ---------- */
.htva.v3page .founder img{
  border-radius:var(--r-lg); outline:1px solid var(--v3line);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9), 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);}
.htva.v3page .cred li{color:var(--dim);}
.htva.v3page .social a{color:var(--text); border-radius:999px; padding:9px 16px;}
.htva.v3page .social a:hover{border-color:var(--v3line-hot); color:var(--accent-ink);}

/* ---------- FAQ ---------- */
.htva.v3page .faq{max-width:860px; margin-top:40px; gap:12px;}
.htva.v3page .faq details{border-radius:14px; padding:2px 24px; transition:border-color .2s ease, box-shadow .2s ease;}
.htva.v3page .faq details[open]{
  border-color:var(--v3line-hot);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 1px 0 var(--v3edge), var(--v3shadow);}
.htva.v3page .faq summary{color:var(--text);}
.htva.v3page .faq .a{color:var(--dim); font-size:15.5px; line-height:1.65; max-width:70ch;}

/* ---------- trusted band: logos step up out of the fog ---------- */
.htva.v3page .clogo{opacity:.74;}
.htva.v3page .clogo:hover{opacity:1;}
.htva.v3page[data-theme="light"] .clogo{opacity:.62;}

/* ---------- ask AI ---------- */
.htva.v3page .v2askai-wrap > p{color:var(--dim);}

/* ---------- copy: tinted, never flat grey ---------- */
.htva.v3page .feat li{color:var(--dim); font-size:15.5px;}
.htva.v3page .v2fn-bdesc, .htva.v3page .v2fn-copy > p, .htva.v3page .v2sb-copy p,
.htva.v3page .v2jhead p{color:var(--v2mut);}

/* ---------- browser surfaces carry the design too ---------- */
.htva.v3page ::selection{background:color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text);}
.htva.v3page{caret-color:var(--accent);}
.htva.v3page a:focus-visible, .htva.v3page button:focus-visible, .htva.v3page summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}

@media (prefers-reduced-motion: reduce){ .htva.v3page .bento::after{animation:none;} }


/* src/styles/htva-v9-1.css */
/* src/styles/htva-v9-1.css : /v9 homepage preview sections (2026-10-15).
   "What could you get off your plate?" work cards and the recruiting-vs-managed comparison.
   Site tokens only (--panel, --panel-brd, --text, --mut, --accent, --accent-ink, --ember), so both
   themes follow the rest of the page. */
.htva.htva .v9-sec .head { margin-bottom: 34px; }
.htva.htva .v9-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0 auto; }
.htva.htva .v9-card { display: grid; gap: 6px; padding: 20px 22px; border-radius: 14px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--panel-brd); color: var(--text);
  transition: border-color .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); }
.htva.htva .v9-card:hover, .htva.htva .v9-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.htva.htva .v9-card b { font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.htva.htva .v9-card span { color: var(--mut); font-size: 14.5px; line-height: 1.45; }
.htva.htva .v9-card b::after { content: " →"; color: var(--accent-ink); }
.htva.htva .v9-more { text-align: center; margin: 24px 0 0; }
.htva.htva .v9-more a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.htva.htva .v9-more a:hover { text-decoration: underline; }
.htva.htva .v9-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; max-width: 980px; margin: 0 auto; align-items: start; }
.htva.htva .v9-col { padding: 24px 26px; border-radius: 16px; border: 1px solid var(--panel-brd); background: var(--panel); }
.htva.htva .v9-col--us { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 50px color-mix(in srgb, var(--accent) 10%, transparent); }
.htva.htva .v9-col-h { margin: 0 0 14px; font-family: var(--f-head); font-weight: 700; font-size: 18px; color: var(--text); }
.htva.htva .v9-col--them .v9-col-h { color: var(--mut); }
.htva.htva .v9-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.htva.htva .v9-col li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--panel-brd); font-size: 15.5px; line-height: 1.45; color: var(--text); }
.htva.htva .v9-col li:first-child { border-top: 0; }
.htva.htva .v9-col--them li { color: var(--mut); }
.htva.htva .v9-col--them li::before { content: "–"; color: var(--mut); text-align: center; }
.htva.htva .v9-col--us li::before { content: "✓"; color: var(--accent-ink); font-weight: 700; text-align: center; }
@media (max-width: 860px) {
  .htva.htva .v9-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htva.htva .v9-vs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .htva.htva .v9-work { grid-template-columns: 1fr; } }


/* src/styles/htva-v9-10.css */
/* src/styles/htva-v9-10.css: /v9 after-funnel booking band, photo + drawer (2026-10-15).
   Portrait card of Valentina on the left; a dark panel slides out from behind it (negative margin,
   photo above it). The panel is dark in both themes, like the site's closer, so it stands out on the
   light page; text colours are pinned for that reason. Stacks under 860px. */
.htva.htva.htva .sec.v9-ctaband { padding: 72px 0; }
.htva.htva.htva .v9-cta2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; max-width: 1060px; margin: 0 auto; }
.htva.htva.htva .v9-cta-photo { position: relative; z-index: 2; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(8, 18, 32, .55), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-1.5deg); }
.htva.htva.htva .v9-cta-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.htva.htva.htva .v9-cta-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: grid; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(6, 12, 22, .85)); color: #fff; }
.htva.htva.htva .v9-cta-cap b { font-family: var(--f-head); font-weight: 800; font-size: 17px; }
.htva.htva.htva .v9-cta-cap span { font-size: 13px; color: #fdba74; letter-spacing: .02em; }
.htva.htva.htva .v9-cta-panel { position: relative; z-index: 1; margin-left: -48px; padding: 42px 46px 40px 92px; border-radius: 0 26px 26px 0;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(249, 115, 22, .20), transparent 60%),
    linear-gradient(135deg, #0f1b2a, #09111b);
  border: 1px solid rgba(251, 146, 60, .28); border-left: 0;
  box-shadow: 0 30px 70px -40px rgba(8, 18, 32, .7); }
.htva.htva.htva .v9-cta-k { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fdba74; }
.htva.htva.htva .v9-cta-h2 { margin: 0 0 14px; font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.08; color: #f1f5f9; letter-spacing: -.01em; }
.htva.htva.htva .v9-cta-mk { background: linear-gradient(90deg, #fdba74, #fb923c 45%, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.htva.htva.htva .v9-cta-p2 { margin: 0 0 24px; max-width: 560px; color: #b6c6d6; font-size: 17px; line-height: 1.55; }
.htva.htva.htva .v9-cta2 .v9-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.htva.htva.htva .v9-cta-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 13.5px; color: #b6c6d6; }
.htva.htva.htva .v9-cta-ticks span::before { content: "\2713"; color: #fb923c; font-weight: 700; margin-right: 7px; }
@media (max-width: 860px) {
  .htva.htva.htva .v9-cta2 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .htva.htva.htva .v9-cta-photo { width: min(240px, 70%); transform: none; }
  .htva.htva.htva .v9-cta-panel { margin: -44px 0 0; width: 100%; padding: 70px 24px 30px; border-radius: 26px; border-left: 1px solid rgba(251, 146, 60, .28); }
  .htva.htva.htva .v9-cta2 .v9-cta-row > * { flex: 1 1 100%; justify-content: center; }
}


/* src/styles/htva-v9-11.css */
/* src/styles/htva-v9-11.css: fixes for htva-v9-10.css. The light theme's heading colour beat the
   panel's h3 (dark text on the dark panel), so it is pinned with more weight; the photo grows a little
   and the panel's vertical padding shrinks, so the panel never shows a corner above the tilted photo. */
.htva.htva.htva.htva.htva .v9-cta-panel h3.v9-cta-h2 { color: #f1f5f9; }
.htva.htva.htva.htva .v9-cta2 { grid-template-columns: 320px minmax(0, 1fr); }
.htva.htva.htva.htva .v9-cta-panel { padding-top: 34px; padding-bottom: 32px; border-radius: 26px; }
@media (max-width: 860px) {
  .htva.htva.htva.htva .v9-cta2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.htva .v9-cta-panel { padding-top: 70px; padding-bottom: 30px; }
}


/* src/styles/htva-v9-12.css */
/* src/styles/htva-v9-12.css: after-funnel band, owner round (2026-10-15). Photo straight (no tilt) and
   taller than the panel, so it stands proud above and below the drawer; the new photo is a square
   upload, so it is cropped to 2:3 around her face. */
.htva.htva.htva.htva.htva .v9-cta2 { grid-template-columns: 330px minmax(0, 1fr); align-items: center; }
.htva.htva.htva.htva.htva .v9-cta-photo { transform: none; aspect-ratio: 2 / 3; border-radius: 26px; }
.htva.htva.htva.htva.htva .v9-cta-photo img { object-position: 58% 30%; }
.htva.htva.htva.htva.htva .v9-cta-panel { padding: 38px 46px 36px 96px; }
@media (max-width: 860px) {
  .htva.htva.htva.htva.htva .v9-cta2 { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.htva.htva .v9-cta-photo { width: min(250px, 72%); aspect-ratio: 4 / 5; }
  .htva.htva.htva.htva.htva .v9-cta-panel { padding: 70px 24px 30px; }
}


/* src/styles/htva-v9-13.css */
/* src/styles/htva-v9-13.css: after-funnel band with a generated booking image instead of the founder
   photo (2026-10-15, owner). Same layout; the orange glow under the band (from the first version) comes
   back under the image card and the drawer, and the image card gets a warm edge. */
.htva.htva.htva.htva.htva .v9-cta-photo {
  box-shadow: 0 40px 70px -30px rgba(249, 115, 22, .55), 0 0 0 1px rgba(251, 146, 60, .35), 0 0 60px -10px rgba(249, 115, 22, .25);
  background: #0a121d;
}
.htva.htva.htva.htva.htva .v9-cta-photo img { object-position: 50% 72%; }
.htva.htva.htva.htva.htva .v9-cta-panel { box-shadow: 0 34px 80px -34px rgba(249, 115, 22, .5), 0 30px 70px -40px rgba(8, 18, 32, .7); }


/* src/styles/htva-v9-14.css */
/* src/styles/htva-v9-14.css: after-funnel band, equal side spacing (2026-10-15, owner). The paragraph was
   capped at 560px inside a wider panel, so all spare room piled up on the right. Band narrowed to 1000px,
   paragraph fills the panel, and the visible left gap (96px padding minus the 48px the image overlaps)
   equals the right padding: 48px both sides. */
.htva.htva.htva.htva.htva.htva .v9-cta2 { max-width: 1000px; }
.htva.htva.htva.htva.htva.htva .v9-cta-panel { padding-left: 96px; padding-right: 48px; }
.htva.htva.htva.htva.htva.htva .v9-cta-p2 { max-width: none; }
@media (max-width: 860px) {
  .htva.htva.htva.htva.htva.htva .v9-cta-panel { padding-left: 24px; padding-right: 24px; }
}


/* src/styles/htva-v9-15.css */
/* src/styles/htva-v9-15.css: trust row edges (2026-10-15, owner: "a little faded"). Logos card gets the
   brand teal stroke plus a teal-to-orange top hairline (the two colours of its own underline); the Ask AI
   card's orange stroke goes from 22% to 50%. Both cards get a faint glow of their colour. */
.htva.htva.htva.htva.htva .v9-trust #clients.sec {
  border: 1px solid color-mix(in srgb, #0891b2 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #22d3ee 10%, transparent), 0 18px 50px -30px color-mix(in srgb, #0891b2 45%, transparent);
  position: relative; overflow: hidden;
}
.htva.htva.htva.htva.htva .v9-trust #clients.sec::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #0891b2, #22d3ee 40%, #fb923c 75%, #f97316);
}
.htva.htva.htva.htva.htva .v9-trust #ask-ai.v2askai {
  border: 1px solid rgba(251, 146, 60, .5);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, .12), 0 18px 50px -30px rgba(249, 115, 22, .55);
}


/* src/styles/htva-v9-16.css */
/* src/styles/htva-v9-16.css: the teal-to-orange underline under "Trusted by 500+" (1.5px, 75% opacity)
   read as grey next to the card's new 3px top line; same gradient, 2.5px, full strength. */
.htva.htva.htva.htva .v9-trust .v2trusted::after { height: 2.5px; opacity: 1; width: 260px; }


/* src/styles/htva-v9-17.css */
/* src/styles/htva-v9-17.css: owner prefers the plain stroke; the teal-to-orange top line on the logos
   card (htva-v9-15.css ::after) is removed. Stroke and glow stay. */
.htva.htva.htva.htva.htva.htva .v9-trust #clients.sec::after { content: none; display: none; }


/* src/styles/htva-v9-18.css */
/* src/styles/htva-v9-18.css: lanes header on two lines, split after the comma (2026-10-15). */
.htva.htva.htva.htva .sec.v9-cap .head .h2 .mk { display: block; }


/* src/styles/htva-v9-2.css */
/* src/styles/htva-v9-2.css: /v9 numbers panel (2026-10-15). The stats band without the generated
   faces: copy on the left, three number cards on the right, numbers static (the CSS counter overlay
   showed mid-count values like "449+" and "7-13" in screenshots and hidden tabs). Scoped to .v9-nums,
   so the homepage band is untouched. */
.htva.htva.htva.htva.htva .v2statsband.v9-nums { padding-top: 80px; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; background: none; box-shadow: none; border: 0; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-copy { order: 1; border-radius: 22px; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-row { order: 2; display: grid; grid-template-columns: 1fr; gap: 12px; height: auto; border-radius: 0; overflow: visible; background: none; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-row,
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-card,
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-card * { animation: none; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-row .v2sb-card { height: auto; min-height: 0; aspect-ratio: auto; display: flex; align-items: center; padding: 22px 28px; border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-brd); overflow: visible; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-card::before,
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-card::after { display: none; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-cap { position: static; inset: auto; padding: 0; background: none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; width: 100%; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num { font-size: clamp(46px, 4.4vw, 68px); line-height: 1; min-width: 3.3em; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num,
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num * { color: var(--ember); -webkit-text-fill-color: currentColor; font-size: inherit; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums [data-v2count]::after { content: none; }
.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-lbl { margin: 0; color: var(--text); font-size: 13px; letter-spacing: .12em; }
@media (max-width: 820px) {
  .htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-panel { grid-template-columns: 1fr; }
  .htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num { font-size: 44px; min-width: 3.1em; }
}


/* src/styles/htva-v9-3.css */
/* src/styles/htva-v9-3.css: fix for htva-v9-2.css, whose `.v2sb-num, .v2sb-num * { font-size: inherit }`
   came after the number size and reset the numbers to 16px. One more .htva wins without editing v9-2
   in place (in-place edits serve a stale bundle). */
.htva.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num { font-size: clamp(46px, 4.4vw, 68px); }
@media (max-width: 820px) { .htva.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-num { font-size: 44px; } }


/* src/styles/htva-v9-4.css */
/* src/styles/htva-v9-4.css: /v9 owner round 2026-10-15.
   Logos band on its own textured surface; lanes section with a two-line lead and short cards;
   the role tiles as their own tinted section. Site tokens only, so both themes follow. */
.htva.htva.htva .sec.v9-logos {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--panel);
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
}
.htva.htva.htva .sec.v9-cap .head .lead { max-width: 980px; margin-left: auto; margin-right: auto; }
.htva.htva.htva .sec.v9-cap .cpx-lane { display: flex; flex-direction: column; }
.htva.htva.htva .sec.v9-cap .cpx-sub { margin-bottom: 18px; }
.htva.htva.htva .sec.v9-cap .cpx-go { margin-top: auto; }
.htva.htva.htva .sec.v9-roles {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg) 85%);
  border-top: 1px solid var(--panel-brd);
}


/* src/styles/htva-v9-5.css */
/* src/styles/htva-v9-5.css: the v9-logos surface in htva-v9-4.css lost to the logo band's own
   background rule; same surface, more specific. White panel + dot texture + hairlines in light,
   the dark panel in dark, so "Trusted by" reads as its own strip above the lanes. */
.htva.htva.htva.htva.htva.htva section.sec.sm.v9-logos {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px,
    var(--panel);
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--text) 25%, transparent);
  position: relative; z-index: 1;
}


/* src/styles/htva-v9-6.css */
/* src/styles/htva-v9-6.css: the logos band is styled by ID (`.htva.htva[data-theme="light"] #clients`),
   which beats any class count, so v9-4/v9-5 never applied. Same surface keyed on #clients.v9-logos
   (only /v9 carries the class). */
.htva.htva.htva #clients.sec.v9-logos {
  background:
    radial-gradient(color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px,
    var(--panel);
  border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--text) 25%, transparent);
  position: relative; z-index: 1;
}


/* src/styles/htva-v9-7.css */
/* src/styles/htva-v9-7.css: /v9 trust row (2026-10-15, owner): "Trusted by 500+" logos and "Why choose
   HireTrainVA? Ask AI." side by side as two cards in one section (.v9-trust), stacked under 900px.
   The Ask AI card stays dark in both themes, so its heading is pinned light. */
.htva.htva.htva .v9-trust { padding: 64px 0 72px; background:
    radial-gradient(color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px, var(--bg);
  border-bottom: 1px solid var(--panel-brd); }
.htva.htva.htva .v9-trust > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.htva.htva.htva.htva .v9-trust #clients.sec { padding: 34px 30px; border-radius: 22px; background: var(--panel); border: 1px solid var(--panel-brd);
  box-shadow: 0 18px 50px -30px color-mix(in srgb, var(--text) 35%, transparent); display: flex; flex-direction: column; justify-content: center; }
.htva.htva.htva.htva .v9-trust #clients.sec > .wrap { padding: 0; max-width: none; width: 100%; }
.htva.htva.htva.htva .v9-trust #clients .v2trusted { font-size: clamp(22px, 2vw, 30px); margin-bottom: 22px; }
.htva.htva.htva.htva .v9-trust #clients .logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; width: 100%; max-width: none; }
.htva.htva.htva.htva .v9-trust #clients .clogo { max-width: 100%; }
.htva.htva.htva.htva .v9-trust #ask-ai.v2askai { padding: 40px 34px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 50px -30px rgba(0,0,0,.6); overflow: hidden; }
.htva.htva.htva.htva .v9-trust #ask-ai .v2askai-wrap { max-width: 100%; }
.htva.htva.htva.htva .v9-trust #ask-ai h2 { font-size: clamp(24px, 2.2vw, 34px); }
.htva.htva.htva.htva .v9-trust #ask-ai .v2askai-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin-left: auto; margin-right: auto; }
.htva.htva.htva.htva .v9-trust #ask-ai .v2askai-btn { justify-content: center; }
@media (max-width: 900px) { .htva.htva.htva .v9-trust > .wrap { grid-template-columns: 1fr; } }
.htva.htva.htva.htva .v9-trust #ask-ai h2 { color: #f1f5f9; }
.htva.htva.htva.htva .v9-trust #ask-ai.v2askai { border: 1px solid rgba(255, 140, 80, .22); }


/* src/styles/htva-v9-8.css */
/* src/styles/htva-v9-8.css: /v9 phone fixes (2026-10-15).
   1. trust row: the stacked column was `1fr` (min-content floor), so the 3-up logo grid pushed both cards
      24px past the right gutter; minmax(0,1fr) + min-width:0. Ask buttons one per row under 480px.
   2. numbers panel (.v9-nums): the copy card sat offset and ran off the right edge at 390px; one column. */
@media (max-width: 900px) {
  .htva.htva.htva.htva .v9-trust > .wrap { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.htva .v9-trust > .wrap > * { min-width: 0; }
}
@media (max-width: 480px) {
  .htva.htva.htva.htva.htva .v9-trust #ask-ai .v2askai-row { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
  .htva.htva.htva.htva.htva .v9-trust #ask-ai.v2askai { padding: 32px 22px; }
  .htva.htva.htva.htva.htva .v9-trust #clients.sec { padding: 28px 20px; }
}
@media (max-width: 820px) {
  .htva.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-panel { grid-template-columns: minmax(0, 1fr); }
  .htva.htva.htva.htva.htva.htva .v2statsband.v9-nums .v2sb-panel > * { min-width: 0; margin-left: 0; margin-right: 0; width: auto; transform: none; }
}


/* src/styles/htva-v9-9.css */
/* src/styles/htva-v9-9.css: /v9 booking band after the vetting funnel (2026-10-15). One centred card,
   site tokens only; the buttons reuse the hero's .btn-primary / .btn-ghost. */
.htva.htva.htva .sec.v9-ctaband { padding: 64px 0; }
.htva.htva.htva .v9-cta { max-width: 860px; margin: 0 auto; text-align: center; padding: 40px 36px; border-radius: 24px;
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, #fb923c 14%, transparent), transparent 65%),
    var(--panel);
  border: 1px solid color-mix(in srgb, #fb923c 35%, var(--panel-brd));
  box-shadow: 0 24px 60px -36px color-mix(in srgb, #f97316 45%, transparent); }
.htva.htva.htva .v9-cta-h { margin: 0 0 12px; font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; color: var(--text); letter-spacing: -.01em; }
.htva.htva.htva .v9-cta-p { margin: 0 auto 24px; max-width: 620px; color: var(--mut); font-size: 17px; line-height: 1.55; }
.htva.htva.htva .v9-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .htva.htva.htva .v9-cta { padding: 30px 20px; } .htva.htva.htva .v9-cta-row > * { width: 100%; justify-content: center; } }


/* src/styles/htva-xray-4.css */
/* src/styles/htva-xray-1.css — Founder's X-Ray popup: the sample result is a mapped week, not three bars. */
.v2page .xw-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px}
.v2page .xw-lbl{font-size:.82rem;font-weight:600;color:var(--text,#e9f1f8)}
.v2page .xw-sum{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--v2mut);white-space:nowrap}
.v2page .xw-sum strong{color:var(--v2warm);font-weight:700}
.v2page .xw-svg{display:block;max-width:100%}
.v2page svg.xw-svg{display:block;width:100%;height:auto;overflow:visible}
.v2page .xw-svg .xw-d{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;fill:var(--v2mut)}
.v2page .xw-svg .xw-ax{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.06em;fill:var(--v2mut);opacity:.85}
.v2page .xw-svg .xw-row{fill:var(--bg,#05090f)}
.v2page .xw-svg .xw-tick{stroke:var(--v2line);stroke-width:1;stroke-dasharray:2 3}
.v2page .xw-svg .xw-w{fill:url(#xwgw)}
.v2page .xw-svg .xw-c{fill:url(#xwgc)}
.v2page .xw-svg .xw-o{fill:var(--v2line);opacity:.7}
.v2page .xw-svg .xw-seg{transform-box:fill-box;transform-origin:left center}
.v2page .v2xr.open .xw-svg .xw-seg{animation:xwgrow .8s cubic-bezier(.22,1,.36,1) both}
.v2page .v2xr.open .xw-svg .xw-d2{animation-delay:.07s}
.v2page .v2xr.open .xw-svg .xw-d3{animation-delay:.14s}
.v2page .v2xr.open .xw-svg .xw-d4{animation-delay:.21s}
.v2page .v2xr.open .xw-svg .xw-d5{animation-delay:.28s}
@keyframes xwgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v2page .xw-plan{margin-top:12px;border-top:1px solid var(--v2line);padding-top:11px;display:grid;gap:7px}
.v2page .xw-pr{display:grid;grid-template-columns:104px 1fr;gap:8px;align-items:baseline;font-size:.8rem}
.v2page .xw-pk{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--v2mut)}
.v2page .xw-pv{color:var(--text,#e9f1f8);font-weight:600}
.v2page .xw-pv .xw-hi{color:var(--v2cool-ink,var(--v2cool))}
.v2page .v2xr-sample .v2xr-cost{margin-top:12px}
@media (prefers-reduced-motion:reduce){.v2page .v2xr.open .xw-svg .xw-seg{animation:none!important}}


/* src/styles/htva-hire-tables-3.css */
/* Phone tables on the Hire, Digital Employees and Hybrid Teams pages: stack each row instead of the status-table grid. */
@media (max-width:560px){
.htva.htva.htva.htva.htva main:has(.hde) .cap-table tr{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:12px 4px}
.htva.htva.htva.htva.htva main:has(.hde) .cap-table td{grid-column:1;grid-row:auto;width:auto;text-align:left;white-space:normal;justify-self:start}
/* The comparison table loses its header on phones, so show each answer's column name. */
.htva.htva.htva.htva.htva main:has(.hde) .cap-table tr:has(>td:nth-child(4))>td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";position:static;display:inline;width:auto;height:auto;overflow:visible;clip-path:none;font-weight:700;color:var(--dim)}
}


/* src/styles/htva-spacing-2.css */
/* Heading spacing: heavy Rubik with negative tracking makes letters touch. A pixel on large headings is enough. The original homepage (the one with Ask AI inside its trust section) keeps its own spacing until V2 replaces it. */
.htva.htva.htva.htva.htva main:not(:has(#trust #ask-ai)) :is(h1,h2,.h2,.kin,.hl-l1,.hl-sub,.mk,.v2fn-hl,.v9-cta-h2,.v9-cta-mk,.v2askai-hl,.tp-mk){letter-spacing:1px!important}
.htva.htva.htva.htva.htva main:not(:has(#trust #ask-ai)) :is(h3,h4,.cpx-bar,.vcard>p){letter-spacing:.3px!important}


/* src/styles/htva-hire-more-1.css */
/* "See more roles" panel on the Digital Employees page: a native details element, text always in the HTML. */
.htva.htva .hde-more{margin:34px auto 0;max-width:1040px}
.htva.htva .hde-more>summary{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:0 auto;padding:12px 22px;border:1px solid rgba(255,241,231,.28);border-radius:10px;background:#211b18;color:#fff1e7;font-weight:700;font-size:15.5px;line-height:1.3;cursor:pointer;list-style:none}
.htva.htva .hde-more>summary::-webkit-details-marker{display:none}
.htva.htva .hde-more>summary::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.htva.htva .hde-more[open]>summary::after{margin-top:3px;transform:rotate(225deg)}
.htva.htva .hde-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.htva.htva .hde-more>.lead{max-width:70ch;margin:22px auto 0;text-align:center}
.htva.htva .hde-more .cap-table{margin-top:22px}


/* src/styles/htva-team-chart-3.css */
/* Decision loop on the Hire pages: a seat chart with You on top, beside an Inbox where work comes back for Approve. */
.htva.htva .hqc{--l:rgba(140,195,240,.3);--lit:#22d3ee;--warm:249,115,22;--card:#0b1522;--soft:#a9bccd;position:relative;margin:36px auto 44px;text-align:left;color:var(--text)}
.htva.htva .hqc :where(ul,li){list-style:none;margin:0;padding:0}
.htva.htva .hqc li::marker{content:""}
.htva.htva .hqc__grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:44px;align-items:stretch}
.htva.htva .hqc__chart,.htva.htva .hqc__inbox{position:relative;padding:20px;border:1px solid var(--panel-brd);border-radius:18px;background:rgba(140,195,240,.035)}
.htva.htva .hqc__label{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

/* Seat chart */
.htva.htva .hqc__you{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;width:min(100%,230px);margin:0 auto;padding:10px 14px;border:1px solid rgba(var(--warm),.6);border-radius:10px;background:var(--card)}
.htva.htva .hqc__chair{display:block;width:40px;height:40px;fill:none;stroke:#e9f1f8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.htva.htva .hqc__name{display:block;font:700 18px/1.2 Rubik,sans-serif;color:#fff}
.htva.htva .hqc__stamp{display:block;font-size:13px;color:var(--soft)}
.htva.htva .hqc__lead{position:relative;width:min(100%,300px);margin:26px auto 0}
.htva.htva .hqc__lead::before{content:"";position:absolute;left:calc(50% - 1px);top:-26px;width:2px;height:26px;background:var(--l)}
.htva.htva .hqc__seats{position:relative;display:grid;gap:8px;padding-top:44px}
.htva.htva .hqc__seats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.htva.htva .hqc__seats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.htva.htva .hqc__seats::before{content:"";position:absolute;left:calc(50% - 1px);top:0;width:2px;height:22px;background:var(--l)}
.htva.htva .hqc__seats::after{content:"";position:absolute;top:22px;height:2px;background:var(--l)}
.htva.htva .hqc__seats--4::after{left:12.5%;right:12.5%}
.htva.htva .hqc__seats--3::after{left:16.66%;right:16.66%}
.htva.htva .hqc__seat{position:relative}
.htva.htva .hqc__seat::before{content:"";position:absolute;left:calc(50% - 1px);top:-22px;width:2px;height:22px;background:var(--l)}
.htva.htva .hqc__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:1px solid var(--l);border-radius:10px;background:var(--card);text-align:center;transition:border-color .3s}
.htva.htva .hqc__seat.is-work>.hqc__card{border-color:var(--lit)}
.htva.htva .hqc__ava{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--warm),.7)}
.htva.htva .hqc__tile{position:relative;display:block;width:48px;height:48px;border-radius:10px;border:1px solid rgba(34,211,238,.7);background:#05090f}
.htva.htva .hqc__tile::before{content:"";position:absolute;left:9px;right:9px;top:13px;height:3px;border-radius:2px;background:var(--lit);box-shadow:0 8px 0 rgba(34,211,238,.55)}
.htva.htva .hqc__tile::after{content:"";position:absolute;left:9px;top:29px;width:6px;height:9px;background:var(--lit);animation:hqc-caret 1.1s steps(2) infinite}
@keyframes hqc-caret{0%{opacity:1}100%{opacity:0}}
.htva.htva .hqc__role{font-size:13.5px;font-weight:700;line-height:1.25;color:#fff}
.htva.htva .hqc__tag{font-size:12px;line-height:1.25;color:var(--soft)}
.htva.htva .hqc__st{display:inline-block;padding:3px 8px;border:1px solid var(--l);border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.3;text-align:center;white-space:nowrap;color:var(--soft);transition:color .3s,border-color .3s,background-color .3s}
.htva.htva .hqc__st.is-ok{color:#67e8f9;border-color:rgba(34,211,238,.6);background:rgba(34,211,238,.12)}
.htva.htva .hqc__st.is-ask{color:#fdba74;border-color:rgba(var(--warm),.6);background:rgba(var(--warm),.12)}
.htva.htva .hqc__assist{position:relative;margin-top:16px}
.htva.htva .hqc__assist::before{content:"";position:absolute;left:calc(50% - 1px);top:-16px;width:2px;height:16px;background:var(--l)}
.htva.htva .hqc__board{margin:12px 0 0;font-size:12.5px;text-align:center;color:var(--soft)}

/* Inbox */
.htva.htva .hqc__hand{position:absolute;left:-44px;top:96px;width:44px;font-size:10px;font-weight:700;line-height:1.1;text-align:center;color:var(--lit)}
.htva.htva .hqc__inbox::before{content:"";position:absolute;left:-44px;top:126px;width:44px;height:2px;background:var(--lit)}
.htva.htva .hqc__dot{position:absolute;left:-48px;top:123px;width:8px;height:8px;border-radius:50%;background:var(--lit);opacity:0;pointer-events:none}
.htva.htva .hqc.is-pulse .hqc__dot{animation:hqc-run .7s cubic-bezier(.16,1,.3,1)}
@keyframes hqc-run{0%{opacity:1;transform:translateX(0)}85%{opacity:1}100%{opacity:0;transform:translateX(44px)}}
.htva.htva .hqc__ihead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.htva.htva .hqc__ihead b{font:700 18px/1.2 Rubik,sans-serif;color:#fff}
.htva.htva .hqc__ihead span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.htva.htva .hqc__items{display:grid;gap:10px}
.htva.htva .hqc__item{padding:12px 14px;border:1px solid var(--l);border-radius:10px;background:var(--card);transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.htva.htva .hqc__item.is-wait{opacity:0;transform:translateY(8px)}
.htva.htva .hqc__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--soft)}
.htva.htva .hqc__title{margin:6px 0 2px;font-size:15px;font-weight:700;line-height:1.3;color:#fff}
.htva.htva .hqc__sum{margin:0;font-size:13px;line-height:1.45;color:var(--soft)}
.htva.htva .hqc__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.htva.htva .hqc__btn{display:inline-block;padding:5px 11px;border:1px solid rgba(255,241,231,.28);border-radius:8px;background:#211b18;font-size:12.5px;font-weight:700;line-height:1.3;color:#fff1e7;transition:transform .15s,box-shadow .15s}
.htva.htva .hqc__btn--go{border-color:#ffb277;background:radial-gradient(circle at 30% 20%,#fff,#ffd9b8 60%,#ffb277);color:#56260c}
.htva.htva .hqc__btn.is-press{transform:scale(.93);box-shadow:0 0 0 3px rgba(34,211,238,.5)}
.htva.htva .hqc__note,.htva.htva .hqc__lesson{margin:9px 0 0;padding:7px 9px;border-radius:8px;font-size:12.5px;line-height:1.4;transition:opacity .35s}
.htva.htva .hqc__note{border:1px dashed var(--l);color:#fff}
.htva.htva .hqc__note span:first-child{display:block;font-size:11.5px;color:var(--soft)}
.htva.htva .hqc__typed{display:block;min-height:1.4em}
.htva.htva .hqc__lesson{background:rgba(34,211,238,.1);color:#cffafe}
.htva.htva .hqc__lesson b{font-weight:700;color:#67e8f9}
.htva.htva .hqc__note.is-off,.htva.htva .hqc__lesson.is-off{opacity:0}
.htva.htva .hqc__ifoot{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--soft)}

/* Guards, footnote and caption */
.htva.htva .hqc__guards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}
.htva.htva .hqc__guards li{padding:6px 12px;border:1px solid var(--panel-brd);border-radius:999px;font-size:13px;line-height:1.35;color:var(--soft)}
.htva.htva .hqc figcaption{max-width:78ch;margin:22px auto 0;text-align:center}
.htva.htva .hqc__cap{margin:0;font-size:17px;line-height:1.55;font-weight:600;color:var(--text);text-wrap:pretty}
.htva.htva .hqc__foot{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--dim);text-wrap:pretty}
.htva.htva .hqc__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px 0 0;font-size:14.5px}
.htva.htva .hqc__links a{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* First view: builds top-down */
.htva.htva .hqc[data-ready] :is(.hqc__you,.hqc__lead,.hqc__card,.hqc__inbox){transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .3s;transition-delay:calc(var(--i,0)*60ms),calc(var(--i,0)*60ms),0s}
.htva.htva .hqc[data-ready]:not(.is-in) :is(.hqc__you,.hqc__lead,.hqc__card,.hqc__inbox){opacity:0;transform:translateY(10px)}

@media (max-width:980px){
.htva.htva .hqc__grid{grid-template-columns:minmax(0,1fr);gap:40px}
.htva.htva .hqc__chart,.htva.htva .hqc__inbox{padding:14px}
.htva.htva .hqc__hand{left:0;right:0;top:-30px;width:auto;font-size:12px;padding-left:44px;text-align:left;margin-left:50%}
.htva.htva .hqc__inbox::before{left:calc(50% - 1px);top:-40px;width:2px;height:40px}
.htva.htva .hqc__dot{display:none}
.htva.htva .hqc__seats,.htva.htva .hqc__seats--3,.htva.htva .hqc__seats--4{grid-template-columns:minmax(0,1fr);padding:10px 0 0 20px}
.htva.htva .hqc__seats::after{display:none}
.htva.htva .hqc__seats::before{left:7px;top:0;height:auto;bottom:30px}
.htva.htva .hqc__seat::before{left:-13px;top:32px;width:13px;height:2px}
.htva.htva .hqc__card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:9px 10px;text-align:left}
.htva.htva .hqc__ava,.htva.htva .hqc__tile{grid-row:1/3;width:40px;height:40px}
.htva.htva .hqc__tile::before{left:7px;right:7px;top:10px;box-shadow:0 7px 0 rgba(34,211,238,.55)}
.htva.htva .hqc__tile::after{left:7px;top:23px;width:5px;height:8px}
.htva.htva .hqc__card .hqc__st{grid-column:3;grid-row:1/3}
.htva.htva .hqc__role{align-self:end}
.htva.htva .hqc__tag{align-self:start}
.htva.htva .hqc__assist{margin:8px 0 0 16px}
.htva.htva .hqc__assist::before{left:-9px;top:-8px;width:2px;height:40px}
.htva.htva .hqc__lead{width:100%}
}
@media (prefers-reduced-motion:reduce){
.htva.htva .hqc *{transition:none!important;animation:none!important}
}


/* src/styles/htva-team-chart-4.css */
/* Team chart, two-seat version (2026-11-08, hybrid_m43): two VAs under You, each with its Digital Employee below it. */
.htva.htva .hqc__seats[data-hqc="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:440px;margin:0 auto}
.htva.htva .hqc__seats[data-hqc="2"]::after{left:25%;right:25%}
.htva.htva .hqc__assist.is-work>.hqc__card{border-color:var(--lit)}
@media (max-width:980px){
.htva.htva .hqc__seats[data-hqc="2"]{grid-template-columns:minmax(0,1fr);max-width:none}
}


/* src/styles/htva-v2-depill-5.css */
/* V2 hero pill: one pill, two links (Digital Employees, Hybrid Teams), an orange note, a "Hot products" tag and a hover
   explainer card. On the map on desktop; the matching column pill is visually hidden there and shown on phone.
   Classes come from htva-v2-depill-5.js, V2 only. */
.htva.htva.htva .twn--ai .dp2-tag rect { fill: #fdba74; stroke: #fb923c; stroke-width: 1; }
.htva.htva.htva .twn--ai .dp2-tag text { fill: #1a0c03; font: 800 7px/1 var(--f-body); letter-spacing: .08em; }
.htva.htva.htva .twn--ai .dp3-hit { fill: transparent; }
.htva.htva.htva .twn--ai .dp3-a, .htva.htva.htva .twn--ai .dp3-a * { cursor: pointer; pointer-events: all; }
/* Only the hovered line lights up; the older whole-pill hover colour is held off the other line. */
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-t { fill: #fff; transition: fill .15s ease, filter .15s ease; }
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-arr { fill: #fb923c; }
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-x { fill: #fdba74; font-size: 6.4px; font-weight: 700; letter-spacing: .1em; }
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-a:hover .dp3-t,
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-a:hover .dp3-arr { fill: #22d3ee; }
.htva.htva.htva.htva.htva .twn--ai .dp3 .dp3-a:hover .dp3-t { filter: drop-shadow(0 0 4px rgba(34, 211, 238, .75)); }

.dp3-pop {
  position: absolute; z-index: 60; width: 286px; box-sizing: border-box; padding: 16px 18px 18px;
  border-radius: 10px; border: 1px solid rgba(251, 146, 60, .55); background: rgba(10, 14, 22, .97);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 18px rgba(249, 115, 22, .18);
  opacity: 0; visibility: hidden; transform: translateX(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.dp3-pop.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.dp3-pop::before {
  content: ""; position: absolute; left: -6px; top: var(--dp3-tip, 50%); width: 10px; height: 10px; margin-top: -5px;
  background: rgba(10, 14, 22, .97); border-left: 1px solid rgba(251, 146, 60, .55); border-bottom: 1px solid rgba(251, 146, 60, .55);
  transform: rotate(45deg);
}
.dp3-pop .dp3-pop-h { margin: 0 0 6px; font: 700 16px/1.25 var(--font-f-head-token, Rubik, sans-serif); color: #fff; letter-spacing: 0; }
.dp3-pop .dp3-pop-p { margin: 0 0 14px; font: 400 13.5px/1.5 var(--font-f-body-token, 'DM Sans', sans-serif); color: #cbd5e1; }
.dp3-pop .dp3-pop-b {
  display: inline-block; padding: 9px 14px; border-radius: 10px; background: #fff7ed; color: #1a0c03;
  font: 700 13px/1 var(--font-f-body-token, 'DM Sans', sans-serif); text-decoration: none;
}
.dp3-pop .dp3-pop-b:hover, .dp3-pop .dp3-pop-b:focus-visible { background: #fff; box-shadow: 0 0 0 2px #22d3ee; }
@media (prefers-reduced-motion: reduce) {
  .dp3-pop, .dp3-pop.is-on { transition: none; transform: none; }
}

.htva.htva.htva .sec.hero .tai-sr.dp3-off { display: none; }
.htva.htva.htva .sec.hero .dp3-m {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.htva.htva.htva .sec.hero .dp3-m a:focus-visible { outline: 2px solid #fb923c; outline-offset: 3px; }

@media (max-width: 760px) {
  .htva.htva.htva.htva .sec.hero .dp3-m {
    order: -1; position: relative; width: auto; height: auto; overflow: visible; clip-path: none;
    align-self: flex-start; display: flex; flex-direction: column; gap: 8px;
    margin: 10px 0 20px; padding: 20px 28px 16px; border-radius: 30px;
    border: 1.4px solid #fb923c; background: rgba(40, 18, 6, .9); box-shadow: 0 0 14px rgba(249, 115, 22, .45);
  }
  .htva.htva.htva.htva .sec.hero .dp3-m a {
    font: 800 13px/1.1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none;
  }
  .htva.htva.htva.htva .sec.hero .dp3-m a span { color: #fb923c; }
  .htva.htva.htva.htva .sec.hero .dp3-m a:hover, .htva.htva.htva.htva .sec.hero .dp3-m a:active,
  .htva.htva.htva.htva .sec.hero .dp3-m a:focus-visible,
  .htva.htva.htva.htva .sec.hero .dp3-m a:hover span, .htva.htva.htva.htva .sec.hero .dp3-m a:active span {
    color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, .6);
  }
  .htva.htva.htva.htva .sec.hero .dp3-m .dp3-note {
    margin-top: 2px; font: 700 10px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #fdba74;
  }
  .htva.htva.htva .sec.hero .dp3-m .dp3-top {
    position: absolute; top: -9px; right: 18px; padding: 3px 8px; border-radius: 999px;
    background: #fdba74; border: 1px solid #fb923c; color: #1a0c03;
    font: 800 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  }
}


/* src/styles/htva-v2-herotop-2.css */
/* V2 hero top: the cyan dot field and its tint faded out above the pill, leaving a plain dark strip under the nav that
   read as a cut-off. Carry both up to the top edge so the texture runs from the nav down. V2 only (.hv2-sel; the
   original homepage also carries .v2page). */
.htva:has(.hv2-sel) .sec.hero::after {
  -webkit-mask-image: radial-gradient(44% 46% at 9% 30%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 120px, rgba(0, 0, 0, 0) 260px);
  mask-image: radial-gradient(44% 46% at 9% 30%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 120px, rgba(0, 0, 0, 0) 260px);
}
.htva:has(.hv2-sel) .sec.hero {
  box-shadow: inset 0 160px 140px -120px rgba(34, 211, 238, .06);
}
/* The world map drifts down as the page scrolls and clipped the taller pill at its own top edge, slicing off the pill
   top and the "Hot products" tag. Let it draw past that edge; the hero still clips at its own bounds. */
.htva.htva.htva:has(.hv2-sel) .sec.hero .tmap--world { overflow: visible; }


/* src/styles/htva-v2-seo-1.css */
/* V2 hero after the SEO pass: the headline is now the h1 and the kicker above it a p. The sitewide heading spacing
   would widen both, so keep the spacing they had. Element-qualified, so the original homepage (kicker h1, headline
   div) is untouched. */
.htva.htva.htva.htva .sec.hero .hero__grid h1.hero-title { letter-spacing: -.03em; }
.htva.htva.htva.htva .sec.hero .hero__grid p.kicker { letter-spacing: 1px; }


/* src/styles/htva-v2b-4.css */
/* /v2b preview styles (replaces htva-v2b-3.css). New classes come from registry/htva/v2/v2b_build.mjs, v2b_m1.mjs and
   v2b_m3.mjs, so they exist on /v2b only; the phone rules are scoped to /v2b with :has(.v2b-faq3). The logo and the
   two-line kicker apply to both V2 previews (.hv2-sel). */

/* Logo 20% larger on the V2 previews: 26px -> 31px, 21px -> 25px in the slim bar; phone keeps 26px for the menu button */
.htva.htva.htva:has(.hv2-sel) .nav .brand { height: 36px; }
.htva.htva.htva:has(.hv2-sel) .nav .brand img { height: 31px; }
.htva.htva.htva:has(.hv2-sel) .nav.min:not(:hover) .brand img { height: 25px; }

/* Hero kicker on two lines */
.htva.htva.htva .sec.hero .v2-kl { display: inline-block; }

/* Support: three offering cards side by side, benefits only; the usual problems sit in one paragraph under them */
.htva.htva.htva.htva .v10-vs.v2b-stack {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch;
  position: relative; left: 50%; transform: translateX(-50%); width: min(calc(100vw - 48px), 1320px); max-width: none; margin: 0;
}
.htva.htva.htva.htva .v2b-cmp {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(8, 145, 178, .4); border-radius: 16px; padding: 24px 26px 22px;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, .1), 0 18px 40px -28px rgba(16, 32, 47, .35);
}
.htva.htva.htva.htva:not([data-theme="light"]) .v2b-cmp { background: rgba(255, 255, 255, .03); border-color: rgba(140, 195, 240, .2); box-shadow: none; }
.htva.htva.htva.htva .v2b-cmp-top { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(18, 45, 75, .1); }
.htva.htva.htva.htva .v2b-cmp-h { margin: 0; font-size: 1.35rem; letter-spacing: .3px; }
.htva.htva.htva.htva .v2b-cmp .v2b-mlink { margin: 0; white-space: nowrap; }
.htva.htva.htva.htva .v2b-cmp .v2b-mlink a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.htva.htva.htva.htva .v2b-cmp .v2b-mlink a:hover { text-decoration: underline; text-underline-offset: 3px; }
.htva.htva.htva.htva .v2b-cmp-cols { display: block; }
.htva.htva.htva.htva .v2b-cmp .v9-col { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 14px 0 0; }
.htva.htva.htva.htva:not([data-theme="light"]) .v2b-cmp-top { border-color: rgba(140, 195, 240, .14); }
/* the usual problems, in one paragraph and not tied to any one option */
.htva.htva.htva.htva .v2b-else { max-width: 860px; margin: 34px auto 0; text-align: center; }
.htva.htva.htva.htva .v2b-else-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #b4413a; }
.htva.htva.htva.htva .v2b-else-p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted, #5a7189); }
.htva.htva.htva.htva:not([data-theme="light"]) .v2b-else-h { color: #ff8a7a; }
@media (max-width: 1080px) {
  .htva.htva.htva.htva .v10-vs.v2b-stack { grid-template-columns: 1fr; gap: 20px; width: min(calc(100vw - 32px), 640px); }
}
@media (max-width: 760px) {
  .htva.htva.htva.htva .v2b-cmp { padding: 20px 18px 20px; }
  .htva.htva.htva.htva .v2b-else { margin-top: 26px; padding: 0 4px; text-align: left; }
}

/* FAQ: three columns, one per way to hire; question boxes are evened out by htva-v2m-1.js on desktop */
.htva.htva.htva .faq.v2b-faq3 { max-width: 1180px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.htva.htva.htva .faq.v2b-faq3 .v2b-fcol { display: grid; gap: 12px; align-content: start; }
.htva.htva.htva .faq.v2b-faq3 .v2b-fcol-h { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: .3px; }
.htva.htva.htva .faq.v2b-faq3 .v2b-fcol-h a { color: var(--text); text-decoration: none; }
.htva.htva.htva .faq.v2b-faq3 .v2b-fcol-h a::after { content: " →"; color: var(--ember-hot); }
.htva.htva.htva .faq.v2b-faq3 .v2b-fcol-h a:hover { color: var(--accent-ink); }
.htva.htva.htva .faq.v2b-faq3 summary { font-size: 15.5px; display: flex; align-items: center; box-sizing: border-box; }
.htva.htva.htva .faq.v2b-faq3 summary::after { top: 50%; transform: translateY(-50%); }
.htva.htva.htva .faq.v2b-faq3 details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.htva.htva.htva .faq.v2b-faq3 .q { flex: none; }
@media (max-width: 980px) {
  .htva.htva.htva .faq.v2b-faq3 { grid-template-columns: 1fr; max-width: 860px; }
}

/* Phone menu (button and panel built by htva-v2m-1.js) */
.v2m-btn, .v2m-panel { display: none; }
@media (max-width: 760px) {
  .htva.htva.htva:has(.v2b-faq3) .nav .nav__right #tgl { display: none; }
  .htva.htva.htva:has(.v2b-faq3) .v2m-btn {
    display: grid; place-content: center; gap: 4px; width: 42px; height: 42px; padding: 0; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(18, 45, 75, .16); background: #fff;
  }
  .htva.htva.htva:has(.v2b-faq3) .v2m-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #10202f; transition: transform .2s ease, opacity .2s ease; }
  .htva.htva.htva:has(.v2b-faq3) .v2m-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .htva.htva.htva:has(.v2b-faq3) .v2m-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .htva.htva.htva:has(.v2b-faq3) .v2m-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .htva.htva.htva:has(.v2b-faq3) .v2m-panel:not([hidden]) {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 80; max-height: calc(100vh - 90px); overflow-y: auto;
    padding: 8px 20px 20px; background: #fff; border-top: 1px solid rgba(18, 45, 75, .1); box-shadow: 0 24px 40px -20px rgba(16, 32, 47, .4);
  }
  .htva.htva.htva:has(.v2b-faq3) .v2m-panel a, .htva.htva.htva:has(.v2b-faq3) .v2m-theme {
    display: block; width: 100%; padding: 13px 4px; border: 0; border-bottom: 1px solid rgba(18, 45, 75, .08); background: none; text-align: left;
    font: 600 16px/1.3 var(--f-body); color: #10202f; text-decoration: none; cursor: pointer;
  }
  .htva.htva.htva:has(.v2b-faq3) .v2m-panel .v2m-sub { padding-left: 18px; font-weight: 500; font-size: 15px; color: #33506b; }
  .htva.htva.htva:has(.v2b-faq3) .v2m-panel .v2m-sub small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #5a7189; }
  .htva.htva.htva:has(.v2b-faq3) .v2m-theme { border-bottom: 0; color: #33506b; }
  .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-btn { background: rgba(255, 255, 255, .06); border-color: rgba(140, 195, 240, .25); }
  .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-btn span { background: #e9f1f8; }
  .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-panel { background: #0b1522; border-color: rgba(140, 195, 240, .14); }
  .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-panel a, .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-theme { color: #e9f1f8; border-color: rgba(140, 195, 240, .1); }
  .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-panel .v2m-sub, .htva.htva.htva:has(.v2b-faq3):not([data-theme="light"]) .v2m-panel .v2m-sub small { color: #b6c6d6; }
  .htva.htva.htva:has(.v2b-faq3) .nav .brand img { height: 26px; }
}

/* Phone layout fixes, /v2b only */
@media (max-width: 760px) {
  /* hero headline words appear in place instead of sliding in from the side */
  .htva.htva.htva:has(.v2b-faq3) .sec.hero .kin { animation: none !important; transform: none !important; opacity: 1 !important; }

  /* funnel: heading, then the funnel, then the copy */
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-grid { display: flex; flex-direction: column; gap: 0; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-copy { display: contents; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-copy > .v2tag { order: 1; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-copy > h2 { order: 2; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-viz { order: 3; margin: 8px auto 22px; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-copy > p { order: 4; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-bens { order: 5; }
  .htva.htva.htva:has(.v2b-faq3) #funnel .v2fn-cta { order: 6; align-self: flex-start; }

  /* Choose your team: tabs on one row that stay under the menu bar, offerings in two compact columns */
  .htva.htva.htva.htva.htva.htva[data-hv2]:has(.v2b-faq3) .hv2-sel__tabs {
    position: sticky; top: var(--v2m-nav, 82px); z-index: 30; flex-wrap: nowrap; gap: 6px; margin: 22px -12px 26px;
    padding: 10px 12px; background: rgba(238, 242, 247, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .htva.htva.htva.htva.htva.htva[data-hv2]:has(.v2b-faq3):not([data-theme="light"]) .hv2-sel__tabs { background: rgba(8, 14, 23, .92); }
  .htva.htva.htva.htva.htva.htva[data-hv2]:has(.v2b-faq3) .hv2-sel__tab { flex: 1 1 0; min-width: 0; padding: 9px 2px; font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }
  .htva.htva.htva:has(.v2b-faq3) .hv2-sel .bento { grid-template-columns: 1fr 1fr; }
  .htva.htva.htva:has(.v2b-faq3) .hv2-sel .bento .tile { padding: 14px 12px 16px; }
  .htva.htva.htva:has(.v2b-faq3) .hv2-sel .bento .tile h3 { font-size: 13.5px; line-height: 1.2; }
  .htva.htva.htva:has(.v2b-faq3) .hv2-sel .bento .tile p { font-size: 13px; line-height: 1.45; margin-top: 6px; }
  .htva.htva.htva:has(.v2b-faq3) .hv2-sel .bento > :not(.tile) { grid-column: 1 / -1; }

  /* How it works: a vertical line on the left, everything else to its right */
  .htva.htva.htva:has(.v2b-faq3) #how .v2jrail { display: block; position: relative; padding: 0 20px; }
  .htva.htva.htva:has(.v2b-faq3) #how .v2jrail::before {
    content: ""; display: block; position: absolute; left: 41px; right: auto; top: 22px; bottom: 40px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--ember), var(--pulse) 55%, var(--accent)); opacity: .6; -webkit-mask: none; mask: none;
  }
  .htva.htva.htva:has(.v2b-faq3) #how .v2station {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 0 34px; opacity: 1 !important; transform: none !important;
  }
  .htva.htva.htva:has(.v2b-faq3) #how .v2node { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; z-index: 1; }
  .htva.htva.htva:has(.v2b-faq3) #how .v2sbody { grid-column: 2; }
  .htva.htva.htva:has(.v2b-faq3) #how .v2aside { grid-column: 2; width: 100%; margin-top: 14px; }

  /* closer: heading first, the clock smaller underneath */
  .htva.htva.htva:has(.v2b-faq3) #contact .tp-inner { min-height: 0; padding: 56px 0 0; }
  .htva.htva.htva:has(.v2b-faq3) #contact .tp-copy { grid-row: 1; }
  .htva.htva.htva:has(.v2b-faq3) #contact .tp-stage { grid-row: 2; transform: scale(.45); margin: -134px 0 -120px; }
}


/* src/styles/htva-v2-hot-6.css */
/* V2 hero (replaces htva-v2-hot-5.css; the "&" is plain white, no outline or glow).
   1. The "Hot" tag: the pill's dark fill with an orange outline whose glow breathes; "HOT" is electric orange with a
      band of light sweeping across it (desktop: the SVG gradient in htva-v2-depill-11.js; phone: below).
      Desktop: the SVG tag on the map (.dp2-tag). Phone: the tag on the column pill (.dp3-top).
      The tag group's own transform is set by the script, so only its rect is animated.
   2. The "&" between the two headline lines: a little bigger (.7em -> .88em of the headline) and white, still hanging
      to the left of "Digital" (its offsets are in its own em, so they scale with it). V2 only. */
@keyframes htva-hot-breathe {
  0%, 100% { stroke: #fb923c; filter: drop-shadow(0 0 1px rgba(255, 94, 0, .35)); }
  50% { stroke: #ff7a1a; filter: drop-shadow(0 0 6px rgba(255, 110, 20, 1)); }
}
@keyframes htva-hot-chip {
  0%, 100% { border-color: #fb923c; box-shadow: 0 0 3px rgba(255, 94, 0, .35); }
  50% { border-color: #ff7a1a; box-shadow: 0 0 14px rgba(255, 110, 20, 1); }
}
@keyframes htva-hot-sweep {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}
.htva.htva.htva.htva .twn--ai .dp2-tag rect { fill: #241106; stroke-width: 1.2; animation: htva-hot-breathe 2.4s ease-in-out infinite; }
.htva.htva.htva.htva .twn--ai .dp2-tag text { fill: #ff5e00; }
.htva.htva.htva.htva .sec.hero .dp3-m .dp3-top { background: #241106; border-color: #fb923c; animation: htva-hot-chip 2.4s ease-in-out infinite; }
.htva.htva.htva.htva .sec.hero .dp3-m .dp3-hot {
  font-weight: inherit; color: #ff5e00; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #ff5e00 38%, #fff1dc 50%, #ff5e00 62%); background-size: 260% 100%;
  animation: htva-hot-sweep 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.htva .twn--ai .dp2-tag rect { animation: none; }
  .htva.htva.htva.htva .sec.hero .dp3-m .dp3-top { animation: none; }
  .htva.htva.htva.htva .sec.hero .dp3-m .dp3-hot { animation: none; background: none; -webkit-text-fill-color: #ff5e00; }
}

.htva.htva.htva.htva.htva:has(.hv2-sel) .sec.hero .hero-title .hl-amp {
  font-size: .88em; margin: -.36em 0 0 -.92em; color: #fff; -webkit-text-fill-color: #fff;
}


/* src/styles/htva-bkm-note-2.css */
/* Booking pop-up: the line above the calendar (added by htva-bkm-note-2.js). Leaves room on the right for the close
   button, which floats over the top of the box. Replaces htva-bkm-note-1.css. */
.v10-bkm .v10-bkm-note { margin: 0; padding: 18px 64px 12px 24px; font-size: 14.5px; line-height: 1.45; opacity: .8; }
@media (max-width: 760px) { .v10-bkm .v10-bkm-note { padding: 14px 56px 10px 16px; font-size: 13.5px; } }


/* src/styles/htva-legal-wide-1.css */
/* Legal pages (/terms, /tersms, /privacy): the text card fills the page column (1200px, the same width as the hero)
   instead of a 760px strip in the middle. */
.htva.htva.htva.htva .sec .wrap > .legal { max-width: none; width: 100%; box-sizing: border-box; }


/* src/styles/htva-v2-hero-5.css */
/* /v2b hero copy (registry/htva/v2/v2b_m5-m7.mjs; replaces htva-v2-hero-4.css): headline with one line per offer (each
   kept on one line, sized to the hero column; on phone sized to the screen width), one-line kicker, a one-sentence lead,
   three one-line offer lines with orange labels, and a text link beside the main button. Scoped to pages that carry the
   new hero (.v2h-offers), so /v2 and the homepage are untouched. */
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .kicker { white-space: normal; }
.htva.htva.htva.htva.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .hero__grid .hero-title { font-size: clamp(26px, 2.6vw, 44px); line-height: 1.08; max-width: none; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .hero-title .v2h-line { display: block; white-space: nowrap; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .hero-title .hl-sub { margin-top: .2em; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-offers { display: grid; gap: 8px; margin: 18px 0 0; max-width: 450px; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-offers p { margin: 0; font-size: 16px; line-height: 1.5; color: #c9d6e2; white-space: nowrap; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-k { font-weight: 700; color: #fdba74; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .hero__cta { align-items: center; }
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-link {
  background: none; border: 0; box-shadow: none; padding: 8px 4px; color: #fff; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-link:hover { color: #fdba74; }
@media (max-width: 760px) {
  .htva.htva.htva.htva.htva.htva.htva.htva:has(.v2h-offers) .sec.hero .hero__grid .hero-title { font-size: min(32px, 7.8vw); }
  .htva.htva.htva.htva:has(.v2h-offers) .sec.hero .v2h-offers p { font-size: min(14px, 3.4vw); }
}


/* src/styles/htva-v2b-tags-1.css */
/* /v2b "3 ways to hire" lanes: a plain-words tag above each name (People / Fully AI / People + AI), from
   registry/htva/v2/v2b_m9.mjs. The class exists on /v2b only. */
.htva.htva.htva.htva .cpx-lane .cpx-tag {
  display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: #fdf0dc; color: #3a2a17; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
}
.htva.htva.htva.htva:not([data-theme="light"]) .cpx-lane .cpx-tag { background: rgba(253, 186, 116, .16); color: #fdba74; }


/* src/styles/htva-flows-1.css */
/* /v2b story sections (registry/htva/v2/flows/, v2b_m14.mjs): the People + AI and Fully AI animations reuse the funnel
   section's classes (.v2funnel, .v2fn-*) for the dark room and the copy column; these rules draw only the new parts. */
.htva .v2hy-wire { fill: none; stroke: rgba(140,195,240,.22); stroke-width: 1.2; }
.htva .v2hy-wire--hand { stroke: rgba(253,186,116,.5); stroke-dasharray: 3 5; }
.htva .v2hy-box { stroke-width: 1.2; }
.htva .v2hy-box--p { fill: rgba(255,106,43,.08); stroke: rgba(255,106,43,.7); filter: drop-shadow(0 0 7px rgba(255,106,43,.35)); }
.htva .v2hy-box--d { fill: rgba(34,211,238,.08); stroke: rgba(34,211,238,.75); filter: drop-shadow(0 0 9px rgba(34,211,238,.4)); }
.htva .v2hy-sub { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; fill: #8298ad; }
.htva .v2hy-sub--hand { fill: #fdba74; }
.htva .v2hy-halo { fill: none; stroke-width: 1.4; opacity: .35; transition: opacity .3s, stroke-width .3s; }
.htva .v2hy-ic--p .v2hy-halo { stroke: #fb923c; }
.htva .v2hy-ic--d .v2hy-halo { stroke: #22d3ee; }
.htva .v2hy-ic.on .v2hy-halo { opacity: 1; stroke-width: 2.2; animation: v2hyPulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes v2hyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.htva .v2hy-gate { transition: fill .25s; }
.htva .v2hy-gate.on { fill: rgba(255,106,43,.42); }
.htva .v2ai-src rect { fill: rgba(140,195,240,.06); stroke: rgba(140,195,240,.35); stroke-width: 1; transition: stroke .25s, fill .25s; }
.htva .v2ai-src text { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; fill: #d5e3ef; }
.htva .v2ai-src.on rect { stroke: #22d3ee; fill: rgba(34,211,238,.18); }
.htva .v2ai-core { fill: rgba(34,211,238,.05); stroke: rgba(34,211,238,.55); stroke-width: 1.2; filter: drop-shadow(0 0 12px rgba(34,211,238,.35)); }
.htva .v2ai-stage { fill: rgba(34,211,238,.08); stroke: rgba(34,211,238,.45); stroke-width: 1; transition: fill .25s, stroke .25s; }
.htva .v2ai-stage.on { fill: rgba(34,211,238,.2); stroke: rgba(103,232,249,.9); }
@media (prefers-reduced-motion: reduce) { .htva .v2hy-ic.on .v2hy-halo { animation: none; } }

/* phone: same order as the funnel (heading, animation, copy) */
@media (max-width: 760px) {
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-grid { display: flex; flex-direction: column; gap: 0; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-copy { display: contents; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-copy > .v2tag { order: 1; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-copy > h2 { order: 2; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-viz { order: 3; margin: 8px auto 22px; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-copy > p { order: 4; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-bens { order: 5; }
  .htva.htva.htva:has(.v2b-faq3) :is(#hybrid-flow, #ai-flow) .v2fn-cta { order: 6; align-self: flex-start; }
}


/* src/styles/htva-heropause-1.css */
/* /v2b hero pause button (htva-heropause-1.js): a small pill in the hero's top right; paused, the hero's CSS motion
   holds still (the headline's one-time entrance is left alone so it never freezes half-shown). */
.htva .sec.hero > .hp-btn {
  position: absolute; top: 18px; right: 24px; z-index: 20; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: 999px; border: 1px solid var(--panel-brd, rgba(140,195,240,.2));
  background: var(--glass, rgba(10,18,32,.72)); color: var(--text, #e9f1f8); cursor: pointer;
  font: 600 13px/1 var(--f-body); letter-spacing: .02em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s, color .2s;
}
.htva .sec.hero > .hp-btn svg { width: 11px; height: 11px; fill: currentColor; }
.htva .sec.hero > .hp-btn:hover { border-color: var(--accent, #22d3ee); }
.htva .sec.hero > .hp-btn:focus-visible { outline: 2px solid var(--accent, #22d3ee); outline-offset: 2px; }
.htva .sec.hero.hp-paused *:not(.kin) { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .htva .sec.hero > .hp-btn { top: 10px; right: 12px; padding: 6px 11px 6px 9px; font-size: 12px; }
}


/* src/styles/htva-bkm-note-3.css */
/* Booking pop-up header (htva-bkm-note-3.js): a Rubik headline in the brand navy (white in dark mode) with a quiet line
   under it, clear of the close button. */
#bkm .v10-bkm-hd { margin: 0; padding: 30px 84px 0 26px; }
#bkm .v10-bkm-hd-t {
  margin: 0; font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15;
  letter-spacing: -.01em; color: #10202f;
}
#bkm .v10-bkm-hd-s { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #4a5a6a; max-width: 680px; }
.htva[data-theme="dark"] #bkm .v10-bkm-hd-t, html[data-theme="dark"] #bkm .v10-bkm-hd-t { color: #fff; }
.htva[data-theme="dark"] #bkm .v10-bkm-hd-s, html[data-theme="dark"] #bkm .v10-bkm-hd-s { color: #a9b8c6; }
@media (max-width: 760px) {
  #bkm .v10-bkm-hd { padding: 22px 64px 0 18px; }
  #bkm .v10-bkm-hd-t { font-size: 22px; }
  #bkm .v10-bkm-hd-s { font-size: 14px; }
}


/* src/styles/htva-flows-hy3.css */
/* People + AI v3 (htva-flows-3.js): the small cyan "DIGITAL EMPLOYEE" label inside each of the three boxes. */
.htva .v2hy-delbl { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; fill: #67e8f9; }


/* src/styles/htva-flows-hy5.css */
/* People + AI v5 (htva-flows-5.js): each Digital Employee's blue line to Done (solid) beside its orange dotted line to
   the Approver, their labels, and the "more as needed" dots. */
.htva .v2hy-wire--blue { stroke: rgba(34,211,238,.55); stroke-width: 1.4; }
.htva .v2hy-sub--blue { fill: #67e8f9; }
.htva .v2hy-more circle { fill: rgba(103,232,249,.7); }


/* src/styles/htva-flows-size-1.css */
/* The two story animations take the funnel's sizing (its rule is scoped to #v2fnSvg): full column width, natural
   height. Without it they collapse to nothing on phones, where the column is a flex box. */
.htva .v2funnel :is(#v2hySvg, #v2aiSvg) { width: 100%; height: auto; display: block; max-height: 660px; }
.htva .v2funnel .v2fn-viz:has(> :is(#v2hySvg, #v2aiSvg)) { width: 100%; }
.htva .v2hy-delbl { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; fill: #67e8f9; }


/* src/styles/htva-v2-hot-8.css */
/* V2 hero "Hot" tag (2026-11-08, owner): the light sweep crosses the whole mini pill, as a wider, warm yellow band on a
   45° slant. Desktop: the clear .dp2-shine rect over the tag carries the moving gradient (htva-v2-depill-11.js); it must
   not pick up the tag rect's dark fill, outline or breathing glow from htva-v2-hot-6.css. Phone: the same band crosses the
   chip itself; "HOT" stays plain electric orange. */
.htva.htva.htva.htva.htva .twn--ai .dp2-tag rect.dp2-shine { fill: url(#dp3-hotg); stroke: none; animation: none; filter: none; pointer-events: none; }
.htva.htva.htva.htva.htva .sec.hero .dp3-m .dp3-hot { animation: none; background: none; -webkit-text-fill-color: #ff5e00; color: #ff5e00; }
.htva.htva.htva.htva.htva .sec.hero .dp3-m .dp3-top { position: relative; overflow: hidden; isolation: isolate; }
.htva.htva.htva.htva.htva .sec.hero .dp3-m .dp3-top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, transparent 43%, rgba(255, 224, 120, .7) 50%, transparent 57%) 0 0 / 260% 100% no-repeat;
  animation: htva-hot-sweep 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva.htva.htva .sec.hero .dp3-m .dp3-top::after { display: none; }
}


/* src/styles/htva-v2b-askai-2.css */
/* /v2b (2026-11-08, owner): "Why choose HireTrainVA? Ask AI." sits at the bottom of the closing section with the running
   clock (#contact, v2b_m32.mjs), under "Ready to build a team" and a hairline separator, on the section's own dark
   ground. Full content width: headline on the left, text and the four buttons on the right. Phones: centred, buttons
   two by two. Replaces htva-v2b-askai-1.css (the footer placement). */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai {
  position: relative; z-index: 2; padding: 64px 0 72px; margin: 0; text-align: left; background: none; border: 0; overflow: visible;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai::after { content: none; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai::before {
  content: ""; position: absolute; left: 50%; right: auto; top: 0; bottom: auto; width: min(1148px, 100% - 52px); height: 1px;
  transform: translateX(-50%); pointer-events: none; mask-image: none; -webkit-mask-image: none;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .5) 25%, rgba(255, 106, 43, .55) 75%, transparent);
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-wrap {
  display: grid; grid-template-columns: minmax(280px, 400px) 1fr; grid-template-rows: auto auto auto; column-gap: 64px;
  width: min(1148px, 100% - 52px); max-width: none; margin: 0 auto; padding: 0; align-items: start;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2tag { grid-area: 1 / 1; margin: 0 0 12px; padding: 0; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai h2 {
  grid-area: 2 / 1 / span 2; margin: 0; padding: 0; font-size: clamp(30px, 2.9vw, 42px); line-height: 1.08; text-wrap: balance;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-wrap > p {
  grid-area: 1 / 2 / span 2; margin: 0; padding: 0; max-width: 64ch; font-size: 17px; line-height: 1.55;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-row {
  grid-area: 3 / 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 24px 0 0; padding: 0;
}
@media (max-width: 1080px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai { text-align: center; padding: 52px 0 60px; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-wrap { display: block; max-width: 680px; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai h2 { margin: 0 0 14px; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-wrap > p { margin: 0 auto; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-row { justify-content: center; }
}
@media (max-width: 480px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #contact > #ask-ai .v2askai-btn { justify-content: center; }
}


/* src/styles/htva-v2b-cta-2.css */
/* /v2b "Your next step" band (2026-11-08, owner): the white question and the orange answer each get their own line;
   on phones the heading steps down just enough for each to fit on one line. Replaces htva-v2b-cta-1.css. */
.htva.htva.htva:has(.v2b-faq3) #ready .v9-cta-mk { display: block; white-space: nowrap; }
@media (max-width: 760px) {
  .htva.htva.htva.htva:has(.v2b-faq3) #ready .v9-cta-h2 { font-size: min(26px, 5.6vw); }
}


/* src/styles/htva-v2b-exp-1.css */
/* /v2b experience section (2026-11-08, owner): the line under the headline, "Big-company experience, without the
   big-company salary." (v2b_m28.mjs), in electric blue and semibold. The section is dark in both themes. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience [data-exp-lead] { color: #3ee0ff; font-weight: 600; }


/* src/styles/htva-v2b-faq-1.css */
/* /v2b FAQ (2026-11-08, owner): a big "FAQ" (the A is the logo star, v2b_m31.mjs) runs down the left side like the
   PEOPLE + AI labels (the star as an outline), and the questions become simple lines that open and close with a round
   chevron, the three groups stacked in one column so each question fits on one line. Phones and tablets: the heading
   sits on top, horizontal. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="side"] { margin: 0; text-align: left; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="h"] {
  display: flex; align-items: center; gap: .03em; margin: 0; font-size: 128px; line-height: .9; letter-spacing: .02em;
  font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 800; color: #10202f;
}
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) [data-faq="h"] { color: #fff; }
/* F and Q as outlines with a 10% fill, matching the outline star */
.htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="h"] :is([data-faq="f"], [data-faq="q"]) { color: rgba(16, 32, 47, .1); -webkit-text-stroke: 1px #10202f; paint-order: stroke fill; }
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) [data-faq="h"] :is([data-faq="f"], [data-faq="q"]) { color: rgba(255, 255, 255, .1); -webkit-text-stroke-color: #fff; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="sr"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) svg[data-faq="star"] { width: .92em; height: .92em; flex: 0 0 auto; display: block; }
/* the star is drawn as an outline only: orange gradient edge on the star half, blue edge on the person */
.htva.htva.htva.htva.htva:has(.v2b-faq3) svg[data-faq="star"] path { fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) svg[data-faq="star"] .faq-star-o { stroke: url(#faqStarG); }
.htva.htva.htva.htva.htva:has(.v2b-faq3) svg[data-faq="star"] .faq-star-p { stroke: #4a7fb3; }
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) svg[data-faq="star"] .faq-star-p { stroke: #7fb3e6; }
@media (min-width: 1100px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) .wrap:has(> .v2b-faq3) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 56px; align-items: start;
  }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="side"] { position: sticky; top: 110px; }
  /* vertical, reading bottom to top like the section labels; the star turns with the letters */
  .htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="h"] { writing-mode: vertical-rl; transform: rotate(180deg); }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) svg[data-faq="star"] { transform: rotate(90deg); }
  .htva.htva.htva.htva.htva.htva .faq.v2b-faq3 { max-width: none; margin: 0; column-gap: 40px; }
}
@media (max-width: 1099px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="side"] { text-align: center; margin-bottom: 28px; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) [data-faq="h"] { justify-content: center; font-size: 72px; }
}

/* the questions: lines, not cards; Human Talent, Digital Employees and Hybrid Teams stacked in one column */
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 { grid-template-columns: minmax(0, 1fr); row-gap: 44px; max-width: none; }
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 .v2b-fcol { gap: 0; }
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 .v2b-fcol-h { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid rgba(16, 32, 47, .22); }
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 details,
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 details[open] {
  background: none; border: 0; border-bottom: 1px solid rgba(16, 32, 47, .12); border-radius: 0; box-shadow: none; padding: 0;
}
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 summary {
  padding: 18px 48px 18px 0; font-family: inherit; font-weight: 500; font-size: 16px; line-height: 1.4;
}
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 .q { display: none; }
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 summary::after {
  content: ""; right: 0; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translateY(-50%);
  background: #ff6a2b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .2s ease;
}
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.htva.htva.htva.htva.htva.htva .faq.v2b-faq3 .a { padding: 0 48px 18px 0; font-size: 15px; line-height: 1.6; }
.htva.htva.htva.htva.htva.htva[data-theme="dark"] .faq.v2b-faq3 .v2b-fcol-h { border-bottom-color: rgba(233, 241, 248, .24); }
.htva.htva.htva.htva.htva.htva[data-theme="dark"] .faq.v2b-faq3 details { border-bottom-color: rgba(233, 241, 248, .12); }


/* src/styles/htva-v2b-founder-1.css */
/* /v2b founder section as Valentina's letter (2026-11-08, owner; nodes from v2b_m26.mjs, tagged data-fl). The letter
   reads at body size under the headline, the question stands out as a pull line, the signature closes it, and the
   "Read My Full Letter" button and the social links (now under the photo) show as disabled until they have somewhere
   to go. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder .founder { align-items: start; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Portrait 4:5, cropped from the left so the lamp on the right of the shot falls outside the frame. */
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] .founder__photo { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 18% 50%; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] { gap: 0; }
/* name and role under the photo (v2b_m33.mjs), then the social links as plain text links */
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] [data-fl="sig"] { margin: 20px 0 0; text-align: center; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] [data-fl="role"] { margin: 2px 0 0; text-align: center; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="social"] { justify-content: center; margin: 0; padding-top: 18px; flex-wrap: wrap; gap: 6px 22px; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="social"] a {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; font-size: 14px; font-weight: 500;
  color: #2b5f8f; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43, 95, 143, .35);
}
.htva.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #founder [data-fl="social"] a { color: #9cc9f0; text-decoration-color: rgba(156, 201, 240, .35); }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: default; }

.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="letter"] { margin-top: 18px; max-width: 660px; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="letter"] p.lead { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="hi"] { font-weight: 600; color: #10202f; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="letter"] p[data-fl="q"] {
  margin: 20px 0; padding-left: 16px; border-left: 3px solid #ff5e00;
  font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.35; color: #10202f;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="sig"] {
  margin: 24px 0 0; font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 20px; color: #10202f;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="role"] { margin: 2px 0 22px; font-size: 14px; color: #5b6b7b; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="cta"] {
  display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255, 94, 0, .45);
  color: #c2410c; font-weight: 600; font-size: 15px; text-decoration: none;
}
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #founder :is([data-fl="hi"], [data-fl="sig"]),
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #founder [data-fl="letter"] p[data-fl="q"] { color: #fff; }
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #founder [data-fl="role"] { color: #a9b8c6; }
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #founder [data-fl="cta"] { color: #fdba74; }
@media (min-width: 900px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="side"] { position: sticky; top: 110px; }
}
@media (max-width: 760px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="social"] { display: none; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="letter"] p.lead { font-size: 16px; }
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #founder [data-fl="letter"] p[data-fl="q"] { font-size: 19px; }
}


/* src/styles/htva-v2b-globe-1.css */
/* /v2b (2026-11-08, owner): the "Where we recruit" link in the recruiting strip sits on the same line as the label and the
   country chips (it carried a top margin from the card links). */
.htva.htva.htva.htva:has(.v2b-faq3) .cpx-globe > .cpx-go { margin-top: 0; align-self: center; }


/* src/styles/htva-v2b-how-1.css */
/* /v2b (2026-11-08, owner): "Managed for you, whichever you choose." is gone, so How it works now follows the dark
   client-results wall. A deep burnt-orange ground (a warm glow from the top left over near-black brown) keeps the two
   reading as separate sections in both themes. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #how {
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255, 106, 26, .28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(194, 65, 12, .22), transparent 70%),
    linear-gradient(170deg, #3a1709 0%, #26100a 55%, #1b0c07 100%);
}


/* src/styles/htva-v2b-people-1.css */
/* /v2b (2026-11-08, owner).
   1. Explainer sections (#funnel, #hybrid-flow, #ai-flow, v2b_m37.mjs): the old eyebrow is now the section title (h2),
      the old headline an orange sub-line under it.
   2. The People chapter reads as one block: #experience drops its dark ground and takes the light ground of #roles
      right above it (its cards stay dark so the logos keep their contrast). Each chapter then opens on a dark
      explainer: People (#funnel), People + AI (#hybrid-flow), Fully AI (#ai-flow). */
.htva.htva.htva.htva.htva:has(.v2b-faq3) .v2funnel .v2fn-copy h2[data-fn="title"] {
  margin: 0 0 10px; font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.01em; color: #fff; text-wrap: balance;
  text-transform: capitalize; /* title case like the page's other section titles */
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) .v2funnel .v2fn-copy .v2fn-hl[data-fn="sub"] {
  margin: 0 0 16px; font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; color: #ff8a3d; text-wrap: balance;
}
/* phones lay the copy out as flex items with set orders (the old eyebrow was first): title, then the sub-line */
.htva.htva.htva.htva.htva:has(.v2b-faq3) .v2funnel .v2fn-copy h2[data-fn="title"] { order: 1; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) .v2funnel .v2fn-copy .v2fn-hl[data-fn="sub"] { order: 2; }

/* "Compare the three ways to hire" jumps to #trust (home_m41.mjs); keep the card clear of the sticky header */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #trust { scroll-margin-top: 32px; }

/* light theme: #experience on the light ground, heading and notes in light-page ink; the cards keep their dark panel */
.htva.htva.htva.htva.htva[data-theme="light"]:has(.v2b-faq3) #experience.sec.v10-exp { background: transparent; }
.htva.htva.htva.htva.htva[data-theme="light"]:has(.v2b-faq3) #experience .v10-exp-head .h2 { color: #10202f; }
.htva.htva.htva.htva.htva[data-theme="light"]:has(.v2b-faq3) #experience .v10-exp-head .kicker { color: #4a5b6c; }
.htva.htva.htva.htva.htva[data-theme="light"]:has(.v2b-faq3) #experience [data-exp-lead] { color: #0891b2; }
.htva.htva.htva.htva.htva[data-theme="light"]:has(.v2b-faq3) #experience .v10-trust-note { color: #5b6b7b; }


/* src/styles/htva-v2b-ready-1.css */
/* /v2b (2026-11-08, owner): "Not sure which fits? We'll match you on one call." (#ready) on the same burnt-orange
   ground as How it works (htva-v2b-how-1.css), in both themes. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #ready {
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255, 106, 26, .28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(194, 65, 12, .22), transparent 70%),
    linear-gradient(170deg, #3a1709 0%, #26100a 55%, #1b0c07 100%);
}


/* src/styles/htva-v2b-rowlbl-1.css */
/* /v2b (2026-11-08, owner): the one-line notes under each role grid ("Matched to your industry...") run wider so they
   take two lines on desktop instead of three. */
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) .hv2-sel__panel .v4rowlbl { max-width: 1000px; }


/* src/styles/htva-v2b-trustcap-2.css */
/* /v2b (2026-11-08, owner): "Trusted by 500+ US businesses" and "3 ways to hire" read as one section. The logo wall takes
   the 3-ways paper background (same colour, same 18px dot grid, aligned at the seam), the line between them goes, and
   the blue tint and dot overlay of the logo band are dropped. Spacing: more room above the logo card, and the gap from
   the card to the 3-ways kicker matches the 48px gap between the 3-ways intro and its cards (24 + 24). */
.htva.htva.htva.htva:has(.v2b-faq3) #trust {
  background: radial-gradient(rgba(16,32,47,.09) 1px, transparent 1.6px) 0 100% / 18px 18px, #fff;
  border-bottom: 0;
  padding-top: 64px;
  padding-bottom: 24px;
}
.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #trust,
.htva.htva.htva.htva:not([data-theme="light"]):has(.v2b-faq3) #trust {
  background: radial-gradient(rgba(233,241,248,.09) 1px, transparent 1.6px) 0 100% / 18px 18px, #0b1522;
}
.htva.htva.htva.htva:has(.v2b-faq3) #trust::before { display: none; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #capabilities { border-top: 0; padding-top: 24px; }
@media (max-width: 760px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #trust { padding-top: 44px; padding-bottom: 24px; }
}


/* src/styles/htva-v2b-wall-1.css */
/* /v2b testimonials (2026-11-08, owner, v2b_m34.mjs): the heading is just "Real owners, in their own words.", kept on one
   line where it fits; phones let it wrap. */
@media (min-width: 900px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) .v2wall h2:has([data-wall-h]) { white-space: nowrap; }
}


/* src/styles/htva-v2b-rolesexp-1.css */
/* /v2b (2026-11-08, owner): #roles and #experience read as ONE section. Same plain ground in both, no seam (the roles
   glow moves to the bottom of the pair, the experience dot texture goes), no gap between them, the experience heading
   drops its kicker and becomes a one-line sub-heading, the duplicate "Talk to us about your team" button goes (the
   roles bar above already asks), and the rolling cards lose the edge fade. */
.htva.htva.htva.htva.htva:has(.v2b-faq3) #roles { padding-bottom: 0; background: #eef2f7; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #roles + #experience.sec.v10-exp {
  padding-top: 72px; background: radial-gradient(50% 60% at 0% 100%, rgba(221, 84, 7, .1), transparent 62%), #eef2f7;
}
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #roles { background: #05090f; }
.htva.htva.htva.htva.htva[data-theme="dark"]:has(.v2b-faq3) #roles + #experience.sec.v10-exp {
  background: radial-gradient(50% 60% at 0% 100%, rgba(255, 106, 43, .09), transparent 62%), #05090f;
}
.htva.htva.htva.htva.htva:has(.v2b-faq3) #roles + #experience.sec.v10-exp::before { content: none; }
.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head .kicker { display: none; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head { margin-bottom: 26px; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head .h2 { font-size: clamp(24px, 2.4vw, 32px); }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head .h2 .mk { display: inline; font-size: 1em; margin: 0; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head .lead { margin-top: 10px; font-size: 17px; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-marquee { -webkit-mask-image: none; mask-image: none; background: none; }
.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-foot > a.btn { display: none; }
@media (max-width: 640px) {
  .htva.htva.htva.htva.htva:has(.v2b-faq3) #roles + #experience.sec.v10-exp { padding-top: 52px; }
  .htva.htva.htva.htva.htva.htva.htva:has(.v2b-faq3) #experience .v10-exp-head .h2 { font-size: 24px; }
}


/* src/styles/htva-faq-all-1.css */
/* GENERATED by gen-faq-all.mjs, do not hand-edit (2026-11-08, owner: "all the FAQs in the same style as the homepage,
   FAQ on the side of all FAQ sections", stroke 1px). Every FAQ section except the homepage (its own heading, see
   htva-v2b-faq-1.css): line accordions with the orange round chevron, and an outlined "F★Q" (the A is the logo star,
   10% fill, 1px stroke) down the left side on desktop, across the top on smaller screens. The word is CSS content with
   empty alt text, so screen readers and search keep each page's own FAQ heading. */

/* the side word */
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details))::before {
  content: "F" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='50' viewBox='418 125 256 244'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff4d00'/%3E%3Cstop offset='1' stop-color='%23ffb21a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-width='1' stroke-linejoin='round'%3E%3Cpath stroke='url(%23g)' vector-effect='non-scaling-stroke' d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z'/%3E%3Cpath stroke='%235d93c9' vector-effect='non-scaling-stroke' d='M484.033,195.694c0,10.039 8.15,18.19 18.188,18.19c10.038,0 18.188,-8.15 18.188,-18.19c0,-10.039 -8.15,-18.19 -18.187,-18.19c-10.038,0 -18.188,8.15 -18.188,18.19Z M426.721,220.183c73.863,38.887 83.158,63.596 45.333,139.533c103.096,-79.358 73.358,-225.767 73.358,-225.767c-17.35,95.146 -19.046,96.437 -118.692,86.233Z'/%3E%3C/g%3E%3C/svg%3E") "Q" / "";
  display: block; text-align: center; margin: 0 0 22px; font-family: Rubik, system-ui, -apple-system, sans-serif;
  font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: .02em; white-space: nowrap; pointer-events: none;
  color: rgba(16, 32, 47, .1); -webkit-text-stroke: 1px #10202f; paint-order: stroke fill;
}
.htva.htva.htva.htva[data-theme="dark"]:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details))::before { color: rgba(255, 255, 255, .1); -webkit-text-stroke-color: #fff; }
@media (min-width: 1100px) {
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > * { grid-column: 2; min-width: 0; }
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details))::before {
    grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 110px; margin: 0;
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: 96px;
    content: "F" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='88' viewBox='424 119 244 256'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff4d00'/%3E%3Cstop offset='1' stop-color='%23ffb21a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(90 546 247)' fill='none' stroke-width='1' stroke-linejoin='round'%3E%3Cpath stroke='url(%23g)' vector-effect='non-scaling-stroke' d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z'/%3E%3Cpath stroke='%235d93c9' vector-effect='non-scaling-stroke' d='M484.033,195.694c0,10.039 8.15,18.19 18.188,18.19c10.038,0 18.188,-8.15 18.188,-18.19c0,-10.039 -8.15,-18.19 -18.187,-18.19c-10.038,0 -18.188,8.15 -18.188,18.19Z M426.721,220.183c73.863,38.887 83.158,63.596 45.333,139.533c103.096,-79.358 73.358,-225.767 73.358,-225.767c-17.35,95.146 -19.046,96.437 -118.692,86.233Z'/%3E%3C/g%3E%3C/svg%3E") "Q" / "";
  }
  /* article FAQs sit in the reading column: a smaller word */
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) .rsc-faqsec:has(> .faq details) { column-gap: 32px; }
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) .rsc-faqsec:has(> .faq details)::before { font-size: 64px; content: "F" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='58' viewBox='424 119 244 256'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff4d00'/%3E%3Cstop offset='1' stop-color='%23ffb21a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(90 546 247)' fill='none' stroke-width='1' stroke-linejoin='round'%3E%3Cpath stroke='url(%23g)' vector-effect='non-scaling-stroke' d='M517.008,326.921l28.404,-20.717l73.354,53.512l-28.225,-86.304l73.563,-53.229l-90.8,0.175l-14.658,-45.408c7.117,47.2 -4.237,110.162 -41.638,151.971Z'/%3E%3Cpath stroke='%235d93c9' vector-effect='non-scaling-stroke' d='M484.033,195.694c0,10.039 8.15,18.19 18.188,18.19c10.038,0 18.188,-8.15 18.188,-18.19c0,-10.039 -8.15,-18.19 -18.187,-18.19c-10.038,0 -18.188,8.15 -18.188,18.19Z M426.721,220.183c73.863,38.887 83.158,63.596 45.333,139.533c103.096,-79.358 73.358,-225.767 73.358,-225.767c-17.35,95.146 -19.046,96.437 -118.692,86.233Z'/%3E%3C/g%3E%3C/svg%3E") "Q" / ""; }
  /* the page's own heading reads from the left, next to the word */
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) .wrap:has(> .faq details) > .head { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
  .htva.htva.htva.htva:not(:has(.v2b-faq3)) .wrap:has(> .faq details) > .head .kicker { justify-content: flex-start; }
}

/* the questions: lines, not cards, one column */
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq { display: block; max-width: none; margin-left: 0; margin-right: 0; columns: auto; }
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details,
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details[open] {
  background: none; border: 0; border-bottom: 1px solid rgba(16, 32, 47, .12); border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; break-inside: avoid;
}
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details:first-child { border-top: 1px solid rgba(16, 32, 47, .12); }
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 18px 48px 18px 0; font-family: inherit;
  font-weight: 500; font-size: 16px; line-height: 1.4;
}
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq summary::-webkit-details-marker { display: none; }
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq .q { display: none; }
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; border-radius: 50%; border: 0;
  transform: translateY(-50%); color: transparent; font-size: 0;
  background: #ff6a2b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .2s ease;
}
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.htva.htva.htva.htva:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq .a { padding: 0 48px 18px 0; margin: 0; font-size: 15px; line-height: 1.6; }
.htva.htva.htva.htva[data-theme="dark"]:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details { border-bottom-color: rgba(233, 241, 248, .12); }
.htva.htva.htva.htva[data-theme="dark"]:not(:has(.v2b-faq3)) :is(.wrap:has(> .faq details), .rsc-faqsec:has(> .faq details)) > .faq details:first-child { border-top-color: rgba(233, 241, 248, .12); }


/* src/styles/htva-hybrid-hero-1.css */
/* /hybrid-teams hero (2026-11-08, owner banner; nodes from registry/htva/launch/hybrid_m42.mjs, hooks are data-hh).
   A photo of a VA at work with three Digital Employee task cards stacked over its right edge and a "Your VA" card at
   the bottom left, plus three orange checks under the lead. Banner layout, HTVA look: the cards are the site's dark
   instrument panels (navy glass, cyan edge, live dot), the same in both themes because they sit on the photo. */
.htva.htva.htva [data-hh="checks"] {
  display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 18px 0 26px; padding: 0;
  font-weight: 600; font-size: 15px;
}
.htva.htva.htva [data-hh="checks"] li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.htva.htva.htva [data-hh="checks"] li::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23ff6a2b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.htva.htva.htva [data-hh="stage"] { position: relative; width: 100%; max-width: 520px; margin-left: auto; }
.htva.htva.htva img[data-hh="photo"] {
  display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 30% 40%;
  border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.htva.htva.htva [data-hh="stage"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent 45%, rgba(5, 9, 15, .45));
}
.htva.htva.htva :is([data-hh="card"], [data-hh="va"]) {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px;
  background: rgba(10, 20, 32, .86); border: 1px solid rgba(140, 195, 240, .22); color: #e9f1f8;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.htva.htva.htva [data-hh="cards"] {
  position: absolute; z-index: 2; top: 7%; right: -28px; width: 236px; display: flex; flex-direction: column; gap: 12px;
}
.htva.htva.htva [data-hh="ai"] {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .5); color: #67e8f9;
  font-family: Rubik, system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 0 14px rgba(34, 211, 238, .25);
}
.htva.htva.htva [data-hh="tx"] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.htva.htva.htva [data-hh="t"] { font-weight: 600; font-size: 15px; line-height: 1.2; color: #f1f6fb; }
.htva.htva.htva [data-hh="st"] {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8fe3f5;
}
.htva.htva.htva [data-hh="va"] { position: absolute; z-index: 2; left: -32px; bottom: 9%; padding-right: 20px; }
.htva.htva.htva img[data-hh="av"] {
  width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 50%; object-view-box: inset(23% 47% 47% 11%); border: 2px solid #ffb277;
}
.htva.htva.htva [data-hh="sub"] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b6c6d6; }
.htva.htva.htva [data-hh="va"] { border-color: rgba(255, 133, 63, .45); }
@media (max-width: 900px) {
  .htva.htva.htva [data-hh="stage"] { max-width: 460px; margin: 28px auto 0; }
  .htva.htva.htva [data-hh="cards"] { right: 10px; width: 196px; gap: 8px; }
  .htva.htva.htva [data-hh="va"] { left: 10px; }
  .htva.htva.htva [data-hh="ai"] { width: 32px; height: 32px; font-size: 12px; }
  .htva.htva.htva [data-hh="t"] { font-size: 13px; }
}
@media (max-width: 480px) {
  .htva.htva.htva [data-hh="cards"] { width: 168px; top: 5%; }
  .htva.htva.htva :is([data-hh="card"], [data-hh="va"]) { padding: 8px 10px 8px 8px; gap: 8px; }
}


/* src/styles/htva-hybrid-queue-1.css */
/* /hybrid-teams hero "The Queue", v3 layout (2026-11-08; nodes from registry/htva/launch/hybrid_m47.mjs, hooks are
   data-hq). Your VA leads: Your VA -> Hands off -> Digital Employee across the top, then the VA's morning list as the
   spine. All six tasks stay as rows; each row's status changes (To do, Handed off, Working, Ready for review with
   Approve / Edit, Done; or To do, Your VA, Done), so the panel is always full and never changes height. Team chart
   vocabulary (htva-team-chart-3.css): navy cards, hairline blue lines, status pills, cyan = Digital Employee, warm
   orange = people. Icon and halo match the homepage hybrid flow (.v2hy-ic--d / .v2hy-halo). Dark in both themes like
   the team chart. Motion: htva-hybrid-queue-3.js; the served HTML is the end state. */
.htva.htva.htva [data-hq="queue"] {
  --l: rgba(140, 195, 240, .3); --lit: #22d3ee; --warm: 249, 115, 22; --org: #fb923c; --card: #0b1522; --soft: #a9bccd;
  --g: 60px;
  position: relative; width: 100%; max-width: 560px; margin: 0 0 0 auto; padding: 0; text-align: left; color: #e9f1f8;
}
.htva.htva.htva [data-hq="queue"] :where(ul, li) { list-style: none; margin: 0; padding: 0; }
.htva.htva.htva [data-hq="queue"] li::marker { content: ""; }
.htva.htva.htva [data-hq="panel"] {
  position: relative; padding: 18px 18px 20px; border: 1px solid rgba(140, 195, 240, .22); border-radius: 18px;
  background: radial-gradient(70% 55% at 50% 0%, rgba(34, 211, 238, .07), transparent 70%), linear-gradient(180deg, #0d1826, #08111b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.htva.htva.htva [data-hq="head"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.htva.htva.htva [data-hq="title"] { font: 800 17px/1.2 Rubik, system-ui, sans-serif; color: #fff; }
.htva.htva.htva [data-hq="pill"] {
  display: inline-block; padding: 3px 10px; border: 1px solid var(--l); border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--soft);
}
.htva.htva.htva [data-hq="label"] {
  display: block; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}

/* Crew: Your VA -> Hands off -> Digital Employee */
.htva.htva.htva [data-hq="crew"] {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--g);
  padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px dashed var(--l);
}
.htva.htva.htva [data-hq="node"] { display: flex; align-items: center; gap: 10px; min-height: 52px; min-width: 0; }
.htva.htva.htva [data-hq="ring"] { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; }
.htva.htva.htva [data-hq="ring"] svg { display: block; width: 52px; height: 52px; overflow: visible; }
.htva.htva.htva [data-hq="ring"] circle { fill: none; stroke: #22d3ee; stroke-width: 1.4; opacity: .35; transition: opacity .3s, stroke-width .3s; transform-box: fill-box; transform-origin: center; }
.htva.htva.htva [data-hq-who="va"] [data-hq="ring"]::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.4px solid var(--org); opacity: .35;
  transition: opacity .3s, border-width .3s;
}
.htva.htva.htva [data-hq-who][data-hq-busy] [data-hq="ring"] circle { opacity: 1; stroke-width: 2.2; animation: hq-pulse 1.1s ease-in-out infinite; }
.htva.htva.htva [data-hq-who][data-hq-busy] [data-hq="ring"]::before { opacity: 1; border-width: 2.2px; animation: hq-pulse 1.1s ease-in-out infinite; }
@keyframes hq-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } }
.htva.htva.htva img[data-hq="face"] {
  display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 28% 30%;
  object-view-box: inset(20% 56% 48% 10%);
}
.htva.htva.htva [data-hq="ntx"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.htva.htva.htva [data-hq="nl"] { font: 700 14px/1.2 Rubik, system-ui, sans-serif; color: #fff; }
.htva.htva.htva [data-hq="ns"] { font-size: 12px; line-height: 1.3; color: var(--soft); }
.htva.htva.htva [data-hq="hand"] {
  position: absolute; z-index: 1; top: 25px; left: calc(50% - var(--g) / 2 + 2px); width: calc(var(--g) - 4px); height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, rgba(var(--warm), .75), rgba(34, 211, 238, .75)); pointer-events: none;
}
.htva.htva.htva [data-hq="hand"]::after {
  content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 6px solid rgba(34, 211, 238, .9); border-right: 0;
}
.htva.htva.htva [data-hq="hand"]::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px var(--lit); opacity: 0;
}
.htva.htva.htva [data-hq="crew"][data-hq-hand] [data-hq="hand"]::before { animation: hq-hand .7s cubic-bezier(.5, 0, .5, 1); }
@keyframes hq-hand { 0% { left: 0; opacity: 0 } 15%, 85% { opacity: 1 } 100% { left: calc(100% - 6px); opacity: 0 } }
.htva.htva.htva [data-hq="handl"] {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1.2; color: #fdba74;
}

/* The morning list: one row per task, status on the right */
.htva.htva.htva [data-hq="list"] { display: flex; flex-direction: column; gap: 6px; }
.htva.htva.htva [data-hq="row"] {
  position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 50px; padding: 6px 8px 6px 12px; border: 1px solid var(--l); border-radius: 10px; background: var(--card);
  transition: border-color .35s, box-shadow .35s, background-color .35s;
}
.htva.htva.htva [data-hq="ct"] { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #e9f1f8; transition: color .35s; }
.htva.htva.htva [data-hq="by"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.htva.htva.htva [data-hq="stat"] { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.htva.htva.htva [data-hq="st"] {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--l); border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.3; white-space: nowrap; color: var(--soft); transition: color .3s, border-color .3s, background-color .3s;
}
.htva.htva.htva [data-hq="btns"] { display: none; gap: 5px; }
.htva.htva.htva :is([data-hq="approve"], [data-hq="edit"]) {
  display: inline-block; padding: 3px 10px; border: 1px solid rgba(255, 241, 231, .28); border-radius: 8px;
  background: #211b18; font-size: 12px; font-weight: 700; line-height: 1.35; color: #fff1e7;
  transition: transform .15s, box-shadow .2s, background .25s, color .25s, border-color .25s;
}
.htva.htva.htva [data-hq="approve"][data-hq-lit] {
  border-color: #ffb277; background: radial-gradient(circle at 30% 20%, #fff, #ffd9b8 60%, #ffb277); color: #56260c;
  box-shadow: 0 0 14px rgba(var(--warm), .35);
}
.htva.htva.htva [data-hq="approve"][data-hq-press] { transform: scale(.92); box-shadow: 0 0 0 3px rgba(34, 211, 238, .5); }

/* Left mark: open ring (to do), dot (in progress), tick (done) */
.htva.htva.htva [data-hq="mark"] {
  position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(169, 188, 205, .5);
  transition: border-color .3s, background-color .3s;
}
.htva.htva.htva :is([data-hq-st="handed"], [data-hq-st="working"]) [data-hq="mark"] { border-color: var(--lit); background: rgba(34, 211, 238, .35); }
.htva.htva.htva :is([data-hq-st="va"], [data-hq-st="review"]) [data-hq="mark"] { border-color: var(--org); background: rgba(var(--warm), .4); }
.htva.htva.htva :is([data-hq-st="working"], [data-hq-st="va"]) [data-hq="mark"] { animation: hq-blink 1s ease-in-out infinite; }
@keyframes hq-blink { 50% { opacity: .35 } }
.htva.htva.htva [data-hq-st="done"] [data-hq="mark"] {
  border: 0; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%2322d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.htva.htva.htva [data-hq-route="va"][data-hq-st="done"] [data-hq="mark"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fb923c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Row states */
.htva.htva.htva :is([data-hq-st="handed"], [data-hq-st="working"]) { border-color: rgba(34, 211, 238, .7); box-shadow: 0 0 14px rgba(34, 211, 238, .16); }
.htva.htva.htva :is([data-hq-st="handed"], [data-hq-st="working"]) [data-hq="st"] { color: #67e8f9; border-color: rgba(34, 211, 238, .6); background: rgba(34, 211, 238, .12); }
.htva.htva.htva [data-hq-st="working"] [data-hq="st"] { background: rgba(34, 211, 238, .22); }
.htva.htva.htva :is([data-hq-st="va"], [data-hq-st="review"]) { border-color: rgba(var(--warm), .7); box-shadow: 0 0 14px rgba(var(--warm), .16); }
.htva.htva.htva :is([data-hq-st="va"], [data-hq-st="review"]) [data-hq="st"] { color: #fdba74; border-color: rgba(var(--warm), .6); background: rgba(var(--warm), .12); }
.htva.htva.htva [data-hq-st="review"] [data-hq="btns"] { display: inline-flex; }
.htva.htva.htva [data-hq-st="done"] { background: rgba(11, 21, 34, .55); }
.htva.htva.htva [data-hq-st="done"] [data-hq="ct"] { color: #b9cad9; }
.htva.htva.htva [data-hq-st="done"] [data-hq="st"] { color: #67e8f9; border-color: rgba(34, 211, 238, .45); }
.htva.htva.htva [data-hq-route="va"][data-hq-st="done"] [data-hq="st"] { color: #fdba74; border-color: rgba(var(--warm), .45); }

.htva.htva.htva [data-hq="cap"] { margin: 14px 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--dim, #a9bccd); text-wrap: pretty; }

/* Phone: nodes stacked under their rings, rows on two lines (task, then status) */
@media (max-width: 900px) {
  .htva.htva.htva [data-hq="queue"] { --g: 40px; max-width: 560px; margin: 32px auto 0; }
  .htva.htva.htva [data-hq="panel"] { padding: 14px 14px 16px; }
  .htva.htva.htva [data-hq="node"] { flex-direction: column; text-align: center; gap: 6px; }
  .htva.htva.htva [data-hq="hand"] { left: calc(25% - var(--g) / 4 + 30px); width: auto; right: calc(25% - var(--g) / 4 + 30px); }
  .htva.htva.htva [data-hq="row"] { grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "mark ct" ". stat"; gap: 4px 10px; min-height: 0; padding: 8px 10px 8px 12px; }
  .htva.htva.htva [data-hq="mark"] { grid-area: mark; }
  .htva.htva.htva [data-hq="ct"] { grid-area: ct; }
  .htva.htva.htva [data-hq="stat"] { grid-area: stat; justify-content: flex-start; min-height: 25px; }
  .htva.htva.htva [data-hq="title"] { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva.htva [data-hq="queue"] *, .htva.htva.htva [data-hq="queue"] *::before, .htva.htva.htva [data-hq="queue"] *::after { animation: none !important; transition: none !important; }
}


/* src/styles/htva-crumbs-1.css */
/* Breadcrumbs (2026-11-09, owner: "they look like plain text"). The trail already links Home and the parent; this makes
   the links read as links (muted, underline on hover/focus), spaces the separators and marks the current page. */
.htva.htva nav.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; line-height: 1.4; }
.htva.htva nav.crumbs a { color: var(--dim, #9fb0c2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.htva.htva nav.crumbs a:hover, .htva.htva nav.crumbs a:focus-visible { color: var(--accent, #ff7a3d); text-decoration-color: currentColor; }
.htva.htva nav.crumbs .sep { margin: 0 10px; color: var(--dim, #9fb0c2); opacity: .55; }
.htva.htva nav.crumbs .here { color: var(--text, #e9f1f8); font-weight: 600; }


/* src/styles/htva-about-2.css */
/* HTVA /about v2 (2026-11-08): founder letter woven through the page. Hooks are data-ab attributes set by
   registry/htva/launch/about2_weave.mjs; everything else is the site's own classes. */

/* S1 hero: name caption on the portrait */
.htva.htva.htva [data-ab="portrait"] { position: relative; margin: 0; }
.htva.htva.htva [data-ab="cap"] {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding: 9px 14px 10px; border-radius: 12px;
  background: rgba(8, 17, 27, .58); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  text-align: right; pointer-events: none;
}
.htva.htva.htva [data-ab="cap"] > span:first-child { font: 700 15px/1.2 var(--f-head); color: #f1f6fb; letter-spacing: .01em; }
.htva.htva.htva [data-ab="cap"] > span:last-child { font: 600 11px/1.3 var(--f-mono); color: #c9d7e4; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) {
  .htva.htva.htva [data-ab="cap"] { right: 10px; bottom: 10px; padding: 7px 11px 8px; }
  .htva.htva.htva [data-ab="cap"] > span:first-child { font-size: 14px; }
  .htva.htva.htva [data-ab="cap"] > span:last-child { font-size: 10px; }
}

/* S1 hero: byline reads as a byline, not a second lead */
.htva.htva.htva .page-hero [data-ab="byline"] { font: 600 13px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin: 22px 0 18px; }
.htva.htva.htva .page-hero#letter h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; }
.htva.htva.htva .page-hero [data-ab="byline"] ~ .lead { max-width: 60ch; text-wrap: pretty; }

/* S2 question band: a short statement, centred, tighter than a full section */
.htva.htva.htva main > .sec[data-ab="band"] { padding: 84px 0; }
.htva.htva.htva [data-ab="band"] .head { max-width: 920px; }
.htva.htva.htva.htva [data-ab="band"] .h2 { margin: 0; font-family: var(--f-head); font-weight: 700; text-transform: none; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.htva.htva.htva [data-ab="band"] .h2 .mk { display: block; margin-top: 6px; }
.htva.htva.htva [data-ab="band"] .lead { margin: 22px auto 0; font-family: var(--f-head); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); color: var(--text); }
@media (max-width: 640px) { .htva.htva.htva main > .sec[data-ab="band"] { padding: 60px 0; } }

/* S3 three ways: lane colours (people orange, AI cyan, both) */
.htva.htva.htva.htva.htva [data-ab="ways"] .head .lead { max-width: 860px; }
.htva.htva.htva.htva.sw-trust main > .sec[data-ab="ways"] .cpx-lane .cpx-tag { background: rgba(253, 186, 116, .16); color: #fdba74; }
.htva.htva.htva [data-ab="lane-h"] { --live: #ff8a45; --accent-ink: #ffb37f; }
.htva.htva.htva [data-ab="lane-d"] { --live: #22d3ee; --accent-ink: #67e8f9; }
.htva.htva.htva [data-ab="lane-y"] { --live: #ff8a45; --accent-ink: #ffc59b; }
.htva.htva.htva [data-ab="lane-y"] .cpx-live { background: linear-gradient(90deg, #ff8a45 50%, #22d3ee 50%); }
.htva.htva.htva [data-ab="lane-h"]::after { background: linear-gradient(90deg, #ff6a2b, #ffc49b) !important; }
.htva.htva.htva [data-ab="lane-d"]::after { background: linear-gradient(90deg, #22d3ee, #67e8f9) !important; }
.htva.htva.htva [data-ab="lane-y"]::after { background: linear-gradient(90deg, #ff6a2b, #22d3ee) !important; }

/* S8 close: signature under the lead */
.htva.htva.htva .cta [data-ab="sig"] { text-align: center; margin: 18px 0 0; }


/* src/styles/htva-outcome-1.css */
/* /hybrid-teams "The Outcome?" panel beside the team chart (2026-11-09, hybrid_m50). Hooks are data-oc attributes. */
.htva.htva [data-oc="panel"] { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 32px 8px 32px 12px; }
.htva.htva [data-oc="head"] { display: flex; align-items: center; gap: 14px; }
.htva.htva [data-oc="head"] svg { width: 52px; height: 52px; flex: none; color: #f97316; }
.htva.htva.htva.htva h3[data-oc="title"] { margin: 0; font: 800 clamp(28px, 3vw, 38px)/1.1 Rubik, system-ui, sans-serif; color: #f97316 !important; -webkit-text-fill-color: #f97316; background: none; }
.htva.htva [data-oc="checks"] { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.htva.htva [data-oc="checks"] li { display: flex; align-items: flex-start; gap: 14px; margin: 0; font-size: 18px; line-height: 1.45; color: var(--text, #e9f1f8); }
.htva.htva [data-oc="checks"] li::marker { content: ""; }
.htva.htva [data-oc="checks"] li::before {
  content: ""; width: 20px; height: 20px; flex: none; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23f97316' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 980px) { .htva.htva [data-oc="panel"] { padding: 8px 4px 0; } }


/* src/styles/htva-about-3.css */
/* HTVA /about m53 (2026-11-08): founder signature under the photo, founder timeline in two columns with
   one-line steps. Hooks: data-ab="fnfig"/"fnsig" set by registry/htva/launch/about_m53.mjs, plus site classes. */

/* founder card: signature as a caption under the portrait */
.htva.htva.htva .swt-fn [data-ab="fnfig"] { margin: 0; min-width: 0; }
.htva.htva.htva.htva.sw-trust .swt-fn [data-ab="fnsig"] {
  display: block; margin: 14px 0 0; text-align: left;
  font: 600 17px/1.3 var(--f-head); letter-spacing: 0; text-transform: none; color: var(--text);
}
.htva.htva.htva.htva.sw-trust .swt-fn [data-ab="fnsig"] > span {
  display: block; margin-top: 4px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--dim);
}

/* founder timeline: intro left, steps right */
.htva.htva.htva.sw-trust .swt-journey.jr2 .wrap {
  max-width: 1200px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start;
}
.htva.htva.htva.sw-trust .swt-journey .jr2__head { max-width: none; position: sticky; top: 110px; }
.htva.htva.htva.sw-trust .swt-journey .jr2__lead { font-size: 19px; line-height: 1.6; }
.htva.htva.htva.sw-trust .swt-journey .tl { margin: 0; padding: 0 0 0 40px; }
.htva.htva.htva.sw-trust .swt-journey .tl::before { left: 7px; top: 22px; bottom: 22px; }
.htva.htva.htva.sw-trust .swt-journey .tl__i { margin-bottom: 12px; }
.htva.htva.htva.sw-trust .swt-journey .tl__i:last-child { margin-bottom: 0; }
.htva.htva.htva.sw-trust .swt-journey .tl__i::before { left: -38px; top: 19px; width: 14px; height: 14px; }
.htva.htva.htva.sw-trust .swt-journey :is(.tl__i--pivot, .tl__i--now)::before { left: -40px; top: 17px; width: 18px; height: 18px; }

/* one line per step: label, then title, description underneath */
.htva.htva.htva.sw-trust .swt-journey .tl__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 14px 20px;
}
.htva.htva.htva.htva.sw-trust .swt-journey .tl__yr {
  padding: 0; border-radius: 0; background: none; box-shadow: none; white-space: nowrap;
  font: 700 12px/1 var(--f-mono); letter-spacing: .1em; color: #c2410c;
}
.htva.htva.htva.htva.sw-trust:not([data-theme="light"]) .swt-journey .tl__yr { color: #ff8a45; }
.htva.htva.htva.sw-trust .swt-journey .tl__t { margin: 0; font-size: 19px; line-height: 1.3; }
.htva.htva.htva.sw-trust .swt-journey .tl__card > :nth-child(n+3) { grid-column: 1 / -1; margin-top: 6px; font-size: 16px; line-height: 1.55; }

@media (max-width: 900px) {
  .htva.htva.htva.sw-trust .swt-journey.jr2 .wrap { grid-template-columns: 1fr; gap: 36px; }
  .htva.htva.htva.sw-trust .swt-journey .jr2__head { position: static; }
}
@media (max-width: 640px) {
  .htva.htva.htva.sw-trust .swt-journey .tl { padding-left: 32px; }
  .htva.htva.htva.sw-trust .swt-journey .tl::before { left: 6px; }
  .htva.htva.htva.sw-trust .swt-journey .tl__i::before { left: -32px; }
  .htva.htva.htva.sw-trust .swt-journey :is(.tl__i--pivot, .tl__i--now)::before { left: -34px; }
  .htva.htva.htva.sw-trust .swt-journey .tl__card { padding: 12px 16px; }
  .htva.htva.htva.sw-trust .swt-journey .tl__t { font-size: 17px; }
}
/* Founder card quote: the orange half starts its own line (owner, m54). */
.htva.htva.htva .swt-fn .fn__q .mk { display: block; }


/* src/styles/htva-hybrid-sections-1.css */
/* /hybrid-teams (2026-11-09, hybrid_m51): "A Solution for Where You Are Today" (data-hs, inside the dark #your-team
   section) and "Where a Hybrid Team Can Make a Big Impact" (data-hi, its own plain section, both themes). */

/* ---- Solution: two option panels with an OR badge ---- */
.htva.htva.htva.htva [data-hs="sol"] { margin-top: clamp(72px, 9vw, 120px); }
.htva.htva.htva.htva [data-hs="head"] { margin-bottom: clamp(32px, 4vw, 48px); }
.htva.htva.htva.htva [data-hs="opts"] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0 22px; max-width: 1040px; margin: 0 auto; }
.htva.htva.htva.htva [data-hs="panel"] {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: clamp(30px, 3.4vw, 44px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 36px);
  background: #0b1522; border: 1px solid rgba(140, 195, 240, .22); border-radius: 18px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
}
.htva.htva.htva.htva [data-hs="ic"] {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 6px;
  color: #ff8a45; background: rgba(249, 115, 22, .09); border: 1px solid rgba(249, 115, 22, .32);
}
.htva.htva.htva.htva [data-tone="c"] [data-hs="ic"] { color: #22d3ee; background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .3); }
.htva.htva.htva.htva [data-hs="ic"] svg { width: 32px; height: 32px; display: block; }
.htva.htva.htva.htva.htva.htva.htva.htva h3[data-hs="title"] { margin: 0; font: 700 clamp(22px, 2.1vw, 27px)/1.2 Rubik, system-ui, sans-serif; letter-spacing: -.01em; color: #f1f6fb; -webkit-text-fill-color: currentColor; background: none; }
.htva.htva.htva.htva.htva.htva.htva.htva p[data-hs="text"] { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.55; color: #b6c6d6; }
.htva.htva.htva.htva.htva.htva.htva.htva a[data-hs="go"] {
  margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 16px; text-decoration: none;
  color: #ff8a45; border: 0; background: none;
}
.htva.htva.htva.htva.htva.htva.htva.htva [data-tone="c"] a[data-hs="go"] { color: #22d3ee; }
.htva.htva.htva.htva.htva.htva.htva.htva a[data-hs="go"]:hover { text-decoration: underline; text-underline-offset: 4px; }
.htva.htva.htva.htva [data-hs="or"] { align-self: center; display: grid; place-items: center; }
.htva.htva.htva.htva [data-hs="or"] span {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: #08111c; border: 2px solid #f97316; box-shadow: 0 0 0 6px rgba(249, 115, 22, .1);
  font: 800 15px/1 Rubik, system-ui, sans-serif; letter-spacing: .06em; color: #fff;
}
@media (max-width: 760px) {
  .htva.htva.htva.htva [data-hs="opts"] { grid-template-columns: 1fr; gap: 0; }
  .htva.htva.htva.htva [data-hs="or"] { margin: -14px 0; position: relative; z-index: 1; }
}

/* ---- Impact: nine departments, divider lines, no boxes ---- */
.htva.htva.htva.htva [data-hi="grid"] {
  --hi-ink: #f1f6fb; --hi-dim: #b6c6d6; --hi-rule: rgba(140, 195, 240, .16); --hi-de: #22d3ee; --hi-va: #ff8a45; --hi-ic: #ff8a45;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4.5vw, 64px);
  max-width: 1160px; margin: clamp(36px, 4vw, 52px) auto 0; padding: 0; list-style: none; text-align: left;
}
.htva.htva.htva.htva[data-theme="light"] [data-hi="grid"] { --hi-ink: #0f1e2e; --hi-dim: #45566a; --hi-rule: rgba(15, 30, 46, .13); --hi-de: #0e7490; --hi-va: #c2410c; --hi-ic: #ea580c; }
.htva.htva.htva.htva [data-hi="item"] { margin: 0; padding: 30px 0 34px; border-top: 1px solid var(--hi-rule); }
.htva.htva.htva.htva [data-hi="item"]::marker { content: ""; }
.htva.htva.htva.htva [data-hi="hd"] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.htva.htva.htva.htva [data-hi="ic"] { display: grid; place-items: center; flex: none; color: var(--hi-ic); }
.htva.htva.htva.htva [data-hi="ic"] svg { width: 26px; height: 26px; display: block; }
.htva.htva.htva.htva.htva.htva.htva.htva h3[data-hi="name"] { margin: 0; font: 700 20px/1.25 Rubik, system-ui, sans-serif; letter-spacing: -.01em; color: var(--hi-ink); -webkit-text-fill-color: currentColor; background: none; }
.htva.htva.htva.htva.htva.htva.htva.htva h3[data-hi="name"] a { color: inherit; text-decoration: underline; text-decoration-color: var(--hi-rule); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.htva.htva.htva.htva.htva.htva.htva.htva h3[data-hi="name"] a:hover { text-decoration-color: var(--hi-ic); }
.htva.htva.htva.htva.htva.htva.htva.htva p[data-hi="ln"] { position: relative; margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.55; color: var(--hi-dim); text-align: left; }
.htva.htva.htva.htva.htva.htva.htva.htva p[data-hi="ln"] + p[data-hi="ln"] { margin-top: 8px; }
.htva.htva.htva.htva [data-hi="ln"]::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--hi-de); }
.htva.htva.htva.htva [data-hi="ln"][data-k="va"]::before { background: var(--hi-va); }
.htva.htva.htva.htva [data-hi="who"] { font-weight: 700; color: var(--hi-de); }
.htva.htva.htva.htva [data-k="va"] [data-hi="who"] { color: var(--hi-va); }
@media (max-width: 1024px) { .htva.htva.htva.htva [data-hi="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .htva.htva.htva.htva [data-hi="grid"] { grid-template-columns: 1fr; }
  .htva.htva.htva.htva [data-hi="item"] { padding: 24px 0 26px; }
}


/* src/styles/htva-post-align-1.css */
/* src/styles/htva-post-align-1.css : blog post column alignment (2026-09-17)
   The post wrapper is a 2-col grid whose 1fr track auto-sized to the widest child (the hero image /
   the spilled article grid), so h1, hero, related and FAQ overflowed the 1200px wrap at 1510px.
   minmax(0,1fr) pins the track to the wrap; the article still spills right for the sticky CTA. */
.htva.htva.htva .rsc-post > .wrap{grid-template-columns:auto minmax(0,1fr);}
/* Everything below the article lines up with the prose column (right of the TOC rail). */
@media (min-width:1181px){
  .htva.htva.htva .rsc-post .wrap section.rsc-related,
  .htva.htva.htva .rsc-post .wrap section.rsc-faqsec,
  .htva.htva.htva .rsc-post .wrap section.rsc-endcta,
  .htva.htva.htva .rsc-post .wrap nav.rsc-postnav,
  .htva.htva.htva .rsc-post .wrap div.rsc-author{margin-left:252px;margin-right:0;max-width:calc(var(--wrap,1200px) - 52px - 252px);}
}
@media (min-width:1760px){
  .htva.htva.htva .rsc-post .wrap section.rsc-related,
  .htva.htva.htva .rsc-post .wrap section.rsc-faqsec,
  .htva.htva.htva .rsc-post .wrap section.rsc-endcta,
  .htva.htva.htva .rsc-post .wrap nav.rsc-postnav,
  .htva.htva.htva .rsc-post .wrap div.rsc-author{margin-left:240px;max-width:calc(var(--wrap,1200px) - 52px - 240px);}
}
.htva.htva.htva .rsc-faqsec .faq{margin-left:0;margin-right:0;max-width:none;}
.htva.htva.htva .rsc-relgrid{grid-template-columns:repeat(3,minmax(0,1fr));}


/* src/styles/htva-post-mobile-1.css */
/* src/styles/htva-post-mobile-1.css : blog post layout below 1080px (2026-09-28)
   `.htva.htva .rsc-post .wrap div.rsc-art {grid-template-columns:210px minmax(0,1fr)}` has no media query and
   out-specifies the 1fr mobile rules, so phones got a 210px TOC track + a squeezed prose column at 22px.
   Same specificity, scoped to <=1080px: single column, TOC stacks above the article. Desktop untouched. */
@media (max-width:1080px){
  .htva.htva .rsc-post .wrap div.rsc-art{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:28px;}
  .htva.htva .rsc-post .wrap div.rsc-art > .rsc-body{grid-column:1;}
  .htva.htva .rsc-post .wrap div.rsc-art > aside.rsc-toc{display:none;} /* its links are already hidden here; only the label was left */
}
@media (max-width:640px){
  .htva.htva .rsc-post .wrap .rsc-body p,.htva.htva .rsc-post .wrap .rsc-body li{font-size:18px;line-height:1.65;}
  .htva.htva .rsc-post .wrap .rsc-body h2{font-size:26px;}
  .htva.htva .rsc-post .wrap .rsc-body h3{font-size:21px;}
  .htva.htva .rsc-post .wrap .rsc-body .rsc-inline-cta,.htva.htva .rsc-post .wrap .rsc-body .rsc-callout{width:100%;font-size:17px;padding:20px 18px;}
  .htva.htva .rsc-post .rsc-body .rsc-fig.rsc-fig--half{max-width:100%;}
}


/* src/styles/htva-capacity-1.css */
/* src/styles/htva-capacity-1.css : homepage capacity section (2026-09-28, v2)
   Three live lanes (Human Talent / Hybrid Teams / Digital Employees) + a global-recruiting strip,
   built in the ops-console language with theme tokens only (dark, light, system). Also: role-board
   caption, process cards on one baseline, and Digital Employee styling in the ops feed and floor. */
.htva.htva #capabilities .wrap > .bento::before{content:"The roles we place today \00a0\00b7\00a0 four disciplines";}
.htva .cpx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px;}
.htva .cpx-lane{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 20px 18px;border-radius:var(--r-lg,22px);
  background:var(--panel);border:1px solid var(--panel-brd);overflow:hidden;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent),0 24px 48px -32px rgba(0,0,0,.45);}
.htva .cpx-lane::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:200% 100%;animation:cpxScan 5s linear infinite;opacity:.75;}
.htva .cpx-bar{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:800;font-size:19px;color:var(--text);letter-spacing:-.01em;}
.htva .cpx-live{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 var(--live);animation:cpxPing 2.4s ease-out infinite;flex:none;}
.htva .cpx-tag{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.htva .cpx-sub{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim);min-height:3.1em;}
.htva .cpx-rows{display:grid;gap:8px;}
.htva .cpx-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:12px;border:1px solid var(--hair);
  background:color-mix(in srgb,var(--panel) 70%,transparent);opacity:0;transform:translateY(6px);animation:cpxIn .6s var(--ease) forwards;}
.htva .cpx-row:nth-child(2){animation-delay:.15s}.htva .cpx-row:nth-child(3){animation-delay:.3s}.htva .cpx-row:nth-child(4){animation-delay:.45s}
.htva .cpx-av,.htva .cpx-de{flex:none;display:grid;place-items:center;width:34px;height:34px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.04em;}
.htva .cpx-av{border-radius:50%;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.htva .cpx-de{border-radius:50%;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.htva .cpx-tx{display:grid;min-width:0;}
.htva .cpx-t{font-size:14px;font-weight:600;color:var(--text);line-height:1.3;}
.htva .cpx-s{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:2px;}
.htva .cpx-merge{display:flex;align-items:center;gap:8px;padding:6px 2px;}
.htva .cpx-wire{position:relative;flex:1;height:2px;background:var(--hair);overflow:hidden;border-radius:2px;}
.htva .cpx-wire i{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:cpxFlow 1.8s linear infinite;}
.htva .cpx-hub{flex:none;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  padding:7px 10px;border-radius:999px;border:1px solid var(--panel-brd);background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent);}
.htva .cpx-go{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--accent-ink);}
.htva .cpx-go:hover{text-decoration:underline;text-underline-offset:4px;}
.htva .cpx-globe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:22px;padding:14px 18px;border-radius:999px;
  border:1px dashed var(--panel-brd);}
.htva .cpx-gk{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:6px;}
.htva .cpx-c{font-size:13.5px;font-weight:600;color:var(--text);padding:5px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--hair);}
.htva .cpx-globe .cpx-go{margin:0 0 0 6px;padding:0;}
@keyframes cpxScan{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes cpxPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes cpxIn{to{opacity:1;transform:none}}
@keyframes cpxFlow{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (max-width:980px){.htva .cpx{grid-template-columns:1fr;}.htva .cpx-sub{min-height:0;}.htva .cpx-globe{border-radius:18px;}}
@media (prefers-reduced-motion:reduce){.htva .cpx-row{opacity:1;transform:none;animation:none}.htva .cpx-lane::after,.htva .cpx-wire i,.htva .cpx-de,.htva .cpx-live{animation:none}}
/* ops console: Digital Employee rows */
/* virtual floor: Digital Employee badges */
/* process: the four step cards share one baseline */
@media (min-width:1001px){.htva.htva .v2station{display:flex;flex-direction:column;}.htva.htva .v2station > .v2aside{margin-top:auto;}}

/* v3 (owner, 2026-09-28): Digital Employees are NOT emphasised. Same muted blue as people; the only
   difference is the icon: a person silhouette for human roles, a small brain for Digital Employees. */
.htva .cpx-av,.htva .cpx-de{font-size:0;position:relative;}
.htva .cpx-av::before,.htva .cpx-de::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Ccircle cy='-4.2' r='4.3'/%3E%3Cpath d='M-8 9.5C-8 3.5-4.5 1.6 0 1.6S8 3.5 8 9.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Ccircle cy='-4.2' r='4.3'/%3E%3Cpath d='M-8 9.5C-8 3.5-4.5 1.6 0 1.6S8 3.5 8 9.5Z'/%3E%3C/svg%3E") center/contain no-repeat;}
.htva .cpx-de::before{width:20px;height:18px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -16 36 32' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M-1.5 -12C-8 -14 -14.5 -9.5 -13.5 -3.5C-17 -1 -16 6 -11 7.5C-10 12 -4.5 13.5 -1.5 11Z'/%3E%3Cpath d='M1.5 -12C8 -14 14.5 -9.5 13.5 -3.5C17 -1 16 6 11 7.5C10 12 4.5 13.5 1.5 11Z'/%3E%3Cpath stroke-width='1.6' d='M-10.5 -3H-6L-3.5 -6.5M-9.5 4H-4.5L-3.5 2M10.5 -3H6L3.5 -6.5M9.5 4H4.5L3.5 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -16 36 32' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M-1.5 -12C-8 -14 -14.5 -9.5 -13.5 -3.5C-17 -1 -16 6 -11 7.5C-10 12 -4.5 13.5 -1.5 11Z'/%3E%3Cpath d='M1.5 -12C8 -14 14.5 -9.5 13.5 -3.5C17 -1 16 6 11 7.5C10 12 4.5 13.5 1.5 11Z'/%3E%3Cpath stroke-width='1.6' d='M-10.5 -3H-6L-3.5 -6.5M-9.5 4H-4.5L-3.5 2M10.5 -3H6L3.5 -6.5M9.5 4H4.5L3.5 2'/%3E%3C/svg%3E");}
.htva .con__feed .av[data-de]{font-size:0;position:relative;display:grid;place-items:center;}
.htva .con__feed .av[data-de]::before{content:"";width:17px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -16 36 32' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M-1.5 -12C-8 -14 -14.5 -9.5 -13.5 -3.5C-17 -1 -16 6 -11 7.5C-10 12 -4.5 13.5 -1.5 11Z'/%3E%3Cpath d='M1.5 -12C8 -14 14.5 -9.5 13.5 -3.5C17 -1 16 6 11 7.5C10 12 4.5 13.5 1.5 11Z'/%3E%3Cpath stroke-width='1.6' d='M-10.5 -3H-6L-3.5 -6.5M-9.5 4H-4.5L-3.5 2M10.5 -3H6L3.5 -6.5M9.5 4H4.5L3.5 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -16 36 32' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M-1.5 -12C-8 -14 -14.5 -9.5 -13.5 -3.5C-17 -1 -16 6 -11 7.5C-10 12 -4.5 13.5 -1.5 11Z'/%3E%3Cpath d='M1.5 -12C8 -14 14.5 -9.5 13.5 -3.5C17 -1 16 6 11 7.5C10 12 4.5 13.5 1.5 11Z'/%3E%3Cpath stroke-width='1.6' d='M-10.5 -3H-6L-3.5 -6.5M-9.5 4H-4.5L-3.5 2M10.5 -3H6L3.5 -6.5M9.5 4H4.5L3.5 2'/%3E%3C/svg%3E") center/contain no-repeat;}
/* keep the console's cyan/orange alternation: the website Digital Employee row reads cyan */
.htva.htva .con__feed .row:nth-child(5) .av.b{background:linear-gradient(135deg,#4ce0ff,#22d3ee);color:#04222b;}
/* Digital Employees lane: roles that are not live yet, compact and muted */
.htva .cpx-soon{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:2px;}
.htva .cpx-soon-k{width:100%;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:2px;}
.htva .cpx-soon-c{font-size:12px;color:var(--dim);padding:3px 9px;border-radius:999px;border:1px dashed var(--panel-brd);}
/* v6 icon: robot (owner), same muted colour */
.htva .cpx-de::before{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cg transform='translate%280 2.6%29' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='-11' y='-7' width='22' height='16' rx='5'/%3E%3Cpath d='M0 -7V-11M-11 1H-13.5M11 1H13.5M-3 5H3'/%3E%3C/g%3E%3Cg transform='translate%280 2.6%29'%3E%3Ccircle cy='-12.5' r='2'/%3E%3Ccircle cx='-4.5' cy='0.5' r='2.2'/%3E%3Ccircle cx='4.5' cy='0.5' r='2.2'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cg transform='translate%280 2.6%29' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='-11' y='-7' width='22' height='16' rx='5'/%3E%3Cpath d='M0 -7V-11M-11 1H-13.5M11 1H13.5M-3 5H3'/%3E%3C/g%3E%3Cg transform='translate%280 2.6%29'%3E%3Ccircle cy='-12.5' r='2'/%3E%3Ccircle cx='-4.5' cy='0.5' r='2.2'/%3E%3Ccircle cx='4.5' cy='0.5' r='2.2'/%3E%3C/g%3E%3C/svg%3E");}
.htva .con__feed .av[data-de]::before{width:17px;height:17px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cg transform='translate%280 2.6%29' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='-11' y='-7' width='22' height='16' rx='5'/%3E%3Cpath d='M0 -7V-11M-11 1H-13.5M11 1H13.5M-3 5H3'/%3E%3C/g%3E%3Cg transform='translate%280 2.6%29'%3E%3Ccircle cy='-12.5' r='2'/%3E%3Ccircle cx='-4.5' cy='0.5' r='2.2'/%3E%3Ccircle cx='4.5' cy='0.5' r='2.2'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cg transform='translate%280 2.6%29' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='-11' y='-7' width='22' height='16' rx='5'/%3E%3Cpath d='M0 -7V-11M-11 1H-13.5M11 1H13.5M-3 5H3'/%3E%3C/g%3E%3Cg transform='translate%280 2.6%29'%3E%3Ccircle cy='-12.5' r='2'/%3E%3Ccircle cx='-4.5' cy='0.5' r='2.2'/%3E%3Ccircle cx='4.5' cy='0.5' r='2.2'/%3E%3C/g%3E%3C/svg%3E");}


/* src/styles/htva-talentmap-ai-1.css */
/* src/styles/htva-talentmap-ai-1.css : Digital Employees on the hero map (2026-09-28, v5 sparkle)
   Icon = AI sparkle (owner pick). Source node on the map stays muted cyan; on PLACEMENT CARDS the sparkle
   is orange for Digital-Employee-only and hybrid placements. */
.tmap--world .twn--ai .tai-spark{fill:var(--accent);opacity:.9;}
.tmap--world .twn--ai .tai-spark--s{transform-box:fill-box;transform-origin:center;animation:taiTwinkle 2.6s ease-in-out infinite;}
.tmap--world .twn--ai .tai-brain{filter:drop-shadow(0 0 5px rgba(103,232,249,.45));}
.tmap--world .twn--ai .tai-ring{fill:none;stroke:var(--accent);stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:taiPulse 3.4s ease-out infinite;}
.tmap--world .twn--ai .tai-ring--2{animation-delay:-1.7s;}
.tmap--world .twn--ai .tai-l,.tmap--world .twn--ai .tai-l2{text-anchor:start;}
.tmap--world .twn--ai .tai-l{font:500 12px var(--f-mono);letter-spacing:.1em;fill:var(--dim);opacity:.75;}
.tmap--world .twn--ai .tai-l2{font:500 9.5px var(--f-mono);letter-spacing:.14em;fill:var(--dim);opacity:.5;}
.tmap--world .twn--ai.fire .tai-spark{fill:#fb923c;}
.tmap .tpop--card .tai-av{fill:#0c141e;stroke:rgba(251,146,60,.85);stroke-width:1.2;}
.tmap .tpop--card .tai-brain .tai-spark{fill:#fb923c;}
.tmap .tpop--card .tai-brain .tai-spark--s{fill:#fdba74;}
.tmap .tpop--card .tai-brain{filter:drop-shadow(0 0 4px rgba(249,115,22,.6));}
.tmap .tpop--card.tpop--hyb rect:first-of-type{animation:thybFlash 1.1s ease-in-out 2;}
@keyframes thybFlash{0%,100%{filter:drop-shadow(0 8px 18px rgba(2,6,12,.6))}50%{filter:drop-shadow(0 0 16px rgba(249,115,22,.5))}}
@keyframes taiPulse{0%{transform:scale(.8);opacity:.45}100%{transform:scale(1.8);opacity:0}}
@keyframes taiTwinkle{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.55);opacity:.45}}
@media (prefers-reduced-motion:reduce){.tmap--world .twn--ai .tai-ring,.tmap--world .twn--ai .tai-spark--s{animation:none}}

/* v6: the Digital Employee source is a pill (label left, sparkle on the right end = arc origin).
   Before each deployment an orange stroke laps the pill once (driven from the map script). */
.tmap--world .twn--ai .tai-pill{fill:rgba(8,16,26,.72);stroke:rgba(103,232,249,.28);stroke-width:1;}
.tmap--world .twn--ai .tai-pillrun{fill:none;stroke:#fb923c;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:22 78;stroke-dashoffset:0;opacity:0;
  filter:drop-shadow(0 0 5px rgba(249,115,22,.75));}
.tmap--world .twn--ai .tai-l{font:600 11px var(--f-mono);letter-spacing:.14em;fill:var(--text);opacity:.85;}
.tmap--world .twn--ai .tai-l2{font:500 9px var(--f-mono);letter-spacing:.16em;fill:var(--dim);opacity:.7;}
.tmap--world .twn--ai .tai-ring{fill:none;stroke:var(--accent);stroke-width:.8;}

/* v7 (owner): Digital Employee = small robot, integrated in the pill (no ring); orange on hero cards */
.tmap--world .twn--ai .tai-bs{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tmap--world .twn--ai .tai-bf{fill:var(--accent);}
.tmap--world .twn--ai .tai-eye{transform-box:fill-box;transform-origin:center;animation:taiBlinkEye 5.5s ease-in-out infinite;}
.tmap--world .twn--ai.fire .tai-bs{stroke:#fb923c;}
.tmap--world .twn--ai.fire .tai-bf{fill:#fb923c;}
.tmap--world .twn--ai .tai-brain{filter:none;}
.tmap .tpop--card .tai-brain .tai-bs{fill:none;stroke:#fb923c;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.tmap .tpop--card .tai-brain .tai-bf{fill:#fdba74;}
@keyframes taiBlinkEye{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
@media (prefers-reduced-motion:reduce){.tmap--world .twn--ai .tai-eye{animation:none}}

/* The pill is a link to /digital-employees: hand cursor, orange on hover/focus. */
.htva .sec.hero svg.tmap--world g.twn--ai a.tai-link, .htva .sec.hero svg.tmap--world g.twn--ai a.tai-link .tai-pill { pointer-events: all !important; cursor: pointer !important; }
.tmap--world .twn--ai .tai-link:focus { outline: none; }
.tmap--world .twn--ai .tai-pill { transition: stroke .25s ease, fill .25s ease; }
.tmap--world .twn--ai .tai-link:hover .tai-pill, .tmap--world .twn--ai .tai-link:focus-visible .tai-pill { stroke: #fb923c; fill: rgba(249,115,22,.12); }
.tmap--world .twn--ai .tai-link:hover .tai-l, .tmap--world .twn--ai .tai-link:focus-visible .tai-l { fill: #fb923c; opacity: 1; }
.tmap--world .twn--ai .tai-link:hover .tai-bs, .tmap--world .twn--ai .tai-link:focus-visible .tai-bs { stroke: #fb923c; }
.tmap--world .twn--ai .tai-link:hover .tai-bf, .tmap--world .twn--ai .tai-link:focus-visible .tai-bf { fill: #fb923c; }

/* v43 (Codex #10): the pill's SVG is aria-hidden, so the real link for keyboard and screen-reader users is
   this text link in the hero copy (added by htva-talentmap.js). Visually hidden until it takes focus. */
.htva .tai-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.htva .tai-sr:focus,.htva .tai-sr:focus-visible{position:static;width:auto;height:auto;margin:14px 0 0;overflow:visible;clip-path:none;white-space:normal;
  display:inline-block;font:600 14px var(--f-mono);letter-spacing:.04em;color:var(--accent-ink,#fb923c);text-decoration:underline;
  text-underline-offset:3px;outline:2px solid #fb923c;outline-offset:4px;border-radius:4px;}


/* src/styles/htva-stats-v7-1.css */
/* src/styles/htva-stats-v7-1.css : recruiting panel overlap + v7 card merge and scroll counters (split out of htva-talentmap-ai-1.css, 2026-09-28) */

/* Same composition + scroll-driven recruiting-panel reveal as the live homepage (its head-snippet <style>,
   copied verbatim so /v7 behaves identically; the homepage keeps its own copy). */

/* Center the desktop composition within taller opening views without moving
   the hero boundary or the recruiting panel's existing overlap. The outer
   wrappers own this offset so the map's live parallax transforms remain intact. */
@media (min-width: 1024px) and (min-height: 760px) {
  .htva.htva .sec.hero:has(.tmap) {
    --htva-hero-drop: clamp(0px, calc((100svh - 760px) * .2), 64px);
  }
  .htva.htva .sec.hero:has(.tmap) > .wrap,
  .htva.htva .sec.hero > .tmap {
    translate: 0 var(--htva-hero-drop);
  }
}

/* Preserve the original hero geometry and -84px/-40px overlap.
   Wait for deliberate scrolling, assemble evenly, then finish the shared frame. */
.htva.htva .v2statsband .v2sb-panel {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .htva.htva .v2statsband .v2sb-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
    box-shadow: none !important;
  }
  .htva.htva .v2statsband .v2sb-copy {
    border-color: transparent;
    box-shadow: none !important;
  }
  .htva.htva .v2statsband .v2sb-row { border-radius: 22px 0 0 22px; overflow: hidden; }
  /* The stroke and shadow are separate layers: no stationary empty frame. */
  .htva.htva .v2statsband .v2sb-panel::before,
  .htva.htva .v2statsband .v2sb-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }
  .htva.htva .v2statsband .v2sb-panel::before {
    z-index: -1;
    box-shadow: var(--v4shadow);
  }
  .htva.htva .v2statsband .v2sb-panel::after {
    z-index: 2;
    border: 1px solid var(--v4line);
    box-shadow: inset 0 1px 0 var(--v4edge);
  }
  /* Existing scroll signal supplies the same linear fallback without new JS. */
  .htva.htva.js .v2statsband .v2sb-panel {
    --htva-enter: clamp(0, calc((var(--sy, 0) - 100) / 380), 1);
    --htva-frame: clamp(0, calc((var(--sy, 0) - 380) / 180), 1);
    opacity: clamp(0, calc((var(--sy, 0) - 100) / 80), 1) !important;
  }
  .htva.htva.js .v2statsband .v2sb-row {
    translate: calc(-96px + var(--htva-enter) * 96px) calc(18px - var(--htva-enter) * 18px);
  }
  .htva.htva.js .v2statsband .v2sb-copy {
    translate: calc(96px - var(--htva-enter) * 96px) calc(18px - var(--htva-enter) * 18px);
  }
  .htva.htva.js .v2statsband .v2sb-panel::after {
    opacity: var(--htva-frame);
    clip-path: inset(-1px calc(50% - var(--htva-frame) * 50%));
  }
  .htva.htva.js .v2statsband .v2sb-panel::before {
    opacity: clamp(0, calc((var(--sy, 0) - 450) / 110), 1);
  }
  @supports (animation-timeline: scroll(root block)) {
    /* These also work before JS starts and with JavaScript disabled. */
    .htva.htva .v2statsband .v2sb-panel {
      visibility: hidden;
      animation: htva-overlap-presence 1ms steps(1, end) both;
      animation-timeline: scroll(root block);
      animation-range: 100px 101px;
    }
    .htva.htva .v2statsband .v2sb-row {
      animation: htva-overlap-left 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 100px 480px;
    }
    .htva.htva .v2statsband .v2sb-copy {
      animation: htva-overlap-right 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 100px 480px;
    }
    .htva.htva .v2statsband .v2sb-panel::after {
      animation: htva-overlap-frame 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 380px 560px;
    }
    .htva.htva .v2statsband .v2sb-panel::before {
      animation: htva-overlap-shadow 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 450px 560px;
    }
  }
}
@keyframes htva-overlap-presence { from { visibility: hidden; } to { visibility: visible; } }
@keyframes htva-overlap-left {
  from { translate: -96px 18px; opacity: 0; }
  21% { opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes htva-overlap-right {
  from { translate: 96px 18px; opacity: 0; }
  21% { opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes htva-overlap-frame {
  from { clip-path: inset(-1px 50%); opacity: 0; }
  to { clip-path: inset(-1px 0%); opacity: 1; }
}
@keyframes htva-overlap-shadow { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .htva.htva .v2statsband .v2sb-row { border-radius: 22px 22px 0 0; }
}
.htva.htva .v2statsband .v2sb-panel:focus-within { visibility: visible !important; opacity: 1 !important; }
.htva.htva .v2statsband .v2sb-panel:focus-within > *,
.htva.htva .v2statsband .v2sb-panel:focus-within::before,
.htva.htva .v2statsband .v2sb-panel:focus-within::after {
  animation: none !important; translate: none !important; opacity: 1 !important; clip-path: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .htva.htva .v2statsband .v2sb-panel { visibility: visible !important; opacity: 1 !important; }
  .htva.htva .v2statsband .v2sb-panel > * { animation: none !important; translate: none !important; opacity: 1 !important; }
}

/* v7 only (scoped by the Digital Employee node): the recruiting panel assembles from SEPARATE pieces.
   Each portrait card flies in on its own (left / below / right) with rounded corners, then they merge into
   one strip; the copy card joins last. Numbers count with the scroll position (CSS counters, no script). */
@property --v2a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    .htva:has(.twn--ai) .v2statsband .v2sb-row { animation: none; translate: none; overflow: visible; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card { overflow: hidden; will-change: translate, scale;
      animation-timeline: scroll(root block); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1); animation-duration: 1ms; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(1) { animation-name: v7card1; animation-range: 90px 430px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(2) { animation-name: v7card2; animation-range: 130px 470px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(3) { animation-name: v7card3; animation-range: 170px 510px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-copy { animation-range: 230px 560px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-panel::after { animation-range: 500px 640px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-panel::before { animation-range: 540px 640px; }
    /* numbers follow the scroll: 0 to 500, 7 to 14, 1 to 2 */
    .htva:has(.twn--ai) .v2statsband .v2sb-card [data-v2count] { position: relative; color: transparent; counter-reset: v2n var(--v2a);
      animation-timeline: scroll(root block); animation-fill-mode: both; animation-duration: 1ms; animation-timing-function: linear; animation-range: 150px 560px; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card [data-v2count]::after { content: counter(v2n); position: absolute; left: 0; top: 0; color: #fff; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(1) [data-v2count] { animation-name: v7n500; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(2) [data-v2count] { animation-name: v7n14; }
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(3) [data-v2count] { animation-name: v7n2; }
  }
}
@keyframes v7card1 { from { translate: -170px 60px; rotate: -4deg; scale: .88; opacity: 0; border-radius: 18px; } 22% { opacity: 1; }
  to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; border-radius: 22px 0 0 22px; } }
@keyframes v7card2 { from { translate: 0 150px; scale: .88; opacity: 0; border-radius: 18px; } 22% { opacity: 1; }
  to { translate: 0 0; scale: 1; opacity: 1; border-radius: 0; } }
@keyframes v7card3 { from { translate: 170px 60px; rotate: 4deg; scale: .88; opacity: 0; border-radius: 18px; } 22% { opacity: 1; }
  to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; border-radius: 0; } }
@keyframes v7n500 { from { --v2a: 0; } to { --v2a: 500; } }
@keyframes v7n14 { from { --v2a: 7; } to { --v2a: 14; } }
@keyframes v7n2 { from { --v2a: 1; } to { --v2a: 2; } }
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    .htva:has(.twn--ai) .v2statsband .v2sb-card:nth-child(1) { animation-name: v7card2; }
  }
}


/* src/styles/htva-capacity-pages-1.css */
/* src/styles/htva-capacity-pages-1.css : the four capacity pages (/digital-employees, /human-talent,
   /global-recruiting, /how-it-works) + the chrome update (2026-09-28). Theme tokens only. */

/* chrome: seven header links fit from 900px up; footer gains a fifth column ("Ways to hire") */
@media (min-width: 901px) and (max-width: 1260px) {
  .htva.htva header.nav .nav__links { column-gap: 15px; }
  .htva.htva header.nav .nav__links a { font-size: 13.5px; }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .htva.htva header.nav .nav__links { column-gap: 11px; }
  .htva.htva header.nav .nav__links a { font-size: 12.5px; }
  .htva.htva header.nav .nav__in { column-gap: 16px; }
}
@media (min-width: 821px) {
  .htva .foot__grid:has(> div:nth-child(5)) { grid-template-columns: 1.4fr repeat(4, 1fr); column-gap: 28px; }
}

/* page hero: instrument lane on the right in place of a photo */
.htva .cap-kicker { margin-top: 34px; }
.htva .page-hero .rhero__media > .cap-lane { width: 100%; align-self: center; }
.htva .cap-lane .cpx-row { opacity: 1; transform: none; }
.htva .cap-lane--wide { max-width: 780px; margin-top: 36px; }

/* answer blocks, cards, quotes, links */
.htva .cap-answer { max-width: 72ch; margin-top: 18px; }
.htva .cap-answer p { color: var(--dim); font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.htva .cap-answer p strong { color: var(--text); }
.htva .cap-answer a, .htva .cap-cards a, .htva .steps a, .htva .cap-faq .a a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.htva .cap-cards { margin-top: 36px; }
.htva .cap-cards .card p { color: var(--dim); font-size: 15px; line-height: 1.6; margin-top: 10px; }
.htva .cap-quotes { margin-top: 36px; }
.htva .cap-more { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.htva .cap-center { justify-content: center; margin-top: 30px; }
.htva .cap-globe { margin-top: 0; }
.htva .feat li > span { min-width: 0; }

/* steps: an ordered list on one baseline; four steps get four columns on wide screens */
.htva ol.cap-steps { list-style: none; padding: 0; margin-top: 40px; }
.htva .cap-steps .step p { color: var(--dim); font-size: 15px; line-height: 1.6; margin-top: 8px; }
.htva .cap-steps .step .h3 { margin-top: 10px; }
@media (min-width: 1001px) { .htva .cap-steps:has(> li:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 801px) and (max-width: 1000px) { .htva .cap-steps:has(> li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }

/* FAQ questions are h3 inside the summary: keep the summary's own type */
.htva .cap-faq summary h3 { display: inline; font: inherit; margin: 0; color: inherit; letter-spacing: inherit; }

/* status table */
.htva .cap-table { margin-top: 32px; }
.htva .cap-table .rsc-table { min-width: 560px; }
.htva .cap-st { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.htva .cap-st--ea { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.htva .cap-st--dev { color: var(--text); border: 1px solid var(--panel-brd); }
.htva .cap-st--soon { color: var(--dim); border: 1px dashed var(--panel-brd); }

/* Vimeo testimonial montage (/testimonials hero) as a native embed: responsive 16:9 */
.htva .page-hero iframe[data-instatic-embed] { height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }

/* phones: highlighted phrases may wrap so nothing pushes the page sideways */
@media (max-width: 560px) {
  .htva .page-hero h1 .mk, .htva .sec .h2 .mk { white-space: normal; }
  .htva .cap-lane { padding: 16px 14px; }
  .htva .cap-lane .cpx-merge { gap: 6px; }
  .htva .cap-table .rsc-table { min-width: 0; width: 100%; table-layout: fixed; }   /* fits 390px; the long last row wraps */
  /* headers stay in the accessibility tree (visually hidden, not display:none); each cell carries data-label */
  .htva .cap-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .htva .cap-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--panel-brd); }
  /* grid rows can lose table semantics in some screen readers, so every cell also speaks its column name */
  .htva .cap-table td[data-label]::before { content: attr(data-label) ": "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .htva .cap-table td { border: 0; padding: 2px 4px; min-width: 0; }
  .htva .cap-table .rsc-table td, .htva .cap-table .rsc-table td * { white-space: normal; }   /* the site table rule sets nowrap */
  .htva .cap-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--dim); font-size: 13.5px; }
  .htva .cap-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}