/* HAI Design System — component styles for every HAI format: website, documents, slides, social, notes.
   Everything is scoped under .hai: put class="hai" on <body> (or on the wrapper of a page section).
   Load after the tokens (tokens.css). No rule here declares a token value. */

/* ---------- Base ---------- */
.hai,.hai *{box-sizing:border-box}
.hai{margin:0;background:var(--bg);color:var(--ink);font:var(--type-text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hai a{color:inherit}
.hai :focus-visible{outline:var(--border-strong) solid var(--ink);outline-offset:3px}
.hai svg{display:block;max-width:100%;height:auto}
.hai p{margin:0}

.hai .page{max-width:var(--page-max);margin:0 auto;padding-inline:clamp(16px,4vw,var(--gutter));padding-block:0 96px}
.hai .k{font:var(--type-label-kicker);letter-spacing:var(--tracking-label-kicker);text-transform:uppercase;color:var(--ink-3)}

/* ---------- Hero ---------- */
.hai .hero{position:relative;padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,72px);border-bottom:var(--border-hairline) solid var(--line);overflow:hidden}
.hai .hero > *:not(.diag){position:relative;z-index:1}
.hai .diag{position:absolute;right:-24px;top:0;width:min(42vw,480px);height:100%;color:var(--line);pointer-events:none;z-index:0}
.hai .mast{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:clamp(40px,7vw,84px)}
.hai .mast b{font:var(--type-wordmark);letter-spacing:var(--tracking-wordmark)}
.hai .hero h1{font:300 clamp(46px,8.6vw,108px)/.98 var(--font-display);letter-spacing:-.005em;margin:16px 0 0;text-wrap:balance}
.hai .thesis{font:300 clamp(22px,2.8vw,32px)/1.3 var(--font-display);max-width:var(--measure-thesis);margin-top:28px;text-wrap:balance}
.hai .thesis strong{font-weight:500}
.hai .meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px}

/* ---------- Shift (from -> to) ---------- */
.hai .shift{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);max-width:880px;border:var(--border-hairline) solid var(--line);background:var(--bg)}
.hai .hero .shift{margin-top:clamp(36px,5vw,56px)}
.hai .shift > div{padding:18px 20px;min-width:0}
.hai .shift .v{display:block;font:400 clamp(20px,2.2vw,24px)/1.25 var(--font-display);margin-top:6px}
.hai .shift .d{display:block;font-size:15px;line-height:1.45;margin-top:6px}
.hai .shift .from{color:var(--ink-3)}
.hai .shift .from .v{text-decoration:line-through;text-decoration-thickness:1px}
.hai .shift .arr{display:flex;align-items:center;justify-content:center;padding:0;border-inline:var(--border-hairline) solid var(--line);color:var(--ink-2)}
.hai .shift .to{background:var(--ink);color:var(--bg)}
.hai .shift .to .k{color:inherit;opacity:var(--opacity-meta-on-ink)}
.hai .shift .to .d{opacity:var(--opacity-text-on-ink)}
@media (max-width:640px){
  .hai .shift{grid-template-columns:1fr}
  .hai .shift .arr{height:40px;border-inline:0;border-block:var(--border-hairline) solid var(--line)}
  .hai .shift .arr svg{transform:rotate(90deg)}
  .hai .diag{display:none}
}

/* ---------- Rail + reading column ---------- */
.hai .body{display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr);gap:clamp(32px,5vw,var(--column-gap));align-items:start}
.hai .rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);padding-top:56px}
.hai .rail .k{display:block;margin-bottom:14px}
.hai .rail nav{display:flex;flex-direction:column}
.hai .rail a{display:flex;gap:10px;align-items:baseline;padding:7px 0 7px 13px;border-left:var(--border-hairline) solid var(--line);text-decoration:none;color:var(--ink-3);font-size:15px;line-height:1.35}
.hai .rail a span{font:500 11px/1 var(--font-mono);letter-spacing:.06em;flex:none;width:18px}
.hai .rail a:hover{color:var(--ink)}
.hai .rail a.on{color:var(--ink);border-left:var(--border-strong) solid var(--ink);padding-left:12px}
@media (max-width:980px){
  .hai .body{grid-template-columns:minmax(0,1fr);gap:0}
  .hai .rail{position:static;padding-top:28px}
  .hai .rail nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .hai .rail a,.hai .rail a.on{border:var(--border-hairline) solid var(--line);padding:6px 10px;font-size:14px}
  .hai .rail a.on{border-color:var(--ink)}
  .hai .rail a span{width:auto}
}
.hai main{min-width:0}

/* ---------- Section ---------- */
.hai .sec{padding-top:clamp(56px,7vw,var(--section-gap));scroll-margin-top:16px}
.hai .lh{display:grid;gap:10px;padding-top:22px;border-top:var(--border-hairline) solid var(--ink);margin-bottom:clamp(28px,4vw,var(--head-gap))}
.hai .lh h2{font:300 clamp(32px,4.6vw,52px)/1.05 var(--font-display);margin:0;text-wrap:balance}
.hai .lede{font:300 clamp(19px,2vw,23px)/1.45 var(--font-display);max-width:var(--measure-lede);margin-top:6px;color:var(--ink-2);text-wrap:pretty}
.hai .stack{display:grid;gap:clamp(32px,4.5vw,var(--stack-gap))}
.hai .prose{display:grid;gap:var(--prose-gap);max-width:var(--measure-prose)}
.hai .h3{font:400 clamp(22px,2.4vw,27px)/1.25 var(--font-display);margin:0;text-wrap:balance}

/* ---------- Callouts ---------- */
.hai .pull{font:300 clamp(26px,3.4vw,40px)/1.18 var(--font-display);max-width:var(--measure-pull);text-wrap:balance}
.hai .pull strong{font-weight:500}
.hai .note{border-left:var(--border-strong) solid var(--metal);padding:4px 0 4px 18px;max-width:var(--measure-note);color:var(--ink-2);font-size:16px}
.hai .note .k{display:block;margin-bottom:6px}
.hai .rule{background:var(--ink);color:var(--bg);padding:clamp(24px,4vw,var(--rule-pad));display:grid;gap:12px}
.hai .rule .k{color:inherit;opacity:var(--opacity-kicker-on-ink)}
.hai .rule p{font:300 clamp(24px,3.2vw,36px)/1.2 var(--font-display);max-width:var(--measure-rule);text-wrap:balance}
.hai .rule small{font-size:15.5px;line-height:1.5;opacity:var(--opacity-text-on-ink);max-width:60ch}

/* ---------- Brief ---------- */
.hai .brief ol{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--ink)}
.hai .brief li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:var(--border-hairline) solid var(--line);align-items:baseline}
.hai .brief li a{font:500 11.5px/1.4 var(--font-mono);letter-spacing:.1em;color:var(--ink-3);text-decoration:none}
.hai .brief li a:hover{color:var(--ink);text-decoration:underline}
.hai .brief li p{font:400 clamp(18px,1.9vw,21px)/1.4 var(--font-display);max-width:none}
.hai .brief li p strong{font-weight:500}

