/* vrok — left-luggage locker bank.
   Vitreous enamel ground, signal-yellow instruction plates, aluminium
   hardware. Depth comes from the physics of a painted steel door: a hard
   top light, a recessed interior, and chipped edges where hands go. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Enamel carries the page: a committed field, not an accent. */
  --enamel: #0c3a3f;
  --enamel-deep: #072a2e;
  --enamel-lit: #12565d;
  --enamel-chip: #2b7e85;

  --signal: #ffc400;
  --signal-deep: #d9a100;
  --signal-ink: #1a1403;

  --alu: #b9c2c1;
  --alu-dark: #7e8a89;

  /* Secondary text is tinted from the enamel hue, never gray. */
  --ink: #edf6f5;
  --ink-soft: #a9c6c6;
  --ink-faint: #7ba5a6;

  --rule: #1b5159;

  --measure: 68ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Vitreous enamel is sprayed and fired, so it is never optically flat: it
     carries a fine speckle. Fractal noise gives that without shipping a
     raster texture, and it is what separates the surface from a gradient. */
  --enamel-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");

  /* Enamel on a signal plate is thicker and shows orange-peel rather than
     speckle, so the plate gets a coarser, fainter grain. */
  --plate-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='0.1'/%3E%3C/svg%3E");
}

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

/* `display` on a component beats the UA rule for [hidden], and the OS panels
   are flex rows, so they stay visible without this. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.75rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--enamel);
  /* Vitreous enamel: a hard light from above over a slightly uneven field. */
  background-image:
    var(--enamel-grain),
    radial-gradient(
      120% 70% at 50% -10%,
      var(--enamel-lit) 0%,
      transparent 60%
    ),
    radial-gradient(90% 50% at 85% 110%, #0a464c 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* The surfaces a browser would otherwise style for us. */
::selection {
  background: var(--signal);
  color: var(--signal-ink);
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--enamel-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--enamel-chip);
  border: 3px solid var(--enamel-deep);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--alu-dark);
}
* {
  scrollbar-color: var(--enamel-chip) var(--enamel-deep);
}

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

a {
  color: var(--ink);
  text-decoration-color: var(--enamel-chip);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.15s;
}
a:hover {
  text-decoration-color: var(--signal);
}

code,
pre,
.term {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
  font-stretch: 78%;
  letter-spacing: -0.02em;
  word-spacing: 0.16em;
  line-height: 1.02;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.skip:focus {
  left: 0;
}

.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;
}

/* ---------- release ribbon ---------- */

.release {
  background: var(--signal);
  color: var(--signal-ink);
  border-bottom: 1px solid var(--signal-deep);
}
.release__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.55rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.release__inner p {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.release__new {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  background: var(--signal-ink);
  color: var(--signal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.release a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.release__hide {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-ink);
  background: transparent;
  /* 2px in the plate ink: a 1px 28% stroke vanishes on large / high-DPI
     screens and leaves Hide reading as leftover banner text. */
  border: 2px solid var(--signal-ink);
  border-radius: 2px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

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

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gut);
  border-bottom: 1px solid var(--rule);
  background:
    var(--enamel-grain), linear-gradient(180deg, #10464c 0%, var(--enamel) 100%);
  backdrop-filter: blur(8px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.wordmark__mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.wordmark__text {
  font-size: 1.35rem;
  font-weight: 700;
  font-stretch: 70%;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.wordmark__tag {
  display: none;
  margin-left: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}
/* Only where the full nav still fits beside it on one line. */
@media (min-width: 72rem) {
  .wordmark__tag {
    display: inline;
    white-space: nowrap;
  }
}

.bar__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bar__links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.6rem);
  font-stretch: 85%;
  font-size: 0.9rem;
}
.bar__links a:not(.bar__cta) {
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.bar__links a:not(.bar__cta):hover {
  color: var(--ink);
  text-decoration: none;
}
.bar__links a:not(.bar__cta)[aria-current="page"] {
  color: var(--signal);
  border-bottom-color: var(--signal);
}
.bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--signal);
  color: var(--signal-ink) !important;
  font-weight: 700;
  font-stretch: 84%;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 3px;
  border-bottom: 0 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 0 rgba(0, 0, 0, 0.2) inset;
}
.bar__cta:hover {
  background: #ffd43f;
}

.bar__toggle {
  display: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--enamel-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

/* Eight links stop fitting on one line below this, and a link broken across
   two lines reads as two links, so the bar folds into the menu instead. */
@media (max-width: 64rem) {
  .bar__toggle {
    display: inline-flex;
  }
  .bar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gut) 1rem;
    background: var(--enamel-deep);
    border-bottom: 1px solid var(--rule);
  }
  .bar[data-open="true"] .bar__links {
    display: flex;
  }
  .bar__links a:not(.bar__cta) {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .bar__cta {
    margin-top: 0.4rem;
    justify-content: center;
    border-bottom: 0 !important;
  }
}

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

.hero {
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut) clamp(3rem, 7vw, 6rem);
}
.hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* The tariff plate: enamelled steel bolted to the wall. */
.plate {
  position: relative;
  background:
    var(--plate-grain),
    linear-gradient(177deg, var(--signal) 0%, var(--signal-deep) 100%);
  color: var(--signal-ink);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    0 18px 40px -16px rgba(0, 0, 0, 0.65),
    0 3px 10px -4px rgba(0, 0, 0, 0.45);
}

/* Where the plate is bolted the enamel chips back to bare steel, which is the
   one thing that separates fired enamel from printed card. */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  background: var(--alu-dark);
  opacity: 0.5;
  pointer-events: none;
}
.plate::before {
  top: 5px;
  left: 26px;
  width: 20px;
  height: 3px;
  border-radius: 0 0 60% 40%;
}
.plate::after {
  bottom: 7px;
  right: 30px;
  width: 14px;
  height: 4px;
  border-radius: 50% 30% 0 0;
}

