/* Happiness(R) whimsy: TRIANGLES lane. Everything scoped to ht-. Decorative nodes are injected by
   triangles.js with aria-hidden="true"; without JS none of this exists and the page is unchanged. */
.ht-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ht-tri{display:block;overflow:visible}
.ht-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- nav: a card's top-edge triangle drops out of the pill ---------- */
.ht-pip{position:absolute;left:50%;top:0;width:13px;height:11.26px;margin-left:-6.5px;pointer-events:none;opacity:0;
  transform:translateY(-105%);transition:transform .34s cubic-bezier(.34,1.5,.6,1),opacity .18s ease;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.ht-pip .ht-tri{width:100%;height:100%}
.nav-link:hover>.ht-pip,.nav-link:focus-visible>.ht-pip,.nav-link.active>.ht-pip{opacity:1;transform:none}
.nav-link.active>.ht-pip{animation:ht-drop .5s .35s cubic-bezier(.34,1.5,.6,1) both}
@keyframes ht-drop{from{opacity:0;transform:translateY(-105%)}to{opacity:1;transform:none}}

.ht-ml{position:relative}
.ht-mpip{position:absolute;right:-1px;top:50%;width:15px;height:18px;margin-top:-9px;overflow:hidden;pointer-events:none}
.ht-mpip .ht-tri{width:15.59px;height:18px;margin-left:auto;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.mobile-menu-link:hover .ht-mpip .ht-tri,.mobile-menu-link:focus-visible .ht-mpip .ht-tri,.mobile-menu-link.active .ht-mpip .ht-tri{transform:none}

/* ---------- matched pair: two triangles meet base to base, like two cards edge to edge ---------- */
.ht-pair{--ht-w:calc(var(--ht-s,14px)*.866);position:absolute;width:0;height:var(--ht-s,14px);pointer-events:none}
.ht-pair .ht-a,.ht-pair .ht-b{position:absolute;top:0;width:var(--ht-w);height:var(--ht-s,14px);opacity:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));transition:transform .75s cubic-bezier(.2,.9,.25,1.12),opacity .3s ease}
.ht-pair .ht-a{right:.6px;transform:translateX(calc(var(--ht-s)*-1.6)) rotate(-30deg)}
.ht-pair .ht-b{left:.6px;transform:translateX(calc(var(--ht-s)*1.6)) rotate(30deg)}
.ht-in .ht-a,.ht-in .ht-b,.ht-in.ht-pair .ht-a,.ht-in.ht-pair .ht-b{opacity:1;transform:none}
/* gold seam flash at the moment they meet */
.ht-pair::after{content:"";position:absolute;left:-1px;top:-25%;width:2px;height:150%;border-radius:1px;
  background:linear-gradient(#FEFCF0,#E7D9A6 40%,#A18D5F);opacity:0;transform:scaleY(0)}
.ht-in.ht-pair::after,.ht-in .ht-pair::after{animation:ht-seam .7s .55s ease-out both}
@keyframes ht-seam{0%{opacity:0;transform:scaleY(0)}35%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.25)}}

/* heading placement (top/left set by JS): centred, or at the text start */
.ht-h{position:relative}
.ht-hp{left:50%;top:0}
.ht-hit{position:absolute;top:-5px;bottom:-5px;left:calc(var(--ht-w)*-1 - 8px);width:calc(var(--ht-w)*2 + 16px);pointer-events:none;
  -webkit-tap-highlight-color:transparent}
