.hw-rating, .hr { display: none; }
@media (min-width: 1025px) {
    .hw.hw-r .hero-social-proof { display: none; }
    .hw.hw-r .hw-in { width: min(560px, 40vw); }

    .hw-rating { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; padding: .45rem .9rem .45rem .55rem; border-radius: 999px;
        background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; text-decoration: none;
        font: 600 .8rem Montserrat, sans-serif; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: hwIn 1.1s cubic-bezier(.3, .8, .3, 1) .45s both;
        transition: background-color .3s; }
    .hw-rating:hover { background: rgba(255, 255, 255, .18); }
    .hw-rating svg { width: 18px; height: 18px; }
    .hw-rating b { font-size: .95rem; }
    .hw-rating span { color: #ffc94a; letter-spacing: 1px; font-size: .78rem; }
    .hw-rating small { color: #cfe8f8; font-size: .74rem; }

    .hr { display: block; position: absolute; z-index: 2;
        right: clamp(64px, 6.5vw, 130px); top: max(104px, calc(12 * var(--vhz, 1vh))); width: min(600px, 41vw); height: min(560px, calc(60 * var(--vhz, 1vh))); }
    .hr-v { position: absolute; inset: 0 0 22px; display: flex; flex-direction: column; align-items: center;
        opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
    .hr-v.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease .1s, visibility 0s; }

    .hr-art { position: relative; width: 100%; flex: 1; min-height: 0; }
    .hr-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .hr-l { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hrDraw var(--t, 1s) cubic-bezier(.45, .05, .3, 1) var(--d, 0s) forwards; }
    @keyframes hrDraw { to { stroke-dashoffset: 0; } }
    .hr-h { stroke: rgba(255, 255, 255, .78); stroke-width: 1.4; }
    .hr-h2 { stroke: rgba(255, 255, 255, .42); stroke-width: 1; }
    .hr-t { stroke: rgba(255, 255, 255, .55); stroke-width: 1.1; }
    .hr-t2 { stroke: rgba(255, 255, 255, .26); stroke-width: .9; }
    .hr-p { stroke: #fff; stroke-width: 2; }
    .hr-p2 { stroke: rgba(255, 255, 255, .7); stroke-width: 1.1; }
    .hr-pi { stroke: rgba(255, 255, 255, .6); stroke-width: 1.1; }
    .hr-q { stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; }
    .hr-q2 { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
    .hr-w { stroke: #9ff0ff; stroke-width: 1.4; }
    .hr-pp { stroke: rgba(255, 255, 255, .42); stroke-width: 4.2; }
    .hr-flow { fill: none; stroke: #b9f6ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .03 .09; opacity: 0;
        animation: hrFade .6s ease forwards, hrFlow 1.5s linear infinite; }
    @keyframes hrFlow { to { stroke-dashoffset: -.12; } }
    .hr-rip { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center;
        animation: hrRip 2.6s ease-out infinite; }
    @keyframes hrRip { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
    .hr-c { stroke: #8fe0ff; stroke-width: 1.1; }
    .hr-cote { font: 600 12px Montserrat, sans-serif; fill: #8fe0ff; text-anchor: middle; opacity: 0; animation: hrFade .6s ease 3.3s forwards; }
    .hr-water { mix-blend-mode: screen; }
    .hr-caus path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; animation: hrCaus 5s ease-in-out infinite alternate; }
    @keyframes hrCaus { from { transform: translateX(-22px); } to { transform: translateX(14px); } }
    @keyframes hrFade { to { opacity: 1; } }
    .hr-nt { opacity: 0; animation: hrNote .7s ease forwards; }
    .hr-nt circle { fill: #fff; }
    .hr-nt path { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.2; }
    .hr-nt text { font: 600 21px Caveat, cursive; fill: #fff; paint-order: stroke; stroke: rgba(3, 25, 48, .45); stroke-width: 4px; stroke-linejoin: round; }
    .hr-nt-w text { fill: #9ff0ff; font-size: 25px; }
    .hr-nt-w circle { fill: #9ff0ff; }
    @keyframes hrNote { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .hr-sign { position: relative; margin: 2px 0 0; padding: 0 6px 16px; font: 600 clamp(1.9rem, 2.5vw, 2.5rem)/1 Caveat, cursive; color: #fff; text-align: center; white-space: nowrap;
        text-shadow: 0 2px 14px rgba(0, 20, 40, .55); }
    .hr-sign-t { display: inline-block; clip-path: inset(-20% 100% -30% 0); animation: hrWrite 1.5s cubic-bezier(.45, .05, .4, 1) 6.2s forwards; }
    @keyframes hrWrite { to { clip-path: inset(-20% -2% -30% 0); } }
    .hr-sign a { color: inherit; text-decoration: none; transition: color .3s; }
    .hr-sign a:hover, .hr-sign a:focus-visible { color: #9ff0ff; }
    .hr-sign a:focus-visible { outline: 2px solid #7fd6ff; outline-offset: 3px; border-radius: 6px; }
    .hr-sign-u { position: absolute; left: 4%; bottom: 0; width: 92%; height: 12px; overflow: visible; }
    .hr-sign-u path { fill: none; stroke: #8fe0ff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke;
        animation: hrDraw .9s cubic-bezier(.45, .05, .3, 1) 7.5s forwards; }
    .hr-b.is-done .hr-l, .hr-b.is-done .hr-sign-u path { animation: none; stroke-dashoffset: 0; }
    .hr-b.is-done .hr-nt, .hr-b.is-done .hr-cote { animation: none; opacity: 1; }
    .hr-b.is-done .hr-sign-t { animation: none; clip-path: none; }
    .hw.is-off .hr-caus path, .hw.is-off .hr-rip, .hw.is-off .hr-flow { animation-play-state: paused; }

}
@media (prefers-reduced-motion: reduce) {
    .hr-l, .hr-nt, .hr-cote, .hw-rating, .hr-sign-u path { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
    .hr-sign-t { animation: none !important; clip-path: none !important; }
    .hr-v { transition: none; }
    .hr-flow { animation: none !important; opacity: 1; }
    .hr-rip { display: none; }
}

@media (min-width: 1025px) {
    .hr-tr { stroke: rgba(255, 238, 214, .82); stroke-width: 1.2; }
    .hr-tr2 { stroke: rgba(255, 238, 214, .5); stroke-width: .9; }
    .hr-pa { stroke: rgba(255, 255, 255, .78); stroke-width: 1.2; }
    .hr-pa2 { stroke: rgba(255, 255, 255, .45); stroke-width: .9; }
    .hr-flow-s { stroke-dasharray: 3 6; animation: hrFade .6s ease forwards, hrFlowS .9s linear infinite; }
    @keyframes hrFlowS { to { stroke-dashoffset: -9; } }
}
@media (prefers-reduced-motion: reduce) {
    .hr-flow-s { animation: none !important; opacity: 1; }
}