.rivet {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #fff 0%,
    var(--alu) 45%,
    var(--alu-dark) 100%
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.rivet--tl {
  top: 11px;
  left: 11px;
}
.rivet--tr {
  top: 11px;
  right: 11px;
}
.rivet--bl {
  bottom: 11px;
  left: 11px;
}
.rivet--br {
  bottom: 11px;
  right: 11px;
}

.plate__title {
  font-size: clamp(2.5rem, 6.2vw, 4.05rem);
  font-weight: 700;
  font-stretch: 74%;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.plate__lede {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1vw + 0.8rem, 1.2rem);
  line-height: 1.45;
  color: #2e2405;
}
.plate__lede strong {
  color: var(--signal-ink);
}
/* The three objections people raise first, answered before they scroll. */
.plate__proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
}
.plate__proof li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(26, 20, 3, 0.12);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--signal-ink);
}

/* The three steps are a procedure, as on a real instruction plate. */
.steps {
  list-style: none;
  margin: clamp(1.5rem, 2.6vw, 2.1rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
/* The steps stack full width. Side by side, step 02's command box was
   squeezed to "vrok ./quar" beside its Copy plate. */
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26, 20, 3, 0.28);
}
.step__n {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  /* An explicit tint rather than opacity: at 0.6 these dropped to 3.5:1
     against the dark end of the plate, and they carry the step order. */
  color: #453613;
}
.step__h {
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.step__aside {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #453613;
}
.step__aside--lead {
  font-size: 0.98rem;
  color: #2e2405;
  max-width: 44ch;
}
.step__aside a {
  color: inherit;
  text-decoration-color: rgba(26, 20, 3, 0.4);
}
.step__aside a:hover {
  text-decoration-color: var(--signal-ink);
}
.step__aside code {
  font-size: 0.85em;
  background: rgba(26, 20, 3, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.step__cmd {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--signal-ink);
  background: rgba(26, 20, 3, 0.1);
  padding: 0.5rem 0.7rem;
  border-radius: 2px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

/* OS tabs read as stamped metal selectors. */
.os {
  display: flex;
  gap: 2px;
  margin: 0.85rem 0 0.6rem;
  background: rgba(26, 20, 3, 0.16);
  padding: 2px;
  border-radius: 3px;
  width: fit-content;
}
.os button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.02em;
  border: 0;
  background: transparent;
  color: #453613;
  padding: 0.38rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease);
}
.os button:hover {
  color: var(--signal-ink);
}
.os button[aria-selected="true"] {
  background: var(--signal-ink);
  color: var(--signal);
}

/* The command sits in a routed recess. Long lines stay on one line and
   scroll sideways, so a command reads as one command and the Copy button
   stays the same yellow plate everywhere. Never put <wbr> in a command:
   browsers break at it even under nowrap. */
.cmd {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  background: var(--enamel-deep);
  border-radius: 3px;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.cmd__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(0.76rem, 0.62rem + 0.42vw, 0.9rem);
  line-height: 1.5;
  padding: 0.85rem 1rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--enamel-chip) transparent;
  /* Edge shadows that appear only while there is more command to scroll
     to. Touch screens hide the scrollbar, so this is the only cue there.
     The covers scroll with the text (local) and hide the shadows (scroll)
     once an end is reached. */
  background:
    linear-gradient(90deg, var(--enamel-deep) 40%, rgba(7, 42, 46, 0)) left
      center / 1.6rem 100% no-repeat local,
    linear-gradient(270deg, var(--enamel-deep) 40%, rgba(7, 42, 46, 0)) right
      center / 1.6rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), transparent)
      left center / 0.7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), transparent)
      right center / 0.7rem 100% no-repeat scroll,
    var(--enamel-deep);
}
.cmd__text::-webkit-scrollbar {
  height: 6px;
}
.cmd__text::-webkit-scrollbar-thumb {
  background: var(--enamel-chip);
  border-radius: 99px;
}
.copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.85rem 1.2rem;
  min-width: 6.4rem;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -2px 0 rgba(0, 0, 0, 0.22) inset;
  transition:
    background 0.18s var(--ease),
    transform 0.08s var(--ease);
}
.copy:hover {
  background: #ffd43f;
}
.copy:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) inset;
}
.copy[data-done="true"] {
  background: var(--alu);
  color: #10292b;
}

/* ---------- locker ---------- */

/* The door is as wide as the opening it covers, swung far enough that its
   foreshortened width is the narrow strip you see. A door narrower than its
   bay could never close, and reads as a flap rather than a locker. */
.locker {
  --door: 280px;
  --swing: 64deg;
  position: relative;
  display: grid;
  gap: 0;
  /* cos(64deg) ~= 0.438, so a 280px door projects to ~123px of page width. */
  grid-template-columns: calc(var(--door) * 0.438) minmax(0, 1fr);
  align-items: stretch;
  align-self: center;
  min-width: 0;
}

/* The door, standing open to the left of its bay. Light comes from above and
   in front, so the leading (right) edge catches it and the hinge edge sits in
   shadow — that is what makes a flat div read as a swung steel panel. */
