/* fonts.css */
/* Self-hosted. No font CDN — a self-hosted media server's site shouldn't phone
   one home. Subsets are built by tools/build-fonts.py from the vendored OFL
   sources; build.mjs rewrites these /fonts/ URLs to content-hashed paths. */

/* Archivo, variable. The wdth axis (62–125) is the signature of the design:
   wordmark 125%, display 118%, h2 114%, poster initials 62%. It must be
   declared here or the browser clamps font-stretch instead of varying the
   axis. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-variable.6978939562.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400.14d2eb8b7d.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500.f56f3850af.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600.ef0eff7e63.woff2) format("woff2");
}

/* base.css */
/* Design tokens — the app's "Phosphor" system, verbatim from the design files. */
:root {
  --bg: #0b0c0f;
  --bg-deep: #07080a;
  --tile: #101218;
  --sidebar: #0d0f13;

  --text: #e9ebee;
  --text-2: #c7cbd1;
  --muted: #9ba0a8;
  --subtle: #61666e;
  --faint: #4a4e55;

  --amber: #ffb454;
  --amber-hi: #ffc272;
  --amber-warn: #e0a548;
  --green: #5cb87a;
  --on-amber: #0c0d10;

  --hair: rgba(255, 255, 255, 0.07);
  --hair-card: rgba(255, 255, 255, 0.1);
  --hair-btn: rgba(255, 255, 255, 0.18);
  --hair-table: rgba(255, 255, 255, 0.12);

  --amber-fill-04: rgba(255, 180, 84, 0.04);
  --amber-fill-05: rgba(255, 180, 84, 0.05);
  --amber-fill-07: rgba(255, 180, 84, 0.07);
  --amber-fill-08: rgba(255, 180, 84, 0.08);
  --amber-fill-12: rgba(255, 180, 84, 0.12);
  --amber-fill-14: rgba(255, 180, 84, 0.14);
  --amber-line-35: rgba(255, 180, 84, 0.35);
  --amber-line-40: rgba(255, 180, 84, 0.4);
  --amber-line-50: rgba(255, 180, 84, 0.5);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 64px;
  --maxw: 1180px;

  --scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  --scanlines-strong: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}

html {
  scroll-behavior: smooth;
  /* keeps #features / #compare / #install clear of the 62px sticky nav */
  scroll-padding-top: 78px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--amber);
  text-decoration: none;
}

a:hover {
  color: var(--amber-hi);
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---- motion ------------------------------------------------------------- */
/* Timings match brand/loombre-splash-reference.html exactly. lmBlaze (1.05s)
   and lmFlicker (.72s) are intentionally coprime-ish so the outer flame and the
   inner core drift out of phase — that is what makes the mark feel alive. */
@keyframes lmBlaze {
  0%,
  100% { transform: scale(1, 1) rotate(0); }
  20% { transform: scale(0.94, 1.07) rotate(-2.4deg); }
  45% { transform: scale(1.06, 0.92) rotate(1.6deg); }
  70% { transform: scale(0.95, 1.05) rotate(-1.2deg); }
  85% { transform: scale(1.03, 0.97) rotate(0.8deg); }
}

@keyframes lmFlicker {
  0%,
  100% { transform: scale(1, 1); }
  25% { transform: scale(0.96, 1.05) rotate(-1.5deg); }
  50% { transform: scale(1.04, 0.94); }
  75% { transform: scale(0.97, 1.03) rotate(1.2deg); }
}

@keyframes lmPulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Exactly what the design files do. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---- accessibility ------------------------------------------------------ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--amber-hi);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--on-amber);
  font: 600 11px var(--mono);
  letter-spacing: 0.12em;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
  color: var(--on-amber);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* layout.css */
/* ---- page shell --------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  border-top: 1px solid var(--hair);
}

.section--deep {
  background: var(--bg-deep);
}

/* full-bleed phosphor texture, e.g. the privacy statement band */
.section--scan {
  position: relative;
  overflow: hidden;
}

.section--scan > .scanlines {
  position: absolute;
  inset: 0;
  background: var(--scanlines-strong);
  pointer-events: none;
}

.section--scan > .wrap {
  position: relative;
}

