/* ==========================================================================
   EYU SUITS
   --------------------------------------------------------------------------
   One dark surface, one accent, three typefaces.

   The rule the whole sheet obeys: lime means something is happening or
   something can be acted on, and it is never used for decoration. On a page
   where ninety percent of the ink is carbon and grey, the ten percent that is
   not carries all of the meaning, and spending it on a divider or a background
   wash is spending it on nothing.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */

:root {
  /* The ground and the things that sit on it.
     Each step is a real surface in a stack, not an arbitrary shade: sunk is a
     well, raised is a panel, card is an object, float is an object under the
     pointer. */
  --carbon: #171717;
  --sunk: #101010;
  --raised: #1c1c1c;
  --card: #212121;
  --float: #2a2a2a;

  /* The only border colour, and its quieter form for internal divisions. */
  --edge: #333331;
  --edge-soft: rgba(255, 255, 255, 0.055);

  /* The lip: a single bright pixel along the top of a raised thing, which is
     what makes it read as having thickness rather than as a lighter rectangle. */
  --lip: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --lip-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Ink. The neutral is pulled a few degrees toward the accent's yellow green
     rather than left as pure grey, so the two families belong to each other. */
  --ink: #f5f5f0;
  --ink-mid: #b6b6ab;
  --ink-low: #93938a;
  /* Raised from #63635c, which measured 2.66 to 3.14 against the surfaces it
     is actually used on. WCAG AA wants 4.5 for text this size, and every
     one of the thirteen styles below the line on this site turned out to
     be this one token. It is still the quietest ink in the set; it is now
     quiet rather than unreadable. */
  --ink-ghost: #8f8f87;

  --lime: #c6ff34;
  --lime-lift: #d6ff6b;
  --lime-deep: #a8e000;
  --lime-ink: #141406;
  --lime-wash: rgba(198, 255, 52, 0.08);
  --lime-edge: rgba(198, 255, 52, 0.26);

  --warn: #e8b64c;

  --f-display: 'Big Shoulders', 'Arial Narrow', system-ui, sans-serif;
  --f-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Motion. Every transition on the page uses one of these three, so nothing
     moves with a timing nothing else uses. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-lift: cubic-bezier(0.34, 1.18, 0.64, 1);
  --ease-seat: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-4: 30px;

  --shell: 1240px;
  --shell-narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);

  /* A vertical rhythm that scales with the viewport rather than snapping at a
     breakpoint. A section on a laptop and the same section on a large display
     should breathe by the same proportion, not by the same pixel count. */
  /* Tightened once the copy was cut. Whitespace is generous on purpose, but
     a section whose text is three lines long does not need the same air as one
     with three paragraphs, and the difference read as a hole in the page. */
  --band: clamp(68px, 9vh, 124px);
  /* Clear air under the floating nav, which ends 76px down. This was a
     flat 158px, which left 82px of nothing below the nav and read as a
     hole rather than as breathing room, worst on a tall screen where
     there is nothing else in view yet. */
  --lead-top: 104px;
}

/* ---------- base -------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--carbon);
  color: var(--ink-mid);
  font-family: var(--f-ui);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--lime); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Focus is visible everywhere, and it is the accent, because the accent means
   "this is the thing you are acting on" and that is exactly what focus is. */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--lime); color: var(--lime-ink); }

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

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--lime); color: var(--lime-ink);
  padding: 10px 18px; border-radius: var(--r-1); font-weight: 700;
}
.skip:focus { left: 12px; }

/* ---------- the grain --------------------------------------------------- */

/*
 * Fixed, above everything, and inert to the pointer.
 *
 * Large flat fields of near black are where a dark page starts to look like
 * plastic, and a wide gradient across one will band visibly on an eight bit
 * display. A few percent of noise fixes both, and because it is fixed rather
 * than attached to the scrolling content it never repaints while you scroll.
 */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

.main { position: relative; z-index: 1; }

.band { padding-block: var(--band); position: relative; }
.band-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 54px); }

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

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-low);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--lime); flex: none;
}
.eyebrow-n { font-style: normal; color: var(--lime); }

/*
 * The display face, set the way a condensed grotesque wants to be set.
 *
 * Big Shoulders is drawn narrow, so it can be run at a size that would be
 * absurd for a normal face and still fit. Tight leading and a negative track
 * are not stylistic here: at this size the default spacing leaves the words
 * floating apart and the block stops reading as one object.
 */
.h-display {
  margin: 0 0 24px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  text-transform: uppercase;
}
.h-page { margin-bottom: 28px; }

.lit { color: var(--lime); }

.strike {
  color: var(--ink-ghost);
  position: relative;
  text-decoration: none;
}
.strike::after {
  content: '';
  position: absolute; left: -2%; right: -2%; top: 52%;
  height: 3px; background: var(--ink-ghost);
  transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--ease) 180ms;
}
[data-seen] .strike::after { transform: scaleX(1); }

.p-lead {
  margin: 0 0 20px;
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--ink-mid);
  max-width: 62ch;
}
.p-narrow { max-width: 58ch; }
.p-quiet { color: var(--ink-low); font-size: 15px; max-width: 58ch; margin: 0; }
/* The second paragraph in a two paragraph argument. Quieter and a shade
   smaller than the lead, so the first line still carries the section. */
.p-body {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-low);
  max-width: 60ch;
}
.dock-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--edge); }

.t-mono {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
}

/* ---------- the double bezel ------------------------------------------- */

/*
 * Nothing sits flat on the page.
 *
 * A card here is two enclosures: an outer tray with a hairline and a little
 * padding, and an inner core with its own ground and its own highlight along
 * the top. The radii are concentric, the inner one calculated from the outer
 * minus the padding, which is the detail that makes it read as machined rather
 * than as a rectangle inside a rectangle.
 */