.locker__door {
  position: relative;
  width: var(--door);
  border-radius: 3px 0 0 3px;
  background:
    var(--enamel-grain),
    linear-gradient(
      100deg,
      #072529 0%,
      var(--enamel) 46%,
      var(--enamel-lit) 88%,
      #1e737b 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    -1px 0 0 rgba(0, 0, 0, 0.4) inset,
    0 24px 44px -20px rgba(0, 0, 0, 0.85);
  border: 1px solid var(--rule);
  border-right: 0;
  transform-origin: left center;
  transform: perspective(1400px) rotateY(calc(var(--swing) * -1));
  /* The one authored motion moment: the door swings open on load. */
  animation: door-open 1.3s var(--ease) both;
}
@keyframes door-open {
  from {
    transform: perspective(1400px) rotateY(-6deg);
  }
  to {
    transform: perspective(1400px) rotateY(calc(var(--swing) * -1));
  }
}
/* The paint lip along the door's leading edge, which is the edge that
   catches the light and the edge that hands actually wear. */
.locker__door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--enamel-chip) 0%,
    #8fb7b6 18%,
    var(--enamel-chip) 44%,
    #7aa9a8 70%,
    var(--enamel-chip) 100%
  );
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .locker__door {
    animation: none;
  }
}

/* The number is the one thing a locker door is really for. */
.locker__num {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.locker__hinge {
  position: absolute;
  left: -2px;
  width: 9px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #d6dcdb 0%,
    var(--alu) 35%,
    var(--alu-dark) 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}
.locker__hinge--a {
  top: 14%;
}
.locker__hinge--b {
  bottom: 14%;
}

/* A cam lock: aluminium cylinder, keyway turned to the open position. */
.locker__lock {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    #f2f6f5 0%,
    var(--alu) 42%,
    #6e7a79 100%
  );
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.75),
    0 0 0 2px rgba(0, 0, 0, 0.25);
}
.locker__lock::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(160deg, #9aa5a4 0%, #4e5857 100%);
}
.locker__lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 13px;
  margin: -6.5px 0 0 -1.5px;
  border-radius: 2px;
  background: #0a1414;
  transform: rotate(32deg);
}

