/* Oxagen home page (06-home.html).
   The page follows the site map of 2026-11-02 (oxagen-sitemap.md on the
   desktop): Hero, Works with, Product areas, One work item, Roles,
   Industries, Research, Pricing, Demo. It keeps landing.css for the shared
   moments (glyph field, reveal, the Needs you deck, the scroll story, the
   rules sequence) and draws the new pictures here. Every class starts with
   h-, and every value reads a token from oxagen.css, uikit.css or the l-
   palette in landing.css. */

/* Page frame: the brand's 1180px wrap ---------------------------------- */
.l-wrap{width:min(var(--page-wrap,1180px),calc(100% - calc(var(--ox-space) * 16)))}
@media (max-width:760px){.l-wrap{width:calc(100% - calc(var(--ox-space) * 8))}}

/* Only the first eyebrow carries the gold square ------------------------ */
.l-section .l-eyebrow::before,.h-band .l-eyebrow::before{background:var(--l-muted);box-shadow:none}
.l-close .l-eyebrow::before,.h-demo .l-eyebrow::before,.h-manual .l-eyebrow::before{background:var(--l-muted);box-shadow:none}

/* Header: the column heads in the Product menu open the area pages ------ */
a.mm-h{display:block;text-decoration:none;color:var(--ink);transition:color .2s}
a.mm-h:hover{color:var(--accent-text)}
.mm-h small{display:block;margin-top:calc(var(--ox-space) * 0.5);font-family:var(--font-sans);font-size:var(--fs-micro);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.menu--list{width:min(560px,calc(100vw - 32px))}
.mm-cols--list{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.menu--list .mm-feat{align-self:stretch}
@media (max-width:1100px){.nav-cta .btn-primary{display:none}}

/* Hero: centred copy over the Runs page ------------------------------------ */
.h-hero{padding-bottom:0}
.h-hero .l-hero-bg{-webkit-mask-image:radial-gradient(90% 70% at 50% 20%,#000 30%,transparent 80%);mask-image:radial-gradient(90% 70% at 50% 20%,#000 30%,transparent 80%)}
.h-hero .l-hero-bg::after{background:radial-gradient(60% 45% at 50% 80%,var(--l-bg) 10%,transparent 70%)}
.h-hero-copy{display:flex;flex-direction:column;align-items:center;gap:calc(var(--ox-space) * 6.5);text-align:center}
.h-hero .l-h1{font-size:clamp(40px,5.2vw,74px);max-width:none}
.h-hero-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--ox-space) * 6.5)}
.h-hero .l-lead{max-width:60ch}
.h-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--ox-space) * 4)}

/* The Runs page. home-runs.js lays it out --h-app-w pixels wide and scales it
   to the stage by --h-app-z, never below --h-app-min, so it reads like a
   screenshot at every width. The stage keeps the page's top --h-app-h pixels
   and fades its lower edge into the next section. */
.h-runs{--u:var(--ox-space);--h-app-w:1360;--h-app-h:920;--h-app-min:.5;
  --h-app-fs:var(--fs-micro);--h-app-fs-sm:calc(var(--fs-micro) * 6 / 7);--h-app-fs-xs:calc(var(--fs-micro) * 11 / 14);
  --h-app-fs-stat:calc(var(--fs-small) * 11 / 8);--h-app-fs-big:calc(var(--fs-small) * 2);
  width:min(1280px,calc(100% - calc(var(--u) * 16)));margin:calc(var(--u) * 16) auto 0}
