/* HPL-1 17 Oct 2026: 04 / The Pilot as a measurement contract signed before the numbers exist. Graph-paper field + ghost 04, headline underline and chip wipe, card lands with a tilt, a 0-180 day retention ruler fills to the clause-02 checkpoints (30/60/90/180, 90 primary), tabs flip in, every clause gets a COMMITTED stamp, runway lights run to January 2027. Own file uploads/pfh-hsy/hpl.css (+ hpl.js adds the aria-hidden ruler); does not touch uploads/pfh-hox/*. Finished state is the default. */
@property --hpl-f{syntax:"<percentage>";inherits:true;initial-value:100%}
@property --hpl-u{syntax:"<percentage>";inherits:true;initial-value:100%}
@property --hpl-g{syntax:"<length>";inherits:true;initial-value:0px}
@property --hpl-r{syntax:"<length>";inherits:true;initial-value:0px}
.ox #pilot{position:relative;isolation:isolate}
.ox #pilot>.ox-wrap{position:relative;z-index:1}
/* graph paper + ghost numeral */
.ox #pilot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(11,23,41,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,23,41,.06) 1px,transparent 1px);background-size:44px 44px;background-position:0 var(--hpl-g);-webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.4) 55%,transparent 92%);mask:linear-gradient(180deg,#000,rgba(0,0,0,.4) 55%,transparent 92%)}
.ox #pilot::after{content:"04"/"";position:absolute;z-index:0;pointer-events:none;right:clamp(14px,4vw,72px);top:clamp(24px,3.6vw,56px);font:900 clamp(150px,22vw,330px)/.8 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(11,23,41,.09)}
/* headline */
.ox #pilot .ox-big>span:not(.ox-chip){background:linear-gradient(var(--hot),var(--hot)) 0 94%/var(--hpl-u) .09em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ox #pilot .ox-big .ox-chip{display:inline-block}
/* card */
.ox #pilot .ox-pick{position:relative}
.ox #pilot .ox-pick>.hpl-rule{grid-column:1/-1}
/* ruler */
.ox #pilot .hpl-rule{position:relative;height:96px;margin:0 0 clamp(4px,1vw,12px);border-bottom:1px solid var(--line)}
.ox #pilot .hpl-rule__t{position:absolute;top:0;left:0;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ox #pilot .hpl-rule__bar{position:absolute;left:0;right:0;top:30px;height:12px;border-right:1px solid rgba(11,23,41,.3);background:linear-gradient(90deg,rgba(11,23,41,.3) 1px,transparent 1px) 0 0/calc(100%/18) 100% repeat-x,linear-gradient(rgba(11,23,41,.16),rgba(11,23,41,.16)) 0 50%/100% 2px no-repeat}
.ox #pilot .hpl-rule__bar i{position:absolute;left:0;top:3px;height:6px;width:var(--hpl-f);border-radius:6px;background:linear-gradient(90deg,var(--green),var(--green-hi));box-shadow:0 0 16px rgba(63,191,132,.55)}
.ox #pilot .hpl-m{position:absolute;top:28px;display:flex;flex-direction:column;align-items:center;gap:7px;translate:-50% 0;font:700 13px/1 var(--mono);color:var(--ink);white-space:nowrap}
.ox #pilot .hpl-m::before{content:"";width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:#fff;border:3px solid var(--green)}
.ox #pilot .hpl-m--0{left:0;translate:0 0;align-items:flex-start}
.ox #pilot .hpl-m--30{left:16.667%}
.ox #pilot .hpl-m--60{left:33.333%}
.ox #pilot .hpl-m--90{left:50%;color:#B4561A}
.ox #pilot .hpl-m--180{left:100%;translate:-100% 0;align-items:flex-end}
.ox #pilot .hpl-m--90::before{width:20px;height:20px;margin-top:-2px;background:var(--hot);border-color:#fff;box-shadow:0 0 0 2px var(--hot),0 0 0 10px rgba(224,122,47,0)}
.ox #pilot .hpl-m b{font:800 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#B4561A;padding:4px 6px 3px;border-radius:4px}
/* tabs */
.ox #pilot .ox-pick__tabs button{transition:background-color .25s,color .25s,box-shadow .25s,translate .25s}
.ox #pilot .ox-pick__tabs button:hover{translate:0 -2px}
.ox #pilot .ox-pick__tabs [aria-selected="true"]{box-shadow:inset 0 -4px 0 var(--hot),0 12px 24px -14px rgba(11,23,41,.7)}
/* clause stamp */
.ox #pilot .ox-pick__panel{position:relative}
.ox #pilot .ox-pick__panel::after{content:"Committed"/"";position:absolute;right:0;bottom:-6px;padding:7px 11px 6px;border:2px solid #B4561A;border-radius:8px;color:#B4561A;background:rgba(224,122,47,.07);font:800 13px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;rotate:-6deg;opacity:.94}
/* launch box: beacon + runway */
.ox #pilot .ox-launch{position:relative;overflow:clip;padding-bottom:34px}
.ox #pilot .ox-launch>p:first-child{padding-right:30px}
.ox #pilot .ox-launch::before{content:"";position:absolute;top:22px;right:22px;width:10px;height:10px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 4px rgba(63,191,132,.2)}
.ox #pilot .ox-launch::after{content:"";position:absolute;left:20px;right:20px;bottom:14px;height:6px;background:radial-gradient(circle,var(--hot) 0 2.2px,transparent 2.8px) var(--hpl-r) 50%/18px 6px repeat-x;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ox #pilot .ox-launch .ox-launch__d{text-shadow:0 0 30px rgba(224,122,47,.35)}
@media (max-width:720px){
  .ox #pilot::after{font-size:150px;top:14px;right:10px;-webkit-text-stroke-width:1.5px}
  .ox #pilot::before{background-size:32px 32px}
  .ox #pilot .hpl-rule{height:92px}
  .ox #pilot .hpl-rule__t{font-size:10.5px;letter-spacing:.12em}
  .ox #pilot .hpl-m{font-size:12px}
  .ox #pilot .ox-pick__panel::after{position:static;display:inline-block;margin-top:14px;rotate:-4deg}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #pilot{view-timeline:--hplv block}
  .ox-mo #pilot::before{animation:hpl-grid linear both;animation-timeline:--hplv;animation-range:entry 0% exit 100%}
  .ox-mo #pilot::after{animation:hpl-ghost linear both;animation-timeline:--hplv;animation-range:entry 0% cover 60%}
  .ox-mo #pilot .ox-big{view-timeline:--hplb block;animation:hpl-big linear both;animation-timeline:--hplb;animation-range:entry 0% cover 40%}
  .ox-mo #pilot .ox-big>span:not(.ox-chip){animation:hpl-under linear both;animation-timeline:--hplb;animation-range:cover 18% cover 42%}
  .ox-mo #pilot .ox-big .ox-chip{animation:hpl-chip linear both;animation-timeline:--hplb;animation-range:cover 28% cover 50%}
  .ox-mo #pilot .ox-pick{animation:hpl-card linear both;animation-timeline:view();animation-range:entry 0% entry 45%;transform-origin:50% 0}
  .ox-mo #pilot .hpl-rule{view-timeline:--hplr block}
  .ox-mo #pilot .hpl-rule__bar i{animation:hpl-fill linear both;animation-timeline:--hplr;animation-range:cover 12% cover 52%}
  .ox-mo #pilot .hpl-m{animation:hpl-pop linear both;animation-timeline:--hplr}
  .ox-mo #pilot .hpl-m--0{animation-range:cover 10% cover 16%}
  .ox-mo #pilot .hpl-m--30{animation-range:cover 18% cover 24%}
  .ox-mo #pilot .hpl-m--60{animation-range:cover 25% cover 31%}
  .ox-mo #pilot .hpl-m--90{animation-range:cover 32% cover 38%}
  .ox-mo #pilot .hpl-m--90::before{animation:hpl-ring linear both;animation-timeline:--hplr;animation-range:cover 36% cover 50%}
  .ox-mo #pilot .hpl-m--180{animation-range:cover 46% cover 52%}
  .ox-mo #pilot .hpl-rule__t{animation:hpl-cap linear both;animation-timeline:--hplr;animation-range:cover 4% cover 18%}
  .ox-mo #pilot .ox-pick__tabs button{animation:hpl-tab linear both;animation-timeline:view();animation-range:entry 10% cover 14%;transform-origin:50% 0}
  .ox-mo #pilot .ox-pick__tabs button:nth-child(even){animation-range:entry 45% cover 20%}
  .ox-mo #pilot .ox-launch{animation:hpl-box linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .ox-mo #pilot .ox-launch::after{animation:hpl-run linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .ox-mo #pilot .ox-launch .ox-launch__d{animation:hpl-date linear both;animation-timeline:view();animation-range:entry 40% cover 16%}
  .ox-mo #pilot .ox-launch::before{animation:hpl-beacon 2.6s ease-out infinite}
  .ox-js #pilot .ox-pick__panel:not([hidden]){animation:hpl-panel .45s cubic-bezier(.22,1,.36,1) both}
  .hpl-arm:not(.hpl-go) .ox-pick__panel::after{opacity:0}
  .hpl-go .ox-pick__panel:not([hidden])::after{animation:hpl-stamp .6s cubic-bezier(.2,1.5,.4,1) .3s both}
  @keyframes hpl-grid{from{--hpl-g:0px}to{--hpl-g:-264px}}
  @keyframes hpl-ghost{from{translate:0 120px;opacity:0;scale:.86}to{translate:0 0;opacity:1;scale:1}}
  @keyframes hpl-big{from{translate:0 80px;opacity:.15;filter:blur(8px)}to{translate:0 0;opacity:1;filter:none}}
  @keyframes hpl-under{from{--hpl-u:0%}to{--hpl-u:100%}}
  @keyframes hpl-chip{from{clip-path:inset(0 100% 0 0);translate:-28px 0}to{clip-path:inset(-12% -4% -12% -4%);translate:0 0}}
  @keyframes hpl-card{from{transform:perspective(1600px) rotateX(18deg) translateY(110px) scale(.93);opacity:.35}to{transform:none;opacity:1}}
  @keyframes hpl-fill{from{--hpl-f:0%}to{--hpl-f:100%}}
  @keyframes hpl-pop{from{opacity:0;transform:translateY(12px) scale(.4)}to{opacity:1;transform:none}}
  @keyframes hpl-ring{0%{box-shadow:0 0 0 2px var(--hot),0 0 0 0 rgba(224,122,47,.7)}100%{box-shadow:0 0 0 2px var(--hot),0 0 0 14px rgba(224,122,47,0)}}
  @keyframes hpl-cap{from{opacity:0;letter-spacing:.5em}to{opacity:1}}
  @keyframes hpl-tab{from{transform:perspective(700px) rotateX(-80deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes hpl-box{from{clip-path:inset(0 100% 0 0 round 16px)}to{clip-path:inset(0 0 0 0 round 16px)}}
  @keyframes hpl-run{from{--hpl-r:0px}to{--hpl-r:-216px}}
  @keyframes hpl-date{from{clip-path:inset(-20% 100% -20% 0);translate:0 24px;text-shadow:none}to{clip-path:inset(-20% -6% -20% -6%);translate:0 0;text-shadow:0 0 30px rgba(224,122,47,.35)}}
  @keyframes hpl-beacon{0%{box-shadow:0 0 0 0 rgba(63,191,132,.65)}70%,100%{box-shadow:0 0 0 14px rgba(63,191,132,0)}}
  @keyframes hpl-panel{from{opacity:0;translate:22px 0}to{opacity:1;translate:0 0}}
  @keyframes hpl-stamp{from{opacity:0;scale:2.6;rotate:-22deg}to{opacity:.94;scale:1;rotate:-6deg}}
}}