.bezel {
  position: relative;
  padding: 6px;
  border-radius: var(--r-4);
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.bezel-core {
  border-radius: calc(var(--r-4) - 6px);
  background: var(--raised);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
  padding: clamp(24px, 3vw, 40px);
}
/*
 * Only the cards that sit in a row together are forced to equal heights.
 *
 * This used to be on every bezel, which meant a panel beside a tall column
 * of prose inherited that column height and finished with four hundred
 * pixels of nothing under its last line. Three tiers side by side genuinely
 * do need to match. A diagram next to a paragraph does not.
 */
.tier .bezel-core,
.build .bezel-core,
.keep .bezel-core { height: 100%; }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.btn[data-size="sm"] { padding: 8px 8px 8px 18px; font-size: 13.5px; gap: 9px; }
.btn[data-size="lg"] { padding: 15px 15px 15px 30px; font-size: 16.5px; }

.btn[data-tone="primary"] {
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 0 0 0 rgba(198, 255, 52, 0.3);
}
.btn[data-tone="primary"]:hover {
  background: var(--lime-lift);
  color: var(--lime-ink);
  box-shadow: 0 10px 34px -14px rgba(198, 255, 52, 0.55);
}

.btn[data-tone="ghost"] {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge);
  background: rgba(255, 255, 255, 0.014);
}
.btn[data-tone="ghost"]:hover {
  color: var(--ink);
  background: var(--float);
  box-shadow: inset 0 0 0 1px var(--lime-edge);
}

/* Pressed, not merely darker. The whole control takes a step back under the
   finger, which is the only part of a click that a screen can actually give
   you. */
.btn:active { transform: scale(0.977); }

/*
 * The trailing glyph, in its own seat.
 *
 * An arrow set loose beside a label has nowhere to go on hover and drifts
 * optically against the text. Nested in a circle it has a home, and it can
 * lean out of that home diagonally when the pointer arrives, which reads as
 * the button leaning toward what it does.
 */
.btn-orb {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  flex: none;
  background: rgba(0, 0, 0, 0.14);
  transition: transform var(--t-base) var(--ease-lift), background var(--t-fast) var(--ease);
}
.btn[data-size="sm"] .btn-orb { width: 24px; height: 24px; }
.btn[data-size="lg"] .btn-orb { width: 34px; height: 34px; }
.btn[data-tone="ghost"] .btn-orb { background: rgba(255, 255, 255, 0.055); }
.btn:hover .btn-orb { transform: translate(3px, -1px) scale(1.06); }
.btn[data-tone="ghost"]:hover .btn-orb { background: var(--lime); color: var(--lime-ink); }

.ico { flex: none; }

/* ---------- masthead ---------------------------------------------------- */

/*
 * A floating pill, detached from the top edge.
 *
 * Glued to the top it is browser chrome. Floating with air around it, it is
 * an object on the page, and it can shrink and tighten as you scroll away from
 * the hero without the change reading as a glitch.
 */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: 18px var(--gutter) 0;
  transition: padding var(--t-base) var(--ease);
}
.masthead-in {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
  padding: 9px 9px 9px 16px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge-soft);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.masthead[data-stuck] { padding-top: 10px; }
.masthead[data-stuck] .masthead-in {
  background: rgba(16, 16, 16, 0.9);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge), 0 18px 46px -26px rgba(0, 0, 0, 0.9);
}

.wordmark { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.wordmark img { width: 30px; height: 30px; object-fit: contain; }
.wordmark[data-size="md"] img { width: 38px; height: 38px; }
.wordmark-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}
.wordmark-name i { font-style: normal; color: var(--ink-low); margin-left: 5px; }
.wordmark[data-size="md"] .wordmark-name { font-size: 26px; }

.nav { flex: 1; }
.nav-list {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.nav-list a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-mid);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-list a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.045); }
.nav-list .current-menu-item a { color: var(--ink); }

.masthead-act { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.burger-bar {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger-bar + .burger-bar { margin-top: 5px; }
/* The two bars rotate into an X rather than swapping for a different icon. */
.burger[aria-expanded="true"] .burger-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 79;
  display: grid; align-content: center; gap: 30px;
  padding: 120px var(--gutter) 60px;
  background: rgba(16, 16, 16, 0.94);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.drawer[hidden] { display: none; }
.drawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drawer-list a {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(34px, 11vw, 56px);
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--ink);
  /* Each link rises out of an invisible box, staggered, rather than the whole
     panel fading in as one sheet. */
  opacity: 0; transform: translateY(26px);
  animation: drawer-in 520ms var(--ease) forwards;
}
.drawer-list li:nth-child(1) a { animation-delay: 60ms; }
.drawer-list li:nth-child(2) a { animation-delay: 110ms; }
.drawer-list li:nth-child(3) a { animation-delay: 160ms; }
.drawer-list li:nth-child(4) a { animation-delay: 210ms; }
.drawer-list li:nth-child(5) a { animation-delay: 260ms; }
@keyframes drawer-in { to { opacity: 1; transform: none; } }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  /*
   * The words sit in the upper part of the field rather than the middle of it.
   *
   * Centred, the headline drifts further down the taller the screen is, and on
   * a 1213px display that put the first line 211px down with nothing above it
   * but the nav. The field is meant to be full height; the sentence is not
   * meant to be in the middle of it. Pinning to the top and letting the
   * padding grow a little with the viewport keeps the first line in roughly
   * the same place on every screen.
   */
  justify-content: flex-start;
  padding-top: clamp(104px, 11vh, 152px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  /* The still fallback, visible before the canvas paints and left in place if
     WebGL is unavailable. It is the same colour story, so nothing jumps. */
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(198, 255, 52, 0.15), transparent 62%),
    linear-gradient(180deg, #131313 0%, #171717 45%, #101010 100%);
  opacity: 0;
  transform: scale(1.06);
  animation: field-rise 2200ms cubic-bezier(0.16, 0.84, 0.3, 1) 150ms forwards;
}
/* engine.js sets this when the context is lost or reduced motion is turned on
   mid visit. It has to be a class: a keyframe animation with fill forwards
   outranks an inline style, so setting el.style.opacity would do nothing. */
.hero-field.is-off { animation: none; opacity: 0; }
@keyframes field-rise {
  to { opacity: 1; transform: none; }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.86) 0%, rgba(23, 23, 23, 0.42) 34%, rgba(23, 23, 23, 0.1) 60%, rgba(23, 23, 23, 0.94) 100%);
}
.hero-in { position: relative; z-index: 2; padding-bottom: clamp(48px, 7vh, 96px); }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 26px;
  color: var(--ink-mid);
  opacity: 0;
  animation: soft-in 800ms var(--ease) 40ms forwards;
}
.dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198, 255, 52, 0.6);
  animation: dot-pulse 2.6s var(--ease) infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 52, 0.45); }
  55%      { box-shadow: 0 0 0 9px rgba(198, 255, 52, 0); }
}