.h-runs-stage{position:relative;margin:0;aspect-ratio:var(--h-app-w) / var(--h-app-h);min-height:calc(var(--h-app-h) * var(--h-app-min) * 1px);overflow:hidden;overflow:clip;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);mask-image:linear-gradient(to bottom,#000 74%,transparent)}
.h-app{position:absolute;left:0;top:0;display:grid;grid-template-columns:calc(var(--u) * 55) minmax(0,1fr);width:calc(var(--h-app-w) * 1px);min-height:calc(var(--h-app-h) * 1px + calc(var(--u) * 40));
  transform:scale(var(--h-app-z,1));transform-origin:0 0;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden;
  color:var(--l-fg);font-family:var(--font-sans);font-size:var(--h-app-fs);line-height:1.35;text-align:left;font-variant-numeric:tabular-nums}
.h-app b{font-weight:500}
.h-app ul{margin:0;padding:0;list-style:none}
.h-app p{margin:0}
.h-app ins,.h-app del{text-decoration:none}
.h-app ins{color:var(--success)}
.h-app del{color:var(--label-red)}
.h-app-ic{width:calc(var(--u) * 4.5);height:calc(var(--u) * 4.5);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h-app-mark{display:inline-flex;width:calc(var(--u) * 4);height:calc(var(--u) * 4);flex:none}
.h-app-mark [data-harness-mark]{width:100%!important;height:100%!important}
.h-app [data-tone=red]{--tone:var(--label-red)}
.h-app [data-tone=blue]{--tone:var(--label-blue)}
.h-app [data-tone=teal]{--tone:var(--label-teal)}
.h-app [data-tone=amber]{--tone:var(--label-amber)}
.h-app [data-tone=carnelian]{--tone:var(--label-carnelian)}
.h-app [data-tone=gold]{--tone:var(--l-gold)}
.h-app [data-tone=grey]{--tone:var(--label-grey)}
.h-app [data-tone=indigo]{--tone:var(--label-indigo)}
.h-app [data-tone=jade]{--tone:var(--label-jade)}
.h-app [data-tone=pink]{--tone:var(--label-pink)}
.h-app [data-tone=aquamarine]{--tone:var(--label-aquamarine)}
.h-app [data-tone=peridot]{--tone:var(--label-peridot)}

/* Rail */
.h-app-rail{display:flex;flex-direction:column;gap:calc(var(--u) * 2);padding:calc(var(--u) * 5) calc(var(--u) * 3);border-right:1px solid var(--l-line);background:color-mix(in oklab,var(--l-surface) 55%,var(--l-bg))}
.h-app-brand{padding:0 calc(var(--u) * 2) calc(var(--u) * 2);color:var(--l-fg)}
.h-app-brand svg{display:block;width:auto;height:calc(var(--u) * 6)}
.h-app-ws,.h-app-find{display:flex;align-items:center;gap:calc(var(--u) * 2.5);padding:calc(var(--u) * 2.5) calc(var(--u) * 3);border:1px solid var(--l-line);border-radius:calc(var(--u) * 3);background:var(--l-bg)}
.h-app-ws b{flex:1;font-weight:600}
.h-app-ws .h-app-ic{color:var(--l-muted)}
.h-app-find{border-radius:var(--r-pill);color:var(--l-muted)}
.h-app-tile{display:inline-grid;place-items:center;width:calc(var(--u) * 6);height:calc(var(--u) * 6);flex:none;border-radius:calc(var(--u) * 1.5);background:var(--l-gold);color:var(--ox-dark);font-family:var(--font-mono);font-size:var(--h-app-fs-xs);font-weight:700}
.h-app-tile.is-sm{width:calc(var(--u) * 5);height:calc(var(--u) * 5)}
.h-app-group{display:grid;gap:calc(var(--u) * 0.5)}
.h-app-group-h{padding:calc(var(--u) * 3) calc(var(--u) * 2.5) calc(var(--u) * 1.5);font-family:var(--font-mono);font-size:var(--h-app-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted)}
.h-app-nav{display:flex;align-items:center;gap:calc(var(--u) * 2.5);padding:calc(var(--u) * 2) calc(var(--u) * 2.5);border-radius:calc(var(--u) * 2.5);color:var(--l-body)}
.h-app-nav .h-app-ic{color:var(--l-muted)}
.h-app-nav em{margin-left:auto;font-style:normal;font-size:var(--h-app-fs-sm);color:var(--label-blue)}
.h-app-nav.is-current{background:color-mix(in oklab,var(--l-fg) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--l-gold) 55%,transparent);color:var(--l-fg)}
.h-app-nav.is-current .h-app-ic{color:var(--l-fg)}

/* Top bar */
.h-app-main{min-width:0}
.h-app-top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 15);padding:0 calc(var(--u) * 6);border-bottom:1px solid var(--l-line)}
.h-app-crumb{display:inline-flex;align-items:center;gap:calc(var(--u) * 2);padding:calc(var(--u) * 1.5) calc(var(--u) * 3.5);border:1px solid var(--l-line);border-radius:var(--r-pill);color:var(--l-body)}
.h-app-crumb .h-app-ic{width:calc(var(--u) * 4);height:calc(var(--u) * 4);color:var(--l-muted)}
.h-app-crumb b{font-weight:600;color:var(--l-fg)}
.h-app-top-end{display:flex;align-items:center;gap:calc(var(--u) * 2.5)}
.h-app-round{display:inline-grid;place-items:center;width:calc(var(--u) * 9);height:calc(var(--u) * 9);border:1px solid var(--l-line);border-radius:var(--r-pill);color:var(--l-body)}
.h-app-round.is-avatar{font-size:var(--h-app-fs-sm);font-weight:600;color:var(--l-fg)}
.h-app-waiting{display:inline-flex;align-items:center;gap:calc(var(--u) * 2);height:calc(var(--u) * 9);padding:0 calc(var(--u) * 3.5);border:1px solid color-mix(in oklab,var(--label-blue) 45%,transparent);border-radius:var(--r-pill);background:color-mix(in oklab,var(--label-blue) 8%,transparent);color:var(--label-blue);transition:color .4s,border-color .4s,background .4s}
.h-app-waiting i{width:calc(var(--u) * 2);height:calc(var(--u) * 2);border-radius:50%;background:currentColor}
.h-app-waiting.is-quiet{border-color:var(--l-line);background:none;color:var(--l-muted)}

/* Panels */
.h-app-body{display:grid;gap:calc(var(--u) * 4);padding:calc(var(--u) * 5) calc(var(--u) * 6)}
.h-app-three{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr);gap:calc(var(--u) * 4);height:calc(var(--u) * 80)}
.h-app-panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--l-line);border-radius:calc(var(--u) * 3.5);background:var(--l-surface);overflow:hidden}
.h-app-panel-h{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 3);padding:calc(var(--u) * 3.5) calc(var(--u) * 4.5);border-bottom:1px solid var(--l-line)}
.h-app-panel-h b{font-weight:600}
.h-app-panel-h span{display:inline-flex;align-items:center;gap:calc(var(--u) * 2);font-size:var(--h-app-fs-sm);color:var(--l-body)}
.h-app-panel-b{display:flex;flex:1;flex-direction:column;gap:calc(var(--u) * 3);min-height:0;padding:calc(var(--u) * 4) calc(var(--u) * 4.5)}
.h-app-big{font-size:var(--h-app-fs-big);line-height:1;letter-spacing:-.02em}
.h-app-stack{display:flex;gap:calc(var(--u) * 0.5);height:calc(var(--u) * 2.5);border-radius:var(--r-pill);overflow:hidden}
.h-app-stack i{background:var(--tone)}
.h-app-legend{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 1) calc(var(--u) * 4);font-size:var(--h-app-fs-sm);color:var(--l-body)}
.h-app-legend span{display:inline-flex;align-items:center;gap:calc(var(--u) * 1.5)}
.h-app-legend span::before{content:"";width:calc(var(--u) * 2.5);height:calc(var(--u) * 2.5);border-radius:calc(var(--u) * 0.5);background:var(--tone)}
.h-app-legend b{color:var(--l-fg)}
.h-app-states{display:grid}
.h-app-states li{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u) * 1) 0}
.h-app-states li+li{border-top:1px solid color-mix(in oklab,var(--l-line) 60%,transparent)}
.h-app-states span{display:inline-flex;align-items:center;gap:calc(var(--u) * 2.5)}

