/* Oxagen home page: the Works with marquee and the three product sections
   (Work, Mandates, Runs), each with its own animated picture. Drawn by
   source/home_sections.py and driven by assets/v5/home-areas.js. Every class
   starts with h-wm (marquee), h-wk (Work), h-md (Mandates), h-rt (Runs), or
   h-feature, and every value reads a token from oxagen.css, uikit.css or the
   l- palette in landing.css. */

/* --- Works with: two rows of logos that move with the page --------------------- */
@property --h-wm-skew{syntax:"<angle>";inherits:true;initial-value:0deg}
.h-wm{position:relative;padding-block:clamp(56px,7vw,92px);overflow:clip}
.h-wm-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--ox-space) * 10);align-items:end;margin-bottom:calc(var(--ox-space) * 10)}
.h-wm-head .l-h3{margin-top:calc(var(--ox-space) * 3);font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.08}
.h-wm-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3.5)}
.h-wm-copy .l-p{max-width:62ch}
.h-wm-copy code,.h-wm-card code{font-family:var(--font-mono);font-size:.9em;color:var(--l-fg)}
.h-wm-rows{--h-wm-gap:calc(var(--ox-space) * 3);display:grid;gap:calc(var(--ox-space) * 3)}
.h-wm-row{overflow:hidden;padding-block:calc(var(--ox-space) * 2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.h-wm-track{display:flex;gap:var(--h-wm-gap);width:max-content;margin:0;padding:0 var(--h-wm-gap) 0 0;list-style:none;animation:h-wm-slide var(--h-wm-dur,80s) linear infinite}
.h-wm-row[data-dir=right] .h-wm-track{animation-direction:reverse}
@keyframes h-wm-slide{to{translate:-50% 0}}
.h-wm-row:has(.h-wm-tile:hover) .h-wm-track,.h-wm-row:has(.h-wm-tile:focus-visible) .h-wm-track{animation-play-state:paused}
.h-wm[data-h-wm-open] .h-wm-track{animation-play-state:paused}

.h-wm-item{display:flex}
.h-wm-tile{--h-wm-lift:0px;--h-wm-tint:var(--h-wm-brand,var(--l-fg));display:inline-flex;align-items:center;gap:calc(var(--ox-space) * 2.5);height:52px;padding:0 calc(var(--ox-space) * 4.5) 0 calc(var(--ox-space) * 2);border:1px solid var(--l-line);border-radius:var(--r-pill);background:var(--l-bg);color:var(--l-body);font:inherit;font-size:var(--fs-ui);white-space:nowrap;cursor:pointer;translate:0 var(--h-wm-lift);transform:skewX(var(--h-wm-skew));transition:translate .35s var(--l-spring),border-color .25s,background-color .25s,color .25s,box-shadow .35s var(--l-ease)}
.h-wm-logo{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--l-line);background:var(--l-raised);color:var(--l-fg);transition:transform .45s var(--l-spring),color .25s}
.h-wm-logo>svg,.h-wm-logo>span,.h-wm-logo [data-harness-mark]{width:20px!important;height:20px!important}
.h-wm-logo svg{display:block;width:100%;height:100%}
.h-wm-tile[data-tone=color] .h-wm-logo>*{filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
.h-wm-tile[data-tone=mono] .h-wm-logo{color:color-mix(in oklab,var(--l-fg) 80%,transparent)}
.h-wm-tile:is(:hover,:focus-visible,[aria-expanded=true]){--h-wm-lift:-3px;color:var(--l-fg);border-color:color-mix(in oklab,var(--h-wm-tint) 55%,var(--l-line));background-color:color-mix(in oklab,var(--h-wm-tint) 9%,var(--l-bg));box-shadow:0 14px 34px -16px color-mix(in oklab,var(--h-wm-tint) 70%,transparent)}
.h-wm-tile:is(:hover,:focus-visible,[aria-expanded=true]) .h-wm-logo{transform:scale(1.12) rotate(-8deg)}
.h-wm-tile:is(:hover,:focus-visible,[aria-expanded=true])[data-tone=color] .h-wm-logo>*{filter:none;opacity:1}
.h-wm-tile:is(:hover,:focus-visible,[aria-expanded=true])[data-tone=mono] .h-wm-logo{color:var(--h-wm-tint)}
.h-wm-tile:active{--h-wm-lift:-1px}

/* The hover card: one per logo, in the top layer, anchored to the logo */
.h-wm-card{position:fixed;inset:auto;margin:0;width:min(370px,calc(100vw - 32px));max-height:none;padding:calc(var(--ox-space) * 4.5);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-raised);color:var(--l-body);box-shadow:var(--l-shadow),0 0 0 1px color-mix(in oklab,var(--h-wm-brand,var(--l-fg)) 14%,transparent);font-size:var(--fs-ui);line-height:1.55;opacity:0;translate:0 6px;scale:.97;transform-origin:50% 100%}
.h-wm-card:popover-open{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 2.5);opacity:1;translate:0 0;scale:1}
@starting-style{.h-wm-card:popover-open{opacity:0;translate:0 6px;scale:.97}}
@media (prefers-reduced-motion:no-preference){.h-wm-card{transition:opacity .22s var(--l-ease),translate .32s var(--l-spring),scale .32s var(--l-spring),display .22s allow-discrete,overlay .22s allow-discrete}}
@supports (position-area:top){.h-wm-card{position-area:top;position-try-fallbacks:flip-block,top span-right,top span-left,bottom span-right,bottom span-left;margin-block:calc(var(--ox-space) * 3)}}
.h-wm-card-head{display:flex;align-items:center;gap:calc(var(--ox-space) * 3)}
.h-wm-card-head .h-wm-logo{width:40px;height:40px}
.h-wm-card[data-tone=mono] .h-wm-card-head .h-wm-logo{color:var(--h-wm-brand,var(--l-fg))}
.h-wm-card-head b{display:block;font-weight:600;font-size:var(--fs-small);color:var(--l-fg)}
.h-wm-card-head small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-wm-what{margin:0;color:var(--l-fg)}
.h-wm-how{margin:0}
.h-wm-code{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 1.5);margin-top:calc(var(--ox-space) * 1)}
.h-wm-code>span{font-size:var(--fs-micro);color:var(--l-muted)}
.h-wm-code pre{margin:0;padding:calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3);border:1px solid var(--l-line);border-radius:calc(var(--r-lg) * .55);background:var(--l-bg);overflow-x:auto;scrollbar-width:none}
.h-wm-code code{font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1.6;color:var(--l-body);white-space:pre-wrap;overflow-wrap:anywhere}
.h-wm-code .c-fn{color:var(--l-fg);font-weight:600}
.h-wm-code .c-flag{color:color-mix(in oklab,var(--h-wm-brand,var(--l-fg)) 65%,var(--l-fg))}
.h-wm-code .c-dim{color:var(--l-muted);font-style:italic}

