/* ==========================================================================
   Beyond Digital Labs design system: "THE SEAL"

   The brand mark is a struck circular seal: a gold ring, engraved lettering
   around the circumference, a flame at the centre. The whole interface is built
   from that geometry.

   ---------------------------------------------------------------------------
   HARD RULE: NO BRICKS (owner mandate 2026-08-17, absolute)
   ---------------------------------------------------------------------------
   Forbidden, permanently:
     · filled rounded-rectangle buttons
     · grids of rounded-rectangle cards
     · boxed stat strips, boxed alerts, pill badges

   Structure comes from HAIRLINE RULES, TYPOGRAPHY, NUMBERED INDEXES and NEGATIVE
   SPACE. `border-radius` is permitted ONLY as 50% / 999px, and only on genuinely
   circular elements (rings, seals, the flame glyph). verification.ps1 fails the
   build if any other radius appears in this file.

   Palette sampled from the mark: gold #A98E5D · black #151518 · white #FFFFFF
   ========================================================================== */

:root {
  --gold: #a98e5d;
  --gold-bright: #d3b578;
  --gold-pale: #e6d5ac;
  --gold-deep: #6f5c3a;

  --ink: #08080a;
  --ink-raised: #0f0f12;
  --ink-plate: #131316;

  --text: #f2f1ee;
  --text-dim: #bcb8ae;
  --text-faint: #85817a;

  /* Hairlines. Structure is drawn with these, never with boxes. */
  --rule: rgba(233, 228, 216, 0.11);
  --rule-strong: rgba(233, 228, 216, 0.2);
  --rule-gold: rgba(169, 142, 93, 0.42);
  --rule-gold-faint: rgba(169, 142, 93, 0.16);

  --ok: #6fae86;
  --beta: #9f88c9;
  --wip: #6f92c0;

  --page: 1220px;
  --narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --sans: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, "SF Mono", "JetBrains Mono", monospace;

  /* Engraved label: the circumference lettering of the seal, flattened. */
  --track-label: 0.22em;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  /* The concentric ring field is drawn by `.tunnel`, in motion. It is not a
     static gradient with something animated on top of it. There is one ring
     system on this site and it travels. */
}

/* ------------------------------------------------------------ the tunnel */

/* THE background circular design, not a second layer over a static one.
   A new hairline ring is born at the centre, grows, and passes off the edge of
   the screen, so the page reads as travelling forward down a tunnel.

   Twelve rings on a thirty-six-second journey = one birth every three seconds.
   Deliberately slow: the mark's own ring turns on a 28s cycle, so the background
   moves in the same unhurried tempo rather than competing with it. The timing
   function accelerates outward, which is what gives it perspective, because a ring
   covers little ground near the centre and travels faster as it nears the edge.

   Ring count and cycle length are paired. Change one and the spacing changes,
   so change both, and update the delays below and the test that guards them.

   Animated with `scale` and `opacity` only, so the work stays on the compositor
   and never repaints the page. `position: fixed` keeps it out of the document's
   scrollable area, which the responsive suite verifies at every width. */
