/* The front door.
 *
 * Borrows the kiosk's palette rather than the console's: this is the public
 * face and the kiosk is the thing a guest actually sees, so the two should
 * look like one product. The console stays a light desk tool, which is the
 * right register for a screen somebody works in for an hour.
 *
 * One stylesheet, no framework, no web fonts. A landing page that waits on a
 * font CDN to show its first word is a landing page that looks broken on a bad
 * connection — which is most of them.
 */

:root {
  --bg-1: #0a1020;
  --bg-2: #131d33;
  --ink: #f6f1e7;
  /* These four were the same four tokens the kiosk declares, at slightly
   * different values, for no reason either file could state: --muted at .66
   * against .62, --gold-soft at .30 against .32, --line at .14 against .16,
   * --panel at .045 against .05. Two pages of one product, a click apart, in
   * almost the same grey. */
  --muted: rgba(246, 241, 231, 0.62);
  --gold: #d8b26a;
  --gold-soft: rgba(216, 178, 106, 0.32);
  --line: rgba(246, 241, 231, 0.16);

  /* The same three-step panel scale the kiosk declares, with the same role
   * names. This file called the middle step --panel-2; the kiosk called its
   * TOP step --panel-strong. One number apart in name, one role apart in
   * meaning, and nothing to tell you which was which. */
  --panel: rgba(255, 255, 255, 0.05);
  --panel-raised: rgba(255, 255, 255, 0.075);
  --panel-strong: rgba(255, 255, 255, 0.11);

  /* The same radius vocabulary as the Control Center, at this page's own
   * values: a landing page can afford rounder cards than a dense tool. */
  --radius-sm: 4px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;
  /* RHYTHM — the same six steps, under the same names, as every other surface.
   * See apps/admin/styles.css for what they replace. */
  --gap-xs: 4px;
  --gap-sm: 6px;
  --gap-md: 10px;
  --gap-lg: 14px;
  --gap-xl: 20px;
  --gap-2xl: 24px;
  /* One step further than the other surfaces declare, because this page has
   * something they do not: full-width bands with a heading each. A 30px and a
   * 34px were sitting above the top of the shared scale, which is the honest
   * reason for a seventh step rather than rounding a landing page's section
   * rhythm down to a dense tool's. */
  --gap-3xl: 32px;
  --display: "Didot", "Bodoni MT", "Playfair Display", Garamond, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The page is dark all the way down, and that has to hold at any height.
 *
 * This was `background-attachment: fixed` on the body, which sizes the
 * gradient to the VIEWPORT: everything below the first screenful fell through
 * to the default white, and the light text on it went invisible. On a short
 * screen that is most of the page. */
html { background: var(--bg-1); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(216, 178, 106, .1), transparent 60%),
    linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-1) 100%);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 17px/1.65 var(--ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Keyboard users first: the skip link is the first thing in the document and
   the first thing focus reaches. */
.skip {
  position: absolute; left: -9999px;
  padding: 10px 16px; background: var(--gold); color: var(--bg-1);
  border-radius: 0 0 var(--radius-control) 0; font-weight: 700; z-index: 20;
}
.skip:focus { left: 0; top: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Header and menu ----------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--gap-lg);
  padding: 14px max(20px, calc((100vw - var(--wide)) / 2));
  background: rgba(10, 16, 32, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--gap-md);
  color: var(--ink); text-decoration: none; font-family: var(--display);
  font-size: 20px; letter-spacing: .04em; margin-right: auto;
}
.brand-mark { width: 26px; height: 26px; color: var(--gold); flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

.menu { display: flex; align-items: center; gap: var(--gap-sm); }
.menu a {
  padding: 8px 12px; border-radius: var(--radius-pill);
  color: var(--ink); text-decoration: none; font-size: 15px;
}
.menu a:hover { background: var(--panel-raised); }
.menu-cta {
  background: var(--gold); color: var(--bg-1) !important;
  font-weight: 700; letter-spacing: .04em;
}
.menu-cta:hover { filter: brightness(1.08); background: var(--gold); }

.menu-toggle {
  display: none; align-items: center; gap: var(--gap-md);
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--panel-raised); color: var(--ink);
  border: 1px solid var(--line); font: inherit; font-size: 15px; cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; content: '';
}
.menu-bars { position: relative; }
.menu-bars::before { position: absolute; top: -5px; }
.menu-bars::after { position: absolute; top: 5px; }