.ht-in .ht-hit{pointer-events:auto;cursor:pointer}
.ht-knock .ht-a{animation:ht-ka .32s ease-out}
.ht-knock .ht-b{animation:ht-kb .32s ease-out}
@keyframes ht-ka{40%{transform:translateX(-3px)}}
@keyframes ht-kb{40%{transform:translateX(3px)}}
.ht-score .ht-a,.ht-score .ht-b{animation:ht-win .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes ht-win{0%{transform:none}30%{transform:scale(1.45);filter:drop-shadow(0 0 6px rgba(254,252,240,.9))}100%{transform:none}}
.ht-jp{position:absolute;left:0;bottom:100%;display:flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:none;
  transform:translateX(-50%);font:600 12px/1 Poppins,sans-serif;letter-spacing:.3px;color:#FEFCF0;text-shadow:0 1px 3px rgba(0,0,0,.8);
  animation:ht-float 1.6s cubic-bezier(.2,.7,.3,1) both}
.ht-jp b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FEFCF0;color:#151C27;font-weight:700;font-size:10px;
  box-shadow:0 0 0 1.5px #A18D5F,0 2px 6px rgba(0,0,0,.5)}
@keyframes ht-float{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}18%{opacity:1;transform:translate(-50%,-4px) scale(1.05)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}

/* ---------- section dividers: gold-foil hairline drawn outward from a matched pair ---------- */
.ht-dh{position:relative;z-index:1}
.ht-dz{position:relative;z-index:1;height:0;max-width:600px;margin-left:auto;margin-right:auto}
.ht-dv{--ht-s:20px;position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.ht-ln{position:absolute;top:0;width:calc(50% - var(--ht-s)*.866);height:1px;transform:scaleX(0);transition:transform 1.15s .45s cubic-bezier(.25,.8,.25,1)}
.ht-l{right:calc(50% + var(--ht-s)*.866);transform-origin:100% 50%;background:linear-gradient(270deg,#FEFCF0,#D9C88F 10%,#A18D5F 30%,#E6D8A8 46%,#A18D5F 62%,rgba(161,141,95,0))}
.ht-r{left:calc(50% + var(--ht-s)*.866);transform-origin:0 50%;background:linear-gradient(90deg,#FEFCF0,#D9C88F 10%,#A18D5F 30%,#E6D8A8 46%,#A18D5F 62%,rgba(161,141,95,0))}
.ht-in .ht-ln{transform:none}
.ht-dp{left:50%;top:calc(var(--ht-s)/-2 + .5px)}

/* ---------- buttons: press + a light that runs round the edge ---------- */
.ht-btn{position:relative;isolation:isolate;overflow:hidden}
.ht-btn.ht-btn:active:not(:disabled){transform:translateY(1px) scale(.965);transition:transform .07s ease-out}
.ht-shine{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.ht-shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,rgba(254,252,240,0),rgba(254,252,240,.2),rgba(254,252,240,0));transform:translateX(-130%) skewX(-20deg)}
.ht-edge{position:absolute;inset:0;border-radius:inherit;padding:1.5px;box-sizing:border-box;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ht-edge::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  background:linear-gradient(90deg,rgba(254,252,240,0),#FEFCF0 45%,#FFE9A8 55%,rgba(254,252,240,0));transform:translateX(-130%)}
.ht-btn:hover .ht-shine::after,.ht-btn:focus-visible .ht-shine::after{animation:ht-sweep .8s cubic-bezier(.3,.6,.25,1)}
.ht-btn:hover .ht-edge::before,.ht-btn:focus-visible .ht-edge::before{animation:ht-sweep .8s .04s cubic-bezier(.3,.6,.25,1)}
@keyframes ht-sweep{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(300%) skewX(-20deg)}}

/* ---------- How It Works icons ---------- */
.ht-tile{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.ht-ico path,.ht-ico circle,.ht-ico rect,.ht-ico line,.ht-ico polyline,.ht-ico polygon{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
.ht-tile.ht-in{animation:ht-pop .6s var(--ht-d,0s) cubic-bezier(.34,1.56,.64,1) both}
.ht-in .ht-ico *{animation:ht-draw 1.05s calc(var(--ht-d,0s) + .2s) ease-in-out both}
.ht-tile.ht-done{animation:none}
.ht-done .ht-ico *{animation:none;stroke-dashoffset:0;opacity:1}
.group:hover .ht-tile.ht-done,.group:focus-within .ht-tile.ht-done{transform:rotate(-8deg) scale(1.1)}
.group:hover .ht-done .ht-ico *,.group:focus-within .ht-done .ht-ico *{animation:ht-draw .7s ease-in-out both}
@keyframes ht-pop{from{transform:scale(.55) rotate(-24deg)}to{transform:none}}
@keyframes ht-draw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ht-pip,.ht-mpip .ht-tri,.ht-pair .ht-a,.ht-pair .ht-b,.ht-ln,.ht-tile{transition:none}
  .ht-pair .ht-a,.ht-pair .ht-b{opacity:1;transform:none}
  .ht-ln{transform:none}
  .nav-link.active>.ht-pip,.ht-pair::after,.ht-knock .ht-a,.ht-knock .ht-b,.ht-score .ht-a,.ht-score .ht-b,
  .ht-btn:hover .ht-shine::after,.ht-btn:focus-visible .ht-shine::after,.ht-btn:hover .ht-edge::before,.ht-btn:focus-visible .ht-edge::before,
  .ht-tile.ht-in,.ht-in .ht-ico *,.group:hover .ht-done .ht-ico *,.group:focus-within .ht-done .ht-ico *{animation:none}
  .ht-ico.ht-ico *{stroke-dashoffset:0;opacity:1}
  .ht-btn:hover .ht-edge::before,.ht-btn:focus-visible .ht-edge::before{transform:translateX(100%)}
  .ht-btn.ht-btn:active:not(:disabled){transform:none;filter:brightness(.9)}
  .group:hover .ht-tile.ht-done,.group:focus-within .ht-tile.ht-done{transform:none}
  .ht-jp{animation:ht-fade 1.6s linear both}
}
@keyframes ht-fade{0%,85%{opacity:1}100%{opacity:0}}
@media print{.ht-pip,.ht-mpip,.ht-pair,.ht-dv,.ht-shine{display:none!important}.ht-ico *{stroke-dasharray:none!important;opacity:1!important}}