/* eQ-Assets portal — extracted from design/project/Portal Home.dc.html.
 *
 * The prototype carried 725 inline style="" attributes plus non-standard
 * style-hover / style-focus attributes that only its canvas runtime understood.
 * Everything is here instead, which is not only tidiness: it is what lets the
 * Go service send a strict Content-Security-Policy with no 'unsafe-inline'
 * (internal/server/server.go, defaultCSP). A portal that has to allow inline
 * script or style is a portal whose redirect targets are easier to rewrite.
 *
 * Mobile first. Breakpoints follow the four widths the design was signed off
 * at (PORTAL_DESIGN.md §9.5):
 *   base    390px  — single column, login card in the hero, contact as a sheet
 *   >=720   834px  — nav collapses into a right-hand drawer, login in the bar
 *   >=1024 1180px  — full nav, two-column hero, live register beside the copy
 *   >=1400 1440px  — content held to a 1280 measure, bands run full bleed
 */

:root {
  --bg: #0b0f17;
  --surface: #111827;
  --band: #0e1421;
  --band-hover: #131b2b;
  --raised: #1f2937;

  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);

  --ink: #f3f4f6;
  --ink-2: #e5e7eb;
  --ink-3: #d1d5db;
  --muted: #9ca3af;
  --muted-2: #6b7280;
  --muted-3: #4b5563;

  --blue: #60a5fa;
  --blue-solid: #2563eb;
  --blue-deep: #1d4ed8;
  --green: #34d399;
  --green-ink: #a7f3d0;
  --amber: #f59e0b;

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --pad: 18px;
  --measure: 100%;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* The design is dark throughout; telling the browser stops form controls and
     scrollbars rendering in their light-mode skins. */
  color-scheme: dark;
}

img { max-width: 100%; }

/* A single visible focus treatment everywhere (§9.5: "Keyboard focus is a 2px
   blue :focus-visible ring throughout"). :focus-visible rather than :focus so a
   mouse click does not leave a ring behind. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.spacer { flex: 1; }
.mono { font-family: var(--mono); }

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

/* The honeypot must be unreachable rather than merely invisible: display:none
   is skipped by some form fillers, so it is moved off-screen instead. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- bar ---- */

.bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 var(--pad);
  max-width: var(--measure);
  margin: 0 auto;
}

.bar-logo { height: 24px; width: 24px; flex: none; object-fit: contain; border-radius: 5px; }

.bar-name {
  font: 700 15px/1 var(--sans);
  color: var(--ink-2);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.bar-rev {
  display: none;
  font: 600 9px/1 var(--mono);
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  padding: 4px 6px;
  border-radius: 3px;
  letter-spacing: .08em;
}

.bar-nav { display: none; align-items: center; gap: 22px; }

.bar-nav a {
  font: 500 13px/1 var(--sans);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.bar-nav a:hover { color: var(--ink-2); }

.drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 19px;
}
.drawer-toggle:hover { color: var(--ink-2); background: rgba(255, 255, 255, .07); }

/* ------------------------------------------------------------- lookup ---- */

/* In the bar (>=720px) this is a horizontal strip; in the hero (mobile) it is
   the card from frame 2b. Same node either way — portal.js moves it. */
.lookup { position: relative; }

.lookup-label {
  display: block;
  font: 600 9.5px/1 var(--mono);
  color: var(--muted);
  letter-spacing: .12em;
  white-space: nowrap;
}

.lookup-field { display: flex; align-items: center; gap: 8px; }

.lookup-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 13px;
  font: 400 15px/1 var(--sans);
  color: var(--ink);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  outline: none;
}
.lookup-input::placeholder { color: var(--muted-2); }
.lookup-input:focus {
  border-color: rgba(99, 102, 241, .6);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .15);
}

.lookup-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  font: 600 15px/1 var(--sans);
  color: #fff;
  background: var(--blue-solid);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.lookup-go:hover { background: var(--blue-deep); }
.lookup-go[aria-busy="true"] { opacity: .6; cursor: default; }

.lookup-promise {
  font: 400 11.5px/1.5 var(--sans);
  color: var(--muted-2);
  margin: 12px 0 0;
}

