/* Tesselform website
   Night palette (2026-09-25): near-black blue-charcoal lit by the brand orange alone.
   The brand pack's ivory and amber read as dated on screen, so they now appear only in
   the logo itself; the pack's ink #182127 is the highest surface. Orange #FF8300,
   burnt #D65300. Type: Public Sans, the application's own face. */

@font-face { font-family: "Public Sans"; src: url("/static/fonts/PublicSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/PublicSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/PublicSans-Semibold.ttf") format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; }

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

:root {
  --void: #050709;
  --ink: #0b1014;
  --ink-deep: #07090c;
  --ink-raised: #121a1f;
  --ink-high: #182127;
  --midnight: #070e16;
  --snow: #e9eef2;
  --mist: #9aa7b1;
  --orange: #ff8300;
  --orange-hover: #ff9a33;
  --burnt: #d65300;
  --rust: #a84000;
  --steel: #6f9bbe;
  --ok: #45c486;
  --danger: #ff7b6b;
  --danger-fill: #b42318;

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --pad-y: clamp(88px, 11vw, 160px);
  --nav-h: 70px;
  --radius: 4px;
  --cut: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Two tones, both dark. "dark" is the page; "midnight" is the drawing office the home page
   turns into at the Design stage, a deeper blue-black that the sections after it keep. */
:root,
[data-tone="dark"] {
  --bg: var(--ink);
  --fg: var(--snow);
  --fg-2: var(--mist);
  --fg-3: #808d97; /* 4.7:1 on the lightest surface: AA for small text */
  --line: rgba(200, 222, 238, .09);
  --line-strong: rgba(200, 222, 238, .2);
  --line-bold: rgba(214, 228, 238, .34);
  --surface: var(--ink-raised);
  --surface-2: #19232a;
  --accent-text: var(--orange);
  --focus: var(--orange-hover);
  --field-bg: #080c0f;
  color-scheme: dark;
}

[data-tone="midnight"] {
  --bg: var(--midnight);
  --line: rgba(150, 192, 228, .1);
  --line-strong: rgba(150, 192, 228, .22);
  --surface: #0d1722;
  --surface-2: #13202d;
  --field-bg: #050a10;
}

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

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always hides, whatever display a class sets. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 64px);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}

/* Film grain over everything: texture for the flat darks, and it dithers away the banding
   that soft glows show on dark screens. Fixed, so it costs nothing while scrolling. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: url("/static/img/grain.svg") 0 0 / 180px 180px;
  opacity: .055;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--orange); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: .9em; }
button { font: inherit; color: inherit; }
dl, dd { margin: 0; }
::selection { background: var(--orange); color: var(--ink); }

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

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

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

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

.display {
  font-size: clamp(3.5rem, 8.4vw, 8.25rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 600;
  margin: 0 0 .32em;
}

/* Big type lit from above: bright at the top, falling into shadow. Only on elements whose
   text is their own (a parent clipping to animated children's text can lose them), and with
   room below for descenders, which would otherwise fall outside the painted box. */
.hero__line, .page-hero h1, .finale__title, .local__statement, .auth__art h2 {
  background: linear-gradient(180deg, #ffffff 8%, #dbe3e9 52%, #7f8d98 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .12em;
}
@media (forced-colors: active) {
  .hero__line, .page-hero h1, .finale__title, .local__statement, .auth__art h2 { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

h2 {
  font-size: clamp(2.05rem, 3.9vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.038em;
  margin-bottom: .5em;
  text-wrap: balance;
}

h3 { font-size: 1.25rem; letter-spacing: -.012em; line-height: 1.25; }

.lead {
  font-size: clamp(1.125rem, 1.45vw, 1.3rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 36em;
  text-wrap: pretty;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* A single facet from the logo marks every section label. */
.eyebrow::before {
  content: "";
  width: .78em;
  height: .78em;
  flex: none;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mono { font-family: var(--mono); }
.fineprint { font-size: .875rem; color: var(--fg-3); margin-top: 1.1rem; }

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

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 2rem; }

.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  height: var(--btn-h);
  padding: 0 1.45em;
  border: 0;
  border-radius: 999px;
  font: 600 1rem/1 var(--sans);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease);
}

/* The primary button borrows the 45-degree cut from the logo's F. */
/* It glows from inside: a lit top edge and a hotter core on hover (an outer glow would be
   clipped away by the cut). */
.btn--primary {
  background: linear-gradient(180deg, #ff9426, var(--orange) 48%, #f06f00);
  color: var(--void);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(120, 40, 0, .35);
  padding-inline: 1.7em;
}
.btn--primary:hover { background: linear-gradient(180deg, #ffb060, var(--orange-hover) 50%, var(--orange)); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--void), 0 0 0 5px #fff; }

.btn--quiet {
  position: relative;
  padding: 0 .1em;
  background: none;
  color: var(--fg);
}
.btn--quiet::after {
  content: "";
  position: absolute;
  left: .1em;
  right: .1em;
  bottom: 13px;
  height: 1px;
  background: var(--line-strong);
  transition: background-color .2s;
}
.btn--quiet:hover::after { background: var(--orange); height: 2px; }

.btn--line {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
}
.btn--line:hover { border-color: var(--orange); background: rgba(255, 131, 0, .06); }

.btn--danger { background: var(--danger-fill); color: #fff; border-radius: 999px; }
.btn--danger:hover { background: #cf2a1d; }

.btn--small { --btn-h: 40px; --cut: 10px; padding: 0 1.3em; font-size: .92rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); cursor: pointer; }
.link:hover { text-decoration-color: var(--orange); }

.cut-corner { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* ------------------------------------------------------------------ navigation */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  color: var(--fg);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
/* The frosted glass sits on a layer behind the bar, not on the bar: a backdrop-filter on .nav itself makes it the
   containing block of the fixed mobile drawer, which then shrank to the bar's 70px once the page was scrolled
   (the menu opened as a strip with its links spilling over the page). */
.nav[data-scrolled] { box-shadow: 0 1px 0 var(--line); }
.nav[data-scrolled]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 16, 20, .8);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.nav__brand { display: inline-flex; color: var(--fg); }
.nav__brand .logo { height: 30px; width: auto; }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 30px); margin-right: auto; }
.nav__links a,
.nav__signin,
.nav__account {
  position: relative;
  padding: 8px 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .2s;
}
.nav__links a:hover, .nav__signin:hover, .nav__account:hover,
.nav__links a[aria-current], .nav__account[aria-current] { color: var(--fg); }
.nav__links a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 131, 0, .7);
}
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__signin, .nav__links a { white-space: nowrap; }
.nav__account { display: inline-flex; align-items: center; gap: 10px; }
.nav__avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--void);
  font-size: .8rem;
  font-weight: 600;
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -7px; }
.nav__toggle-bars::after { top: 7px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  overflow-y: auto;
  padding: 16px 0 40px;
  background: var(--bg);
}
.nav__drawer a:not(.btn) {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.nav__drawer .btn { margin-top: 28px; width: 100%; }

@media (max-width: 880px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: inline-grid; }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ the 3D scene (home) */

.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: grab;
  transition: opacity 1.2s var(--ease);
}
.scene__canvas:active { cursor: grabbing; }
.scene[data-ready] .scene__canvas { opacity: 1; }
.scene[data-off] .scene__canvas,
.scene[data-off] .scene__labels,
.scene[data-off] .scene__leaders { opacity: 0; pointer-events: none; }
.scene__leaders, .scene__labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .6s var(--ease); }
.scene__leaders line { stroke: rgba(214, 228, 238, .42); stroke-width: 1; }
.scene__leaders circle { fill: var(--orange); filter: drop-shadow(0 0 5px rgba(255, 131, 0, .9)); }
.callout {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 9px;
  font: 500 .68rem/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: rgba(11, 16, 20, .6);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--orange);
  transition: opacity .5s var(--ease);
  will-change: transform;
}
.callout b { font-weight: 600; color: var(--accent-text); }

/* Transparent scene sections let clicks through to the canvas; their content takes them back. */
.has-scene .hero,
.has-scene .proof,
.has-scene .pipeline { pointer-events: none; }
.has-scene .hero__copy,
.has-scene .hero__note,
.has-scene .proof__intro,
.has-scene .report,
.has-scene .pipeline__intro > *,
.has-scene .rail,
.has-scene .stage__copy { pointer-events: auto; }

/* ------------------------------------------------------------------ home: hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 110px;
}
.hero__grid { width: 100%; }
.hero__copy { max-width: 34rem; }
.hero__line { display: block; margin-bottom: -.12em; }
.hero__lead { max-width: 30em; }
.hero__note {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  display: flex;
  gap: 28px;
  margin: 0;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero__drag::before { content: "\2194\00a0"; color: var(--orange); }

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero__line, .hero__lead, .hero__actions, .hero .fineprint {
    animation: rise 1s var(--ease) both;
  }
  .hero .eyebrow { animation-delay: .05s; }
  .hero__line:nth-child(1) { animation-delay: .15s; }
  .hero__line:nth-child(2) { animation-delay: .27s; }
  .hero__lead { animation-delay: .4s; }
  .hero__actions { animation-delay: .5s; }
  .hero .fineprint { animation-delay: .58s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ home: test report */