/*
 * The headline resolves rather than fades.
 *
 * Each line is masked and its own text slides up from behind the mask with a
 * touch of blur burning off, which is what a frame looks like when a render
 * finishes rather than what a div looks like when its opacity changes. The
 * three lines are staggered so it reads top to bottom, like something being
 * printed.
 */
.hero-title {
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(58px, 12.5vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-title .line > span {
  display: block;
  transform: translateY(105%);
  filter: blur(9px);
  opacity: 0;
  animation: line-resolve 1150ms var(--ease) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 120ms; }
.hero-title .line:nth-child(2) > span { animation-delay: 240ms; }
.hero-title .line:nth-child(3) > span { animation-delay: 360ms; }
@keyframes line-resolve {
  60%  { opacity: 1; }
  100% { transform: none; filter: blur(0); opacity: 1; }
}

.hero-sub {
  margin: 0 0 36px;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.58;
  color: var(--ink-mid);
  opacity: 0;
  animation: soft-in 900ms var(--ease) 560ms forwards;
}
.hero-act {
  display: flex; flex-wrap: wrap; gap: 14px;
  opacity: 0;
  animation: soft-in 900ms var(--ease) 680ms forwards;
}
.hero-fine {
  margin: 20px 0 0;
  color: var(--ink-ghost);
  opacity: 0;
  animation: soft-in 900ms var(--ease) 800ms forwards;
}
@keyframes soft-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- split sections --------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split-tight { align-items: center; }
/* Belt and braces with align-items above: a panel next to a column of text
   sits with the text rather than being stretched to the height of it. */
.split > * { align-self: center; }
/* A grid child is as wide as its widest unbreakable thing unless it is told
   otherwise, which is how one long filename in a panel pushes a two column
   layout wider than the window and puts a scrollbar under the whole page. */
.split-say, .split-show, .footer-brand, .footer-col, .tier-core, .build-core { min-width: 0; }
.drawer-nav, .drawer-foot { width: 100%; }
.btn-label { display: inline-block; }

/* ---------- the two routes --------------------------------------------- */

.routes-core { padding: clamp(26px, 3vw, 38px); }
.route + .route { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--edge); }
.route-label { margin: 0 0 16px; }
.route[data-kind="us"] .route-label { color: var(--lime); }

.route-steps {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  counter-reset: none;
}
.route-steps li {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--ink-mid);
  white-space: nowrap;
}
.route-steps .hop {
  background: none; box-shadow: none; padding: 0 4px;
  color: var(--ink-ghost);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
/* The step that leaves the building is drawn as a warning, because that is
   what it is. */
.route-steps .far {
  color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(232, 182, 76, 0.34);
  background: rgba(232, 182, 76, 0.07);
}
.route-steps .here {
  color: var(--lime-ink);
  background: var(--lime);
  box-shadow: none;
  font-weight: 700;
}
/* The line under each path. It is the point of the whole diagram, so it is
   set to be read rather than to be found. */
.route-cost { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-low); max-width: 52ch; }
.route[data-kind="them"] .route-cost { color: var(--warn); opacity: 0.82; }

/* ---------- the encoder ladder ----------------------------------------- */

.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rung {
  position: relative;
  display: grid;
  grid-template-columns: 46px 190px 110px 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-18px);
}
.rung:first-child { border-radius: var(--r-2) var(--r-2) 0 0; }
.rung:last-child { border-radius: 0 0 var(--r-2) var(--r-2); }
[data-seen] .rung {
  animation: rung-in 620ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes rung-in { to { opacity: 1; transform: none; } }

.rung-rank { color: var(--ink-ghost); font-size: 11px; }
.rung-name {
  font-family: var(--f-display); font-size: 27px; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.rung-who { font-size: 10.5px; }
.rung-note { font-size: 13.5px; color: var(--ink-low); }
.rung[data-tier="hw"] .rung-name { color: var(--lime); }
.rung[data-tier="sw"] { background: var(--sunk); }

/* A hairline that fills from the left as the rung arrives, so the list reads
   as a signal running down it rather than as five boxes appearing. */
.rung-bar {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--lime), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease);
}
[data-seen] .rung-bar { transform: scaleX(1); transition-delay: calc(var(--i) * 80ms + 240ms); }
.rung[data-tier="sw"] .rung-bar { background: linear-gradient(90deg, var(--ink-ghost), transparent); }

.fallback { margin-top: 34px; }
.fallback-core { display: flex; gap: 20px; align-items: flex-start; }
.fallback-ico { color: var(--lime); flex: none; margin-top: 2px; }
.fallback-h { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.fallback-p { margin: 0; font-size: 15px; color: var(--ink-low); max-width: 74ch; }

/* ---------- the four rooms ----------
 *
 * This replaced a section that pinned itself and turned the scroll wheel into
 * horizontal travel through all forty two tools. Two things were wrong with
 * it: taking the scroll wheel away always feels like the page has jammed, and
 * the first card slid out of view before it could be read. Four cards that
 * hold still say the same thing and have nothing to glitch.
 */
.rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.room-card { display: block; color: inherit; opacity: 0; transform: translateY(24px); }
[data-seen] .room-card {
  animation: tier-seat 620ms var(--ease-lift) forwards;
  animation-delay: calc(var(--i) * 80ms);
}
.room-card-core {
  height: 100%;
  padding: 22px;
  display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.room-card:hover .bezel-core {
  background: var(--card);
}
.room-card-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--edge);
}
.room-card-name {
  margin: 0;
  font-family: var(--f-display); font-size: 30px; text-transform: uppercase;
  color: var(--lime); line-height: 1;
}
.room-card-n {
  margin-left: auto;
  font-size: 15px; color: var(--ink-ghost);
  font-variant-numeric: tabular-nums;
}
.room-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; }
.room-card-list li {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-mid);
}
/* A dot rather than the word GPU repeated twenty times down a column. */
.gpu-dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--lime); flex: none;
}

/* ---------- prices, on the home page ---------- */

.teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcard { display: block; color: inherit; opacity: 0; transform: translateY(22px); }
[data-seen] .tcard {
  animation: tier-seat 600ms var(--ease-lift) forwards;
  animation-delay: calc(var(--i) * 80ms);
}
.tcard-core {
  padding: 24px;
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.tcard:hover .bezel-core { background: var(--card); }
.tcard.is-featured { background: var(--lime-wash); box-shadow: inset 0 0 0 1px var(--lime-edge); }
.tcard-name {
  font-family: var(--f-display); font-size: 24px; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.tcard-price {
  font-family: var(--f-display); font-size: 52px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.is-featured .tcard-price { color: var(--lime); }
.tcard-spec { font-size: 10px; color: var(--ink-low); }
.tcard-spec + .tcard-spec { margin-top: 5px; color: var(--ink-ghost); }
.teaser-act { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

.faq-act { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Smart Navigation ------------------------------------------- */

.dock-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  min-height: 500px;
}

/*
 * The launcher tab, rebuilt rather than screenshotted.
 *
 * `--fill` is set from the section's scroll position, so the level climbs as
 * you come down the page. It is the only scroll linked animation on the site
 * and it earns the exception, because the thing being animated is a progress
 * indicator and scrolling is standing in for progress.
 */
.dock-tab {
  position: relative;
  width: 46px; height: 230px;
  flex: none;
  border-radius: 14px;
  background: var(--raised);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge), inset 2px 0 0 var(--lime);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  overflow: hidden;
}
.dock-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--fill, 0.34) * 100%);
  /* Deep at the bottom, bright just under the surface. A single flat wash of
     translucent lime over near black has no chroma left in it and reads as
     olive; water reads through its depth gradient and its surface. */
  background: linear-gradient(
    to top,
    rgba(198, 255, 52, 0.16) 0%,
    rgba(198, 255, 52, 0.24) 55%,
    rgba(198, 255, 52, 0.42) 92%,
    rgba(198, 255, 52, 0.56) 100%);
  transition: height 700ms var(--ease);
}
.dock-wave {
  position: absolute; left: 0; right: 0; top: -16px;
  width: 100%; height: 32px;
  overflow: visible;
}
/* Two paths, because a stroke follows the whole shape. One closed path both
   filled and stroked draws the sides and the bottom too, which on a strip this
   narrow is a bright box with the water hidden inside it. */
.dock-wave path { transform-box: view-box; transform-origin: 50% 12px; }
.dock-wave-body {
  fill: var(--lime); fill-opacity: 0.26; stroke: none;
  animation: dock-surface 3.1s ease-in-out infinite;
}
.dock-wave-line {
  fill: none; stroke: var(--lime); stroke-width: 1.1; stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(198, 255, 52, 0.55));
  animation: dock-surface 3.1s ease-in-out infinite;
}
/* The surface rises, falls and flattens. Scaling about the waterline is what
   makes one path behave like water: the crest changes shape rather than only
   moving. */
@keyframes dock-surface {
  0%, 100% { transform: translateY(-1.5px) scaleY(1); }
  35%      { transform: translateY(0.4px) scaleY(0.86); }
  70%      { transform: translateY(1.3px) scaleY(1.14); }
}

.dock-bubbles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.dock-bubbles i {
  position: absolute; bottom: -6px;
  border-radius: 50%; background: var(--lime); opacity: 0;
  animation: dock-rise linear infinite;
}
.dock-bubbles i:nth-child(1) { left: 20%; width: 3px;   height: 3px;   animation-duration: 3.1s; animation-delay: 0s; }
.dock-bubbles i:nth-child(2) { left: 56%; width: 2px;   height: 2px;   animation-duration: 4.3s; animation-delay: 0.5s; }
.dock-bubbles i:nth-child(3) { left: 38%; width: 4.5px; height: 4.5px; animation-duration: 5.2s; animation-delay: 1.6s; }
.dock-bubbles i:nth-child(4) { left: 72%; width: 2.5px; height: 2.5px; animation-duration: 3.7s; animation-delay: 2.4s; }
.dock-bubbles i:nth-child(5) { left: 30%; width: 2px;   height: 2px;   animation-duration: 4.8s; animation-delay: 3.3s; }
.dock-bubbles i:nth-child(6) { left: 64%; width: 3.5px; height: 3.5px; animation-duration: 6.1s; animation-delay: 0.9s; }
@keyframes dock-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.85; }
  50%  { transform: translateY(-1600%) translateX(2px) scale(1); opacity: 0.7; }
  85%  { opacity: 0.45; }
  100% { transform: translateY(-3200%) translateX(-1px) scale(1.2); opacity: 0; }
}

.dock-mark { position: relative; z-index: 1; width: 26px; height: 26px; object-fit: contain; }
.dock-word {
  position: relative; z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em;
  color: var(--ink-low);
}

.dock-panel { flex: 1; max-width: 384px; }
.dock-panel-core { padding: 20px; }
.dock-panel-head { margin: 0 0 14px; font-size: 10px; }
.dock-row {
  display: grid; gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-1);
  background: var(--card);
  box-shadow: var(--lip), inset 0 0 0 1px var(--lime-edge);
}
.dock-row + .dock-row { margin-top: 8px; }
.dock-row-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.dock-row-file { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink-mid); }
.dock-row-where { font-size: 9.5px; text-transform: none; letter-spacing: 0; color: var(--ink-ghost); }
.dock-panel-foot { margin: 14px 0 0; font-size: 9.5px; color: var(--ink-ghost); }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--ink-mid);
}
.ticks .ico { color: var(--lime); flex: none; margin-top: 4px; }
.ticks[data-kind="key"] .ico { color: var(--ink-low); }

/* ---------- the chain --------------------------------------------------- */

.chain {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0;
  padding: 34px;
  border-radius: var(--r-3);
  background: var(--raised);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
}
.node {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
  white-space: nowrap;
  opacity: 0; transform: translateY(14px) scale(0.96);
}
[data-seen] .node {
  animation: node-seat 520ms var(--ease-lift) forwards;
  animation-delay: calc(var(--i) * 130ms);
}
@keyframes node-seat { to { opacity: 1; transform: none; } }
.node-ico { color: var(--lime); }
.node-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }

/* The wire between two nodes fills left to right, so the eye is pulled along
   the path in the order the work actually happens. */
.wire { flex: 1; min-width: 26px; height: 1px; background: var(--edge); position: relative; }
.wire i {
  position: absolute; inset: 0;
  background: var(--lime);
  transform: scaleX(0); transform-origin: left;
}
[data-seen] .wire i {
  animation: wire-fill 420ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 130ms + 260ms);
}
@keyframes wire-fill { to { transform: scaleX(1); } }
.chain-foot { margin: 20px 0 0; text-align: center; color: var(--ink-ghost); font-size: 10.5px; }