/* The bay: a routed steel interior holding the real output. */
.locker__bay {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* The bay takes its content height. It was previously stretched to the
     taller plate's row, which left a void underneath that read as a layout
     hole rather than as the inside of a locker. */
  background: linear-gradient(105deg, #061f23 0%, var(--enamel-deep) 34%);
  /* The carcass: pressed steel surround, then the recess inside it. */
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  box-shadow:
    0 0 0 5px #0a3338,
    0 0 0 6px rgba(0, 0, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.55) inset,
    0 26px 48px -22px rgba(0, 0, 0, 0.85);
}

/* The banner is real terminal output, so it keeps the mono face and the
   12-character label column the CLI actually pads to. It is marked up
   rather than kept as one `pre` block only so the long URL can wrap
   instead of being clipped — a half-shown URL would prove nothing. */
.term {
  font-size: clamp(0.7rem, 0.56rem + 0.4vw, 0.82rem);
  line-height: 1.9;
  color: var(--ink);
}
.term p {
  margin: 0;
}
.term__cmd {
  color: var(--ink-soft);
  margin-bottom: 1.2em !important;
}
.term__prompt {
  color: var(--enamel-chip);
  margin-right: 0.5ch;
}
.term__head strong {
  font-weight: 700;
  color: #fff;
}
.term__gap {
  margin-top: 1.7em !important;
}
.term__ok {
  color: #5fe3a1;
  font-weight: 700;
  margin-right: 0.5ch;
}
.term__stop {
  color: var(--ink-faint);
  margin-right: 0.5ch;
}
.term__dim {
  color: var(--ink-faint);
  padding-left: 2ch;
}

.term__rows {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: 0 1ch;
  margin: 0.55em 0 1.2em;
  padding-left: 2ch;
}
.term__rows dt {
  color: var(--ink-faint);
}
.term__rows dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.term__rows dd.term__url {
  color: var(--signal);
}
.term__copied {
  color: var(--ink-faint);
  margin-left: 0.8ch;
}

/* On a phone the label column eats the width the URL needs, so the rows
   stack — which is also what a narrow terminal does to this banner. */
@media (max-width: 34rem) {
  /* A full-size door would project ~150px and cover half the banner on a
     phone. A narrower door swung further open projects ~48px (cos 72deg,
     plus a little perspective), so the bay keeps the width. */
  .locker {
    --door: 140px;
    --swing: 72deg;
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .locker__bay {
    padding: 0.9rem 0.85rem;
  }
  .locker__lock {
    right: 10px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
  }
  .locker__num {
    font-size: 1.3rem;
  }
  .term__rows {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 2ch;
  }
  .term__rows dd {
    padding-left: 2ch;
    margin-bottom: 0.35em;
  }
}

.locker__bay figcaption {
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- tariff ---------- */

.tariff {
  padding: clamp(3rem, 6vw, 5rem) var(--gut);
  background: var(--enamel-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tariff__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.tariff__h {
  /* Conditions of deposit are the plate's fine print, set smaller and
     tracked out like a tariff header rather than a second headline. */
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--signal);
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}
.tariff__list {
  margin: 0;
  display: grid;
  gap: 0;
}
.tariff__row {
  display: grid;
  /* minmax(0, …) rather than 1fr: a command in a row must scroll, not
     widen the row past the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.tariff__row:last-child {
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .tariff__row {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2rem;
  }
}
.tariff__row dt {
  font-weight: 700;
  font-stretch: 84%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.86rem;
  color: var(--signal);
  padding-top: 0.15rem;
}
.tariff__row dd {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}
.tariff__row dd code:not(.cmd__text) {
  color: var(--ink);
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.12em 0.38em;
  border-radius: 2px;
}

/* ---------- bank ---------- */

.bank {
  padding: clamp(3rem, 6vw, 5rem) var(--gut);
}
.bank__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.bank__h {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 700;
  font-stretch: 74%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.bank__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .bank__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 72rem) {
  .bank__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Each unit is a locker face in the bank, not a card: a painted steel door
   with a vent, a number and a lock, lit from the top edge. */
.unit {
  position: relative;
  background:
    var(--enamel-grain),
    linear-gradient(
      170deg,
      var(--enamel-lit) 0%,
      var(--enamel) 62%,
      #0a3338 100%
    );
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  padding-top: clamp(2.4rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.13) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset;
  transition: background 0.25s var(--ease);
}
.unit:hover {
  background: linear-gradient(170deg, #1a6f77 0%, #11494f 62%, #0a3338 100%);
}

/* The vent slots a real locker door is punched with. */
.unit::before {
  content: "";
  position: absolute;
  top: clamp(1.05rem, 1.9vw, 1.4rem);
  left: clamp(1.25rem, 2.4vw, 1.75rem);
  right: calc(clamp(1.25rem, 2.4vw, 1.75rem) + 26px);
  height: 15px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0 3px,
    rgba(255, 255, 255, 0.09) 3px 4px,
    transparent 4px 7.5px
  );
  border-radius: 1px;
}

/* The cam lock, read small. */
.unit::after {
  content: "";
  position: absolute;
  top: clamp(0.85rem, 1.6vw, 1.15rem);
  right: clamp(1.25rem, 2.4vw, 1.75rem);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    #e4eae9 0%,
    var(--alu) 45%,
    #65706f 100%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.unit__key {
  position: absolute;
  top: calc(clamp(0.85rem, 1.6vw, 1.15rem) + 4px);
  right: calc(clamp(1.25rem, 2.4vw, 1.75rem) + 6.2px);
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: #0d1a1a;
  transform: rotate(28deg);
}

.unit h3 {
  font-size: 1.08rem;
  font-weight: 700;
  font-stretch: 84%;
}
.unit p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1 1 auto;
}
.unit code {
  /* Block, so it can scroll: an inline element ignores overflow. */
  display: block;
  max-width: 100%;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--enamel-deep);
  padding: 0.45rem 0.6rem;
  border-radius: 2px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--enamel-chip) transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}

/* ---------- visitor mock ---------- */

/* ---------- watch it run ---------- */

/* The whole round trip, replayed: your terminal on one side, the other
   person's browser on the other. Both screens are the same recessed enamel
   as the locker bay, not a black pane with a neon cursor: it is the same
   machine, seen while it works. */
.watch {
  padding: clamp(2.4rem, 5vw, 4rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.watch__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* An auto track would grow to the widest line of the terminal and push
     the page sideways on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
.watch__intro {
  display: grid;
  gap: 1.2rem;
  align-items: end;
}
@media (min-width: 62rem) {
  .watch__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem;
  }
}
.watch__h {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-stretch: 76%;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.watch__lede {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* The scene switch reads as a row of numbered locker keys. */
.watch__tabs {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 40rem) {
  .watch__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.watch__tabs button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink-soft);
  background: var(--enamel-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.watch__tabs button:hover {
  color: var(--ink);
  border-color: var(--enamel-chip);
}
.watch__tabs button[aria-selected="true"] {
  color: var(--signal-ink);
  background:
    var(--plate-grain),
    linear-gradient(177deg, var(--signal) 0%, var(--signal-deep) 100%);
  border-color: var(--signal-deep);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 0 rgba(0, 0, 0, 0.2) inset;
}
.watch__tab-n {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}
.watch__tabs button[aria-selected="true"] .watch__tab-n {
  color: var(--signal-ink);
  border-color: rgba(26, 20, 3, 0.35);
}
.watch__narration {
  min-height: 3.1em;
  margin: 0.4rem 0 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--signal);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}
.watch__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.watch__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 64rem) {
  .watch__stage {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

/* Shared window frame for the terminal and the browser. */
.console,
.browser {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.console {
  background: linear-gradient(105deg, #061f23 0%, var(--enamel-deep) 40%);
}
.console__chrome,
.browser__chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
  background: #082b2f;
  border-bottom: 1px solid var(--rule);
}
.console__title {
  margin-left: 0.6rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.console__badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}
/* The key being "pressed", shown as a keycap so a hotkey reads as something
   the person did, not something the terminal printed. */
.console__key {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--signal-ink);
  background: linear-gradient(180deg, #fff 0%, var(--alu) 100%);
  border-radius: 4px;
  box-shadow:
    0 2px 0 var(--alu-dark),
    0 3px 6px rgba(0, 0, 0, 0.4);
  animation: keypress 0.9s var(--ease) both;
}
@keyframes keypress {
  0% {
    transform: translateY(-4px);
    opacity: 0;
  }
  25% {
    transform: translateY(1px);
    box-shadow:
      0 0 0 var(--alu-dark),
      0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 1;
  }
  45%,
  100% {
    transform: none;
    opacity: 1;
  }
}
.console__replay {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-height: 32px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.console__replay:hover {
  border-color: var(--signal);
}

/* Fixed heights keep the page from jumping as lines and pages appear, which
   is also what real windows do. */
.console__screen {
  height: 27rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.3rem);
}

/* ---------- the other person's browser ---------- */

.browser {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(27rem + 2.75rem + 2px);
  background: var(--enamel);
}
.browser__who,
.console__title {
  flex: 0 0 auto;
}
.browser__who {
  margin-left: 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.browser__address {
  flex: 1;
  min-width: 0;
  margin-left: 0.4rem;
  padding: 0.3rem 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
  background: var(--enamel-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.browser__address:empty::before {
  content: "Search or type a URL";
  color: var(--ink-faint);
}
.browser__loading {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--signal);
  transform-origin: left;
  animation: loading 0.7s var(--ease) both;
}
@keyframes loading {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.browser__view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.browser__blank,
.browser__error {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.browser__error strong {
  color: var(--ink);
  font-size: 1.05rem;
}
.browser__sum {
  margin: 0 1rem 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.browser__sum b {
  margin-right: 0.6ch;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* The visitor's folder listing, trimmed from the real viewer page. */
.browser__listing {
  padding: 0.9rem 1rem;
}
.browser__listing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.browser__listing-head strong {
  font-size: 1.05rem;
}
.browser__listing ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.browser__listing li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
}
.browser__listing li span:last-child {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The password page, as the real viewer draws it. */
.browser__gate {
  display: grid;
  gap: 0.55rem;
  max-width: 17rem;
  margin: 1.6rem auto 0;
  padding: 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--enamel-deep);
  text-align: center;
}
.browser__gate strong {
  font-size: 1.05rem;
}
.browser__gate p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.browser__input {
  min-height: 2.3rem;
  padding: 0.4rem 0.7rem;
  text-align: left;
  letter-spacing: 0.2em;
  background: var(--enamel);
  border: 1px solid var(--enamel-chip);
  border-radius: 3px;
}
.browser__gate .mock__dl {
  justify-content: center;
}

/* The person's own app, proxied. Deliberately not vrok-styled: it is
   whatever is running on localhost:3000. */
.browser__app {
  height: 100%;
  background: #f4f1ea;
  color: #1d2326;
  font-size: 0.85rem;
}
.browser__app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e3ddd0;
  font-weight: 700;
}
.browser__app-bar span {
  font-size: 0.7rem;
  font-weight: 600;
  color: #2f7d55;
}
.browser__app-body {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
}
.browser__app-card {
  padding: 0.9rem;
  background: #fff;
  border: 1px solid #e3ddd0;
  border-radius: 6px;
}
.browser__app-card b {
  display: block;
  margin-bottom: 0.2rem;
}

.browser__shelf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--rule);
  background: #082b2f;
  font-size: 0.78rem;
  animation: shelf 0.4s var(--ease) both;
}
@keyframes shelf {
  from {
    transform: translateY(100%);
  }
}
.browser__shelf-icon {
  color: var(--signal);
}
.browser__shelf-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.browser__shelf-text b,
.browser__shelf-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser__shelf-text span {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.browser__shelf-bar {
  flex: 0 0 28%;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}
.browser__shelf-bar > span {
  display: block;
  height: 100%;
  background: var(--signal);
}
/* A zip has no size up front, so its bar sweeps instead of filling. */
.browser__shelf-bar[data-unknown] > span {
  width: 35% !important;
  animation: sweep 1.1s linear infinite;
}
@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}

/* The visitor's pointer, travelling to what they click. */
.browser__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 20px;
  height: 26px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M2 2v19l5-4.5 3.4 7.3 3.2-1.5-3.3-7.1H17z' fill='%23fff' stroke='%23072a2e' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.85s var(--ease);
}
.browser__cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--signal);
  opacity: 0;
}
.browser__cursor[data-click]::after {
  animation: ripple 0.5s ease-out;
}
@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}
.is-pressed {
  transform: translateY(1px);
  filter: brightness(0.9);
}

/* On a phone the two windows stack. Shorter panes keep both on screen at
   once, so the transfer can be seen on each side; the terminal scrolls to
   its newest line as a real one does. */
@media (max-width: 34rem) {
  .console__screen {
    height: 16rem;
  }
  .browser {
    height: 20rem;
  }
}

.term__gap-s {
  margin-top: 1.2em !important;
}
.term__live {
  color: var(--ink-soft);
}
.term__typed {
  color: var(--ink);
}
.term__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--signal);
  animation: cursor 1s steps(1) infinite;
}
@keyframes cursor {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .term__cursor,
  .console__key,
  .browser__loading,
  .browser__shelf,
  .browser__shelf-bar[data-unknown] > span {
    animation: none;
  }
  .browser__cursor {
    transition: none;
  }
}

.look__points {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 48rem) {
  .look__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
  }
}
.look__points li {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.look__points strong {
  color: var(--ink);
}

.mock__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--alu-dark);
}
.mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.mock__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-stretch: 70%;
}
.mock__brand img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
}
.mock__pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.mock__pills span {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.mock__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1rem 0.85rem;
}
.mock__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mock__title strong {
  display: block;
  font-size: 1.05rem;
}
.mock__title span {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.mock__icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #082b2f;
  color: var(--signal);
  font-size: 0.75rem;
}
.mock__dl {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
}
.mock__stage {
  padding: 0 1rem 1rem;
}
.mock__player {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #082b2f;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.mock__play {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.mock__play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0.7rem 0 0 0.9rem;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.7rem;
  border-color: transparent transparent transparent var(--signal-ink);
}