/* The rows slide in from opposite sides as the band scrolls into view */
@keyframes h-wm-enter{from{opacity:0;translate:var(--h-wm-from,0) 0}}
@media (prefers-reduced-motion:no-preference){
 @supports ((animation-timeline:view()) and (animation-range:entry)){
  .h-wm-row{animation:h-wm-enter linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  .h-wm-row[data-dir=left]{--h-wm-from:18%}
  .h-wm-row[data-dir=right]{--h-wm-from:-18%}
 }
}
@media (prefers-reduced-motion:reduce){
 .h-wm-track{animation:none;padding-inline:calc(var(--ox-space) * 4)}
 .h-wm-row{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
 .h-wm-item.is-dup{display:none}
 .h-wm-tile{transform:none}
}

/* --- Product: an intro, then one section per area ------------------------------ */
.h-prod-intro{padding-bottom:0}
.h-prod-intro .l-head{margin-bottom:0}
.h-feature{position:relative;padding-block:clamp(64px,8vw,112px)}
.h-feature.is-surface{background:var(--l-surface);border-block:1px solid var(--l-line)}
.h-feature-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:clamp(32px,4vw,52px)}
.h-feature-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:center}
.h-feature-grid.is-flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.h-feature-h{margin-top:calc(var(--ox-space) * 3);font-size:clamp(30px,3.4vw,46px)}
.h-feature-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3.5);min-width:0}
.h-feature-copy .h-feats{margin-top:calc(var(--ox-space) * 2)}
.h-feature-copy .h-link{margin-top:calc(var(--ox-space) * 1)}
.h-feature-copy code{font-family:var(--font-mono);font-size:.9em;color:var(--l-fg)}
.h-feature-visual{min-width:0}

