/* SplatDaddy — Monolith
   Severe editorial minimalism: near-black ground, hairline borders,
   uppercase mono meta, ember as a single precision accent. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-var-latin.87c506d88b9f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.4b73e2ff3024.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --ink: #f2f1ee;
  --muted: #9aa0a9;
  --muted-soft: #7d838d;
  --night: #070809;
  --panel: #0c0e11;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);
  --ember: #ff6b2c;
  --ember-hover: #ff824d;
  --ember-deep: #f4581c;
  --success: #59d79a;
  --danger: #ff9c91;
  --max: 1160px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

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

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.landing-page { overflow-x: hidden; }
.splat-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.splat-background.is-ready { opacity: .9; }
.splat-background.is-unavailable { opacity: 0; }
.splat-background canvas { width: 100%; height: 100%; display: block; }
.splat-background::after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 9, .62), rgba(7, 8, 9, .12) 52%, rgba(7, 8, 9, .38)),
    linear-gradient(0deg, var(--night), transparent 30%, rgba(7, 8, 9, .18));
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
main { flex: 1; position: relative; z-index: 1; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  min-height: 76px;
  padding-inline: max(20px, calc((100% - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 8, 9, .92);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand img { width: 34px; height: 34px; object-fit: contain; }
nav { display: flex; align-items: center; }
.nav-link {
  color: var(--ink);
  font: 600 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.nav-link:hover {
  color: white;
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .04);
}
.site-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav { gap: 8px; }
.nav-text-link {
  position: relative;
  padding: 10px 12px;
  color: var(--muted);
  font: 500 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: color .18s ease;
}
.nav-text-link:hover { color: var(--ink); }
.nav-text-link.active { color: var(--ink); }
.nav-text-link.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: var(--ember);
}

/* ---------------------------------------------------------------- messages */

.messages { width: min(720px, calc(100% - 40px)); margin: 16px auto -20px; position: relative; z-index: 3; }
.message {
  padding: 13px 16px 13px 18px;
  margin: 0 0 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: 4px;
  font-size: .92rem;
}
.message:last-child { margin-bottom: 0; }
.message.error { color: var(--danger); border-color: rgba(255, 156, 145, .25); border-left-color: var(--danger); }
.message.success { color: var(--success); border-color: rgba(89, 215, 154, .25); border-left-color: var(--success); }

/* Transient confirmations clear themselves; warnings and errors do not.
   "That beta key is invalid" vanishing after four seconds is worse than
   not showing it. Done with an animation rather than script because the
   site's CSP is script-src 'self' with no inline scripts, and this needs
   no state. max-height collapses the row so the page does not keep a gap
   where the toast was. */
.message.success,
.message.info,
.message.debug {
  overflow: hidden;
  max-height: 12rem;
  animation: message-dismiss 520ms ease 4.5s forwards;
}
@keyframes message-dismiss {
  to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-block: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    transform: translateY(-6px);
  }
}


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

.eyebrow, .card-kicker {
  margin: 0;
  color: var(--muted);
  font: 500 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}
h1, h2, h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

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

.beta-entry {
  width: min(1030px, calc(100% - 40px));
  min-height: calc(100vh - 176px);
  margin: 0 auto;
  padding: 70px 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
  align-items: center;
  gap: clamp(55px, 10vw, 130px);
}
.beta-entry > *, .field-group, .field-group input { min-width: 0; }
.beta-entry-copy h1 { font-size: clamp(3.7rem, 7vw, 6.4rem); margin: 20px 0 0; }
.beta-entry-copy h1::after {
  content: "";
  display: block;
  width: min(100%, 520px);
  height: 2px;
  margin-top: 34px;
  background: var(--ember);
}
.beta-entry-copy > p:last-child {
  max-width: 520px;
  margin: 26px 0 0;
  color: var(--muted);
  font: 400 .8rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.9;
}
.beta-entry-copy h1, .beta-entry-copy p, .onboarding-intro h1, .onboarding-intro p, .account-heading h1 {
  text-shadow: 0 1px 12px rgba(7, 8, 9, .6);
}

/* ---------------------------------------------------------------- cards */