/* ---------- contact ---------- */

.contact {
  padding: 1.6rem var(--gut);
  border-top: 1px solid var(--rule);
}
.contact__line {
  max-width: 1280px;
  margin: 0 auto;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.close {
  padding: clamp(3rem, 7vw, 6rem) var(--gut);
  background: var(--enamel-deep);
  border-top: 1px solid var(--rule);
}
.close__inner {
  max-width: 54rem;
  margin: 0 auto;
  text-align: center;
}
.close__h {
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 700;
  font-stretch: 74%;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.cmd--close {
  text-align: left;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.45) inset,
    0 0 0 1px var(--rule);
}
.close__aside {
  margin: 1.1rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

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

.foot {
  padding: 2rem var(--gut);
  border-top: 1px solid var(--rule);
}
.foot__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.foot__logo {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.foot__mark {
  font-weight: 700;
  font-stretch: 70%;
  font-size: 1.1rem;
}
.foot p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  flex: 1 1 auto;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.86rem;
}

/* A second command on a plate used to sit as unmarked prose, so it could
   not be copied and did not look like a command. Same recess as the first. */
.cmd + .cmd,
.cmd-stack {
  margin-top: 0.55rem;
}
.cmd-label {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #453613;
}

/* ---------- compare ---------- */

.compare {
  padding: clamp(3rem, 6vw, 5.5rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.compare__inner {
  max-width: 68rem;
  margin: 0 auto;
}
.compare__h {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  font-stretch: 74%;
  text-transform: uppercase;
}
.compare__lede {
  margin: 0.9rem 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}
.compare__why {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0;
}
@media (min-width: 48rem) {
  .compare__why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 72rem) {
  .compare__why {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.why {
  background:
    var(--enamel-grain),
    linear-gradient(170deg, var(--enamel-lit) 0%, var(--enamel) 70%);
  padding: 1.25rem 1.35rem;
}
.why {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.why h3 {
  font-size: 1.15rem;
  font-stretch: 82%;
}
.why p {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.why p code {
  white-space: nowrap;
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.08em 0.35em;
  border-radius: 2px;
  color: var(--ink);
}
/* The command or output that delivers the benefit: proof, not a claim. */
.why__proof {
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.76rem;
  color: var(--signal);
  background: var(--enamel-deep);
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}

/* Four facts, read before the detail. */
.stats {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stats li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: var(--enamel-deep);
}
.stats strong {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  font-stretch: 74%;
  line-height: 1;
  color: var(--signal);
  text-transform: uppercase;
}
.stats span {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.compare-scroll {
  overflow-x: auto;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}
.compare-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare-table th {
  font-stretch: 82%;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.compare-table td:first-child,
.compare-table th:first-child {
  padding-left: 0;
}
.compare-table .yes {
  color: var(--signal);
  font-weight: 700;
}
.compare-table .no {
  color: var(--ink-faint);
}
.compare-table .mid {
  color: var(--ink-soft);
}
.compare__note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- guide ---------- */

.guide {
  padding: clamp(2.2rem, 4vw, 3.5rem) var(--gut) clamp(3rem, 6vw, 5rem);
}
.guide__layout {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  /* Code blocks scroll inside their box; an auto track would let the
     longest one widen the whole page on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 58rem) {
  .guide__layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
}
/* Sticky only beside the article. Stacked above it on a phone, a sticky
   contents list would ride down over the text. */
@media (min-width: 58rem) {
  .guide__toc {
    position: sticky;
    top: 4.6rem;
  }
}
.guide__toc h2 {
  font-size: 0.75rem;
  font-stretch: 88%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.guide__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.guide__toc a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.88rem;
  transition: color 0.2s var(--ease);
}
.guide__toc a:hover,
.guide__toc a[aria-current="true"] {
  color: var(--signal);
}
/* The section being read gets a signal bar beside it, so it stays findable
   at a glance and does not read as a hover that got stuck. */
.guide__toc a::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transition: transform 0.25s var(--ease);
}
.guide__toc a[aria-current="true"] {
  font-weight: 600;
}
.guide__toc a[aria-current="true"]::before {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .guide__toc a::before {
    transition: none;
  }
}
.guide__body h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  font-stretch: 74%;
  text-transform: uppercase;
}
.guide__lede {
  margin: 0.9rem 0 0;
  max-width: var(--measure);
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.guide__body section {
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--rule);
}
.guide__body h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-stretch: 80%;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.guide__body h3 {
  font-size: 1.05rem;
  font-stretch: 86%;
  margin: 1.3rem 0 0.4rem;
}
.guide__body p,
.guide__body li {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.guide__body p {
  margin: 0 0 0.8rem;
}
.guide__body ul,
.guide__body ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}
.guide__body code:not(.cmd__text) {
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1em 0.38em;
  border-radius: 2px;
  color: var(--ink);
}
.guide__body pre {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--enamel-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: var(--enamel-chip) transparent;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.55;
}
/* :not() matches the inline rule's specificity, which a plain `pre code`
   loses to, leaving every line of a block with its own pill. */
.guide__body pre code:not(.cmd__text) {
  background: none;
  padding: 0;
}
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 0 0 1rem;
}
.guide-table th,
.guide-table td {
  text-align: left;
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.guide-table th {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- small screens ---------- */

/* A phone has no width to spare, so the frame gives some back: tighter page
   gutters, a thinner plate border, step numbers above their heading instead
   of in a column of their own, and narrower Copy plates. */
@media (max-width: 34rem) {
  :root {
    --gut: 0.9rem;
  }
  .plate {
    padding: 1.4rem 1rem 1.25rem;
  }
  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    padding-top: 1rem;
  }
  .copy {
    min-width: 4.6rem;
    padding: 0.75rem 0.8rem;
  }
  .cmd__text {
    padding: 0.75rem 0.8rem;
  }
}

/* The footer on a phone: the links become a two-column list of full-height
   rows. Wrapped inline they formed a ragged block of small targets. */
@media (max-width: 34rem) {
  .foot {
    padding-top: 1.6rem;
    padding-bottom: 1.4rem;
  }
  .foot__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .foot nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .foot nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink-soft);
  }
  .foot nav a:hover {
    color: var(--ink);
  }
}

/* ---------- homepage additions ---------- */

/* The hero's way down to the demo: secondary to the install command, so a
   quiet link on the plate rather than a second yellow button. */
.plate__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--signal-ink);
  text-decoration: none;
}
.plate__watch:hover {
  color: var(--signal-ink);
  text-decoration: underline;
  text-decoration-color: var(--signal-ink);
}
.plate__play {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--signal-ink);
}
.plate__play::after {
  content: "";
  margin-left: 0.18rem;
  border-style: solid;
  border-width: 0.36rem 0 0.36rem 0.58rem;
  border-color: transparent transparent transparent var(--signal);
}

.compare__sub {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-stretch: 80%;
  text-transform: uppercase;
}

/* At a glance, under the closing install command. */
.proof {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.proof li {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 9rem;
  max-width: 15rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--enamel-deep);
}
.proof strong {
  font-size: 1.05rem;
  color: var(--ink);
}
.proof span {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut);
}
.lost__plate {
  max-width: 36rem;
}
.lost__code {
  margin: 0 0 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: #453613;
}
.lost__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0;
  font-weight: 700;
}
.lost__links a {
  color: var(--signal-ink);
}
.lost__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 3px;
  background: var(--signal-ink);
  color: var(--signal) !important;
  text-decoration: none;
}

/* ---------- faq ---------- */

/* Real <details> so every answer is in the page for readers and search
   engines alike, and opens without any script. */
.faq {
  padding: clamp(2.4rem, 5vw, 4rem) var(--gut);
  border-top: 1px solid var(--rule);
}
.faq__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.faq__h {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-stretch: 76%;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.faq__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 62rem) {
  .faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.85rem 0;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.2rem;
  color: var(--signal);
}
.faq__item[open] summary::after {
  content: "−";
}
.faq__item p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.faq__item code {
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1em 0.38em;
  border-radius: 2px;
  color: var(--ink);
}

/* ---------- landing pages ---------- */

/* One column, no contents list: these pages answer one question each. */
.guide__layout--single {
  max-width: 52rem;
}
@media (min-width: 58rem) {
  .guide__layout--single {
    grid-template-columns: minmax(0, 1fr);
  }
}
.crumbs-nav {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.crumbs-nav a {
  color: var(--ink-soft);
}
.faq__list--single {
  grid-template-columns: minmax(0, 1fr) !important;
}
.landing__cta .cmd {
  margin: 0.4rem 0 1rem;
}
.landing__more ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.landing__more li {
  border-bottom: 1px solid var(--rule);
}
.landing__more a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  text-decoration: none;
}
.landing__more a::after {
  content: "→";
  margin-left: auto;
  color: var(--signal);
}

/* Command boxes inside an article keep their own padding and spacing. */
.guide__body .cmd {
  margin: 0.5rem 0 1rem;
}
/* A four-column comparison does not fit a phone: it scrolls in its box. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--enamel-chip) transparent;
}
.guide-table--wide {
  min-width: 34rem;
  margin: 0;
}

/* On a phone the comparison becomes one card per question, every answer
   labelled, so no column is hidden off to the side. */
@media (max-width: 40rem) {
  .compare-table {
    min-width: 0;
  }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
  }
  .compare-table tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .compare-table tbody th {
    padding: 0 0 0.45rem;
    border: 0;
    color: var(--ink);
  }
  .compare-table td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.3rem 0;
    border: 0;
  }
  .compare-table td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-faint);
  }
}