/* ---------- pricing ----------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.tier { opacity: 0; transform: translateY(26px); }
[data-seen] .tier {
  animation: tier-seat 640ms var(--ease-lift) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes tier-seat { to { opacity: 1; transform: none; } }

.tier.is-featured { background: var(--lime-wash); box-shadow: inset 0 0 0 1px var(--lime-edge); }
.tier.is-featured .bezel-core { box-shadow: var(--lip-strong), inset 0 0 0 1px rgba(198, 255, 52, 0.16); }
.tier-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px; border-radius: 999px;
  background: var(--lime); color: var(--lime-ink);
  font-size: 9.5px; font-weight: 700;
}
.tier-core { display: flex; flex-direction: column; }
.tier-head { margin-bottom: 22px; }
.tier-name {
  margin: 0 0 5px;
  font-family: var(--f-display); font-size: 32px; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.tier-kicker { margin: 0; font-size: 10px; }

.tier-price { display: flex; align-items: baseline; gap: 3px; margin: 0 0 6px; }
.tier-cur { font-size: 24px; color: var(--ink-low); font-weight: 700; }
.tier-num {
  font-family: var(--f-display); font-size: 68px; line-height: 0.9;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.is-featured .tier-num { color: var(--lime); }
.tier-suffix { margin-left: 6px; font-size: 10px; }
/*
 * The struck-through price and what it saves.
 *
 * The old price is dimmed as well as struck: a line through text at full
 * contrast reads as an error state rather than as a previous price.
 */
.tier-was {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 6px;
}
.tier-was-old {
  font-size: 13px; color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}
.tier-save {
  font-size: 10px; color: var(--lime);
  padding: 3px 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 34%, transparent);
}
.tier-note { margin: 0 0 24px; font-size: 13.5px; color: var(--ink-low); }

.tier-spec {
  display: grid; gap: 12px;
  margin: 0 0 24px; padding: 18px 0;
  border-block: 1px solid var(--edge);
}
.tier-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tier-spec dt { margin: 0; font-size: 9.5px; }
.tier-spec dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 700; text-align: right; }

.tier-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.tier-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-mid); }
.tier-points .ico { color: var(--lime); flex: none; margin-top: 4px; }

/*
 * Device expansion. Tiers offer different numbers of rows, so the box is not
 * stretched to match: the buy buttons line up instead (margin-top: auto on
 * .tier-act), and a shorter box leaves its space above the button.
 */
.tier-extra {
  margin: 0 0 26px; padding: 14px 16px;
  border-radius: 12px; background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.tier-extra-h { margin: 0 0 10px; font-size: 9.5px; }
.tier-extra-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tier-extra-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px; color: var(--ink-mid);
}
.tier-extra-row b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
a.tier-extra-row:hover, a.tier-extra-row:hover b { color: var(--lime); }
.tier-act { margin-top: auto; }
.tier-act .btn { width: 100%; justify-content: space-between; }

.price-foot { margin: 34px 0 0; text-align: center; }
.price-foot a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-low); font-size: 14px;
}
.price-foot a:hover { color: var(--lime); }

.renew { margin-top: 22px; }
.renew-core { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.renew-h { margin: 0 0 8px; font-size: 19px; color: var(--ink); }
.renew-p { margin: 0; font-size: 14.5px; color: var(--ink-low); max-width: 62ch; }
.renew-p + .renew-p { margin-top: 8px; }
.renew-price { display: flex; align-items: baseline; gap: 3px; margin: 0; flex: none; }
.renew-price .tier-num { font-size: 46px; }

.keeps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.keep-h { margin: 0 0 4px; }
.keep[data-kind="lit"] .keep-h { color: var(--lime); }
.keeps .ticks { margin-top: 16px; }
.free-line {
  margin: 30px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-mid);
}
.free-act { margin-top: 26px; display: flex; justify-content: center; }

/* ---------- companies ----------
 *
 * A band, not a fourth card. Three prices is a decision somebody makes in ten
 * seconds; four is a comparison exercise, and the fourth has no number on it.
 */
.ent-core { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ent-h { margin: 0 0 12px; font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 44px); text-transform: uppercase; color: var(--ink); line-height: 1; }
.ent-p { margin: 0 0 24px; font-size: 15px; color: var(--ink-low); max-width: 52ch; }
.ent-list { margin: 0; }

/* ---------- FAQ --------------------------------------------------------- */

.faq { display: grid; gap: 2px; }
.q {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
}
.q:first-of-type { border-radius: var(--r-2) var(--r-2) 0 0; }
.q:last-of-type { border-radius: 0 0 var(--r-2) var(--r-2); }
.q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast) var(--ease);
}
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { background: var(--float); }
.q-text { font-size: 16.5px; font-weight: 700; color: var(--ink); }
/* A plus that becomes a minus by rotating one of its two strokes, which is one
   element doing two jobs rather than two icons swapping. */
.q-mark { position: relative; width: 15px; height: 15px; flex: none; }
.q-mark::before,
.q-mark::after {
  content: ''; position: absolute; inset: 50% 0 auto;
  height: 1.5px; background: var(--lime); border-radius: 2px;
  transition: transform var(--t-base) var(--ease);
}
.q-mark::after { transform: rotate(90deg); }
.q[open] .q-mark::after { transform: rotate(0deg); }
.q-body { padding: 0 26px 24px; }
.q-body p { margin: 0; font-size: 15px; color: var(--ink-low); max-width: 68ch; }

/* ---------- closer ------------------------------------------------------ */

.closer { padding-block: var(--band); }
.closer-in { border-radius: var(--r-4); }
.closer-core {
  text-align: center;
  padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(120% 130% at 50% 128%, rgba(198, 255, 52, 0.13), transparent 62%),
    var(--raised);
}
.closer-core .eyebrow { justify-content: center; }
.closer-title {
  margin: 0 0 18px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 6.5vw, 82px);
  line-height: 0.94; text-transform: uppercase; color: var(--ink);
}
.closer-sub { margin: 0 auto 34px; max-width: 58ch; font-size: 16.5px; color: var(--ink-mid); }
.closer-act { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

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

.page-lead { padding: var(--lead-top) 0 clamp(34px, 4vw, 56px); }
/* A lead followed by a band pays for the bottom of one and the top of the
   other, which on a page whose intro is a single line reads as a hole rather
   than as breathing room. */
.page-lead + .band { padding-top: 0; }
.page-lead-tall { padding-bottom: clamp(24px, 4vw, 48px); }
.page { padding: var(--lead-top) 0 var(--band); }
.page-head { margin-bottom: 44px; }
.page-title {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 6vw, 74px); line-height: 0.95;
  text-transform: uppercase; color: var(--ink);
}