/* ---- nav ---------------------------------------------------------------- */
/* content-box: the design files have no box-sizing reset, so their 62px is the
   content height and the hairline sits outside it. Keeping the authored number
   and switching the box model reproduces both the 63px total and the vertical
   centring of the wordmark. Same reasoning for .docsearch, .mockup__bar
   and .msb below. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 62px;
  padding: 0 40px;
  border-bottom: 1px solid var(--hair);
  background: rgba(11, 12, 15, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  flex: none;
}

.nav__brand:hover {
  color: var(--text);
}

.wordmark {
  font: 800 13px var(--sans);
  font-stretch: 125%;
  letter-spacing: 0.22em;
  color: var(--text);
}

.nav__badge {
  font: 500 8.5px var(--mono);
  letter-spacing: 0.12em;
  color: var(--subtle);
  border: 1px solid var(--hair-table);
  border-radius: 999px;
  padding: 2px 7px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 500 10.5px var(--mono);
  letter-spacing: 0.12em;
}

.nav__links a {
  color: var(--muted);
}

.nav__links a:hover {
  color: var(--amber-hi);
}

.nav__links a[aria-current] {
  color: var(--amber);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* docs-hub search affordance (visual only for launch) */
.docsearch {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair-table);
  border-radius: 999px;
  padding: 8px 14px;
  min-width: 200px;
}

.docsearch__label {
  font: 500 10px var(--mono);
  letter-spacing: 0.08em;
  color: var(--subtle);
}

.docsearch__key {
  margin-left: auto;
  font: 500 9px var(--mono);
  color: var(--faint);
  border: 1px solid var(--hair-card);
  border-radius: 4px;
  padding: 1px 5px;
  /* U+2318 exists in neither Archivo nor IBM Plex Mono upstream — the design
     prototype fell back to a system font for it too. */
  font-family: var(--mono), "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans";
}

/* ---- footers ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--hair);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}

.footer__lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text);
}

.footer__tag {
  font: 500 9px var(--mono);
  letter-spacing: 0.16em;
  color: var(--subtle);
  margin-bottom: 16px;
}

.footer__note {
  font: 400 11.5px/1.6 var(--sans);
  color: var(--subtle);
  max-width: 280px;
  text-wrap: pretty;
}

.footer__col {
  display: flex;
  flex-direction: column;
  /* 11px, not the design's 10px. A 12.5px link row with a 10px gap gives a
     23.5px pitch, and no 24px hit area can fit inside 23.5px without
     overlapping its neighbour — WCAG 2.2 target size is unreachable at 10px.
     11px makes box and pitch both exactly 24.5px, so they tile without
     overlap. Costs 3px of footer height in total. */
  gap: 11px;
}

.footer__heading {
  font: 600 9px var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
  margin-bottom: 2px;
}

.footer__col a {
  font: 400 12.5px var(--sans);
  color: var(--muted);
}

.footer__col a:hover {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 36px;
  font: 500 9px var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
}

.footer--slim .footer__bottom {
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
}

.footer--slim .footer__bottom a {
  color: var(--muted);
}

.footer--slim .footer__bottom a:hover {
  color: var(--text);
}

/* components.css */
/* ---- buttons & pills ---------------------------------------------------- */
.btn-amber {
  font: 700 14px var(--sans);
  color: var(--on-amber);
  background: var(--amber);
  border-radius: 999px;
  padding: 13px 26px;
  white-space: nowrap;
}

.btn-amber:hover {
  color: var(--on-amber);
  filter: brightness(1.1);
}

.btn-amber--sm {
  font: 700 12px var(--sans);
  padding: 9px 18px;
}

.btn-outline {
  font: 600 13px var(--sans);
  color: var(--text);
  border: 1px solid var(--hair-btn);
  border-radius: 999px;
  padding: 12px 24px;
  white-space: nowrap;
}

.btn-outline:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline--mono {
  font: 500 10.5px var(--mono);
  letter-spacing: 0.1em;
  padding: 8px 16px;
}

.btn-outline--mono:hover {
  color: #fff;
}

.btn-quiet {
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 12px 6px;
}