/* ---------- star ask ---------- */

/* A small tariff plate bolted into the corner: the same signal enamel as the
   hero plate, so the ask reads as part of the locker bank, not an ad. */
.star-ask {
  position: fixed;
  z-index: 60;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.35rem 1.35rem 1.2rem;
  background:
    var(--plate-grain),
    linear-gradient(177deg, var(--signal) 0%, var(--signal-deep) 100%);
  color: var(--signal-ink);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    /* A dark edge keeps it distinct when it floats over another plate. */ 0 0 0
      1px rgba(7, 42, 46, 0.55),
    0 22px 48px -18px rgba(0, 0, 0, 0.75),
    0 -6px 24px -8px rgba(7, 42, 46, 0.55),
    0 4px 12px -4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(1.25rem) rotate(-1.2deg);
  transform-origin: 85% 100%;
  transition:
    opacity 0.26s var(--ease),
    transform 0.5s var(--ease);
}
.star-ask[data-state="open"] {
  opacity: 1;
  transform: none;
}
.star-ask[data-state="leaving"] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition-duration: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
  .star-ask,
  .star-ask[data-state="leaving"] {
    transform: none;
    transition: opacity 0.2s linear;
  }
}

.star-ask .rivet {
  width: 9px;
  height: 9px;
}
.star-ask .rivet--tl,
.star-ask .rivet--tr {
  top: 8px;
}
.star-ask .rivet--tl {
  left: 8px;
}
.star-ask .rivet--tr {
  right: 8px;
}