.access-card, .onboarding-card, .account-card, .download-card,
.gallery-card, .gallery-empty, .tier-card, .cta-card {
  background: var(--panel);
  border: 1px solid var(--line);
}
.access-card { padding: 32px; border-radius: var(--radius-lg); display: grid; gap: 20px; }
.form-heading { display: flex; align-items: center; gap: 14px; }
.form-heading h2 { margin: 4px 0 0; font-size: 1.35rem; letter-spacing: -.01em; }
.key-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.key-icon svg { width: 22px; fill: currentColor; }

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

.field-group { display: grid; gap: 9px; }
.field-group label {
  color: var(--muted);
  font: 500 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.field-group input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  background: var(--night);
  color: var(--ink);
  border-radius: 4px;
  padding: 0 14px;
  font: .8rem var(--font-mono);
  letter-spacing: .02em;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field-group input::placeholder { color: #6d7480; }
.field-group input:hover { border-color: var(--line-strong); }
.field-group input:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px rgba(255, 107, 44, .35);
}
.field-error { color: var(--danger); font-size: .82rem; }
.access-card small {
  color: var(--muted-soft);
  font: 400 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.8;
}

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

.button {
  min-height: 49px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  font: 600 .76rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.button.primary {
  background: var(--ember);
  color: #180a02;
}
.button.primary:hover { background: var(--ember-hover); }
.button.primary:active { background: var(--ember-deep); }
.button.secondary { background: transparent; border-color: var(--line-strong); }
.button.secondary:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .4); }
.button.secondary:active { background: rgba(255, 255, 255, .03); }
.button.compact { min-height: 42px; padding-inline: 17px; }
.access-card > .button { width: 100%; justify-content: space-between; }

/* ---------------------------------------------------------------- signed-in */

.signed-in-card { align-content: start; }
.signed-in-card h2 { margin: 0 0 7px; }
.signed-in-card p { color: var(--muted); margin: 0; font-size: .92rem; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }

/* ---------------------------------------------------------------- onboarding */

.onboarding-shell, .account-shell { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 120px; }
.onboarding-intro { max-width: 700px; margin-bottom: 45px; }
.onboarding-intro h1, .account-heading h1 { font-size: clamp(3.1rem, 6.6vw, 5.4rem); margin: 18px 0 24px; }
.onboarding-intro > p:last-child {
  color: var(--muted);
  max-width: 650px;
  font: 400 .78rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.9;
}
.onboarding-card { border-radius: var(--radius-lg); overflow: hidden; }
.onboarding-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.onboarding-steps li {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-soft);
  border-right: 1px solid var(--line);
  font: 500 .7rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.onboarding-steps li:last-child { border: 0; }
.onboarding-steps span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  font: 500 .7rem var(--font-mono);
}
.onboarding-steps .active { color: var(--ink); }
.onboarding-steps .active span {
  border-color: var(--ember);
  color: var(--ember);
}
.onboarding-actions { padding: 34px; }
.onboarding-actions .button { width: 100%; justify-content: space-between; }
.onboarding-actions p {
  color: var(--muted);
  font: 400 .7rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 26px 0 5px;
}
.text-link, .back-link {
  color: var(--ink);
  font: 500 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: color .18s ease;
}
.text-link:hover, .back-link:hover { color: white; }
.back-link { display: inline-block; margin-top: 24px; color: var(--muted); }
.back-link:hover { color: var(--ink); }

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

