/* Wild Construct — site design system.
 *
 * Values taken from the /staging/ design prototype, not from the previous
 * single-page site. The prototype carries them as inline styles because its
 * design tool has no stylesheet; here they become tokens and classes so more
 * than one page can share them.
 *
 * Two deliberate departures from the prototype's own markup:
 *   - "Saira Condensed" is dropped from every font stack. It is a preview
 *     fallback inside the design tool; the real stack is Agency FB.
 *   - Ruled grids draw internal dividers with :not(:last-child) rather than a
 *     hand-set border on each cell. The prototype repeats the value per item
 *     because its style strings are shared across loop iterations.
 */

:root {
  color-scheme: dark;

  --void: #000000;
  --paper: #f4f2ed;
  --paper-soft: #c8c3bb;
  --mute: #918c84;
  --gold: #e6a23c;
  --gold-hot: #ffc153;
  --line: #29251f;
  --line-gold: rgba(230, 162, 60, .42);
  --ink-on-gold: #160e03;

  /*
   * The plug-in's primary button, exactly: --gold-hi and --gold-dk from
   * entropy-plugin/cep/com.wildconstruct.entropy/css/style.css, where
   * --gold-btn is linear-gradient(180deg, hi, dk). Harry, 11 Sep 2026 —
   * "I wonder if we mimic the button in the plugin?" These are the values
   * that make the site's Buy button and the plug-in's Composer button read
   * as the same object rather than two golds that nearly agree.
   */
  --gold-btn-hi: #f0c556;
  --gold-btn-dk: #b98c24;

  --field-stage: #040403;
  --input-fill: #0b0a08;
  --input-line: #6b6258;

  --font-display: "agency-fb", "Arial Narrow", sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;

  --page-pad: clamp(1.25rem, 4vw, 4.75rem);
  --content: 96rem;
  --radius-control: .28rem;
  --radius-media: .5rem;
}

* { box-sizing: border-box; }

/*
 * The browser hides [hidden] with a UA rule, and ANY author rule that sets
 * display beats it — author styles win over UA styles regardless of
 * specificity. So `.checkout-grid { display: grid }` on an element marked
 * hidden rendered it anyway.
 *
 * That shipped: the signed-out checkout showed "Sign in to continue" AND the
 * order form at the same time, with a read-only email field telling a
 * signed-out visitor to change the address in their account. Five elements
 * across four pages were affected, including the inline field errors, which
 * were permanently visible.
 *
 * !important is warranted here: hidden means hidden, and every display rule in
 * this file would otherwise have to remember to exclude it.
 */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--void); }
html { overflow-x: clip; min-width: 20rem; scrollbar-color: var(--gold) #0b0a09; scrollbar-width: thin; }

body {
  overflow-x: clip;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: #170e02; }
img { max-width: 100%; }

a { color: var(--paper-soft); text-decoration: none; }
a:hover { color: var(--gold-hot); }

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

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

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--page-pad);
  z-index: 90;
  border: 1px solid var(--gold);
  border-radius: var(--radius-control);
  padding: .7rem 1rem;
  background: #050403;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: .75rem; }

/* --- Shell ---------------------------------------------------------------- */

.wrap {
  width: min(100%, var(--content));
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem clamp(1rem, 3vw, 2.5rem);
  /* Never wrap: a two-row header on phones eats the first screen and
     pushes the language picker (footer-only before the mobile menu) out of
     reach. Narrow viewports collapse the nav behind .nav-toggle instead. */
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(230, 162, 60, .32);
  padding: .75rem var(--page-pad);
  background: rgba(3, 3, 2, .94);
  backdrop-filter: blur(10px);
}

/*
 * The lockup is now an image, not letter-spaced type. Sized by height so it
 * sits on the header's optical center line whatever the artwork's proportions
 * are, with width following from the aspect ratio.
 */
.lockup {
  display: inline-flex;
  align-items: center;
  transition: opacity .2s ease;
}
.lockup img {
  display: block;
  height: 1.9rem;
  width: auto;
}
.lockup:hover { opacity: .82; }
.lockup:focus-visible { outline-offset: 6px; }

@media (max-width: 26rem) {
  /* Small phones: the wordmark and the menu cannot both have full size. */
  .lockup img { height: 1.6rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .5rem clamp(1rem, 2.2vw, 2.25rem);
  flex-wrap: nowrap;
  font-family: var(--font-display);
}

/* Mobile menu control. Hidden on wide viewports; the full nav fits there.
   The checkbox is the real control (works with JS off); the label is the hit
   target. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nav-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border: 1px solid rgba(230, 162, 60, .42);
  border-radius: var(--radius-control);
  padding: 0;
  background: transparent;
  color: var(--paper-soft);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-toggle:hover,
.nav-toggle-input:checked + .nav-toggle,
.nav-toggle-input[aria-expanded="true"] + .nav-toggle {
  color: var(--paper);
  border-color: var(--gold);
  background: rgba(230, 162, 60, .1);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -.35rem; }
.nav-toggle-bars::after { top: .35rem; }
.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars { background: transparent; }
.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle-input:checked + .nav-toggle .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Language picker inside the header: mobile panel only. Desktop keeps the
   footer picker so the chrome stays one row. */
.nav-language {
  display: none;
  width: 100%;
  margin-top: .35rem;
  border-top: 1px solid var(--line);
  padding-top: .9rem;
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .4rem;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0;
  background: none;
  color: var(--paper-soft);
  font-family: var(--font-display);
  /*
   * Uppercase, and larger. Caps need the extra tracking: at .02em the
   * letterforms collide and the word reads as a block rather than a word,
   * which is the usual reason all-caps navigation feels harder to scan than
   * the sentence case it replaced.
   */
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.nav-link:hover,
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
/* The current page's item, whether it is a link or a menu trigger. The rule
   named only .nav-link, so a dropdown standing for the current page could
   never have shown as current even once something set the attribute. */
.nav-link[aria-current="page"],
.nav-trigger[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.nav-caret { color: var(--mute); font-size: .55rem; }
.nav-sparky { width: 1.35rem; height: 1.35rem; margin-right: .5rem; object-fit: contain; }

.nav-group { position: relative; }

/*
 * The menu's offset from its trigger is padding on this wrapper, which stays
 * INSIDE the hover region. With `top: calc(100% + gap)` on the panel instead,
 * the pointer crosses dead space on the way down, mouseleave fires, and the
 * menu closes before you reach it.
 */
.nav-menu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  width: min(21rem, calc(100vw - 2.5rem));
  padding-top: .75rem;
}

.nav-group:hover .nav-menu-wrap,
.nav-group:focus-within .nav-menu-wrap,
.nav-trigger[aria-expanded="true"] + .nav-menu-wrap { display: block; }

.nav-menu {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-control);
  background: #050403;
  padding: .35rem;
}

.nav-menu-item {
  display: block;
  border-radius: var(--radius-control);
  padding: .9rem 1rem;
  transition: background .2s ease;
}
.nav-menu-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.nav-menu-item:hover { background: rgba(230, 162, 60, .1); }

/* Dropdown entries match the top level, so the menu reads as one system.
   The notes underneath stay sentence case — they are prose, and prose set in
   caps stops being readable at about four words. */
.nav-menu-name {
  display: block;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-menu-item:hover .nav-menu-name { color: var(--gold-hot); }

.nav-menu-note {
  display: block;
  margin-top: .2rem;
  color: var(--mute);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.nav-tag {
  margin-left: .45rem;
  color: var(--mute);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  vertical-align: middle;
}

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

.hero {
  position: relative;
  display: flex;
  /* The hero was 82vh with content anchored to the bottom, so most of a
     screen was empty above the headline before anything was read. Sized to
     the content it holds instead. */
  min-height: 62vh;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
}

.hero-field { position: absolute; inset: 0; opacity: .58; }
.hero-field img { width: 100%; height: 100%; object-fit: cover; }

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .52) 42%, rgba(0, 0, 0, .2) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .5) 100%);
}

