/* How we work (prefix hw-) */
:root{--hw-or:#FF5B1A;--hw-deep:#C2410C;--hw-pe:#FFA77F;--hw-pan:#0B0D14;--hw-ln:#22263A;--hw-mut:#8C91A3}

/* ───── hero: orbit clock ───── */
.hw-oc{position:relative;max-width:540px;margin-left:auto;color:#E8EAF0}
.hw-oc-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--hw-mut);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.hw-oc-lens{display:flex;gap:4px}
.hw-oc-lens button{all:unset;cursor:pointer;font-size:11px;letter-spacing:.06em;padding:4px 9px;border:1px solid #22263A;color:#8C91A3;transition:all .25s}
.hw-oc-lens button[aria-pressed=true]{color:#fff;border-color:#FF5B1A;background:rgba(255,91,26,.14)}
.hw-oc-lens button:focus-visible{outline:2px solid #FFA77F}
.hw-oc-top em{font-style:normal;display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0}
.hw-oc-top em i{width:9px;height:9px;transform:rotate(45deg);background:var(--hw-or)}
.hw-oc-dial{position:relative;aspect-ratio:1;touch-action:none}
.hw-oc-dial svg{width:100%;height:100%;display:block;overflow:visible}
.hw-oc-ticks line{stroke:#2A2F44;stroke-width:1}.hw-oc-ticks line.hw-b{stroke:#4A4F66;stroke-width:1.5}
.hw-oc-arcs path{fill:none;stroke:#1C2030;stroke-width:22;transition:stroke .4s;cursor:pointer}
.hw-oc-arcs path.hw-done{stroke:#5A2A14}
.hw-oc-arcs path.hw-on{stroke:var(--hw-or);filter:drop-shadow(0 0 10px rgba(255,91,26,.55))}
.hw-oc-lbl text{font-size:11.5px;fill:#6E7286;text-anchor:middle;transition:fill .3s;letter-spacing:.04em}
.hw-oc-lbl text.hw-on{fill:#fff;font-weight:600}
.hw-oc-pay path{fill:var(--hw-or);stroke:#05060A;stroke-width:2}
.hw-oc-pay text{font-size:11px;font-weight:700;fill:var(--hw-pe);text-anchor:middle}
.hw-oc-inner{fill:rgba(11,13,20,.85);stroke:#22263A}
.hw-oc-hand line{stroke:#fff;stroke-width:2}
.hw-oc-hand .hw-k{fill:#fff;stroke:var(--hw-or);stroke-width:4;cursor:grab}
.hw-oc-hand .hw-c{fill:#fff}
.hw-oc-mid{position:absolute;left:50%;top:50%;width:52%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.hw-oc-wk{display:block;font:600 clamp(26px,3vw,40px) var(--f-flex);letter-spacing:-.04em;color:#fff;line-height:1}
.hw-oc-nm{display:block;font-size:clamp(13px,1.1vw,15px);font-weight:500;color:var(--hw-pe);margin:6px 0 10px}
.hw-oc-lab{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-mut);border-top:1px solid #2A2F44;padding-top:8px}
.hw-oc-g,.hw-oc-g2{font-size:clamp(11.5px,1vw,13px);line-height:1.4;color:#D5D8E0;margin:4px 0 0}
.hw-oc-g2{color:#8C91A3}
.hw-oc-mid.hw-sw{animation:hwSw .45s both}
@keyframes hwSw{from{opacity:0;transform:translate(-50%,-44%)}}
.hw-oc-knob{all:unset;position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;cursor:grab;z-index:2}
.hw-oc-knob:focus-visible{outline:2px solid var(--hw-pe);outline-offset:2px}
@media (max-width:600px){.hw-oc-lbl text{font-size:15px}.hw-oc-mid{width:58%}.hw-oc-g2{display:none}}

/* ───── terms sheet ───── */
.hw-ts{background:#05060A;padding-block:clamp(28px,4vw,56px) clamp(56px,6vw,90px)}
.hw-ts-sheet{max-width:980px;margin:0 auto;background:#F5F2EE;color:#0B0C10;padding:clamp(20px,3vw,40px) clamp(20px,3.6vw,48px);box-shadow:0 30px 80px -30px rgba(255,91,26,.35),0 0 0 1px rgba(255,255,255,.04);transform:rotate(-.6deg);position:relative;background-image:linear-gradient(transparent 0 0)}
.hw-ts-sheet::before{content:"";position:absolute;top:-10px;left:50%;width:110px;height:22px;margin-left:-55px;background:rgba(255,167,127,.55);transform:rotate(2deg)}
.hw-ts-hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #0B0C10;padding-bottom:12px;margin-bottom:8px}
.hw-ts-hd small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hw-deep)}
.hw-ts-hd b{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.02em}
.hw-ts-hd span{font-size:12px;color:#8F8A80}
.hw-ts-r{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid #E2DAD0;transition:background .3s}
.hw-ts-r:hover{background:#EFE7DD}
.hw-ts-k{font-size:14px;color:#4B4E58;white-space:nowrap}
.hw-ts-dots{flex:1;height:1px;background-image:radial-gradient(circle,#8F8A80 1px,transparent 1.2px);background-size:7px 3px;background-repeat:repeat-x;background-position:0 50%;min-width:24px;transform-origin:left;transform:scaleX(0);transition:transform .8s calc(var(--i) * .35s + .2s) ease-out}
.hw-ts-v{font-size:clamp(15px,1.3vw,18px);font-weight:600;text-align:right;opacity:0;transform:translateX(8px);transition:opacity .5s calc(var(--i) * .35s + .8s),transform .5s calc(var(--i) * .35s + .8s)}
.hw-ts.hw-in .hw-ts-dots{transform:scaleX(1)}.hw-ts.hw-in .hw-ts-v{opacity:1;transform:none}
.hw-ts-ft{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}
.hw-ts-sig svg{width:200px;height:52px;display:block}
.hw-ts-sig path{fill:none;stroke:#0B0C10;stroke-width:2;stroke-linecap:round;stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset 1.6s 2.2s ease-in-out}
.hw-ts.hw-in .hw-ts-sig path{stroke-dashoffset:0}
.hw-ts-sig small{font-size:12px;color:#8F8A80;border-top:1px solid #0B0C10;display:block;padding-top:4px}
.hw-ts-seal{width:92px;height:92px;border-radius:50%;border:2px solid var(--hw-or);color:var(--hw-or);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;transform:rotate(-14deg) scale(1.6);opacity:0;transition:transform .35s 3.6s cubic-bezier(.3,1.6,.5,1),opacity .2s 3.6s;box-shadow:inset 0 0 0 4px #F5F2EE,inset 0 0 0 5px var(--hw-or)}
.hw-ts-seal b{font-size:18px;letter-spacing:0}
.hw-ts.hw-in .hw-ts-seal{transform:rotate(-14deg) scale(1);opacity:1}
@media (max-width:640px){.hw-ts-r{flex-wrap:wrap;gap:2px}.hw-ts-dots{display:none}.hw-ts-k{width:100%;font-size:12.5px;color:#8F8A80}.hw-ts-v{text-align:left}.hw-ts-sig svg{width:150px}.hw-ts-seal{width:76px;height:76px;font-size:9.5px}.hw-ts-seal b{font-size:15px}}

/* ───── weeks: sequence diagram ───── */
.hw-sq-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid #D6D6D2;background:#fff;margin-bottom:22px}
.hw-sq-tabs button{all:unset;cursor:pointer;padding:12px 14px;font-size:14px;line-height:1.3;color:#4B4E58;border-left:1px solid #D6D6D2;position:relative;transition:background .25s,color .25s}
.hw-sq-tabs button:first-child{border-left:0}
.hw-sq-tabs button small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-deep);margin-bottom:2px}
.hw-sq-tabs button[aria-pressed=true]{background:#0B0C10;color:#fff}
.hw-sq-tabs button[aria-pressed=true] small{color:var(--hw-pe)}
.hw-sq-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--hw-or)}
.hw-sq-tabs button.hw-run::after{animation:hwFill var(--hw-dur,7s) linear forwards}
@keyframes hwFill{to{width:100%}}
.hw-sq-tabs button:focus-visible{outline:2px solid var(--hw-or);outline-offset:-2px}
.hw-sq-board{position:relative;background:#fff;border:1px solid #D6D6D2;padding:0 0 18px}
.hw-sq-heads{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;z-index:1}
.hw-sq-heads span{margin:18px auto 8px;text-align:center;padding:10px 18px;border:1.5px solid #0B0C10;background:#fff;min-width:60%}
.hw-sq-heads span:nth-child(2){background:#0B0C10;color:#fff}
.hw-sq-heads span:nth-child(3){border-color:var(--hw-or);color:var(--hw-deep)}
.hw-sq-heads b{display:block;font-size:15px}.hw-sq-heads small{font-size:11.5px;color:#8F8A80}
.hw-sq-heads span:nth-child(2) small{color:#A3A8B8}
.hw-sq-lines{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;pointer-events:none}
.hw-sq-lines i{border-left:1.5px dashed #C9C2B8;margin-left:50%}
.hw-sq-lines i:nth-child(2){border-left:6px solid #F0E6DC;margin-left:calc(50% - 3px)}
.hw-sq-p{display:none;list-style:none;margin:0;padding:6px 0 0;position:relative}
.hw-sq-p.hw-on{display:block}
.hw-sq-r{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;min-height:54px;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.hw-sq-r.hw-in{opacity:1;transform:none}
.hw-sq-r p{margin:0;font-size:14px;line-height:1.45;color:#0B0C10;position:relative;z-index:1}
.hw-sq-r p small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:2px}
.hw-sq-ar{position:absolute;top:50%;height:0;border-top:1.5px solid #0B0C10}
.hw-sq-ar::after{content:"";position:absolute;top:-6px;width:0;height:0;border:5px solid transparent}
/* you do: arrow from lane 1 centre to lane 2 centre, text above in lane 1-2 */
.hw-sq-you .hw-sq-ar{left:16.66%;top:calc(100% - 10px);width:0;transition:width .6s .15s}
.hw-sq-you.hw-in .hw-sq-ar{width:33.33%}
.hw-sq-you .hw-sq-ar::after{right:-2px;border-left:8px solid #0B0C10}
.hw-sq-you p{grid-column:1/3;margin:0 25%;padding:8px 6px 20px;text-align:center}
.hw-sq-you p small{color:#4B4E58}
/* we do: activation note on lane 2 */
.hw-sq-we p{grid-column:2;margin:6px 10px;padding:10px 12px;background:#0B0C10;color:#E8EAF0;border-left:3px solid var(--hw-or)}
.hw-sq-we p small{color:var(--hw-pe)}
/* you get: arrow lane 2 -> lane 3 with deliverable card */
.hw-sq-get .hw-sq-ar{left:50%;width:0;border-top-color:var(--hw-or);transition:width .6s .15s}
.hw-sq-get.hw-in .hw-sq-ar{width:13%}
.hw-sq-get .hw-sq-ar::after{right:-2px;border-left:8px solid var(--hw-or)}
.hw-sq-get p{grid-column:3;margin:6px 12px 6px -8%;padding:10px 12px;background:#FFF1E9;border:1px solid var(--hw-or);box-shadow:0 10px 20px -14px rgba(194,65,12,.7)}
.hw-sq-get p small{color:var(--hw-deep)}
@media (max-width:860px){
  .hw-sq-tabs{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;scrollbar-width:none}
  .hw-sq-heads,.hw-sq-lines{display:none}
  .hw-sq-board{padding:12px 12px 12px 30px}
  .hw-sq-board::before{content:"";position:absolute;left:16px;top:16px;bottom:16px;border-left:2px dashed #C9C2B8}
  .hw-sq-r{grid-template-columns:1fr;min-height:0;margin:8px 0}
  .hw-sq-ar{display:none}
  .hw-sq-r p,.hw-sq-you p,.hw-sq-we p,.hw-sq-get p{grid-column:1;margin:0;width:auto;transform:none;padding:10px 12px}
  .hw-sq-you p{border:1px solid #D6D6D2;background:#fff}
  .hw-sq-r::before{content:"";position:absolute;left:-19px;top:16px;width:10px;height:10px;border-radius:50%;background:#0B0C10}
  .hw-sq-get::before{background:var(--hw-or)}.hw-sq-you::before{background:#fff;border:2px solid #0B0C10;width:6px;height:6px}
}

/* ───── payments: donut ───── */
.hw-dn{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hw-dn-vis{position:relative;max-width:440px;width:100%;margin:auto}
.hw-dn-vis svg{width:100%;display:block;transform:rotate(-90deg)}
.hw-dn-track{fill:none;stroke:#161821;stroke-width:30}
.hw-dn-segs path{fill:none;stroke-width:30;stroke-linecap:butt;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1)}
.hw-dn-segs path.hw-o{stroke:#2A2F44;stroke-width:1.5;stroke-dasharray:3 4}
.hw-dn-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hw-dn-mid small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-mut)}
.hw-dn-mid b{font:600 clamp(48px,6vw,80px) var(--f-flex);letter-spacing:-.05em;color:#fff;line-height:1.05}
.hw-dn-mid span{font-size:14px;color:var(--hw-mut)}
.hw-dn-list{display:grid;gap:10px}
.hw-dn-c{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--hw-ln);background:#0B0D14;position:relative;overflow:hidden;transition:border-color .35s,background .35s}
.hw-dn-pc{font:600 30px var(--f-flex);letter-spacing:-.04em;color:#6E7286;transition:color .35s}
.hw-dn-tx b{display:block;font-size:16px;font-weight:500;color:#fff}
.hw-dn-tx p{font-size:14px;line-height:1.5;color:#A3A8B8;margin:3px 0 0}
.hw-dn-inv{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--hw-pe);opacity:0;transform:translateY(4px);transition:opacity .4s .5s,transform .4s .5s}
.hw-dn-btn{all:unset;cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:500;border:1px solid #3A3F55;color:#fff;white-space:nowrap;transition:background .2s,border-color .2s}
.hw-dn-btn:hover{background:var(--hw-or);border-color:var(--hw-or)}
.hw-dn-btn:focus-visible{outline:2px solid var(--hw-pe);outline-offset:2px}
.hw-dn-ok{position:absolute;right:16px;top:50%;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hw-or);border:2px solid var(--hw-or);padding:6px 12px;transform:translateY(-50%) rotate(-8deg) scale(1.8);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.hw-dn-c.hw-paid{border-color:var(--hw-or);background:linear-gradient(90deg,rgba(255,91,26,.12),rgba(255,91,26,.02))}
.hw-dn-c.hw-paid .hw-dn-pc{color:var(--hw-or)}
.hw-dn-c.hw-paid .hw-dn-inv{opacity:1;transform:none}
.hw-dn-c.hw-paid .hw-dn-btn{visibility:hidden}
.hw-dn-c.hw-paid .hw-dn-ok{opacity:1;transform:translateY(-50%) rotate(-8deg) scale(1)}
.hw-dn-c.hw-next{border-color:#4A4F66}
.hw-dn-c.hw-next .hw-dn-btn{background:var(--hw-or);border-color:var(--hw-or)}
.hw-dn-reset{all:unset;cursor:pointer;justify-self:start;font-size:13.5px;color:var(--hw-mut);text-decoration:underline;text-underline-offset:3px;margin-top:4px}
.hw-dn-reset:focus-visible{outline:2px solid var(--hw-pe)}
@media (max-width:900px){.hw-dn{grid-template-columns:1fr}.hw-dn-vis{max-width:320px}}
@media (max-width:560px){.hw-dn-c{grid-template-columns:56px 1fr;padding:14px}.hw-dn-btn{grid-column:1/-1;justify-self:start}.hw-dn-c.hw-paid .hw-dn-btn{display:none}.hw-dn-pc{font-size:24px}.hw-dn-ok{top:22px;right:10px;font-size:11px}}

/* ───── principles: suspension bridge ───── */
.hw-br{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);grid-template-areas:"vis side" "btns btns";gap:16px clamp(20px,3vw,44px);align-items:center}
.hw-br-vis{grid-area:vis;background:#fff;border:1px solid #E2DAD0;padding:16px 10px 6px}
.hw-br-vis svg{width:100%;display:block}
.hw-br-water path{fill:none;stroke:#E2DAD0;stroke-width:1.5;animation:hwWave 7s linear infinite}
.hw-br-water path+path{animation-duration:10s}
.hw-br-tw{fill:#0B0C10}
.hw-br-main{fill:none;stroke:#0B0C10;stroke-width:4;stroke-linejoin:round}
.hw-br-c line{stroke:#B5AA9C;stroke-width:2;transition:stroke .35s,stroke-width .35s}
.hw-br-c line.hw-br-hit{stroke:transparent;stroke-width:26;cursor:pointer}
.hw-br-c circle{fill:#fff;stroke:#B5AA9C;stroke-width:1.5;cursor:pointer;transition:fill .35s,stroke .35s}
.hw-br-c text{font-size:13px;font-weight:700;fill:#4B4E58;text-anchor:middle;pointer-events:none}
.hw-br-c.hw-on line:first-child{stroke:#FF5B1A;stroke-width:4}
.hw-br-c.hw-on circle{fill:#FF5B1A;stroke:#FF5B1A}.hw-br-c.hw-on text{fill:#fff}
.hw-br-deck{fill:#0B0C10}.hw-br-lane{stroke:#FFA77F;stroke-width:1.5;stroke-dasharray:10 8}
.hw-br-car rect{fill:#FF5B1A}.hw-br-car text{font-size:11.5px;font-weight:600;fill:#fff;text-anchor:middle}
.hw-br-end{font-size:12px;fill:#8F8A80}
.hw-br-side{grid-area:side}
.hw-br-p{display:none}.hw-br-p.hw-on{display:block;animation:hwIn .45s both}
@keyframes hwIn{from{opacity:0;transform:translateY(8px)}}
.hw-br-p svg{width:44px;height:44px;fill:none;stroke:var(--hw-or);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;margin-bottom:12px}
.hw-br-p small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-deep)}
.hw-br-p h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em;margin:6px 0 10px;color:#0B0C10}
.hw-br-p p{font-size:16px;line-height:1.6;color:#4B4E58;margin:0}
.hw-br-btns{grid-area:btns;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.hw-br-btns button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid #D6D6D2;background:#fff;font-size:13.5px;line-height:1.3;color:#4B4E58;transition:all .25s}
.hw-br-btns button b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #B5AA9C;font-size:11px}
.hw-br-btns button[aria-pressed=true]{background:#0B0C10;border-color:#0B0C10;color:#fff}
.hw-br-btns button[aria-pressed=true] b{background:var(--hw-or);border-color:var(--hw-or)}
.hw-br-btns button:focus-visible{outline:2px solid var(--hw-or);outline-offset:2px}
@media (max-width:900px){.hw-br{grid-template-columns:1fr;grid-template-areas:"vis" "btns" "side"}.hw-br-btns{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hw-br-c text{font-size:18px}.hw-br-c circle{r:17}.hw-br-end{display:none}.hw-br-car text{font-size:14px}}

/* ───── need: rolodex ───── */
.hw-rx{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.hw-rx-idx{display:grid;gap:4px}
.hw-rx-idx button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:9px 12px;font-size:14.5px;color:#A3A8B8;border-left:2px solid var(--hw-ln);transition:color .25s,border-color .25s,background .25s}
.hw-rx-idx button b{width:24px;height:24px;display:grid;place-items:center;border:1px solid #3A3F55;font-size:11px;color:var(--hw-pe)}
.hw-rx-idx button[aria-pressed=true]{color:#fff;border-color:var(--hw-or);background:rgba(255,91,26,.07)}
.hw-rx-idx button[aria-pressed=true] b{background:var(--hw-or);border-color:var(--hw-or);color:#fff}
.hw-rx-idx button:focus-visible{outline:2px solid var(--hw-pe)}
.hw-rx-wheel{position:relative;height:420px;perspective:1000px;perspective-origin:50% 20%;outline:none;touch-action:pan-x;user-select:none}
.hw-rx-wheel:focus-visible{outline:2px solid var(--hw-pe);outline-offset:4px}
.hw-rx-drum{position:absolute;left:8%;right:12%;top:74px;height:240px;transform-style:preserve-3d}
.hw-rx-c{position:absolute;inset:0;transform-origin:50% 100%;background:#F5F2EE;color:#0B0C10;padding:22px 26px;border-radius:6px;backface-visibility:hidden;box-shadow:0 1px 0 #D6CBBE,0 20px 40px -24px rgba(0,0,0,.8);transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s;background-image:repeating-linear-gradient(transparent 0 31px,#E4DAD0 31px 32px);background-position:0 62px}
.hw-rx-c::before,.hw-rx-c::after{content:"";position:absolute;bottom:14px;width:16px;height:9px;border-radius:9px;background:#05060A}
.hw-rx-c::before{left:34%}.hw-rx-c::after{right:34%}
.hw-rx-c.hw-back{filter:brightness(.55)}.hw-rx-c.hw-back>*:not(.hw-rx-tab){opacity:.12}.hw-rx-c>*{transition:opacity .5s}
.hw-rx-tab{position:absolute;top:-16px;left:calc(var(--t,0) * 1%);width:34px;height:18px;background:var(--hw-or);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border-radius:4px 4px 0 0}
.hw-rx-c small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-deep)}
.hw-rx-c h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin:8px 0 10px}
.hw-rx-c p{font-size:15px;line-height:1.6;color:#4B4E58;margin:0;max-width:34em}
.hw-rx-c p b{color:#0B0C10}
.hw-rx-base{}
.hw-rx-rod{position:absolute;left:4%;right:8%;top:309px;height:12px;background:linear-gradient(#3A3F55,#161821);border-radius:5px;z-index:30}
.hw-rx-rod::before,.hw-rx-rod::after{content:"";position:absolute;top:-20px;width:16px;height:110px;background:linear-gradient(90deg,#161821,#2A2F44);border-radius:3px}
.hw-rx-rod::before{left:-6px}.hw-rx-rod::after{right:-6px}
.hw-rx-nav{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;gap:8px}
.hw-rx-nav button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border:1px solid #3A3F55;color:#fff;font-size:16px;transition:background .2s}
.hw-rx-nav button:hover{background:var(--hw-or);border-color:var(--hw-or)}
.hw-rx-nav button:focus-visible{outline:2px solid var(--hw-pe)}
@media (max-width:900px){.hw-rx{grid-template-columns:1fr}.hw-rx-idx{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hw-rx-idx{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px}.hw-rx-idx button{flex:none;border:1px solid var(--hw-ln);font-size:13px;padding:7px 10px}
  .hw-rx-wheel{height:430px}.hw-rx-drum{left:0;right:48px;height:260px;top:74px}.hw-rx-rod{top:329px;left:0;right:48px}.hw-rx-c{padding:20px 18px}.hw-rx-c p{font-size:14px}}

/* ───── launch: boom barrier ───── */
.hw-bb{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,44px);align-items:stretch}
.hw-bb-panel{background:#0B0D14;color:#E8EAF0;padding:18px;border:1px solid #1A1D2A;display:flex;flex-direction:column}
.hw-bb-ph{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-mut);padding-bottom:10px;border-bottom:1px solid var(--hw-ln)}
.hw-bb-cnt{font-style:normal;font:600 16px var(--f-flex);color:#fff;letter-spacing:0}
.hw-bb-panel ol{list-style:none;margin:6px 0 14px;padding:0}
.hw-bb-panel li{display:flex;gap:12px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid #161821;cursor:default}
.hw-bb-panel li i{flex:none;width:14px;height:14px;border-radius:50%;margin-top:3px;background:#1C2030;border:1px solid #3A3F55;transition:background .3s,box-shadow .3s}
.hw-bb-panel li b{display:block;font-size:13.5px;font-weight:500;color:#A3A8B8;transition:color .3s}
.hw-bb-panel li small{display:block;font-size:12px;color:#6E7286;max-height:0;overflow:hidden;transition:max-height .35s}
.hw-bb-panel li.hw-chk i{background:var(--hw-pe);animation:hwBlink .25s 3}
.hw-bb-panel li.hw-ok i{background:var(--hw-or);box-shadow:0 0 10px rgba(255,91,26,.8);border-color:var(--hw-or)}
.hw-bb-panel li.hw-ok b{color:#fff}
.hw-bb-panel li.hw-chk small,.hw-bb-panel li:hover small{max-height:40px}
@keyframes hwBlink{50%{opacity:.2}}
.hw-bb-run{all:unset;cursor:pointer;margin-top:auto;align-self:flex-start;padding:10px 16px;background:var(--hw-or);color:#fff;font-size:14px;font-weight:500}
.hw-bb-run:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hw-bb-vis{background:#fff;border:1px solid #D6D6D2;position:relative;padding:20px 20px 52px;display:flex;align-items:flex-end}
.hw-bb-vis svg{width:100%;display:block;overflow:hidden}
.hw-bb-site,.hw-bb-arm{transform-box:view-box;transform-origin:0 0}
.hw-bb-road{stroke:#0B0C10;stroke-width:2}.hw-bb-road2{stroke:#D6D6D2;stroke-width:1}.hw-bb-dash{stroke:#C9C2B8;stroke-width:3}
.hw-bb-site{transition:transform 1.8s cubic-bezier(.5,0,.3,1)}
.hw-bb-site rect{fill:#fff;stroke:#0B0C10;stroke-width:2}.hw-bb-site path{stroke:#0B0C10;stroke-width:2}.hw-bb-site circle{fill:#0B0C10}
.hw-bb-site rect.hw-f{fill:var(--hw-or);stroke:none}.hw-bb-site rect.hw-g{fill:#EDE6DD;stroke:none}.hw-bb-site circle.hw-w{fill:#fff;stroke:#0B0C10;stroke-width:3}
.hw-bb-site text{font-size:9px;fill:#4B4E58}
.hw-bb-booth rect{fill:#0B0C10}.hw-bb-booth rect.hw-win{fill:#2A2F44}
.hw-bb-lamps circle{fill:#2A2F44;transition:fill .3s}.hw-bb-lamps circle.hw-ok{fill:var(--hw-or)}
.hw-bb-arm{transition:transform 1s cubic-bezier(.5,-.2,.3,1.3)}
.hw-bb-arm rect{fill:#fff;stroke:#0B0C10;stroke-width:2}.hw-bb-arm .hw-st{stroke:var(--hw-or);stroke-width:7}.hw-bb-arm .hw-p{fill:#0B0C10}
.hw-bb-live rect{fill:#F5F2EE;stroke:#D6D6D2;stroke-width:1.5;transition:fill .4s}.hw-bb-live text{font-size:18px;font-weight:700;letter-spacing:.2em;fill:#C9C2B8;transition:fill .4s}.hw-bb-live path{stroke:#C9C2B8;stroke-width:3}
.hw-bb.hw-open .hw-bb-live rect{fill:var(--hw-or);stroke:var(--hw-or)}.hw-bb.hw-open .hw-bb-live text{fill:#fff}
.hw-bb-st{position:absolute;left:20px;bottom:16px;margin:0;font-size:14px;font-weight:500;color:#0B0C10;display:flex;gap:8px;align-items:center}
.hw-bb-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hw-pe)}
.hw-bb.hw-open .hw-bb-st::before{background:var(--hw-or)}
@media (max-width:900px){.hw-bb{grid-template-columns:1fr}.hw-bb-vis{order:-1}}

/* ───── after: lighthouse ───── */
.hw-lh{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,44px);align-items:center}
.hw-lh-vis{background:radial-gradient(ellipse at 20% 30%,#121522,#05060A 70%);border:1px solid #161821}
.hw-lh-vis svg{width:100%;display:block}
.hw-lh-waves path{fill:none;stroke:#22263A;stroke-width:1.5;animation:hwWave 6s linear infinite}
.hw-lh-waves path:nth-child(2){animation-duration:8s;stroke:#1A1D2A}.hw-lh-waves path:nth-child(3){animation-duration:10s;stroke:#161821}
@keyframes hwWave{to{transform:translateX(-100px)}}
.hw-lh-beam{fill:url(#hw-lh-bg);mix-blend-mode:screen}
.hw-lh-tower path{fill:#F5F2EE}.hw-lh-tower path.hw-b{fill:none;stroke:var(--hw-or);stroke-width:5}.hw-lh-tower .hw-lamp{fill:#FFE2D3;filter:drop-shadow(0 0 12px #FF5B1A)}.hw-lh-tower path.hw-roof{fill:var(--hw-or)}
.hw-lh-buoys g{cursor:pointer}
.hw-lh-buoys .hw-bd{fill:#1C2030;stroke:#4A4F66;stroke-width:1.5;transition:fill .3s,stroke .3s}
.hw-lh-buoys .hw-fl{fill:#4A4F66;transition:fill .3s}
.hw-lh-buoys text{font-size:12px;fill:#6E7286;text-anchor:middle;transition:fill .3s}
.hw-lh-buoys text.hw-n{font-size:11px;font-weight:700;fill:#05060A}
.hw-lh-buoys g.hw-lit .hw-bd{fill:var(--hw-or);stroke:var(--hw-pe)}.hw-lh-buoys g.hw-lit .hw-fl{fill:var(--hw-pe)}.hw-lh-buoys g.hw-lit text{fill:#fff}.hw-lh-buoys g.hw-lit text.hw-n{fill:#05060A}
.hw-lh-buoys g{animation:hwBob 3s ease-in-out infinite}
.hw-lh-buoys g:nth-child(2){animation-delay:-.8s}.hw-lh-buoys g:nth-child(3){animation-delay:-1.6s}.hw-lh-buoys g:nth-child(4){animation-delay:-2.2s}
@keyframes hwBob{50%{transform:translateY(-4px)}}
.hw-lh-ax{font-size:11px;fill:#6E7286;letter-spacing:.06em}
.hw-lh-list{display:grid;gap:8px}
.hw-lh-c{all:unset;cursor:pointer;display:block;padding:14px 16px;border:1px solid var(--hw-ln);background:#0B0D14;transition:border-color .3s,background .3s}
.hw-lh-c small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-mut)}
.hw-lh-c b{display:block;font-size:16px;font-weight:500;color:#C9CBD3;margin:3px 0 0}
.hw-lh-c span{display:block;font-size:14px;line-height:1.55;color:#A3A8B8;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .45s,margin .45s}
.hw-lh-c[aria-pressed=true]{border-color:var(--hw-or);background:linear-gradient(90deg,rgba(255,91,26,.1),rgba(255,91,26,0))}
.hw-lh-c[aria-pressed=true] small{color:var(--hw-pe)}.hw-lh-c[aria-pressed=true] b{color:#fff}
.hw-lh-c[aria-pressed=true] span{max-height:120px;opacity:1;margin-top:6px}
.hw-lh-c:focus-visible{outline:2px solid var(--hw-pe)}
@media (max-width:900px){.hw-lh{grid-template-columns:1fr}}
@media (max-width:560px){.hw-lh-buoys text{font-size:17px}.hw-lh-ax{font-size:16px}}

@media (prefers-reduced-motion:reduce){
  .hw-oc *,.hw-ts *,.hw-sq *,.hw-dn *,.hw-br *,.hw-rx *,.hw-bb *,.hw-lh *{animation:none!important;transition:none!important}
}
@media (max-width:860px){.hw-sq-you p{text-align:left}}
@media (max-width:600px){.hw-oc-dial{margin:0 7%}.hw-lh-buoys text:not(.hw-n){display:none}.hw-lh-buoys text.hw-n{font-size:15px}}
.hw-ts,.hw-dn-list{overflow:hidden}

/* QA fixes (Q3) */
.hw-oc{max-width:620px}
.hw-oc-dial{aspect-ratio:580/480}
.hw-oc-mid{width:48%}
@media (max-width:600px){.hw-oc-dial{aspect-ratio:1}.hw-oc-lbl{display:none}.hw-oc-pay text{font-size:15px}.hw-oc-mid{width:60%}}
@media (max-width:560px){
  .hw-dn-ok{top:auto;bottom:12px;transform:rotate(-6deg) scale(1.8)}
  .hw-dn-c.hw-paid .hw-dn-ok{transform:rotate(-6deg) scale(1)}
}
@media (max-width:560px){
  .hw-sq-tabs{grid-template-columns:repeat(5,138px)}
  .hw-dn-reset{padding:6px 0}
  .hw-rx-idx{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:6px}
  .hw-rx-idx button{font-size:12.5px;padding:7px 8px;gap:8px;min-height:30px}
  .hw-rx-idx button b{width:20px;height:20px;flex:none}
  .hw-rx-wheel{height:400px}.hw-rx-rod{left:6px;right:54px}
}
/* widths pass: six cable buttons wrapped to three lines at ~1024; use three columns until there is room for six */
@media (min-width:901px) and (max-width:1199px){.hw-br-btns{grid-template-columns:repeat(3,1fr)}}
/* phone font pass (+3px small text) */
@media (max-width:600px){
  .hw-oc-top{flex-wrap:wrap;gap:8px 12px}
  .hw-dn-inv{display:block}
  .hw-dn-c.hw-paid{padding-bottom:54px}
  .hw-lh-ax{font-size:22px}
}