@property --vm-n    { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --vm-glow { syntax: '<color>';   inherits: false; initial-value: rgba(224, 161, 58, 0); }

:root {
  --vm-ease-out:     cubic-bezier(.22, 1, .36, 1);
  --vm-ease-display: cubic-bezier(.16, 1, .3, 1);
  --vm-ease-inout:   cubic-bezier(.65, 0, .35, 1);
  --vm-ease-pop:     cubic-bezier(.34, 1.4, .64, 1);
  --vm-ease-sun:     cubic-bezier(.22, .61, .36, 1);
  --vm-ease-state:   cubic-bezier(.2, 0, 0, 1);
  --vm-t-press: 90ms;  --vm-t-state: 180ms;  --vm-t-card: 680ms;
  --vm-t-display: 950ms;  --vm-t-media: 1150ms;  --vm-t-shot: 1300ms;  --vm-t-sun: 2400ms;
  --vm-rise-s: 8px;  --vm-rise-m: 16px;  --vm-rise-l: 24px;  --vm-rise-xl: 40px;
  --vm-pine:  var(--primary, var(--pine, #1b5e3f));
  --vm-amber: var(--accent, var(--amber, #e0a13a));
  --vm-sun:   #f2c76b;
  --vm-terrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640'%3E%3Cdefs%3E%3CradialGradient id='v' gradientUnits='userSpaceOnUse' cx='840' cy='230' r='660'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='l' x2='0' y2='1'%3E%3Cstop offset='.6' stop-color='%23fff'/%3E%3Cstop offset='.97' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='b'%3E%3Crect width='1200' height='640' fill='url(%23l)'/%3E%3C/mask%3E%3Cmask id='m'%3E%3Crect width='1200' height='640' fill='url(%23v)' mask='url(%23b)'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' fill='none' stroke='%23f4f1e6' stroke-width='1.1' stroke-linejoin='round' vector-effect='non-scaling-stroke' d='M505 0Q499 17 489 24Q480 32 448 40Q417 48 409 52Q401 56 393 76Q385 96 376 104Q368 112 352 116Q336 120 293 117Q250 114 242 115Q234 116 229 118Q224 120 224 128Q224 136 233 157Q243 178 243 185Q242 193 239 197Q235 201 229 203Q222 206 194 210Q167 214 163 219Q160 224 164 232Q168 240 188 263Q208 286 216 303Q224 320 225 333Q225 346 215 364Q206 382 204 390Q203 398 206 411Q209 423 216 436Q223 449 232 459Q241 470 251 477Q262 484 311 503Q359 521 373 528Q387 535 399 544Q412 553 426 569Q440 584 447 597Q454 610 454 618Q453 626 446 633L438 640M601 0Q583 12 564 31Q545 50 509 69Q472 89 448 113Q425 137 393 153Q362 168 353 176Q343 184 331 208Q319 232 302 251Q284 270 280 280Q276 290 276 300Q276 310 280 338Q285 366 285 390Q285 414 291 427Q298 439 312 450Q326 461 372 484Q418 508 462 541Q505 574 529 583Q552 592 567 593Q582 595 594 594Q606 593 648 578Q690 562 708 560Q726 557 746 557Q766 557 792 561Q818 566 858 582Q897 599 915 603Q932 608 947 609Q962 610 1014 608Q1066 606 1133 617L1200 627M949 0Q1066 28 1077 33Q1089 38 1100 47Q1112 56 1125 72Q1137 87 1149 107Q1161 128 1165 141Q1169 154 1171 180Q1174 206 1187 229L1200 251M1200 389Q1180 302 1149 252Q1117 202 1112 188Q1107 174 1101 143Q1095 112 1084 96Q1072 80 1057 71Q1042 61 1020 53Q998 45 896 27Q794 9 752 9Q710 10 680 15Q650 20 638 26Q626 32 601 52Q576 72 544 88Q512 104 486 128Q459 153 432 169Q405 185 395 193Q385 201 369 228Q352 256 339 273Q326 290 322 304Q318 318 320 330Q321 342 326 356Q331 370 338 382Q345 395 355 406Q364 417 442 470Q519 522 536 530Q554 537 574 539Q594 540 646 534Q698 529 722 525Q745 521 776 513Q806 505 820 504Q834 503 853 507Q872 512 908 527Q944 543 965 550Q986 557 1021 562Q1056 568 1089 570Q1122 572 1135 570Q1148 568 1156 565Q1164 561 1182 538L1200 515M681 47Q679 47 669 52Q659 57 636 72Q612 87 577 103Q542 120 515 144Q487 168 460 184Q433 200 424 208Q415 216 390 259Q364 302 361 310Q358 318 358 331Q359 345 368 360Q376 376 392 391Q409 406 431 421Q454 435 496 459Q538 483 562 491Q586 500 608 503Q630 505 654 504Q678 503 695 500Q712 496 747 484Q781 472 806 471Q830 469 859 475Q887 481 929 499Q970 517 989 522Q1007 528 1029 531Q1050 534 1068 532Q1086 530 1097 525Q1108 519 1136 492Q1164 466 1168 458Q1173 450 1173 440Q1174 430 1169 416Q1165 402 1149 368Q1132 334 1120 296Q1108 258 1078 195Q1049 133 1042 122Q1034 111 1019 99Q1003 88 978 81Q954 73 854 58Q754 42 734 41Q714 41 698 43Q682 46 681 47zM737 72Q736 72 720 76Q703 79 678 91Q652 103 613 118Q574 133 543 158Q512 184 480 204Q448 224 440 236Q431 248 415 284Q399 320 399 331Q398 342 402 351Q406 361 421 376Q436 391 461 407Q486 423 518 440Q551 457 577 466Q602 474 618 476Q634 478 648 477Q662 477 710 463Q758 449 796 446Q834 444 868 448Q902 451 945 466Q987 480 1005 483Q1022 486 1035 483Q1048 480 1075 464Q1103 448 1111 439Q1119 431 1120 422Q1122 414 1118 399Q1113 384 1093 351Q1074 318 1071 308Q1069 298 1064 264Q1060 230 1053 212Q1045 194 1036 178Q1026 162 1009 144Q993 127 981 120Q970 114 957 109Q944 104 877 91Q810 77 774 75Q738 72 737 72zM769 104Q768 104 701 122Q634 140 618 146Q601 152 572 175Q543 198 513 215Q482 233 476 240Q469 247 465 254Q461 262 454 298Q447 334 448 342Q450 350 456 359Q462 369 483 384Q504 400 533 415Q562 430 582 436Q602 443 622 444Q642 445 684 437Q726 429 788 423Q850 417 890 410Q930 404 977 402Q1023 400 1032 397Q1040 393 1043 390Q1046 386 1046 376Q1046 366 1035 332Q1025 298 1026 270Q1027 242 1025 229Q1023 217 1018 203Q1012 190 1002 176Q991 162 974 149Q957 137 934 128Q910 118 872 112Q834 105 802 104Q770 104 769 104zM793 135Q791 136 729 149Q666 162 649 169Q631 175 605 195Q579 215 547 232Q516 249 508 260Q500 270 499 282Q498 294 502 310Q506 326 515 340Q524 353 539 364Q553 376 572 384Q591 393 610 397Q630 402 654 403Q678 404 716 403Q754 402 780 399Q806 396 878 377Q950 359 963 352Q976 345 981 334Q986 322 988 274Q990 226 988 216Q986 206 980 195Q975 185 966 176Q957 167 943 158Q930 150 914 144Q898 139 880 135Q862 132 844 132Q826 131 810 133Q794 135 793 135zM809 168Q808 168 761 176Q714 184 698 189Q682 194 671 201Q661 207 644 224Q626 240 596 255Q567 269 561 277Q555 286 556 296Q558 305 567 316Q576 328 588 336Q600 345 615 352Q631 360 646 365Q662 370 679 373Q696 376 715 376Q734 377 750 375Q766 374 840 353Q914 333 925 327Q936 320 941 309Q947 298 947 258Q948 218 945 210Q942 201 935 193Q928 184 917 178Q906 171 892 168Q878 164 862 163Q846 163 828 165Q810 168 809 168zM769 207Q767 208 752 212Q736 216 725 225Q714 233 705 257Q696 280 688 292Q680 304 679 308Q679 313 681 316Q682 319 692 324Q701 328 713 330Q726 331 786 325Q846 318 866 313Q886 307 895 298Q904 289 906 275Q907 262 902 246Q896 231 888 223Q881 215 867 210Q854 205 836 204Q818 203 794 205Q770 207 769 207z'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
  :root { --vm-rise-m: 12px; --vm-rise-l: 18px; --vm-rise-xl: 28px; }
}

@keyframes vm-rise    { from { opacity: .01; translate: 0 var(--vm-dist, var(--vm-rise-m)); } }
@keyframes vm-fade    { from { opacity: .01; } }
@keyframes vm-accent  { from { opacity: .01; filter: blur(5px); } }
@keyframes vm-media   { from { opacity: .01; translate: 0 var(--vm-rise-xl); scale: .985; } }
@keyframes vm-shot    { from { opacity: .01; translate: 0 var(--vm-rise-xl); scale: .985; rotate: x 7deg; } }
@keyframes vm-tilt-in { from { rotate: x 7deg; } }
@keyframes vm-settle  { from { scale: 1.045; } }
@keyframes vm-pop     { from { opacity: .01; scale: .55; } }
@keyframes vm-drop    { from { opacity: .01; translate: 0 -10px; } }
@keyframes vm-sun-dot { from { opacity: .01; translate: 0 6px; } }
@keyframes vm-blaze   { from { scale: 0 1; } }
@keyframes vm-unfurl  { from { scale: 0 1; } }
@keyframes vm-sunrise { from { opacity: .01; translate: 0 44px; } }
@keyframes vm-ping    { from { opacity: .55; scale: 1; } to { opacity: 0; scale: 2.8; } }
/* clip-path cannot interpolate to `none`, so wipes end on an inset that clips nothing */
@keyframes vm-draw    { from { clip-path: inset(-20% 100% -20% -20%); } to { clip-path: inset(-20% -20% -20% -20%); } }
@keyframes vm-draw-up { from { clip-path: inset(100% -20% -20% -20%); } to { clip-path: inset(-20% -20% -20% -20%); } }
@keyframes vm-terrain { from { opacity: .01; scale: 1.04; } }
@keyframes vm-count      { from { --vm-n: 0; opacity: 1; } to { --vm-n: var(--vm-to, 0); opacity: 1; } }
@keyframes vm-count-host { from, to { color: transparent; } }
@keyframes vm-tilt       { from { rotate: x var(--vm-tilt, 10deg); } to { rotate: x 0deg; } }
@keyframes vm-read       { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vm-read-head  { from { translate: calc(-100% + 10px) 0; opacity: 0; } 3% { opacity: 1; } 94% { scale: 1; } to { translate: 0 0; scale: 1.6; opacity: 1; } }
@keyframes vm-vt-out     { to { opacity: 0; } }
@keyframes vm-vt-in      { from { opacity: 0; translate: 0 8px; } }
@keyframes vm-vt-fade    { from { opacity: 0; } }

.darkband, .dark, .phead, .topbar:has(> .phero) { position: relative; isolation: isolate; }
.dark, .phead, .topbar:has(> .phero) { overflow: clip; }
.darkband { overflow-x: clip; }          /* never clip Y: the index screenshot overhangs the band by 150px */

:is(.darkband, .dark, .phead, .topbar:has(> .phero))::before,
:is(.darkband, .dark, .phead, .topbar:has(> .phero))::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
:is(.darkband, .dark, .phead, .topbar:has(> .phero))::before {
  background: var(--vm-terrain) right -90px top -70px / 1180px auto no-repeat;
  opacity: .09;
  --vm-sx: calc(100% - 310px); --vm-sy: 190px;
  transform-origin: var(--vm-sx) var(--vm-sy);
}
:is(.darkband, .dark, .phead, .topbar:has(> .phero))::after {
  top: -120px;
  background: radial-gradient(circle 380px at calc(100% - 200px) 216px,
              rgba(242, 199, 107, .30), rgba(224, 161, 58, .13) 42%, rgba(224, 161, 58, 0) 100%);
  transform-origin: calc(100% - 200px) 216px;
}
.topbar:has(> .phero) .phero::after { content: none; }
@media (max-width: 700px) {
  :is(.darkband, .dark, .phead, .topbar:has(> .phero))::before {
    background-size: 760px auto; background-position: right -150px top -40px;
    --vm-sx: calc(100% - 103px); --vm-sy: 125px;
  }
  :is(.darkband, .dark, .phead, .topbar:has(> .phero))::after {
    background: radial-gradient(circle 250px at calc(100% - 60px) 204px,
                rgba(242, 199, 107, .28), rgba(224, 161, 58, .12) 45%, rgba(224, 161, 58, 0) 100%);
    transform-origin: calc(100% - 60px) 204px;
  }
}
.left::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--vm-terrain) right -274px bottom -253px / 1180px auto no-repeat;
  opacity: .065;
}

.nav-links a.active { position: relative; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--vm-sun); pointer-events: none;
}

:is(main.gk, main.article, main.kit, article.wrap, .faqmain .fcat) > h2 { position: relative; }
:is(main.gk, main.article, main.kit, article.wrap, .faqmain .fcat) > h2::before {
  content: ""; position: absolute; left: 0; top: -15px; width: 30px; height: 3px; border-radius: 2px;
  background: var(--vm-amber); transform-origin: 0 50%; pointer-events: none;
}

.phead .trail { position: relative; }
.phead .trail::before {
  content: ""; position: absolute; pointer-events: none; height: 10px; top: -27px;
  left: calc((100% - 36px) / 6 - 5px); right: calc((100% - 36px) / 6 - 5px);
  background:
    radial-gradient(circle 4.5px at 5px 50%, var(--vm-amber) 92%, transparent),
    radial-gradient(circle 4.5px at 50% 50%, var(--vm-amber) 92%, transparent),
    radial-gradient(circle 4.5px at calc(100% - 5px) 50%, var(--vm-amber) 92%, transparent),
    radial-gradient(circle 1.4px, rgba(242, 199, 107, .7) 92%, transparent) 5px 50% / 9px 10px repeat-x;
}
@media (max-width: 980px) { .phead .trail::before { content: none; } }

.road .dot.prog { position: relative; }
.road .dot.prog::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--vm-amber);
  opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  :is(.darkband, .dark, .phead, .topbar:has(> .phero))::before {
    animation: vm-terrain 2600ms var(--vm-ease-sun) backwards;
  }
  :is(.darkband, .dark, .phead, .topbar:has(> .phero))::after {
    animation: vm-sunrise var(--vm-t-sun) var(--vm-ease-sun) backwards;
  }
  .left::after  { animation: vm-sunrise 2600ms var(--vm-ease-sun) 120ms backwards; }
  .left::before { animation: vm-fade 2400ms var(--vm-ease-sun) 300ms backwards; }
  :where(.brand .logo-mark circle) { animation: vm-sun-dot 1100ms var(--vm-ease-sun) 300ms backwards; }

  :where(.phero .crumbs)  { animation: vm-fade 600ms var(--vm-ease-out) backwards; }
  :where(.phero .eyebrow) { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 40ms backwards; }
  :where(.phero .vsline)  { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 100ms backwards; }
  :where(.phero h1)       { --vm-dist: var(--vm-rise-l); animation: vm-rise var(--vm-t-display) var(--vm-ease-display) 120ms backwards; }
  :where(.phero h1 + p)   { --vm-dist: var(--vm-rise-m); animation: vm-rise 900ms var(--vm-ease-out) 260ms backwards; }
  :where(.phero h1 em)    { animation: vm-accent 800ms var(--vm-ease-out) 360ms backwards; }
  :where(.phero .wrap > .btn, .phero .percompany) { --vm-dist: var(--vm-rise-s); animation: vm-rise 800ms var(--vm-ease-out) 380ms backwards; }

  :where(.darkband .hero h1)     { --vm-dist: var(--vm-rise-l); animation: vm-rise var(--vm-t-display) var(--vm-ease-display) 80ms backwards; }
  :where(.darkband .hero h1 em)  { animation: vm-accent 800ms var(--vm-ease-out) 340ms backwards; }
  :where(.darkband .hero .tag)   { --vm-dist: var(--vm-rise-s); animation: vm-rise 800ms var(--vm-ease-out) 240ms backwards; }
  :where(.darkband .hero .tag b) { animation: vm-accent 700ms var(--vm-ease-out) 540ms backwards; }
  :where(.darkband .hero .sub)   { --vm-dist: var(--vm-rise-m); animation: vm-rise 900ms var(--vm-ease-out) 320ms backwards; }
  :where(.darkband .hero .ctas)  { --vm-dist: var(--vm-rise-s); animation: vm-rise 800ms var(--vm-ease-out) 400ms backwards; }
  :where(.darkband .hero .fine)  { animation: vm-fade 700ms var(--vm-ease-out) 520ms backwards; }
  :where(.darkband .heroshot .browser) { animation: vm-media var(--vm-t-media) var(--vm-ease-display) 460ms backwards; }
  :where(.darkband .heroshot .shotcap) { animation: vm-fade 800ms var(--vm-ease-out) 900ms backwards; }

  @supports (animation-timeline: scroll()) {
    .darkband .heroshot { perspective: 1700px; }
    .darkband .heroshot .browser {
      transform-origin: 50% 100%;
      animation: vm-media var(--vm-t-media) var(--vm-ease-display) 460ms backwards, vm-tilt linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0px 70vh;
    }
  }

  .phead .trail::before { animation: vm-draw 1500ms var(--vm-ease-inout) 380ms backwards; }   /* (:where() can't hold a pseudo-element) */
  :where(.phead .trail > .tcard) { --vm-dist: var(--vm-rise-m); animation: vm-rise 900ms var(--vm-ease-display) 420ms backwards; }
  :where(.phead .trail > .tcard:nth-child(2)) { animation-delay: 520ms; }
  :where(.phead .trail > .tcard:nth-child(3)) { animation-delay: 620ms; }

  :where(.getit-card, .agendabar-card, .props-card, .dec-card, .verdict .box) {
    --vm-dist: var(--vm-rise-l); animation: vm-rise 1000ms var(--vm-ease-display) 420ms backwards;
  }
  :where(.dark ~ .grid > .card) { --vm-dist: var(--vm-rise-l); animation: vm-rise 1000ms var(--vm-ease-display) 420ms backwards; }
  :where(.dark ~ .grid > .card:nth-child(2)) { animation-delay: 500ms; }
  :where(.dark ~ .grid > .card:nth-child(3)) { animation-delay: 580ms; }
  :where(.dark ~ .grid > .card:nth-child(4)) { animation-delay: 660ms; }

  :where(.faq-toc a) { --vm-dist: var(--vm-rise-s); animation: vm-rise 560ms var(--vm-ease-out) 620ms backwards; }
  :where(.faq-toc a:nth-child(2)) { animation-delay: 655ms; }  :where(.faq-toc a:nth-child(3)) { animation-delay: 690ms; }
  :where(.faq-toc a:nth-child(4)) { animation-delay: 725ms; }  :where(.faq-toc a:nth-child(5)) { animation-delay: 760ms; }
  :where(.faq-toc a:nth-child(6)) { animation-delay: 795ms; }  :where(.faq-toc a:nth-child(7)) { animation-delay: 830ms; }

  :where(.props .prop) { --vm-dist: var(--vm-rise-s); animation: vm-rise 560ms var(--vm-ease-out) 640ms backwards; }
  :where(.props .prop:nth-child(2)) { animation-delay: 690ms; }  :where(.props .prop:nth-child(3)) { animation-delay: 740ms; }
  :where(.props .prop:nth-child(4)) { animation-delay: 790ms; }  :where(.props .prop:nth-child(5)) { animation-delay: 840ms; }
  :where(.dec-row) { --vm-dist: var(--vm-rise-s); animation: vm-rise 600ms var(--vm-ease-out) 640ms backwards; }
  :where(.dec-row + .dec-row) { animation-delay: 740ms; }

  :where(.agendabar) { animation: vm-draw 1350ms linear 620ms backwards; }
  :where(.agendabar-legend span) { animation: vm-fade 420ms var(--vm-ease-out) 620ms backwards; }
  :where(.agendabar-legend span:nth-child(2)) { animation-delay: 695ms; }
  :where(.agendabar-legend span:nth-child(3)) { animation-delay: 845ms; }
  :where(.agendabar-legend span:nth-child(4)) { animation-delay: 1070ms; }
  :where(.agendabar-legend span:nth-child(5)) { animation-delay: 1145ms; }
  :where(.agendabar-legend span:nth-child(6)) { animation-delay: 1820ms; }

  :where(.filters > span) { --vm-dist: var(--vm-rise-s); animation: vm-rise 600ms var(--vm-ease-out) 380ms backwards; }
  :where(.filters > span:nth-child(2)) { animation-delay: 420ms; }  :where(.filters > span:nth-child(3)) { animation-delay: 460ms; }
  :where(.filters > span:nth-child(4)) { animation-delay: 500ms; }  :where(.filters > span:nth-child(5)) { animation-delay: 540ms; }
  :where(.featured-row > .featured) { --vm-dist: var(--vm-rise-l); animation: vm-rise 1000ms var(--vm-ease-display) 560ms backwards; }
  :where(.featured-row > .featured + .featured) { animation-delay: 640ms; }

  :where(.toggle-wrap) { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 420ms backwards; }
  :where(.tiers > .tier) { --vm-dist: 18px; animation: vm-rise 1000ms var(--vm-ease-display) 500ms backwards; }
  :where(.tiers > .tier:nth-child(2)) { --vm-dist: 30px; animation-delay: 590ms; }
  :where(.tiers > .tier:nth-child(3)) { --vm-dist: 42px; animation-delay: 680ms; }
  :where(.tiers .pop-tag) { animation: vm-drop 700ms var(--vm-ease-pop) 1150ms backwards; }

  :where(.left .in > .eyebrow) { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 40ms backwards; }
  :where(.left .in > h1)       { --vm-dist: var(--vm-rise-l); animation: vm-rise var(--vm-t-display) var(--vm-ease-display) 100ms backwards; }
  :where(.left .in > h1 em)    { animation: vm-accent 800ms var(--vm-ease-out) 340ms backwards; }
  :where(.left .in > .sub)     { --vm-dist: var(--vm-rise-m); animation: vm-rise 900ms var(--vm-ease-out) 240ms backwards; }
  :where(.left .expect > li)   { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 380ms backwards; }
  :where(.left .expect > li:nth-child(2)) { animation-delay: 460ms; }
  :where(.left .expect > li:nth-child(3)) { animation-delay: 540ms; }
  :where(.left .expect > li:nth-child(4)) { animation-delay: 620ms; }
  :where(.left .expect .tick svg) { animation: vm-draw 520ms var(--vm-ease-inout) 560ms backwards; }
  :where(.left .expect > li:nth-child(2) .tick svg) { animation-delay: 640ms; }
  :where(.left .expect > li:nth-child(3) .tick svg) { animation-delay: 720ms; }
  :where(.left .expect > li:nth-child(4) .tick svg) { animation-delay: 800ms; }
  :where(.left .qt) { --vm-dist: var(--vm-rise-s); animation: vm-rise 800ms var(--vm-ease-out) 760ms backwards; }

  :where(body > main > .card) { --vm-dist: 12px; animation: vm-rise 900ms var(--vm-ease-display) backwards; }
  :where(body > main > .card > *) { --vm-dist: var(--vm-rise-s); animation: vm-rise 700ms var(--vm-ease-out) 120ms backwards; }
  :where(body > main > .card > :nth-child(2)) { animation-delay: 180ms; }
  :where(body > main > .card > :nth-child(3)) { animation-delay: 240ms; }
  :where(body > main > .card > :nth-child(4)) { animation-delay: 300ms; }
  :where(body > main > .card > :nth-child(n+5)) { animation-delay: 360ms; }
  :where(.card .flag svg path:first-child) { animation: vm-draw-up 520ms var(--vm-ease-inout) 380ms backwards; }
  :where(.card .flag svg path:last-child) {
    transform-box: fill-box; transform-origin: 0 50%;
    animation: vm-unfurl 700ms var(--vm-ease-pop) 820ms backwards;
  }
  :where(.card .next li .tick svg) { animation: vm-draw 480ms var(--vm-ease-inout) 900ms backwards; }
  :where(.card .next li:nth-child(2) .tick svg) { animation-delay: 980ms; }
  :where(.card .next li:nth-child(3) .tick svg) { animation-delay: 1060ms; }
  :where(.card .mail svg path) { animation: vm-draw 620ms var(--vm-ease-inout) 520ms backwards; }

  html.vm-on .vm-r.vm-in {
    animation: var(--vm-k, vm-rise) var(--vm-t, var(--vm-t-card)) var(--vm-e, var(--vm-ease-out)) var(--vm-d, 0ms) backwards;
  }
  .vm-head  { --vm-dist: var(--vm-rise-l); --vm-t: var(--vm-t-display); --vm-e: var(--vm-ease-display); }
  .vm-card  { --vm-dist: var(--vm-rise-m); }
  .vm-band  { --vm-dist: var(--vm-rise-l); --vm-t: var(--vm-t-display); --vm-e: var(--vm-ease-display); }
  .vm-media { --vm-k: vm-media; --vm-t: var(--vm-t-media); --vm-e: var(--vm-ease-display); }
  .vm-shot  { --vm-k: vm-shot;  --vm-t: var(--vm-t-shot);  --vm-e: var(--vm-ease-display); transform-origin: 50% 100%; }
  .vm-row   { --vm-k: vm-fade;  --vm-t: 520ms; }
  .vm-pop   { --vm-k: vm-pop;   --vm-t: 560ms; --vm-e: var(--vm-ease-pop); }

  .feature > .wrap, .step-sec .srow > div:not(.stext), .kit .shotfig { perspective: 1600px; }
  html.vm-on .step-sec .srow > div.vm-in > .browser,
  html.vm-on .kit .shotfig.vm-in img {
    transform-origin: 50% 100%;
    animation: vm-tilt-in var(--vm-t-shot) var(--vm-ease-display) var(--vm-d, 0ms) backwards;
  }
  html.vm-on .step-sec .srow > div.vm-in > .subshot {
    --vm-dist: var(--vm-rise-m); animation: vm-rise var(--vm-t-card) var(--vm-ease-out) calc(var(--vm-d, 0ms) + 200ms) backwards;
  }
  .vm-in.shotframe img { animation: vm-settle 1600ms var(--vm-ease-out) var(--vm-d, 0ms) backwards; }

  .tiers > .tier.vm-r:nth-child(2) { --vm-dist: 30px; }
  .tiers > .tier.vm-r:nth-child(3) { --vm-dist: 42px; }
  .values > .value.vm-r:nth-child(1) { --vm-dist: 12px; }  .values > .value.vm-r:nth-child(2) { --vm-dist: 18px; }
  .values > .value.vm-r:nth-child(3) { --vm-dist: 24px; }  .values > .value.vm-r:nth-child(4) { --vm-dist: 30px; }
  .values > .value.vm-r:nth-child(5) { --vm-dist: 36px; }  .values > .value.vm-r:nth-child(6) { --vm-dist: 42px; }

  .vm-in.fhead .badge     { animation: vm-pop 560ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 60ms) backwards; }
  .vm-in.fpoint .tick svg { animation: vm-draw 520ms var(--vm-ease-inout) calc(var(--vm-d, 0ms) + 240ms) backwards; }
  .vm-in.stext .snum .dot, .vm-in.acc .mark { animation: vm-pop 560ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 160ms) backwards; }
  .vm-in.acc .mark { transform-origin: 9px 50%; }
  .vm-in.value .lt { animation: vm-pop 620ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 140ms) backwards; }
  .vm-in.stext .checks li .ck { animation: vm-pop 480ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 320ms) backwards; }
  .vm-in.stext .checks li:nth-child(2) .ck { animation-delay: calc(var(--vm-d, 0ms) + 390ms); }
  .vm-in.stext .checks li:nth-child(3) .ck { animation-delay: calc(var(--vm-d, 0ms) + 460ms); }
  .vm-in.stext .checks li:nth-child(4) .ck { animation-delay: calc(var(--vm-d, 0ms) + 530ms); }
  .service ul.vm-in li .m { animation: vm-pop 480ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 200ms) backwards; }
  .service ul.vm-in li:nth-child(2) .m { animation-delay: calc(var(--vm-d, 0ms) + 290ms); }
  .service ul.vm-in li:nth-child(3) .m { animation-delay: calc(var(--vm-d, 0ms) + 380ms); }
  .service ul.vm-in li:nth-child(4) .m { animation-delay: calc(var(--vm-d, 0ms) + 470ms); }
  .service ul.vm-in li:nth-child(5) .m { animation-delay: calc(var(--vm-d, 0ms) + 560ms); }
  .ngrid > .n.hot.vm-in .big { --vm-dist: 10px; animation: vm-rise 700ms var(--vm-ease-out) calc(var(--vm-d, 0ms) + 1000ms) backwards; }
  .vm-in.pair .kr.good { animation: vm-draw 700ms var(--vm-ease-inout) calc(var(--vm-d, 0ms) + 260ms) backwards; }
  .vm-in.tabcard .tabnum { animation: vm-pop 560ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 120ms) backwards; }
  .vm-in.rcol .ritem .dot { animation: vm-pop 420ms var(--vm-ease-pop) calc(var(--vm-d, 0ms) + 240ms) backwards; }
  .vm-in.rcol .dot.prog::after { animation: vm-ping 1600ms var(--vm-ease-out) calc(var(--vm-d, 0ms) + 760ms) 2 backwards; }
  .vm-in.news::after, .vm-in.ctaband::after { animation: vm-sunrise var(--vm-t-sun) var(--vm-ease-sun) calc(var(--vm-d, 0ms) + 120ms) backwards; }
  .vm-in.news h2 em, .vm-in.ctaband h2 em, .vm-in.closer h3 em { animation: vm-accent 800ms var(--vm-ease-out) calc(var(--vm-d, 0ms) + 360ms) backwards; }

  .vm-w.vm-in::before { animation: vm-blaze 700ms var(--vm-ease-out) 120ms backwards; }
  footer .logo-mark.vm-w.vm-in circle { animation: vm-sun-dot 1300ms var(--vm-ease-sun) 300ms backwards; }
  .faqmain .fcat:target > h2::before { animation: vm-blaze 900ms var(--vm-ease-out) 250ms backwards; }

  .vm-count { position: relative; }
  .vm-count::after {
    content: counter(vm-n); content: counter(vm-n) / "";
    counter-reset: vm-n var(--vm-n);
    position: absolute; inset: 0; color: var(--vm-c); opacity: 0; pointer-events: none;
  }
  .vm-in .vm-count        { animation: vm-count-host var(--vm-cd, 1200ms) linear calc(var(--vm-d, 0ms) + 150ms) backwards; }
  .vm-in .vm-count::after { animation: vm-count var(--vm-cd, 1200ms) var(--vm-ce, var(--vm-ease-out)) calc(var(--vm-d, 0ms) + 150ms) backwards; }

  .btn {
    transition: transform .15s ease, box-shadow .2s ease,
                translate var(--vm-t-state) var(--vm-ease-state), scale var(--vm-t-press) var(--vm-ease-state),
                background-color var(--vm-t-state) ease, color var(--vm-t-state) ease, border-color var(--vm-t-state) ease;
  }
  .btn:active { translate: 0 0; scale: .97; transition-duration: 60ms; }
  .foot-signin, .foot-signup {
    transition: border-color .15s, color .15s, background-color var(--vm-t-state) ease,
                translate var(--vm-t-state) var(--vm-ease-state), scale var(--vm-t-press) var(--vm-ease-state);
  }
  .foot-signin:active, .foot-signup:active { scale: .97; transition-duration: 60ms; }
  .cmp-card, .dark ~ .grid > a.card, a.relcard {
    transition: translate 260ms var(--vm-ease-out), border-color var(--vm-t-state) ease, --vm-glow 320ms ease;
  }
  a.rescard { transition: transform .2s ease, translate 260ms var(--vm-ease-out), --vm-glow 320ms ease; }
  .cmp-card .cmp-go, .dark ~ .grid > a.card .go, a.rescard .go { transition: translate 260ms var(--vm-ease-out); }
  :is(.cmp-card, .dark ~ .grid > a.card, a.relcard, a.rescard):active { scale: .99; transition-duration: 60ms; }

  @media (hover: hover) and (pointer: fine) {
    /* .btn-primary / .btn-demo already lift with `transform` on some pages — don't double it */
    .btn:not(.btn-primary):not(.btn-demo):hover { translate: 0 -2px; }
    .btn:not(.btn-primary):not(.btn-demo):hover:active { translate: 0 0; }
    .foot-signin:hover, .foot-signup:hover { translate: 0 -1px; }
    .cmp-card:hover, .dark ~ .grid > a.card:hover, a.relcard:hover { translate: 0 -3px; }
    .cmp-card:hover .cmp-go, .dark ~ .grid > a.card:hover .go, a.rescard:hover .go { translate: 3px 0; }
    .cmp-card, .dark ~ .grid > a.card, a.relcard, a.rescard {
      background-image: radial-gradient(320px circle at var(--vm-mx, 50%) var(--vm-my, 0px),
                        var(--vm-glow, rgba(224, 161, 58, 0)), rgba(224, 161, 58, 0) 72%);
    }
    .cmp-card:hover, .dark ~ .grid > a.card:hover, a.relcard:hover, a.rescard:hover { --vm-glow: rgba(224, 161, 58, .10); }
    :is(.nav-links, .nlinks) a { position: relative; }
    :is(.nav-links, .nlinks) a:not(.active)::after {
      content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px;
      border-radius: 50%; background: var(--vm-sun); pointer-events: none;
      scale: 0; transition: scale 260ms var(--vm-ease-pop);
    }
    :is(.nav-links, .nlinks) a:not(.active):hover::after { scale: .8; }
  }

  .mnav-panel.open { animation: vm-fade 220ms var(--vm-ease-out); }
  .mnav-panel.open .mnav-links a { --vm-dist: 6px; animation: vm-rise 380ms var(--vm-ease-out) backwards; }
  .mnav-panel.open .mnav-links a:nth-child(2) { animation-delay: 25ms; }   .mnav-panel.open .mnav-links a:nth-child(3) { animation-delay: 50ms; }
  .mnav-panel.open .mnav-links a:nth-child(4) { animation-delay: 75ms; }   .mnav-panel.open .mnav-links a:nth-child(5) { animation-delay: 100ms; }
  .mnav-panel.open .mnav-links a:nth-child(6) { animation-delay: 125ms; }  .mnav-panel.open .mnav-links a:nth-child(7) { animation-delay: 150ms; }
  .mnav-panel.open .mnav-ctas { --vm-dist: 6px; animation: vm-rise 380ms var(--vm-ease-out) 180ms backwards; }

  .toggle.vm-thumb::before { transition: clip-path 360ms var(--vm-ease-out); }

  @supports (animation-timeline: view()) and (timeline-scope: --vm-read) {
    html.vm-long body { timeline-scope: --vm-read; }
    html.vm-long :is(body > main, body > article.wrap) { view-timeline: --vm-read block; }
    html.vm-long body::before, html.vm-long body::after {
      content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 60; pointer-events: none;
      animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --vm-read; animation-range: contain 0% contain 100%;
    }
    html.vm-long body::before {
      height: 3px; animation-name: vm-read;
      background: linear-gradient(90deg, #1b5e3f, #2f7d57 55%, #c99232 85%, #e0a13a);
    }
    html.vm-long body::after {
      height: 9px; top: -3px; animation-name: vm-read-head; opacity: 0;
      background: radial-gradient(circle 4.5px at calc(100% - 4.5px) 50%, var(--vm-sun) 80%, rgba(242, 199, 107, 0));
      transform-origin: calc(100% - 4.5px) 50%;
    }
  }

  @view-transition { navigation: auto; }
  @supports (view-transition-name: none) {
    :where(.topbar, .darkband, body > .dark, header.phead) { view-transition-name: vm-band; }
    :where(.darkband > nav, body > .dark > nav, .topbar nav.nav, header.phead nav.nav, body > nav) { view-transition-name: vm-nav; }
  }
  ::view-transition-group(vm-band) { animation-duration: 460ms; animation-timing-function: var(--vm-ease-out); overflow: clip; }
  ::view-transition-old(vm-band), ::view-transition-new(vm-band) { height: 100%; object-fit: none; object-position: 50% 0; mix-blend-mode: normal; }
  ::view-transition-new(vm-band) { animation: none; }
  ::view-transition-old(vm-band) { z-index: 1; animation: 180ms cubic-bezier(.4, 0, 1, 1) both vm-vt-out; }
  ::view-transition-new(vm-band):only-child { animation: 300ms var(--vm-ease-out) both vm-vt-fade; }
  ::view-transition-group(vm-nav) { animation-duration: 460ms; animation-timing-function: var(--vm-ease-out); }
  ::view-transition-old(vm-nav), ::view-transition-new(vm-nav) { height: 100%; object-fit: none; object-position: 50% 0; mix-blend-mode: normal; animation: none; }
  ::view-transition-old(vm-nav) { opacity: 0; }
  ::view-transition-old(root) { animation: 150ms cubic-bezier(.4, 0, 1, 1) both vm-vt-out; }
  ::view-transition-new(root) { animation: 320ms var(--vm-ease-out) 110ms both vm-vt-in; }
}