/* --- Work: trackers into one workspace, down to the runs, priced ---------------- */
.h-wk{position:relative;display:grid;grid-template-columns:minmax(220px,280px) minmax(56px,.9fr) auto minmax(36px,.45fr) minmax(0,2.5fr);grid-template-areas:"pick . hub . items" "fore fore fore fore fore";align-items:center;row-gap:calc(var(--ox-space) * 7);padding:clamp(20px,3vw,32px);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);overflow:hidden}
.h-wk-beams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h-wk-beams path{fill:none;stroke-linecap:round}
.h-wk-beams .h-wk-base{stroke:var(--l-line);stroke-width:1.4}
.h-wk-beams .h-wk-draw{stroke:color-mix(in oklab,var(--l-fg) 45%,var(--l-line));stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--l-ease)}
.h-wk-beams .h-wk-pulse{stroke:var(--l-fg);stroke-width:2.6;stroke-dasharray:.05 .95;stroke-dashoffset:1;opacity:0;transition:opacity .4s}
.h-wk-beams .is-on .h-wk-draw{stroke-dashoffset:0}
.h-wk-beams .is-on .h-wk-pulse{opacity:.9;animation:h-wk-flow 2.6s linear infinite}
.h-wk-beams .is-flash .h-wk-pulse{animation-duration:1.1s;stroke-width:3.4}
@keyframes h-wk-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.h-wk-pick{grid-area:pick;position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(var(--ox-space) * 4.5)}
.h-wk-group{margin:0;padding:0;border:0;min-width:0}
.h-wk-group legend{margin-bottom:calc(var(--ox-space) * 2);padding:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted)}
.h-wk-chips{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 2)}
.h-wk-chip{display:flex;align-items:center;gap:calc(var(--ox-space) * 2.5);width:100%;height:38px;padding:0 calc(var(--ox-space) * 3.5) 0 calc(var(--ox-space) * 1.5);border:1px solid var(--l-line);border-radius:var(--r-pill);background:var(--l-bg);color:var(--l-muted);font:inherit;font-size:var(--fs-ui);text-align:left;cursor:pointer;transition:color .25s,border-color .25s,background-color .25s}
.h-wk-chip:hover{color:var(--l-fg);border-color:var(--rule)}
.h-wk-chip-mark{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--l-raised);color:var(--l-fg)}
.h-wk-chip-mark svg{width:15px;height:15px;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.h-wk-dot{margin-left:auto;width:9px;height:9px;flex:none;border-radius:50%;border:1.5px solid var(--l-line);transition:background-color .3s,border-color .3s,box-shadow .3s}
.h-wk-chip[aria-pressed=true]{color:var(--l-fg);border-color:color-mix(in oklab,var(--l-fg) 32%,var(--l-line))}
.h-wk-chip[aria-pressed=true] .h-wk-chip-mark svg{filter:none;opacity:1}
.h-wk-chip[aria-pressed=true] .h-wk-dot{background:var(--l-fg);border-color:var(--l-fg);box-shadow:0 0 0 4px color-mix(in oklab,var(--l-fg) 12%,transparent)}
.h-wk-hub{grid-area:hub;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--ox-space) * 1);min-width:150px;padding:calc(var(--ox-space) * 4.5) calc(var(--ox-space) * 4);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-raised);box-shadow:var(--l-shadow-sm);text-align:center}
.h-wk-hub::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 color-mix(in oklab,var(--l-fg) 30%,transparent)}
.h-wk-hub.is-ping::after{animation:h-wk-ping .9s var(--l-ease)}
@keyframes h-wk-ping{from{box-shadow:0 0 0 0 color-mix(in oklab,var(--l-fg) 32%,transparent)}to{box-shadow:0 0 0 16px transparent}}
.h-wk-hub-mark{display:block;width:44px;height:44px;margin-bottom:calc(var(--ox-space) * 1.5);color:var(--l-fg)}
.h-wk-hub-mark svg{display:block;width:100%;height:100%}
.h-wk-hub b{font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-wk-hub small{font-size:var(--fs-micro);color:var(--l-muted)}
.h-wk-count{margin-top:calc(var(--ox-space) * 2);padding:calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 2.5);border:1px solid var(--l-line);border-radius:var(--r-pill);font-size:var(--fs-micro);color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-wk-items{grid-area:items;position:relative;z-index:1;min-width:0;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden}
.h-wk-items-head,.h-wk-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 84px;gap:calc(var(--ox-space) * 3);align-items:center;padding:0 calc(var(--ox-space) * 4)}
.h-wk-items-head{height:38px;font-size:var(--fs-micro);color:var(--l-muted);border-bottom:1px solid var(--l-line)}
.h-wk-items-head span:last-child,.h-wk-est{text-align:right}
.h-wk-list{height:296px;margin:0;padding:0;list-style:none;overflow:hidden}
.h-wk-row{height:74px;border-bottom:1px solid var(--l-line);animation:h-wk-in .6s var(--l-spring) both}
.h-wk-row.is-out{animation:h-wk-out .35s var(--l-ease) both}
@keyframes h-wk-in{from{opacity:0;translate:0 -16px}}
@keyframes h-wk-out{to{opacity:0;translate:0 8px}}
.h-wk-src{display:flex;align-items:center;gap:calc(var(--ox-space) * 2.5);min-width:0}
.h-wk-mk{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--l-raised);color:var(--l-fg)}
.h-wk-mk svg{width:15px;height:15px}
.h-wk-src>span:last-child{min-width:0}
.h-wk-src small{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted)}
.h-wk-src b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-weight:500;font-size:var(--fs-ui);line-height:1.35;color:var(--l-fg)}
.h-wk-agent{display:grid;place-items:center}
.h-wk-agent [data-harness-mark],.h-wk-agent svg{width:22px!important;height:22px!important}
.h-wk-est b{display:block;font-family:var(--font-mono);font-weight:400;font-size:var(--fs-micro);color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-wk-est small{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted);font-variant-numeric:tabular-nums}
.h-wk-forecast{grid-area:fore;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:calc(var(--ox-space) * 4);align-items:end;padding-top:calc(var(--ox-space) * 5);border-top:1px solid var(--l-line)}
.h-wk-forecast b{display:block;font-family:var(--font-mono);font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.04em;line-height:1;color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-wk-forecast span{display:block;margin-top:calc(var(--ox-space) * 1.5);font-size:var(--fs-micro);color:var(--l-muted)}
.h-wk-forecast p{margin:0;font-size:var(--fs-micro);color:var(--l-muted)}

/* --- Mandates: each team owns a clause, a rule answers each request -------------- */
.h-md{position:relative;display:grid;grid-template-columns:minmax(150px,.7fr) minmax(64px,.45fr) minmax(0,1.7fr);grid-template-areas:"own . card";align-items:center}
.h-md-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h-md-lines path{fill:none;stroke-linecap:round}
.h-md-lines .h-wk-base{stroke:color-mix(in oklab,var(--l-fg) 32%,var(--l-line));stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--l-ease)}
.h-md-lines .is-drawn .h-wk-base{stroke-dashoffset:0}
.h-md-lines .h-wk-pulse{stroke:var(--l-fg);stroke-width:2.6;stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0}
.h-md-lines .is-on .h-wk-pulse{opacity:.95;animation:h-wk-flow 1.1s linear infinite}
.h-md-owners{grid-area:own;position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(var(--ox-space) * 5);margin:0;padding:0;list-style:none}
.h-md-owner{display:flex;align-items:center;gap:calc(var(--ox-space) * 2.5);padding:calc(var(--ox-space) * 2) calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 2) calc(var(--ox-space) * 2);border:1px solid var(--l-line);border-radius:var(--r-pill);background:var(--l-bg);transition:border-color .3s,box-shadow .3s}
.h-md-owner.is-on{border-color:color-mix(in oklab,var(--l-fg) 40%,var(--l-line));box-shadow:0 10px 30px -16px color-mix(in oklab,var(--l-fg) 50%,transparent)}
.h-md-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--l-raised);border:1px solid var(--l-line);font-size:var(--fs-micro);font-weight:600;color:var(--l-fg)}
.h-md-av svg{width:18px;height:18px}
.h-md-owner b{display:block;font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-md-owner small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-md-card{grid-area:card;position:relative;z-index:1;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);box-shadow:var(--l-shadow-sm);overflow:hidden}
.h-md-head{display:flex;align-items:center;gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line)}
.h-md-head [data-harness-mark]{width:26px!important;height:26px!important}
.h-md-head b{display:block;font-weight:600;color:var(--l-fg)}
.h-md-head small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-md-clauses{margin:0;padding:0;list-style:none}
.h-md-clause{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3.25) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line);font-size:var(--fs-micro);color:var(--l-body);transition:background-color .4s}
.h-md-clause::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--l-fg);transform:scaleY(0);transition:transform .35s var(--l-spring)}
.h-md-clause.is-on{background:color-mix(in oklab,var(--l-fg) 5%,transparent)}
.h-md-clause.is-on::before{transform:scaleY(1)}
.h-md-clause>b{font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-md-clause>em{font-style:normal;text-align:right;color:var(--l-muted)}
.h-md-clause>span{grid-column:1/-1}
.h-md-clause .h-meter,.h-md-clause .h-chips{display:grid}
.h-md-clause .h-chips{display:flex}
.h-md-clause [data-h-md-frames]{font-family:var(--font-mono);font-weight:400;color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-md-req{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 3);align-items:baseline;padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4);background:var(--l-surface)}
.h-md-req-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted)}
.h-md-ask{font-size:var(--fs-ui);color:var(--l-fg);transition:opacity .3s}
.h-md-req .l-req-answer{grid-column:1/-1;transition:opacity .35s var(--l-ease),translate .35s var(--l-ease)}
.h-md-req .l-req-answer.is-wait{opacity:0;translate:0 4px}
.h-md-ask.is-swap{opacity:0}
.is-surface .h-md-req{background:var(--l-raised)}

