/* Copied from hv-guides.pages.dev/assets/glass.css (HV glass kit v1) on 27 Sep 2026 so this client form does not depend on another site. Re-copy when the kit changes. */
/* ------------------------------------------------------------------
   HV GLASS KIT  (v1, 27 Sep 2026)
   The house look for every HV tool and client page since Lloyd picked
   "style A" (hv-guides.pages.dev/explain/hv-os-mock) and it went live on
   HV OS (css/glass.css there). One file any page can link:

     <meta name="hv-style" content="glass">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;700&display=swap">
     <link rel="stylesheet" href="https://hv-guides.pages.dev/assets/glass.css">
     <script src="https://hv-guides.pages.dev/assets/glass.js" defer></script>   (the gold sweep on scroll)

   The rules, in one breath:
   - Type is Geist (sentences, headings, numbers) and Geist Mono (small
     readouts: times, codes, counts). No New Hero, no Begum, no Darkmode
     Mono, no wide spaced capitals, no uppercase labels.
   - Background A, "the steel lamp": steel green poured from the top into
     black. No grids, rings, scanlines, dots, brackets or diamonds.
   - Panels are rounded glass (18px). Few of them: a list is hairlines
     inside one panel, not a card per row.
   - Gold is rare and loud: one gold word in the headline, one gold
     number, one gold button per screen. Gold words carry the website's
     sweep, once, as they scroll into view.
   - The wordmark is the gold one, never white, never glowing.
   - Status: green good, amber watch, red bad, as a tint over the whole
     tile with the number in the tone.
   ------------------------------------------------------------------ */
:root{
  --g-font:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --g-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --g-black:#000; --g-ink:#080B12; --g-steel:#233033; --g-green:#91C1B2; --g-green-deep:#386359;
  --g-gold:#F6DEB2; --g-web:linear-gradient(180deg,#F9E4BB 0%,#F6DEB2 50%,#EDD09C 100%);
  --g-t1:#F2F2F2; --g-t2:rgba(242,242,242,.74); --g-t3:rgba(242,242,242,.52); --g-t4:rgba(242,242,242,.34);
  --g-line:rgba(242,242,242,.08); --g-line2:rgba(242,242,242,.13);
  --g-glass:linear-gradient(160deg,rgba(242,242,242,.075),rgba(242,242,242,.025));
  --g-good:169,208,195; --g-warn:224,184,122; --g-bad:239,138,122;
  --g-r:18px; --g-gutter:16px;
}
html{-webkit-text-size-adjust:100%}
body.g,.g-page{margin:0;min-height:100vh;color:var(--g-t1);font-family:var(--g-font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 55% at 55% -10%,rgba(35,48,51,1) 0%,rgba(35,48,51,.72) 35%,rgba(35,48,51,.22) 62%,transparent 82%) no-repeat,
    radial-gradient(60% 40% at 50% 112%,rgba(8,11,18,.95),transparent 70%) no-repeat,#000;
  background-attachment:fixed}
.g ::selection{background:rgba(246,222,178,.26)}
.g a:not([class]){color:var(--g-gold)}   /* plain text links only: buttons and chips keep their own colour */

