/* Hand-written layer. The class rules that carry the design's repeated inline
   styles are generated by tools/build_site.py and appended after this file, so
   anything here can be overridden by them if the selectors ever collide.

   @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.efff1e2b.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.4dd50e6c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/plex-sans-300.ac3447e0.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-sans-400.de8d6520.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-sans-500.56afb1d5.woff2) format('woff2')} is replaced at build time with @font-face rules pointing at the
   content-hashed woff2 files, because those filenames change whenever a font
   changes. */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.efff1e2b.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.4dd50e6c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/plex-sans-300.ac3447e0.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-sans-400.de8d6520.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-sans-500.56afb1d5.woff2) format('woff2')}

/* Carried over verbatim from the design's <style> block. */
body { margin: 0; background: #05070a; }
a { color: #7fc4d0; text-decoration: none; border-bottom: 1px solid #2b4a52; }
a:hover { color: #a9dbe4; border-bottom-color: #5f97a4; }
::selection { background: #1d3a44; color: #eaf4f7; }
input, textarea, button { font-family: inherit; }

[data-r="msvg"] { display: none; }
[data-r="invgrid"] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
[data-r="sysgrid"] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px) { [data-r="sysgrid"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { [data-r="invgrid"] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px)  { [data-r="sysgrid"] { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px)  { [data-r="invgrid"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) {
  [data-r="dsvg"] { display: none; }
  [data-r="msvg"] { display: block; }
  [data-r="hero"] { padding-top: 80px !important; padding-bottom: 56px !important; }
  [data-r="sec"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [data-r="h1"] { font-size: 28px !important; }
  [data-r="lede"] { font-size: 18px !important; }
  [data-r="quote"] { font-size: 20px !important; }
  [data-r="invn"] { font-size: 22px !important; }
  [data-r="invd"] { font-size: 11px !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  [data-r="hero"] { padding-top: 72px !important; padding-bottom: 48px !important; }
  [data-r="sec"] { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* The page shell, previously an inline style on the outermost div. */
.page {
  background: linear-gradient(180deg, #05070a 0%, #070b12 35%, #09101a 70%, #0a121e 100%);
  color: #dfe7ec;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-x: clip;
}

/* Language switcher. The design used spans with role="button", which are not
   reachable by keyboard; these are real buttons carrying the same visuals. */
.langbar {
  position: fixed;
  top: 20px;
  right: clamp(18px, 5vw, 44px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: rgba(5, 7, 10, 0.72);
  padding: 0 4px;
  border: 1px solid #16202b;
}
.langbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  /* A button does not inherit these from the page the way the design's span
     did, and the browser default would render the labels one weight heavier
     and centre-aligned. */
  font-weight: inherit;
  text-align: start;
  letter-spacing: inherit;
  cursor: pointer;
  color: #67818d;
  text-decoration: none;
}
.langbar button[aria-current="true"] { color: #dfeff3; }
.langbar .sep { color: #33454f; }

/* The design declared focus styling through a style-focus attribute, which no
   browser reads, so the page shipped with no visible focus indicator at all.
   These are the same colours, wired to the real pseudo-class. */
:focus-visible {
  outline: 2px solid #7fc4d0;
  outline-offset: 3px;
}
.field:focus-visible {
  outline: none;
  border-bottom-color: #6fb3c1;
  box-shadow: 0 1px 0 0 #6fb3c1;
}
.submit:hover {
  background: #7fc4d0;
  color: #06121a;
  border-color: #7fc4d0;
}

/* Reserved before Turnstile renders, so the widget arriving does not push the
   submit button down. 67px, not 65px: the design's placeholder was a 65px box
   with a 1px dashed border on each side, so it occupied 67px of the column. */
.turnstile {
  width: 300px;
  max-width: 100%;
  min-height: 67px;
}

.formstatus {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #7fc4d0;
  min-height: 16px;
}
.formstatus[data-state="error"] { color: #d8926b; }

.submit[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.submit[aria-disabled="true"]:hover {
  background: transparent;
  color: #a9dbe4;
  border-color: #3d6b77;
}

/* Scroll reveal is applied from JavaScript, never from CSS, so that a visitor
   without JavaScript sees the content rather than a blank page. The transition
   is declared here only so that reduced-motion can switch it off. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Repeated declarations lifted out of the design's inline
   styles. Declaration text is byte-identical to the source. */
.dgl{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.5;color:#b6c6cf}
.invcell{border-top:1px solid #16202b;padding:20px 18px 22px 0}
.invdesc{margin-top:10px;font-size:13px;line-height:1.55;color:#8b9ca7;max-width:26ch;text-wrap:pretty}
.stack5{display:grid;gap:5px}
.dgtag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;color:#648793}
.invnum{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:400;color:#dfe9ee;letter-spacing:-0.02em;line-height:1.1}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#648793;margin-bottom:22px}
.sec{max-width:1120px;margin:0 auto;padding:clamp(60px,9vh,100px) clamp(20px,6vw,80px);border-top:1px solid #131c26}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#60838f;letter-spacing:0.16em;margin-bottom:14px}
.h3lg{margin:0;font-size:clamp(21px,2.2vw,26px);font-weight:400;color:#eef4f7;letter-spacing:-0.01em;max-width:20ch}
.body22{margin:0 0 22px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.eyebrow2{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#648793;margin-bottom:18px}
.body18{margin:0 0 18px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.body26{margin:0 0 26px;font-size:17px;line-height:1.78;color:#a9b8c2;max-width:66ch;text-wrap:pretty}
.pullrule{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.55;color:#cfe3e8;border-left:1px solid #2b3f49;padding-left:24px;max-width:56ch;font-weight:300;text-wrap:pretty}
.railcol{display:grid;gap:22px;align-content:start;border-left:1px solid #16202b;padding-left:18px}
.colhead{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.2em;color:#648793;padding-bottom:10px;border-bottom:1px solid #24323d;margin-bottom:16px}
.splitrow{border-top:1px solid #16202b;padding:38px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,64px);align-items:start}
.pull{margin:0;font-size:clamp(20px,2.1vw,26px);line-height:1.5;color:#cfe3e8;font-weight:300;max-width:44ch;text-wrap:pretty}
.body0{margin:0;font-size:17px;line-height:1.78;color:#a9b8c2;text-wrap:pretty}
.dsvg{max-width:460px;display:block;overflow:visible}
.msvg{display:block}
.h3sm{margin:0 0 18px;font-size:20px;font-weight:400;color:#e4edf1;letter-spacing:-0.01em}
.dgl16{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;color:#b6c6cf}
.fieldrow{display:grid;gap:8px}
.fieldlbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#6b8b97}
.h2{margin:0 0 26px;font-size:clamp(27px,3.2vw,38px);font-weight:400;letter-spacing:-0.015em;color:#eef4f7;max-width:22ch}
.twocol{margin-top:clamp(64px,9vw,104px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(36px,5vw,72px);align-items:start}
.meta11{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#6d8792}
.link{color:#7fc4d0;border-bottom:1px solid #2b4a52}
.invnumalt{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:400;color:#cf9159;letter-spacing:-0.02em;line-height:1.1}
.field{background:transparent;border:none;border-bottom:1px solid #24323d;color:#e2edf1;font-size:16px;padding:11px 0;min-height:44px;outline:none}
.fieldarea{background:transparent;border:none;border-bottom:1px solid #24323d;color:#e2edf1;font-size:16px;padding:11px 0;outline:none;resize:vertical;line-height:1.6}
.submit{justify-self:start;background:transparent;border:1px solid #3d6b77;color:#a9dbe4;font-size:14px;letter-spacing:0.06em;padding:14px 32px;min-height:48px;cursor:pointer;transition:background-color 160ms linear,color 160ms linear}