/* Mobile: the whole thing is the hero login card of frame 2b. */
#lookup-slot-hero .lookup {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  padding: 18px;
  margin-top: 26px;
}
#lookup-slot-hero .lookup-field { flex-direction: column; align-items: stretch; gap: 9px; }
#lookup-slot-hero .lookup-label { margin-bottom: 10px; }
/* flex: none matters. Stacked, the field's main axis is vertical, so the
   `flex: 1` that makes the input fill the bar becomes flex-basis:0 on *height*
   and collapses it to its content — a 22px input instead of a 48px one. */
#lookup-slot-hero .lookup-input,
#lookup-slot-hero .lookup-go { flex: none; width: 100%; height: 48px; }

/* ------------------------------------------------------------ popover ---- */

.pop {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
.pop[hidden] { display: none; }

/* Only the state matching data-show is rendered. */
.pop .pop-body { display: none; gap: 11px; }
.pop[data-show="one"]   .pop-body[data-state="one"],
.pop[data-show="many"]  .pop-body[data-state="many"],
.pop[data-show="none"]  .pop-body[data-state="none"],
.pop[data-show="error"] .pop-body[data-state="error"] { display: flex; }
.pop .pop-body-block { display: none; flex-direction: column; gap: 0; }
.pop[data-show="many"] .pop-body[data-state="many"] { display: block; }

.pop[data-show="one"]   { border-color: rgba(52, 211, 153, .28); }
.pop[data-show="none"],
.pop[data-show="error"] { border-color: rgba(245, 158, 11, .28); }

.pop-icon { font-size: 16px; flex-shrink: 0; line-height: 1.2; }
.pop-icon-ok { color: var(--green); }
.pop-icon-warn { color: var(--amber); }

.pop-lead { font: 400 12.5px/1.5 var(--sans); color: var(--muted); margin: 0; text-wrap: pretty; }
.pop[data-show="one"] .pop-lead { color: var(--green-ink); }
.pop[data-show="one"] .pop-lead .mono { color: var(--ink-2); }

.pop-title { font: 600 13px/1.3 var(--sans); color: var(--ink-2); margin: 0 0 5px; }
.pop-note { font: 400 12px/1.55 var(--sans); color: var(--muted); margin: 6px 0 0; text-wrap: pretty; }
.pop-foot { font: 400 11.5px/1.5 var(--sans); color: var(--muted-2); margin: 12px 0 0; }

.pop-go {
  display: inline-block;
  margin-top: 10px;
  font: 600 12.5px/1 var(--sans);
  color: var(--blue);
  text-decoration: none;
}
.pop-go:hover { text-decoration: underline; }

.chooser { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.chooser-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  width: 100%;
  font: inherit;
}
.chooser-item:hover { background: rgba(59, 130, 246, .1); border-color: rgba(59, 130, 246, .4); }
.chooser-item > i { font-size: 15px; color: var(--blue); }
.chooser-item .chooser-body { flex: 1; min-width: 0; }
.chooser-item strong { display: block; font: 600 13px/1.3 var(--sans); color: var(--ink-2); margin-bottom: 3px; }
.chooser-item em { display: block; font: 400 11px/1.3 var(--mono); color: var(--muted-2); font-style: normal; overflow-wrap: anywhere; }
.chooser-item .chev { font-size: 13px; color: var(--muted-2); }

/* --------------------------------------------------------------- hero ---- */

.hero {
  padding: 36px var(--pad) 40px;
  background: radial-gradient(600px 300px at 20% -10%, rgba(59, 130, 246, .16), transparent 70%), var(--bg);
}
.hero-inner { max-width: var(--measure); margin: 0 auto; }

.eyebrow {
  font: 600 9.5px/1 var(--mono);
  color: var(--blue);
  letter-spacing: .16em;
  margin: 0 0 16px;
}

.hero h1 {
  font: 700 33px/1.1 var(--sans);
  color: var(--ink);
  letter-spacing: -.025em;
  margin: 0 0 14px;
  text-wrap: pretty;
}

.lead {
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

.scan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  margin-top: 10px;
  font: 600 14.5px/1 var(--sans);
  color: var(--blue);
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .3);
  border-radius: 5px;
  cursor: pointer;
}
.scan-btn i { font-size: 16px; }