.hero-body {
  position: relative;
  width: min(100%, var(--content));
  margin: 0 auto;
  /*
   * Roughly half the space above the headline that this had before.
   *
   * Most of that space was not this padding at all: the hero was 82vh with
   * content anchored to the bottom, so the leftover height piled up above the
   * copy. Sizing the hero to its content removed that, and this padding is
   * what remains — measured at ~120px on a 900px-tall viewport, against ~243px
   * before.
   */
  padding: clamp(4rem, 13vh, 7.5rem) var(--page-pad) clamp(3.5rem, 7vh, 5.5rem);
}

.hero-title {
  max-width: 8ch;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 12.8vw, 12rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .77;
  text-transform: uppercase;
  text-shadow: 0 .08em .36em rgba(0, 0, 0, .96);
  text-wrap: balance;
}

.hero-copy { width: min(32rem, 100%); margin-top: clamp(2.8rem, 6vh, 5.5rem); }

.hero-belief {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  text-shadow: 0 .08em .36em rgba(0, 0, 0, .96);
  text-wrap: balance;
}

.hero-description {
  max-width: 31rem;
  margin: 1.35rem 0 0;
  /* Full-opacity paper over the field, per the contrast rule: alpha-muted
     type does not hold 4.5:1 against a live particle background. */
  color: var(--paper);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  text-shadow: 0 1px 1rem rgba(0, 0, 0, .98);
}
.hero-description span { display: block; margin-top: .35rem; color: var(--paper-soft); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  margin-top: 2rem;
}

/* --- Controls ------------------------------------------------------------- */

/*
 * Button type is 1.06rem, not the .91rem it started at. Agency FB is a
 * condensed face: at the same point size it reads visibly smaller than the
 * Open Sans used by .text-action beside it, so a button and the text link next
 * to it looked like two different sizes. The extra tracking is for the same
 * reason -- condensed caps and lining figures need air at control size.
 */

/*
 * Modeled on the plug-in's primary button: vertical gold gradient, ink text,
 * 6px radius. Someone who has used Entropy should recognize the buy button as
 * the same control they press inside After Effects.
 *
 * Caps with tracking, and roughly twice the width it was. "Buy Now" set flush
 * in a snug box read as a link with a background; a button people are meant to
 * press wants to look pressable, and min-width stops a two-word label from
 * producing a button smaller than the sentence next to it.
 */