/* State glyphs and the spinner */
@keyframes h-spin{to{transform:rotate(360deg)}}
.h-app-glyph,.h-app-spin{position:relative;display:inline-block;width:calc(var(--u) * 3.5);height:calc(var(--u) * 3.5);flex:none}
.h-app-spin,.h-app-glyph[data-state=working]{border:2px solid color-mix(in oklab,var(--label-blue) 30%,transparent);border-top-color:var(--label-blue);border-radius:50%;animation:h-spin 1s linear infinite}
.h-app-glyph[data-state=parked]{transform:rotate(45deg) scale(.72);background:var(--warning)}
.h-app-glyph[data-state=paused]{transform:rotate(45deg) scale(.72);border:2px solid var(--warning)}
.h-app-glyph[data-state=offline]{transform:rotate(45deg) scale(.72);background:var(--label-red)}

/* Waiting on a person */
.h-app-asks{display:grid;gap:calc(var(--u) * 2.5)}
.h-app-asks li{padding:calc(var(--u) * 2.5) calc(var(--u) * 3.5);border:1px solid var(--l-line);border-left:3px solid var(--warning);border-radius:calc(var(--u) * 2.5);background:var(--l-bg);animation:h-app-in .5s var(--l-spring)}
.h-app-ask-h{display:flex;align-items:center;gap:calc(var(--u) * 2);font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-ask-h span:not(.h-app-mark){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--l-body)}
.h-app-asks b{display:block;margin-top:calc(var(--u) * 1.5);font-weight:600}
.h-app-asks p{margin-top:calc(var(--u) * 0.5);font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-ask-btns{display:flex;justify-content:flex-end;gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 2)}
.h-app-btn{display:inline-flex;align-items:center;height:calc(var(--u) * 7);padding:0 calc(var(--u) * 3);border:1px solid var(--l-line);border-radius:var(--r-pill);font-size:var(--h-app-fs-sm);font-weight:600}
.h-app-btn.is-ink{border-color:var(--l-fg);background:var(--l-fg);color:var(--l-bg)}
.h-app-btn.is-press{animation:h-app-press .6s var(--l-ease)}
.h-app-empty{display:grid;flex:1;place-content:center;gap:calc(var(--u) * 1.5);text-align:center}
.h-app-empty b{font-weight:600}
.h-app-empty span{font-size:var(--h-app-fs-sm);color:var(--l-muted)}
@keyframes h-app-in{from{opacity:0;transform:translateY(calc(var(--u) * 3))}}
@keyframes h-app-press{40%{transform:scale(.93);box-shadow:0 0 0 calc(var(--u) * 1.5) color-mix(in oklab,var(--l-fg) 20%,transparent)}}

/* Spend */
.h-app-bars{position:relative;display:grid;flex:1;grid-template-columns:repeat(14,minmax(0,1fr));align-items:end;gap:calc(var(--u) * 2);padding-bottom:calc(var(--u) * 5)}
.h-app-bars::before{content:"";position:absolute;inset:0 0 calc(var(--u) * 5);background:linear-gradient(to bottom,color-mix(in oklab,var(--l-line) 60%,transparent) 1px,transparent 1px) 0 0 / 100% 25%;pointer-events:none}
.h-app-bar{position:relative;display:flex;align-items:flex-end;height:100%}
.h-app-bar i{width:100%;border-radius:calc(var(--u) * 0.75) calc(var(--u) * 0.75) 0 0;background:var(--label-jade);transition:height .6s var(--l-ease)}
.h-app-bar.is-today i{background:var(--label-indigo)}
.h-app-bar small{position:absolute;top:100%;left:50%;margin-top:calc(var(--u) * 1.5);transform:translateX(-50%);white-space:nowrap;font-size:var(--h-app-fs-xs);color:var(--l-muted)}
.h-app-budget{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u) * 2);padding:calc(var(--u) * 3) calc(var(--u) * 4.5);border-top:1px solid var(--l-line);font-size:var(--h-app-fs-sm);color:var(--l-body)}
.h-app-budget b{color:var(--l-fg)}
.h-app-meter{grid-column:1/-1;height:calc(var(--u) * 1.5);border-radius:var(--r-pill);background:color-mix(in oklab,var(--l-fg) 10%,transparent);overflow:hidden}
.h-app-meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--l-fg)}