.prose { font-size: 16.5px; line-height: 1.72; color: var(--ink-mid); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.4em; margin-bottom: 0.5em;
  font-family: var(--f-ui); font-size: 21px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
  scroll-margin-top: 120px;
}
.prose h3 { margin-top: 1.9em; font-size: 17px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { color: var(--ink); }
.prose .lede {
  font-size: 19px; line-height: 1.6; color: var(--ink);
  padding-bottom: 1.2em; border-bottom: 1px solid var(--edge);
}
.prose .stamp { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); }

.spec { width: 100%; border-collapse: collapse; margin-block: 1.4em; font-size: 14.5px; }
.spec th, .spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.spec thead th {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-low); border-bottom-color: var(--lime-edge);
}
.spec tbody th { color: var(--ink); font-weight: 700; width: 30%; }
.spec tbody td { color: var(--ink-low); }
/* A table on a phone scrolls inside its own box. The page body never does. */
.prose .spec, .reqs .spec { display: block; overflow-x: auto; white-space: nowrap; }
/* Cells wrap; only the row is allowed to run wide. Both selectors are named
   here because the line above names both and this one used to name only the
   first, so the requirements table on the download page inherited nowrap and
   never wrapped: on a phone "Optional. A card makes encoding and the neural
   tools far faster" sat on a single 900px line that had to be dragged
   sideways to read. */
.prose .spec td, .prose .spec th,
.reqs .spec td, .reqs .spec th { white-space: normal; min-width: 160px; }

/* ---------- legal ------------------------------------------------------- */

.legal { padding: var(--lead-top) 0 var(--band); }
.legal-in { max-width: 1060px; }
.legal-head { margin-bottom: 46px; }
.legal-title {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 6vw, 76px); line-height: 0.95;
  text-transform: uppercase; color: var(--ink);
}
.legal-body { max-width: 68ch; min-width: 0; }

/* Text on the left, contents on the right, each in its own column. The
   contents used to be a float, and a sticky float overlaps everything it
   scrolls past because the space it reserved stayed at the top. */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 64px;
  align-items: start;
}
.legal-grid.is-plain { display: block; }

.toc {
  position: sticky; top: 118px;
  padding: 20px;
  border-radius: var(--r-2);
  background: var(--raised);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
}
.toc-h { margin: 0 0 12px; font-size: 9.5px; }
.toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 7px; }
.toc-list li { counter-increment: toc; }
.toc-list a {
  display: flex; gap: 9px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-low);
}
.toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-ghost); flex: none; padding-top: 2px;
}
.toc-list a:hover { color: var(--lime); }

/* ---------- tools page -------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip {
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; color: var(--ink-mid);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chip:hover { color: var(--ink); background: var(--float); }
.chip.is-on { background: var(--lime); color: var(--lime-ink); font-weight: 700; box-shadow: none; }

.room { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 120px; }
.room[hidden] { display: none; }
.room-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--edge); }
.room-name {
  margin: 0 0 5px;
  font-family: var(--f-display); font-size: clamp(30px, 4vw, 44px); text-transform: uppercase;
  color: var(--lime); line-height: 1;
}
.room-count { margin: 0; font-size: 11px; color: var(--ink-low); }

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px;
}
.card {
  padding: 20px;
  border-radius: var(--r-2);
  background: var(--raised);
  box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--lip), inset 0 0 0 1px var(--lime-edge); }
.card[hidden] { display: none; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.card-name { margin: 0; font-size: 16px; color: var(--ink); }
.card-sum { margin: 0; font-size: 13.5px; color: var(--ink-low); line-height: 1.55; }
.card-also { margin: 10px 0 0; font-size: 11px; color: var(--ink-ghost); }

/* ---------- download ---------------------------------------------------- */

.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.build { opacity: 0; transform: translateY(24px); }
[data-seen] .build { animation: tier-seat 620ms var(--ease-lift) forwards; animation-delay: calc(var(--i) * 90ms); }
.build-core { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.build-os { margin: 0; font-family: var(--f-display); font-size: 36px; text-transform: uppercase; color: var(--ink); line-height: 1; }
.build-spec { margin: 0; font-size: 10px; }
.build-extra { margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-low); flex: 1; }
.build-file { margin: 12px 0 0; font-size: 9.5px; text-transform: none; letter-spacing: 0; color: var(--ink-ghost); }
.build-soon { margin: 0; color: var(--lime); opacity: 0.72; font-size: 10.5px; }
.build.is-soon .bezel-core { background: var(--sunk); }

.reqs { margin-top: 46px; }
.reqs-h { margin: 0 0 14px; font-size: 21px; color: var(--ink); }
.reqs-note { margin-top: 46px; max-width: 68ch; }
.reqs-note h2 { margin-top: 0; }

/* ---------- listings and 404 -------------------------------------------- */

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.post-item a {
  display: block; padding: 26px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: background var(--t-fast) var(--ease);
}
.post-item a:hover { background: var(--float); }
.post-title { margin: 6px 0 6px; font-size: 22px; color: var(--ink); }
.post-sum { margin: 0; font-size: 14.5px; color: var(--ink-low); }

.page-404 { text-align: center; }
.err-code { font-size: 13px; color: var(--lime); margin-bottom: 16px; }
.err-act { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

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

.footer { border-top: 1px solid var(--edge); background: var(--sunk); padding-top: clamp(54px, 7vw, 84px); }
.footer-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr);
  gap: clamp(34px, 5vw, 74px);
  padding-bottom: 54px;
}
.footer-line { margin: 18px 0 12px; font-size: 14.5px; color: var(--ink-low); max-width: 40ch; }
.footer-spec { margin: 0; font-size: 9.5px; color: var(--ink-ghost); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.footer-h {
  margin: 0 0 14px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-ghost); font-weight: 400;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-list a { font-size: 14px; color: var(--ink-low); }
.footer-list a:hover { color: var(--lime); }

.footer-base {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--edge);
}
.footer-base p { margin: 0; font-size: 9.5px; color: var(--ink-ghost); }
/* The one sentence down here that is an argument rather than a formality.
   "This site loads its own fonts, runs no analytics, and embeds nothing from
   anyone else" is the whole privacy claim in one line, and it was set at
   9.5px next to the copyright, which is where a reader's eye has already
   stopped. A claim nobody can read is a claim not made. */