.button {
  display: inline-flex;
  min-height: 3.15rem;
  min-width: 12rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: .8rem 2.6rem;
  background: linear-gradient(180deg, var(--gold-btn-hi), var(--gold-btn-dk));
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  /* Caps collide at .06em. Tracking is not decoration here — it is what keeps
     a word readable once the letterforms are all the same height. */
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover {
  background: linear-gradient(180deg, var(--gold-hot), var(--gold-btn-hi));
  border-color: var(--gold-hot);
  color: var(--ink-on-gold);
  transform: translateY(-2px);
}
.button:active { transform: none; }
.button[disabled] { background: #765529; border-color: #765529; color: #17100a; cursor: not-allowed; transform: none; }

/*
 * The secondary of the pair: same shape and weight as .button, gold outline
 * instead of gold fill, so a page can offer two actions without both shouting.
 *
 * This class was already in use on the support page and the About page before
 * it existed anywhere in the stylesheet, so those links were rendering as
 * plain body text.
 */
.button-outline {
  display: inline-flex;
  min-height: 3.15rem;
  min-width: 12rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-gold);
  border-radius: 6px;
  padding: .8rem 2.6rem;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.button-outline:hover {
  border-color: var(--gold);
  background: rgba(230, 162, 60, .1);
  color: var(--gold-hot);
  transform: translateY(-2px);
}
.button-outline:active { transform: none; }

.text-action {
  display: inline-block;
  border: 0;
  border-bottom: 1px solid var(--line-gold);
  padding: .68rem 0 .52rem;
  background: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.text-action:hover { color: var(--gold-hot); border-bottom-color: var(--gold); }

/* --- Capability rail ------------------------------------------------------ */

.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  width: min(100%, var(--content));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--page-pad);
  background: rgba(0, 0, 0, .78);
}

.rail-item {
  min-height: 7rem;
  padding: 1.65rem 1.5rem 1.5rem;
  color: var(--paper-soft);
}
.rail-item:first-child { padding-left: 0; }
.rail-item:last-child { padding-right: 0; }
.rail-item:not(:last-child) { border-right: 1px solid var(--line); }

.rail-index {
  display: block;
  margin-bottom: .45rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .16em;
}
.rail-item span:last-child { font-size: clamp(.88rem, 1.15vw, 1rem); line-height: 1.25; }

/* --- Story + proof rows --------------------------------------------------- */

/*
 * Halved, twice over. This was clamp(7rem, 14vw, 13rem) -- up to 208px top
 * AND bottom, so two stacked sections put over 400px of empty black between
 * one idea and the next. It came from the prototype, where the design tool
 * emitted generous inline spacing, and got carried in wholesale.
 */
/* Halved once already; halved again. On a tall display the previous value put
   most of a screen of nothing between a heading and the argument under it. */
.story { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

/*
 * Four classes below were in use across the site and defined nowhere, so every
 * page rendered them at browser defaults. Found by sweeping every class used
 * in markup against every class the linked stylesheets actually define, after
 * .button-outline and .section-label both turned up the same way.
 *
 * Values follow the /staging/ prototype's own inline type scale rather than
 * being invented here.
 */

/* The lead paragraph under a page heading, on about a dozen pages. It has been
   rendering at body size, so no page had a step between its heading and its
   first paragraph. */
.lede {
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

/* A section heading that is a statement rather than a label -- the home page's
   "Product news from Wild Construct." */
.section-headline {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
  text-transform: none;
}

/* "Soon" beside Lumen Glow in the footer. Quieter than the link it qualifies,
   or it reads as part of the product's name. */
.footer-note {
  margin-left: .4rem;
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* The sign-in link carries the sparky mark, so it needs the image and the word
   on one baseline; .nav-link already supplies everything else. */
.nav-signin { white-space: nowrap; }

/*
 * A quiet eyebrow above a section, not a heading in its own right. Used on ten
 * pages before it existed anywhere in this stylesheet, so every one of them
 * was rendering it at default heading or paragraph size.
 */
.section-label {
  margin: 0 0 .9rem;
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.2;
  text-transform: uppercase;
}

.story-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  /* 10rem of gutter pushed the paragraph so far right it read as a separate
     column of the page rather than the sentence belonging to the heading. */
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}

.story-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
  text-wrap: balance;
}

.story-intro p {
  /* Fills its column rather than stopping short of it. 38rem left a third
     column of empty page to the right of the text on a wide display. */
  max-width: 46rem;
  margin: 0 0 .35rem;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

.proof-list { margin: clamp(6rem, 12vw, 11rem) 0 0; border-top: 1px solid var(--line); }

.proof-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 4.8vw, 5rem);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.proof-row h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 700;
  /*
   * Caps, matching the buttons. The tracking flips sign to do it: -.02em is
   * right for mixed-case display type, where it pulls letterforms of varying
   * height together, and wrong for caps, where every letter is the same height
   * and the same negative value jams them into a block.
   */
  letter-spacing: .05em;
  text-transform: uppercase;
}

.proof-row p {
  max-width: 43rem;
  margin: .9rem 0 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

.render-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* --- Media ---------------------------------------------------------------- */

.film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(230, 162, 60, .34);
  padding: 0;
  background: var(--field-stage) center / cover no-repeat;
  cursor: pointer;
  transition: border-color .3s ease;
}
.film:hover { border-color: rgba(255, 193, 83, .8); }

.film[data-still] { cursor: default; }
.film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  transition: opacity .3s ease, transform .3s ease;
}
.film[data-still]:hover img { opacity: 1; transform: scale(1.018); }

.film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
  transition: opacity .3s ease, transform .3s ease;
}
.film:hover video { opacity: .98; transform: scale(1.018); }

.film-action {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-control);
  padding: .35rem .6rem;
  background: rgba(0, 0, 0, .72);
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.film:hover .film-action { border-color: var(--gold); color: var(--paper); }