/* Positioned, like every section over the scene: the scene is a positioned layer, and plain
   in-flow content would be painted underneath its (opaque) canvas. */
.proof { position: relative; padding: 14vh 0 12vh; }
.proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.proof__intro { grid-column: 1 / span 5; }
.proof__intro p { color: var(--fg-2); max-width: 30em; }
.proof__intro strong { color: var(--fg); }
/* Glass over the scene, edged with light from the top corner (the border-box gradient shows
   faintly through the glass too, like a glow in the corner). */
.report {
  grid-column: 1 / span 6;
  padding: 26px 32px 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(14, 20, 25, .84), rgba(14, 20, 25, .84)) padding-box,
    linear-gradient(135deg, rgba(255, 131, 0, .75), rgba(255, 131, 0, .08) 34%, rgba(200, 222, 238, .14) 70%, rgba(200, 222, 238, .05)) border-box;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.report__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-bold);
  font: 500 .7rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.report__head span:first-child { color: var(--orange); }
.report__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.report__row dt {
  font: 500 .7rem/2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.report__row dd { color: var(--fg-2); }
.figure { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.report__row:nth-child(2) .figure { color: var(--orange); font-size: 1.35em; letter-spacing: -.02em; text-shadow: 0 0 22px rgba(255, 131, 0, .55); }
.report__foot { padding-top: 14px; font-size: .8rem; line-height: 1.5; color: var(--fg-3); }

/* ------------------------------------------------------------------ home: pipeline */

.pipeline { position: relative; }
.pipeline__intro { padding-top: 6vh; padding-bottom: 14vh; }
.pipeline__intro h2 { max-width: 13em; }

.rail {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  background: rgba(11, 16, 20, .7);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  transition: background-color .7s var(--ease);
}
.rail__inner {
  position: relative;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.rail__inner::-webkit-scrollbar { display: none; }
.rail__tab {
  flex: none;
  padding: 15px 20px 14px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--fg-3);
  text-decoration: none;
  transition: color .3s;
}
.rail__tab:first-child { padding-left: 0; }
.rail__tab:hover, .rail__tab[aria-current="step"] { color: var(--fg); }
.rail__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255, 131, 0, .8);
  transition: transform .5s var(--ease), width .5s var(--ease);
}

/* The stage is a grid so its inner grid stretches to the full stage height:
   the copy can only stay pinned while its parent is still on screen. */
.stage { position: relative; display: grid; min-height: 185vh; }
.stage--last { min-height: 205vh; }
.stage__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.stage__copy {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 96px);
  padding: 32px 0 64px;
}
.stage__title {
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: .55em;
  text-wrap: balance;
}
.stage__copy > p { color: var(--fg-2); max-width: 31em; transition: color .7s var(--ease); }
.stage__detail {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}
.stage__detail .mono {
  margin-right: .9em;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
.tools li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 500;
  color: var(--fg);
  transition: border-color .7s var(--ease), color .7s var(--ease);
}

.display-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.chip {
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: rgba(255, 131, 0, .16); border-color: var(--orange); color: var(--fg); box-shadow: 0 0 16px rgba(255, 131, 0, .22); }

.legend { display: grid; gap: 6px; max-width: 22rem; margin-top: 18px; }
.legend[hidden] { display: none; }
/* The same ramp the scene's deviation shader uses. */
.legend__ramp { height: 8px; background: linear-gradient(90deg, #2c5a8c, var(--steel) 22%, #6b7680 44%, #6b7680 56%, var(--orange) 76%, var(--burnt)); }
.legend__labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--fg-2); }
.legend__note { font-size: .78rem; color: var(--fg-3); }

/* ------------------------------------------------------------------ home: the drawing office */

/* After the Design stage the page stays in the midnight tone; each section gets its own light. */
.kernel { padding: var(--pad-y) 0 calc(var(--pad-y) * .75); background: var(--bg); color: var(--fg); position: relative; overflow: hidden; }
/* A blueprint grid that fades out from behind the drawing. */
.kernel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(111, 155, 190, .09) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(111, 155, 190, .09) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 72% 42%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 60% at 72% 42%, #000 10%, transparent 72%);
  pointer-events: none;
}
.kernel__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.kernel__head { grid-column: 1 / span 5; }
.kernel__figure { grid-column: 7 / span 6; margin: 0; }
.kernel__figure figcaption { margin-top: 10px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); text-align: right; }
.comb { width: 100%; height: auto; overflow: visible; }
.comb__poly { fill: none; stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 5; }
.comb__teeth path { stroke: var(--orange); stroke-width: 1; opacity: .75; }
.comb__env { fill: none; stroke: var(--orange); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255, 131, 0, .75)); }
.comb__curve { fill: none; stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(190, 220, 245, .35)); }
.comb__pts rect { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }

.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line-bold); }
.fact { padding: 22px 28px 0 0; }
.fact dt { font-weight: 600; margin-bottom: .45em; }
.fact dt::before { content: ""; display: block; width: 18px; height: 2px; margin-bottom: 14px; background: var(--orange); box-shadow: 0 0 8px rgba(255, 131, 0, .7); }
.fact dd { color: var(--fg-2); font-size: .98rem; }

.automate { position: relative; padding: calc(var(--pad-y) * .5) 0 var(--pad-y); background: var(--bg); }
.automate__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.automate__copy { grid-column: 1 / span 5; }
.automate__copy > p { color: var(--fg-2); }
/* A terminal lit by its own screen: the corner glow is the border-box gradient showing through. */
.code {
  grid-column: 7 / span 6;
  margin: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(5, 8, 11, .93), rgba(5, 8, 11, .93)) padding-box,
    linear-gradient(145deg, rgba(255, 131, 0, .7), rgba(255, 131, 0, .06) 30%, rgba(150, 192, 228, .16) 75%, rgba(150, 192, 228, .3)) border-box;
  color: #c3ccd3;
}
.code__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: .74rem;
  color: var(--mist);
}
.code__dots { display: flex; gap: 6px; margin-right: 14px; }
.code__dots i { width: 7px; height: 7px; background: rgba(214, 228, 238, .22); clip-path: polygon(0 0, 100% 0, 0 100%); }
.code__dots i:first-child { background: var(--orange); }
.code pre { margin: 0; padding: 22px 24px 28px; overflow-x: auto; font: .86rem/1.75 var(--mono); tab-size: 4; }
.code code { font-size: inherit; }
.t-k { color: var(--orange); }
.t-f { color: var(--snow); }
.t-s { color: #8fbde0; }

.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; color: var(--fg-2); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 10px;
  height: 10px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Light spilling in from the side, as from a workstation screen in a dark room. Section glows
   fade out before the top and bottom edges (centre +/- 0.7 x radius stays inside), so the next
   section meets this one without a seam. */
.local {
  padding: var(--pad-y) 0;
  background:
    radial-gradient(ellipse 50% 55% at 0% 58%, rgba(255, 120, 0, .13), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 38%, rgba(111, 155, 190, .1), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.local__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
.local__grid .eyebrow { grid-column: 1 / -1; }
.local__statement {
  grid-column: 1 / span 8;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.05em;
  margin: 0;
}
.local__body { grid-column: 9 / span 4; align-self: end; color: var(--fg-2); }

.local, .spec, .teaser, .faq { position: relative; }
.spec { padding: calc(var(--pad-y) * .8) 0; background: var(--bg); }
.spec__head h2 { max-width: 15em; }
.spec__table { margin-top: 40px; border-top: 1px solid var(--line-bold); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.spec__row dt { font-weight: 600; }
.spec__row dd { color: var(--fg-2); }
.spec__dir {
  display: inline-block;
  margin-right: .7em;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.spec__dir + .spec__dir, dd .spec__dir:not(:first-child) { margin-left: 1.4em; }

.teaser {
  padding: var(--pad-y) 0;
  background: radial-gradient(ellipse 40% 60% at 80% 52%, rgba(255, 120, 0, .12), transparent 70%), var(--bg);
  border-top: 1px solid var(--line);
}
.teaser__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.teaser__grid > div:first-child { grid-column: 1 / span 6; }
.teaser__grid > div:first-child > p { color: var(--fg-2); max-width: 30em; }
.teaser__price { grid-column: 8 / span 5; }
.teaser__price > p { color: var(--fg-2); }
.teaser__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: .4em; }
.teaser__amount span:last-child { color: var(--fg-2); }
.price { font-size: clamp(3.6rem, 6.6vw, 5.6rem); font-weight: 600; letter-spacing: -.055em; line-height: .9; color: var(--fg); font-variant-numeric: tabular-nums; }

.faq { padding: 0 0 var(--pad-y); background: var(--bg); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.faq__grid > h2 { grid-column: 1 / span 4; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 22px 48px 22px 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--fg), var(--fg)) center / 14px 2px no-repeat,
    linear-gradient(var(--fg), var(--fg)) center / 2px 14px no-repeat;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--orange), var(--orange)) center / 14px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center / 2px 14px no-repeat;
}
.faq summary:hover { color: #fff; }
.faq details p { max-width: 40em; padding: 0 0 24px; color: var(--fg-2); }

/* The last word: an ember glow rising from below the fold, breathing slowly, and the logo's
   facets cut into the dark at the right. */
.finale {
  position: relative;
  overflow: hidden;
  padding: calc(var(--pad-y) * 1.1) 0 calc(var(--pad-y) * 1.3);
  /* The glow meets the footer at a lit horizon: light under a door. */
  background: linear-gradient(90deg, transparent, rgba(255, 140, 40, .75) 50%, transparent) bottom / 100% 1px no-repeat, var(--ink-deep);
  color: var(--fg);
}
.finale::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -55%;
  height: 110%;
  background: radial-gradient(closest-side, rgba(255, 110, 0, .42), rgba(255, 90, 0, .12) 52%, transparent);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite;
}
.finale::after {
  content: "";
  position: absolute;
  right: max(-4vw, -60px);
  top: 50%;
  width: min(44vw, 560px);
  aspect-ratio: 236 / 256;
  transform: translateY(-50%);
  background: url("/static/img/facets-line.svg") center / contain no-repeat;
  opacity: .5;
  pointer-events: none;
}
.finale__inner { position: relative; z-index: 1; }
.finale__title { max-width: 13em; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: .95; letter-spacing: -.05em; margin-bottom: .45em; }
.finale .lead { margin-bottom: 0; }
@keyframes breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

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

.footer { position: relative; z-index: 1; background: var(--void); color: var(--fg); box-shadow: inset 0 1px 0 var(--line); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; padding: 80px 0 56px; }
.footer__logo { display: inline-flex; color: var(--fg); }
.footer__logo .logo { height: 58px; width: auto; }
.footer__brand p { max-width: 24em; margin-top: 22px; color: var(--fg-2); font-size: .95rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__h { margin-bottom: 14px; font: 500 .7rem/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3); }
.footer__h a { color: inherit; text-decoration: none; }
.footer__h a:hover { color: var(--fg); }
.footer__cols a { display: block; padding: 5px 0; color: var(--fg-2); font-size: .95rem; text-decoration: none; }
.footer__cols a:hover { color: var(--fg); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 24px 0 34px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--fg-3); }
.footer__base p { margin: 0; max-width: 62em; }
.footer--compact .footer__base { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ development note */

.devnote {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 90;
  max-width: 380px;
  padding: 6px 12px;
  background: var(--ink-high);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--orange);
  font-size: .78rem;
  line-height: 1.45;
}
.devnote summary { cursor: pointer; font-weight: 600; }
.devnote ul { margin: 6px 0 4px; padding-left: 18px; }