/* type */
.g-h1{font-weight:600;font-size:clamp(34px,7vw,52px);line-height:1.02;letter-spacing:-.045em;margin:0}
.g-h2{font-weight:600;font-size:clamp(22px,4.4vw,28px);line-height:1.1;letter-spacing:-.035em;margin:0}
.g-h3{font-weight:500;font-size:16px;letter-spacing:-.02em;margin:0}
.g-kicker{font-family:var(--g-mono);font-size:11.5px;color:var(--g-t3);letter-spacing:0}
.g-lede{color:var(--g-t2);font-size:16px;line-height:1.55;letter-spacing:-.01em;margin:0}
.g-lbl{font-size:12.5px;color:var(--g-t3)}
.g-mono{font-family:var(--g-mono)}
.g-num{font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.g-num small{font-size:.55em;color:var(--g-t3);font-weight:400;letter-spacing:-.02em}

/* glass */
.g-glass{background:var(--g-glass);border:1px solid rgba(242,242,242,.1);border-radius:var(--g-r);
  -webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px -22px rgba(0,0,0,.7)}
a.g-glass,.g-glass.g-live{transition:border-color .16s,transform .16s,box-shadow .16s;text-decoration:none;color:inherit}
a.g-glass:hover,.g-glass.g-live:hover{border-color:rgba(242,242,242,.2);transform:translateY(-1px)}
.g-rows > *{padding:12px 0;border-top:1px solid var(--g-line)}
.g-rows > *:first-child{border-top:0}
.g-split{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.g-split > * + *{border-left:1px solid var(--g-line)}

/* status: the tile is tinted all over, the number takes the tone */
.g-good,.g-warn,.g-bad{--tn:var(--g-good);background:linear-gradient(rgba(var(--tn),.12),rgba(var(--tn),.12)),var(--g-glass);border-color:rgba(var(--tn),.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px -22px rgba(var(--tn),.45)}
.g-warn{--tn:var(--g-warn)} .g-bad{--tn:var(--g-bad)}
:is(.g-good,.g-warn,.g-bad) .g-num{color:rgb(var(--tn))}
.g-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:rgba(242,242,242,.5)}
.g-dot.on{background:var(--g-gold);box-shadow:0 0 0 3px rgba(246,222,178,.16)}
.g-dot.good{background:var(--g-green);box-shadow:0 0 0 3px rgba(145,193,178,.16)}
.g-dot.warn{background:rgb(var(--g-warn))} .g-dot.bad{background:rgb(var(--g-bad))}
.g-live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--g-mono);font-size:11.5px;color:var(--g-t2)}
.g-live-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g-green);box-shadow:0 0 0 3px rgba(145,193,178,.16)}

/* buttons: one gold per screen, the rest ghost */
.g-btn,a.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:14px;border:0;cursor:pointer;
  font:600 15px/1 var(--g-font);letter-spacing:-.01em;text-decoration:none;color:#0B0906!important;background:var(--g-web);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -12px rgba(246,222,178,.45);transition:box-shadow .16s,transform .16s}
.g-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 36px -10px rgba(246,222,178,.6);transform:translateY(-1px)}
.g-ghost{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--g-line2);background:rgba(242,242,242,.04);
  color:var(--g-t1)!important;font:500 14px/1 var(--g-font);letter-spacing:-.01em;text-decoration:none;cursor:pointer}
.g-ghost:hover{border-color:rgba(242,242,242,.24)}
.g-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--g-line2);font-size:13px;color:var(--g-t2);background:rgba(242,242,242,.035)}
.g-chip.on{color:var(--g-t1);border-color:rgba(246,222,178,.45)}

/* forms */
.g input,.g select,.g textarea{font:400 15px/1.4 var(--g-font);color:var(--g-t1);background:rgba(0,0,0,.32);border:1px solid var(--g-line2);border-radius:12px;padding:12px 14px}
.g :is(input,select,textarea):focus{outline:none;border-color:rgba(246,222,178,.55);box-shadow:0 0 0 3px rgba(246,222,178,.1)}
.g ::placeholder{color:var(--g-t4)}

/* the gold word, and the website's sweep (glass.js adds .is-sheen once it is in view) */
.g-gold{color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),var(--g-web);
  background-size:260% 100%,100% 100%;background-position:170% 0,0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  filter:drop-shadow(0 0 10px rgba(246,222,178,.16))}
.g-gold.is-sheen{animation:gSweep 1s .45s cubic-bezier(.3,.6,.3,1) both,gLift 1.6s .45s ease-out both}
@keyframes gSweep{from{background-position:170% 0,0 0}to{background-position:-70% 0,0 0}}
@keyframes gLift{0%,100%{filter:drop-shadow(0 0 10px rgba(246,222,178,.16))}35%{filter:drop-shadow(0 0 22px rgba(246,222,178,.5))}}

/* the wordmark: gold file, no filter, ever */
.g-wordmark{display:block;height:15px;width:auto;filter:none}

/* layout */
.g-wrap{max-width:1080px;margin:0 auto;padding:0 var(--g-gutter)}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.g-stack > * + *{margin-top:12px}
@media (max-width:640px){.g-split{grid-auto-flow:row}.g-split > * + *{border-left:0;border-top:1px solid var(--g-line)}}
@media (prefers-reduced-motion:reduce){.g-gold.is-sheen{animation:none}}