.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-media);
  background: #050403;
}
.video-shell iframe { width: 100%; height: 100%; border: 0; display: block; }

.film-dialog {
  width: min(60rem, calc(100vw - 2.5rem));
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-media);
  padding: 0;
  background: #050403;
  color: var(--paper);
}
.film-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.film-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; }
.film-dialog-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.film-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* --- Walkthrough + requirements + buy ------------------------------------- */

.walkthrough { padding-bottom: clamp(7rem, 13vw, 12rem); }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
}
.section-head p { max-width: 32rem; margin: 0 0 .3rem; color: var(--paper-soft); line-height: 1.6; }

.closing { padding-bottom: clamp(7rem, 12vw, 12rem); }

.closing h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 1.5rem;
}

.spec {
  border-top: 1px solid var(--line);
  padding: 1.65rem 1.5rem 1.5rem;
}
.spec:first-child { padding-left: 0; }
.spec:last-child { padding-right: 0; }

.spec strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--gold);
  font-family: var(--font-display);
  /* Up from .65rem, then again from .85rem, and Regular rather than Bold. At
     10px with .16em tracking these labels were decorative rather than
     readable — the eye skipped them and went to the body text, which is the
     opposite of what a label is for. Bold made it worse: at this size the
     compressed face's heavy strokes close up the counters, so the lighter
     weight is the more legible one. The same change runs through every small
     tracked label in this file (footer, specs, ownership points, cart, docs). */
  font-size: .98rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spec span { color: var(--paper-soft); font-size: 1.175rem; line-height: 1.5; }

.buy-block {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.buy-block h2 { max-width: 18ch; text-wrap: balance; }
.buy-block p { max-width: 30rem; margin: 1rem 0 0; color: var(--paper-soft); line-height: 1.6; }
.buy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }

.buy-status { margin: .9rem 0 0; min-height: 1.2rem; color: var(--mute); font-size: .92rem; }
.buy-status[data-tone="error"] { color: var(--gold-hot); }

/* --- Footer --------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); background: rgba(0, 0, 0, .82); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.footer-col { padding: 2.4rem 1.5rem; }
.footer-col:first-child { padding-left: 0; }
.footer-col:last-child { padding-right: 0; }
.footer-col:not(:last-child) { border-right: 1px solid var(--line); }

.footer-brand {
  display: block;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.footer-col > p { margin: .9rem 0 0; color: var(--mute); font-size: .92rem; }

.footer-label {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: .6rem; }
.footer-col a { font-size: .95rem; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  width: min(100%, var(--content));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 1.4rem var(--page-pad);
  color: var(--mute);
  font-size: .86rem;
}
.footer-base a { color: var(--mute); }

/* --- Responsive ----------------------------------------------------------- */

/* Header collapses before the rest of the page: uppercase tracked labels
   overflow a tablet width long before the rail/footer need to stack. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .15rem;
    border-bottom: 1px solid rgba(230, 162, 60, .32);
    padding: .55rem var(--page-pad) 1rem;
    background: rgba(3, 3, 2, .98);
    backdrop-filter: blur(10px);
  }
  .nav-toggle-input:checked ~ .site-nav,
  .site-header:has([data-nav-toggle]:checked) .site-nav {
    display: flex;
  }
  .site-nav > .nav-link,
  .site-nav > .nav-group {
    width: 100%;
  }
  .site-nav .nav-link,
  .site-nav .nav-trigger {
    width: 100%;
    justify-content: flex-start;
    letter-spacing: .1em;
  }
  .nav-group { width: 100%; }
  /* Touch: open submenus only from the pressed state, not hover. Hover on
     phones is sticky and would leave a menu open after a scroll. */
  .nav-group:hover .nav-menu-wrap,
  .nav-group:focus-within .nav-menu-wrap { display: none; }
  .nav-trigger[aria-expanded="true"] + .nav-menu-wrap { display: block; }
  .nav-menu-wrap {
    position: static;
    width: 100%;
    padding-top: .2rem;
  }
  .nav-language { display: block; }
}

@media (max-width: 760px) {
  .rail-item,
  .spec,
  .footer-col {
    border-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
  .rail-item:not(:last-child),
  .footer-col:not(:last-child) { border-bottom: 1px solid var(--line); }
  .hero { min-height: 54vh; }
}

@media (max-width: 440px) {
  .hero-actions,
  .buy-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button,
  .buy-actions .button,
  .buy-actions .button-outline { width: 100%; }
  .footer-base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .film:hover video { transform: none; }
  .button:hover { transform: none; }
}

/*
 * .wrap owns the page gutter. Any section that also carries .wrap must set
 * vertical padding with padding-block / padding-top / padding-bottom, never
 * the `padding` shorthand — the shorthand resets left and right to zero and
 * pins the copy to the viewport edge. This has been introduced twice.
 */

/* --- Forms ---------------------------------------------------------------- */

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem 1.25rem;
}

.field-block { display: block; }
.field-block + .field-block,
.field-row + .field-block,
.field-block + .field-row,
.field-row + .field-row { margin-top: 1.1rem; }

/*
 * Fields side by side inside a row are grid siblings, so the stacking margin
 * above would push every column after the first down by 1.1rem and leave
 * "Last name" hanging below "First name". The row's own gap handles spacing.
 */
.field-row > .field-block + .field-block { margin-top: 0; }