/* --- Runs: one run's record, filled as the page scrolls --------------------------- */
.h-rt{border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);box-shadow:var(--l-shadow-sm);overflow:hidden}
.h-rt-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(var(--ox-space) * 3);align-items:center;padding:calc(var(--ox-space) * 4) calc(var(--ox-space) * 4.5);border-bottom:1px solid var(--l-line)}
.h-rt-head [data-harness-mark]{width:28px!important;height:28px!important}
.h-rt-head b{display:block;font-weight:600;color:var(--l-fg)}
.h-rt-head small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-rt-total{text-align:right}
.h-rt-total b{font-family:var(--font-mono);font-weight:400;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h-rt-events{--h-rt-time:52px;position:relative;margin:0;padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 4.5) calc(var(--ox-space) * 2);list-style:none}
.h-rt-rail{position:absolute;left:calc(var(--ox-space) * 4.5 + var(--h-rt-time) + var(--ox-space) * 3 + 5px);top:calc(var(--ox-space) * 6);bottom:calc(var(--ox-space) * 7);width:2px;border-radius:2px;background:var(--l-line);overflow:hidden}
.h-rt-rail i{display:block;width:100%;height:100%;background:var(--l-fg);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.h-rt-ev{position:relative;display:grid;grid-template-columns:var(--h-rt-time) 12px minmax(0,1fr) auto;gap:calc(var(--ox-space) * 3);align-items:start;padding-block:calc(var(--ox-space) * 2.75);opacity:.36;transition:opacity .4s var(--l-ease)}
.h-rt-ev.is-on{opacity:1}
.h-rt-ev time{padding-top:2px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted);font-variant-numeric:tabular-nums}
.h-rt-node{position:relative;z-index:1;width:12px;height:12px;margin-top:5px;border-radius:50%;border:2px solid var(--l-line);background:var(--l-surface);transition:background-color .3s,border-color .3s,transform .45s var(--l-spring)}
.h-rt-ev.is-on .h-rt-node{border-color:var(--l-fg);background:var(--l-fg);transform:scale(1.08)}
.h-rt-text b{display:block;font-weight:500;font-size:var(--fs-ui);color:var(--l-fg)}
.h-rt-text small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-rt-cost{padding-top:2px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-rt-lock{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(var(--ox-space) * 3);align-items:center;padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4.5);border-top:1px solid var(--l-line);opacity:.4;transition:opacity .5s var(--l-ease)}
.h-rt-lock svg{width:26px;height:26px;fill:none;stroke:var(--l-fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h-rt-lock svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--l-ease)}
.h-rt-lock .h-rt-lock-arc{transition-delay:.35s}
.h-rt-lock.is-on{opacity:1}
.h-rt-lock.is-on svg *{stroke-dashoffset:0}
.h-rt-lock b{display:block;font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-rt-lock small{display:block;font-size:var(--fs-micro);color:var(--l-muted)}
.h-rt-lock code{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted)}