/* ---------- Figure ---------- */
.hai figure{margin:0;container-type:inline-size;min-width:0}
.hai figcaption{display:flex;gap:12px;align-items:baseline;margin-top:var(--caption-gap);font-size:15px;line-height:1.5;color:var(--ink-2);max-width:var(--measure-caption)}
.hai figcaption .k{flex:none}
.hai .cq{container-type:inline-size;min-width:0}
.hai .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Footer ---------- */
.hai footer{margin-top:clamp(64px,8vw,104px);padding-top:22px;border-top:var(--border-hairline) solid var(--line);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline}
.hai footer b{font:500 13px/1 var(--font-display);letter-spacing:.42em}
.hai footer p{font-size:14px;color:var(--ink-3);max-width:none}

/* ---------- Button ---------- */
.hai .btn{appearance:none;-webkit-appearance:none;border:var(--border-hairline) solid var(--ink);background:transparent;color:var(--ink);font:var(--type-label-button);letter-spacing:var(--tracking-label-button);text-transform:uppercase;padding:10px 14px;cursor:pointer}
.hai .btn:hover{background:var(--ink);color:var(--bg)}

/* ---------- Status chips ---------- */
.hai .st{display:inline-flex;align-items:center;gap:8px;font:var(--type-label-status);letter-spacing:var(--tracking-label-status);text-transform:uppercase;color:var(--ink-2)}
.hai .st i{width:10px;height:10px;border:var(--stroke-glyph) solid currentColor;flex:none}
.hai .st.built i{background:currentColor}
.hai .st.prog i{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.hai .st.later i{border-style:dotted}
.hai .legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}

/* ---------- Tag ---------- */
.hai .tag{display:inline-block;background:var(--metal);color:var(--on-metal);font:500 14px/1.2 var(--font-display);padding:6px 10px;letter-spacing:.01em}

/* ---------- Flow ---------- */
.hai .flow{display:flex;flex-direction:column;align-items:stretch}
.hai .node{border:var(--border-hairline) solid var(--line);padding:var(--node-pad-y) var(--node-pad-x);min-width:0;background:var(--bg)}
.hai .node.next{border-color:var(--ink)}
.hai .node b{display:block;font:var(--type-heading-node)}
.hai .node span:not(.st):not(.k){display:block;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:4px}
.hai .node .k{display:block;margin-bottom:6px}
.hai .node .st{display:flex;width:fit-content;margin-top:10px}
.hai .node.end{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hai .node.end span:not(.st),.hai .node.end .k{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .node.end .st,.hai .focus .st{color:inherit;opacity:var(--opacity-text-on-ink)}
.hai .edge{display:flex;align-items:center;gap:10px;height:var(--edge-v);padding-left:22px;color:var(--wire);flex:none}
.hai .edge .ar{position:relative;width:1px;height:100%;background:currentColor;flex:none}
.hai .edge .ar::after{content:"";position:absolute;left:-4px;bottom:-1px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:7px solid currentColor}
.hai .edge .lb{font:var(--type-label-edge);color:var(--ink-3)}
.hai .flow.dead .node{border-style:dashed;color:var(--ink-3)}
.hai .flow.dead .node b{font-weight:400}
.hai .flow.dead .node span:not(.st):not(.k){color:var(--ink-3)}
.hai .flow.dead .node.end{background:transparent;border-color:var(--ink-3)}
.hai .flow.dead .edge .ar{background:repeating-linear-gradient(180deg,currentColor 0 4px,transparent 4px 8px)}
@container (min-width:640px){
  .hai .flow.tight{flex-direction:row}
  .hai .flow.tight .node{flex:1 1 0}
  .hai .flow.tight .edge{width:var(--edge-tight);height:auto;padding:0 5px;align-self:center}
  .hai .flow.tight .edge .ar{width:100%;height:1px}
  .hai .flow.tight .edge .ar::after{left:auto;right:-1px;bottom:auto;top:-4px;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-right:0}
  .hai .flow.tight.dead .edge .ar{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px)}
}
@container (min-width:720px){
  .hai .flow:not(.tight){flex-direction:row}
  .hai .flow:not(.tight) .node{flex:1 1 0}
  .hai .flow:not(.tight) .edge{width:var(--edge-h);height:auto;flex-direction:column;padding:0 8px;gap:6px;align-self:center}
  .hai .flow:not(.tight) .edge .lb{order:-1;text-align:center}
  .hai .flow:not(.tight) .edge .ar{width:100%;height:1px}
  .hai .flow:not(.tight) .edge .ar::after{left:auto;right:-1px;bottom:auto;top:-4px;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-right:0}
  .hai .flow.dead:not(.tight) .edge .ar{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px)}
}
.hai .paths{display:grid;gap:26px}
.hai .path{display:grid;gap:10px}

/* ---------- HairlineGrid (.hgrid, .hgrid.rules) ---------- */
.hai .hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--border-hairline);background:var(--line);border:var(--border-hairline) solid var(--line)}
.hai .hgrid > div{background:var(--bg);padding:18px;display:flex;flex-direction:column;gap:10px}
.hai .hgrid b{font:var(--type-heading-cell)}
.hai .hgrid .k{margin-top:auto}
.hai .hgrid.rules > div{display:grid;gap:6px;align-content:start;padding:16px 18px}
.hai .hgrid.rules b{font:500 17px/1.3 var(--font-display)}
.hai .hgrid.rules span{font-size:14.5px;color:var(--ink-2);line-height:1.45}
@container (min-width:760px){ .hai .hgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container (max-width:380px){ .hai .hgrid{grid-template-columns:1fr} }

/* ---------- FilterTable ---------- */
.hai .filter{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);font-size:15.5px}
.hai .filter .row{display:contents}
.hai .filter .h{font:var(--type-label-column);letter-spacing:var(--tracking-label-column);text-transform:uppercase;color:var(--ink-3);padding-bottom:12px}
.hai .filter .h.mid{text-align:center;background:var(--metal-soft);padding-top:10px}
.hai .filter .h.out{padding-left:14px}
.hai .fi,.hai .fg,.hai .fo{display:flex;align-items:center;min-height:50px}
.hai .fi{gap:12px}
.hai .fi span{min-width:0;line-height:1.3}
.hai .fi .w{flex:1 1 auto;height:1px;background:var(--wire);min-width:14px}
.hai .fg{justify-content:center;background:var(--metal-soft);font:500 15px/1 var(--font-mono)}
.hai .fo{gap:10px;padding-left:0}
.hai .fo .w{flex:0 0 20px;height:1px;background:var(--wire)}
.hai .blk .fi span{color:var(--ink-3)}
.hai .blk .fg{color:var(--ink-3)}
.hai .blk .fo{color:var(--ink-3);font:400 12px/1.3 var(--font-mono);padding-left:14px}
.hai .pass .fg{color:var(--ink)}