.field-label {
  display: block;
  margin-bottom: .5rem;
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field-optional { color: var(--mute); letter-spacing: .04em; text-transform: none; }

.field {
  display: block;
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--input-line);
  border-radius: var(--radius-control);
  padding: .78rem .9rem;
  background: var(--input-fill);
  color: var(--paper);
  caret-color: var(--gold-hot);
  /* Reset the label's display typography: without this the uppercase
     letter-spacing inherits into the control and the typed value looks wrong. */
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.field::placeholder { color: #8f887d; }
.field:hover { border-color: #8c7e6c; }
.field:focus {
  border-color: var(--gold);
  background: #0e0c09;
  outline: 2px solid rgba(230, 162, 60, .3);
  outline-offset: 2px;
}

/* A native select, so the country menu is a real menu on every platform —
   including the wheel picker on iOS — rather than a scripted listbox. */
select.field {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-soft) 50%),
                    linear-gradient(135deg, var(--paper-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.45rem, calc(100% - .8rem) 1.45rem;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
select.field option { background: var(--input-fill); color: var(--paper); }

textarea.field,
.field-textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.55;
}

.support-page { max-width: 46rem; }
.support-form,
.support-success { margin-top: 2.5rem; }
.support-form { max-width: 36rem; }
.support-technical {
  margin: 1.1rem 0 0;
  border: 0;
  padding: 0;
}
.support-technical .field-label { margin-bottom: .65rem; }
.support-email { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.support-docs a,
.support-community a { color: var(--paper); text-decoration: underline; text-underline-offset: .28em; }
.support-docs a:hover,
.support-community a:hover { color: var(--gold-hot); }
.form-status[data-state="error"] { color: var(--gold-hot); }
.form-status[data-state="ok"] { color: var(--paper-soft); }

.field-error {
  display: block;
  margin-top: .4rem;
  color: var(--gold-hot);
  font-size: .86rem;
}
.field[aria-invalid="true"] { border-color: var(--gold-hot); }

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.order-summary { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  color: var(--paper-soft);
}
.summary-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.summary-total strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.summary-note { margin: 1.1rem 0 0; color: var(--mute); font-size: .9rem; line-height: 1.55; }

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Home ----------------------------------------------------------------- */

.home-hero { min-height: 60vh; }
.home-hero .hero-field { opacity: .62; }

.home-hero .hero-scrim {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, .18) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .52) 100%);
}

.home-hero h1 {
  max-width: 16ch;
  margin: 0 0 1.6rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .86;
  text-transform: uppercase;
  text-shadow: 0 .08em .36em rgba(0, 0, 0, .96);
  text-wrap: balance;
}

.home-hero .hero-lede {
  max-width: 46ch;
  margin: 0 0 2.2rem;
  /* Full-opacity paper over the field: alpha-muted type does not hold 4.5:1
     against a live particle background. */
  color: var(--paper);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  text-shadow: 0 1px 1rem rgba(0, 0, 0, .98);
}

.product-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 4.8vw, 5rem);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.product-row:first-of-type { border-top: 1px solid var(--line); }

.product-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.product-name {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .9;
}

.product-status {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-row p { max-width: 38rem; margin: 1.1rem 0 0; color: var(--paper-soft); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; }
.product-row .text-action { margin-top: 1.4rem; }

/* An unreleased product is stated quietly, not dressed up as available. */
.product-row[data-tone="quiet"] .product-name,
.product-row[data-tone="quiet"] .product-status,
.product-row[data-tone="quiet"] p { color: var(--mute); }

.media-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--field-stage);
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.principle h3 {
  margin: 1rem 0 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  /* Caps, like the Why Buy subheads (.proof-row h3 above) and for the same
     reason: the condensed display face is easier to read in caps at subhead
     size. Positive tracking for caps, as there. */
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}
.principle p { margin: .8rem 0 0; max-width: 24rem; color: var(--paper-soft); line-height: 1.6; }

.signup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  /* 10rem of gutter pushed the paragraph so far right it read as a separate
     column of the page rather than the sentence belonging to the heading. */
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}
.signup-grid h2 { max-width: 14ch; text-wrap: balance; }
.signup-grid > div:first-child > p { max-width: 28rem; margin: 1.5rem 0 0; color: var(--paper-soft); }

.signup-form { display: grid; gap: .9rem; }
.signup-form .field-row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.signup-form .field-email { grid-column: 1 / -1; }
.signup-form .button { justify-self: start; }
.form-note { margin: 0; color: var(--paper-soft); font-size: .875rem; line-height: 1.5; }
.form-status { margin: 0; min-height: 1.2rem; color: var(--gold-hot); font-size: .9rem; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/*
 * Everything below the hero sits over the field. The hero's scrim is a
 * gradient tuned for the hero itself — strongest at the left, nearly clear at
 * the right — so long paragraphs beside right-hand media fall under 4.5:1.
 */
.field-band { position: relative; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .82); }

/* --- Hero demo video ------------------------------------------------------ */

/*
 * The hero splits into copy and demo above 62rem. Below that the video drops
 * under the copy rather than shrinking into a stamp beside it.
 */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}

@media (min-width: 62rem) {
  /*
   * The reel takes the larger share, not the copy. Brian, 11 Sep 2026: make
   * the video bigger.
   *
   * It was 1.05fr of text against 1fr of video, so the thing that actually
   * shows the product was the smaller half of its own hero. The copy loses
   * little — it is four short lines and a pair of buttons, and it reads
   * better at a tighter measure than it did stretched across half a wide
   * display.
   */
  .hero-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; }
}