/* Two classes deep on purpose: `.footer-base p` above is a class plus an
   element, which outranks a bare class, so the first attempt at this rule
   lost silently and the line stayed 9.5px. */
.footer-base .footer-note { font-size: 12px; color: var(--ink-low); }
.footer-note { text-transform: none; letter-spacing: 0.02em; }

/* ---------- reveals ----------------------------------------------------- */

/*
 * One reveal, used sparingly.
 *
 * Everything on this page that moves as it arrives is either doing something
 * specific to its own content, a wire filling, a rung sliding in, a card
 * seating, or it is this: a short rise with no blur and no scale. Applying a
 * fade up to every element on a page is the single most recognisable tell of a
 * template, so most sections here do not use it at all.
 */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); }
[data-reveal][data-seen] { opacity: 1; transform: none; }
/* These orchestrate their own children, so the container itself must not move. */
[data-reveal="ladder"],
[data-reveal="chain"],
[data-reveal="seat"],
[data-reveal="stagger"] { opacity: 1; transform: none; }

[data-reveal="stagger"] > * { opacity: 0; transform: translateY(16px); }
[data-reveal="stagger"][data-seen] > * {
  animation: node-seat 520ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms);
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1040px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .tiers, .builds { grid-template-columns: 1fr; }
  .tier-flag { left: 26px; transform: none; }
  .rung { grid-template-columns: 34px 1fr; gap: 6px 14px; padding: 18px; }
  .rung-who, .rung-note { grid-column: 2; }
  .rung-note { font-size: 12.5px; }
  .legal-grid { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; order: -1; margin: 0 0 34px; }
  .legal-body { max-width: none; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: grid; }
  .masthead-act .btn[data-size="sm"] { display: none; }
  /* .nav carried flex:1 and did the pushing. Hidden, nothing did, and the
     wordmark and burger bunched at the left of a full width bar. */
  .masthead-act { margin-left: auto; }
  .masthead-in { gap: 12px; padding: 8px 8px 8px 14px; }
  .keeps { grid-template-columns: 1fr; }
  .ent-core { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .rooms { grid-template-columns: 1fr 1fr; }
  .teaser { grid-template-columns: 1fr; }
  .dock-stage { flex-direction: column; min-height: 0; gap: 22px; }
  .dock-tab { width: 190px; height: 46px; }
  .dock-panel { max-width: none; width: 100%; }
  .page, .page-lead, .legal { padding-top: 96px; }
  .chain { padding: 22px; gap: 10px; }
  .wire { display: none; }
  .node { width: 100%; }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }
  .rooms { grid-template-columns: 1fr; }
  .renew-core { flex-direction: column; align-items: flex-start; }
  .bezel { padding: 4px; border-radius: var(--r-3); }
  .bezel-core { border-radius: calc(var(--r-3) - 4px); padding: 22px; }
}

/* ---------- reduced motion ---------------------------------------------- */

/*
 * Stillness, without losing anything.
 *
 * Every element that arrives by animating is returned to its resting state
 * rather than left at the start of an animation that will never run, which is
 * the mistake that turns a reduced motion preference into a blank page.
 */
@media (prefers-reduced-motion: reduce) {
  .hero-title .line > span,
  .hero-sub, .hero-act, .hero-fine,
  .drawer-list a, .rung, .node, .tier, .build,
  [data-reveal], [data-reveal="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .wire i, .rung-bar, .strike::after { transform: scaleX(1) !important; }
  .dock-wave path, .dock-bubbles, .dot { animation: none !important; }
  .dock-bubbles { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- what it replaces -------------------------------------------- */

/*
 * The rent table. Three rows, a total, and our price under it.
 *
 * The total is the loud one and our line is the lime one, because the argument
 * is the size of the gap between them rather than either number on its own.
 */
.rent-core { padding: clamp(26px, 3.2vw, 44px); }
.rent-list { list-style: none; margin: 0; padding: 0; }
.rent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
}
.rent-row + .rent-row { border-top: 1px solid var(--edge); }
.rent-job { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink); }
.rent-who { font-size: 10.5px; text-transform: none; letter-spacing: 0.02em; color: var(--ink-ghost); }
.rent-year {
  font-family: var(--f-display); font-size: 30px; color: var(--ink-mid);
  justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rent-year i {
  display: inline-block; margin-left: 8px; font-style: normal;
  font-size: 9.5px; color: var(--ink-ghost); vertical-align: middle;
}

.rent-sum, .rent-ours {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-top: 20px; margin-top: 6px;
  border-top: 1px solid var(--edge);
}
.rent-sum-k, .rent-ours-k { margin: 0; font-size: 15px; color: var(--ink-mid); }
.rent-sum-v {
  margin: 0; font-family: var(--f-display); font-size: clamp(34px, 4vw, 52px);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rent-ours { border-top-color: rgba(198, 255, 52, 0.28); }
.rent-ours-k { color: var(--ink); }
.rent-ours-sub {
  display: block; margin-top: 5px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-low);
}
.rent-ours-v {
  margin: 0; font-family: var(--f-display); font-size: clamp(34px, 4vw, 52px);
  line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums;
}
.rent-note {
  margin: 26px auto 0; max-width: 68ch;
  font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); text-align: center;
}

@media (max-width: 720px) {
  .rent-note { font-size: 14.5px; text-align: left; }
}

/* ---------- before launch ----------------------------------------------- */

/*
 * A gated call to action. It keeps the shape and the position of the button it
 * replaces so the layout does not move on launch day, and it reads as a state
 * rather than as a broken link: no pointer, no lift, no hover.
 *
 * The primary one keeps its lime, at a fraction of the strength, and breathes
 * very slowly. Enough to say the button is waiting rather than dead.
 */
.btn.is-soon {
  cursor: default;
  color: var(--ink-mid);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.btn.is-soon[data-tone="primary"] {
  color: var(--lime);
  background: rgba(198, 255, 52, 0.06);
  box-shadow: inset 0 0 0 1px var(--lime-edge);
  animation: soon-breathe 4.5s var(--ease) infinite;
}
.btn.is-soon .btn-orb { background: rgba(255, 255, 255, 0.05); color: var(--ink-low); }
.btn.is-soon[data-tone="primary"] .btn-orb { background: rgba(198, 255, 52, 0.12); color: var(--lime); }
.btn.is-soon:hover { transform: none; }
.btn.is-soon:hover .btn-orb { transform: none; }

@keyframes soon-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--lime-edge), 0 0 0 0 rgba(198, 255, 52, 0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(198, 255, 52, 0.4), 0 0 26px -10px rgba(198, 255, 52, 0.5); }
}

