/* Helio kit v1.5 · helio.css
   Tokens (day by default, class "night" on <html> or on any container), type scale, layout and the shared parts:
   header, buttons, links, tags, statement (receipt), cells counter, status stepper, name line, form fields, chips,
   checkbox, switch, segmented switch, role switch (.h-role) and language picker (.h-lang), horizon + sun slot,
   ray traces (.h-trace.h-tr-<how>), the morph overlay, reveal, dock; since v1.3 people (.h-av, .h-person), seats,
   lists, product rows, profile head and figures, tables, the split bar, the share control, the deal thread, documents,
   signatures, the one-time code, the log, notices, empty and loading states, the file field (gallery.html); since
   v1.5 the attachment row (.h-file), provider buttons (.h-prov), views (.h-views), the side column that sticks while it
   fits (.h-stick), the tap band (.h-tap), masked values (.h-mask), not-a-link URLs (.h-url) and the modifiers listed in
   design/SYSTEM.md section 4.
   The JS side is documented at the top of helio.js. Content the ray must pass behind lives in .h-layer (z 2);
   cards are z 3; ray ink z 4, front z 5. */

/* ---------- fonts: self-hosted under kit/fonts (X-020 D8, t17 P1-20), the files and unicode ranges Google Fonts serves,
   so nothing renders differently and no visitor's address reaches Google. Manrope is one variable file per script
   (400 to 800), IBM Plex Mono two static weights; OFL licences beside the files ---------- */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --sun:#FFC800;--sun-deep:#E8A800;--ochre:#D69600;--ink:#0A0A0A;--paper:#FFFFFF;
  --sans:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:clamp(16px,5vw,72px);--max:1440px;--gap:24px;--hdr:88px;
  --ease:cubic-bezier(.16,.84,.24,1);--ease-io:cubic-bezier(.45,0,.2,1);
  --r-card:8px;--r-field:6px;
}
:root,.day{
  --bg:#FFFFFF;--fg:#0A0A0A;--t2:#2E2C28;--t3:#55524C;--t4:#706C65;--ln:#E6E3DC;--rule:#0A0A0A;
  --panel:#F3F1EC;--panel-2:#ECE9E2;--card:#FFFFFF;--ghost:#CFCBC2;--err:#B8321C;
  --btn:#0A0A0A;--btn-fg:#FFFFFF;--btn-ar:#FFC800;--sel:#0A0A0A;--sel-fg:#FFFFFF;--tick:#FFC800;
  --shadow:0 0 0 1px rgba(10,10,10,.09),0 34px 70px -34px rgba(80,56,0,.28),0 14px 28px -18px rgba(10,10,10,.14);
  --lit-a:rgba(255,200,0,.38);--lit-b:rgba(255,200,0,.13);
  --btn-sh:0 14px 30px -14px rgba(10,10,10,.45);--btn-sh-ghost:0 14px 30px -18px rgba(10,10,10,.35);
  color-scheme:light;
}
.night{
  --bg:#0B0B0F;--fg:#F2F0EA;--t2:#C9C6BE;--t3:#9C988F;--t4:#7F7B73;--ln:rgba(242,240,234,.13);--rule:rgba(242,240,234,.7);
  --panel:#17171D;--panel-2:#1E1E25;--card:#131318;--ghost:#3B3A42;--err:#FF8B73;
  --btn:#FFC800;--btn-fg:#0A0A0A;--btn-ar:#0A0A0A;--sel:#FFC800;--sel-fg:#0A0A0A;--tick:#0A0A0A;
  --shadow:0 0 0 1px rgba(242,240,234,.1),0 40px 80px -40px rgba(0,0,0,.9),0 0 70px -24px rgba(255,200,0,.12);
  --lit-a:rgba(255,200,0,.26);--lit-b:rgba(255,200,0,.08);
  --btn-sh:0 16px 40px -12px rgba(255,200,0,.5);--btn-sh-ghost:0 16px 38px -16px rgba(255,200,0,.3);
  color-scheme:dark;
}
.night:not(html){background:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;transition:background-color 1.2s var(--ease-io)}
body{margin:0;background:transparent;color:var(--fg);font:500 17px/1.5 var(--sans);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,h2,h3,h4,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#FFC800;color:#0A0A0A}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.h-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.h-wrap{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.h-layer{position:relative;z-index:2}
.h-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
@media (max-width:860px){.h-grid:not(.h-keep){grid-template-columns:minmax(0,1fr)}.h-grid:not(.h-keep)>*{grid-column:1/-1!important;grid-row:auto!important}}
/* a side column that stays in view while it fits the window; helio.js adds .h-free when it is taller, so it scrolls */
.h-stick{position:sticky;top:calc(var(--hdr) + 24px)}
.h-stick.h-free{position:static}
@media (max-width:860px){.h-stick{position:static}}

/* ---------- type ---------- */
.h-display{font-weight:700;font-size:clamp(40px,5.7vw,92px);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.h-h1{font-weight:700;font-size:clamp(34px,4.6vw,70px);line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
.h-h2{font-weight:700;font-size:clamp(28px,3.1vw,46px);line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.h-h3{font-weight:700;font-size:clamp(20px,1.6vw,24px);line-height:1.22;letter-spacing:-.03em}
.h-quote{font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.32;letter-spacing:-.025em;text-wrap:pretty}
.h-lede{font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--t2);max-width:34em;text-wrap:pretty}
.h-body{font-size:17px;line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-small{font-size:14.5px;line-height:1.45;color:var(--t3)}
.h-label{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.h-m{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.01em}
.h-kicker{color:var(--t4)}
.h-kicker b{color:var(--fg);font-weight:500}
.h-fig-xl,.h-fig-l,.h-fig-m{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-fig-xl{font-size:clamp(76px,10.5vw,160px);line-height:.9;letter-spacing:-.06em}
.h-fig-l{font-size:clamp(48px,4.4vw,66px);line-height:1;letter-spacing:-.05em}
.h-fig-m{font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:-.04em}
.h-strike{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--t4)}
/* Manrope's common ligatures turn "(c)" into a copyright sign and "->" into an arrow; .h-noliga keeps the letters */
.h-noliga{font-variant-ligatures:no-common-ligatures}
.h-lines>span{display:block;overflow:hidden;padding:0 .04em .1em 0;margin-bottom:-.1em}
.h-lines>span>span{display:block;animation:hLineUp 1.35s var(--ease) both;animation-delay:calc(.2s + var(--i,0) * .12s)}

/* ---------- header, logo, links ---------- */
.h-hdr{position:relative;z-index:6}
.h-hdr>.h-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hdr)}
.h-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.045em;color:var(--fg)}
.h-logo i{width:16px;height:16px;border-radius:50%;background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.h-link{position:relative;font-weight:600;font-size:15px;text-decoration:none;color:var(--fg);white-space:nowrap}
.h-link::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.h-link:hover::after{transform:scaleX(1);transform-origin:left}
.h-a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--ghost);transition:text-decoration-color .3s}
.h-a:hover{text-decoration-color:currentColor}
/* a 44px tap band round an inline link: the hit area grows, the text and the line do not move */
.h-tap{position:relative}
.h-tap::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
@media (max-width:560px){:root{--hdr:72px}.h-logo{font-size:20px;gap:8px}.h-logo i{width:14px;height:14px}}

/* ---------- tag, dot ---------- */
.h-tag{display:inline-block;border:1px solid currentColor;border-radius:3px;padding:1px 6px 0;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.h-tag.sun{background:#FFC800;border-color:#FFC800;color:#0A0A0A}
.h-tag.solid{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.h-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A,0 0 0 calc(var(--lit,0) * 7px) rgba(255,200,0,.35);flex:none}
.h-dot.sm{width:10px;height:10px}
.h-dot.off{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}

/* ---------- buttons ---------- */
.h-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:19px 28px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-fg);font:700 17px/1.2 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .5s var(--ease),box-shadow .6s var(--ease),background-color .3s,opacity .3s}
.h-btn .ar{display:inline-block;color:var(--btn-ar);transition:transform .5s var(--ease),text-shadow .6s var(--ease)}
.h-btn:hover{transform:translateY(-2px);box-shadow:var(--btn-sh)}
.h-btn:hover .ar{transform:translateX(6px)}
.h-btn:active{transform:translateY(0)}
.h-btn.sun{background:#FFC800;color:#0A0A0A}
.h-btn.sun .ar{color:#0A0A0A}
.h-btn.sun:hover{box-shadow:0 14px 40px -12px rgba(255,200,0,.55)}
.h-btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.h-btn.ghost .ar{color:var(--fg)}
.h-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg),var(--btn-sh-ghost)}
.h-btn.sm{min-height:44px;padding:12px 18px;font-size:15px;gap:10px}
.h-btn.block{display:flex;width:100%;justify-content:space-between}
/* provider buttons: Sign in with Google or Apple, mark then words, centred; a mark in currentColor (Apple's) is black
   by day and white by night, the Google G keeps its own colours */
.h-btn.h-prov,.h-btn.block.h-prov{justify-content:center;gap:12px}
.h-prov>svg,.h-prov-m{flex:none;width:20px;height:20px}
@media (max-width:560px){.h-btn.wrap{max-width:100%;white-space:normal;text-align:left}}
.h-btn[disabled],.h-btn.is-off{opacity:.32;pointer-events:none}
.h-btn.is-busy{pointer-events:none}
.h-btn.is-busy .ar{opacity:0}
.h-btn.is-busy::after{content:"";position:absolute;right:26px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--btn-ar);border-right-color:transparent;animation:hSpin .7s linear infinite}
.h-btn.sun.is-busy::after{border-color:#0A0A0A;border-right-color:transparent}
.h-btn.graze{box-shadow:0 0 0 1.5px rgba(255,200,0,.6),0 12px 44px -10px rgba(255,200,0,.6)}
.h-btn.graze .ar{transform:translateX(5px);text-shadow:0 0 6px #FFC800,0 0 18px rgba(255,200,0,.95)}
.h-btn.sun.graze .ar{text-shadow:0 0 8px #FFFFFF,0 0 20px rgba(255,255,255,.95)}

/* ---------- card and statement (receipt) ---------- */
.h-card{position:relative;z-index:3;background:var(--card);border-radius:var(--r-card);padding:22px 26px 24px;box-shadow:var(--shadow)}
.h-stmt-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--t3)}
.h-row{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--ln);font-size:15.5px;font-weight:500}
.h-row>:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.h-row.mut{color:var(--t3)}
.h-row.strong{font-weight:700;border-bottom-color:var(--rule)}
.h-row.bare{border-bottom:0}
.h-row .nil{color:var(--t4);font-weight:500}
.h-row::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;z-index:-1;border-radius:4px;background:linear-gradient(90deg,var(--lit-a),var(--lit-b) 62%,rgba(255,200,0,0));opacity:var(--lit,0);pointer-events:none;transition:opacity .35s ease}
.h-stmt-f{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px}
.h-stmt-fl{font-size:16px;font-weight:700}
.h-stmt-fd{margin-top:4px;color:var(--t3);font-family:var(--mono);font-size:12px}
.h-stmt-fig{display:flex;align-items:center;gap:14px;font-size:clamp(44px,4.2vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 calc(var(--lit,0) * 26px) rgba(255,200,0,calc(var(--lit,0) * .75))}
@media (max-width:560px){
  .h-card{padding:18px 18px 20px}.h-row{font-size:14.5px}
  .h-row>:first-child{min-width:0;overflow-wrap:break-word}
  .h-row>:last-child{white-space:normal;text-wrap:balance}
  .h-stmt-f{flex-wrap:wrap}
  .h-stmt-fig{margin-left:auto;font-size:clamp(34px,10.4vw,42px);gap:10px}
}
@media (min-width:561px){.h-stmt-fig.sm{font-size:clamp(40px,3.3vw,52px)}}
/* a figure that differs in width between sides: the .h-rs stack holds the widest, .end keeps the figure on the right */
.h-stmt-fig>.h-rs{flex:none}
.h-rs.end{justify-items:end}
.h-rs.end>*{display:inline-flex;align-items:center;gap:inherit}

/* ---------- cells counter (12-month bar, 3 of 5 letters) ---------- */
.h-cells{display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));gap:6px}
.h-cells>i{position:relative;height:var(--ch,14px);border:1.5px solid var(--fg);border-radius:3px;overflow:hidden}
.h-cells>i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.h-cells>i.on::after{transform:none}
.h-cells>i.sun::after{background:#FFC800}
.h-cells>i.next{border-style:dashed}
.h-cells>i.flash{animation:hFlash 1.6s var(--ease) both}
.h-cells>i:has(>.h-trace){overflow:visible}
.h-cells>i:has(>.h-trace)::after{border-radius:1.5px}

/* ---------- status stepper (horizontal; .v vertical; vertical by itself under 700px) ---------- */
.h-steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0 20px}
.h-steps>li{position:relative;padding-top:34px;min-width:0}
.h-steps>li::before{content:"";position:absolute;top:6px;left:14px;right:-20px;height:1.5px;background:var(--ln)}
.h-steps>li:last-child::before{display:none}
.h-steps>li.done::before{background:var(--fg)}
.h-sd{position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.h-steps>li.done .h-sd{background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.h-steps>li.now .h-sd{background:var(--fg)}
.h-steps>li.now .h-sd::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #E8A800;animation:hPing 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.h-sd.is-touched,.h-steps>li.is-touched .h-sd{transform:scale(1.3);box-shadow:inset 0 0 0 1.5px var(--fg),0 0 0 5px rgba(255,200,0,.42)}
.h-steps>li.done .h-sd.is-touched{box-shadow:inset 0 0 0 1.5px #0A0A0A,0 0 0 5px rgba(255,200,0,.42)}
.h-st{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.h-steps>li.next .h-st{color:var(--t3)}
.h-sw{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--t3)}
.h-steps>li.now .h-sw{color:var(--fg)}
.h-sp{margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--t3);text-wrap:pretty}
.h-steps.v{grid-template-columns:minmax(0,1fr)}
.h-steps.v>li{padding:0 0 26px 34px}
.h-steps.v>li::before{top:14px;bottom:-1px;left:6px;right:auto;width:1.5px;height:auto}
.h-steps.v>li:last-child{padding-bottom:0}
.h-steps.v .h-sd{top:4px}
.h-steps.v .h-sp{margin-top:6px}
@media (max-width:700px){
  .h-steps:not(.h-keep){grid-template-columns:minmax(0,1fr)}
  .h-steps:not(.h-keep)>li{padding:0 0 24px 34px}
  .h-steps:not(.h-keep)>li::before{top:14px;bottom:-1px;left:6px;right:auto;width:1.5px;height:auto}
  .h-steps:not(.h-keep)>li:last-child{padding-bottom:0}
  .h-steps:not(.h-keep) .h-sd{top:4px}
  .h-steps:not(.h-keep) .h-sp{margin-top:6px}
}

/* ---------- name line: a person answers for it ---------- */
.h-sign{position:relative}
.h-sign-name{display:block;padding:0 0 10px;border-bottom:1.5px solid var(--fg);font-size:clamp(22px,1.9vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.15}
.h-sign-name>span{display:inline-block}
.h-sign-cap{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--t3)}

/* ---------- disclosure (FAQ, terms) ---------- */
.h-faq{border-top:1px solid var(--rule)}
.h-faq details{border-bottom:1px solid var(--ln)}
.h-faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:700;letter-spacing:-.02em}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";flex:none;font:400 22px/1 var(--mono);color:var(--t3);transition:transform .45s var(--ease)}
.h-faq details[open] summary::after{transform:rotate(45deg)}
.h-faq details>div{padding:0 0 22px;max-width:36em;color:var(--t2);font-size:16.5px;line-height:1.55}

/* ---------- form ---------- */
.h-field{display:grid;gap:8px;align-content:start;min-width:0}
.h-flabel{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.h-flabel .opt{font-weight:500;color:var(--t4)}
.h-input,.h-textarea,.h-select{display:block;width:100%;min-height:56px;padding:15px 18px;border:0;border-radius:var(--r-field);background:var(--panel);color:var(--fg);font:500 17px/1.45 var(--sans);box-shadow:inset 0 0 0 1.5px rgba(10,10,10,0);outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .25s var(--ease),background-color .25s}
.h-input::placeholder,.h-textarea::placeholder{color:var(--t4);opacity:1}
.h-input:hover,.h-textarea:hover,.h-select:hover{box-shadow:inset 0 0 0 1.5px var(--ghost)}
.h-input:focus,.h-textarea:focus,.h-select:focus{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--fg),0 0 0 4px rgba(255,200,0,.42)}
.h-textarea{min-height:156px;resize:vertical}
.h-hint{font-size:14px;line-height:1.45;color:var(--t3)}
.h-err{display:none;font-size:14px;font-weight:600;line-height:1.45;color:var(--err)}
.is-error>.h-err,.h-err.on{display:block}
.h-field.is-error .h-input,.h-field.is-error .h-textarea{box-shadow:inset 0 0 0 1.5px var(--err)}
.h-field.is-error .h-input:focus,.h-field.is-error .h-textarea:focus{box-shadow:inset 0 0 0 1.5px var(--err),0 0 0 4px rgba(255,200,0,.42)}
.h-blank{display:inline-block;min-width:5ch;max-width:100%;padding:0 3px 1px;margin:0 1px;border:0;border-bottom:1.5px solid var(--t4);border-radius:0;background:transparent;color:var(--fg);font:inherit;font-weight:700;letter-spacing:inherit;outline:none;vertical-align:baseline;field-sizing:content;-webkit-appearance:none;appearance:none;transition:border-color .25s,background .25s}
.h-blank::placeholder{color:var(--t4);font-weight:500}
.h-blank:hover{border-bottom-color:var(--fg)}
.h-blank:focus{border-bottom-color:#FFC800;background:linear-gradient(rgba(255,200,0,0) 58%,rgba(255,200,0,.3) 58%)}
.h-blank.is-error{border-bottom-color:var(--err);border-bottom-style:dashed}
/* phone: the blank's box grows 12px upward to a 44px target; the text, the line and the focus band stay where they were */
@media (max-width:560px){
  input.h-blank,input.h-blank:focus{padding-top:12px;margin-top:-12px;background-size:100% calc(100% - 12px);background-position:0 100%;background-repeat:no-repeat}
}
select.h-blank{padding-right:20px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-size:5px 5px,5px 5px;background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-repeat:no-repeat}
.h-chips{display:flex;flex-wrap:wrap;gap:8px}
.h-chip{position:relative;display:inline-flex}
.h-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.h-chip span{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 16px;border-radius:999px;background:var(--panel);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2;transition:background-color .25s,color .25s,box-shadow .25s}
.h-chip span::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--t4);transition:background-color .25s,box-shadow .25s}
.h-chip input:hover+span{box-shadow:inset 0 0 0 1.5px var(--ghost)}
.h-chip input:checked+span{background:var(--sel);color:var(--sel-fg)}
.h-chip input:checked+span::before{background:#FFC800;box-shadow:inset 0 0 0 1.5px #FFC800}
.night .h-chip input:checked+span::before{background:#0A0A0A;box-shadow:none}
.h-chip input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.h-chips.is-error .h-chip span{box-shadow:inset 0 0 0 1.5px var(--err)}
.h-check{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.45;color:var(--t2);cursor:pointer}
.h-check input{flex:none;display:grid;place-content:center;width:22px;height:22px;margin:0;border-radius:5px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .25s}
.h-check input::after{content:"";width:11px;height:6px;border-left:2px solid var(--tick);border-bottom:2px solid var(--tick);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s var(--ease)}
.h-check input:checked{background:var(--sel)}
.h-check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.h-check.is-error input{box-shadow:inset 0 0 0 1.5px var(--err)}
.h-switch{display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.4;cursor:pointer}
.h-switch input{flex:none;position:relative;width:46px;height:28px;margin:0;border-radius:999px;background:var(--ghost);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .35s var(--ease)}
.h-switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .45s var(--ease),background-color .35s,box-shadow .35s}
.h-switch input:checked{background:#0A0A0A}
.h-switch input:checked::after{transform:translateX(18px);background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.night .h-switch input:checked{background:#FFC800}
.night .h-switch input:checked::after{background:#0B0B0F;box-shadow:none}

/* ---------- segmented switch (role, view) ---------- */
.h-seg{position:relative;display:inline-flex;align-items:center;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg)}
.h-seg>a,.h-seg>button{position:relative;z-index:1;display:block;padding:9px 18px;border:0;border-radius:999px;background:none;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--fg);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .55s var(--ease)}
.h-seg>a::before,.h-seg>button::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.h-seg>i{position:absolute;z-index:0;left:0;top:3px;bottom:3px;width:0;border-radius:999px;background:var(--sel)}
.h-seg.ready>i{transition:transform .65s var(--ease),width .65s var(--ease),background-color 1.2s}
.h-seg>[aria-pressed="true"],.h-seg>[aria-current="page"]{color:var(--sel-fg)}
.h-seg:not(.ready)>[aria-pressed="true"],.h-seg:not(.ready)>[aria-current="page"]{background:var(--sel)}
@media (max-width:560px){.h-seg>a,.h-seg>button{padding:8px 12px;font-size:13px}}

/* ---------- role switch D (Helio.morph wires it): an underline that caterpillars across, a half sun sets and rises ---------- */
.h-role{position:relative;display:flex;align-items:center;gap:clamp(22px,2.4vw,36px)}
.h-role>[role="radio"]{position:relative;z-index:1;min-height:44px;margin:0;padding:12px 2px 17px;border:0;background:none;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--t3);white-space:nowrap;cursor:pointer;transition:color .45s ease;-webkit-tap-highlight-color:transparent}
.h-role>[role="radio"]:hover,.h-role>[aria-checked="true"]{color:var(--fg)}
.h-role-hz{position:absolute;left:-10px;right:-10px;bottom:7px;height:12px;overflow:hidden;pointer-events:none}
.h-role-hz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ln)}
.h-role-hz>b{position:absolute;left:0;bottom:0;z-index:1;width:1px;height:1.5px;background:var(--fg);transform-origin:0 50%}
.h-role-hz>i{position:absolute;left:0;bottom:0;z-index:2;width:14px;height:7px;margin-left:-7px;border-radius:7px 7px 0 0;background:#FFC800;box-shadow:inset 0 0 0 1.25px #0A0A0A,0 0 10px 0 rgba(255,200,0,.5);transition:background-color .6s ease,box-shadow .6s ease}
.h-role-hz>i.n{background:#C9700C;box-shadow:inset 0 0 0 0 transparent,0 0 12px 2px rgba(255,120,20,.5)}

/* ---------- language picker (Helio.lang): the current code opens the languages by their own names; a plain swap, never a morph.
   A bare row of [data-lang] buttons still renders as before ---------- */
.h-lang{position:relative;display:flex;align-items:center;width:fit-content}
.h-lang>button,.h-lang>a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0 4px;border:0;background:none;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--t3);text-decoration:none;text-transform:uppercase;cursor:pointer;transition:color .3s}
.h-lang>button:hover,.h-lang>a:hover,.h-lang>[aria-pressed="true"],.h-lang>[aria-current="true"]{color:var(--fg)}
.h-lang>[aria-pressed="true"],.h-lang>[aria-current="true"]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.h-lang>.h-lang-b{gap:8px;min-width:44px;color:var(--fg);-webkit-tap-highlight-color:transparent}
.h-lang-b::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.h-lang-b[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.h-lang-l{position:absolute;right:0;top:calc(100% + 4px);z-index:9;min-width:184px;padding:6px;border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow);animation:hFade .25s var(--ease) both}
.h-lang-l[hidden]{display:none}
.h-lang-l>[data-lang]{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-field);background:none;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--t2);text-align:left;white-space:nowrap;cursor:pointer}
.h-lang-l>[data-lang]:hover,.h-lang-l>[data-lang]:focus-visible{background:var(--panel);color:var(--fg)}
.h-lang-l>[data-lang]:focus-visible{outline-offset:-2px}
.h-lang-l>[aria-checked="true"]{color:var(--fg)}
.h-lang-l>[aria-checked="true"]::after{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- horizon and sun (Helio.sun mounts a canvas into .h-sun) ---------- */
.h-horizon{position:relative;height:0;overflow-x:clip;--R:clamp(92px,15vw,250px)}
.h-hz{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--fg);transform-origin:left center;animation:hDrawX 1.9s var(--ease) .05s both}
.h-sun{position:absolute;right:calc(var(--pad) + 1vw);bottom:0;width:calc(var(--R) * 2);height:var(--R);pointer-events:none}
.h-sun>canvas{position:absolute;pointer-events:none}
.h-sun.lift{z-index:1}
.h-sun:not(.on){overflow:hidden}
.h-sun:not(.on)::before{content:"";position:absolute;inset:0;border-radius:var(--R) var(--R) 0 0;background:#FFC800;transform:translateY(calc((1 - var(--rise,1)) * 100%))}
@media (max-width:860px){.h-horizon{--R:clamp(78px,27vw,170px)}.h-sun{right:calc(var(--pad) + 2vw)}}
.h-sky{position:absolute;left:0;right:0;bottom:-32vh;height:112vh;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,110,40,0) 0%,rgba(255,108,44,.14) 35.7%,rgba(255,132,40,.36) 60%,rgba(255,168,52,.56) 71.4%,rgba(255,150,52,.3) 71.4%,rgba(255,120,40,0) 100%)}