.tunnel {
  position: fixed;
  /* Measured and set by app.js to the exact centre of the page's mark. The
     percentages are only the no-JavaScript fallback. */
  left: var(--tunnel-x, 50%);
  top: var(--tunnel-y, 50%);
  translate: -50% -50%;
  width: min(165vw, 1900px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.tunnel span {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  scale: 0.015;
  animation: tunnel-travel 36s cubic-bezier(0.45, 0, 0.75, 0.4) infinite;
  will-change: scale, opacity;
}

/* Negative delays so the field is already full at the first paint, rather than
   filling in from an empty screen over the first cycle. */
.tunnel span:nth-child(1) {
  animation-delay: 0s;
}
.tunnel span:nth-child(2) {
  animation-delay: -3s;
}
.tunnel span:nth-child(3) {
  animation-delay: -6s;
}
.tunnel span:nth-child(4) {
  animation-delay: -9s;
}
.tunnel span:nth-child(5) {
  animation-delay: -12s;
}
.tunnel span:nth-child(6) {
  animation-delay: -15s;
}
.tunnel span:nth-child(7) {
  animation-delay: -18s;
}
.tunnel span:nth-child(8) {
  animation-delay: -21s;
}
.tunnel span:nth-child(9) {
  animation-delay: -24s;
}
.tunnel span:nth-child(10) {
  animation-delay: -27s;
}
.tunnel span:nth-child(11) {
  animation-delay: -30s;
}
.tunnel span:nth-child(12) {
  animation-delay: -33s;
}

@keyframes tunnel-travel {
  0% {
    scale: 0.015;
    opacity: 0;
  }
  6% {
    opacity: 0.62;
  }
  62% {
    opacity: 0.3;
  }
  100% {
    scale: 1.3;
    opacity: 0;
  }
}

/* ---- where the rings come from ----
   app.js measures the mark and writes --tunnel-x / --tunnel-y, so the origin is
   the true centre of the logo rather than a guessed percentage. A hardcoded
   72%/40% was visibly off, because the seal sits wherever the grid puts it.

   These classes are only the no-JavaScript fallback: a sensible starting point
   that never claims to be exact. */
.tunnel-hero {
  --tunnel-x: 70%;
  --tunnel-y: 42%;
}

@media (max-width: 939px) {
  /* The seal stacks under the copy at this width. */
  .tunnel-hero {
    --tunnel-x: 50%;
    --tunnel-y: 48%;
  }
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 4px;
}

::selection {
  background: rgba(169, 142, 93, 0.35);
  color: #fff;
}

/* ------------------------------------------------------------------- type */

h1,
h2,
h3,
h4 {
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 1.1rem + 6vw, 5.75rem);
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.1rem);
  letter-spacing: -0.04em;
}
h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  letter-spacing: -0.02em;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

/* The engraved label. Used for every eyebrow, status, action and column head,
   it is the typographic echo of the lettering around the seal. */
.label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

.label-dim {
  color: var(--text-faint);
}

.lede {
  font-size: clamp(1.06rem, 0.99rem + 0.35vw, 1.28rem);
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 56ch;
  font-weight: 400;
}

.muted {
  color: var(--text-dim);
}
.faint {
  color: var(--text-faint);
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.86em;
}

/* ----------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: var(--narrow);
}

main {
  flex: 1;
}

section {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}

/* Section boundary: a hairline interrupted by a small ring. The ornament is the
   seal reduced to its essential shape. */
.divider {
  border: 0;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: visible;
}

.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  background: var(--ink);
}

/* --------------------------------------------------------------- the seal */

/* The mark. Sizes are named here rather than passed inline, so every scale the
   brand is allowed to appear at is declared in one place. */
.seal {
  width: var(--seal, 128px);
  height: var(--seal, 128px);
  border-radius: 50%;
  flex: none;
}

/* Owner directive 2026-08-17: the mark is 150px. The masthead is sized around
   the logo rather than the logo being squeezed to fit a header. */
.seal-brand {
  --seal: 150px;
}
.seal-sm {
  --seal: clamp(130px, 18vw, 180px);
}
.seal-md {
  --seal: clamp(150px, 22vw, 230px);
}
.seal-lg {
  --seal: clamp(170px, 24vw, 260px);
}
.seal-hero {
  --seal: clamp(190px, 28vw, 330px);
}

/* The seal's container. Deliberately has NO rings of its own.
   It previously drew two static pseudo-element rings around the mark. That put a
   second ring system on the page beside the travelling one and read as a stray
   circle hugging the logo. There is ONE ring system on this site: the tunnel,
   which app.js centres on this element. Do not add rings here again. */
.seal-field {
  position: relative;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------------- actions */

/* An action is engraved text with a rule beneath it that extends on approach.
   It is never a filled shape. */
.action {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color 0.25s var(--ease);
}

.action::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left;
  transition: background 0.25s var(--ease);
}

.action::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold-bright);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.4s var(--ease);
}

.action:hover,
.action:focus-visible {
  color: var(--gold-pale);
}

.action:hover::after,
.action:focus-visible::after {
  scale: 1 1;
}

.action .arrow {
  display: inline-block;
  transition: translate 0.3s var(--ease);
}

.action:hover .arrow {
  translate: 5px 0;
}

.action-gold {
  color: var(--gold-bright);
}

.action[aria-disabled="true"] {
  color: var(--text-faint);
  cursor: not-allowed;
}
.action[aria-disabled="true"]::after {
  display: none;
}