/* Tabs, search, and the table */
.h-app-tools{display:flex;align-items:center;gap:calc(var(--u) * 3)}
.h-app-tabs{display:inline-flex;padding:calc(var(--u) * 1);border:1px solid var(--l-line);border-radius:var(--r-pill);background:var(--l-surface)}
.h-app-tabs span{padding:calc(var(--u) * 1.5) calc(var(--u) * 3.5);border-radius:var(--r-pill);color:var(--l-body)}
.h-app-tabs em{margin-left:calc(var(--u) * 1.5);font-style:normal;color:var(--l-muted)}
.h-app-tabs .is-on{background:color-mix(in oklab,var(--l-fg) 9%,transparent);color:var(--l-fg)}
.h-app-tabs .is-live em{color:var(--success)}
.h-app-search,.h-app-tool{display:inline-flex;align-items:center;gap:calc(var(--u) * 2);height:calc(var(--u) * 10);padding:0 calc(var(--u) * 4);border:1px solid var(--l-line);border-radius:var(--r-pill);color:var(--l-body)}
.h-app-search{width:calc(var(--u) * 60);color:var(--l-muted)}
.h-app-tool em{font-style:normal;color:var(--l-muted)}
.h-app-tool.is-end{margin-left:auto}
.h-app-table{border:1px solid var(--l-line);border-radius:calc(var(--u) * 3.5);background:var(--l-surface)}
.h-app-tr{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.85fr) minmax(0,1.7fr) minmax(0,1.05fr) minmax(0,1.6fr) minmax(0,.75fr);align-items:center;gap:calc(var(--u) * 4);padding:0 calc(var(--u) * 4.5)}
.h-app-tr.is-head{height:calc(var(--u) * 11);color:var(--l-muted)}
.h-app-tr.is-row{height:calc(var(--u) * 16);border-top:1px solid var(--l-line)}
.h-app-grp{display:flex;align-items:center;gap:calc(var(--u) * 2);height:calc(var(--u) * 9);padding:0 calc(var(--u) * 4.5);border-top:1px solid var(--l-line);background:color-mix(in oklab,var(--l-fg) 3%,transparent)}
.h-app-grp b{color:var(--success)}
.h-app-grp span{font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-name{min-width:0}
.h-app-name>b,.h-app-act b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.h-app-act b{font-weight:400}
.h-app-chips{display:flex;gap:calc(var(--u) * 1.5);margin-top:calc(var(--u) * 1.5)}
.h-app-chip{display:inline-flex;align-items:center;gap:calc(var(--u) * 1.5);height:calc(var(--u) * 6);padding:0 calc(var(--u) * 2);border:1px solid var(--l-line);border-radius:calc(var(--u) * 1.5);font-size:var(--h-app-fs-xs);color:var(--l-body)}
.h-app-chip .h-app-mark{width:calc(var(--u) * 3.5);height:calc(var(--u) * 3.5)}
.h-app-chip.is-model{font-family:var(--font-mono)}
.h-app-kind{display:inline-flex;align-items:center;gap:calc(var(--u) * 1.5);justify-self:start;height:calc(var(--u) * 6.5);padding:0 calc(var(--u) * 2.5);border:1px solid color-mix(in oklab,var(--tone) 60%,transparent);border-radius:calc(var(--u) * 1.5);background:color-mix(in oklab,var(--tone) 8%,transparent);color:var(--tone);font-size:var(--h-app-fs-sm);white-space:nowrap}
.h-app-kind .h-app-ic{width:calc(var(--u) * 3.5);height:calc(var(--u) * 3.5)}
.h-app-state{display:inline-flex;align-items:center;gap:calc(var(--u) * 2)}
.h-app-state[data-state=parked]{color:var(--warning)}
.h-app-cost{display:inline-flex;align-items:center;gap:calc(var(--u) * 1);justify-self:end;height:calc(var(--u) * 7);padding:0 calc(var(--u) * 2.5);border-radius:calc(var(--u) * 2);background:color-mix(in oklab,var(--l-fg) 8%,transparent);color:var(--l-body)}
.h-app-cost .h-app-ic{width:calc(var(--u) * 3.5);height:calc(var(--u) * 3.5);color:var(--l-muted)}
.h-app-dash{color:var(--l-muted)}
.h-app-act{min-width:0}
.h-app-act small{display:flex;gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 1);overflow:hidden;white-space:nowrap;font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-tok,.h-app-lines{position:relative;display:grid;justify-items:start;gap:calc(var(--u) * 0.5)}
.h-app-tok small{padding-left:calc(var(--u) * 2.5);font-size:var(--h-app-fs-xs);color:var(--l-muted)}
.h-app-tok-pill,.h-app-lines-pill{display:inline-flex;align-items:center;gap:calc(var(--u) * 2);height:calc(var(--u) * 7);padding:0 calc(var(--u) * 2.5);border:1px solid var(--l-line);border-radius:var(--r-pill);background:var(--l-bg);transition:border-color .3s,box-shadow .3s}
.h-app-tok-pill>i{width:calc(var(--u) * 7);height:calc(var(--u) * 1.5);border-radius:var(--r-pill);background:color-mix(in oklab,var(--label-pink) 25%,transparent);overflow:hidden}
.h-app-tok-pill>i>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--label-pink)}
.h-app-tok.is-on .h-app-tok-pill{border-color:var(--l-fg)}
.h-app-lines-pill{gap:calc(var(--u) * 1.25);padding:0 calc(var(--u) * 2);font-size:var(--h-app-fs-sm)}
.h-app-lines-pill .h-app-ic{width:calc(var(--u) * 3.5);height:calc(var(--u) * 3.5);color:var(--l-muted)}
.h-app-lines.is-on .h-app-lines-pill{border-color:var(--l-gold);box-shadow:0 0 0 1px var(--l-gold)}
.h-app-blocks{display:inline-flex;gap:calc(var(--u) * 0.5)}
.h-app-blocks i{width:calc(var(--u) * 1.5);height:calc(var(--u) * 2.5);border-radius:calc(var(--u) * 0.5);background:var(--label-red)}
.h-app-blocks i.is-add{background:var(--success)}
.h-app-tier{display:inline-flex;align-items:center;justify-self:start;height:calc(var(--u) * 6);padding:0 calc(var(--u) * 2);border:1px solid color-mix(in oklab,var(--label-green) 50%,transparent);border-radius:calc(var(--u) * 1.5);background:color-mix(in oklab,var(--label-green) 8%,transparent);color:var(--label-green);font-size:var(--h-app-fs-sm)}

/* The Tokens popover and the Lines tooltip open above their cells */
.h-app-pop,.h-app-tip{position:absolute;bottom:calc(100% + calc(var(--u) * 2));z-index:5;border:1px solid var(--l-line);border-radius:calc(var(--u) * 4);background:var(--l-raised);box-shadow:var(--l-shadow);opacity:0;transform:translateY(calc(var(--u) * 2)) scale(.98);transform-origin:50% 100%;transition:opacity .35s var(--l-ease),transform .45s var(--l-spring);pointer-events:none}
.h-app-pop.is-on,.h-app-tip.is-on{opacity:1;transform:none}
.h-app-pop{right:calc(var(--u) * -14);width:calc(var(--u) * 96);padding:calc(var(--u) * 4.5)}
.h-app-pop-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:calc(var(--u) * 3)}
.h-app-pop-h>.h-app-ic{color:var(--l-muted)}
.h-app-pop-ic{display:inline-grid;place-items:center;width:calc(var(--u) * 10);height:calc(var(--u) * 10);border:1px solid var(--l-line);border-radius:calc(var(--u) * 2.5)}
.h-app-pop-h b{font-weight:600}
.h-app-pop-h small{display:block;margin-top:calc(var(--u) * 0.5);font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-pop-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:calc(var(--u) * 5) 0 calc(var(--u) * 4)}
.h-app-pop-stats b{display:block;font-size:var(--h-app-fs-stat);line-height:1.1}
.h-app-pop-stats small{font-size:var(--h-app-fs-sm);color:var(--l-muted)}
.h-app-pop-parts{display:grid;gap:calc(var(--u) * 2.5)}
.h-app-pop-parts li{display:grid;grid-template-columns:calc(var(--u) * 2.5) calc(var(--u) * 23) minmax(0,1fr) calc(var(--u) * 19) calc(var(--u) * 11);align-items:center;gap:calc(var(--u) * 2)}
.h-app-pop-parts li>i{height:calc(var(--u) * 2.5);border-radius:calc(var(--u) * 0.5);background:var(--tone)}
.h-app-pop-bar{height:calc(var(--u) * 1.5);border-radius:var(--r-pill);background:color-mix(in oklab,var(--l-fg) 10%,transparent);overflow:hidden}
.h-app-pop-bar i{display:block;min-width:calc(var(--u) * 1);height:100%;border-radius:var(--r-pill);background:var(--tone)}
.h-app-pop-parts b{font-weight:400;text-align:right}
.h-app-pop-parts small{text-align:right;color:var(--l-muted)}
.h-app-pop-foot{display:flex;gap:calc(var(--u) * 3);margin-top:calc(var(--u) * 4);color:var(--l-muted)}
.h-app-pop-foot b{color:var(--l-fg)}
.h-app-tip{right:calc(var(--u) * -6);width:calc(var(--u) * 78);padding:calc(var(--u) * 3.5) calc(var(--u) * 4)}
.h-app-tip b{display:block;font-family:var(--font-mono);font-size:var(--h-app-fs-xs);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--l-muted)}
.h-app-tip div{display:flex;gap:calc(var(--u) * 2.5);margin-top:calc(var(--u) * 3);color:var(--l-body)}