/* ------------------------------------------------------------------ utilities */

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

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

/* Each page opens in low light: a cool wash from the top right (the top is the top of the page)
   and a warm one at the left, faded out before the bottom edge so the next section meets it
   without a seam. */
.page-hero {
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 112px)) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(ellipse 55% 110% at 88% 0%, rgba(111, 155, 190, .13), transparent 70%),
    radial-gradient(ellipse 36% 60% at 0% 52%, rgba(255, 120, 0, .08), transparent 70%),
    var(--bg);
  color: var(--fg);
}
.page-hero h1 { max-width: 14em; font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.page-hero .lead { margin-top: 1.4rem; }
.page-hero--error { min-height: 70vh; }
.page-hero--dark { padding-bottom: clamp(64px, 8vw, 110px); }

.section { padding: clamp(56px, 7vw, 104px) 0; background: var(--bg); color: var(--fg); }
.section--tight { padding-top: 0; }
.section__head { max-width: 44rem; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.section__head p { color: var(--fg-2); }
.rule-top { border-top: 1px solid var(--line); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line-bold); }
.steps li { counter-increment: step; padding-top: 20px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px; font: 500 .75rem var(--mono); letter-spacing: .12em; color: var(--accent-text); }
.steps h3 { margin-bottom: .4em; }
.steps p { color: var(--fg-2); font-size: .98rem; }

.prose-list { margin: 0; padding-left: 1.2em; color: var(--fg-2); }
.card-plain { padding-top: 18px; border-top: 1px solid var(--line-bold); }
.card-plain h3 { margin-bottom: .45em; }
.card-plain p { color: var(--fg-2); font-size: .98rem; }
.prose-list li { margin: .35em 0; }

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

.plans { padding: 0 0 clamp(56px, 7vw, 100px); background: var(--bg); }
.plans__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .92rem;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
}
.segmented button[aria-checked="true"] { background: rgba(255, 131, 0, .16); color: var(--fg); box-shadow: inset 0 0 0 1px var(--orange), 0 0 14px rgba(255, 131, 0, .2); }
.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--void);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
}
.currency { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--fg-2); }
.currency select { width: auto; }

.plans__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.plan { padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
/* The order builder is where the light falls: an edge lit from the top corner, a warm glow
   inside it, and a surface a shade above the cards around it. */
.plan--main {
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(255, 120, 0, .13), transparent 72%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .85), rgba(255, 131, 0, .12) 32%, var(--line-strong) 68%, var(--line)) border-box;
  --surface: #151e24;
}
.plan__name { font-size: 1.6rem; letter-spacing: -.03em; }
.plan__for { margin: .4em 0 0; color: var(--fg-2); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 28px 0 6px; }
.plan__price .price { color: var(--fg); }
.plan__unit { color: var(--fg-2); }
.plan__vat { font-size: .9rem; color: var(--fg-3); }
.seats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seats > span:first-child { font-weight: 600; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.stepper button { width: 40px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--fg); }
.stepper button:hover { background: var(--surface); }
.stepper input { width: 56px; border: 0; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); border-radius: 0; background: transparent; text-align: center; font: 600 1rem var(--sans); color: var(--fg); padding: 10px 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field .stepper { justify-self: start; }
.field .stepper input:not([type="checkbox"]) { width: 64px; padding: 10px 0; border-width: 0 1px; border-radius: 0; background: transparent; text-align: center; font-weight: 600; box-shadow: none; }
.seats__total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan .actions { margin-top: 24px; }
.plan .ticks { margin-top: 28px; }
.plan--enterprise .ticks { margin: 20px 0 28px; }
.plan--enterprise .btn { margin-top: auto; align-self: flex-start; }
.plans__note { margin-top: 20px; max-width: 52em; font-size: .88rem; color: var(--fg-3); }

.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--line-bold); }
.included > div { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.included h3 { font-size: 1.05rem; margin-bottom: .5em; }
.included p { color: var(--fg-2); font-size: .95rem; }

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

.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field > label, .field__label { font-size: .92rem; font-weight: 600; }
.field__hint { font-size: .84rem; color: var(--fg-3); }
.input, .select, .textarea,
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .currency select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.currency select { width: auto; padding: 8px 32px 8px 12px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .currency select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 131, 0, .28), 0 0 18px rgba(255, 131, 0, .18);
}
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field__error { margin: 2px 0 0; font-size: .86rem; color: var(--danger); }
.form-error { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--danger); background: rgba(255, 92, 77, .09); color: var(--fg); font-size: .95rem; }
.form-error[hidden] { display: none; }
.form-note { padding: 12px 14px; border-left: 3px solid var(--orange); background: var(--surface-2); font-size: .92rem; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 14px; font-size: .95rem; color: var(--fg-2); }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--orange); }
.check .field__error { grid-column: 2; }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.radio-cards--stack { grid-template-columns: 1fr; }
.radio-card { position: relative; display: block; padding: 16px 16px 16px 46px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.radio-card input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; accent-color: var(--orange); }
.radio-card strong { display: block; }
.radio-card span { font-size: .88rem; color: var(--fg-2); }
.radio-card:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange), 0 0 22px rgba(255, 131, 0, .14); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }

/* ------------------------------------------------------------------ sign in / sign up */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); }
/* The logo's facets under a warm light in the dark, with the form beside them. */
.auth__art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 56px) clamp(24px, 5vw, 72px) 56px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 28% 30%, rgba(255, 110, 0, .2), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(111, 155, 190, .1), transparent 70%),
    var(--void);
  box-shadow: inset -1px 0 0 var(--line);
  color: var(--fg);
}
.auth__art .facets { position: relative; width: min(340px, 62%); margin: 0 0 56px; filter: drop-shadow(0 24px 60px rgba(255, 100, 0, .38)); }
.auth__art h2 { position: relative; max-width: 11em; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.auth__art p { position: relative; max-width: 26em; color: var(--mist); }
.auth__panel { display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) clamp(24px, 6vw, 88px) 56px; }
.auth__form { width: 100%; max-width: 27rem; }
.auth__form h1 { font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: -.04em; margin-bottom: .35em; }
.auth__form > p { color: var(--fg-2); }
.auth__alt { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--fg-2); }