.btn-quiet:hover {
  color: var(--amber);
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The design's standalone link rows are 12.5–14px tall, below the 24px WCAG 2.2
   target size. Vertical padding with a cancelling negative margin grows the hit
   area past 24px without moving a single pixel of layout. (5px only reached
   23.5px on the 12.5px footer links — half a pixel short.) */
.nav__links a,
.footer__col a,
.footer--slim .footer__bottom a,
.guide__links a,
.section-head__link {
  padding-top: 5.5px;
  padding-bottom: 5.5px;
  margin-top: -5.5px;
  margin-bottom: -5.5px;
}

/* A link inside a sentence must not rely on colour alone: amber on the muted
   body grey is only 1.49:1, well under the 3:1 the WCAG technique wants. A
   restrained underline distinguishes it without touching the palette. */
.card__body a,
.note a,
.trust__body a,
.plat__body a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 180, 84, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.card__body a:hover,
.note a:hover,
.trust__body a:hover,
.plat__body a:hover {
  text-decoration-color: currentColor;
}

/* ---- section headings --------------------------------------------------- */
.eyebrow {
  font: 600 10px var(--mono);
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 10px;
}

.eyebrow--lg {
  font-size: 10.5px;
  margin-bottom: 14px;
}

.eyebrow--quiet {
  color: var(--subtle);
}

.h2 {
  font: 800 32px var(--sans);
  font-stretch: 114%;
  color: var(--text);
}

.h2--sm {
  font-size: 30px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.section-head__link {
  font: 500 10px var(--mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Default line-height is `normal` — that is what the download page's three
   footnotes use. Only the landing page's comparison footnote is set to 1.5. */
.note {
  font: 400 12px var(--sans);
  color: var(--subtle);
  text-wrap: pretty;
  margin-top: 14px;
}

.note--loose {
  line-height: 1.5;
}

.note--bright {
  color: var(--muted);
}

/* ---- cards -------------------------------------------------------------- */
.card {
  border: 1px solid var(--hair-card);
  background: var(--tile);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}

.card__eyebrow {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 11px;
}

.card__eyebrow--warn {
  color: var(--amber-warn);
}

.card__eyebrow--quiet {
  color: var(--subtle);
}

.card__title {
  font: 700 17px var(--sans);
  color: var(--text);
  margin-bottom: 8px;
}

.card__body {
  font: 400 13px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
  flex: 1;
}

.card__foot {
  font: 500 8.5px var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-top: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ---- terminal blocks ---------------------------------------------------- */
.term {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--hair-card);
  border-radius: 12px;
  padding: 22px 26px;
  font: 400 12.5px/2 var(--mono);
  color: var(--text-2);
  overflow-x: auto;
}

.term__prompt {
  color: var(--amber);
}

.term__comment {
  color: var(--subtle);
}

.term__result {
  color: var(--subtle);
  margin-top: 4px;
}

/* Recommended addition, not in the prototype: copy-to-clipboard. Sits in the
   terminal's top-right so it never displaces a command line. */
.term__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  font: 500 8.5px var(--mono);
  letter-spacing: 0.14em;
  color: var(--subtle);
  background: var(--tile);
  border: 1px solid var(--hair-card);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
}

.term__copy:hover {
  color: var(--amber);
  border-color: var(--amber-line-40);
}

.term__copy[data-copied] {
  color: var(--green);
  border-color: rgba(92, 184, 122, 0.4);
}

.term__copy--sm {
  top: 8px;
  right: 8px;
  font-size: 8px;
  padding: 3px 8px;
  background: var(--tile);
}

/* ---- link tiles --------------------------------------------------------- */
.tile-row {
  display: flex;
  gap: 12px;
}

.tile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--hair-card);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--text);
}

.tile:hover {
  color: var(--text);
  border-color: var(--amber-line-50);
}

.tile__name {
  font: 600 13px var(--sans);
}

.tile__meta {
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  color: var(--subtle);
  white-space: nowrap;
}

.tile--amber {
  border-color: var(--amber-line-40);
  background: var(--amber-fill-08);
  color: var(--amber);
}

.tile--amber:hover {
  color: var(--amber);
  border-color: var(--amber-line-40);
  background: var(--amber-fill-14);
}

.tile--amber .tile__meta {
  color: inherit;
}

/* ---- the brand mark ----------------------------------------------------- */
/* One path-pair drawn with fill-rule="evenodd" — see brand/loombre-mark.svg.
   Sized from context so the path data lives in exactly one partial. */
.mark {
  display: block;
  flex: none;
  fill: var(--amber);
  width: 20px;
  height: 20px;
}

.msb__lockup .mark {
  width: 14px;
  height: 14px;
}

.footer__lockup .mark {
  width: 22px;
  height: 22px;
}

.cell-loombre-head .mark {
  width: 13px;
  height: 13px;
  fill: var(--on-amber);
}

.mark--glow {
  filter: drop-shadow(0 0 13px rgba(255, 180, 84, 0.4));
}

.mark__blaze {
  transform-box: view-box;
  transform-origin: 50% 84%;
  animation: lmBlaze 1.05s ease-in-out infinite;
}

.mark__core {
  transform-box: view-box;
  transform-origin: 50% 68%;
  animation: lmFlicker 0.72s ease-in-out infinite;
}

/* ---- status dots -------------------------------------------------------- */
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: lmPulse 3s infinite;
  flex: none;
}

.dot--sm {
  width: 4px;
  height: 4px;
  animation-duration: 1.6s;
}

