/* USL.ai / Cilira: matte midnight palette. No gradients, shadows or external fonts. */
:root {
  color-scheme: dark;
  --paper: #17232D;
  --ink: #E1E5E2;
  --muted: #AAB8C0;
  --quiet: #8497A2;
  --rule: #344450;
  --body-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page-shell {
  width: min(100%, 1320px);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 clamp(26px, 5.6vw, 84px);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 112px;
  border-bottom: 1px solid var(--rule);
}

.company-brand { display: inline-flex; width: 132px; text-decoration: none; }
.company-brand img { display: block; width: 100%; height: auto; }
.header-note {
  margin-top: 2px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .125em;
  text-transform: uppercase;
  text-align: right;
}

.site-main {
  display: flex;
  align-items: center;
  padding: clamp(55px, 10vh, 128px) 0;
}
.hero { width: 100%; max-width: 865px; }
.hero-brand {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.8vw, 28px);
  margin: 0 0 8px;
}
.brand-attribution {
  margin: 0 0 clamp(54px, 8vh, 92px);
  padding-left: calc(clamp(90px, 10vw, 112px) + clamp(18px, 2.8vw, 28px));
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .015em;
}
.brand-attribution strong {
  color: #D0C9BF;
  font-weight: 600;
}

.product-icon { display: block; width: clamp(90px, 10vw, 112px); height: auto; flex-shrink: 0; }
.product-name { display: block; width: clamp(210px, 27vw, 315px); height: auto; }
.eyebrow {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(43px, 5.25vw, 75px);
  line-height: 1.085;
  font-weight: 590;
  letter-spacing: -.057em;
}
.description {
  max-width: 620px;
  margin: 29px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.76;
  letter-spacing: -.01em;
}
.construction-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(52px, 8vh, 86px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: .015em;
}
.status-marker { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; }
.site-footer {
  min-height: 79px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 12px;
  letter-spacing: .015em;
}

@media (max-width: 680px) {
  .page-shell { padding: 0 24px; }
  .site-header { min-height: 88px; }
  .company-brand { width: 116px; }
  .header-note { display: none; }
  .site-main { padding: 68px 0 84px; }
  .hero-brand { gap: 15px; margin-bottom: 8px; }
  .brand-attribution { padding-left: 90px; margin-bottom: 64px; font-size: 12px; }
  .product-icon { width: 75px; }
  .product-name { width: min(48vw, 230px); }
  .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .155em; }
  h1 { font-size: clamp(37px, 9.2vw, 56px); letter-spacing: -.052em; line-height: 1.12; }
  .desktop-break { display: none; }
  .description { font-size: 16px; line-height: 1.7; margin-top: 24px; }
  .construction-status { margin-top: 54px; font-size: 12px; }
  .site-footer { min-height: 72px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Restrained tonal hierarchy — no decorative gradients or shadows */
.eyebrow { color: #96ACB7; }
.status-marker { border-color: #96ACB7; background: #96ACB7; }
.construction-status { color: #BEC8C7; }

/* Keep navigation readable on dark surfaces, including the 404 page. */
.description a { color: var(--ink); text-underline-offset: .18em; }