html.vm-on .vm-r:not(.vm-in) { opacity: .001; animation: none; }
html.vm-on .vm-r.vm-in.vm-now { animation: none; }
.vm-dealt { animation: none; }
html.vm-on .vm-w:not(.vm-in)::before { scale: 0 1; }
html.vm-on footer .logo-mark.vm-w:not(.vm-in) circle { opacity: .001; translate: 0 6px; }

@media (hover: hover) and (pointer: fine) {
  a.relcard:hover { border-color: var(--vm-pine); }
  .foot-signin:hover { background-color: color-mix(in srgb, var(--vm-pine) 7%, transparent); }
}

.toggle.vm-thumb { position: relative; isolation: isolate; }
.toggle.vm-thumb::before {
  content: ""; position: absolute; inset: var(--vm-tp, 5px); z-index: -1; pointer-events: none;
  border-radius: 999px; background: var(--vm-pine);
  clip-path: inset(0 var(--vm-tr, 0px) 0 var(--vm-tl, 0px) round 999px);
}
.toggle.vm-thumb button.on { background: transparent; }

html.vm-js .calendly-inline-widget { position: relative; isolation: isolate; }
html.vm-js .calendly-inline-widget::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid var(--border, #e2ded0); border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 29 L17 15 L22 23 L27 13 L34 29 Z' fill='%231b5e3f' fill-opacity='.14'/%3E%3Ccircle cx='30' cy='10' r='2.4' fill='%23e0a13a' fill-opacity='.55'/%3E%3C/svg%3E") 50% 38% / 56px 56px no-repeat,
    var(--surface, #fff);
  transition: opacity 400ms ease;
}
html.vm-js .calendly-inline-widget.vm-cal-ready::before { opacity: 0; }

/* nicer rag in body copy (balance was tested and rejected: it amplifies font-swap shifts) */
:is(main, article, section) :is(p, li) { text-wrap: pretty; }

/* keyboard focus you can see, on cream and on pine (zero specificity: page rings win) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--vm-ring, #1b5e3f); outline-offset: 3px; }
:where(.topbar, .darkband, .dark, .phead, .service, .cred, .accban, .news, .closer, .left, .mnav-panel, .template-card) { --vm-ring: #f2c76b; }
:where(body:has(> .topbar) .ctaband) { --vm-ring: #f2c76b; }

::selection { background: #f7e7c8; color: #1e2a26; }
:where(.darkband, .dark, .phead, .topbar, .left, .news, .closer, .service, .cred, .accban) ::selection { background: rgba(242, 199, 107, .38); color: #fff; }

:where([id]) { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

:where(.darkband .heroshot .browser > img, .step-sec .browser .view img) { aspect-ratio: auto 16 / 10; }
:where(.shotfig img) { aspect-ratio: auto 2784 / 1704; height: auto; }

/* Real specificity on purpose: these pages carry a{color:inherit}, which would beat :where(). */
.phead .nav-cta .btn-amber { background: #e0a13a; color: #3a2a08; box-shadow: 0 10px 24px -10px rgba(160, 110, 20, .5); }
.closer .btn-cream { background: #f4f1e6; color: #123f2d; }
main.article a.inline:not([style]) { color: var(--primary, #1b5e3f); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  :where(.btn, .foot-signin, .foot-signup, .cmp-card, .dark ~ .grid > a.card, a.relcard, a.rescard) { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  html.vm-on .vm-r { opacity: 1 !important; }
  html.vm-on .vm-w::before { scale: none !important; }
  html.vm-on footer .logo-mark circle { opacity: 1 !important; translate: none !important; }
}
@media print {
  html.vm-on .vm-r { opacity: 1 !important; }
  html.vm-on .vm-w::before { scale: none !important; }
  html.vm-on footer .logo-mark circle { opacity: 1 !important; translate: none !important; }
  html.vm-long body::before, html.vm-long body::after { display: none !important; }
  .darkband .heroshot .browser { rotate: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .toggle.vm-thumb::before { content: none; }
  .toggle.vm-thumb button.on { background: ButtonText; color: ButtonFace; }
  html.vm-js .calendly-inline-widget::before { content: none; }
}

.foot-legal { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.foot-legal:hover { text-decoration-color: currentColor; }