/* ------------------------------------------------------------------ account */

.account { min-height: 100vh; padding: calc(var(--nav-h) + 40px) 0 88px; background: var(--bg); }
.account__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.account__nav { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; display: grid; gap: 2px; }
.account__nav a, .account__nav button {
  display: block;
  padding: 10px 14px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  font: 500 .95rem var(--sans);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
}
.account__nav a:hover, .account__nav button:hover { color: var(--fg); }
.account__nav a[aria-current="page"] { color: var(--fg); border-left-color: var(--orange); background: var(--surface); }
.account__nav hr { width: 100%; margin: 10px 0; border: 0; border-top: 1px solid var(--line); }
.account__main { min-width: 0; }
.account__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.account__title h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -.04em; }
.panel { margin-bottom: 20px; padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--line); }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.panel h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 0; }
.panel h3 { font-size: 1.02rem; margin-bottom: .4em; }
.panel p { color: var(--fg-2); }
.panel--danger { border-color: rgba(255, 92, 77, .35); }
/* The panel that matters most on each account page, lit like the order builder. */
.panel--hero {
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(255, 120, 0, .12), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .7), rgba(255, 131, 0, .1) 30%, var(--line-strong) 70%, var(--line)) border-box;
  --surface: #151e24;
  --surface-2: #1b262d;
}
.panel--hero h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.035em; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin: 18px 0 4px; }
.kv dt { font: 500 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.kv dd { margin-top: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 .68rem/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--good { color: var(--ok); }
.status--warn { color: var(--orange); }
.status--bad { color: var(--danger); }
.status--quiet { color: var(--fg-3); }
.licence { padding: 18px 0; border-top: 1px solid var(--line); }
.licence:first-of-type { border-top: 0; padding-top: 4px; }
.licence__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.licence__key { font: 600 1.02rem var(--mono); letter-spacing: .04em; word-break: break-all; }
.licence__meta { font-size: .88rem; color: var(--fg-3); margin-top: 4px; }
.devices { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.devices li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; background: var(--surface-2); font-size: .92rem; }
.devices li span { color: var(--fg-2); }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font: 500 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.mono { white-space: nowrap; }
.empty { padding: 18px; border: 1px dashed var(--line-strong); color: var(--fg-2); font-size: .95rem; }
.testbar {
  position: relative;
  z-index: 2;
  margin-top: var(--nav-h);
  padding: 9px var(--gutter);
  background: repeating-linear-gradient(-45deg, rgba(255, 131, 0, .2) 0 14px, rgba(255, 131, 0, .07) 14px 28px), var(--ink-deep);
  border-bottom: 1px solid rgba(255, 131, 0, .45);
  color: #ffb877;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
}
.testbar + .account, .testbar + .checkout { padding-top: 40px; }
.skeleton { min-height: 140px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border: 1px solid var(--line); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.modal { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.modal::backdrop { background: rgba(3, 5, 7, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__body { padding: 28px; }
.modal__body h2 { font-size: 1.45rem; letter-spacing: -.025em; margin-bottom: .5em; }
.modal__body p { color: var(--fg-2); }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface-2); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 95;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: var(--ink-high);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  font-size: .95rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  transform: translate(-50%, 140%);
  transition: transform .35s var(--ease);
}
.toast--show { transform: translate(-50%, 0); }
.toast[data-kind="error"] { border-left: 3px solid #ff6b5b; }
.toast[data-kind="ok"] { border-left: 3px solid var(--orange); }

/* ------------------------------------------------------------------ checkout */

.checkout { min-height: 80vh; padding: calc(var(--nav-h) + 48px) 0 88px; background: var(--bg); }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.summary { position: sticky; top: calc(var(--nav-h) + 32px); }
.summary .panel { margin: 0; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.summary__row span:first-child { color: var(--fg-2); }
.summary__row--total { border-bottom: 0; padding-top: 16px; font-size: 1.15rem; font-weight: 600; }
.keyinfo { margin-top: 18px; font-size: .88rem; color: var(--fg-2); }
.keyinfo li { margin: .35em 0; }

/* ------------------------------------------------------------------ product page */

.workspace { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; padding: 48px 0; border-top: 1px solid var(--line); }
.workspace:first-of-type { border-top: 1px solid var(--line-bold); }
.workspace__head h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.035em; margin-bottom: .35em; }
.workspace__head p { color: var(--fg-2); }
/* The product page: what goes into a workspace and what comes out, in place of a tool list. */
.workspace__body { align-self: center; max-width: 44rem; font-size: 1.08rem; }
.workspace__body p:first-child { color: var(--fg-2); }
.workspace__body p + p { margin-top: .8em; }
.card-plain .tool__more { margin-top: 14px; }
.facts--flat { margin-top: 0; }
.facts--flat .fact dt { font-size: 1.5rem; letter-spacing: -.02em; }
.toolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.toolgrid > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.toolgrid dt { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.toolgrid dd { color: var(--fg-2); font-size: .95rem; margin-top: 3px; }
.toolgrid dt:has(.tool-icon) + dd { margin-left: 42px; }
/* Real pictures of the application: the whole window, as the operator sees it. */
.app-shot { margin: 0; }
.app-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1014; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(255, 120, 0, .12); }
.app-shot figcaption { margin-top: 12px; font: 500 .66rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.page-hero .app-shot { margin-top: clamp(40px, 6vw, 72px); }
.workspace .app-shot { grid-column: 1 / -1; margin-top: 12px; }
.tool-group .app-shot { margin-top: clamp(28px, 4vw, 48px); }
.tabstrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; }
.tabstrip li { padding: 8px 14px; border: 1px solid var(--line); font-size: .9rem; font-weight: 500; color: var(--fg-2); }
.tabstrip li.on { background: rgba(255, 131, 0, .14); color: var(--fg); border-color: var(--orange); }

/* A schematic of the application's ribbon, drawn from its real tab and command names. */
.ribbon { margin: clamp(40px, 6vw, 72px) 0 0; border: 1px solid var(--line-strong); background: #080c0f; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(255, 120, 0, .12); }
.ribbon__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.ribbon__tabs span { padding: 8px 14px 9px; font-size: .9rem; color: var(--fg-3); }
.ribbon__tabs .on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--orange); }
.ribbon__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 14px 12px; }
.ribbon__btn { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; min-width: 72px; padding: 10px 8px 8px; border: 1px solid transparent; font-size: .8rem; color: var(--fg-2); text-align: center; }
.ribbon__btn::before { content: ""; width: 26px; height: 26px; background: linear-gradient(135deg, var(--orange) 0 50%, var(--burnt) 50%); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: .75; }
.ribbon__btn--on { border-color: var(--line-strong); background: rgba(255, 131, 0, .1); color: var(--fg); }
.ribbon__btn--on::before { opacity: 1; }
.ribbon__rule { width: 1px; margin: 4px 6px; background: var(--line-strong); }
.ribbon figcaption { padding: 10px 14px; border-top: 1px solid var(--line); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }

/* ------------------------------------------------------------------ download and contact */

.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 50% 90% at 100% 50%, rgba(255, 120, 0, .14), transparent 70%) padding-box,
    linear-gradient(#131b21, #131b21) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .7), rgba(255, 131, 0, .1) 30%, var(--line-strong) 70%, var(--line)) border-box;
}
.download-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .3em; }
.download-card p { color: var(--mist); margin: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); }
.contact-aside dl { display: grid; gap: 18px; margin-top: 8px; }
.contact-aside dt { font: 500 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.contact-aside dd { margin-top: 4px; }
.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent { padding: 28px; border: 1px solid var(--line); background: var(--surface); }

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

.legal { padding: calc(var(--nav-h) + clamp(48px, 6vw, 88px)) 0 96px; background: var(--bg); }
.legal__grid { display: grid; grid-template-columns: 240px minmax(0, 46rem); gap: clamp(32px, 5vw, 80px); }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; font-size: .88rem; }
.legal__toc p { font: 500 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal__toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); color: var(--fg-2); text-decoration: none; }
.legal__toc a:hover { color: var(--fg); border-left-color: var(--orange); }
.legal__head h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: .98; letter-spacing: -.045em; margin-bottom: .35em; }
.legal__meta { font: 500 .78rem/1.6 var(--mono); color: var(--fg-3); margin-bottom: 28px; }
.gist { margin: 0 0 40px; padding: 22px 24px; background: var(--surface); border-left: 3px solid var(--orange); }
.gist h2 { margin: 0 0 .6em !important; font-size: 1.05rem !important; letter-spacing: 0 !important; }
.gist ul { margin: 0; padding-left: 1.1em; }
.gist li { margin: .35em 0; }
.prose { font-size: 1rem; line-height: 1.72; }
.prose h2 { margin: 2.4em 0 .7em; font-size: 1.45rem; letter-spacing: -.02em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { margin: 1.8em 0 .5em; font-size: 1.08rem; }
.prose p, .prose li { color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92rem; }
.prose th, .prose td { padding: 10px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 600px) { .prose table { font-size: .84rem; } .prose th, .prose td { padding: 7px; } }
.prose th { background: var(--surface-2); font-weight: 600; }
.prose .caps { font-variant: small-caps; letter-spacing: .02em; }
.prose blockquote { margin: 1.4em 0; padding: 16px 20px; border: 1px solid var(--line-strong); background: var(--surface); }
.legal-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-bold); }
.legal-index a { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.legal-index strong { display: block; font-size: 1.15rem; letter-spacing: -.01em; }
.legal-index span { color: var(--fg-2); font-size: .95rem; }
.legal-index a:hover strong { text-decoration: underline; text-decoration-color: var(--orange); }

.outbox { padding: 0 0 88px; background: var(--bg); }
.outbox__mail { margin-bottom: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--line); }
.outbox__mail h2 { font-size: 1.1rem; letter-spacing: 0; margin: 0; }
.outbox__mail pre { margin: 14px 0 0; white-space: pre-wrap; font: .88rem/1.6 var(--mono); color: var(--fg-2); }