@media (prefers-reduced-motion:reduce){.h-app-spin,.h-app-glyph,.h-app-asks li,.h-app-btn{animation:none}}
html[data-motion=off] .h-app-spin,html[data-motion=off] .h-app-glyph{animation-play-state:paused}

/* Works with ---------------------------------------------------------------- */
.h-band{padding-block:calc(var(--ox-space) * 10);border-block:1px solid var(--l-line);background:var(--l-surface)}
.h-works{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--ox-space) * 10);align-items:center}
.h-works-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3)}
.h-works-copy .l-h3{font-family:var(--font-heading);font-weight:400;font-size:var(--fs-card);letter-spacing:-.02em}
.h-works-copy .l-p{max-width:60ch}
.h-works .l-marks-row{gap:calc(var(--ox-space) * 4) calc(var(--ox-space) * 8)}
.h-works .l-mark{color:var(--l-body)}
.h-works .l-mark svg{width:40px;height:40px}
.h-link{display:inline-flex;align-items:center;gap:calc(var(--ox-space) * 1.5);width:max-content;color:var(--l-gold-text);font-size:var(--fs-ui);border-bottom:1px solid color-mix(in oklab,var(--l-gold) 40%,transparent);padding-bottom:2px;transition:border-color .2s,color .2s}
.h-link:hover{border-color:var(--l-gold)}
.h-link::after{content:"→";transition:transform .2s var(--l-ease)}
.h-link:hover::after{transform:translateX(3px)}

/* Product areas: three cards in the order of the operator's day ------------- */
.h-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--ox-space) * 4.5);align-items:stretch}
.h-area{position:relative;display:flex;flex-direction:column;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);overflow:hidden;transition:border-color .3s var(--l-ease)}
.h-area:hover{border-color:color-mix(in oklab,var(--l-fg) 22%,var(--l-line))}
.h-area-visual{position:relative;height:400px;padding:calc(var(--ox-space) * 5) calc(var(--ox-space) * 5) 0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent);border-bottom:1px solid var(--l-line)}
.h-area-visual .l-part{font-size:13.5px}
.h-area-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 6) calc(var(--ox-space) * 6) calc(var(--ox-space) * 6.5);flex:1}
.h-area-name{margin:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted)}
.h-area-line{margin:0;font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.12;letter-spacing:-.03em;color:var(--l-fg);text-wrap:balance}
.h-area-copy .l-p{font-size:var(--fs-ui)}
.h-feats{display:flex;flex-direction:column;margin:calc(var(--ox-space) * 1) 0 0;padding:0;list-style:none;border-top:1px solid var(--l-line)}
.h-feats a{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--ox-space) * 2.5) 0;border-bottom:1px solid var(--l-line);color:var(--l-body);font-size:var(--fs-ui);transition:color .2s}
.h-feats a::after{content:"→";color:var(--l-muted);transition:transform .2s var(--l-ease),color .2s}
.h-feats a:hover{color:var(--l-fg)}
.h-feats a:hover::after{transform:translateX(3px);color:var(--l-fg)}
.h-area .h-link{margin-top:auto;padding-top:calc(var(--ox-space) * 3)}

/* Work: the trackers feed one checklist that moves through its states */
.h-feed{display:flex;justify-content:space-between;gap:calc(var(--ox-space) * 2);padding:0 calc(var(--ox-space) * 2)}
.h-feed span{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--l-line);border-radius:50%;background:var(--l-bg);color:var(--l-fg)}
.h-feed svg{width:18px;height:18px}
.h-beams{display:block;width:100%;height:46px;overflow:visible}
.h-beams path{fill:none;stroke:var(--l-line);stroke-width:1.2}
.h-beams .h-pulse{stroke:var(--l-gold);stroke-width:1.6;stroke-dasharray:10 160;stroke-linecap:round;animation:h-flow 3.2s linear infinite}
@keyframes h-flow{from{stroke-dashoffset:170}to{stroke-dashoffset:0}}
.h-states{display:grid}
.h-states>*{grid-area:1/1;opacity:0;transition:opacity .7s var(--l-ease)}
.h-states>.is-on{opacity:1}
.h-states-tag{display:flex;justify-content:center;gap:calc(var(--ox-space) * 3);margin:calc(var(--ox-space) * 2) 0 calc(var(--ox-space) * 3);font-size:var(--fs-micro);color:var(--l-muted)}
.h-states-tag i{font-style:normal;transition:color .3s}
.h-states-tag i.is-on{color:var(--l-fg)}