.hero-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-media);
  background: #050403;
}

/* A still stands in the same frame where a page has no reel yet. */
.hero-demo video,
.hero-demo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown until playback starts, and left in place for anyone who opts out of
   motion, so the frame is never an empty black box. */
.hero-demo-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: var(--paper);
  cursor: pointer;
  transition: background .2s ease;
}
.hero-demo-play:hover { background: rgba(0, 0, 0, .18); }
.hero-demo[data-playing="true"] .hero-demo-play { display: none; }

.hero-demo-play span {
  display: inline-flex;
  min-height: 3.15rem;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-control);
  padding: .8rem 1.35rem;
  background: rgba(3, 3, 2, .82);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .06em;
  letter-spacing: .04em;
}
.hero-demo-play:hover span { border-color: var(--gold); color: var(--gold-hot); }

/* --- Order confirmation --------------------------------------------------- */

/* Two columns rather than auto-fit's three: the copy in these cells is
   sentences, and a 11rem track turns a sentence into a ladder. */
.spec-grid-pair { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* --- Licenses ------------------------------------------------------------- */

/*
 * One license per row, full width.
 *
 * These were laid out with .spec-grid, which fits as many columns as it can.
 * That suits a row of short specs and actively fights a license key: at seven
 * licenses each column was a few characters wide and the key ran forty lines
 * down the page. Nothing is gained by putting two of these side by side, so
 * the list never does.
 */
.license-list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}

/* --- Ownership points ------------------------------------------------------ */

/*
 * Deliberately the same columns and gutter as .proof-row, so the ownership
 * list sits on the same left edge as every image above it. Any other ratio
 * puts a step in a line the eye has been following down the whole page.
 */
.ownership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 4.8vw, 5rem);
  align-items: start;
}


/*
 * The short facts beside "Bought, not rented". A list rather than the spec
 * grid that was here: three one-line points read as points, where .spec cells
 * gave each one a rule and a column and turned two sentences into furniture.
 */
.ownership-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ownership-points li {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.ownership-points strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--gold);
  font-family: var(--font-display);
  /* Up from .69rem, then .9rem, matching the lifts given to .spec strong. */
  font-size: 1.03rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.ownership-points span {
  color: var(--paper-soft);
  /* 1.3rem overshot by about 2px. The labels keep their lift — they were the
     part that was hard to read; this was just too far. */
  font-size: 1.175rem;
  line-height: 1.5;
}

/* --- License key ---------------------------------------------------------- */

/*
 * The key on the account page. It is the thing the buyer came for, so it is
 * set apart from the order's date and price rather than run in with them.
 *
 * Wrapping is anywhere: a Keygen key is a long unbroken run of characters with
 * no space to break at, so without this it either overflows the card or forces
 * the whole grid wider on a phone.
 */
/*
 * The key on its own line, the copy button under it. Side by side, the button
 * was pushed to wherever a 500-character key happened to stop wrapping, which
 * is a different place on every card.
 */
.license-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  margin: .6rem 0 .75rem;
}

.license-key {
  display: block;
  width: 100%;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-control);
  padding: .4rem .6rem;
  background: var(--input-fill);
  color: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .92rem;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.reference-block {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.reference-block strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reference-block code {
  display: block;
  /* 38 characters that must survive being copied into a support email:
     monospace, selectable, and allowed to wrap rather than overflow. */
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .95rem;
  color: var(--paper);
  word-break: break-all;
  line-height: 1.5;
}

.steps { margin: 0; padding: 0 0 0 1.2rem; color: var(--paper-soft); }
.steps li { padding: .55rem 0; }
.steps li:not(:last-child) { border-bottom: 1px solid var(--line); }
.steps li::marker { color: var(--gold); font-family: var(--font-display); font-weight: 700; }

/* --- Team ----------------------------------------------------------------- */

/*
 * Portraits are 4:5 and all three were shot to match, so the grid can rely on
 * a fixed aspect-ratio rather than cropping defensively. Three across on a
 * wide screen, one on a phone; nothing in between looks stranded because the
 * minimum column is wide enough to hold a portrait and a name.
 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.team-portrait {
  display: block;
  width: 100%;
  /*
   * height:auto is load-bearing, not tidying. The width/height attributes on
   * the img are a definite height to the browser, and aspect-ratio is ignored
   * unless one axis is auto — without this the portraits render at their full
   * 1000px height in a 274px column.
   */
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-media);
  background: var(--field-stage);
  object-fit: cover;
  /* Slightly cooler and quieter than the page, so three faces do not fight
     the headline for attention. */
  filter: saturate(.92) contrast(1.02);
}

.team-name {
  margin: 1.15rem 0 .2rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.05;
  text-transform: uppercase;
}

.team-role {
  margin: 0 0 .85rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.team-bio {
  margin: 0;
  color: var(--paper-soft);
  font-size: .95rem;
  line-height: 1.62;
}

/* --- Long-form prose (Artist Compact) ------------------------------------- */

/* Sits under a .story-intro and continues its argument, so it lines up with
   the intro rather than starting a new column of its own. */
.prose-column {
  max-width: 54ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--paper-soft);
}
.prose-column p { margin: 0 0 1.1rem; line-height: 1.65; }
.prose-column p:last-child { margin-bottom: 0; }
.prose-column strong { color: var(--paper); }