/* ---------- ray: canvases and the marks it leaves ---------- */
.h-ray-cv{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}
.h-ray-ink{mix-blend-mode:multiply}
html.night .h-ray-ink{mix-blend-mode:screen}
.h-trace{position:absolute;left:0;top:0;width:1px;height:1px;max-width:none;margin:0;padding:0;border:0;overflow:visible;pointer-events:none}
.h-trace path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.h-trace.h-tr-sign{z-index:1}
.h-trace.h-tr-sign path{stroke:#D69600;stroke-width:1.8}
.night .h-trace.h-tr-sign path{stroke:#FFC800}
.h-trace.h-tr-under,.h-trace.h-tr-mark{z-index:-1}
.h-trace.h-tr-under path{stroke:#FFC800}
.h-trace.h-tr-mark path{stroke:rgba(255,214,48,.9)}
.night .h-trace.h-tr-mark path{stroke:rgba(255,186,0,.34)}

/* ---------- morph (Helio.morph): the role-only slots, the glyph overlay, the theme crossfade ---------- */
html[data-side="expert"] [data-morph="only-builder"],html[data-side="builder"] [data-morph="only-expert"]{display:none}
html[data-side="buyer"] [data-morph="only-expert"],html[data-side="buyer"] [data-morph="only-builder"],html:not([data-side="buyer"]) [data-morph="only-buyer"]{display:none}
.h-mo-slot{overflow:hidden}
.h-rs{display:grid}
.h-rs>*{grid-area:1/1;min-width:0}
.h-rs>[data-reserve],.h-rs>.h-twin{visibility:hidden;pointer-events:none}
/* views: a slot whose content differs by side, for three sides (expert, builder, buyer); every panel holds the slot,
   so it keeps the tallest and nothing below moves. Out: sinks like the morph's letters; in: rises after them */
.h-views{display:grid}
.h-views>*{grid-area:1/1;min-width:0}
.h-views>[data-for]{opacity:0;visibility:hidden;transform:translate3d(0,8px,0);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
html[data-side="expert"] .h-views>[data-for~="expert"],html[data-side="builder"] .h-views>[data-for~="builder"],html[data-side="buyer"] .h-views>[data-for~="buyer"]{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .42s,transform .5s var(--ease) .42s,visibility 0s .42s}
@media print{.h-views>[data-for]{transition:none}}
.h-mo-keep{display:block!important}
.h-mo{position:absolute;left:0;top:0;z-index:3;width:0;height:0;pointer-events:none}
.h-mo>span{position:absolute;left:0;top:0;white-space:pre;will-change:transform,opacity}
.h-mo .odo{overflow:hidden}
.h-mo .odo b{display:block;font-weight:inherit;will-change:transform}
.h-mo .odo i{display:block;font-style:normal;text-align:center}
.h-ghost,.h-ghost *{-webkit-text-fill-color:transparent!important;text-shadow:none!important}
html.h-mx{transition:background-color .55s var(--ease-io),--bg .55s var(--ease-io),--panel .55s var(--ease-io),--panel-2 .55s var(--ease-io),--card .55s var(--ease-io),--ln .55s var(--ease-io),--ghost .55s var(--ease-io),--btn .55s var(--ease-io),--sel .55s var(--ease-io),--lit-a .55s,--lit-b .55s,
  --fg .16s linear .2s,--t2 .16s linear .2s,--t3 .16s linear .2s,--t4 .16s linear .2s,--rule .16s linear .2s,--err .16s linear .2s,--btn-fg .16s linear .2s,--btn-ar .16s linear .2s,--sel-fg .16s linear .2s,--tick .16s linear .2s}
html.h-mx .h-card{transition:box-shadow .55s var(--ease-io)}

/* ---------- reveal, dock, footer ---------- */
.h-js .h-rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.h-js .h-rv.in{opacity:1;transform:none}
.h-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20;transform:translate3d(0,150%,0);transition:transform .6s var(--ease)}
.h-dock.on{transform:none}
.h-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:28px;padding-bottom:28px;font-family:var(--mono);font-size:12px;color:var(--t4)}

/* ================= v1.3: people, lists, figures, the deal, documents, codes, logs and states =================
   Every value below is one the kit already uses (sizes 12 / 12.5 / 13 / 14.5 / 15 / 15.5 / 16 / 16.5 / 17 px, the
   .h-h3, .h-fig-m, .h-fig-l and .h-sign-name scales, the card, row and field paddings, --ease and --ease-io).
   The few derived ones are named where they are set. Markup for each part: the top of helio.js and design/kit/gallery.html. */

/* the paperwork voice shared by the new heads and kickers, and its quieter caption */
.h-li-head,.h-seat-k,.h-figs-k,.h-prof-cap,.h-doc-h,.h-doc-pk,.h-sig-k,.h-offer-h,.h-share-k,.h-busy{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.h-person-cap,.h-seat-cap,.h-figs-src,.h-prod-who,.h-prod-cap,.h-sortnote,.h-doc-pc,.h-msg-t,.h-offer-f,.h-share-sl,.h-log time,.h-log-t{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.01em;line-height:1.45;color:var(--t3)}

/* ---------- now-dot: something in progress (the stepper's ping on a plain dot) ---------- */
.h-dot.now{position:relative;background:var(--fg);box-shadow:none}
.h-dot.now::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #E8A800;animation:hPing 2.4s cubic-bezier(.2,.7,.2,1) infinite}

/* ---------- avatar: a monogram on --panel; an <img> only for a real photo, never a generated face; .anon withholds the name ---------- */
.h-av{--av:44px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--av);height:var(--av);border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1px var(--ln);color:var(--fg);font-family:var(--sans);font-size:calc(var(--av) * .36);font-weight:800;font-style:normal;letter-spacing:-.04em;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;user-select:none}
.h-av.s{--av:32px}.h-av.m{--av:44px}.h-av.l{--av:96px}.h-av.xl{--av:128px}
.h-av>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.h-av.anon{font-size:0}
.h-av.anon::after{content:"";width:40%;height:max(3px,9%);border-radius:2px;background:var(--t3)}

/* ---------- person: avatar, name, "trade · city" in mono, an optional role tag; as <a> it links to the profile ---------- */
.h-person{display:inline-grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;min-width:0;max-width:100%;color:var(--fg);text-decoration:none;vertical-align:middle}
.h-person>.h-av{grid-row:1/span 2}
.h-person-name{grid-column:2;align-self:end;min-width:0;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3;overflow-wrap:anywhere}
.h-person-name:last-child{grid-row:1/span 2;align-self:center}
.h-person-name .h-tag{margin-left:8px;vertical-align:2px}
.h-person-cap{grid-column:2;align-self:start;margin-top:2px;min-width:0}
a.h-person .h-person-name{text-decoration:underline 1.5px transparent;text-underline-offset:3px;transition:text-decoration-color .3s}
a.h-person:hover .h-person-name{text-decoration-color:currentColor}

/* ---------- team seats: .filled (person, agreed share, since) · .open (dashed --ghost, Helio's suggestion, one small action) · .pending ---------- */
.h-seats{display:grid;border-top:1px solid var(--rule)}
.h-seat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) fit-content(40%);grid-template-areas:"k k" "p v" "a a";align-items:center;column-gap:20px;padding:16px 0 18px;border-bottom:1px solid var(--ln)}
.h-seat-k{grid-area:k;display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--t3)}
.h-seat-k .h-dot{flex:none}
.h-seat>.h-person{grid-area:p}
.h-seat-v{grid-area:v;justify-self:end;text-align:right}
.h-seat-v>.h-fig-m{display:block}
.h-seat-cap{display:block;margin-top:6px}
.h-seat-a{grid-area:a;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.h-seat.open::before{content:"";position:absolute;top:8px;bottom:8px;left:-12px;right:-12px;border:1.5px dashed var(--ghost);border-radius:var(--r-card);pointer-events:none}
.h-seat.open .h-av{background:none;box-shadow:none;border:1.5px dashed var(--ghost)}
.h-seat.open .h-person-name{color:var(--t2)}
.h-seat.open .h-seat-v>.h-fig-m,.h-seat.pending .h-seat-v>.h-fig-m{color:var(--t3)}
.h-seat.pending .h-seat-k{color:var(--fg)}
@media (max-width:560px){
  .h-seat.stack{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "p" "v" "a"}
  .h-seat.stack .h-seat-v{justify-self:start;margin-top:12px;text-align:left}
}

/* ---------- list: directory and list rows; columns by --cols; .fig cells right-aligned tabular; on a phone a row is two lines ---------- */
.h-list{--cols:minmax(0,1fr) auto;display:grid;grid-template-columns:var(--cols);column-gap:24px;isolation:isolate}
.h-list>*{grid-column:1/-1}
.h-list:has(>.h-prod){--cols:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}
@media (min-width:561px){.h-list>.h-li,.h-list>.h-li-head{grid-template-columns:subgrid}}
.h-li,.h-li-head,.h-prod{position:relative;display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:24px;padding:14px 0;border-bottom:1px solid var(--ln);color:var(--fg);text-decoration:none}
.h-li,.h-prod{isolation:isolate}
.h-li-head{padding:0 0 12px;border-bottom-color:var(--rule);color:var(--t3)}
.h-li>*,.h-li-head>*,.h-prod>*{min-width:0}
.h-li>.fig,.h-li-head>.fig{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-li>.fig{font-weight:700}
.h-li>.mut{color:var(--t3)}
.h-li::before,.h-prod::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;z-index:-1;border-radius:4px;background:linear-gradient(90deg,var(--lit-a),var(--lit-b) 62%,rgba(255,200,0,0));opacity:var(--lit,0);pointer-events:none;transition:opacity .35s ease}
a.h-li,a.h-prod{transition:background-color .3s,box-shadow .3s}
a.h-li:hover,a.h-prod:hover{background:var(--panel);box-shadow:-12px 0 0 var(--panel),12px 0 0 var(--panel)}
.h-li.is-sel{background:var(--panel);box-shadow:-12px 0 0 var(--panel),12px 0 0 var(--panel)}
.h-sortnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
@media (max-width:560px){
  .h-li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px}
  .h-li>:first-child{flex:1 1 0}
  .h-li>.fig{order:1}
  .h-li::after{content:"";order:1;flex:0 0 100%;height:0}
  .h-li>:not(:first-child):not(.fig){order:2;font-size:14px;line-height:1.45;color:var(--t3)}
  .h-li>:not(:first-child):not(.fig)~:not(.fig)::before{content:"·";margin-right:10px}
  .h-li-head{display:flex;justify-content:space-between}
  .h-li-head>:not(:first-child):not(.fig){display:none}
}

