/* valetax-hero-20261006.css - homepage hero, desktop/tablet >=992px only (valetax.com/id-style layout).
   CSS-only re-layout: no text, link or DOM-order change. Mobile (<992px) is untouched
   (the only <992 rule neutralises the optional H1 highlight span so mobile renders exactly as before). */

@media (min-width: 992px) {
  html body:not(#vtx) main .home-banner > .box-center{--vt-hs-h:108px;--vt-hs-gap:78px;position:relative!important}

  /* left column: H1 -> paragraph -> CTAs + disclaimer -> small text-link row (CSS order only) */
  html body:not(#vtx) main .home-banner .home-banner__column--descr{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  html body:not(#vtx) main .home-banner .home-banner__column--descr > h1{order:1}
  html body:not(#vtx) main .home-banner .home-banner__column--descr > p{order:2}
  html body:not(#vtx) main .home-banner .home-banner__links{order:3}
  html body:not(#vtx) main .home-banner .hero-trust-inline{order:4}
  html body:not(#vtx) main .home-banner .hero-trust-strip{order:5}

  /* the 4 pill links -> one quiet row of underlined text links under the disclaimer.
     Separator dots sit in the gap before every link; the nav is shifted 25px left and clip-path hides its first 18px
     strip, so a dot never shows at the start of a line even if the row wraps (zoom / fallback font). */
  html body:not(#vtx) main .home-banner .hero-trust-inline{display:flex!important;flex-wrap:wrap!important;align-items:center!important;grid-template-columns:none!important;gap:2px 0!important;width:auto!important;max-width:585px!important;margin:14px 0 0 -25px!important;padding:0!important;clip-path:inset(-8px -8px -8px 18px)}
  html body:not(#vtx) main .home-banner .hero-trust-inline a{position:relative!important;display:inline-flex!important;align-items:center!important;width:auto!important;min-height:0!important;height:auto!important;margin:0 0 0 25px!important;padding:4px 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;color:#137a43!important;font-size:14px!important;font-weight:600!important;line-height:20px!important;letter-spacing:0!important;white-space:nowrap!important;text-align:left!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;text-decoration-color:rgba(19,122,67,.35)!important}
  html body:not(#vtx) main .home-banner .hero-trust-inline a::before{content:"";position:absolute;left:-14.5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#a2a6ad;pointer-events:none}
  html body:not(#vtx) main .home-banner .hero-trust-inline a:hover,
  html body:not(#vtx) main .home-banner .hero-trust-inline a:focus-visible{color:#141921!important;background:none!important;text-decoration-color:currentColor!important}
  html body:not(#vtx) main .home-banner .hero-trust-inline a:focus-visible{outline:2px solid #141921!important;outline-offset:1px!important}

  /* reserve the bottom slot of the grey card (same geometry as valetax.com: 78px air + 108px row) */
  html body:not(#vtx) main .home-banner .home-banner__info-wrap{display:block!important;box-sizing:border-box!important;width:100%!important;padding:0!important;margin:0!important;height:calc(var(--vt-hs-gap) + var(--vt-hs-h))!important}

  /* our 4 stat boxes -> one row of 4 white icon cards along the bottom of the card */
  html body:not(#vtx) main .home-banner .hero-stats{position:absolute!important;left:16px!important;right:16px!important;top:auto!important;bottom:30px!important;z-index:1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:auto!important;max-width:none!important;height:var(--vt-hs-h)!important;margin:0!important;padding:0!important}
  html body:not(#vtx) main .home-banner .hero-stat{display:grid!important;grid-template-columns:60px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:15px!important;row-gap:6px!important;align-content:center!important;align-items:center!important;box-sizing:border-box!important;height:100%!important;min-width:0!important;min-height:0!important;padding:20px 30px!important;background:#fff!important;border:0!important;border-radius:15px!important;box-shadow:none!important;text-align:left!important}
  html body:not(#vtx) main .home-banner .hero-stat::before{content:"";display:block;grid-column:1;grid-row:1 / span 2;width:60px;height:60px;border-radius:50%;background-color:#e5f6ec;background-position:center;background-repeat:no-repeat;background-size:28px 28px}
  html body:not(#vtx) main .home-banner .hero-stat h4{grid-column:2;grid-row:1;align-self:end;margin:0!important;max-width:100%!important;color:#141921!important;font-size:21px!important;font-weight:600!important;line-height:30px!important;letter-spacing:0!important;white-space:nowrap!important;text-align:left!important;text-transform:none!important;text-shadow:none!important}
  html body:not(#vtx) main .home-banner .hero-stat p{grid-column:2;grid-row:2;align-self:start;margin:0!important;max-width:none!important;color:#4b5563!important;font-size:16px!important;font-weight:400!important;line-height:20px!important;white-space:nowrap!important;text-align:left!important}
  html body:not(#vtx) main .home-banner .hero-stat:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129a4c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h6M6 9l3 3-3 3M21.5 12h-6M18 9l-3 3 3 3M12 5.5v13'/%3E%3C/svg%3E")}
  html body:not(#vtx) main .home-banner .hero-stat:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129a4c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M6 6.5l9.6-2.7a1.5 1.5 0 0 1 1.9 1.1l.4 1.6'/%3E%3Cpath d='M21 11h-3.5a2 2 0 0 0 0 4H21'/%3E%3C/svg%3E")}
  html body:not(#vtx) main .home-banner .hero-stat:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129a4c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12.5' rx='2'/%3E%3Cpath d='M8.5 20h7M12 16.5V20'/%3E%3Cpath d='M6.5 12.5l3.2-3.2 2.6 2.4 4.7-4.7'/%3E%3C/svg%3E")}
  html body:not(#vtx) main .home-banner .hero-stat:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129a4c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Ccircle cx='16.75' cy='16.75' r='3.25'/%3E%3C/svg%3E")}

  /* optional: green highlight on existing H1 words (markup-only span, text unchanged) */
  html body:not(#vtx) main .home-banner h1 .vt-hl{color:#129a4c!important}
}

/* 1024-1279px (two-column, narrow): scale the phone image a bit so it never runs under the H1/paragraph */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html body:not(#vtx) main .home-banner .home-banner__column--img img{width:min(624.562px, calc((100vw - 80px) * .55))!important;height:auto!important}
}

/* 992-1279px: narrower card -> slightly smaller icon/padding so values never wrap */
@media (min-width: 992px) and (max-width: 1279.98px) {
  html body:not(#vtx) main .home-banner .hero-stat{grid-template-columns:52px minmax(0,1fr)!important;column-gap:12px!important;padding:18px 20px!important}
  html body:not(#vtx) main .home-banner .hero-stat::before{width:52px;height:52px;background-size:26px 26px}
  html body:not(#vtx) main .home-banner .hero-stat h4{font-size:20px!important;line-height:28px!important}
  html body:not(#vtx) main .home-banner .hero-stat p{font-size:15px!important}
}

/* <992px: keep the mobile/tablet hero exactly as before (neutralise the theme's green "h1 span" colour) */
@media (max-width: 991.98px) {
  html body:not(#vtx) .home-banner h1 .vt-hl{color:inherit!important}
}