/* ---------- Matrix ---------- */
.hai .matrix{border-top:var(--border-hairline) solid var(--ink)}
.hai .mx-head{display:none}
.hai .mx-row{display:grid;gap:12px;padding:20px 0;border-bottom:var(--border-hairline) solid var(--line)}
.hai .mx-row > div{min-width:0}
.hai .mx-row [data-l]::before{content:attr(data-l);display:block;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.hai .mx-name b{display:block;font:var(--type-heading-matrix)}
.hai .mx-name span{display:block;font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.hai .mx-cell{font-size:15px;line-height:1.5}
.hai .mx-quote{font:300 19px/1.35 var(--font-display)}
@container (min-width:760px){
  .hai .mx-head,.hai .mx-row{display:grid;grid-template-columns:1.05fr 1fr 1.65fr 1.2fr;gap:24px}
  .hai .mx-head{padding:12px 0;border-bottom:var(--border-hairline) solid var(--line)}
  .hai .mx-row [data-l]::before{display:none}
}

/* ---------- Venn ---------- */
.hai .venn-wrap{display:grid;gap:24px;align-items:center}
@container (min-width:760px){ .hai .venn-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.hai .venn-svg{min-width:400px}
.hai .venn .vc{fill:var(--metal);fill-opacity:var(--opacity-venn-tint)}
.hai .venn .vo{fill:none;stroke:var(--ink);stroke-width:1}
.hai .venn .vcore{fill:var(--ink)}
.hai .venn .nm{font:500 13px/1 var(--font-mono);letter-spacing:.12em;fill:var(--ink)}
.hai .venn .pr{font:400 15px/1 var(--font-display);fill:var(--ink-2)}
.hai .venn .cn{font:500 28px/1 var(--font-display);fill:var(--bg)}
.hai .venn .cs{font:500 11px/1 var(--font-mono);letter-spacing:.12em;fill:var(--bg)}
.hai .vleg{display:grid;gap:0;border-top:var(--border-hairline) solid var(--line)}
.hai .vleg > div{display:grid;gap:6px;padding:14px 0;border-bottom:var(--border-hairline) solid var(--line)}
.hai .vleg b{font:500 17px/1.3 var(--font-display)}
.hai .vleg span.src{font-size:15px;color:var(--ink-2);line-height:1.45}
.hai .vleg .st{justify-self:start}

/* ---------- Approaches ---------- */
.hai .approaches{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:680px){ .hai .approaches{grid-template-columns:repeat(3,minmax(0,1fr))} }
.hai .approach{border:var(--border-hairline) solid var(--line);padding:var(--card-pad);display:flex;flex-direction:column;gap:12px}
.hai .approach.bad{border-style:dashed;color:var(--ink-3)}
.hai .approach.bad b{color:var(--ink-2)}
.hai .approach.good{border-color:var(--ink)}
.hai .approach svg{width:120px;height:64px}
.hai .approach b{font:var(--type-heading-card)}
.hai .approach p{font-size:15px;line-height:1.5}

/* ---------- StatusList ---------- */
.hai .status-list{display:grid;border-top:var(--border-hairline) solid var(--line);max-width:720px}
.hai .status-list > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 0;border-bottom:var(--border-hairline) solid var(--line)}
.hai .status-list b{font:400 18px/1.35 var(--font-display)}
@media (max-width:480px){ .hai .status-list > div{grid-template-columns:1fr} }

/* ---------- Circuit ---------- */
.hai .circ{border:var(--border-hairline) solid var(--line);padding:clamp(18px,3vw,28px);display:grid;gap:22px}
.hai .circ-top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between}
.hai .cr-row{position:relative;display:grid;grid-template-columns:1fr}
.hai .cr-row::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:var(--wire)}
.hai .cr-src{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:center;min-height:44px;gap:0}
.hai .cr-src .dot{justify-self:center;width:10px;height:10px;border-radius:var(--radius-dot);background:var(--ink)}
.hai .cr-src .k{color:var(--ink-2)}
.hai .gate{position:relative;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:44px 1fr;align-items:center;padding:4px 0;min-height:56px}
.hai .gate:hover .gl{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hai .sw{position:relative;width:44px;height:44px;background:linear-gradient(180deg,transparent 7px,var(--bg) 7px,var(--bg) 37px,transparent 37px)}
.hai .sw::before,.hai .sw::after{content:"";position:absolute;width:8px;height:8px;border:var(--stroke-glyph) solid var(--ink);border-radius:var(--radius-dot);background:var(--bg);left:18px}
.hai .sw::before{top:3px}
.hai .sw::after{bottom:3px}
.hai .sw i{position:absolute;left:21px;top:10px;width:1.5px;height:24px;background:var(--ink);transform-origin:50% 0;transition:transform var(--duration-switch) var(--ease-switch)}
.hai .gate[aria-pressed="false"] .sw i{transform:rotate(-40deg)}
.hai .gtx{display:grid;gap:2px;padding-left:6px}
.hai .gl{font:var(--type-heading-gate)}
.hai .gs{font:500 10.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hai .gate[aria-pressed="false"] .gl{color:var(--ink-3);text-decoration:line-through}
.hai .gate[aria-pressed="false"] .gs{color:var(--ink)}
.hai .cr-out{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:center;padding-top:6px}
.hai .cr-out .term{justify-self:center;width:10px;height:10px;background:var(--ink)}
.hai .box{border:var(--border-hairline) solid var(--ink);background:var(--ink);color:var(--bg);padding:var(--node-pad-y) var(--node-pad-x);display:grid;gap:4px}
.hai .box b{font:var(--type-heading-box)}
.hai .box span{font-size:14.5px;line-height:1.4;opacity:var(--opacity-text-on-ink)}
.hai .circ.stall .box{background:var(--bg);color:var(--ink);border-style:dashed}
.hai .circ.stall .cr-out .term{background:transparent;border:var(--stroke-glyph) dashed var(--ink)}
.hai .circ-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.hai .circ-foot p{font-size:15px;color:var(--ink-2);max-width:56ch}
@container (min-width:760px){
  .hai .cr-row{grid-template-columns:72px repeat(5,minmax(0,1fr)) minmax(150px,1.35fr);align-items:start}
  .hai .cr-row::before{left:36px;right:40px;top:22px;bottom:auto;width:auto;height:1px}
  .hai .cr-src{grid-template-columns:1fr;grid-template-rows:44px auto;justify-items:center;gap:6px}
  .hai .cr-src .k{text-align:center}
  .hai .gate{grid-template-columns:1fr;justify-items:center;text-align:center;padding:0 6px;gap:6px;min-height:0}
  .hai .sw{background:linear-gradient(90deg,transparent 7px,var(--bg) 7px,var(--bg) 37px,transparent 37px)}
  .hai .sw::before{top:18px;left:3px}
  .hai .sw::after{top:18px;left:auto;right:3px;bottom:auto}
  .hai .sw i{left:10px;top:21px;width:24px;height:1.5px;transform-origin:0 50%}
  .hai .gtx{padding-left:0}
  .hai .gl{font-size:15.5px}
  .hai .cr-out{grid-template-columns:1fr;padding:0 0 0 10px}
  .hai .cr-out .term{display:none}
}

/* ---------- Contrast ---------- */
.hai .vs{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:640px){ .hai .vs{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} }
.hai .vs .card{border:var(--border-hairline) solid var(--line);padding:22px;display:grid;gap:10px;align-content:start}
.hai .vs .weak{border-style:dashed;color:var(--ink-3)}
.hai .vs .strong{border-color:var(--ink)}
.hai .vs .say{font:var(--type-display-say);color:var(--ink)}
.hai .vs .weak .say{color:var(--ink-3)}
.hai .vs dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;margin:8px 0 0}
.hai .vs dt{font:500 11px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.hai .vs dd{margin:0;font-size:15.5px;line-height:1.45}
@container (max-width:400px){ .hai .vs dl{grid-template-columns:1fr;gap:4px} .hai .vs dd{margin-bottom:10px} }

/* ---------- Layers ---------- */
.hai .layers{display:grid;gap:6px;justify-items:center}
.hai .layer{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:16px 20px;border:var(--border-hairline) solid var(--line)}
.hai .layer b{font:var(--type-heading-layer)}
.hai .layer .k{color:inherit;opacity:.75}
.hai .layer.l3{max-width:68%}
.hai .layer.l2{max-width:84%;background:var(--metal);color:var(--on-metal);border-color:var(--metal)}
.hai .layer.l1{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@container (max-width:520px){ .hai .layer.l3,.hai .layer.l2{max-width:100%} .hai .layer{grid-template-columns:1fr} }

/* ---------- Loop + StruckList ---------- */
.hai .loop-wrap{display:grid;gap:20px;align-items:center}
@container (min-width:700px){ .hai .loop-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.hai .loop{color:var(--wire);max-width:460px;width:100%}
.hai .loop .n{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.hai .loop .n.hl{fill:var(--ink)}
.hai .loop .t{font:500 16px/1 var(--font-display);fill:var(--ink)}
.hai .loop .t.inv{fill:var(--bg)}
.hai .loop .l{font:400 12px/1 var(--font-mono);fill:var(--ink-3)}
.hai .loop .c1{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;fill:var(--ink-3)}
.hai .loop .c2{font:400 15px/1 var(--font-display);fill:var(--ink-2)}
.hai .struck{border:var(--border-hairline) dashed var(--ink-3);padding:var(--card-pad);display:grid;gap:12px}
.hai .struck ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hai .struck li{font:400 17px/1.35 var(--font-display);color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ink-3)}
.hai .struck p{font-size:15px;color:var(--ink-2)}

/* ---------- Convergence ---------- */
.hai .cv-svg{min-width:440px}
.hai .cv{color:var(--wire)}
.hai .cv .ch{font:400 16px/1 var(--font-display);fill:var(--ink)}
.hai .cv .ln{stroke:currentColor;stroke-width:var(--stroke-wire);fill:none}
.hai .cv .hub{fill:var(--ink);stroke:var(--ink);stroke-width:1}
.hai .cv .hubt{font:500 17px/1 var(--font-display);fill:var(--bg)}
.hai .cv .ot{font:400 16px/1 var(--font-display);fill:var(--ink)}
.hai .cv .os{font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;fill:var(--ink-3)}
.hai .cv .dot{fill:var(--ink);opacity:0}
.hai .cv.run .dot{animation:hai-travel var(--duration-travel) var(--ease-travel) forwards;animation-delay:var(--d)}
@keyframes hai-travel{
  0%{opacity:1;transform:translate(0,0)}
  85%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px))}
}
.hai .cv.run .hub{animation:hai-lock var(--duration-lock) var(--ease-lock) var(--delay-lock) both}
@keyframes hai-lock{0%{stroke-width:1}50%{stroke-width:6}100%{stroke-width:1}}
@media (prefers-reduced-motion:reduce){ .hai .cv.run .dot,.hai .cv.run .hub{animation:none} }

/* ---------- Chain ---------- */
.hai .chain{list-style:none;margin:0;padding:0;display:grid}
.hai .step{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 16px 18px 26px;margin-left:6px;border-left:var(--border-hairline) solid var(--wire)}
.hai .step:last-child{border-left-color:transparent}
.hai .step::before{content:"";position:absolute;left:-6px;top:16px;width:11px;height:11px;background:var(--bg);border:var(--stroke-glyph) solid var(--ink)}
.hai .step .sn{font:500 11px/1.3 var(--font-mono);letter-spacing:.1em;color:var(--ink-3)}
.hai .step b{font:500 18px/1.25 var(--font-display)}
.hai .step .gv{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.hai .step .st{margin-top:8px;align-self:flex-start}
.hai .step.focus{background:var(--ink);color:var(--bg)}
.hai .step.focus::before{background:var(--ink);border-color:var(--bg)}
.hai .step.focus .sn,.hai .step.focus .gv{color:inherit;opacity:var(--opacity-sub-on-ink)}
@container (min-width:820px){
  .hai .chain{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
  .hai .step,.hai .step:last-child{margin:0;padding:16px 14px;border:var(--border-hairline) solid var(--line);gap:6px}
  .hai .step::before{display:none}
  .hai .step .st{margin-top:auto;padding-top:12px}
  .hai .step.focus{border-color:var(--ink)}
  .hai .step:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:20px;height:1px;background:var(--wire)}
  .hai .step:not(:last-child) .gv::after{content:"";position:absolute;right:-22px;top:calc(50% - 4px);border-left:7px solid var(--wire);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
}

/* ---------- YesNo ---------- */
.hai .yesno{max-width:620px;display:grid;grid-template-columns:1fr 1fr}
.hai .yesno .q{grid-column:1 / -1;border:var(--border-hairline) solid var(--ink);padding:var(--node-pad-y) 18px;font:400 19px/1.35 var(--font-display);text-align:center}
.hai .yesno .fork{grid-column:1 / -1;color:var(--wire);height:28px}
.hai .yesno .fork svg{width:100%;height:28px}
.hai .yesno .br{padding:var(--node-pad-y) var(--node-pad-x);display:grid;gap:4px;text-align:center}
.hai .yesno .br b{font:500 22px/1.2 var(--font-display)}
.hai .yesno .br span{font-size:14.5px;color:var(--ink-2)}
.hai .yesno .yes{background:var(--ink);color:var(--bg);margin-right:8px}
.hai .yesno .yes .k,.hai .yesno .yes span{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .yesno .no{border:var(--border-hairline) dashed var(--ink-3);color:var(--ink-3);margin-left:8px}

/* ======================================================================
   Business and format components
   ====================================================================== */

/* ---------- Wordmark ---------- */
.hai .wordmark{display:inline-block;font:var(--type-wordmark);letter-spacing:var(--tracking-wordmark);margin-right:-.42em;white-space:nowrap;text-transform:uppercase;color:inherit;text-decoration:none}
.hai .wordmark.s{font-size:13px}
.hai .wordmark.l{font-size:28px}
.hai .wordmark.xl{font-size:64px}
.hai .mark-tile{display:grid;place-items:center;aspect-ratio:1;background:var(--ink);color:var(--bg)}
.hai .mark-tile.light{background:var(--bg);color:var(--ink);border:var(--border-hairline) solid var(--line)}

/* ---------- Logo: the Shift square before the word ----------
   Every .wordmark, and the masthead and footer names, draws HAI's logo: a square split into a hairline half
   and a filled half, 1.5 cap heights tall (1.05em of Jost), centred on the capitals, .8 cap heights before
   the H (.56em less the H's .0775em side bearing). The word stays real text. The small cut (hairline 1/8 of
   the square) is the default; .xl and the tile use the display cut (1/18). Drawn in currentColor, so it
   follows ink / bg and inverts with its block; print-color-adjust keeps it in print. */
.hai .wordmark::before,.hai .mast>b::before,.hai footer>b::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.4825em;vertical-align:-.175em;background:currentColor;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM125 125H500V875H125Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM125 125H500V875H125Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hai .wordmark.xl::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM56 56H500V944H56Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM56 56H500V944H56Z'/%3E%3C/svg%3E")}
.hai .mark-tile .wordmark{width:56.25%;aspect-ratio:1;font-size:0;letter-spacing:0;margin:0}
.hai .mark-tile .wordmark::before{display:block;width:100%;height:100%;margin:0;vertical-align:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM56 56H500V944H56Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0ZM56 56H500V944H56Z'/%3E%3C/svg%3E")}

/* ---------- Nav ---------- */
.hai .nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;padding-block:20px;border-bottom:var(--border-hairline) solid var(--line)}
.hai .nav .brand{margin-right:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;color:var(--ink);text-decoration:none}
.hai .nav ul{display:flex;flex-wrap:wrap;gap:4px 28px;list-style:none;margin:0;padding:0}
.hai .nav ul a{display:block;padding:6px 0;font-size:15px;line-height:1.35;color:var(--ink-2);text-decoration:none;border-bottom:var(--border-hairline) solid transparent}
.hai .nav ul a:hover{color:var(--ink)}
.hai .nav ul a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:720px){
  .hai .nav ul{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding-top:6px;border-top:var(--border-hairline) solid var(--line)}
  .hai .nav .brand .k{display:none}
}

/* ---------- Button variants and actions ---------- */
.hai a.btn{display:inline-block;text-decoration:none}
.hai .btn.primary{background:var(--ink);color:var(--bg)}
.hai .btn.primary:hover{background:transparent;color:var(--ink)}
.hai .btn.lg{font-size:13px;padding:16px 22px}
.hai .actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}
.hai .more{font:500 15px/1.3 var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.hai .more::after{content:"\00a0\2192"}

/* ---------- Field (forms) ---------- */
.hai .form{display:grid;gap:20px;max-width:560px}
.hai .form .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.hai .field{display:grid;gap:8px;align-content:start;min-width:0}
.hai .field label,.hai .field .lbl{font:var(--type-label-column);letter-spacing:var(--tracking-label-column);text-transform:uppercase;color:var(--ink-2)}
.hai .field input,.hai .field textarea,.hai .field select{appearance:none;-webkit-appearance:none;width:100%;margin:0;border:var(--border-hairline) solid var(--ink-3);border-radius:var(--radius-none);background:var(--bg);color:var(--ink);font:400 17px/1.4 var(--font-body);padding:12px 14px}
.hai .field textarea{min-height:128px;resize:vertical}
.hai .field input::placeholder,.hai .field textarea::placeholder{color:var(--ink-3);opacity:1}
.hai .field input:hover,.hai .field textarea:hover,.hai .field select:hover{border-color:var(--ink)}
.hai .field .sel{position:relative}
.hai .field .sel::after{content:"";position:absolute;right:16px;top:50%;margin-top:-3px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:7px solid var(--ink);pointer-events:none}
.hai .field select{padding-right:40px}
.hai .field .hint{font-size:14px;line-height:1.45;color:var(--ink-3)}
.hai .field .err{display:none;font-size:14px;line-height:1.45;color:var(--ink)}
.hai .field .err::before{content:"\2715\00a0";font-family:var(--font-mono)}
.hai .field.invalid input,.hai .field.invalid textarea,.hai .field.invalid select{border:var(--border-strong) dashed var(--ink);padding:11px 13px}
.hai .field.invalid .err{display:block}
.hai .check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;cursor:pointer}
.hai .check input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:2px 0 0;border:var(--stroke-glyph) solid var(--ink);border-radius:var(--radius-none);background:var(--bg)}
.hai .check input:checked{background:var(--ink);box-shadow:inset 0 0 0 3px var(--bg)}

/* ---------- Stat ---------- */
.hai .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--border-hairline);background:var(--line);border:var(--border-hairline) solid var(--line)}
.hai .stat{background:var(--bg);padding:20px 20px 18px;display:grid;gap:10px;align-content:start;min-width:0}
.hai .stat .n{font:300 clamp(40px,5vw,64px)/1 var(--font-display);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.hai .stat .n small{display:inline-block;font-size:.42em;font-weight:400;letter-spacing:0;margin-left:4px}
.hai .stat p{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.hai .stat.was .n{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px}
.hai .stat.lead{background:var(--ink);color:var(--bg)}
.hai .stat.lead .k,.hai .stat.lead p{color:inherit;opacity:var(--opacity-sub-on-ink)}

/* ---------- Quote (client testimonial) ---------- */
.hai .quote{margin:0;display:grid;gap:18px;padding-top:22px;border-top:var(--border-hairline) solid var(--ink)}
.hai .quote blockquote{margin:0;font:300 clamp(24px,3vw,32px)/1.3 var(--font-display);max-width:32ch;text-wrap:balance}
.hai .quote figcaption{display:grid;gap:4px;margin:0;max-width:none}
.hai .quote figcaption b{font:500 16px/1.3 var(--font-display);color:var(--ink)}

/* ---------- Frame (screenshots and photos of real work) ---------- */
.hai .frame{border:var(--border-hairline) solid var(--ink);background:var(--bg);min-width:0}
.hai .frame-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:var(--border-hairline) solid var(--ink)}
.hai .frame-bar .k{color:var(--ink-2)}
.hai .frame > img,.hai .frame > svg,.hai .frame > video{display:block;width:100%;height:auto}
.hai .frame.concept{border-style:dashed}
.hai .frame.concept .frame-bar{border-bottom-style:dashed}
.hai .frame.photo{border-color:var(--line)}
.hai .frame.photo > img{filter:grayscale(1)}

/* ---------- Offer (services and pricing) ---------- */
.hai .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;align-items:stretch}
.hai .offer{border:var(--border-hairline) solid var(--line);padding:24px var(--card-pad) var(--card-pad);display:flex;flex-direction:column;gap:14px;min-width:0}
.hai .offer h3{font:400 clamp(22px,2.4vw,27px)/1.2 var(--font-display);margin:0}
.hai .offer > p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.hai .offer .tag{align-self:flex-start}
.hai .offer ul{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--line)}
.hai .offer li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:var(--border-hairline) solid var(--line);font-size:15px;line-height:1.45}
.hai .offer li::before{content:"";flex:none;width:8px;height:8px;background:currentColor;transform:translateY(-1px)}
.hai .offer .price{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hai .offer .price b{font:300 clamp(32px,3.6vw,40px)/1 var(--font-display);font-variant-numeric:lining-nums}
.hai .offer .btn{align-self:flex-start}
.hai .offer.featured{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hai .offer.featured > p,.hai .offer.featured .k{color:inherit;opacity:var(--opacity-text-on-ink)}
.hai .offer.featured ul,.hai .offer.featured li{border-color:var(--ink-2)}
.hai .offer.featured .btn{border-color:var(--bg);color:var(--bg)}
.hai .offer.featured .btn.primary,.hai .offer.featured .btn:hover{background:var(--bg);color:var(--ink)}

/* ---------- CaseStudy ---------- */
.hai .case{display:grid;gap:24px;padding-top:22px;border-top:var(--border-hairline) solid var(--ink);container-type:inline-size;min-width:0}
.hai .case-head{display:grid;gap:10px;max-width:var(--measure-prose)}
.hai .case-head h3{font:300 clamp(28px,3.4vw,40px)/1.1 var(--font-display);margin:0;text-wrap:balance}
.hai .case-head p{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* ---------- LineItems ---------- */
.hai .items{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.hai .items th{font:var(--type-label-column);letter-spacing:var(--tracking-label-column);text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 16px 12px 0;border-bottom:var(--border-hairline) solid var(--ink)}
.hai .items td{padding:14px 16px 14px 0;border-bottom:var(--border-hairline) solid var(--line);vertical-align:baseline}
.hai .items td small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.hai .items .num{text-align:right;white-space:nowrap;font:400 14.5px/1.45 var(--font-mono);font-variant-numeric:tabular-nums}
.hai .items th.num{font:500 11px/1.3 var(--font-mono)}
.hai .items th:last-child,.hai .items td:last-child{padding-right:0}
.hai .items tfoot td{border-bottom:0;padding-block:8px}
.hai .items tfoot tr:first-child td{padding-top:16px}
.hai .items tfoot .label{text-align:right;font:var(--type-label-column);letter-spacing:var(--tracking-label-column);text-transform:uppercase;color:var(--ink-3)}
.hai .items tfoot .total td{background:var(--ink);color:var(--bg);padding:14px 16px}
.hai .items tfoot .total .label{color:var(--bg)}
.hai .items tfoot .total .num{font:500 18px/1.2 var(--font-mono)}

/* ---------- Signature ---------- */
.hai .sign{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px 40px}
.hai .sign > div{display:grid;gap:10px;align-content:start}
.hai .sign .line{height:64px;border-bottom:var(--border-hairline) solid var(--ink)}
.hai .sign dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0}
.hai .sign dt{font:500 11px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hai .sign dd{margin:0;font-size:15px;line-height:1.5}

/* ---------- Sheet (A4 / Letter documents: proposals, invoices, one-pagers) ---------- */
.hai .desk{background:var(--panel);padding:32px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start}
.hai .sheet{page:sheet;width:210mm;height:297mm;flex:none;padding:var(--sheet-margin);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;position:relative;overflow:hidden;container-type:inline-size;font-size:14.5px;line-height:1.55}
.hai .sheet.letter{page:letter;width:8.5in;height:11in}
.hai .sheet > *:not(.diag){position:relative;z-index:1}
.hai .sheet-head,.hai .sheet-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hai .sheet-head{padding-bottom:10px;border-bottom:var(--border-hairline) solid var(--line);margin-bottom:12mm}
.hai .sheet-foot{margin-top:auto;padding-top:10px;border-top:var(--border-hairline) solid var(--line)}
.hai .sheet-head .k,.hai .sheet-foot .k{font-size:10px}
.hai .sheet .sec{padding-top:0}
.hai .sheet .lh{margin-bottom:8mm}
.hai .sheet .lh h2{font-size:34px}
.hai .sheet .lede{font-size:18px}
.hai .sheet .stack{gap:8mm}
.hai .sheet .prose{max-width:none}
.hai .sheet .diag{width:62%;right:0;height:62%;top:0}
.hai .sheet.cover h1{font:300 54px/1.02 var(--font-display);letter-spacing:-.005em;margin:6mm 0 0;max-width:14ch;text-wrap:balance}
.hai .sheet.cover .cover-body{margin-top:auto;display:grid;gap:6mm}
.hai .sheet.cover .thesis{font-size:21px;margin-top:0}
.hai .doc-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;margin:6mm 0 0;padding-top:6mm;border-top:var(--border-hairline) solid var(--ink)}
.hai .doc-meta dt{font:500 10.5px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hai .doc-meta dd{margin:0;font-size:15px}
@page sheet{size:A4;margin:0}
@page letter{size:letter;margin:0}
@media print{
  .hai{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hai .desk{background:none;padding:0;display:block}
  .hai .sheet{break-after:page;margin:0}
  .hai .no-print{display:none!important}
  .hai figure,.hai .rule,.hai .node,.hai .items tr,.hai .sign,.hai .stat{break-inside:avoid}
}

/* ---------- Slide (1920 × 1080) ---------- */
.hai .deck{display:grid;grid-template-columns:repeat(2,max-content);gap:48px;padding:48px;background:var(--panel);width:max-content}
.hai .slide{position:relative;width:1920px;height:1080px;flex:none;padding:96px var(--slide-pad-x) 72px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;font-size:32px;line-height:1.45}
.hai .slide > *:not(.diag){position:relative;z-index:1}
.hai .slide.ink{background:var(--ink);color:var(--bg)}
.hai .slide .k{font-size:22px}
.hai .slide.ink .k,.hai .slide.ink .lede{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .slide h1,.hai .slide h2{font:300 96px/1.02 var(--font-display);letter-spacing:-.005em;margin:24px 0 0;max-width:22ch;text-wrap:balance}
.hai .slide h1{font-size:144px;max-width:14ch}
.hai .slide .lede{font-size:36px;max-width:40ch;margin-top:28px}
.hai .slide .statement{font:var(--type-slide-statement);max-width:22ch;text-wrap:balance}
.hai .slide .statement strong,.hai .slide h1 strong{font-weight:500}
.hai .slide .big{font:var(--type-slide-number);letter-spacing:var(--tracking-slide-number);font-variant-numeric:lining-nums}
.hai .slide-body{flex:1;min-height:0;display:grid;align-content:center;gap:40px;container-type:inline-size}
.hai .slide figure{zoom:1.75}
.hai .slide .diag{width:900px;right:0;color:var(--line)}
.hai .slide-foot{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:28px;margin-top:auto}
.hai .slide-foot .wordmark{font-size:22px}
.hai .slide-foot .k{font-size:18px}

/* ---------- SocialPost (1080 × 1080 / 1350 / 1920) ---------- */
.hai .feed{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:48px;padding:48px;background:var(--panel);width:max-content}
.hai .post{position:relative;width:1080px;height:1080px;flex:none;padding:var(--post-pad);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;font-size:34px;line-height:1.4}
.hai .post > *:not(.diag){position:relative;z-index:1}
.hai .post.portrait{height:1350px}
.hai .post.story{height:1920px;padding-block:240px}
.hai .post.ink{background:var(--ink);color:var(--bg)}
.hai .post .k{font-size:24px}
.hai .post.ink .k{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .post h2{font:var(--type-post-heading);margin:20px 0 0;max-width:20ch;text-wrap:balance}
.hai .post .statement{font:var(--type-post-statement);letter-spacing:var(--tracking-post-statement);max-width:15ch;text-wrap:balance;margin-top:auto}
.hai .post .statement strong{font-weight:500}
.hai .post .big{font:var(--type-post-number);letter-spacing:var(--tracking-post-number);font-variant-numeric:lining-nums;margin-top:auto}
.hai .post-body{flex:1;min-height:0;display:grid;align-content:center;container-type:inline-size}
.hai .post figure{zoom:2}
.hai .post .diag{width:620px;right:0;color:var(--line)}
.hai .post-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:44px}
.hai .post-foot .wordmark{font-size:28px}
.hai .post-foot .k{font-size:22px}
.hai .slide .big small,.hai .post .big small{font-size:.28em;font-weight:400;letter-spacing:0;margin-left:16px}
.hai .post p.sub{font-size:34px;line-height:1.35;max-width:24ch;margin-top:28px;opacity:.85}
/* ---------- Chart (one measure over time) ---------- */
.hai .chart{--h:200px;--max:100;list-style:none;margin:0;padding:0;display:flex;align-items:flex-end}
.hai .chart li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.hai .chart b{order:1;font:var(--type-label-edge);color:var(--ink-2);text-align:center;margin-bottom:6px;font-variant-numeric:tabular-nums}
.hai .chart b small{font-size:.85em;margin-left:1px}
.hai .chart i{order:2;display:block;flex:none;margin:0 6px;height:min(calc(var(--n) / var(--max) * var(--h)),var(--h));background:var(--metal)}
.hai .chart .k{order:3;padding-top:8px;border-top:var(--border-hairline) solid var(--ink);text-align:center;white-space:nowrap;overflow:hidden}
.hai .chart .was b{color:var(--ink-3)}
.hai .chart .was i{background:transparent;border:var(--border-hairline) dashed var(--ink-3);border-bottom:0}
.hai .chart .now b{color:var(--ink);font-weight:500}
.hai .chart .now i{background:var(--ink)}
.hai .chart .cut{flex:0 0 1px;align-self:stretch;position:relative;background:var(--ink)}
.hai .chart .cut .k{position:absolute;top:0;left:8px;border:0;padding:0;color:var(--ink);text-align:left;overflow:visible}
.hai .chart:has(.cut){padding-top:22px}
.hai .chart:has(.cut) .cut{margin-top:-22px}
.hai .slide .chart .k,.hai .post .chart .k{font-size:11.5px}
@container (max-width:520px){
  .hai .chart{flex-direction:column;align-items:stretch}
  .hai .chart li{flex:none;height:auto;display:grid;grid-template-columns:52px minmax(0,1fr) 44px;align-items:center}
  .hai .chart .k{grid-column:1;grid-row:1;border:0;border-right:var(--border-hairline) solid var(--ink);padding:6px 10px 6px 0;text-align:left}
  .hai .chart i{grid-column:2;grid-row:1;margin:0;height:18px;width:min(calc(var(--n) / var(--max) * 100%),100%)}
  .hai .chart b{grid-column:3;grid-row:1;margin:0;padding-left:8px;text-align:left}
  .hai .chart .was i{border:var(--border-hairline) dashed var(--ink-3);border-left:0}
  .hai .chart .cut{display:block;height:auto;background:none;border-top:var(--border-hairline) solid var(--ink);padding:5px 0 5px 62px}
  .hai .chart .cut .k{position:static}
  .hai .chart:has(.cut){padding-top:0}
  .hai .chart:has(.cut) .cut{margin-top:0}
}
/* ---------- Form states: busy and unavailable buttons, the form's result, choice rows ---------- */
.hai .btn[aria-busy="true"],.hai .btn[aria-busy="true"]:hover{background:transparent;color:var(--ink);border-style:dashed;cursor:progress}
.hai .offer.featured .btn[aria-busy="true"],.hai .offer.featured .btn[aria-busy="true"]:hover{background:transparent;color:var(--bg);border-color:var(--bg)}
.hai .btn:disabled,.hai .btn:disabled:hover,.hai .btn[aria-disabled="true"]:not([aria-busy="true"]),.hai .btn[aria-disabled="true"]:not([aria-busy="true"]):hover{background:transparent;border-color:var(--ink-3);color:var(--ink-3);cursor:not-allowed}
.hai .form-status{display:grid;gap:6px;padding:18px 20px}
.hai .form-status b{font:var(--type-heading-card)}
.hai .form-status p{margin:0;font:var(--type-text-caption)}
.hai .form-status.sent{background:var(--ink);color:var(--bg)}
.hai .form-status.sent .k,.hai .form-status.sent p{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .form-status.failed{border:var(--border-strong) dashed var(--ink)}
.hai .form-status.failed b::before{content:"\2715\00a0";font-family:var(--font-mono);font-weight:500}
.hai .form-status.failed p{color:var(--ink-2)}
.hai fieldset.field{border:0;margin:0;padding:0;min-width:0}
.hai fieldset.field legend{padding:0;margin-bottom:10px}
.hai .field label.check,.hai .field .choice label{font:400 15.5px/1.45 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.hai .field .check input{width:18px;height:18px;padding:0;border:var(--stroke-glyph) solid var(--ink)}
.hai .field.invalid .check input{width:18px;height:18px;padding:0;border:var(--border-strong) dashed var(--ink)}
.hai .choice{display:grid}
.hai .field .choice input,.hai .field.invalid .choice input,.hai .choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0}
.hai .choice label{display:grid;gap:2px;padding:14px 16px;border:var(--border-hairline) solid var(--ink-3);margin-top:-1px;cursor:pointer;position:relative}
.hai .choice label:first-of-type{margin-top:0}
.hai .choice label:hover{border-color:var(--ink);z-index:1}
.hai .choice label b{font:var(--type-heading-cell)}
.hai .choice label span{font:var(--type-text-small);color:var(--ink-2)}
.hai .choice input:checked + label{background:var(--ink);color:var(--bg);border-color:var(--ink);z-index:1}
.hai .choice input:checked + label span{color:inherit;opacity:var(--opacity-sub-on-ink)}
.hai .choice input:focus-visible + label{outline:var(--border-strong) solid var(--ink);outline-offset:3px;z-index:2}
.hai .field.invalid .choice label{border:var(--border-strong) dashed var(--ink)}
/* ---------- Accessibility utilities ---------- */
.hai .sr-only,.hai .skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hai .skip:focus{position:absolute;top:12px;left:clamp(16px,4vw,var(--gutter));z-index:100}
/* ---------- Axo (exploded figures in depth; the geometry comes from components/axo.js) ----------
   One projection, flat token fills, 1px edges, flat HTML labels. The markup is the exploded rest state: print,
   reduced motion and no script get it as it is. The narrow form starts at 650px of container, 760 for .wide: just
   above the widest drawing each serves (650 and 760 units), so the full form only ever renders 1:1. */
.hai .hero .axo-fig{margin-top:clamp(36px,5vw,56px)}
.hai .axo{position:relative;width:100%;max-width:calc(var(--axo-w,800) * 1px)}
.hai .axo-draw{position:relative}
.hai .axo-svg{width:100%;height:auto;overflow:visible;color:var(--wire)}
.hai .axo-svg path,.hai .axo-svg circle{vector-effect:non-scaling-stroke}
.hai .axo-face{stroke-width:var(--border-hairline);stroke-linejoin:bevel}
.hai .axo-edge,.hai .axo-strike,.hai .axo-mark{fill:none;stroke-width:var(--border-hairline);stroke-linejoin:bevel}
.hai .axo-ink .axo-face{fill:var(--ink);stroke:var(--ink)}
.hai .axo-ink :is(.axo-edge,.axo-mark){stroke:var(--bg)}
.hai .axo-ink .axo-mark-soft{stroke-opacity:var(--opacity-kicker-on-ink)}
.hai .axo-metal .axo-face{fill:var(--metal);stroke:var(--on-metal)}
.hai .axo-metal :is(.axo-edge,.axo-mark){stroke:var(--on-metal)}
.hai .axo-bg .axo-face{fill:var(--bg);stroke:var(--ink)}
.hai .axo-bg :is(.axo-edge,.axo-mark){stroke:var(--ink)}
.hai :is(.axo-bg,.axo-metal) .axo-mark-soft{stroke:var(--wire)}
.hai .axo-dashed :is(.axo-face,.axo-edge,.axo-mark){stroke:var(--ink-3);stroke-dasharray:3 3}
.hai .axo-struck :is(.axo-face,.axo-edge,.axo-mark,.axo-strike){stroke:var(--ink-3)}
.hai .axo-wire{fill:none;stroke:currentColor;stroke-width:var(--stroke-wire)}
.hai .axo-wire.axo-dashed{stroke-dasharray:3 3}
.hai .axo-wire.axo-wire-ink{stroke:var(--ink)}
.hai .axo-dot{fill:var(--ink)}
.hai .axo-leader{fill:none;stroke:var(--wire);stroke-width:var(--border-hairline)}
.hai .axo-labels{position:absolute;left:0;top:0;bottom:0;width:100%}
.hai .axo-n,.hai .axo-parts{display:none}
.hai .axo-label{position:absolute;right:0;margin-top:-.6em;font:var(--type-heading-layer);color:var(--ink)}
.hai .axo-label b{display:block;font-weight:inherit;text-wrap:pretty}
.hai .axo-label .k{display:block;margin-top:6px}
.hai .axo-label.axo-l{left:0;text-align:right}
.hai .axo-label:is(.axo-dashed,.axo-struck) b{color:var(--ink-3)}
.hai .axo-label.axo-struck b{text-decoration:line-through;text-decoration-thickness:var(--border-hairline)}
.hai .axo.numbered .axo-label{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
.hai .axo.numbered .axo-label > *{grid-column:2}
.hai .axo.numbered .axo-label > .axo-n{display:block;grid-column:1;grid-row:1;font:var(--type-label-kicker);letter-spacing:var(--tracking-label-kicker);color:var(--ink-3)}
.hai .axo .axo-label.axo-head{display:block;margin-top:-.7em;font:var(--type-label-kicker);white-space:nowrap}
.hai .axo-label.axo-head .k{margin-top:0}
.hai .axo-tag{position:absolute;transform:translateX(-50%);margin-top:12px;font:var(--type-label-kicker);letter-spacing:var(--tracking-label-kicker);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
/* narrow form: the same drawing cropped to its parts, item numbers on the leaders, the names in a parts list */
@container (max-width:650px){
  .hai .axo{max-width:calc(var(--axo-crop,var(--axo-w,800)) * 1px)}
  .hai .axo-draw{overflow:hidden}
  .hai .axo-draw > :is(.axo-svg,.axo-labels){width:calc(100% * var(--axo-w,800) / var(--axo-crop,var(--axo-w,800)));max-width:none}
  .hai .axo .axo-label{margin-top:-.7em;font:var(--type-label-kicker);letter-spacing:var(--tracking-label-kicker)}
  .hai .axo .axo-label > :not(.axo-n),.hai .axo :is(.axo-label.axo-head,.axo-leader-head){display:none}
  .hai .axo .axo-label > .axo-n,.hai .axo.numbered .axo-label > .axo-n{display:block;color:var(--ink)}
  .hai .axo-parts{display:grid;list-style:none;margin:var(--caption-gap) 0 0;padding:0;border-bottom:var(--border-hairline) solid var(--line)}
}
@container (max-width:760px){
  .hai .axo.wide{max-width:calc(var(--axo-crop,var(--axo-w,800)) * 1px)}
  .hai .axo.wide .axo-draw{overflow:hidden}
  .hai .axo.wide .axo-draw > :is(.axo-svg,.axo-labels){width:calc(100% * var(--axo-w,800) / var(--axo-crop,var(--axo-w,800)));max-width:none}
  .hai .axo.wide .axo-label{margin-top:-.7em;font:var(--type-label-kicker);letter-spacing:var(--tracking-label-kicker)}
  .hai .axo.wide .axo-label > :not(.axo-n),.hai .axo.wide :is(.axo-label.axo-head,.axo-leader-head){display:none}
  .hai .axo.wide .axo-label > .axo-n{display:block;color:var(--ink)}
  .hai .axo.wide .axo-parts{display:grid;list-style:none;margin:var(--caption-gap) 0 0;padding:0;border-bottom:var(--border-hairline) solid var(--line)}
}
.hai .axo-parts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:baseline;padding:10px 0;border-top:var(--border-hairline) solid var(--line)}
.hai .axo-parts li > .k:first-child{grid-row:1 / span 2;color:var(--ink)}
.hai .axo-parts li > :not(:first-child){grid-column:2}
.hai .axo-parts b{font:var(--type-heading-gate)}
.hai .axo-parts li:is(.axo-dashed,.axo-struck) b{color:var(--ink-3)}
.hai .axo-parts li.axo-struck b{text-decoration:line-through;text-decoration-thickness:var(--border-hairline)}
.hai .axo-parts li.axo-head{display:block;padding:0 0 10px;border-top:0}
.hai .axo-parts li.axo-head > .k{color:var(--ink-3)}
/* the one motion: .armed puts the parts back together, .run lets them travel to rest, once; labels wait.
   Screens that allow motion only, so print and reduced motion always show the rest state. */
@media screen and (prefers-reduced-motion:no-preference){
  .hai .axo.armed .axo-part{transform:translate(calc(var(--axo-dx,0) * 1px),calc(var(--axo-dy,0) * 1px))}
  .hai .axo.run .axo-part{transition:transform var(--duration-travel) var(--ease-travel);transition-delay:calc(var(--axo-i,0) * var(--stagger-travel))}
  .hai .axo:is(.armed,.run) :is(.axo-leaders,.axo-labels){visibility:hidden}
}