/* ---------- product row: the name and its two people, the mini stepper, seats, one figure ---------- */
.h-prod{--cols:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;padding:16px 0}
.h-prod-n{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.h-prod-who{display:block;margin-top:3px}
.h-prod-seats{display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.45;color:var(--t2)}
.h-prod-fig{justify-self:end;text-align:right}
.h-prod-fig>b{display:block;font-size:clamp(20px,1.6vw,24px);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-prod-cap{display:block;margin-top:3px;white-space:nowrap}
@media (min-width:861px){.h-list>.h-prod{grid-template-columns:subgrid}}
@media (max-width:860px){
  .h-prod{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n f" "s s" "t t";row-gap:10px}
  .h-prod>:first-child{grid-area:n}.h-prod>.h-steps{grid-area:s}.h-prod>.h-prod-seats{grid-area:t}.h-prod>.h-prod-fig{grid-area:f;align-self:start}
}

/* ---------- compact stepper: five dots and the current step (markup: <span class="h-steps mini"><i class="done"></i>...<span>Stage</span></span>) ---------- */
.h-steps.mini{display:inline-flex;align-items:center;gap:0;vertical-align:middle}
.h-steps.mini>i{position:relative;flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--t4)}
.h-steps.mini>i+i{margin-left:9px}
.h-steps.mini>i+i::before{content:"";position:absolute;right:100%;top:50%;width:9px;height:1.5px;margin-top:-.75px;background:var(--ln)}
.h-steps.mini>i.done{background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.h-steps.mini>i.done+i::before{background:var(--fg)}
.h-steps.mini>i.now{background:var(--fg);box-shadow:none}
.h-steps.mini>span{margin-left:12px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;white-space:nowrap}

/* ---------- profile head: avatar xl, the name (.h-h1), trade · city · since, one line, the receipts strip (.h-figs) ---------- */
.h-prof{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(22px,2.4vw,36px);align-items:center}
.h-prof>.h-av{grid-row:1/span 3}
.h-prof>:not(.h-av):not(.h-figs){grid-column:2}
.h-prof-cap{margin-top:14px;color:var(--t3)}
.h-prof-line{margin-top:12px;max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-prof>.h-figs{grid-column:1/-1;margin-top:clamp(28px,5vh,56px)}
@media (max-width:560px){
  .h-prof{grid-template-columns:minmax(0,1fr)}
  .h-prof>.h-av{grid-row:auto;--av:96px;margin-bottom:20px}
  .h-prof>:not(.h-av):not(.h-figs){grid-column:1}
}

/* ---------- figures: 2 to 4 labelled figures with their source ("verified by Stripe", the Example tag); not cards ---------- */
.h-figs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--rule)}
.h-figs>*{min-width:0;padding:16px 20px 0 0}
.h-figs>*+*{padding-left:20px;border-left:1px solid var(--ln)}
.h-figs-k{display:block;color:var(--t3)}
.h-figs .h-fig-m,.h-figs .h-fig-l{display:block;margin-top:12px}
.h-figs-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
@media (max-width:560px){
  .h-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .h-figs>:nth-child(odd){padding-left:0;border-left:0}
}

/* ---------- table: statement and history; .n figure columns; rows .neg (a deduction), .tot (a total), .mut; .stack: label and value pairs on a phone ---------- */
.h-table{width:100%;border-collapse:collapse;font-size:15.5px;font-weight:500;line-height:1.45}
.h-table th{padding:0 0 12px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;text-align:left;color:var(--t3);white-space:nowrap}
.h-table td{padding:11px 0;border-bottom:1px solid var(--ln);vertical-align:baseline}
.h-table th+th,.h-table td+td{padding-left:20px}
.h-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-table tr{background:linear-gradient(90deg,color-mix(in srgb,var(--lit-a) calc(var(--lit,0) * 100%),transparent),color-mix(in srgb,var(--lit-b) calc(var(--lit,0) * 100%),transparent) 62%,transparent)}
.h-table tr.mut td,.h-table tr.neg td{color:var(--t3)}
.h-table tr.neg td.n{color:var(--t2)}
.h-table tr.tot td{font-weight:700;border-bottom-color:var(--rule)}
.h-table tr:last-child td{border-bottom-color:transparent}
.h-table tr.tot:last-child td{border-bottom-color:var(--rule)}
@media (max-width:560px){
  .h-table{font-size:14.5px}
  .h-table th+th,.h-table td+td{padding-left:12px}
  .h-table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .h-table.stack,.h-table.stack tbody,.h-table.stack tr{display:block}
  .h-table.stack tr{padding:10px 0 12px;border-bottom:1px solid var(--ln)}
  .h-table.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;border:0;text-align:right}
  .h-table.stack td+td{padding-left:0}
  .h-table.stack td::before{content:attr(data-l);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;text-align:left;color:var(--t3)}
  .h-table.stack td:not([data-l])::before{content:none}
  .h-table.stack td:first-child{font-weight:700;text-align:left}
}

/* ---------- split bar: segments .e .b .h sized by --v; the viewer's segment (.you, or by html[data-side]) is lit ---------- */
.h-split{display:flex;gap:3px;height:14px;border-radius:3px;box-shadow:0 0 0 calc(var(--lit,0) * 5px) rgba(255,200,0,.35);transition:box-shadow .35s ease}
.h-split>i{flex:var(--v,1) 1 0;min-width:3px;border-radius:3px;background:var(--ghost);transition:flex-grow .8s var(--ease-io),background-color .6s var(--ease-io),box-shadow .6s var(--ease-io)}
.h-split>.e,.h-split>.b,.h-split-sw.e,.h-split-sw.b{background:var(--fg)}
.h-split>.you,.h-split-sw.you,html[data-side="expert"] .h-split>.e,html[data-side="builder"] .h-split>.b,html[data-side="expert"] .h-split-sw.e,html[data-side="builder"] .h-split-sw.b{background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.h-split-sw{display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:3px;background:var(--ghost);vertical-align:1px;transition:background-color .6s var(--ease-io),box-shadow .6s var(--ease-io)}
.h-you{margin-left:10px;vertical-align:2px;transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s}
html[data-side="expert"] .h-you.b,html[data-side="builder"] .h-you.e{opacity:0;transform:translateY(5px);visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
html[data-side="buyer"] .h-you{opacity:0;transform:translateY(5px);visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.h-row>:has(>.h-split-sw){padding-left:20px;text-indent:-20px}
.h-row>:has(>.h-split-sw)>*{text-indent:0}
@media (max-width:560px){.h-row>:has(>.h-split-sw)>.h-you{display:table;margin:5px 0 1px}}

/* ---------- share control: the figure rolls, minus and plus (44px), Helio's suggestion on a scale; Helio.share wires it ---------- */
.h-share-k{display:block;color:var(--t3)}
.h-share-c{display:flex;align-items:center;gap:20px;margin-top:14px}
.h-share-b{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg);color:var(--fg);font:400 22px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s,opacity .3s}
.h-share-b:hover{background:var(--fg);color:var(--bg)}
.h-share-b[aria-disabled="true"]{opacity:.32;cursor:default;background:transparent;color:var(--fg)}
.h-share-v{min-width:2.4ch;font-size:clamp(48px,4.4vw,66px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;border-radius:4px}
.h-share-t{position:relative;height:22px;margin-top:20px}
.h-share-t::before{content:"";position:absolute;left:0;right:0;top:10px;height:1.5px;background:var(--ln)}
.h-share-t>b{position:absolute;left:0;top:10px;width:calc(var(--p,0) * 100%);height:1.5px;background:var(--fg);transition:width .65s var(--ease)}
.h-share-t>.sug{position:absolute;top:4px;left:calc(var(--s,0) * 100%);width:1.5px;height:13px;margin-left:-.75px;background:var(--t3)}
.h-share-t>.at{position:absolute;top:4.25px;left:calc(var(--p,0) * 100%);width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--fg);transition:left .65s var(--ease),background-color .3s,box-shadow .3s}
.h-share.at-sug .h-share-t>.at{background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.h-share-sl{display:flex;align-items:center;gap:8px;margin-top:10px}
.h-share-sl::before{content:"";flex:none;width:1.5px;height:12px;background:var(--t3)}

/* ---------- deal thread: offers (.sent, .countered, .agreed, .expired) and plain messages with a hairline; no bubbles ---------- */
.h-thread{display:grid}
.h-msg{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:18px 0;border-top:1px solid var(--ln)}
.h-msg>.h-av{grid-row:1/span 2;align-self:start}
.h-msg-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.h-msg-b{margin-top:4px;font-size:16.5px;line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-msg.sys{grid-template-columns:minmax(0,1fr)}
.h-msg.sys .h-msg-b{margin-top:0;font-size:14.5px;line-height:1.45;color:var(--t3)}
.h-offer{position:relative;z-index:3;margin:18px 0;background:var(--card);border-radius:var(--r-card);padding:22px 26px 24px;box-shadow:var(--shadow)}
.h-offer-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--t3)}
.h-offer-note{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-offer-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-top:18px}
.h-offer.countered,.h-offer.expired,.h-offer.declined{background:transparent;box-shadow:inset 0 0 0 1px var(--ln)}
.h-offer.countered .h-offer-h,.h-offer.expired .h-offer-h,.h-offer.declined .h-offer-h{border-bottom-color:var(--ln)}
.h-offer.countered .h-row,.h-offer.expired .h-row,.h-offer.declined .h-row,.h-offer.countered .h-offer-note,.h-offer.expired .h-offer-note,.h-offer.declined .h-offer-note{color:var(--t3)}
.h-offer.countered .h-row>:last-child,.h-offer.expired .h-row>:last-child,.h-offer.declined .h-row>:last-child{color:var(--t4);text-decoration:line-through;text-decoration-thickness:1.5px}
.h-offer.countered .h-offer-h .h-tag,.h-offer.expired .h-offer-h .h-tag,.h-offer.declined .h-offer-h .h-tag{color:var(--t3)}
@media (max-width:560px){.h-offer{padding:18px 18px 20px}}

/* ---------- document: number and version head, parties, numbered clauses in mono; summary and full through .h-seg; long parts through .h-faq ---------- */
.h-doc{position:relative;z-index:3;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:clamp(26px,3vw,42px)}
.h-doc-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--t3)}
.h-doc-pt{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px 24px;padding:18px 0 20px;border-bottom:1px solid var(--ln)}
.h-doc-pt>*{min-width:0}
.h-doc-pk{display:block;color:var(--t3)}
.h-doc-pn{display:block;margin-top:8px;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3;overflow-wrap:anywhere}
.h-doc-pc{display:block;margin-top:3px}
.h-clause{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ln);font-size:16.5px;line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-clause-n{font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--t3);font-variant-numeric:tabular-nums}
.h-clause b,.h-clause strong{color:var(--fg);font-weight:700}
.h-clause .h-tag{vertical-align:2px}
/* the clause being read: lit like a touched row, its number in ink */
.h-clause.is-on{position:relative;isolation:isolate;color:var(--fg)}
.h-clause.is-on::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;z-index:-1;border-radius:4px;background:linear-gradient(90deg,var(--lit-a),var(--lit-b) 62%,rgba(255,200,0,0));pointer-events:none}
.h-clause.is-on .h-clause-n{color:var(--fg)}
@media (max-width:560px){
  .h-doc{padding:20px 18px 22px}
  .h-doc-pt{grid-template-columns:minmax(0,1fr)}
  .h-clause{grid-template-columns:2.8em minmax(0,1fr);column-gap:10px;font-size:15.5px}
}