/* ------------------------------------------------------ live register ---- */

/* Absent from the 390px design, so hidden rather than reflowed. */
.live { display: none; }

.live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}

.live-title { font: 600 11px/1 var(--mono); color: var(--muted); letter-spacing: .1em; }

/* The advert rate, sitting just before the pill. margin-left:auto rather than
   relying on the header's space-between: with three children that would spread
   them evenly and float the rate into the middle of the bar. This keeps the
   title left and the rate+pill together on the right.

   tabular-nums matters more than it looks. The value changes every ten seconds,
   and proportional digits make it twitch sideways on each update — motion the
   eye catches in peripheral vision while reading the hero copy beside it. */
.live-rate {
  margin-left: auto;
  margin-right: 8px;
  font: 500 10px/1 var(--mono);
  color: var(--muted-2);
  letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.live-rate:empty { margin-right: 0; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--mono);
  color: var(--green);
  background: rgba(52, 211, 153, .12);
  padding: 5px 7px;
  border-radius: 3px;
  letter-spacing: .06em;
}
/* The dot only pulses while the stream is actually connected. A badge that says
   STREAMING over a dead connection is the kind of small lie that makes people
   stop believing the rest of the page. */
.live-pill[data-connected="true"] { animation: pulse 2.4s ease-in-out infinite; }
.live-pill[data-connected="false"] { color: var(--muted-2); background: rgba(255, 255, 255, .06); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.live-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: none;
}

.live-stat { background: var(--surface); padding: 20px 18px; }
.live-num {
  font: 700 34px/1 var(--sans);
  color: var(--ink);
  letter-spacing: -.03em;
  margin: 0 0 7px;
  /* Tabular figures stop the counters jittering sideways as digits change. */
  font-variant-numeric: tabular-nums;
}
.live-num-ok { color: var(--green); }
.live-cap { font: 500 11.5px/1 var(--sans); color: var(--muted); margin: 0; }

.live-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: none;
}