/* ---------- glyphs in place --------------------------------------------- */

.room-ico, .build-ico, .spec-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lime);
  flex: none;
}
.room-ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(198, 255, 52, 0.08);
  box-shadow: inset 0 0 0 1px var(--lime-edge);
}
.room-name { display: flex; align-items: center; gap: 14px; }
.room-card-head .room-ico { width: 34px; height: 34px; border-radius: 10px; }
.build-ico {
  width: 52px; height: 52px;
  margin-bottom: 4px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--ink);
}
.build:hover .build-ico { color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-edge); }
.spec-ico { margin-right: 9px; vertical-align: -3px; color: var(--ink-low); }
.spec tbody th { white-space: nowrap; }
.tool-gpu { display: inline-flex; align-items: center; gap: 4px; }
.tool-beta {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--warn); box-shadow: inset 0 0 0 1px rgba(232, 182, 76, 0.22);
}

/* ---------- a page per tool --------------------------------------------- */

/* The whole card is the link, so the card keeps its own padding and hover. */
.card-link { display: block; color: inherit; }
.card-link:hover .card-name { color: var(--lime); }
.card-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: var(--r-1); }

/* On the home page the card is no longer one link; its names are. */
.room-card-name a, .room-card-list a { color: inherit; }
.room-card-list a { transition: color var(--t-base) var(--ease); }
.room-card-name a:hover { color: var(--lime-lift); }
.room-card-list a:hover { color: var(--lime); }

.crumbs { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); }
.crumbs a { color: var(--ink-low); }
.crumbs a:hover { color: var(--lime); }
.tool-title { max-width: 18ch; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.tool-tags > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink-mid);
}
.tool-tags > .tool-gpu, .tool-tags > .tool-ai { color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-edge); }
.tool-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.tool-shot { margin: 0 0 clamp(20px, 3vw, 36px); }
.tool-shot-core { padding: 0; overflow: hidden; line-height: 0; }
.tool-shot img { display: block; width: 100%; height: auto; }

.band-tool { padding-top: clamp(28px, 4vw, 56px); }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 72px); }
.tool-h { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.tool-h-wide { margin-top: clamp(44px, 5vw, 68px); margin-bottom: 20px; }
.tool-col .ticks { margin-top: 18px; }
.tool-col .tool-h + .tool-list, .tool-col .tool-h + .tool-p { margin-top: 18px; }
.tool-col .tool-list + .tool-h { margin-top: 34px; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tool-list li { font-size: 15px; color: var(--ink-mid); padding-left: 16px; position: relative; }
.tool-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--ink-ghost); }
.tool-p { margin: 0; font-size: 15px; color: var(--ink-mid); line-height: 1.65; }
.tool-needs, .tool-note {
  margin: 22px 0 0; padding: 14px 16px; border-radius: var(--r-2);
  font-size: 14px; line-height: 1.6; color: var(--ink-mid);
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--edge);
}
.tool-note { margin-top: 36px; border-left: 2px solid var(--lime); }
.tool-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-steps li {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: var(--r-2);
  background: var(--raised); box-shadow: var(--lip), inset 0 0 0 1px var(--edge);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-mid);
}
.tool-step-n { font-size: 11px; color: var(--lime); letter-spacing: 0.12em; }
.tool-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.tool-q h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.tool-q p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-low); }
.tool-more { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 860px) {
  .tool-grid, .tool-faq, .tool-steps { grid-template-columns: 1fr; }
}

/* ---------- the light on the glass -------------------------------------- */

/*
 * Two lights, both following the pointer, both fed by --mx and --my which
 * motion.js eases toward the cursor rather than snapping to it.
 *
 * The rim is the one that does the work. A gradient border, one pixel wide,
 * brightest where the pointer is: that is what a real edge does when a light
 * moves past it, and it is the difference between a card that looks lit and a
 * card with a glow drawn on top of it. The inner wash is broad and very faint
 * and only fills in the middle so the rim does not float on nothing.
 *
 * The border is a gradient in a box masked to its own outline, which is the
 * only way to get a gradient border without a wrapper element.
 */
.bezel[data-lit]::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: radial-gradient(
    440px circle at var(--mx, 50%) var(--my, 50%),
    rgba(198, 255, 52, 1),
    rgba(198, 255, 52, 0.42) 26%,
    rgba(198, 255, 52, 0.12) 48%,
    rgba(198, 255, 52, 0) 74%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bezel[data-lit] > .bezel-core::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(198, 255, 52, 0.1),
      rgba(198, 255, 52, 0.03) 24%,
      rgba(255, 255, 255, 0.014) 44%,
      transparent 66%
    );
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bezel[data-lit] > .bezel-core { position: relative; overflow: hidden; }

.bezel[data-lit]::after {
  content: '';
  position: absolute; inset: -18px;
  z-index: -1;
  border-radius: calc(var(--r-4) + 18px);
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(198, 255, 52, 0.26),
    rgba(198, 255, 52, 0.08) 32%,
    transparent 64%
  );
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fading in faster than out. A light arrives when you reach the card and
   lingers for a moment after you leave, which is how a real one behaves and
   which stops a row of cards flickering as the pointer crosses them. */
.bezel[data-lit][data-lit-on]::before,
.bezel[data-lit][data-lit-on]::after,
.bezel[data-lit][data-lit-on] > .bezel-core::after {
  opacity: 1;
  transition-duration: 260ms;
}

.tilt {
  transform:
    perspective(1200px)
    rotateX(calc(var(--ty, 0) * -3deg))
    rotateY(calc(var(--tx, 0) * 3deg))
    translateZ(0);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.tilt[data-tilting] { transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero-field { animation: none; opacity: 1; transform: none; }
  .hero-kicker { animation: none; opacity: 1; }
  .btn.is-soon[data-tone="primary"] { animation: none; }
  .tilt { transform: none !important; }
  .bezel[data-lit][data-lit-on]::before,
  .bezel[data-lit][data-lit-on]::after,
  .bezel[data-lit][data-lit-on] > .bezel-core::after { opacity: 0; }
}

/* The ™ after the name: small, raised, and never the thing you read first. */
.wordmark-tm { font-size: 0.42em; font-weight: 400; font-style: normal; margin-left: 2px; vertical-align: super; opacity: 0.7; letter-spacing: 0; }