/* Mandates: the four clauses and who sets each */
.h-mandate{border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden}
.h-mandate-head{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line)}
.h-mandate-head b{font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-mandate-head b{min-width:0}
.h-mandate-head span{flex:none;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted);white-space:nowrap}
.h-clauses{margin:0;padding:0;list-style:none}
.h-clause{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--ox-space) * 1) calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line)}
.h-clause:last-child{border-bottom:0}
.h-clause b{font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-clause em{font-style:normal;font-size:var(--fs-micro);color:var(--l-muted);text-align:right}
.h-clause>span{grid-column:1/-1;font-size:var(--fs-micro);color:var(--l-body)}
.h-meter{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--ox-space) * 3);align-items:center}
.h-meter i{position:relative;display:block;height:6px;border-radius:var(--r-pill);background:var(--l-line);overflow:hidden}
.h-meter i::after{content:"";position:absolute;inset:0;width:58%;border-radius:inherit;background:var(--l-fg)}
.h-meter span{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-body);font-variant-numeric:tabular-nums}
.h-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:calc(var(--ox-space) * 1.5)}
.h-chips span{padding:calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 2);border:1px solid var(--l-line);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-body)}
.h-area .l-reqs{margin-top:calc(var(--ox-space) * 3.5)}
.h-area .l-req{padding:calc(var(--ox-space) * 2) calc(var(--ox-space) * 3)}

/* Runs: what one run's record holds, then its spend figures */
.h-area .h-runs .l-part{zoom:.92;margin-top:calc(var(--ox-space) * 3.5)}
.h-recsum{border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden}
.h-recsum dl{margin:0}
.h-recsum dl>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 2.25) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line)}
.h-recsum dt{font-size:var(--fs-micro);color:var(--l-muted)}
.h-recsum dd{margin:0;font-size:var(--fs-micro);color:var(--l-fg)}
.h-recsum-foot{display:flex;align-items:center;gap:calc(var(--ox-space) * 2);padding:calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 4);font-size:var(--fs-micro);color:var(--l-fg)}
.h-recsum-foot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* One work item: the scroll story ------------------------------------------- */
.h-story .l-story-step{scroll-margin-top:30vh}
.h-step-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--ox-space) * 3);margin-bottom:calc(var(--ox-space) * 3)}
.h-step-head .l-small{margin:0}
.h-area-tag{display:inline-flex;align-items:center;gap:calc(var(--ox-space) * 1.5);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-body);transition:border-color .2s,color .2s}
.h-area-tag:hover{border-color:var(--l-fg);color:var(--l-fg)}
.h-area-tag::after{content:"→"}
.h-issue{max-width:560px;padding:calc(var(--ox-space) * 5);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);box-shadow:var(--l-shadow-sm)}
.h-issue-top{display:flex;align-items:center;gap:calc(var(--ox-space) * 2.5);font-size:var(--fs-micro);color:var(--l-muted)}
.h-issue-top svg{width:18px;height:18px}
.h-issue-top b{font-family:var(--font-mono);font-weight:400;color:var(--l-body)}
.h-issue h4{margin:calc(var(--ox-space) * 3) 0 0;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-lead);color:var(--l-fg)}
.h-issue p{margin:calc(var(--ox-space) * 2) 0 0;font-size:var(--fs-ui);color:var(--l-body)}
.h-issue-meta{display:flex;flex-wrap:wrap;gap:calc(var(--ox-space) * 2);margin-top:calc(var(--ox-space) * 4)}
.h-issue-meta span{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-body)}
.h-handoff{display:flex;align-items:center;gap:calc(var(--ox-space) * 3);max-width:560px;margin-top:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 4);border:1px dashed var(--l-line);border-radius:var(--r-lg);font-size:var(--fs-ui);color:var(--l-body)}
.h-handoff svg{width:22px;height:22px;flex:none}
.h-handoff b{font-family:var(--font-mono);font-weight:400;color:var(--l-fg)}
.h-story .l-reqs{max-width:560px}
.h-story .l-deck-cards{--l-deck-h:560px}
.h-lock{display:flex;align-items:flex-start;gap:calc(var(--ox-space) * 3);max-width:640px;margin-top:calc(var(--ox-space) * 3.5);padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4);border:3px double var(--l-line);border-radius:var(--r-lg);font-size:var(--fs-ui);color:var(--l-body)}
.h-lock svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--l-fg)}
.h-lock b{color:var(--l-fg);font-weight:600}
.h-after{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--ox-space) * 2) calc(var(--ox-space) * 4)}
.h-after .l-p{color:var(--l-fg);max-width:64ch}

