/* HCM-1 17 Oct 2026: 04 / Compare = a scoreboard. Five claims flip from cold (failing) to lit (answered) as you scroll; counter, rail and seam arrows are scrubbed. Own file; does not touch uploads/pfh-hox/*. */
@property --hcm-n{syntax:"<integer>";inherits:true;initial-value:5}
@property --hcm-f{syntax:"<percentage>";inherits:false;initial-value:100%}
.ox #compare{position:relative;isolation:isolate;overflow:clip}
.ox #compare::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;display:block;background:radial-gradient(34% 26% at 22% 30%,rgba(174,182,194,.10),transparent 70%),radial-gradient(38% 30% at 82% 64%,rgba(63,191,132,.16),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 72px)}
.ox #compare .ox-wrap{position:relative}
.ox #compare .ox-wrap::before{content:"VS";position:absolute;right:-1%;top:44%;z-index:-1;pointer-events:none;font:900 clamp(120px,15vw,230px)/.8 var(--disp);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09)}
/* the scoreboard */
.ox #compare .ox-vs,.ox #compare .ox-vs tbody,.ox #compare .ox-vs thead{display:block}
.ox #compare .ox-vs{position:relative;margin-top:6px;padding-top:34px;view-timeline:--hcmv block}
.ox #compare .ox-vs::before{content:counter(hcm) " / 5 answered";counter-reset:hcm var(--hcm-n);position:absolute;top:0;right:0;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-hi,#3FBF84)}
.ox #compare .ox-vs::after{content:"";position:absolute;left:50%;top:30px;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(var(--green-hi,#3FBF84),rgba(63,191,132,.15));box-shadow:0 0 14px rgba(63,191,132,.7);transform-origin:50% 0;pointer-events:none}
.ox #compare .ox-vs thead tr,.ox #compare .ox-vs tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:34px}
.ox #compare .ox-vs thead{margin-bottom:12px}
.ox #compare .ox-vs thead th{display:block;padding:0 0 10px;border-bottom:2px solid rgba(174,182,194,.35);font:500 12.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dk2,#AEB6C2)}
.ox #compare .ox-vs thead th.is-win{padding-left:0;border-bottom-color:var(--green-hi,#3FBF84);color:var(--green-hi,#3FBF84)}
.ox #compare .ox-vs tbody{display:grid;gap:10px}
.ox #compare .ox-vs tbody tr{position:relative}
.ox #compare .ox-vs tbody tr+tr>*{border-top:0}
.ox #compare .ox-vs tbody td{position:relative;display:block;width:auto;box-sizing:border-box;min-height:70px;padding:16px 20px 16px 62px;border:1px solid rgba(255,255,255,.1);border-radius:14px;font-size:17px;line-height:1.42;color:#98A2B0;background:repeating-linear-gradient(135deg,rgba(174,182,194,.06) 0 8px,transparent 8px 16px);clip-path:none;align-content:center}
.ox #compare .ox-vs tbody td.is-win{padding:16px 20px 16px 62px;border-left:1px solid rgba(63,191,132,.5);font:800 20px/1.22 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#fff;background:linear-gradient(100deg,rgba(63,191,132,.26),rgba(63,191,132,.05)) 0 0/var(--hcm-f) 100% no-repeat,rgba(255,255,255,.03);box-shadow:0 0 34px -14px rgba(63,191,132,.7)}
.ox #compare .ox-vs tbody td::before{content:"\00D7";position:absolute;left:16px;top:50%;width:30px;height:30px;margin:-15px 0 0;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2px solid var(--hot,#E07A2F);font:700 20px/1 var(--disp);color:var(--hot,#E07A2F);background:none;letter-spacing:0;text-transform:none}
.ox #compare .ox-vs tbody td:not(.is-win)::before{border:2px solid var(--hot,#E07A2F)}
.ox #compare .ox-vs tbody td.is-win::before{content:"\2713";left:16px;border-color:var(--green-hi,#3FBF84);background:var(--green-hi,#3FBF84);color:var(--navy,#0B1729);font-size:17px}
.ox #compare .ox-vs tbody tr::after{content:"\2192";position:absolute;left:50%;top:50%;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;border-radius:50%;background:var(--navy,#0B1729);border:2px solid var(--green-hi,#3FBF84);font:700 15px/1 var(--disp);color:var(--green-hi,#3FBF84)}
.ox #compare .ox-note{margin-top:20px}
.ox #compare .ox-vs tbody td:hover:not(.is-win){color:#C9D1DC}
.ox #compare .ox-vs tbody td.is-win:hover{box-shadow:0 0 44px -10px rgba(63,191,132,.9);border-color:rgba(63,191,132,.9)}
@media (max-width:767px){
  .ox #compare .ox-vs{padding-top:30px}
  .ox #compare .ox-vs::after,.ox #compare .ox-vs tbody tr::after{display:none}
  .ox #compare .ox-vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ox #compare .ox-vs tbody{gap:14px}
  .ox #compare .ox-vs tbody tr{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:0;border:0}
  .ox #compare .ox-vs tbody td{min-height:0;padding:30px 16px 14px 56px;font-size:16px}
  .ox #compare .ox-vs tbody td.is-win{padding:30px 16px 14px 56px;font-size:18px}
  .ox #compare .ox-vs tbody td::after,.ox-mo #compare .ox-vs tbody td.is-win::after{content:attr(data-label);position:absolute;left:56px;right:auto;top:10px;bottom:auto;width:auto;height:auto;background:none;animation:none;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk2,#AEB6C2)}
  .ox #compare .ox-vs tbody td.is-win::after,.ox-mo #compare .ox-vs tbody td.is-win::after{color:var(--green-hi,#3FBF84)}
  .ox #compare .ox-vs tbody td::before{top:30px;margin-top:-15px}
  .ox #compare .ox-wrap::before{top:30%;font-size:110px}
}
/* motion: scrubbed on the table's own timeline; finished state is the default */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #compare .ox-vs tbody td{animation:none;transition:none;clip-path:none}
  .ox-mo #compare .ox-vs::before{animation:hcm-count linear both;animation-timeline:--hcmv;animation-range:entry 28% cover 52%}
  .ox-mo #compare .ox-vs::after{animation:hcm-rail linear both;animation-timeline:--hcmv;animation-range:entry 30% cover 58%}
  .ox-mo #compare .ox-vs tbody tr{animation:none}
  .ox-mo #compare .ox-vs tbody tr:nth-child(1){--a:entry 22%;--b:entry 70%}
  .ox-mo #compare .ox-vs tbody tr:nth-child(2){--a:entry 36%;--b:entry 82%}
  .ox-mo #compare .ox-vs tbody tr:nth-child(3){--a:entry 50%;--b:entry 94%}
  .ox-mo #compare .ox-vs tbody tr:nth-child(4){--a:entry 64%;--b:cover 8%}
  .ox-mo #compare .ox-vs tbody tr:nth-child(5){--a:entry 78%;--b:cover 22%}
  .ox-mo #compare .ox-vs tbody td:not(.is-win){animation:hcm-cold linear both;animation-timeline:--hcmv;animation-range:var(--a) var(--b)}
  .ox-mo #compare .ox-vs tbody td.is-win{animation:hcm-lit linear both;animation-timeline:--hcmv;animation-range:var(--a) var(--b)}
  .ox-mo #compare .ox-vs tbody td::before{animation:hcm-pop linear both;animation-timeline:--hcmv;animation-range:var(--a) var(--b)}
  .ox-mo #compare .ox-vs tbody td.is-win::before{animation-name:hcm-tick}
  .ox-mo #compare .ox-vs tbody tr::after{animation:hcm-arrow linear both;animation-timeline:--hcmv;animation-range:var(--a) var(--b)}
  .ox-mo #compare .ox-wrap::before{animation:hcm-vs linear both;animation-timeline:--hcmw;animation-range:cover 0% cover 100%}
  .ox-mo #compare{view-timeline:--hcmw block}
  .ox-mo #compare::before{animation:hcm-drift linear both;animation-timeline:--hcmw;animation-range:cover 0% cover 100%}
  @keyframes hcm-count{from{--hcm-n:0}to{--hcm-n:5}}
  @keyframes hcm-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes hcm-cold{from{opacity:.25;translate:-34px 0;filter:grayscale(1)}to{opacity:1;translate:0 0;filter:none}}
  @keyframes hcm-lit{0%{opacity:0;translate:34px 0;--hcm-f:0%}60%{opacity:1;translate:0 0}100%{opacity:1;translate:0 0;--hcm-f:100%}}
  @keyframes hcm-pop{from{scale:0;rotate:-90deg}to{scale:1;rotate:0deg}}
  @keyframes hcm-tick{0%{scale:0;box-shadow:0 0 0 0 rgba(63,191,132,.7)}70%{scale:1.25}100%{scale:1;box-shadow:0 0 0 12px rgba(63,191,132,0)}}
  @keyframes hcm-arrow{from{scale:0;opacity:0}to{scale:1;opacity:1}}
  @keyframes hcm-vs{from{translate:0 80px;opacity:.2}50%{opacity:1}to{translate:0 -80px;opacity:.5}}
  @keyframes hcm-drift{from{translate:0 4%}to{translate:0 -4%}}
}}
@media (prefers-reduced-motion:no-preference){
  .ox-mo #compare .ox-vs tbody td.is-win:not(:hover)::before{animation-fill-mode:both}
}