/* Printed pages (the legal ones, mostly) go back to ink on paper. */
@media print {
  .nav, .footer, .legal__toc, .devnote, .skip-link, .testbar { display: none !important; }
  .legal { padding: 0; }
  .legal__grid { display: block; }
  :root, [data-tone] {
    --bg: #fff; --fg: #000; --fg-2: #333; --fg-3: #555; --line: rgba(0, 0, 0, .15); --line-strong: rgba(0, 0, 0, .3);
    --line-bold: rgba(0, 0, 0, .5); --surface: #fff; --surface-2: #f2f2f2; --accent-text: #a84000; color-scheme: light;
  }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .page-hero h1 { background: none; -webkit-text-fill-color: currentColor; color: #000; }
}

/* ------------------------------------------------------------------ modules, seats and licences */

.segmented--wrap { flex-wrap: wrap; border-radius: 24px; }
.term-note { margin: -12px 0 24px; color: var(--fg-2); font-size: .95rem; max-width: 46rem; }

.modules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.module-card { display: flex; flex-direction: column; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); }
.module-card__tabs { font: 500 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.module-card__name { margin: 8px 0 6px; font-size: 1.35rem; letter-spacing: -.025em; }
.module-card__summary { color: var(--fg-2); font-size: .93rem; }
.module-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: auto 0 0; padding-top: 16px; font-size: .9rem; color: var(--fg-2); }
.module-card__price .price { font-size: 1.9rem; }
.module-card__extra, .module-card__needs { margin-top: 6px; font-size: .84rem; color: var(--fg-3); }
.module-card__extra:empty, .module-card__needs:empty { display: none; }
.module-card { transition: border-color .3s; }
.module-card:hover { border-color: var(--line-strong); }
.module-card--suite {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 32px;
  align-items: end;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 40% 120% at 100% 100%, rgba(255, 120, 0, .16), transparent 70%) padding-box,
    linear-gradient(#141c22, #141c22) padding-box,
    linear-gradient(100deg, var(--line-strong), var(--line) 45%, rgba(255, 131, 0, .75)) border-box;
}
.module-card--suite > * { grid-column: 1; }
.module-card--suite .module-card__price { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; }
.module-card--suite .module-card__needs { color: var(--orange); }