/* Roles: six pills over one panel ------------------------------------------ */
.h-tabs{display:flex;flex-wrap:wrap;gap:calc(var(--ox-space) * 2);margin-bottom:calc(var(--ox-space) * 6)}
.h-tab{height:40px;padding:0 calc(var(--ox-space) * 4);border:1px solid var(--l-line);border-radius:var(--r-pill);background:transparent;color:var(--l-body);font:inherit;font-size:var(--fs-ui);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.h-tab:hover{border-color:var(--rule);color:var(--l-fg)}
.h-tab[aria-selected=true]{border-color:var(--l-fg);background:var(--l-fg);color:var(--l-bg)}
.h-role{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(var(--ox-space) * 12);align-items:center;padding:calc(var(--ox-space) * 9);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface)}
.h-role[hidden]{display:none}
.h-role-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3.5)}
.h-role-copy .l-h3{font-family:var(--font-heading);font-weight:400;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1}
.h-watch{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 1);padding-top:calc(var(--ox-space) * 3.5);border-top:1px solid var(--l-line)}
.h-watch span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted)}
.h-watch b{font-weight:400;font-size:var(--fs-lead);color:var(--l-fg)}
.h-role-visual{min-width:0}
.h-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--ox-space) * 4)}
.h-fig{padding:calc(var(--ox-space) * 4);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg)}
.h-fig b{display:block;font-family:var(--font-mono);font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-fig span{display:block;margin-top:calc(var(--ox-space) * 1.5);font-size:var(--fs-micro);color:var(--l-muted)}
.h-bars-title{margin:calc(var(--ox-space) * 6) 0 0;font-size:var(--fs-micro);color:var(--l-muted)}
.h-bars{display:flex;align-items:flex-end;gap:calc(var(--ox-space) * 2);height:120px;margin-top:calc(var(--ox-space) * 7);padding:0 calc(var(--ox-space) * 1);border-bottom:1px solid var(--l-line)}
.h-bars i{position:relative;flex:1;border-radius:4px 4px 0 0;background:color-mix(in oklab,var(--l-fg) 70%,transparent);transform-origin:50% 100%;animation:h-rise .9s var(--l-spring) both}
.h-bars i:nth-child(2){animation-delay:.06s}.h-bars i:nth-child(3){animation-delay:.12s}.h-bars i:nth-child(4){animation-delay:.18s}.h-bars i:nth-child(5){animation-delay:.24s}
@keyframes h-rise{from{transform:scaleY(0)}}
.h-axis{display:flex;justify-content:space-between;margin-top:calc(var(--ox-space) * 1.5);padding:0 calc(var(--ox-space) * 1);font-size:var(--fs-micro);color:var(--l-muted)}
.h-axis span{flex:1;text-align:center}
.h-table{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.h-table th{padding:0 calc(var(--ox-space) * 3) calc(var(--ox-space) * 2.5) 0;text-align:left;font-weight:400;font-size:var(--fs-micro);color:var(--l-muted);border-bottom:1px solid var(--l-line)}
.h-table td{padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 3) calc(var(--ox-space) * 3) 0;border-bottom:1px solid var(--l-line);color:var(--l-body);vertical-align:middle}
.h-table td:first-child{color:var(--l-fg);font-weight:600}
.h-table tr:last-child td{border-bottom:0}
.h-mono{font-family:var(--font-mono);font-size:var(--fs-micro)}
.h-num{text-align:right!important;font-variant-numeric:tabular-nums}
.h-items{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3);margin:0;padding:0;list-style:none}
.h-items li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 4);padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg)}
.h-items b{font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-items small{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.h-items small i{height:5px;border-radius:var(--r-pill);background:var(--l-line)}
.h-items small i.is-met{background:var(--success)}
.h-role .l-reqs{gap:calc(var(--ox-space) * 2.5)}
.h-role .l-req{opacity:1;transform:none}
.h-role .l-req [data-l-answer]{opacity:1;transform:none}
.h-role .l-part{zoom:.95}

/* Industries: the first question and the record that answers it -------------- */
.h-inds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--ox-space) * 4.5)}
.h-ind{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 3.5);padding:calc(var(--ox-space) * 7);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface)}
.h-ind-head{display:flex;align-items:center;gap:calc(var(--ox-space) * 3)}
.h-ind-head svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--l-fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h-ind .l-p{font-size:var(--fs-ui)}
.h-qa{display:flex;flex-direction:column;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden}
.h-qa>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4)}
.h-qa>div+div{border-top:1px solid var(--l-line)}
.h-qa dt{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted);padding-top:2px}
.h-qa dd{margin:0;font-size:var(--fs-ui);color:var(--l-fg)}
.h-qa .h-rec{color:var(--l-body)}
.h-ind .h-link{margin-top:auto}

/* Research: three posts and the field manual -------------------------------- */
.h-topics{display:flex;flex-wrap:wrap;gap:calc(var(--ox-space) * 2);margin:calc(var(--ox-space) * -4) 0 calc(var(--ox-space) * 8)}
.h-topics a{padding:calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 3.5);border:1px solid var(--l-line);border-radius:var(--r-pill);font-size:var(--fs-ui);color:var(--l-body);transition:border-color .2s,color .2s}
.h-topics a:hover{border-color:var(--rule);color:var(--l-fg)}
.h-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.05fr);gap:calc(var(--ox-space) * 4.5)}
.h-post{display:flex;flex-direction:column;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);overflow:hidden;color:inherit;transition:border-color .3s var(--l-ease),transform .35s var(--l-ease)}
.h-post:hover{border-color:color-mix(in oklab,var(--l-fg) 22%,var(--l-line));transform:translateY(-2px)}
.h-art{display:block;aspect-ratio:16/10;max-width:100%;border-bottom:1px solid var(--l-line);background:var(--l-bg);color:var(--l-fg)}
.h-art svg{display:block;width:100%;height:100%}
.h-art .a-line{fill:none;stroke:currentColor;stroke-opacity:.28;stroke-width:1}
.h-art .a-mark{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.h-art .a-dot{fill:currentColor}
.h-art .a-gold{fill:var(--l-gold)}
.h-art .a-node{fill:var(--l-bg);stroke:currentColor;stroke-opacity:.6;stroke-width:1.2}
.h-art .a-spin{transform-box:view-box;transform-origin:50% 50%;animation:h-spin 24s linear infinite}
.h-post-body{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 2.5);padding:calc(var(--ox-space) * 5)}
.h-post-meta{display:flex;flex-wrap:wrap;gap:calc(var(--ox-space) * 1) calc(var(--ox-space) * 3);font-size:var(--fs-micro);color:var(--l-muted)}
.h-post h3{margin:0;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-small);line-height:1.35;color:var(--l-fg);text-wrap:balance}
.h-post p{margin:0;font-size:var(--fs-micro);line-height:1.55;color:var(--l-body)}
.h-manual{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--ox-space) * 5);padding:calc(var(--ox-space) * 6);border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-raised);color:inherit}
.h-manual .l-h3{font-family:var(--font-heading);font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15}
.h-manual .l-p{font-size:var(--fs-ui)}
.h-parts{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.h-parts i{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--l-line);border-radius:6px;font-family:var(--font-mono);font-style:normal;font-size:10px;color:var(--l-muted);transition:background .4s,color .4s,border-color .4s}
.h-parts i.is-read{border-color:var(--l-fg);color:var(--l-fg)}