/* The ring control, the seal reduced to an interactive element. Circular by
   definition, which is the only permitted use of a radius. */
.ring-action {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
}

.ring-action .ring {
  width: 62px;
  height: 62px;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.ring-action .ring::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color 0.35s var(--ease), inset 0.35s var(--ease);
}

.ring-action .ring svg {
  width: 19px;
  height: 19px;
  stroke: var(--gold-bright);
  fill: none;
  stroke-width: 1.25;
  transition: translate 0.35s var(--ease);
}

.ring-action:hover .ring,
.ring-action:focus-visible .ring {
  border-color: var(--gold-bright);
  background: rgba(169, 142, 93, 0.07);
}

.ring-action:hover .ring::before {
  border-color: var(--rule-gold-faint);
  inset: -11px;
}

.ring-action:hover .ring svg {
  translate: 3px 0;
}

.ring-action .ring-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: left;
}

.ring-action .ring-sub {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 400;
  margin-top: 0.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* ------------------------------------------------------------------ marks */

/* Status is engraved text preceded by a dot, never a pill. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.mark::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.mark-available {
  color: var(--ok);
}
.mark-ready {
  color: var(--gold-bright);
}
.mark-beta {
  color: var(--beta);
}
.mark-building {
  color: var(--wip);
}
.mark-planned {
  color: var(--text-faint);
}

/* Specification chips are set as plain engraved text separated by rules. */
.spec-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  list-style: none;
  padding: 0;
}

.spec-list li {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.spec-list li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  background: var(--rule-strong);
}

/* ------------------------------------------------------------------ glyph */

/* Product glyph: a hairline ring with the icon inside. Circular, echoing the
   seal. Never a filled tile. */
.glyph {
  width: var(--g, 44px);
  height: var(--g, 44px);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color 0.3s var(--ease);
}

.glyph svg {
  width: calc(var(--g, 44px) * 0.45);
  height: calc(var(--g, 44px) * 0.45);
  stroke: hsl(var(--h, 42) 48% 68%);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph-lg {
  --g: 84px;
}

/* ------------------------------------------------------------------ index */

/* The catalog is an engraved index, not a grid of cards. Numbered entries
   separated by hairlines. */
.index {
  border-top: 1px solid var(--rule);
}

.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.35s var(--ease);
}

.entry::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(169, 142, 93, 0.06), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.entry:hover::before,
.entry:focus-visible::before {
  opacity: 1;
}

.entry:hover .glyph {
  border-color: var(--rule-gold);
}

.entry:hover .entry-name {
  color: var(--gold-pale);
}

.entry-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  align-self: start;
  padding-top: 0.9rem;
  min-width: 2ch;
}

.entry-main {
  display: grid;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 860px) {
  .entry-main {
    grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr) auto;
    gap: 1.75rem;
  }
}

.entry-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* Both are <span> inside an anchor (an <a> may not contain block-level flow
   content here), so they must be told to occupy their own line, otherwise the
   category runs on after the name. */
.entry-name {
  display: block;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}

.entry-cat {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.35rem;
}

.entry-line {
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 400;
  min-width: 0;
}

.entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .entry-meta {
    justify-content: flex-end;
    min-width: 15rem;
  }
}

