/* Home hero left side (Mark approved Nov 2 2026): words arrive (Idea 1) + the 3D price tag (Idea 2).
   Desktop hero only (phones have their own top). Hidden states apply only while #heroLeft has .hl-anim. */
.hl-left{position:relative}
.hl-left .hl-bul{max-width:520px}
.hl-left .hl-save{display:none} /* "Save up to 50%" lives on the tag */

/* eyebrow letters, headline words, gold line, points, payout box */
.hl-anim .hl-c{opacity:0}
.hl-play .hl-c{animation:hlC .01s forwards;animation-delay:var(--d)}
@keyframes hlC{to{opacity:1}}
.hl-left .hl-w{display:inline-block}
/* a site wide span rule set Roboto on the word spans; keep the headline's own font */
.hl-left .hl-w,.hl-left .hl-c{font-family:inherit!important;font-size:inherit;font-weight:inherit;color:inherit}
.hl-anim .hl-w{opacity:0;transform:perspective(600px) rotateX(85deg) translateY(14px);transform-origin:50% 100%}
.hl-play .hl-w{animation:hlW .7s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:var(--d)}
@keyframes hlW{to{opacity:1;transform:none}}
.hl-anim .hl-rule{transform:scaleX(0);transform-origin:left}
.hl-play .hl-rule{transition:transform .6s ease 1.5s;transform:scaleX(1)}
.hl-anim .hl-bul li{opacity:0;transform:translateX(-46px)}
.hl-play .hl-bul li{transition:opacity .5s,transform .6s cubic-bezier(.25,1.2,.5,1);transition-delay:var(--d);opacity:1;transform:none}
.hl-anim .hl-vc{opacity:0;transform:perspective(900px) rotateX(24deg) translateY(36px)}
.hl-play .hl-vc{transition:opacity .6s 2.6s,transform .9s cubic-bezier(.2,1.1,.3,1) 2.6s;opacity:1;transform:none}

/* the price tag, hanging to the right of the points */
.hl-tagzone{position:absolute;right:0;top:146px;width:170px;height:290px;perspective:900px;pointer-events:none}
.hl-string{position:absolute;left:50%;top:0;width:2px;height:70px;margin-left:-1px;background:linear-gradient(#C9A84C,rgba(201,168,76,.4))}
.hl-tag{position:absolute;left:50%;top:62px;width:150px;height:200px;margin-left:-75px;transform-style:preserve-3d;transform-origin:50% 0}
.hl-anim .hl-tag{opacity:0}
.hl-anim .hl-string{transform:scaleY(0);transform-origin:top}
.hl-play .hl-string{transition:transform .5s ease 3.4s;transform:none}
.hl-tagflip{position:absolute;inset:0;transform-style:preserve-3d}
.hl-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 12px 14px;clip-path:polygon(50% 0,100% 14%,100% 100%,0 100%,0 14%);border-radius:6px}
.hl-face::before{content:"";position:absolute;top:16px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#203864;box-shadow:inset 0 0 0 2px #C9A84C}
.hl-fr{background:linear-gradient(160deg,#ffffff,#e8edf5);color:#203864}
.hl-bk{background:linear-gradient(160deg,#d8b45c,#B8892A);color:#fff;transform:rotateY(180deg)}
.hl-lab{font:700 12px Roboto,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.hl-big{font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:700;line-height:1.15;margin-top:6px;position:relative}
.hl-strike{position:absolute;left:-8px;right:-8px;top:52%;height:4px;background:#c0392b;border-radius:3px;transform:scaleX(0) rotate(-8deg);transform-origin:left}
.hl-bk .hl-lab{color:rgba(255,255,255,.88)}
.hl-bk .hl-big{font-size:30px}
.hl-sm{font:600 13px Roboto,sans-serif;margin-top:4px}
.hl-play .hl-tag{animation:hlDrop 1.6s cubic-bezier(.3,.7,.4,1) 3.6s both,hlSway 5s ease-in-out 8s infinite}
@keyframes hlDrop{0%{opacity:0;transform:translateY(-260px) rotate(0)}25%{opacity:1}45%{transform:translateY(0) rotate(14deg)}62%{transform:rotate(-9deg)}78%{transform:rotate(5deg)}90%{transform:rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes hlSway{0%,100%{opacity:1;transform:rotate(0)}50%{opacity:1;transform:rotate(4deg)}}
.hl-play .hl-strike{transition:transform .45s ease 5.4s;transform:scaleX(1) rotate(-8deg)}
.hl-play .hl-tagflip{animation:hlFlip .9s cubic-bezier(.4,1.3,.5,1) 6.2s forwards}
@keyframes hlFlip{to{transform:rotateY(180deg)}}
/* visitors who ask for less motion: everything shown, tag on its gold side */
.hl-still .hl-tagflip{transform:rotateY(180deg)}

/* not enough room beside the points: no tag, the "Save up to 50%" point comes back */
@media (max-width:1180px){.hl-tagzone{display:none}.hl-left .hl-save{display:list-item}}