.live-row { display: flex; align-items: center; gap: 12px; background: var(--surface); padding: 12px 16px; }
.live-row > i { font-size: 14px; color: var(--blue); }
.live-row.is-stale > i { color: var(--amber); }
.live-row .live-name { flex: 1; min-width: 0; font: 500 12.5px/1 var(--sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Truncates, like .live-name above it. Without min-width:0 a nowrap flex item's
   minimum size is its full text, so a long "Site · Area · Zone" string cannot
   shrink — it widens the row, then the card, then the hero's grid column, and
   the headline beside it reflows to whatever the demo's longest location
   happened to be. See the minmax(0,…) note on .hero-inner: both halves are
   needed, or the card stops resizing and overflows instead.

   max-width keeps the asset name the priority when both are long. The full
   value stays available via the title attribute portal.js sets. */
.live-row .live-where {
  font: 400 11.5px/1 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-row .live-age { font: 400 11px/1 var(--mono); color: var(--muted-2); white-space: nowrap; }

.live-foot { font: 400 10.5px/1.4 var(--mono); color: var(--muted-3); margin: 8px 0 0; }
.live-foot a { color: var(--blue); text-decoration: none; }
.live-foot a:hover { text-decoration: underline; }
.live-foot .mono { color: var(--muted); }

/* --------------------------------------------------------- band, grid ---- */

.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-inner { padding: 34px var(--pad); max-width: var(--measure); margin: 0 auto; }
.band-text { font: 400 17px/1.55 var(--sans); color: var(--ink-3); margin: 0; text-wrap: pretty; }

.section { border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.section-inner { padding: 40px var(--pad) 44px; max-width: var(--measure); margin: 0 auto; }

.rule { display: flex; align-items: baseline; gap: 16px; margin: 0 0 24px; }
.rule h2 { font: 700 12px/1 var(--mono); color: var(--blue); letter-spacing: .14em; margin: 0; white-space: nowrap; }
.rule-line { flex: 1; height: 1px; background: rgba(255, 255, 255, .09); }
.rule > p { display: none; font: 400 13px/1 var(--sans); color: var(--muted-2); margin: 0; white-space: nowrap; }

.grid-6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card { background: var(--band); padding: 24px 18px 26px; }
.card:hover { background: var(--band-hover); }
.card > i { font-size: 18px; color: var(--blue); }
.card h3 { font: 600 15.5px/1.25 var(--sans); color: var(--ink); letter-spacing: -.01em; margin: 14px 0 8px; }
.card p { font: 400 13px/1.6 var(--sans); color: var(--muted); margin: 0; text-wrap: pretty; }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }

.step { padding-top: 18px; }
.step-1 { border-top: 2px solid var(--blue-solid); }
.step-2 { border-top: 2px solid rgba(37, 99, 235, .5); }
.step-3 { border-top: 2px solid rgba(37, 99, 235, .25); }
.step-num { font: 600 11px/1 var(--mono); color: var(--blue); letter-spacing: .1em; margin: 0 0 12px; }
.step h3 { font: 600 18px/1.3 var(--sans); color: var(--ink); letter-spacing: -.015em; margin: 0 0 10px; text-wrap: pretty; }
.step p { font: 400 13.5px/1.65 var(--sans); color: var(--muted); margin: 0; text-wrap: pretty; }

/* ---------------------------------------------------------------- cta ---- */

.cta { background: var(--surface); border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.cta-inner { padding: 36px var(--pad) 40px; max-width: var(--measure); margin: 0 auto; }
.cta-copy h2 { font: 600 21px/1.25 var(--sans); color: var(--ink); letter-spacing: -.02em; margin: 0 0 10px; text-wrap: pretty; }
.cta-copy > p { font: 400 14px/1.6 var(--sans); color: var(--muted); margin: 0 0 20px; text-wrap: pretty; }

.btn-light,
.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  width: 100%;
  padding: 0 22px;
  font: 600 14.5px/1 var(--sans);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn-light { color: var(--bg); background: var(--ink-2); }
.btn-light:hover { background: #fff; }
.btn-blue { color: #fff; background: var(--blue-solid); }
.btn-blue:hover { background: var(--blue-deep); }
.btn-blue[aria-busy="true"] { opacity: .6; cursor: default; }

/* --------------------------------------------------------------- foot ---- */

.foot { background: var(--bg); border-top: 1px solid var(--line); }
.foot-inner { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 32px var(--pad) 34px; max-width: var(--measure); margin: 0 auto; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot-brand img { height: 22px; width: 22px; object-fit: contain; border-radius: 4px; }
.foot-brand span { font: 700 14px/1 var(--sans); color: var(--muted); }
.foot-head { font: 600 10px/1 var(--mono); color: var(--muted-2); letter-spacing: .12em; margin: 0 0 11px; }
.foot-host { display: block; font: 400 12.5px/1 var(--mono); color: var(--muted); }
.foot-fine { font: 400 11.5px/1.5 var(--sans); color: var(--muted-3); margin: 9px 0 0; }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a { font: 400 12.5px/1 var(--sans); color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--blue); }

/* ------------------------------------------------------ drawer, sheet ---- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 8, 13, .66);
  border: 0;
  padding: 0;
}
.scrim[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 70;
  width: min(340px, 88vw);
  padding: 26px 24px 24px;
  background: var(--surface);
  border-left: 1px solid rgba(255, 255, 255, .09);
  box-shadow: -20px 0 44px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }

.drawer-head { font: 600 10px/1 var(--mono); color: var(--muted-2); letter-spacing: .12em; margin: 0 0 6px; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a,
.drawer-scan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
}
.drawer-links a:hover,
.drawer-scan:hover { background: rgba(59, 130, 246, .08); }
.drawer-links > * > i:first-child,
.drawer-scan > i:first-child { font-size: 17px; color: var(--blue); width: 20px; }
.drawer-links span,
.drawer-scan span { flex: 1; }
.drawer-links strong,
.drawer-scan strong { display: block; font: 600 15px/1.2 var(--sans); color: var(--ink-2); margin-bottom: 4px; }
.drawer-links em,
.drawer-scan em { display: block; font: 400 12px/1.4 var(--sans); color: var(--muted-2); font-style: normal; }
.drawer .chev { font-size: 13px; color: var(--muted-3); }
.drawer-direct { padding-top: 20px; border-top: 1px solid var(--line); }

/* Bottom sheet at 390px; centred dialog from 720px up. */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px var(--pad) 24px;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
}
.sheet[hidden] { display: none; }

.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; }
.sheet-head > div { flex: 1; }
.sheet-title { font: 600 19px/1.25 var(--sans); color: var(--ink); letter-spacing: -.02em; margin: 0; }

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.sheet-close:hover { color: var(--ink-2); background: rgba(255, 255, 255, .13); }

.field-pair { display: grid; grid-template-columns: 1fr; gap: 12px; }
.field-pair label,
.field-detail { display: flex; flex-direction: column; gap: 6px; }
.field-detail { margin-top: 12px; }
.field-pair span,
.field-detail > span { font: 600 9.5px/1 var(--mono); color: var(--muted); letter-spacing: .12em; }

.sheet input[type="text"],
.sheet input[type="email"],
.sheet textarea {
  padding: 0 12px;
  height: 44px;
  font: 400 14px/1 var(--sans);
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  outline: none;
  width: 100%;
}
.sheet textarea { height: auto; padding: 11px 12px; line-height: 1.5; resize: vertical; }
.sheet input:focus,
.sheet textarea:focus {
  border-color: rgba(99, 102, 241, .7);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .15);
}
.sheet input[aria-invalid="true"],
.sheet textarea[aria-invalid="true"] { border-color: rgba(245, 158, 11, .6); }

.sheet-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.sheet-fine { font: 400 11.5px/1.5 var(--sans); color: var(--muted-2); margin: 0; text-wrap: pretty; }

.form-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 6px;
  font: 400 12.5px/1.4 var(--sans);
}
.form-note[hidden] { display: none; }
.form-note i { font-size: 15px; flex: none; }
.form-note-ok { background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .28); color: var(--green-ink); }
.form-note-ok i { color: var(--green); }
.form-note-bad { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .28); color: #fde68a; }
.form-note-bad i { color: var(--amber); }

/* ------------------------------------------------- entrance animation ---- */

/* §9.5: "Cards fade and rise 14px on load, staggered ~60ms." Applied by
   portal.js adding .reveal-ready, so a page without JS is not left invisible. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .55s cubic-bezier(.22, .72, .2, 1) both;
  animation-delay: var(--rise-delay, 0ms);
}

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; animation: none; }
  .live-pill[data-connected="true"] { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   >= 720px — the 834px tablet frame. Nav still collapses to the drawer, but
   the lookup returns to the bar (§9.5).
   ========================================================================== */

@media (min-width: 720px) {
  :root { --pad: 24px; }

  .bar-inner { height: 58px; gap: 12px; }
  .bar-logo { height: 26px; width: 26px; }
  .bar-name { font-size: 16px; }

  .lookup { display: flex; align-items: center; gap: 8px; }
  .lookup-label { display: none; }
  .lookup-field { gap: 8px; }
  .lookup-input { width: 186px; flex: none; height: 34px; font-size: 13px; padding: 0 11px; }
  .lookup-go { height: 34px; width: 34px; padding: 0; }
  .lookup-go-text { display: none; }
  /* The promise line has no room in the bar; it moves into the popover, where
     the resolved state repeats it (§9.2). */
  .lookup-promise { display: none; }

  .pop { left: auto; right: 0; width: 340px; top: calc(100% + 8px); }
  #lookup-slot-bar { position: relative; }

  .hero { padding: 52px var(--pad) 46px; background: radial-gradient(760px 380px at 10% -10%, rgba(59, 130, 246, .14), transparent 70%), var(--bg); }
  .hero h1 { font: 700 40px/1.08 var(--sans); letter-spacing: -.028em; margin-bottom: 16px; }
  .lead { font-size: 16px; }
  .scan-btn { display: none; }

  .live { display: block; margin-top: 32px; }

  .band-inner { padding: 40px var(--pad); }
  .band-text { font-size: 19px; }

  .section-inner { padding: 52px var(--pad) 56px; }
  .rule > p { display: block; }
  .grid-6 { grid-template-columns: 1fr 1fr; }
  .card { padding: 26px 22px 28px; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 26px; }

  .cta-inner { padding: 44px var(--pad); }
  .cta-copy h2 { font-size: 23px; }
  .btn-light, .btn-blue { width: auto; }

  .foot-inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding: 40px var(--pad) 34px; }

  /* From here up the enquiry form is a centred dialog, not a bottom sheet. */
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 48px));
    padding: 26px 28px 24px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .6);
  }
  .sheet-title { font-size: 21px; }
  .field-pair { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sheet-actions { flex-direction: row; align-items: center; gap: 16px; }
  .sheet input[type="text"], .sheet input[type="email"] { height: 42px; }
}