/* pages.css */
/* =========================================================================
   Landing
   ========================================================================= */

/* ---- hero --------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  padding-top: 76px;
  padding-bottom: 52px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.18em;
  color: var(--amber);
}

.hero__title {
  margin: 0 0 22px;
  font: 800 58px/1.02 var(--sans);
  font-stretch: 118%;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: pretty;
}

.hero__sub {
  margin: 0 0 32px;
  max-width: 540px;
  font: 400 16.5px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

.hero__ctas {
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hero__platforms {
  font: 500 9.5px var(--mono);
  letter-spacing: 0.14em;
  color: var(--subtle);
}

/* boot panel */
.boot {
  border: 1px solid var(--hair-card);
  background: var(--tile);
  border-radius: 14px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  align-self: start;
}

.boot__log {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 500 10px var(--mono);
  letter-spacing: 0.12em;
}

.boot__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.boot__key {
  color: var(--subtle);
}

.boot__val {
  color: var(--amber);
}

.boot__row--sep {
  border-top: 1px solid var(--hair);
  padding-top: 8px;
  margin-top: 2px;
}

.boot__val--green {
  color: var(--green);
}

/* ---- app mockup --------------------------------------------------------- */
.mockup-section {
  padding-bottom: 64px;
}

.mockup {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.58);
}

.mockup__bar {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--tile);
  border-bottom: 1px solid var(--hair);
}

.mockup__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  flex: none;
}

.mockup__url {
  flex: 1;
  text-align: center;
  font: 500 9.5px var(--mono);
  letter-spacing: 0.1em;
  color: var(--subtle);
}

.mockup__bar-pad {
  width: 39px;
  flex: none;
}

.mockup__body {
  display: flex;
  background: var(--bg);
}

/* sidebar */
.msb {
  box-sizing: content-box;
  width: 190px;
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msb__lockup {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px 14px;
}

.msb__word {
  font: 800 9.5px var(--sans);
  font-stretch: 125%;
  letter-spacing: 0.2em;
  color: var(--text);
}

.msb__group {
  font: 600 8px var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
  padding: 0 7px 5px;
}

.msb__group--spaced {
  padding-top: 12px;
}

.msb__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 10px var(--sans);
  color: var(--muted);
  padding: 6px 11px;
}

.msb__item--active {
  color: var(--amber);
  background: var(--amber-fill-12);
  border-radius: 999px;
}

.msb__count {
  font: 500 8px var(--mono);
  color: var(--subtle);
}

.msb__pin {
  font: 600 7.5px var(--mono);
  color: var(--amber-warn);
  border: 1px solid rgba(224, 165, 72, 0.4);
  border-radius: 999px;
  padding: 1px 5px;
}

.msb__pool {
  margin-top: 30px;
  padding: 0 7px;
}

.msb__pool-label {
  font: 500 8px var(--mono);
  letter-spacing: 0.1em;
  color: var(--subtle);
  margin-bottom: 4px;
}

.meter {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.meter__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--amber);
  width: var(--pct);
}

/* main pane */
.mmain {
  flex: 1;
  padding: 18px 20px 22px;
  min-width: 0;
}

.banner {
  --h: 260;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 178px;
  background: linear-gradient(160deg, #37455f, #14181f);
  background: linear-gradient(160deg, oklch(0.42 0.09 var(--h)), oklch(0.16 0.04 var(--h)));
}

.banner__scan {
  position: absolute;
  inset: 0;
  background: var(--scanlines);
}

.banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 5, 7, 0.72), rgba(4, 5, 7, 0.1) 65%);
}

.banner__copy {
  position: absolute;
  left: 20px;
  bottom: 16px;
}

.banner__eyebrow {
  font: 600 8.5px var(--mono);
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 6px;
}

.banner__title {
  font: 800 24px var(--sans);
  font-stretch: 118%;
  color: var(--text);
  margin-bottom: 10px;
}

.banner__pills {
  display: flex;
  gap: 6px;
}

.pill-play {
  font: 700 9px var(--sans);
  color: var(--on-amber);
  background: var(--amber);
  border-radius: 999px;
  padding: 5px 12px;
}

.pill-details {
  font: 600 9px var(--sans);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
}