.entry-version {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------- figures */

/* Statistics set as figures divided by hairlines. No box, no fill. */
.figures {
  display: grid;
  gap: 2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 2rem;
}

@media (min-width: 720px) {
  .figures {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
  }
  .figures > * + * {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
  }
}

.figure dt {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}

.figure dd {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.figure dd .unit {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 0.3rem;
}

/* ------------------------------------------------------------------ notes */

/* A note is a marginal annotation: a gold hairline on the left, an engraved
   label, then the text. It is never an alert box. */
.note {
  border-left: 1px solid var(--rule-gold);
  padding-left: clamp(1.1rem, 3vw, 1.9rem);
  display: grid;
  gap: 0.6rem;
  max-width: 78ch;
}

.note-body {
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text-dim);
  font-weight: 400;
}

.note-body strong {
  color: var(--gold-pale);
  font-weight: 500;
}

.note-plain {
  border-left-color: var(--rule-strong);
}
.note-plain .note-body strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- origin */

/* The reason the product exists, set larger and lighter than body copy, because it is
   the most persuasive thing on a product page, so it is given the weight of a
   statement rather than buried in a feature list. */
.origin {
  border-left: 1px solid var(--gold);
  padding-left: clamp(1.4rem, 4vw, 2.75rem);
  max-width: 64ch;
  display: grid;
  gap: 1.1rem;
}

.origin p {
  font-size: clamp(1.04rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  font-weight: 400;
}

/* The opening line carries the setup, so it is given full text colour. The
   complaints below it are the part a reader recognises themselves in, which is
   why they are broken out rather than buried in a paragraph. */
.origin-lead {
  color: var(--text);
}

/* The canonical bullet list for the whole site.
   Use this anywhere a list of points is needed. Putting `.prose` on a <ul>
   directly does NOT work: `.prose ul` needs a descendant, so `list-style: none`
   never applies while `.prose li::before` still draws the ring, and every item
   renders two markers. That shipped once. Use `.points`. */
.points,
.origin-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.points li,
.origin-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-dim);
  font-weight: 400;
}

/* A small ring, the seal reduced to a bullet. */
.points li::before,
.origin-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

/* Safety net, so the double marker cannot come back if `.prose` is ever put on
   a list element again. */
ul.prose,
ol.prose {
  list-style: none;
  padding-left: 0;
}

/* No `::first-line` brightening on the body copy. It split a long paragraph
   into two tones partway through a sentence, which made the story harder to
   read rather than more inviting. */

/* --------------------------------------------------------------- columns */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 820px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 820px) and (max-width: 979px) {
  .cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* An article is a titled block separated by a rule above. No card. */
.article {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.article-title {
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.article-body {
  color: var(--text-dim);
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.68;
}

/* A one line summary directly under an article heading, before the body copy.
   Named `lead-line`, never `card-*`: there are no cards on this site, and the
   NO BRICKS gate rejects the prefix outright. */
.lead-line {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.article-gold {
  border-top-color: var(--rule-gold);
}

/* --------------------------------------------------------------- heading */

.head {
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.head-wide {
  max-width: none;
}

/* ------------------------------------------------------------------ plate */

/* A specification plate: engraved rows separated by hairlines. Replaces the
   bordered table wherever the data is a simple list of facts. */
.plate {
  border-top: 1px solid var(--rule);
}

.plate-row {
  display: grid;
  gap: 0.4rem 2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

@media (min-width: 680px) {
  .plate-row {
    grid-template-columns: minmax(9rem, 22%) minmax(0, 1fr);
  }
  .plate-row-3 {
    grid-template-columns: minmax(9rem, 22%) minmax(7rem, 18%) minmax(0, 1fr);
  }
}

/* FAQ entries. One question, one self-contained answer, separated by hairlines
   so an assistant lifting a single pair still lifts something complete. */
.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 0.6rem;
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-q {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}

.faq-a {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  max-width: 68ch;
}

.plate-key {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.plate-val {
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 400;
  min-width: 0;
}

.plate-val strong {
  color: var(--text);
  font-weight: 500;
}

/* ------------------------------------------------------------------ steps */

.steps {
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  padding-top: 0.35rem;
}

.step-body {
  display: grid;
  gap: 0.6rem;
}

.step-body p {
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 400;
  max-width: 64ch;
}

/* -------------------------------------------------------------- monospace */

pre.code {
  border-left: 1px solid var(--rule-gold);
  padding: 0.4rem 0 0.4rem clamp(1.1rem, 3vw, 1.9rem);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--text-dim);
}

pre.code .c {
  color: var(--text-faint);
}
pre.code .g {
  color: var(--gold-bright);
}

.hash {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  word-break: break-all;
}

.copy-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.copy-btn {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  padding: 0.1rem 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-faint);
  flex: none;
}

.copy-btn:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

/* ----------------------------------------------------------------- header */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: #000;
  padding: 0.8rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--rule);
}

.masthead > .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 178px;
  padding-block: 0.75rem;
}

/* The logo is the largest element in the masthead. It is never smaller than a
   control beside it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

/* Size comes from `.seal-brand` alone. This rule previously set 54px and, being
   the more specific selector, silently overrode it, so the mark stayed small no
   matter what the size class said. Motion only here. */
.brand .seal {
  transition: rotate 1.2s var(--ease);
}

.brand:hover .seal {
  rotate: 22deg;
}

/* More air between "Beyond" and "Digital Labs", per the owner. They read as two
   parts of one name rather than a stacked pair. */
.brand-word {
  display: grid;
  gap: 0.62rem;
  line-height: 1;
}

.brand-word b {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-word span {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

@media (max-width: 640px) {
  .brand .seal {
    --seal: 96px;
  }
  .masthead > .wrap {
    min-height: 124px;
  }
  .brand-word b {
    font-size: 1.2rem;
  }
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  margin-left: auto;
}

.nav a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block: 0.4rem;
  position: relative;
  transition: color 0.25s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  scale: 1 1;
}

/* No divider rule here. A vertical border on the left plus the action's own
   underline read as two edges of a box, which is exactly the brick shape this
   design does not use. The control stands on its own. */
.masthead-end {
  display: none;
  align-items: center;
  gap: 1.5rem;
  padding-left: 1.6rem;
}

/* Sign in is the only persistent control in the masthead, so its underline is
   gold and always present rather than appearing on hover. It should be obvious
   that it is a control without being a filled shape. */
.masthead-end .action {
  color: var(--gold-pale);
}

.masthead-end .action::before {
  background: var(--gold);
  height: 2px;
}

.masthead-end .action::after {
  background: var(--gold-bright);
  height: 2px;
}

.masthead-end .action:hover {
  color: #fff;
}

/* 1140px, not 1000px. At seven nav items the 150px mark, the wordmark, the nav
   and Sign in together overflowed a 1024px viewport on every page. Below this
   width the drawer handles navigation instead. */
@media (min-width: 1140px) {
  .nav,
  .masthead-end {
    display: flex;
  }
}

.menu-toggle {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}

.menu-toggle:hover {
  border-color: var(--rule-gold);
}

.menu-toggle svg {
  width: 17px;
  height: 17px;
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 1.3;
}

@media (min-width: 1140px) {
  .menu-toggle {
    display: none;
  }
}

.drawer {
  display: grid;
  padding: 0.5rem var(--gutter) 2rem;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-raised);
}

.drawer[hidden] {
  display: none;
}

.drawer a {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.drawer a:hover {
  color: var(--gold-bright);
}

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

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
}

.hero-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 940px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.hero-copy {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.1rem);
  justify-items: start;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold-bright);
}