/* ==========================================================================
   >= 1024px — the 1180px desktop frame. Full nav, two-column hero.
   ========================================================================== */

@media (min-width: 1024px) {
  :root { --pad: 34px; }

  .bar-inner { height: 60px; gap: 14px; }
  .bar-logo { height: 28px; width: 28px; }
  .bar-name { font-size: 17px; }
  .bar-rev { display: inline-block; }
  .bar-nav { display: flex; }
  .drawer-toggle { display: none; }

  #lookup-slot-bar {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, .1);
  }
  .lookup-label { display: block; font-size: 10px; color: var(--muted-2); margin-right: 8px; }
  .lookup-input { width: 196px; }

  .hero {
    padding: 64px var(--pad) 60px;
    background: radial-gradient(1100px 460px at 8% -10%, rgba(59, 130, 246, .14), transparent 70%), var(--bg);
  }
  /* minmax(0, …) rather than a bare fr. A bare 1fr is minmax(auto, 1fr), whose
     auto floor is the item's min-content width — so a grid item that cannot
     shrink overrides its declared share and takes width from the other column.
     The live register is fed by a live instance, so its longest sighting string
     is not something this page controls: without this, an asset in a
     long-named zone silently renarrows the headline column beside it. */
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
  .hero h1 { font: 700 52px/1.06 var(--sans); letter-spacing: -.028em; margin-bottom: 20px; }
  .lead { font-size: 17px; max-width: 520px; }

  .live { margin-top: 6px; }

  .band-inner { padding: 46px var(--pad); }
  .band-text { font-size: 20px; padding: 0 17px; }

  .section-inner { padding: 64px var(--pad) 68px; }
  .rule { margin-bottom: 32px; }
  .rule h2 { font-size: 13px; }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 30px 26px 32px; }
  .card > i { font-size: 20px; }
  .card h3 { font-size: 17px; margin: 18px 0 10px; }
  .card p { font-size: 13.5px; }
  .grid-3 { gap: 34px; }
  .step { padding-top: 22px; }
  .step h3 { font-size: 20px; }

  .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px var(--pad); }
  .cta-copy { max-width: 560px; }
  .cta-copy h2 { font-size: 26px; }
  .cta-copy > p { margin-bottom: 0; }

  .foot-inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding: 48px var(--pad) 40px; }

  .sheet { width: 560px; }
}