.pull-quote {
  max-width: 42ch;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-left: 2px solid var(--gold);
  padding: .2rem 0 .2rem clamp(1.1rem, 2vw, 1.75rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
  text-wrap: balance;
}

.pull-quote-label {
  display: block;
  margin-bottom: .6rem;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.judge-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.judge-list li {
  position: relative;
  padding: .5rem 0 .5rem 1.4rem;
  border-bottom: 1px solid var(--line);
  color: var(--paper-soft);
}
.judge-list li:last-child { border-bottom: 0; }
.judge-list li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  content: "→";
}

/* --- Essay ---------------------------------------------------------------- */

/*
 * For pages that are prose first: the Artist Compact is an argument to be
 * read start to finish, not a set of features to be scanned. It was built out
 * of the site's card and grid components and fought itself as a result -- an
 * essay chopped into panels reads as neither.
 *
 * So: one column at a real measure, hierarchy carried by type and space
 * rather than by borders and fills, and almost no chrome.
 */
.essay {
  width: min(100%, 42rem);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.essay > section { padding-block: clamp(2rem, 4vw, 3.25rem); }
.essay > section + section { border-top: 1px solid var(--line); }

.essay h2 {
  margin: 0 0 1.1rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.essay h3 {
  margin: 2rem 0 .6rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.essay p {
  margin: 0 0 1.15rem;
  color: var(--paper-soft);
  /* 1.7 rather than the site's 1.55: this is read in long passages, not
     scanned in short blocks. */
  font-size: 1.05rem;
  line-height: 1.7;
}
.essay p:last-child { margin-bottom: 0; }
.essay strong { color: var(--paper); }

/* A line the argument turns on. No box, no fill -- just weight and air. */
.essay .turn {
  margin: 1.6rem 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .01em;
  text-wrap: balance;
}

/* The seven properties, and the five commitments. Numbered where the source
   numbers them, plain where it does not. */
.essay ol,
.essay ul { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: item; }
.essay ol > li,
.essay ul > li {
  position: relative;
  margin-bottom: 1.35rem;
  padding-left: 2.6rem;
  color: var(--paper-soft);
  line-height: 1.65;
}
.essay ol > li::before {
  position: absolute;
  left: 0;
  top: .1rem;
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.essay ul > li::before {
  position: absolute;
  left: .35rem;
  color: var(--gold);
  content: "—";
}
/*
 * A list item that OPENS with a label — "Directable", "Your work is yours" —
 * gets that label as a heading above its explanation.
 *
 * Scoped to :first-child deliberately. The unscoped version caught inline
 * emphasis mid-sentence too, so a step reading "Open Navigator from the
 * Window > Extensions menu" broke into three lines with the menu path
 * shouting in uppercase on its own.
 */
.essay li > strong:first-child {
  display: block;
  margin-bottom: .2rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Inline emphasis inside a step stays inline. */
.essay li b { color: var(--paper); font-weight: 700; }

.essay-meta {
  margin: 0 0 .9rem;
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* --- Full-width page head ------------------------------------------------- */

/*
 * For a page that is mostly words.
 *
 * .story-intro is a TWO-column grid with a very wide gap — a heading on one
 * side, a supporting paragraph on the other. It works for a section that
 * introduces a grid of cards below it, and it fails for a text page: give it
 * three children and they scatter across the columns, leaving an eyebrow
 * marooned on the left and a headline stranded on the right with a screen of
 * black between them.
 *
 * This is the single-column alternative. The heading runs the full width, the
 * text under it sits at a readable measure rather than being squeezed into
 * half the page, and nothing is pushed down the screen to make room for a
 * column that isn't there.
 */
.page-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.page-head h2 {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
  text-wrap: balance;
}

.page-head p {
  /* Wider than .story-intro's 38rem: this is not sharing the row with
     anything, so it can run to a full reading measure. */
  max-width: 62ch;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}
.page-head p strong { color: var(--paper); }

/* --- Documentation -------------------------------------------------------- */

/*
 * Sidebar and body. The sidebar repeats on every page on purpose: a reader
 * deep in the control reference should be able to see the whole set and move
 * sideways, not have to go back to an index to find the next thing.
 */
.doc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
@media (min-width: 60rem) {
  .doc-shell { grid-template-columns: 15rem minmax(0, 1fr); }
  .doc-nav { position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; }
}

.doc-nav-home { margin: 0 0 1.4rem; }
.doc-nav-home a {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.doc-nav-group { margin-bottom: 1.6rem; }
.doc-nav-label {
  margin: 0 0 .5rem;
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.doc-nav ul { margin: 0; padding: 0; list-style: none; }
.doc-nav li { margin: 0; }
.doc-nav li a {
  display: block;
  border-left: 2px solid var(--line);
  padding: .38rem 0 .38rem .75rem;
  color: var(--paper-soft);
  font-size: .92rem;
  line-height: 1.35;
}
.doc-nav li a:hover { border-left-color: var(--gold); color: var(--paper); }
.doc-nav li a.is-current { border-left-color: var(--gold); color: var(--gold); }

.doc-body { min-width: 0; }
.doc-body h1 {
  margin: 0 0 1.4rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.doc-body h2 {
  margin: 2.6rem 0 .9rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.doc-body h3 {
  margin: 2rem 0 .5rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.doc-body p { max-width: 68ch; margin: 0 0 1rem; color: var(--paper-soft); line-height: 1.68; }
.doc-body ul, .doc-body ol { max-width: 68ch; margin: 0 0 1.2rem; padding-left: 1.3rem; }
.doc-body li { margin-bottom: .4rem; color: var(--paper-soft); line-height: 1.6; }
.doc-body strong { color: var(--paper); }
.doc-body a { color: var(--gold); text-decoration-color: rgba(230, 162, 60, .4); }
.doc-body a:hover { color: var(--gold-hot); }

/* An anchor target must clear the sticky header when jumped to. */
.doc-body [id] { scroll-margin-top: 6rem; }

/* Reference tables are wide; they scroll in their own box so the page never
   scrolls sideways. */
.doc-table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 1.6rem; }
.doc-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.doc-table th, .doc-table td {
  border-bottom: 1px solid var(--line);
  padding: .7rem 1rem .7rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.doc-table th {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-table td { color: var(--paper-soft); }

/* --- Tutorials ------------------------------------------------------------ */

.tutorial-section + .tutorial-section { margin-top: clamp(3rem, 6vw, 5rem); }

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

/* 16:9 with the thumbnail filling it, so a card is the same height whatever
   YouTube served. */
.tutorial-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-media);
  background: var(--field-stage);
}
.tutorial-frame img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.tutorial-frame[data-playing="true"] { border-color: var(--gold); }

.tutorial-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, .34);
  color: var(--paper);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tutorial-play:hover { background: rgba(0, 0, 0, .18); color: var(--gold-hot); }

.tutorial-title {
  margin: 1.1rem 0 .4rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
}

.tutorial-copy { margin: 0; color: var(--paper-soft); font-size: .95rem; line-height: 1.6; }

.tutorial-note {
  margin: .6rem 0 0;
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tutorial .text-action { margin-top: 1rem; }

/* --- Cart --------------------------------------------------------------- */

.nav-cart { position: relative; }
.nav-cart-mark { position: relative; display: inline-flex; align-items: center; }
.nav-cart-count {
  position: absolute;
  top: -.45rem;
  right: -.55rem;
  min-width: 1.15rem;
  border-radius: 999px;
  padding: 0 .3rem;
  background: var(--gold);
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15rem;
  text-align: center;
}

/*
 * Two columns: what you are buying, and what it costs.
 *
 * The first version was one full-width column, so a single line item left most
 * of a very wide page empty with the total floating a long way below it. A
 * summary beside the goods is both denser and the convention every buyer
 * already knows.
 */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 58rem) {
  .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .8fr); align-items: start; }
  .cart-summary { position: sticky; top: 6rem; }
}

.cart-line {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}
@media (max-width: 34rem) {
  .cart-line { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .cart-line-price { grid-column: 2; }
}

.cart-line-art {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-media);
  border: 1px solid var(--line-gold);
  object-fit: cover;
}

.cart-line-name {
  margin: 0 0 .3rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
}
.cart-line-note { margin: 0; max-width: 40ch; color: var(--paper-soft); font-size: .95rem; line-height: 1.5; }
.cart-line-price { color: var(--paper); font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.cart-line-each { color: var(--mute); font-size: .85rem; }

/* Full width of the line, so the trash button can sit at its far end. */
.cart-qty { display: flex; align-items: center; gap: .6rem .8rem; margin-top: 1rem; flex-wrap: wrap; }
.cart-qty-label {
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* − 3 + as one object: a single border around all three, so it reads as
   one control rather than two buttons and a number that happen to be near
   each other. 2.75rem squares, a comfortable thumb target. */
.cart-stepper {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--input-line);
  border-radius: var(--radius-control);
  background: var(--input-fill);
}
.cart-step {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cart-step:hover { background: rgba(230, 162, 60, .12); color: var(--gold-hot); }
.cart-step:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* After :hover, so a limit stays visibly a limit under the pointer. */
.cart-step[aria-disabled="true"] { background: transparent; color: var(--mute); opacity: .45; cursor: default; }
.cart-step-value {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  padding: 0 .35rem;
  border-inline: 1px solid var(--input-line);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-remove {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cart-remove:hover { border-color: var(--line-gold); color: var(--gold-hot); }
.cart-remove:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cart-includes { margin-top: clamp(2rem, 4vw, 3rem); }
.cart-includes h3 {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.cart-includes ul { margin: 0; padding: 0; list-style: none; max-width: 52ch; }
.cart-includes li {
  position: relative;
  padding: .55rem 0 .55rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--paper-soft);
  font-size: .95rem;
  line-height: 1.5;
}
.cart-includes li:last-child { border-bottom: 0; }
.cart-includes li::before { position: absolute; left: 0; color: var(--gold); content: "✓"; }
.cart-includes strong { color: var(--paper); }

.cart-summary {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-media);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: rgba(230, 162, 60, .04);
}
.cart-summary-title {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  color: var(--paper-soft);
  font-size: .95rem;
}
.cart-summary-muted { color: var(--mute); }
.cart-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.cart-total-label {
  color: var(--mute);
  font-family: var(--font-display);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.cart-total-value {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.cart-checkout { width: 100%; margin-top: 1.25rem; }
.cart-summary .text-action { display: block; margin-top: 1rem; text-align: center; }
.cart-summary-note { margin: 1.25rem 0 0; color: var(--mute); font-size: .85rem; line-height: 1.5; }