.star-ask__close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--signal-ink);
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.7;
}
.star-ask__close:hover {
  opacity: 1;
  background: rgba(26, 20, 3, 0.1);
}
.star-ask :focus-visible {
  outline-color: var(--signal-ink);
}

.star-ask__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}
.star-ask__title {
  margin: 0 2rem 0.45rem 0;
  font-size: 1.2rem;
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.star-ask__text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.star-ask__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
.star-ask__star {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--signal);
  background: var(--signal-ink);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 0 rgba(0, 0, 0, 0.25);
  transition:
    transform 0.08s var(--ease),
    background 0.18s var(--ease);
}
.star-ask__star:hover {
  background: #2c2208;
}
.star-ask__star:active {
  transform: translateY(1px);
}
.star-ask__star svg {
  flex: 0 0 auto;
}
.star-ask__later {
  padding: 0.4rem 0.1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--signal-ink);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-decoration-color: rgba(26, 20, 3, 0.35);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.star-ask__later:hover {
  text-decoration-color: currentColor;
}

.star-ask__thanks {
  margin: 0.2rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 84%;
}

/* On a phone the plate spans the width rather than hiding content in a
   corner it doesn't fit. */
@media (max-width: 30rem) {
  .star-ask {
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    width: auto;
  }
}

/* ---------- updating (guide) ---------- */