/* ---------- signatures: three lines (expert, vibe-coder, Helio); the name is the ray's sign target; .wait not yet, .me yours ---------- */
.h-sigblock{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:28px 24px}
.h-sig{min-width:0}
.h-sig-k{display:block;color:var(--t3)}
.h-sig.me .h-sig-k{color:var(--fg)}
.h-sig-name{display:block;margin-top:14px;padding:0 0 10px;border-bottom:1.5px solid var(--fg);font-size:clamp(22px,1.9vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.15;overflow-wrap:anywhere}
.h-sig-name>span{display:inline-block}
.h-sig-cap{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--t3)}
.h-sig.wait .h-sig-name{color:var(--t3);border-bottom-style:dashed;border-bottom-color:var(--ghost)}
@media (max-width:700px){.h-sigblock{grid-template-columns:minmax(0,1fr)}}

/* ---------- one-time code: six 56px cells over one real input (paste, autofill, screen readers); Helio.otp wires it ---------- */
.h-otp{position:relative;display:flex;gap:8px;max-width:100%}
.h-otp-in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;opacity:0;cursor:text;-webkit-appearance:none;appearance:none}
.h-otp-c{position:relative;display:grid;place-items:center;flex:1 1 0;min-width:0;max-width:56px;height:56px;border-radius:var(--r-field);background:var(--panel);font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg);transition:box-shadow .25s var(--ease),background-color .25s}
.h-otp-c:nth-of-type(3):nth-last-of-type(4){margin-right:12px}
.h-otp:hover .h-otp-c{box-shadow:inset 0 0 0 1.5px var(--ghost)}
.h-otp-c.at{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--fg),0 0 0 4px rgba(255,200,0,.42)}
.h-otp-c.at:empty::after{content:"";width:1.5px;height:24px;background:var(--fg);animation:hBlink 1.1s steps(1,end) infinite}
.h-otp.is-error .h-otp-c{box-shadow:inset 0 0 0 1.5px var(--err)}
.h-otp.is-busy .h-otp-c{color:var(--t3)}
.h-otp.is-done .h-otp-c{background:transparent;box-shadow:inset 0 -2px 0 #FFC800}
.h-otp.is-busy .h-otp-in,.h-otp.is-done .h-otp-in{cursor:default}

/* ---------- log: dated events, newest first (build log, audit trail, inbox history); .now in progress, .lit just became true ---------- */
.h-log{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px;border-top:1px solid var(--rule);isolation:isolate}
.h-log>li{position:relative;display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--ln);font-size:15.5px;line-height:1.45;color:var(--t2)}
.h-log time,.h-log-t{white-space:nowrap;font-variant-numeric:tabular-nums}
.h-log b,.h-log strong{color:var(--fg);font-weight:700}
.h-log>li.now>:last-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--fg);vertical-align:1px}
.h-log>li::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;z-index:-1;border-radius:4px;background:linear-gradient(90deg,var(--lit-a),var(--lit-b) 62%,rgba(255,200,0,0));opacity:var(--lit,0);pointer-events:none;transition:opacity .35s ease}
.h-log>li.lit{--lit:1}
.h-log>li.lit,.h-log>li.lit b{color:var(--fg)}
@media (max-width:560px){
  .h-log{grid-template-columns:minmax(0,1fr)}
  .h-log>li{grid-template-columns:minmax(0,1fr);row-gap:2px;font-size:14.5px}
}