/* --- Below desktop -------------------------------------------------------------- */
@media (max-width:1100px){
 .h-feature-top,.h-feature-grid,.h-feature-grid.is-flip{grid-template-columns:1fr}
 .h-feature-grid.is-flip .h-feature-visual{order:2}
 .h-wm-head{grid-template-columns:1fr;gap:calc(var(--ox-space) * 4);align-items:start}
}
@media (max-width:860px){
 .h-wk{grid-template-columns:minmax(0,1fr);grid-template-areas:"pick" "hub" "items" "fore";row-gap:calc(var(--ox-space) * 9);justify-items:stretch}
 .h-wk-hub{justify-self:center}
 .h-wk-chips{flex-direction:row;flex-wrap:wrap}
 .h-wk-chip{width:auto}
 .h-wk-forecast{grid-template-columns:repeat(3,minmax(0,1fr))}
 .h-wk-forecast p{grid-column:1/-1}
 .h-md{grid-template-columns:minmax(0,1fr);grid-template-areas:"card"}
 .h-md-owners,.h-md-lines{display:none}
}
@media (max-width:760px){
 .h-wm{padding-block:calc(var(--ox-space) * 12)}
 .h-wm-head{margin-bottom:calc(var(--ox-space) * 6)}
 .h-wm-rows{gap:calc(var(--ox-space) * 1);--h-wm-gap:calc(var(--ox-space) * 2)}
 .h-wm-tile{height:40px;gap:calc(var(--ox-space) * 2);padding:0 calc(var(--ox-space) * 3.5) 0 calc(var(--ox-space) * 1.25);font-size:var(--fs-micro)}
 .h-wm-logo{width:30px;height:30px}
 .h-wm-logo>svg,.h-wm-logo>span,.h-wm-logo [data-harness-mark]{width:16px!important;height:16px!important}
 .h-wm-card,.h-wm-card:popover-open{position-area:none;inset:auto calc(var(--ox-space) * 3) max(calc(var(--ox-space) * 3),env(safe-area-inset-bottom,0px)) calc(var(--ox-space) * 3);width:auto;margin:0;transform-origin:50% 100%}
 .h-wk{padding:calc(var(--ox-space) * 4)}
 .h-wk-items-head,.h-wk-row{grid-template-columns:minmax(0,1fr) 30px 70px;padding:0 calc(var(--ox-space) * 3);gap:calc(var(--ox-space) * 2)}
 .h-wk-forecast b{font-size:22px}
 .h-rt-events{--h-rt-time:40px;padding-inline:calc(var(--ox-space) * 3.5)}
 .h-rt-rail{left:calc(var(--ox-space) * 3.5 + var(--h-rt-time) + var(--ox-space) * 3 + 5px)}
 .h-rt-ev{grid-template-columns:var(--h-rt-time) 12px minmax(0,1fr)}
 .h-rt-cost{grid-column:3}
 .h-rt-lock{grid-template-columns:auto minmax(0,1fr)}
 .h-rt-lock code{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
 .h-wk-beams .is-on .h-wk-pulse,.h-md-lines .is-on .h-wk-pulse{animation:none;opacity:0}
 .h-wk-row,.h-wk-row.is-out{animation:none}
}
html[data-motion=off] .h-wm-tile{transform:none}
.h-eu{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 2);margin:calc(var(--ox-space) * 3) 0 0;max-width:52ch}