/* Arriving from "How to update" should land on something unmistakable: the
   section's heading carries a signal bar for a moment. */
.guide__body section:target > h2 {
  animation: arrived 2.4s var(--ease) 0.2s both;
}
@keyframes arrived {
  0%,
  45% {
    box-shadow: -0.9rem 0 0 -0.55rem var(--signal);
    color: var(--signal);
  }
  100% {
    box-shadow: -0.9rem 0 0 -0.55rem transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide__body section:target > h2 {
    animation: none;
    color: var(--signal);
  }
}

.update-latest {
  font-size: 0.92rem;
}
.update-latest strong {
  color: var(--signal);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
}

.update-ways {
  margin: 0.4rem 0 1.2rem;
  display: grid;
  /* Long commands scroll inside their box rather than widening the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}
.update-ways dt {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
  font-stretch: 88%;
  color: var(--ink);
}
.update-ways dt span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.update-ways dd {
  margin: 0;
}
.guide__body .update-ways .cmd {
  margin: 0.35rem 0 0;
}

.guide__body kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8em;
  padding: 0.08em 0.4em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--enamel-deep);
  color: var(--ink);
}
.release__cmd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
  padding: 0.02em 0.35em;
  border-radius: 2px;
  background: rgba(26, 20, 3, 0.12);
  white-space: nowrap;
}

/* ---------- guide feedback ---------- */

/* A small recessed plate at the end of a section: present, but quieter than
   the content it asks about. The two answers are one segmented control, and
   the chosen one lights in signal yellow so the click visibly lands. */
.helpful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.2rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  background: var(--enamel-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) inset;
}
.guide__body .helpful__q {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.helpful__seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.helpful__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.1rem;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    opacity 0.18s var(--ease);
}
.helpful__btn + .helpful__btn {
  border-left: 1px solid var(--rule);
}
/* The same thumb, turned over. */
.helpful__btn[data-helpful="no"] svg {
  transform: scaleY(-1);
}
.helpful__btn:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.helpful__btn[aria-pressed="true"] {
  color: var(--signal-ink);
  background: var(--signal);
  opacity: 1;
}
.helpful__btn[aria-pressed="true"] svg {
  animation: thumb-pop 0.45s var(--ease);
}
.helpful__btn:disabled {
  cursor: default;
}
.helpful__btn:disabled:not([aria-pressed="true"]) {
  opacity: 0.4;
}
.guide__body .helpful__more {
  flex-basis: 100%;
  margin: 0 0 0.1rem;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
@keyframes thumb-pop {
  40% {
    transform: scale(1.3) rotate(-8deg);
  }
}
.helpful__btn[data-helpful="no"][aria-pressed="true"] svg {
  animation-name: thumb-pop-down;
}
@keyframes thumb-pop-down {
  0%,
  100% {
    transform: scaleY(-1);
  }
  40% {
    transform: scaleY(-1) scale(1.3) rotate(8deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .helpful__btn svg {
    animation: none !important;
  }
}

/* ---------- changelog ---------- */

.changelog {
  margin-top: 1.5rem;
}
.guide__body .changelog__status {
  color: var(--ink-faint);
}
.guide__body .rel {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.guide__body .rel__tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.25rem;
  font-stretch: 100%;
  text-transform: none;
}
.rel__latest {
  font-family: "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  background: var(--signal);
  color: var(--signal-ink);
}
.guide__body .rel__meta {
  margin: 0.2rem 0 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.rel__notes h2,
.rel__notes h3 {
  margin: 1rem 0 0.4rem;
  font-size: 0.8rem;
  font-stretch: 88%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rel__notes ul {
  margin: 0;
}
.rel__notes li {
  font-size: 0.93rem;
}
/* GoReleaser lists each change with its commit hash; the hash is a link and
   reads as noise at full strength. */
.rel__notes li > a:first-child tt,
.rel__notes li > a:first-child code {
  color: var(--ink-faint);
  font-size: 0.8em;
}