/* Pricing: the unit, counted as calls arrive ----------------------------------- */
.h-price{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(var(--ox-space) * 12);align-items:center}
.h-price-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 4)}
.h-price-copy .l-p{max-width:52ch}
.h-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--ox-space) * 3);margin-top:calc(var(--ox-space) * 2)}
.h-plan{padding:calc(var(--ox-space) * 3.5) calc(var(--ox-space) * 4);border:1px solid var(--l-line);border-radius:var(--r-lg)}
.h-plan b{display:block;font-weight:600;font-size:var(--fs-ui);color:var(--l-fg)}
.h-plan span{display:block;margin-top:calc(var(--ox-space) * 1);font-size:var(--fs-micro);color:var(--l-body)}
.h-ledger{border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-surface);box-shadow:var(--l-shadow-sm);overflow:hidden}
.h-ledger-top{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(var(--ox-space) * 4);padding:calc(var(--ox-space) * 5) calc(var(--ox-space) * 5) calc(var(--ox-space) * 4);border-bottom:1px solid var(--l-line)}
.h-ledger-top b{display:block;font-family:var(--font-mono);font-weight:400;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.07em;line-height:1;color:var(--l-fg);font-variant-numeric:tabular-nums}
.h-ledger-top span{display:block;margin-top:calc(var(--ox-space) * 1.5);font-size:var(--fs-micro);color:var(--l-muted)}
.h-ledger-bar{flex:1;max-width:220px;height:6px;border-radius:var(--r-pill);background:var(--l-line);overflow:hidden;margin-bottom:calc(var(--ox-space) * 2)}
.h-ledger-bar i{display:block;height:100%;width:100%;background:var(--l-fg);transform-origin:0 50%;transition:transform .6s var(--l-ease)}
.h-calls{margin:0;padding:0;list-style:none;min-height:252px}
.h-call{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 56px;gap:calc(var(--ox-space) * 3);align-items:center;padding:calc(var(--ox-space) * 3) calc(var(--ox-space) * 5);border-bottom:1px solid var(--l-line);font-size:var(--fs-ui);animation:h-in .5s var(--l-ease) both}
.h-call:last-child{border-bottom:0}
.h-call b{font-weight:400;color:var(--l-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-call .l-req-answer{white-space:nowrap}
.h-call em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-micro);text-align:right;color:var(--l-fg)}
.h-call em.is-free{color:var(--l-muted)}
.h-ledger-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 56px;gap:calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 5);border-bottom:1px solid var(--l-line);font-size:var(--fs-micro);color:var(--l-muted)}
.h-ledger-head span:last-child{text-align:right}
@keyframes h-in{from{opacity:0;transform:translateY(-6px)}}

/* Demo: the walkthrough beside the form ------------------------------------- */
.h-demo{position:relative;isolation:isolate;padding-block:clamp(96px,11vw,150px);overflow:hidden;border-top:1px solid var(--l-line)}
.h-demo .l-glyphs{z-index:-1;opacity:.55;-webkit-mask-image:radial-gradient(70% 70% at 80% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 70% at 80% 40%,#000 10%,transparent 75%)}
.h-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:calc(var(--ox-space) * 14);align-items:start}
.h-demo-copy{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 4)}
.h-demo-copy .l-h3{margin-top:calc(var(--ox-space) * 4)}
.h-walk{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:h-walk}
.h-walk li{display:grid;grid-template-columns:34px 1fr;gap:calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 3);padding:calc(var(--ox-space) * 3) 0;border-bottom:1px solid var(--l-line)}
.h-walk li::before{counter-increment:h-walk;content:counter(h-walk,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-muted);padding-top:3px}
.h-walk b{display:block;font-weight:600;color:var(--l-fg)}
.h-walk span{display:block;grid-column:2;font-size:var(--fs-ui);color:var(--l-body)}
.h-form{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 4);padding:calc(var(--ox-space) * 7);border:1px solid var(--l-line);border-radius:var(--r-lg);background:color-mix(in oklab,var(--l-surface) 92%,transparent);box-shadow:var(--l-shadow)}
.h-field{display:flex;flex-direction:column;gap:calc(var(--ox-space) * 1.5)}
.h-field label{font-size:var(--fs-ui);font-weight:600;color:var(--l-fg)}
.h-field label small{font-weight:400;color:var(--l-muted)}
.h-field input,.h-field textarea{width:100%;min-height:44px;padding:calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3.5);border:1px solid var(--l-line);border-radius:var(--r-field,12px);background:var(--l-bg);color:var(--l-fg);font:inherit;font-size:var(--fs-small);transition:border-color .2s,box-shadow .2s}
.h-field textarea{min-height:96px;resize:vertical}
.h-field input:focus,.h-field textarea:focus{outline:none;border-color:var(--l-gold);box-shadow:0 0 0 4px color-mix(in oklab,var(--l-gold) 20%,transparent)}
.h-form .btn{align-self:flex-start}
.h-form-note{margin:0;font-size:var(--fs-micro);color:var(--l-muted)}
.h-form-note a{color:var(--l-gold-text)}
.h-form-status{margin:0;font-size:var(--fs-ui);color:var(--l-fg)}
.h-form-status[hidden]{display:none}

/* The site's footer with the site map's five columns ------------------------- */
.l footer .foot-grid{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.l footer .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.l footer .foot-brand{grid-column:1/-1}}
@media (max-width:640px){.l footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Below desktop ---------------------------------------------------------------- */
@media (max-width:1100px){
 .h-role,.h-price,.h-demo-grid{grid-template-columns:1fr}
 .h-areas{grid-template-columns:1fr;max-width:640px}
 .h-works{grid-template-columns:1fr}
 .h-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .h-inds,.h-posts,.h-figs,.h-plans{grid-template-columns:1fr}
 .h-role,.h-ind,.h-form{padding:calc(var(--ox-space) * 5)}
 .h-qa>div{grid-template-columns:1fr;gap:calc(var(--ox-space) * 1)}
 .h-call,.h-ledger-head{grid-template-columns:minmax(0,1fr) 44px}
 .h-call .l-req-answer,.h-ledger-head span:nth-child(2){display:none}
 .h-area-visual{height:340px}
}
@media (prefers-reduced-motion:reduce){
 .h-bars i,.h-call{animation:none}
 .h-beams .h-pulse{animation:none;stroke-dasharray:none;stroke-opacity:.4}
}
html[data-motion=off] .h-beams .h-pulse{animation-play-state:paused}

.h-bars i span{position:absolute;left:0;right:0;top:calc(var(--ox-space) * -5);text-align:center;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--l-body);font-variant-numeric:tabular-nums}
.h-lock svg,.h-handoff svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-chip [data-harness-mark]{width:16px!important;height:16px!important}
.l-req-answer[data-tone=approval]::before{background:var(--warning)}