/* ---------- inline notice: replaces toasts and pop-ups; .err an error, .lit something just became true ---------- */
.h-note{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-radius:var(--r-field);background:var(--panel);font-size:15px;line-height:1.45;color:var(--t2);text-wrap:pretty}
.h-note>.h-dot{align-self:center}
.h-note b,.h-note strong{color:var(--fg);font-weight:700}
.h-note.err{background:transparent;box-shadow:inset 0 0 0 1.5px var(--err);color:var(--fg)}
.h-note.err b,.h-note.err strong{color:var(--err)}
.h-note.lit{background:linear-gradient(90deg,var(--lit-a),var(--lit-b) 62%,rgba(255,200,0,0));color:var(--fg)}

/* ---------- empty state: a 0 figure, one honest sentence, one action; no illustration ---------- */
.h-empty{display:grid;justify-items:start;gap:14px;padding:28px 0 4px;border-top:1px solid var(--rule)}
.h-empty>p{max-width:30em;font-size:17px;line-height:1.55;color:var(--t2);text-wrap:pretty}
.h-empty>.h-btn{margin-top:8px}

/* ---------- loading: static skeleton bars (no shimmer) in a region with aria-busy, and a busy line with the now-dot ---------- */
.h-skel{display:block;width:100%;height:.72em;margin:.39em 0;border-radius:3px;background:var(--panel-2)}
span.h-skel{display:inline-block;vertical-align:middle;margin:0}
.h-busy{position:relative;display:inline-flex;align-items:center;min-height:20px;padding-left:22px;color:var(--t3)}
.h-busy::before,.h-busy::after{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%}
.h-busy::before{background:var(--fg)}
.h-busy::after{border:1.5px solid #E8A800;animation:hPing 2.4s cubic-bezier(.2,.7,.2,1) infinite}

/* ---------- file field: the recibo verde PDF; the whole box takes a click or a dropped file; .is-over .is-done .is-error ---------- */
.h-up{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;min-height:56px;padding:13.5px 14.5px 13.5px 16.5px;border:1.5px dashed var(--ghost);border-radius:var(--r-field);background:var(--panel);cursor:pointer;transition:border-color .25s,background-color .25s,box-shadow .25s var(--ease)}
.h-up>input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.h-up-t{grid-column:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--fg);overflow-wrap:anywhere}
.h-up-h{grid-column:1;min-width:0;font-size:14px;line-height:1.45;color:var(--t3)}
.h-up>.h-btn{grid-column:2;grid-row:1/span 2}
.h-up:hover{border-color:var(--fg)}
.h-up:focus-within,.h-up.is-over{border-style:solid;border-color:var(--fg);background:var(--card);box-shadow:0 0 0 4px rgba(255,200,0,.42)}
.h-up.is-done{border-style:solid;border-color:var(--ln);background:var(--card)}
.h-up.is-done .h-up-t::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:#FFC800;box-shadow:inset 0 0 0 1.5px #0A0A0A;vertical-align:0}
.h-up.is-error{border-style:solid;border-color:var(--err)}
.h-up.is-error .h-up-h{color:var(--err);font-weight:600}

