:root {
  --bg: #F3F4F1; --surface: #FFFFFF; --ink: #1B2430; --muted: #5B6571; --line: #DADED8;
  --dark: #1B2430; --dark-ink: #E5E8E3; --brass: #D9A04E; --accent: #9C6A1F;
  --good: #2F7D5B; --warn: #A85418; --bad: #B3261E; --info: #2C5E8A;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12171D; --surface: #1A2129; --ink: #E5E8E3; --muted: #9AA3AD; --line: #2E3843; --dark: #0D1116; --accent: #D9A04E; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0; }
a { color: var(--accent); }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.btn { display: inline-block; font: 600 15px/1 var(--body); padding: 11px 16px; border-radius: 5px; background: var(--brass); color: #1B2430; text-decoration: none; border: 1px solid var(--brass); cursor: pointer; }
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.big { padding: 14px 22px; font-size: 16px; }

.top { background: var(--dark); color: var(--dark-ink); position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top, 0px); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: .02em; }
.top nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.top nav a:not(.btn) { color: var(--dark-ink); text-decoration: none; font-size: 14px; }
.top nav a:not(.btn):hover { color: #fff; }
.top .btn { padding: 8px 12px; font-size: 14px; }

.hero { background: var(--dark); color: var(--dark-ink); padding-block: 56px 72px; }
/* "section .wrap" makes wraps flex columns; the hero needs a two-column grid. */
.hero .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero h1 { color: #fff; }
.lede { font-size: 19px; color: #C3CAD1; max-width: 56ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* The hero panel borrows the look of a lift's floor indicator. */
.panel { margin: 0; background: #0D1116; border: 1px solid #2E3843; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.panel-head { display: flex; justify-content: space-between; font-size: 13px; color: #9AA3AD; }
.indicator { display: flex; align-items: center; justify-content: center; gap: 18px; background: #06080B; border-radius: 6px; padding: 14px; border: 1px solid #1f262e; }
.floor-num { font: 700 84px/1 var(--mono); color: var(--brass); letter-spacing: .04em; text-shadow: 0 0 18px rgba(217,160,78,.35); font-variant-numeric: tabular-nums; }
.floor-arrows { display: flex; flex-direction: column; gap: 6px; font-size: 22px; color: #3A424B; }
.floor-arrows .up { color: var(--brass); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .floor-arrows .up { animation: none; } }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #D2D8DD; }
.feed li { display: flex; gap: 10px; align-items: baseline; }
.tag { font: 500 11px/1.6 var(--mono); padding: 0 7px; border-radius: 999px; white-space: nowrap; }
.tag.warn { background: #3B2519; color: #E88A58; } .tag.info { background: #1B2B3B; color: #7DB2E3; }
.tag.bad { background: #3D1F1D; color: #F0857B; } .tag.good { background: #1C3329; color: #5FBF8E; }

section { padding-block: 72px; }
section .wrap { display: flex; flex-direction: column; gap: 18px; }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.section-lede { font-size: 18px; color: var(--muted); max-width: 64ch; }

.lifecycle { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.lifecycle li { counter-increment: s; padding: 14px 14px 0; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.lifecycle li::before { content: counter(s, decimal-leading-zero); font: 500 13px/1 var(--mono); color: var(--brass); }
.lifecycle b { font: 600 20px/1.1 var(--display); }
.lifecycle span { font-size: 14px; color: var(--muted); }

.assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.assets article { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.assets p { color: var(--muted); font-size: 15px; }

.two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.two > div { display: flex; flex-direction: column; gap: 16px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); }

.faq { max-width: 760px !important; }
details { border-bottom: 1px solid var(--line); padding-block: 14px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin-top: 8px; color: var(--muted); }

.form { display: flex; flex-direction: column; gap: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.form input, .form textarea { font: 16px/1.3 var(--body); padding: 10px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); width: 100%; }
.form .btn { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { font-size: 14px; min-height: 1.5em; }
.status.ok { color: var(--good); } .status.err { color: var(--bad); }

footer { background: var(--dark); color: #9AA3AD; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
footer a { color: var(--brass); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero .hero-grid, .two { grid-template-columns: 1fr; }
  .lifecycle { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .assets { grid-template-columns: 1fr 1fr; }
  .top nav a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
  .assets, .form .row { grid-template-columns: 1fr; }
  section { padding-block: 52px; }
  .floor-num { font-size: 64px; }
}