@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--gap-xs);
    padding: 10px 16px 16px;
    background: var(--bg-1); border-bottom: 1px solid var(--line);
    /* Not `display: none`: a menu removed from the box tree is removed from
       the accessibility tree too, and this one has to stay reachable when
       nothing has run to open it. */
    max-height: 0; overflow: hidden; visibility: hidden;
  }
  .menu--open { max-height: 60vh; visibility: visible; }
  .menu a { padding: 12px 14px; border-radius: var(--radius-control); }
  .menu-cta { text-align: center; margin-top: var(--gap-sm); }
}

/* Without script the toggle does nothing, so it should not be offered. */
@media (max-width: 760px) {
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .menu { max-height: none; visibility: visible; position: static; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(48px, 9vw, 110px) max(20px, 0px) clamp(36px, 6vw, 72px);
}
.kicker {
  margin: 0 0 18px; color: var(--gold);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
}
.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(34px, 6.4vw, 62px); line-height: 1.1;
}
.lede { max-width: 60ch; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--gap-lg); margin-top: var(--gap-3xl); }
.hero-note {
  margin-top: var(--gap-xl); padding: 12px 16px;
  border-left: 2px solid var(--gold); background: var(--panel);
  border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: 15px; color: var(--muted);
  max-width: 58ch;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: var(--radius-pill);
  background: var(--panel-raised); color: var(--ink);
  border: 1px solid var(--line); text-decoration: none;
  font: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: .06em; cursor: pointer;
}
.btn:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }
.btn--primary {
  background: var(--gold); color: var(--bg-1); border-color: transparent;
  box-shadow: 0 0 0 0 var(--gold-soft);
}
.btn--primary:hover { color: var(--bg-1); filter: brightness(1.08); }

/* --- Bands --------------------------------------------------------------- */

.band { padding: clamp(44px, 7vw, 86px) max(20px, calc((100vw - var(--wide)) / 2)); }
.band--alt { background: rgba(0, 0, 0, .18); border-block: 1px solid var(--line); }

.band-head { max-width: 62ch; margin-bottom: var(--gap-3xl); }
.band-head h2 { margin: 0 0 12px; font-size: clamp(26px, 3.6vw, 38px); }
.band-head p { color: var(--muted); margin: 0; }

/* --- Cards --------------------------------------------------------------- */

.cards { display: grid; gap: var(--gap-xl); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  padding: 26px; border-radius: var(--radius-card);
  background: var(--panel); border: 1px solid var(--line);
}
.card h3 { margin: 0 0 10px; font-size: 23px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card .btn { align-self: flex-start; margin-top: auto; }
.card-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); opacity: .85; }

/* --- Steps --------------------------------------------------------------- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap-xl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: step;
}
.steps li {
  padding: 26px; border-radius: var(--radius-card);
  background: var(--panel); border: 1px solid var(--line);
}
.step-n {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: var(--gap-lg);
  border-radius: 50%; border: 1px solid var(--gold);
  color: var(--gold); font-family: var(--display); font-size: 17px;
}
.steps h3 { margin: 0 0 8px; font-size: 21px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* --- Stages (read from the console) ------------------------------------- */

.stage-grid { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stage {
  padding: 22px; border-radius: var(--radius-card);
  background: var(--panel); border: 1px solid var(--line);
}
.stage-n { color: var(--gold); font-family: var(--display); font-size: 15px; letter-spacing: .1em; }
.stage h3 { margin: 6px 0 12px; font-size: 20px; }
.stage ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 14.5px; }
.stage li { margin: 4px 0; }

/* --- Status -------------------------------------------------------------- */

.status { display: grid; gap: var(--gap-xl); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.status-col {
  padding: 26px; border-radius: var(--radius-card);
  background: var(--panel); border: 1px solid var(--line);
}
.status-col h3 { margin: 0 0 14px; font-size: 21px; }
/* The honest column is marked, because a reader skimming two lists of bullets
   should not have to work out which one is the caveats. */
.status-col:last-child { border-left: 2px solid var(--gold); }
.status-col ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 15.5px; }
.status-col li { margin: 8px 0; }

/* --- Closing call and footer -------------------------------------------- */

.cta {
  max-width: 62ch; margin: 0 auto;
  padding: clamp(50px, 8vw, 96px) 20px; text-align: center;
}
.cta h2 { margin: 0 0 14px; font-size: clamp(26px, 3.6vw, 38px); }
.cta p { color: var(--muted); }

.foot {
  padding: 30px max(20px, calc((100vw - var(--wide)) / 2)) 50px;
  border-top: 1px solid var(--line);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--gap-xl); margin-bottom: var(--gap-lg); }
.foot nav a { font-size: 14.5px; }
.foot p { margin: 0; }