.plans__side { display: grid; gap: 24px; align-content: start; }
.builder { display: grid; gap: 12px; margin-top: 24px; }
.seat-group { padding: 14px 16px; border: 1px solid var(--line-strong); }
.seat-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seat-group__foot, .seat-group__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.seat-group__title { margin: 0 0 10px; }
.seat-group__title span { color: var(--fg-2); font-size: .9rem; }
.seat-group__label { color: var(--fg-2); }
.seat-group__sum { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.seat-group--light { background: var(--surface); }
.builder__add { margin-top: 12px; align-self: flex-start; }
.builder__problem:not([hidden]) { margin-top: 12px; color: var(--fg); }
.btn.is-disabled { opacity: .45; cursor: not-allowed; }

.entitlements { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.entitlement { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-left: 3px solid var(--ok); background: var(--surface-2); font-size: .92rem; }
.entitlement span { color: var(--fg-2); }
.entitlement--pending, .entitlement--scheduled { border-left-color: var(--orange); }
.entitlement--ended { border-left-color: var(--line-strong); opacity: .7; }
.billing-items { margin-top: 14px; }
.renewals { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.renewal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.renewal .check { margin: 0; }
.select-small, .admin select { padding: 6px 28px 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field-bg); color: var(--fg); font: inherit; font-size: .9rem; }
.summary__row small { color: var(--fg-3); }
.modal--wide { width: min(760px, calc(100% - 32px)); }
.change-seats { display: grid; gap: 10px; margin: 18px 0 12px; }
.change-add { margin-bottom: 16px; }

.admin { min-height: 100vh; padding: calc(var(--nav-h) + 40px) 0 88px; background: var(--bg); }
.admin__back { margin-bottom: 12px; font-size: .92rem; }
.admin__heading { margin: 32px 0 14px; font-size: 1.4rem; }
.admin-search .inline-actions { margin-top: 8px; }
.admin-search .input { flex: 1 1 18rem; width: auto; }
.admin-search [data-results] { margin-top: 16px; }
.admin-actions { display: grid; gap: 6px; }
.admin-actions .inline-actions { gap: 6px; }
.admin-grant { margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-grant .input { width: auto; flex: 1 1 12rem; }
.admin-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 0 16px; margin: 8px 0 12px; }
.admin-settings .field { margin-bottom: 8px; }
.admin-settings__note { flex: 1 1 16rem; }
.admin-settings .inline-actions { flex-basis: 100%; }
.input--tiny { width: 6.5rem !important; padding: 6px 10px !important; }
.input--date { width: auto !important; padding: 5px 8px !important; font-size: .9rem !important; }
.admin .table small { color: var(--fg-3); }
.admin-break { word-break: break-all; }
.link--danger { color: var(--danger); }

.releases { display: grid; gap: 20px; max-width: 52rem; }
.release { padding: 24px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.release:first-child { border-top: 1px solid var(--line-bold); }
.release__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.release__head h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.release__head .btn { margin-left: auto; }
.release__notes { white-space: pre-line; color: var(--fg-2); margin-bottom: 10px; }
.admin-release-form .textarea { min-height: 120px; }
.admin-actions details { font-size: .9rem; }
.admin-actions details .textarea { margin: 6px 0; min-width: 16rem; }

@media (max-width: 1000px) {
  .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .modules-grid { grid-template-columns: 1fr; }
  .module-card--suite { grid-template-columns: 1fr; }
  .module-card--suite .module-card__price { grid-column: 1; grid-row: auto; padding-top: 12px; }
  .seat-group__sum { margin-left: 0; width: 100%; }
}

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

/* Which module a tool comes with: a small tag, led by the logo's facet. */
.module-tag {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 500 .68rem/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.module-tag::before { content: ""; width: .72em; height: .72em; flex: none; background: var(--orange); clip-path: polygon(0 0, 100% 0, 0 100%); }
.page-hero .module-tag { margin-top: 1.6rem; }
.page-hero .module-tag + .module-tag { margin-left: 8px; }
.page-hero .actions { margin-top: 1.8rem; }

/* The application's own icons, drawn for its dark panels, each on a panel-coloured tile. */
.tool-icon { flex: none; width: 48px; height: 48px; padding: 7px; border: 1px solid var(--line-strong); border-radius: 10px; background: #1b2329; }
.tool-icon--small { width: 36px; height: 36px; padding: 5px; border-radius: 8px; }
.tool-icon--tiny { width: 30px; height: 30px; padding: 4px; border-radius: 7px; }

/* A long tools page's groups, sticky under the site's navigation. */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  background: rgba(11, 16, 20, .78);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.subnav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 14px 16px 13px; font-size: .92rem; font-weight: 500; color: var(--fg-3); text-decoration: none; transition: color .2s; }
.subnav a:first-child { padding-left: 0; }
.subnav a:hover { color: var(--fg); }

.tool-group { position: relative; padding: clamp(56px, 7vw, 96px) 0 0; scroll-margin-top: calc(var(--nav-h) + 40px); }
.tool-group:last-of-type { padding-bottom: clamp(56px, 7vw, 96px); }
.tool-group__head { max-width: 46rem; margin-bottom: 24px; }
.tool-group__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.tool-group__head p { color: var(--fg-2); }

/* One tool: name and icon on the left, what it does on the right. */
.tool { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px clamp(24px, 4vw, 56px); padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 64px); }
.tool-group__head + .tool { border-top-color: var(--line-bold); }
.tool__head { display: flex; align-items: flex-start; gap: 16px; }
.tool__head h3 { margin-top: 5px; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.03em; line-height: 1.15; }
.tool__kicker { margin: 7px 0 0; font: 500 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.tool__body { display: grid; gap: 24px 40px; align-items: start; }
.tool--shot .tool__body { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
.tool__text > p { color: var(--fg-2); max-width: 40em; }
.tool__text > p strong { color: var(--fg); }
.tool__text .ticks { margin-top: 18px; gap: 9px; }
.tool__text .ticks li { font-size: .97rem; }
.tool__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .9rem; color: var(--fg-2); }
.tool__facts b { margin-right: .6em; font: 500 .66rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.tool__more { display: inline-block; margin-top: 20px; padding-bottom: 2px; border-bottom: 1px solid var(--orange); font-weight: 600; color: var(--fg); text-decoration: none; }
.tool__more::after { content: "\00a0\2192"; color: var(--orange); }
.tool__more:hover { color: #fff; }

/* A real panel from the application, beside the words that describe it. */
.panel-shot { margin: 0; }
.panel-shot img { width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.panel-shot figcaption { margin-top: 10px; font: 500 .66rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

/* The tools hub: spotlights, then every tab's tools as links. */
/* Nine equal cards, three across: the section is about one screen, not nine (James, 2026-10-01). */
.spotlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 120, 0, .1), transparent 70%) padding-box,
    linear-gradient(#131b21, #131b21) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .6), rgba(255, 131, 0, .08) 32%, var(--line-strong) 70%, var(--line)) border-box;
  color: var(--fg);
  text-decoration: none;
  transition: transform .35s var(--ease);
}
.spotlight:hover { transform: translateY(-3px); }
.spotlight--main {
  background:
    radial-gradient(ellipse 45% 90% at 100% 50%, rgba(255, 120, 0, .16), transparent 70%) padding-box,
    linear-gradient(#131b21, #131b21) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .85), rgba(255, 131, 0, .1) 30%, var(--line-strong) 70%, var(--line)) border-box;
}
.spotlight .tool-icon { width: 36px; height: 36px; margin-bottom: 14px; }
.spotlight .module-tag { align-self: flex-start; margin-bottom: 10px; }
.spotlight h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: .45em; }
.spotlight p { color: var(--fg-2); font-size: .93rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.spotlight__go { margin-top: auto; padding-top: 14px; font-size: .93rem; font-weight: 600; }
.spotlight__go::after { content: "\00a0\2192"; color: var(--orange); }

.workspace-tools { position: relative; padding: clamp(56px, 7vw, 96px) 0 0; scroll-margin-top: calc(var(--nav-h) + 40px); }
.workspace-tools:last-of-type { padding-bottom: clamp(56px, 7vw, 96px); }
.workspace-tools__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.workspace-tools__head > div { max-width: 44rem; }
.workspace-tools__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: .3em; }
.workspace-tools__head p { margin: 0; color: var(--fg-2); }
.workspace-tools__head .module-tag { margin-bottom: 14px; }
.tool-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line-bold); }
.tool-link { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.tool-link .tool-icon { grid-row: span 2; }
.tool-link strong { font-weight: 600; }
.tool-link span { color: var(--fg-2); font-size: .9rem; line-height: 1.45; }
.tool-link:hover strong { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .2em; }

/* ------------------------------------------------------------------ 3D demos and spotlight pages */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  border: 1px solid transparent;
  background:
    linear-gradient(#0e1418, #0e1418) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .8), rgba(255, 131, 0, .1) 28%, var(--line-strong) 70%, var(--line)) border-box;
}
.demo__stage { position: relative; min-height: 440px; overflow: hidden; background: radial-gradient(ellipse 70% 65% at 50% 42%, #1c262d, #090c0f 78%); }
/* Beside a tall panel of controls, the view keeps a sensible height and stays in sight. */
@media (min-width: 1001px) {
  .demo__stage { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; height: min(680px, calc(100vh - var(--nav-h) - 32px)); }
}
.demo__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.demo__stage canvas:active { cursor: grabbing; }
.demo__still { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 24px 48px; }
.demo__still img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid var(--line-strong); border-radius: 6px; }
.demo:has(.demo__panel[hidden]) { grid-template-columns: 1fr; }
.demo__note { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; font: 500 .64rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); pointer-events: none; }
.demo__zoom { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }
.demo__zoom button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(11, 16, 20, .72); color: var(--fg); font: 500 1.15rem/1 var(--sans); cursor: pointer; transition: border-color .2s; }
.demo__zoom button:hover { border-color: var(--orange); }
.demo__zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.demo .check { margin: 0; }
.demo__panel { display: grid; gap: 22px; align-content: start; padding: 24px; border-left: 1px solid var(--line); background: #10161b; }
.demo__label { margin: 0 0 10px; font: 500 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.texture-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.texture-chip { display: grid; gap: 5px; padding: 0 0 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1014; color: var(--fg-2); font: 500 .7rem/1.2 var(--sans); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s, color .2s; }
.texture-chip canvas, .texture-chip__plus { width: 100%; aspect-ratio: 1; background: #0d1216; }
.texture-chip canvas { display: block; }
.texture-chip__plus { display: grid; place-items: center; font-size: 1.5rem; color: var(--orange); }
.texture-chip:hover { border-color: var(--fg-2); color: var(--fg); }
.texture-chip[aria-pressed="true"] { border-color: var(--orange); color: var(--fg); box-shadow: 0 0 0 1px var(--orange), 0 0 18px rgba(255, 131, 0, .25); }
.control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.control-row label { font-size: .92rem; font-weight: 600; }
.control-row output { font: 600 .88rem/1 var(--mono); color: var(--fg); }
.range { grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--orange) var(--fill, 50%), rgba(200, 222, 238, .2) var(--fill, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #0b1014; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255, 131, 0, .6); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(200, 222, 238, .2); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--orange); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #0b1014; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255, 131, 0, .6); }
.range:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.demo .segmented { width: 100%; }
.demo .segmented button { flex: 1; justify-content: center; }
.demo__summary { margin: 0; padding: 12px 14px; border: 1px solid var(--line); background: #0b1014; font: .8rem/1.55 var(--mono); color: var(--fg-2); white-space: pre-line; }
.demo__group { display: grid; gap: 22px; }
.demo__checks { display: grid; gap: 10px; }
.demo__hint { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--fg-3); }
.demo__group .demo__hint { margin-top: -10px; }
.demo .check small { font-size: .85em; color: var(--fg-3); }
.segmented--four button { padding-left: 6px; padding-right: 6px; }
.demo__hint--top { margin: 0 0 12px; }
.demo__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.demo__checks--after, .demo__buttons--after { margin-top: 14px; }
.demo__status { border-color: rgba(255, 131, 0, .35); color: var(--fg); }
.panel-shot--inline { max-width: 300px; margin-top: 36px; }
.demo__privacy { margin: 0; font-size: .8rem; color: var(--fg-3); }
/* Steps that open up in order (Body skin): the later ones dimmed until the earlier are done. */
.demo__step { transition: opacity .2s; }
.demo__step.is-off { opacity: .42; }
.openings-wrap { overflow-x: auto; border: 1px solid var(--line); background: #0b1014; }
.openings { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.35; }
.openings th { padding: 7px 8px; border-bottom: 1px solid var(--line-strong); font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); text-align: left; white-space: nowrap; }
.openings td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: middle; }
.openings tr:last-child td { border-bottom: 0; }
.openings th:nth-child(3), .openings td:nth-child(3) { text-align: right; font-family: var(--mono); }
.openings td:first-child, .openings th:first-child { width: 1%; }
.openings td[colspan] { padding: 14px 10px; color: var(--fg-3); text-align: left; font-family: var(--sans); }
.openings tr[data-row] { cursor: pointer; }
.openings tr[data-row]:hover td { background: rgba(200, 222, 238, .05); color: var(--fg); }
.openings tr[aria-selected="true"] td { background: rgba(51, 217, 255, .1); color: var(--fg); }
.openings tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 #33d9ff; }
.openings tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.openings input { display: block; width: 16px; height: 16px; margin: 0; accent-color: var(--orange); }
.steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Sculpt's brushes, two to a row, chosen like the segmented buttons. */
.brush-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.brush-grid button { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1014; color: var(--fg-2); font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.brush-grid button:hover { border-color: var(--fg-2); color: var(--fg); }
.brush-grid button[aria-checked="true"] { border-color: var(--orange); background: rgba(255, 131, 0, .12); color: var(--fg); box-shadow: 0 0 14px rgba(255, 131, 0, .18); }
.brush-grid button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented--five button { padding-left: 4px; padding-right: 4px; font-size: .8rem; }
.segmented button:disabled { opacity: .4; cursor: default; }
.demo__checks--row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
/* Slice's list of pieces: each with its colour in the view and its size. */
.piece-list { max-height: 188px; margin: 0; padding: 0; overflow-y: auto; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font: .74rem/1.5 var(--mono); color: var(--fg-2); }
.piece-list:empty { display: none; }
.piece-list li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.piece-swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
/* A toggle button that stays lit while it's on (Single skin's Move corners). */
.demo .btn[aria-pressed="true"] { border-color: var(--orange); background: rgba(255, 131, 0, .14); color: var(--fg); box-shadow: 0 0 14px rgba(255, 131, 0, .2); }
/* Compare: the deviation key down the left of the view, as the application draws it. */
.deviation-key { position: absolute; top: 16%; bottom: 20%; left: 18px; width: 12px; display: flex; flex-direction: column; border: 1px solid rgba(233, 238, 242, .45); pointer-events: none; }
.deviation-key__band { flex: 1 1 0; }
.deviation-key__label { position: absolute; left: 20px; transform: translateY(-50%); font: 500 .64rem/1 var(--mono); color: var(--fg-2); white-space: nowrap; text-shadow: 0 1px 3px #000; }
.compare-pair { display: grid; gap: 6px; margin: 0; font-size: .92rem; }
.compare-pair div { display: flex; justify-content: space-between; gap: 12px; }
.compare-pair dt { color: var(--fg-3); }
.compare-pair dd { margin: 0; font-weight: 600; text-align: right; }
.report-box:empty { display: none; }
.report-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: #0b1014; font: .76rem/1.35 var(--mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.report-table th, .report-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.report-table th[scope="col"], .report-table tr:first-child th { font: 500 .6rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); border-bottom-color: var(--line-strong); vertical-align: bottom; }
.report-table th[scope="row"] { font-weight: 500; color: var(--fg-3); text-align: left; white-space: nowrap; }
.report-table tr:last-child > * { border-bottom: 0; }
.report-table .report-table__low { color: var(--danger); font-weight: 600; }
/* Hole Fill: the table of the red patch filled each way, the shape in use marked. */
.fill-table th[scope="row"] { color: var(--fg-2); }
.fill-table tr.is-current > * { background: rgba(255, 131, 0, .12); color: var(--fg); }
.fill-table tr.is-current th { box-shadow: inset 2px 0 0 var(--orange); }
/* Measure: the feature list, the result with its GD&T frame, tags in the view, and the saved table. */
.feature-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.feature-list button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #0b1014; color: var(--fg-2); font: 600 .88rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.feature-list button:hover { border-color: var(--fg-2); color: var(--fg); }
.feature-list button[aria-selected="true"] { border-color: var(--orange); background: rgba(255, 131, 0, .12); color: var(--fg); }
.feature-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.feature-list b { font: 600 .74rem/1 var(--mono); color: #6fe0c4; }
.feature-list b:not(:empty) { padding: 3px 0; border: 1px solid currentColor; text-align: center; }
.feature-list small { font: 500 .64rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.demo-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.demo-fields > label { font-size: .92rem; font-weight: 600; }
.demo-fields .select, .demo-fields .input { padding: 7px 10px; font-size: .9rem; }
.demo-fields .input { font-family: var(--mono); }
.demo-fields .select:disabled, .demo-fields .input:disabled { opacity: .45; }
.demo-fields .select:focus, .demo-fields .input:focus { outline: none; border-color: var(--orange); }
.demo-fields--ticks .check { align-items: center; color: var(--fg); font-weight: 600; }
.demo-fields--ticks .check input { margin: 0; }
.measure-result { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); background: #0b1014; }
.measure-result p { margin: 0; }
.measure-result__value { font: 600 1.3rem/1.2 var(--mono); color: var(--fg); white-space: pre-wrap; }
.measure-result__value.is-pass, .measure-table .is-pass { color: var(--ok); }
.measure-result__value.is-fail, .measure-table .is-fail { color: var(--danger); }
.measure-result__detail { font-size: .82rem; line-height: 1.5; color: var(--fg-2); }
.gdt-frame { display: inline-flex; justify-self: start; border: 1.5px solid var(--fg); font: 600 .95rem/1 var(--mono); color: var(--fg); }
.gdt-frame span { display: grid; place-items: center; min-width: 34px; padding: 6px 9px; }
.gdt-frame span + span { border-left: 1.5px solid var(--fg); }
.gdt-symbol { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.measure-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.measure-tag { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 4px; background: rgba(8, 12, 15, .82); font: 600 .7rem/1.2 var(--sans); color: var(--fg-2); white-space: nowrap; }
.measure-tag.is-selected { color: #ffc98a; }
.measure-tag b { padding: 2px 5px; border: 1px solid currentColor; font: 600 .72rem/1 var(--mono); color: #6fe0c4; }
.demo__report { grid-column: 1 / -1; padding: 20px 24px 24px; border-top: 1px solid var(--line); background: #10161b; }
.demo:has(.demo__panel[hidden]) .demo__report { display: none; }
.measure-table-wrap { overflow-x: auto; }
.measure-table th, .measure-table td { text-align: left; white-space: nowrap; }
.measure-table td:nth-child(n+5):nth-child(-n+7) { text-align: right; }
.measure-table .measure-table__empty { padding: 14px 10px; font-family: var(--sans); color: var(--fg-3); white-space: normal; }
.measure-table__delete { padding: 0 6px; border: 0; background: none; color: var(--fg-3); font: 600 1rem/1 var(--sans); cursor: pointer; }
.measure-table__delete:hover { color: var(--danger); }
.measure-table__delete:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; border-top: 1px solid var(--line-bold); }
.option-grid > div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.option-grid dt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-weight: 600; }
.option-grid dt span { font: 500 .66rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.option-grid dd { margin-top: 6px; color: var(--fg-2); font-size: .95rem; }
/* After .option-grid, so it wins. */
.option-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }

.spot-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.spot-steps .steps { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-bold); }
.spot-steps .steps li { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }

.price-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 50% 90% at 100% 50%, rgba(255, 120, 0, .16), transparent 70%) padding-box,
    linear-gradient(#131b21, #131b21) padding-box,
    linear-gradient(150deg, rgba(255, 131, 0, .8), rgba(255, 131, 0, .1) 30%, var(--line-strong) 70%, var(--line)) border-box;
}
.price-callout h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .35em; }
.price-callout p { color: var(--fg-2); max-width: 36em; }
.price-callout .actions { margin-top: 0; }

@media (max-width: 1000px) {
  .spotlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo { grid-template-columns: 1fr; }
  .demo__panel { border-left: 0; border-top: 1px solid var(--line); }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-callout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; }
  .tool--shot .tool__body, .spot-steps { grid-template-columns: 1fr; }
  .panel-shot { max-width: 320px; }
}
@media (max-width: 620px) {
  .spotlights { grid-template-columns: 1fr; }
  .option-grid, .option-grid--two { grid-template-columns: 1fr; }
  .texture-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo__stage { min-height: 340px; }
  .demo .segmented button { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}

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

@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .plans__grid, .checkout__grid, .contact-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .workspace { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .account__grid, .legal__grid { grid-template-columns: 1fr; }
  .account__nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .account__nav a, .account__nav button { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 10px; }
  .account__nav a[aria-current="page"] { border-bottom-color: var(--orange); }
  .account__nav hr { display: none; }
  .legal__toc { position: static; }
  .steps, .grid-3 { grid-template-columns: 1fr; }
  .grid-2, .legal-index, .toolgrid { grid-template-columns: 1fr; }
  .download-card { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .proof__intro, .report, .kernel__head, .kernel__figure, .automate__copy, .code,
  .local__statement, .local__body, .teaser__grid > div:first-child, .teaser__price,
  .faq__grid > h2, .faq__list { grid-column: 1 / -1; }
  .local__body { margin-top: 28px; }
  .hero { align-items: flex-end; padding-bottom: 88px; }
  .hero__copy { max-width: none; }
  .hero__note { left: var(--gutter); right: auto; bottom: 22px; }
  .proof { padding-top: 55vh; }
  .report {
    background:
      linear-gradient(rgba(14, 20, 25, .95), rgba(14, 20, 25, .95)) padding-box,
      linear-gradient(135deg, rgba(255, 131, 0, .75), rgba(255, 131, 0, .08) 34%, rgba(200, 222, 238, .14) 70%, rgba(200, 222, 238, .05)) border-box;
  }
  .stage { min-height: 160vh; }
  .stage--last { min-height: 170vh; }
  .stage__copy {
    grid-column: 1 / -1;
    position: relative;
    top: auto;
    margin-top: 58vh;
    padding: 24px 22px 28px;
    background: rgba(11, 16, 20, .88);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .rail__tab { padding: 13px 14px 12px; }
}

@media (max-width: 620px) {
  .facts { grid-template-columns: 1fr; }
  .fact { padding-right: 0; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report { padding: 22px 20px 20px; }
  .report__row { grid-template-columns: 1fr; gap: 2px; }
  .hero__drag { display: none; }
  .included, .radio-cards { grid-template-columns: 1fr; }
  .seats__total { margin-left: 0; width: 100%; }
  .finale::after { opacity: .22; width: 88vw; right: -40vw; }
}

/* ------------------------------------------------------------------ reveal on scroll */

/* site.js adds .reveal-on to <html> (only when motion is welcome) and .is-in to each block as
   it comes into view; without the script everything is simply visible. */
.reveal-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-on .reveal.is-in { opacity: 1; transform: none; }
@media print { .reveal-on .reveal { opacity: 1 !important; transform: none !important; } }

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

/* A label over part of a demo's picture (Slice: "Printer size"). It sits on the point it names, and the demo removes it on first use. */
.demo__tag { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; background: rgba(11, 16, 20, .82);
  border: 1px solid rgba(255, 131, 0, .75); color: #ffb366; font: 600 1rem/1.2 var(--sans); white-space: nowrap; pointer-events: none; }

/* ---- Easier to read on the tool pages: the small capitals and captions are larger, in the normal font, and brighter ---- */
.tool__kicker, .tool__facts b, .panel-shot figcaption, .app-shot figcaption, .eyebrow { font-family: var(--sans); text-transform: none; letter-spacing: .01em; font-weight: 600; }
.tool__kicker { font-size: 1rem; }
.tool__facts b { font-size: .95rem; }
.tool__facts { font-size: 1.05rem; color: var(--fg); }
.tool__text > p, .tool-group__head p, .tool-link span, .ticks li { font-size: 1.1rem; color: #dfe6eb; line-height: 1.65; }
.tool__text .ticks li { font-size: 1.08rem; }
.panel-shot figcaption, .app-shot figcaption { font-size: .98rem; line-height: 1.55; color: #c9d3da; }
.eyebrow { font-size: 1rem; }
.subnav a { font-size: 1.05rem; font-weight: 600; color: #dfe6eb; }
.module-tag { font-size: .95rem; }

/* Screenshots you can click to enlarge */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.zoom-open { overflow: hidden; }
.zoom { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(5, 8, 10, .96); }
.zoom__bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; }
.zoom__hint { margin-right: auto; color: #c9d3da; font-weight: 600; font-size: 1rem; }
.zoom__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: 600 1.6rem/1 var(--sans); cursor: pointer; }
.zoom__btn:hover { border-color: var(--orange); background: rgba(255,131,0,.18); }
.zoom__btn--close { background: var(--orange); border-color: var(--orange); color: #140b00; }
.zoom__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zoom__stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 18px 18px; }
.zoom__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: grab; transform-origin: center; user-select: none; -webkit-user-drag: none; touch-action: none; }
.zoom__img.is-drag { cursor: grabbing; }

/* ---- Navigation on every page (as on the homepage): a 70px bar, a compact logo, 16px medium white menu items with a pill
   behind them on hover, and a 42px pill button ---- */
/* The bar reaches the very top of a phone: its height includes the clock/notch strip (0 where there is none), and
   its padding keeps the logo and menu below that strip (James, 2026-10-13: on phones the bar looked locked a little
   below the top, with the page showing through above it). */
:root { --nav-h: calc(70px + env(safe-area-inset-top, 0px)); }
.nav { padding-top: env(safe-area-inset-top, 0px); }
.nav__brand .logo { height: 32px; }
.nav__links { gap: 20px; margin-left: -12px; }
.nav__links a, .nav__signin { padding: 8px 12px; border-radius: 999px; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: 0; transition: background .2s, color .2s; }
.nav__links a:hover, .nav__signin:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav__links a[aria-current]::after { left: 12px; right: 12px; }
.nav__actions { gap: 28px; }
.nav .btn--small { --btn-h: 42px; padding: 0 24px; font-size: 1rem; font-weight: 600; }
@media (max-width: 600px) { .nav__brand .logo { height: 28px; } }

/* Sign-in artwork: the facets, heading and text sit in the middle of the left panel, over a mesh that follows the cursor */
.auth__art { align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--nav-h) + 40px); }
.auth__art .facets { margin: 0 auto 48px; }
.auth__art h2, .auth__art p { margin-inline: auto; }
.auth__mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.auth__art > :not(.auth__mesh) { position: relative; z-index: 1; }

/* Sign-in and sign-up forms in a rounded card, with the homepage's type and rounded fields */
.auth__panel { justify-content: center; }
.auth__form { max-width: 30rem; padding: 40px 38px; border-radius: 28px; background: #10191f; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.auth__form h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.045em; color: #fff; }
.auth__form > p { font-size: 1.1rem; line-height: 1.55; color: #e3e9ee; }
.auth__form .field { gap: 8px; margin-bottom: 20px; }
.auth__form .field > label { font-size: 1.05rem; font-weight: 700; color: #fff; }
.auth__form .field input:not([type="checkbox"]):not([type="radio"]), .auth__form .field select {
  min-height: 54px; padding: 12px 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .2); background: #0b1218; color: #fff; font: 500 1.08rem var(--sans); }
.auth__form .field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 131, 0, .18); }
.auth__form .field__hint { font-size: 1rem; color: #c9d3da; }
.auth__form .form-actions { gap: 14px 20px; margin-top: 12px; }
.auth__form .form-actions .btn { height: 56px; padding-inline: 2em; font-size: 1.1rem; }
.auth__form a:not(.btn) { color: #fff; font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.auth__alt { margin-top: 28px; padding-top: 22px; border-top-color: rgba(255, 255, 255, .15); font-size: 1.05rem; color: #e3e9ee; }
@media (max-width: 600px) { .auth__form { padding: 28px 22px; } }

/* Sign-in card: no solid black fill (a faint frosted tint instead), and set to the left of its panel, next to the artwork */
.auth__panel { justify-content: flex-start; }
.auth__form { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }
.auth__form .field input:not([type="checkbox"]):not([type="radio"]), .auth__form .field select { background: rgba(255, 255, 255, .06); }
@media (max-width: 900px) { .auth__panel { justify-content: center; } }

/* The mesh runs behind the whole sign-in area, form included */
.auth { position: relative; overflow: hidden; }
.auth > :not(.auth__mesh) { position: relative; z-index: 1; }
.auth__art { background: radial-gradient(ellipse 70% 50% at 28% 30%, rgba(255, 110, 0, .2), transparent 70%); box-shadow: none; }
/* Phones: the bar slides up out of sight while the page scrolls down, and back on the way up (site.js). Only the
   hidden state carries a transform, so the open menu, which hangs from the bar, is never inside a moved bar. */
@media (max-width: 880px) {
  .nav { transition: transform .28s ease, background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); }
  .nav[data-hidden] { transform: translateY(-100%); box-shadow: none; }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) { .nav { transition: none; } }
/* Phones with a notch or camera island (James, 2026-10-13, "like Revolut"): the strip at the top of the screen is
   always solid, in the bar's colour, so the page never shows round the camera and scrolls away under a straight
   edge - also while the bar is hidden on the way down. 0 high where there is no notch. In landscape the page keeps
   clear of the camera side. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: env(safe-area-inset-top, 0px);
  background: #0b1014; pointer-events: none; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
/* Staff: the Visitors page (admin.js visitors()) - a bar for each of the last 30 days, the day of the month under it. */
.admin-links { display: flex; gap: 8px; flex-wrap: wrap; }
.visit-chart { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 4px; height: 180px; margin-top: 8px; }
.visit-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.visit-bar span { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--orange); }
.visit-bar small { margin-top: 4px; font-size: .62rem; color: var(--fg-3, #8b98a3); }
/* Account overview in the open beta: the beta key shown large with Copy (account.js betaKeyHtml). */
.beta-key { display: grid; gap: 6px; margin: 18px 0 6px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 131, 0, .08);
  border: 1px solid rgba(255, 131, 0, .45); }
.beta-key__label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.beta-key__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.beta-key .licence__key { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; word-break: break-all; }
/* The SmartScreen explainer under the download (site/partials/smartscreen.html, account.js SMARTSCREEN). */
.smartscreen { margin-top: 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 131, 0, .45); background: rgba(255, 131, 0, .06); }
.smartscreen summary { cursor: pointer; font-size: 1rem; line-height: 1.4; color: var(--fg-2, #c9d3da); }
.smartscreen summary b { color: var(--fg, #fff); }
.smartscreen__body { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 14px; }
.smartscreen__body img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.smartscreen__body p, .smartscreen__body li { font-size: 1rem; line-height: 1.55; }
.smartscreen__body ol { margin: 10px 0; padding-left: 1.3em; }
.smartscreen__body li { margin: 4px 0; }
.smartscreen__note { font-size: .92rem; color: var(--fg-3, #9fb0bc); }
@media (max-width: 640px) { .smartscreen__body { grid-template-columns: 1fr; } .smartscreen__body img { max-width: 320px; } }