/* The mark, at the scale it deserves. */
.hero-seal {
  --seal: clamp(200px, 30vw, 330px);
  justify-self: center;
}

/* ----------------------------------------------------------------- footer */

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: auto;
  padding-block: clamp(3rem, 5vw, 4.5rem) 2.25rem;
}

.colophon-grid {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 760px) {
  .colophon-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 3rem;
  }
}

.colophon h4 {
  font-size: 0.62rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.colophon nav a {
  display: block;
  padding: 0.32rem 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  font-weight: 400;
  transition: color 0.25s var(--ease);
}

.colophon nav a:hover {
  color: var(--gold-pale);
}

.colophon-note {
  font-size: 0.88rem;
  color: var(--text-faint);
  max-width: 32ch;
  font-weight: 400;
  margin-top: 1.1rem;
}

/* The security line. Deliberately quiet: small, dim, and it does not announce
   itself. People who care will read it, everyone else will not notice. */
.colophon-security {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.colophon-security a {
  transition: color 0.25s var(--ease);
}

.colophon-security a:hover {
  color: var(--gold);
}

.colophon-end {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------- docs */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 940px) {
  .docs-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .docs-side {
    position: sticky;
    top: 7.5rem;
  }
}

.docs-side nav {
  display: grid;
}

.docs-side .group {
  font-size: 0.6rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 1.5rem 0 0.7rem;
}

.docs-side .group:first-child {
  padding-top: 0;
}

.docs-side a {
  padding: 0.42rem 0 0.42rem 0.9rem;
  font-size: 0.88rem;
  color: var(--text-faint);
  border-left: 1px solid var(--rule);
  font-weight: 400;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.docs-side a:hover {
  color: var(--text);
  border-left-color: var(--rule-strong);
}

.docs-side a[aria-current="page"] {
  color: var(--gold-bright);
  border-left-color: var(--gold);
}

.prose {
  max-width: min(68ch, 100%);
  min-width: 0;
  font-weight: 400;
}

.prose > * + * {
  margin-top: 1.15rem;
}

.prose h1 {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  margin-bottom: 0.4rem;
}

.prose h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem);
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.prose h3 {
  margin-top: 2rem;
}

.prose p {
  color: var(--text-dim);
  line-height: 1.75;
}

.prose ul,
.prose ol {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  color: var(--text-dim);
}

.prose li {
  padding-left: 1.5rem;
  position: relative;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.prose a:not(.action) {
  color: var(--gold-bright);
  border-bottom: 1px solid var(--rule-gold);
  transition: border-color 0.25s var(--ease);
}

.prose a:not(.action):hover {
  border-bottom-color: var(--gold-bright);
}

.prose strong {
  color: var(--text);
  font-weight: 500;
}

.prose blockquote {
  border-left: 1px solid var(--gold);
  padding-left: 1.5rem;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------------ board */

.board {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.board-col {
  display: grid;
  gap: 0;
  align-content: start;
  border-top: 1px solid var(--rule-gold);
  padding-top: 1.1rem;
}

.board-head {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 1.4rem;
}

.board-note {
  font-size: 0.82rem;
  color: var(--text-faint);
  font-weight: 400;
  line-height: 1.6;
}

.board-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--rule);
  transition: padding-left 0.3s var(--ease);
}

.board-item:hover {
  padding-left: 0.5rem;
}

.board-item:hover .entry-name {
  color: var(--gold-pale);
}

.board-item .entry-name {
  font-size: 1rem;
}

.board-empty {
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ forms */

.field {
  flex: 1 1 11rem;
  /* `min-width: 0` rather than a rem floor: a flex item's default `auto`
     minimum plus the submit control overflowed a 320px viewport. */
  min-width: 0;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease);
}

.field::placeholder {
  color: var(--text-faint);
}

.field:focus {
  outline: none;
  border-bottom-color: var(--gold-bright);
}

.form-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  width: 100%;
  max-width: 30rem;
}

/* ---------------------------------------------------------- intake form */

.intake {
  display: grid;
  gap: 1.9rem;
  margin-top: 2rem;
}

.intake-row {
  display: grid;
  gap: 1.9rem;
}

@media (min-width: 640px) {
  .intake-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-group {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.field-group label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.field-area {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
  padding-top: 0.4rem;
}

.field-hint {
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ misc */

.scroll-x {
  overflow-x: auto;
}

.center {
  text-align: center;
}

.center-col {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}

.center-col .lede {
  margin-inline: auto;
}

.stack {
  display: grid;
  gap: 1.1rem;
}

.stack-lg {
  display: grid;
  gap: 2rem;
}

.mt-1 {
  margin-top: 0.6rem;
}
.mt-2 {
  margin-top: 1.4rem;
}
.mt-3 {
  margin-top: 2.25rem;
}

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

.back {
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
}

.back:hover {
  color: var(--gold-bright);
}

.product-head {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.product-title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.product-title h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}

.release {
  display: grid;
  gap: 1.6rem;
  border-top: 1px solid var(--rule-gold);
  padding-top: 1.5rem;
}

.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
}

.release-version {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The tunnel is the page's background design, so it is stopped rather than
     removed. The rings settle into a static concentric field at fixed radii,
     which is what the page looked like before it was set in motion. */
  .tunnel span {
    animation: none !important;
    opacity: 0.13;
  }
  .tunnel span:nth-child(1) {
    scale: 0.08;
  }
  .tunnel span:nth-child(2) {
    scale: 0.16;
  }
  .tunnel span:nth-child(3) {
    scale: 0.25;
  }
  .tunnel span:nth-child(4) {
    scale: 0.35;
  }
  .tunnel span:nth-child(5) {
    scale: 0.46;
  }
  .tunnel span:nth-child(6) {
    scale: 0.58;
  }
  .tunnel span:nth-child(7) {
    scale: 0.71;
  }
  .tunnel span:nth-child(8) {
    scale: 0.85;
  }
  .tunnel span:nth-child(n + 9) {
    display: none;
  }
}