.banner__rot {
  position: absolute;
  right: 16px;
  top: 13px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.banner__rot i {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.banner__rot i.is-on {
  width: 14px;
  background: var(--amber);
}

.row-label {
  font: 600 8.5px var(--mono);
  letter-spacing: 0.16em;
  color: var(--subtle);
  margin: 16px 0 9px;
}

.shelf {
  display: flex;
  gap: 11px;
}

.cw {
  width: 146px;
  flex: none;
}

.cw__thumb {
  position: relative;
  height: 82px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(160deg, #4a3f43, #201a1c);
  background: linear-gradient(160deg, oklch(0.4 0.09 var(--h)), oklch(0.18 0.04 var(--h)));
}

.cw__track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.cw__fill {
  height: 100%;
  background: var(--amber);
  width: var(--pct);
}

.cw__title {
  font: 500 9px var(--sans);
  color: var(--text-2);
  margin-top: 5px;
}

.poster {
  width: 80px;
  height: 116px;
  flex: none;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3f4a3f, #1a1e1a);
  background: linear-gradient(160deg, oklch(0.4 0.09 var(--h)), oklch(0.18 0.04 var(--h)));
}

/* the 62% end of the width axis — the loudest use of the wdth play */
.poster__initial {
  font: 800 38px var(--sans);
  font-stretch: 62%;
  color: rgba(255, 255, 255, 0.14);
}

.pct-22 { --pct: 22%; }
.pct-41 { --pct: 41%; }
.pct-64 { --pct: 64%; }
.pct-71 { --pct: 71%; }
.pct-87 { --pct: 87%; }

.h20 { --h: 20; }
.h40 { --h: 40; }
.h90 { --h: 90; }
.h130 { --h: 130; }
.h140 { --h: 140; }
.h190 { --h: 190; }
.h210 { --h: 210; }
.h230 { --h: 230; }
.h300 { --h: 300; }
.h310 { --h: 310; }
.h350 { --h: 350; }

/* ---- feature strip ------------------------------------------------------ */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
}

.strip__cell {
  padding: 36px 30px 32px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
}

.strip__cell:last-child {
  border-right: 0;
}

.strip__index {
  font: 600 10px var(--mono);
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 11px;
}

.strip__title {
  font: 700 16px var(--sans);
  color: var(--text);
  margin-bottom: 8px;
}

.strip__body {
  font: 400 13px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
  flex: 1;
}

.strip__foot {
  font: 500 8.5px var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-top: 14px;
}

/* ---- deep feature grid -------------------------------------------------- */
.deep-grid {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ---- privacy statement band --------------------------------------------- */
.privacy {
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: center;
}

.privacy__eyebrow {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.2em;
  color: var(--subtle);
  margin-bottom: 18px;
}

.privacy__statement {
  font: 800 44px/1.1 var(--sans);
  font-stretch: 118%;
  color: var(--text);
  margin-bottom: 18px;
}

.privacy__statement em {
  font-style: normal;
  color: var(--amber);
}

.privacy__body {
  margin: 0 auto;
  max-width: 640px;
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- comparison --------------------------------------------------------- */
.compare {
  padding-top: 64px;
  padding-bottom: 64px;
}

.compare__head {
  margin-bottom: 26px;
}

.compare__date {
  font: 500 10px var(--mono);
  letter-spacing: 0.1em;
  color: var(--subtle);
  white-space: nowrap;
}

.compare__frame {
  border: 1px solid var(--hair-table);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sidebar);
}

/* A real <table> rather than the prototype's grid-of-divs: identical geometry
   via table-layout:fixed, but screen readers announce row/column headers. */
.compare__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* No font-weight here — each cell class sets its own via the font shorthand,
   and a reset on th/td would outspecify them. */
.compare__table th,
.compare__table td {
  text-align: left;
  vertical-align: top;
}

.compare__table thead th {
  vertical-align: middle;
  border-bottom: 1px solid var(--hair-table);
}

.compare__table tbody tr {
  border-bottom: 1px solid var(--hair);
}

.compare__table tbody tr:last-child {
  border-bottom: 0;
}

.col-feature { width: 29.545%; }
.col-loombre { width: 25%; }
.col-rival { width: 22.727%; }

.cell-blank {
  padding: 16px 24px;
}

.cell-loombre-head {
  padding: 16px 20px;
  font: 800 12.5px var(--sans);
  font-stretch: 118%;
  letter-spacing: 0.14em;
  color: var(--on-amber);
  background: var(--amber);
}

.cell-loombre-head > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cell-rival-head {
  padding: 16px 20px;
  font: 600 11px var(--mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cell-feature {
  padding: 15px 24px;
  font: 600 13px var(--sans);
  color: var(--text);
}

.cell-loombre {
  padding: 15px 20px;
  font: 500 12.5px var(--sans);
  color: var(--text);
  background: var(--amber-fill-07);
}

.cell-rival {
  padding: 15px 20px;
  font: 400 12.5px var(--sans);
  color: var(--muted);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- install ------------------------------------------------------------ */
.install {
  padding-top: 64px;
  padding-bottom: 64px;
}

.install__head {
  margin-bottom: 18px;
}

.install .term {
  margin-bottom: 22px;
}

/* ---- docs teaser -------------------------------------------------------- */
.teaser {
  padding-top: 64px;
  padding-bottom: 64px;
}

.teaser__head {
  margin-bottom: 26px;
}

.doc-card {
  border: 1px solid var(--hair-card);
  background: var(--tile);
  border-radius: 12px;
  padding: 22px 24px;
  color: var(--text);
}

.doc-card:hover {
  color: var(--text);
  border-color: var(--amber-line-50);
}

.doc-card__eyebrow {
  font: 600 9px var(--mono);
  letter-spacing: 0.16em;
  color: var(--subtle);
  margin-bottom: 9px;
}

.doc-card__title {
  font: 700 15px var(--sans);
  margin-bottom: 6px;
}

.doc-card__body {
  font: 400 12px/1.5 var(--sans);
  color: var(--muted);
}

/* ---- closing CTA band --------------------------------------------------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.cta__eyebrow {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 9px;
}

.cta__title {
  font: 800 30px var(--sans);
  font-stretch: 114%;
  color: var(--text);
}

/* =========================================================================
   Download
   ========================================================================= */
.page-head {
  padding-top: 64px;
  padding-bottom: 40px;
}

.page-head__title {
  margin: 0 0 14px;
  font: 800 46px/1.05 var(--sans);
  font-stretch: 118%;
  color: var(--text);
}

.page-head__sub {
  margin: 0;
  max-width: 600px;
  font: 400 15.5px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

.docker {
  border: 1px solid var(--amber-line-40);
  background: var(--amber-fill-05);
  border-radius: 14px;
  padding: 28px 30px;
}

.docker__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.docker__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docker__name > span:first-child {
  font: 700 15px var(--sans);
  color: var(--text);
}

.badge-rec {
  font: 600 8.5px var(--mono);
  letter-spacing: 0.12em;
  color: var(--on-amber);
  background: var(--amber);
  border-radius: 999px;
  padding: 3px 8px;
}

.docker__platforms {
  font: 500 9.5px var(--mono);
  letter-spacing: 0.1em;
  color: var(--subtle);
  white-space: nowrap;
}

.docker .term {
  padding: 20px 24px;
}

.platforms {
  padding-top: 22px;
}

/* the download page's platform cards sit 2px deeper than the landing page's
   deep-feature cards (26/26/24 vs 26/26/22) */
.platforms .card {
  padding-bottom: 24px;
}

.plat__title {
  font: 700 15px var(--sans);
  color: var(--text);
  margin-bottom: 5px;
}

.plat__meta {
  font: 500 9px var(--mono);
  letter-spacing: 0.12em;
  color: var(--subtle);
  margin-bottom: 14px;
}

.plat__body {
  font: 400 12.5px/1.55 var(--sans);
  color: var(--muted);
  flex: 1;
  text-wrap: pretty;
}

.plat__body code {
  font-family: var(--mono);
  font-size: 11px;
}

.plat__btns {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dl-pill {
  font: 600 11.5px var(--sans);
  color: var(--on-amber);
  background: var(--amber);
  border-radius: 999px;
  padding: 8px 16px;
}

a.dl-pill:hover {
  color: var(--on-amber);
  filter: brightness(1.1);
}

/* There is no release to link to yet, so the filename reads as an artifact
   label rather than a button. Same amber-tint treatment as the "Verify your
   download" tile and the Tier-0 card; padding drops 1px to absorb the border
   so the pill keeps its size. */
.dl-pill--pending {
  color: var(--amber);
  background: var(--amber-fill-08);
  border: 1px solid var(--amber-line-40);
  padding: 7px 15px;
}

.plat__foot {
  font: 500 8.5px var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-top: 10px;
}

.trust {
  padding-top: 56px;
  padding-bottom: 56px;
}

.trust__head {
  margin-bottom: 12px;
}

.trust__intro {
  margin: 0 0 24px;
  max-width: 680px;
  font: 400 13.5px/1.6 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

.trust__card {
  border: 1px solid var(--hair-card);
  border-radius: 12px;
  padding: 22px 24px;
}

.trust__label {
  font: 600 10px var(--mono);
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 10px;
}

.trust__body {
  font: 400 12.5px/1.55 var(--sans);
  color: var(--muted);
  margin-bottom: 14px;
  text-wrap: pretty;
}

.code {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  font: 400 10.5px/1.7 var(--mono);
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre;
}

/* room for the injected copy button so it never overlaps a command */
.code[data-copy] {
  padding-right: 64px;
}

.tiers {
  padding-top: 48px;
  padding-bottom: 64px;
}

.tiers .eyebrow {
  margin-bottom: 20px;
}

.tier {
  border: 1px solid var(--hair-card);
  border-radius: 12px;
  padding: 22px 24px;
}

.tier--0 {
  border-color: var(--amber-line-35);
  background: var(--amber-fill-04);
}

.tier__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.tier__name {
  font: 700 14px var(--sans);
  color: var(--text);
}

.tier__tag {
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  color: var(--amber);
  white-space: nowrap;
}

.tier__specs {
  font: 500 10.5px/1.8 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* =========================================================================
   Docs hub
   ========================================================================= */
.docs-head {
  padding-bottom: 44px;
}

.docs-head__sub {
  max-width: 620px;
}

.guides {
  padding-bottom: 24px;
}

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.guide {
  border: 1px solid var(--hair-card);
  background: var(--tile);
  border-radius: 14px;
  padding: 28px 30px;
}

.guide--start {
  border-color: var(--amber-line-35);
  background: var(--amber-fill-04);
}

.guide__eyebrow {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.16em;
  color: var(--subtle);
  margin-bottom: 10px;
}

.guide--start .guide__eyebrow {
  color: var(--amber);
}

.guide__title {
  font: 800 20px var(--sans);
  font-stretch: 114%;
  color: var(--text);
  margin-bottom: 8px;
}

.guide__body {
  font: 400 13px/1.55 var(--sans);
  color: var(--muted);
  margin-bottom: 18px;
  text-wrap: pretty;
}

.guide__links {
  display: flex;
  flex-direction: column;
  /* 11px rather than the design's 9px, for the same reason as .footer__col */
  gap: 11px;
  font: 500 12.5px var(--sans);
}

.reference {
  margin-top: 40px;
}

.reference__inner {
  padding-top: 40px;
  padding-bottom: 56px;
}

.reference__label {
  margin-bottom: 18px;
}

.reference__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
}

.ref-tile {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--muted);
}

.ref-tile:hover {
  color: var(--amber);
  border-color: var(--amber-line-40);
}

/* =========================================================================
   404
   ========================================================================= */
.notfound {
  padding-top: 96px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.notfound__code {
  font: 800 96px/1 var(--sans);
  font-stretch: 62%;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.04em;
}

.notfound__title {
  margin: 0;
  font: 800 46px/1.05 var(--sans);
  font-stretch: 118%;
  color: var(--text);
}

.notfound__sub {
  margin: 0;
  max-width: 560px;
  font: 400 15.5px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}

.notfound__log {
  width: auto;
  min-width: 320px;
}

.boot__val--warn {
  color: var(--amber-warn);
}

/* responsive.css */
/* ===========================================================================
   The prototypes are desktop-first (min-width:1180px). Everything above 1180px
   is pixel-identical to the design files; the rules below only take effect as
   the viewport narrows, and each one is a deliberate treatment rather than a
   reflow-and-hope:

     nav          wraps its mono link row underneath the brand
     hero         stacks, boot panel keeps its place under the headline
     app mockup   sheds the sidebar the way a real app does on a phone;
                  the shelves become swipeable, as they already are in the app
     4-col strip  4 -> 2 -> 1, hairlines follow
     3x2 grid     3 -> 2 -> 1
     comparison   becomes one block per capability, Loombre first, amber intact
     footer       4 -> 2 -> 1
   =========================================================================== */

/* ---- <= 1120px: tighten the gutter before anything else moves ------------ */
@media (max-width: 1120px) {
  :root {
    --gutter: 40px;
  }
  .nav {
    padding: 0 24px;
  }
  .nav__links {
    gap: 18px;
  }
}

/* ---- <= 1000px: the wide grids give up a column -------------------------- */
@media (max-width: 1000px) {
  .hero__title {
    font-size: 48px;
  }
  .strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip__cell:nth-child(2n) {
    border-right: 0;
  }
  .strip__cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--hair);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .privacy__statement {
    font-size: 36px;
  }
  .footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
}

/* ---- <= 900px: hero stacks, nav sheds the dead search affordance --------- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 56px;
  }
  .boot {
    align-self: stretch;
  }
  /* the docs search is a visual affordance only — don't ship it as a
     200px-wide dead control on a phone */
  .docsearch {
    display: none;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .reference__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile-row {
    flex-wrap: wrap;
  }
  .tile {
    flex: 1 1 calc(50% - 6px);
  }
}

/* ---- <= 820px: the mockup narrows, shelves become swipeable -------------- */
@media (max-width: 820px) {
  .msb {
    width: 154px;
  }
  .shelf {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .compare__head {
    display: block;
  }
  .compare__date {
    display: block;
    margin-top: 8px;
    white-space: normal;
  }
}

/* ---- <= 760px: nav wraps to two rows; section heads stack ---------------- */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 118px;
  }
  .nav {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 24px 0;
    row-gap: 10px;
  }
  .nav__brand {
    order: 1;
  }
  .nav__actions {
    order: 2;
  }
  .nav__links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar {
    display: none;
  }
  .section-head {
    display: block;
  }
  .section-head__link {
    display: inline-block;
    /* 12px of design spacing, less the 6px hit-area margin from components.css */
    margin-top: 6px;
  }
  .docker__head {
    display: block;
  }
  .docker__platforms {
    display: block;
    margin-top: 8px;
    white-space: normal;
  }
  .cta {
    display: block;
  }
  .cta .btn-row {
    margin-top: 22px;
    flex-wrap: wrap;
  }
}

/* ---- <= 700px: comparison table becomes one block per capability --------- */
@media (max-width: 700px) {
  .compare__table,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td {
    display: block;
    width: auto;
  }
  .compare__table thead,
  .compare__table colgroup {
    display: none;
  }
  .compare__table tbody tr {
    padding-bottom: 12px;
  }
  .cell-feature {
    padding: 18px 20px 10px;
    font-size: 14px;
  }
  .cell-loombre,
  .cell-rival {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 20px;
    border-left: 0;
    text-align: right;
  }
  /* the column headers the <thead> can no longer carry */
  .cell-loombre::before,
  .cell-rival::before {
    font: 600 9.5px var(--mono);
    letter-spacing: 0.14em;
    text-align: left;
    flex: none;
  }
  .cell-loombre::before {
    content: "LOOMBRE";
    color: var(--amber);
  }
  .cell-rival::before {
    content: attr(data-label);
    color: var(--subtle);
  }
}

/* ---- <= 640px: single column everywhere; mockup sheds its sidebar -------- */
@media (max-width: 640px) {
  :root {
    --gutter: 24px;
  }
  .nav {
    padding: 12px 20px 0;
  }
  .hero__title {
    font-size: 38px;
  }
  .hero__sub {
    font-size: 15.5px;
  }
  .page-head__title,
  .notfound__title {
    font-size: 36px;
  }
  .h2 {
    font-size: 26px;
  }
  .privacy__statement {
    font-size: 30px;
  }
  .privacy {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .strip {
    grid-template-columns: 1fr;
  }
  .strip__cell {
    padding: 30px 24px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .strip__cell:last-child {
    border-bottom: 0;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .tile {
    flex: 1 1 100%;
  }
  .footer__cols {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    display: block;
    line-height: 1.9;
  }
  .footer--slim .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  /* On a phone a media app hides its sidebar too — keep the frame and the
     content shelves, which is what the mockup is actually showing off. */
  .msb {
    display: none;
  }
  .mmain {
    padding: 14px 14px 18px;
  }
  .banner {
    height: 148px;
  }
  .notfound {
    padding-top: 64px;
    padding-bottom: 72px;
  }
  .notfound__code {
    font-size: 72px;
  }
  .notfound__log {
    min-width: 0;
    width: 100%;
  }
  .btn-row {
    flex-wrap: wrap;
  }
  .term {
    padding: 20px 18px;
    font-size: 11.5px;
  }
  /* Commands are too long for a phone, so they wrap rather than scroll off.
     A hanging indent keeps a wrapped continuation visually distinct from the
     next `$` prompt. */
  .term > div {
    padding-left: 14px;
    text-indent: -14px;
  }
  .docker,
  .guide {
    padding: 24px 22px;
  }
  .card,
  .trust__card,
  .tier,
  .doc-card {
    padding: 22px 20px 20px;
  }
}

/* ---- <= 460px: the last things that still assume two columns ------------- */
@media (max-width: 460px) {
  :root {
    --gutter: 20px;
  }
  .hero__title {
    font-size: 32px;
  }
  .privacy__statement {
    font-size: 26px;
  }
  .reference__grid {
    grid-template-columns: 1fr;
  }
  .btn-amber,
  .btn-outline {
    padding: 12px 20px;
  }
  .nav__actions {
    gap: 8px;
  }
  .notfound__code {
    font-size: 60px;
  }
}