/* ---------- attachment row: a thumbnail (or the file kind in mono), the name, a mono line; rows stack in a list ---------- */
.h-file{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"th n" "th m";align-items:center;column-gap:14px;row-gap:2px;padding:10px 0;border-bottom:1px solid var(--ln);color:var(--fg);text-decoration:none}
.h-file-th{grid-area:th;display:grid;place-items:center;width:64px;height:48px;overflow:hidden;border-radius:4px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--ln);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.h-file-th>img{width:100%;height:100%;object-fit:cover}
.h-file-n{grid-area:n;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.35;overflow-wrap:anywhere}
.h-file-m{grid-area:m;min-width:0;font-family:var(--mono);font-size:12px;letter-spacing:.01em;line-height:1.45;color:var(--t3)}
a.h-file:hover .h-file-n{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---------- masked value (PT50 <i>••••</i> 4417) and a URL shown, never made a link (with a "Not a link" tag) ---------- */
.h-mask{font-variant-numeric:tabular-nums;white-space:nowrap}
.h-mask>i{font-style:normal;letter-spacing:.12em;color:var(--t3)}
.h-url{font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--fg);overflow-wrap:anywhere;text-decoration:none}
.h-url+.h-tag{margin-left:8px;vertical-align:1px}

/* ---------- motion ---------- */
@keyframes hFade{from{opacity:0}to{opacity:1}}
@keyframes hFadeUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes hLineUp{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes hDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hPing{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.6);opacity:0}}
@keyframes hFlash{0%{box-shadow:0 0 0 0 rgba(255,200,0,.95)}30%{box-shadow:0 0 0 6px rgba(255,200,0,.5),0 0 30px 8px rgba(255,200,0,.55)}100%{box-shadow:0 0 0 2px rgba(255,200,0,0),0 0 0 0 rgba(255,200,0,0)}}
@keyframes hSpin{to{transform:rotate(360deg)}}
@keyframes hBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
.h-in{animation:hFadeUp 1s var(--ease) both;animation-delay:var(--d,0s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .h-js .h-rv{opacity:1;transform:none}
}