/* ==========================================================================
   >= 1400px — the 1440px frame: "content held to a 1280 measure, the bar and
   the pitch bands run full bleed" (§9.5). Only the measure and a little type
   scale change; the layout is the 1180 one.
   ========================================================================== */

@media (min-width: 1400px) {
  :root { --pad: 40px; --measure: 1280px; }

  .bar-inner { height: 64px; }
  .bar-nav { gap: 24px; }
  .lookup-input { width: 210px; }

  .hero { padding: 0; background: radial-gradient(1300px 520px at 12% -10%, rgba(59, 130, 246, .14), transparent 70%), var(--bg); }
  .hero-inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 64px; padding: 80px var(--pad) 76px; }
  .hero-copy { align-self: center; }
  .hero h1 { font-size: 60px; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 22px; }
  .lead { font-size: 17.5px; max-width: 540px; }

  .band-inner { padding: 52px var(--pad); }
  .band-text { font-size: 24px; max-width: 1000px; padding: 0; }

  .section-inner { padding: 72px var(--pad) 76px; }
  .cta-inner { padding: 60px var(--pad); gap: 48px; }
  .cta-copy { max-width: 600px; }
  .cta-copy h2 { font-size: 28px; }
  .foot-inner { padding: 52px var(--pad) 44px; }
}