.account-shell { width: min(1000px, calc(100% - 40px)); }
.account-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }
.account-heading h1 { margin-bottom: 0; }
.account-card {
  display: grid;
  grid-template-columns: 1.35fr .75fr 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.account-card > div { padding: 25px; border-right: 1px solid var(--line); min-width: 0; }
.account-card > div:last-child { border: 0; }
.account-card span, .account-card strong { display: block; }
.account-card span {
  margin-bottom: 8px;
  color: var(--muted-soft);
  font: 500 .66rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.account-card strong { overflow-wrap: anywhere; font: 500 .86rem var(--font-mono); letter-spacing: .01em; }
.downloads { margin-top: 45px; }
.downloads-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}
.download-card {
  margin-top: 14px;
  padding: 20px 26px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.download-summary { min-width: 0; }
.download-card .button { flex: 0 0 auto; }
.download-card h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.download-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 7px 0 0;
  color: var(--muted);
  font: 500 .74rem var(--font-mono);
  letter-spacing: .02em;
}
/* The separator trails the value it follows rather than leading the next one,
   so a row that wraps never begins with an orphaned rule. */
.download-facts > *:not(:last-child)::after {
  margin-left: 14px;
  color: var(--muted-soft);
  content: "/";
}
.download-facts time { white-space: nowrap; }
.download-note {
  margin: 7px 0 0;
  color: var(--muted-soft);
  font: 400 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.download-verify { margin-top: 9px; }
.download-verify summary {
  width: fit-content;
  color: var(--muted-soft);
  cursor: pointer;
  font: 500 .66rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.download-verify summary:hover { color: var(--ink); }
.download-verify dl { display: grid; gap: 10px; margin: 12px 0 4px; }
.download-verify dt {
  margin-bottom: 4px;
  color: var(--muted-soft);
  font: 500 .62rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.download-verify dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 500 .74rem var(--font-mono);
  letter-spacing: .01em;
}
.download-verify .download-hash { font-size: .68rem; line-height: 1.7; }
/* A dependency, not a SplatDaddy release: quieter surface, same row height. */
.prerequisite-card { margin-top: 22px; background: transparent; }
.access-unavailable {
  color: var(--muted);
  white-space: nowrap;
  font: 500 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.entitlements { margin-top: 45px; }
.entitlements h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.feature-pills span {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: .74rem var(--font-mono);
  letter-spacing: .03em;
}

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

.invoices { margin-top: 45px; }
.invoices h2 { margin: 8px 0 18px; font-size: 1.2rem; letter-spacing: -.01em; }
.invoice-scroll {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.invoice-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}
.invoice-table th {
  padding: 15px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-soft);
  font: 600 .66rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
}
.invoice-table td {
  padding: 17px 24px;
  border-bottom: 1px solid var(--line);
  color: #b6bbc3;
  font: 500 .82rem var(--font-mono);
  letter-spacing: .01em;
  vertical-align: baseline;
}
.invoice-table tbody tr:last-child td { border-bottom: 0; }
.invoice-table .invoice-amount { text-align: right; white-space: nowrap; }
.invoice-table td.invoice-amount { color: var(--ink); }
.invoice-table time { white-space: nowrap; }
.invoice-status {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
}
.invoice-link {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.invoice-link:hover { color: var(--ember); border-bottom-color: var(--ember); }
.invoice-blank { color: var(--muted-soft); }
.invoice-empty {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
.invoice-note {
  margin: 14px 0 0;
  color: var(--muted-soft);
  font: 500 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ---------------------------------------------------------------- error */

.error-page { background: var(--night); }
.error-main { display: grid; place-items: center; padding: 72px 20px 110px; }
.error-card {
  position: relative;
  width: min(680px, 100%);
  padding: clamp(32px, 7vw, 64px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.error-code {
  position: absolute;
  top: -40px;
  right: 22px;
  margin: 0;
  color: rgba(255, 255, 255, .04);
  font-family: var(--font-display);
  font-size: clamp(8rem, 25vw, 14rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.07em;
  pointer-events: none;
}
@supports (-webkit-text-stroke: 1px white) {
  .error-code { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1); }
}
.error-card h1 { position: relative; max-width: 560px; margin: 24px 0 18px; font-size: clamp(2.4rem, 7vw, 4.2rem); }
.error-message { position: relative; max-width: 510px; margin: 0 0 34px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.error-card .button { position: relative; width: min(280px, 100%); justify-content: space-between; }

/* ---------------------------------------------------------------- pages: shared shell */

.page-shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 90px 0 120px; }
.page-intro { max-width: 720px; margin-bottom: 52px; }
.page-intro h1 { font-size: clamp(3.1rem, 6.6vw, 5.4rem); margin: 18px 0 24px; }
.page-intro > p:last-child {
  color: var(--muted);
  max-width: 640px;
  font: 400 .78rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.9;
  margin: 0;
}
.page-intro h1, .page-intro p { text-shadow: 0 1px 12px rgba(7, 8, 9, .6); }
.cta-card {
  margin-top: 64px;
  padding: 36px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.cta-card h2 { margin: 10px 0 10px; font-size: clamp(1.5rem, 3.2vw, 1.9rem); letter-spacing: -.01em; }
.cta-card p:last-child {
  color: var(--muted);
  margin: 0;
  max-width: 520px;
  font: 400 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.8;
}
.cta-card .button { flex: 0 0 auto; }

/* ---------------------------------------------------------------- gallery */

.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 780px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.gallery-card { border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.gallery-video {
  aspect-ratio: 16 / 9;
  background: var(--night);
  border-bottom: 1px solid var(--line);
}
.gallery-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.gallery-card-body { padding: 22px 26px 26px; display: grid; gap: 8px; align-content: start; }
.gallery-card-body h2 { margin: 0; font-size: 1.1rem; letter-spacing: .01em; }
.gallery-card-body p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.gallery-date { color: var(--muted-soft); font: .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gallery-empty {
  max-width: 560px;
  margin: 24px auto 0;
  padding: 56px 40px;
  border-radius: var(--radius-lg);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.gallery-empty h2 { margin: 14px 0 4px; font-size: clamp(1.5rem, 3.6vw, 1.9rem); }
.gallery-empty p {
  margin: 0 0 12px;
  color: var(--muted);
  font: 400 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.8;
}
.gallery-empty .button { margin-top: 14px; }

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

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier-card {
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tier-card h2 { margin: 8px 0 2px; font-size: 1.18rem; letter-spacing: .01em; }
.tier-features {
  margin: 0;
  padding: 16px 0 6px;
  list-style: none;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.5;
  flex: 1;
}
.tier-features li { position: relative; padding-left: 20px; }
.tier-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  background: var(--muted-soft);
}
.tier-price-tag {
  justify-self: start;
  align-self: start;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tier-card.featured { border-color: var(--ember); }
.tier-card.featured .tier-price-tag { border-color: var(--line-strong); color: var(--ink); }

/* ---------------------------------------------------------------- about */

.about-hero-visual { margin: 0 0 26px; }
.about-hero-visual img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.about-section { margin-top: 84px; }
.about-section h2 { margin: 14px 0 26px; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.pipeline-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}
.pipeline-steps li { padding: 26px 24px; display: flex; align-items: flex-start; gap: 13px; border-right: 1px solid var(--line); }
.pipeline-steps li:last-child { border-right: 0; }
.pipeline-steps li > span {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: 500 .7rem var(--font-mono);
}
.pipeline-steps strong {
  display: block;
  margin-bottom: 6px;
  font: 600 .74rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pipeline-steps small { color: var(--muted-soft); font-size: .8rem; line-height: 1.5; display: block; }
.prose-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.prose-columns p { margin: 0; color: #b6bbc3; font-size: 1rem; line-height: 1.65; }
.about-columns {
  margin-top: 84px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.about-columns .about-section { margin-top: 0; }
.about-columns .about-prose { max-width: none; }
.about-prose { max-width: 680px; }
.about-prose p { margin: 0 0 18px; color: #b6bbc3; font-size: 1rem; line-height: 1.65; }
.about-prose p:last-child { margin-bottom: 0; }
.splat-diagram-figure {
  margin: 40px 0 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.splat-diagram-img { width: 100%; height: auto; display: block; }
.splat-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.splat-stages li {
  padding: 15px 20px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  border-right: 1px solid var(--line);
  font: 500 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted-soft);
}
.splat-stages li:last-child { border-right: 0; }
.splat-stages span { color: var(--ink); }
.craft-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.craft-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.craft-list strong {
  display: block;
  margin-bottom: 7px;
  font: 600 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
}
.craft-list span { display: block; color: #b6bbc3; font-size: .95rem; line-height: 1.6; }
.spec-card {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-card > div {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 20px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.spec-card > div:nth-child(2n) { border-right: 0; }
.spec-card > div:nth-last-child(-n+2) { border-bottom: 0; }
.spec-card dt {
  padding-top: 2px;
  font: 600 .7rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-soft);
}
.spec-card dd { margin: 0; color: #b6bbc3; font-size: .95rem; line-height: 1.55; }
.spec-note {
  max-width: 760px;
  margin: 14px 0 0;
  font: 500 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted-soft);
}

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

footer {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  padding: 23px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-soft);
  font: 400 .68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.footer-tagline { color: var(--muted); font-weight: 500; letter-spacing: .16em; }

/* ---------------------------------------------------------------- a11y */

:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}
.button:focus-visible, .nav-link:focus-visible { outline-offset: 2px; border-radius: inherit; }
.field-group input:focus-visible { outline: none; }

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

@media (max-width: 780px) {
  .splat-background.is-ready { opacity: .65; }
  .splat-background::after { background: rgba(7, 8, 9, .45); }
  .beta-entry { grid-template-columns: 1fr; min-height: auto; padding: 75px 0 100px; gap: 48px; }
  .beta-entry-copy h1 { font-size: clamp(3.4rem, 15vw, 5.2rem); }
  .access-card { width: 100%; }
  .onboarding-shell, .account-shell { padding-top: 65px; }
  .onboarding-steps, .account-card { grid-template-columns: 1fr; }
  .onboarding-steps li, .account-card > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .onboarding-steps li:last-child, .account-card > div:last-child { border-bottom: 0; }
  .download-card, .account-heading { align-items: stretch; flex-direction: column; }
  .download-card .button { width: 100%; }
  .download-card { padding: 22px; }
  .invoices { margin-top: 38px; }
  .invoice-table th, .invoice-table td { padding-inline: 18px; }
  .page-shell { padding-top: 65px; }
  .pricing-grid, .pipeline-steps { grid-template-columns: 1fr; }
  .pipeline-steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .pipeline-steps li:last-child { border-bottom: 0; }
  .spec-card { grid-template-columns: 1fr; }
  .spec-card > div { grid-template-columns: 1fr; gap: 6px; border-right: 0; }
  .spec-card > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .spec-card > div:last-child { border-bottom: 0; }
  .about-columns { grid-template-columns: 1fr; gap: 64px; margin-top: 64px; }
  .prose-columns { grid-template-columns: 1fr; gap: 18px; }
  .cta-card { flex-direction: column; align-items: stretch; text-align: left; margin-top: 48px; }
  .cta-card .button { width: 100%; justify-content: space-between; }
  .about-section { margin-top: 64px; }
}

@media (max-width: 560px) {
  footer, .beta-entry, .onboarding-shell, .account-shell, .messages, .page-shell { width: min(100% - 28px, var(--max)); }
  .site-header { min-height: 66px; padding-inline: 14px; }
  .brand span { display: none; }
  .brand img { width: 30px; height: 30px; }
  .nav-link { padding: 9px 12px; font-size: .66rem; }
  .site-nav { gap: 10px; }
  .primary-nav { gap: 0; }
  .nav-text-link { padding: 9px 8px; font-size: .66rem; }
  .nav-text-link.active::after { left: 8px; right: 8px; }
  .page-shell { padding-top: 55px; }
  .page-intro h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .tier-card { padding: 26px 24px; }
  .gallery-card-body { padding: 20px 22px 22px; }
  .gallery-empty { padding: 44px 26px; }
  .cta-card { padding: 28px 24px; }
  .pipeline-steps li { padding: 20px 22px; }
  .beta-entry { padding-top: 58px; }
  .beta-entry-copy h1 { font-size: clamp(2.9rem, 14vw, 3.9rem); }
  .beta-entry-copy h1::after { margin-top: 26px; }
  .access-card, .onboarding-actions { padding: 24px; }
  .onboarding-steps li { padding: 18px 22px; }
  /* Below this width the five columns cannot fit; keep the hairline grid and
     let .invoice-scroll pan rather than crushing the mono figures. */
  .invoice-table { min-width: 500px; }
  .invoice-table th, .invoice-table td { padding-inline: 15px; }
  .invoice-table td { padding-block: 14px; font-size: .78rem; }
  .invoice-status { font-size: .66rem; letter-spacing: .07em; }
  footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .site-header { background: rgba(7, 8, 9, .92); border-bottom-color: var(--line); animation: none !important; }
}