/* fresh.dev public site, in the October 2026 design language: a white page,
   very large tight headings that end in a green cursor, mono kickers, product
   captures framed as windows, one green band, and a closing
   band in ink (green on the dark theme). Tokens come from brand.css. */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchored sections and cards land below the sticky header. */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.landing-body {
  background: var(--brand-canvas);
  color: var(--brand-text);
  font-family: var(--brand-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  min-width: 20rem;
  text-rendering: optimizeLegibility;
}

.landing-body a {
  color: inherit;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body p {
  margin: 0;
}

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

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

.mono {
  font-family: var(--brand-font-mono);
}

.landing-skip-link {
  background: var(--brand-action);
  border-radius: 0.5rem;
  color: var(--brand-action-text) !important;
  left: 1rem;
  padding: 0.6rem 1rem;
  position: absolute;
  top: -4rem;
  z-index: 100;
}

.landing-skip-link:focus {
  top: 1rem;
}

.landing-container {
  margin: 0 auto;
  max-width: 82rem;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  width: 100%;
}

.cursor {
  color: var(--brand-accent);
}

.hero-muted {
  color: var(--brand-text-faint);
}

.landing-kicker {
  color: var(--brand-text-secondary);
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

/* Buttons ---------------------------------------------------------------- */

.landing-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}

.landing-button-primary {
  background: var(--brand-action);
  color: var(--brand-action-text) !important;
}

.landing-button-primary:hover {
  background: var(--brand-action-hover);
}

.landing-button-secondary {
  background: var(--brand-surface);
  border-color: var(--brand-border);
  color: var(--brand-text) !important;
}

.landing-button-secondary:hover {
  background: var(--brand-surface-hover);
}

.landing-button-inverse {
  background: #faf9f6;
  color: #1a1a18 !important;
}

.landing-button-inverse:hover {
  background: #e9e7e0;
}

.landing-button-small {
  border-radius: 0.5rem;
  font-size: 0.875rem;
  min-height: 2.4rem;
  padding: 0.5rem 1rem;
}

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

.landing-header {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--brand-canvas) 90%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  align-items: center;
  display: flex;
  gap: 2rem;
  min-height: 4.75rem;
}

.landing-brand {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.landing-brand .brand-wordmark {
  font-size: 1.1875rem;
}

.landing-nav {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

.landing-nav a {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.landing-nav a:hover {
  color: var(--brand-text);
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.header-sign-in {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.header-sign-in:hover {
  color: var(--brand-text);
}

.landing-theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  color: var(--brand-text-secondary);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

/* Only where hovering exists: a tap on iOS would otherwise leave the highlight stuck. */
@media (hover: hover) {
  .landing-theme-toggle:hover {
    background: var(--brand-surface-hover);
    color: var(--brand-text);
  }
}

/* The header is dark on both themes: brand.css gives it the dark tokens. */
.landing-header {
  --home-line: #2a2a26;
  /* Nearly opaque, so the light page beneath does not wash it grey. */
  background: rgb(20 20 18 / 0.96);
  color: var(--brand-text);
  color-scheme: dark;
}

.landing-header .landing-button-primary {
  background: var(--brand-accent);
  color: #1a1a18 !important;
}

.landing-header .landing-button-primary:hover {
  background: var(--brand-accent-strong);
}

/* Signed in: the account menu takes the place of Sign in and Create account. */
.landing-menu-actions .landing-menu-wide {
  grid-column: 1 / -1;
}

/* Menu: replaces the nav links (and, on phones, Sign in) on narrow screens. */

.landing-menu {
  display: none;
}

.landing-menu-toggle {
  align-items: center;
  border-radius: 0.5rem;
  color: var(--brand-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.5rem;
  justify-content: center;
  list-style: none;
  width: 2.5rem;
}

.landing-menu-toggle::-webkit-details-marker {
  display: none;
}

.landing-menu-toggle:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.landing-menu-close,
.landing-menu[open] .landing-menu-open {
  display: none;
}

.landing-menu[open] .landing-menu-close {
  display: inline-flex;
}

.landing-menu-panel {
  background: var(--brand-canvas);
  border-bottom: 1px solid var(--brand-border-soft);
  box-shadow: 0 16px 32px -24px rgb(0 0 0 / 0.35);
  display: grid;
  left: 0;
  padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.landing-menu-panel > a {
  border-bottom: 1px solid var(--brand-border-soft);
  color: var(--brand-text);
  font-size: 1rem;
  padding: 0.875rem 0;
  text-decoration: none;
}

.landing-menu-actions {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 1fr 1fr;
  padding-top: 1.25rem;
}

.landing-menu-actions .landing-button {
  justify-content: center;
}

@media (max-width: 1080px) {
  .landing-menu {
    display: block;
  }
}

@media (max-width: 560px) {
  .header-inner {
    gap: 0.75rem;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .landing-menu-toggle {
    margin-right: -0.5rem;
  }
}

/* Too narrow for both: Create account stays in the menu and the hero; signed in, the avatar
   menu alone remains. */
@media (max-width: 374px) {
  .header-actions > [data-signup-link],
  .header-actions > .landing-button-small:has(+ .account-menu) {
    display: none;
  }
}

/* Sections ------------------------------------------------------------- */

.landing-section {
  border-bottom: 1px solid var(--brand-border-soft);
  padding-block: clamp(4rem, 8vw, 5.5rem);
}

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

.section-head h2,
.landing-heading {
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.section-head .landing-kicker {
  flex: none;
}

/* The homepage alternates canvas, a darker stage behind each product capture, and one green
   band, rather than running one flat colour down the page. Its hairlines sit between the
   divider and border-soft. */
.landing-body {
  --home-line: #ebe9e2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-body {
    --home-line: var(--brand-divider);
  }
}

:root[data-theme="dark"] .landing-body {
  --home-line: var(--brand-divider);
}

/* Buttons the homepage adds: green for the one action per screen, and an outline. In dark mode
   primary actions are green too. */
.landing-button-accent {
  background: var(--brand-accent-strong);
  color: var(--brand-canvas) !important;
}

.landing-button-accent:hover {
  background: var(--brand-accent);
}

.landing-button-ghost {
  background: transparent;
  border-color: var(--brand-border);
  color: var(--brand-text) !important;
}

.landing-button-ghost:hover {
  border-color: var(--brand-text-faint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-body .landing-button-primary,
  :root:not([data-theme="light"]) .landing-body .landing-button-accent {
    background: var(--brand-accent);
    color: #1a1a18 !important;
  }

  :root:not([data-theme="light"]) .landing-body .landing-button-primary:hover,
  :root:not([data-theme="light"]) .landing-body .landing-button-accent:hover {
    background: var(--brand-accent-strong);
  }
}

:root[data-theme="dark"] .landing-body .landing-button-primary,
:root[data-theme="dark"] .landing-body .landing-button-accent {
  background: var(--brand-accent);
  color: #1a1a18 !important;
}

:root[data-theme="dark"] .landing-body .landing-button-primary:hover,
:root[data-theme="dark"] .landing-body .landing-button-accent:hover {
  background: var(--brand-accent-strong);
}

.landing-header {
  border-bottom: 1px solid var(--home-line);
}

.landing-nav a {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.nav-status-dot {
  background: var(--brand-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand-accent);
  display: inline-block;
  flex: none;
  height: 0.45rem;
  width: 0.45rem;
}

.landing-menu-panel .nav-status-dot {
  margin-right: 0.5rem;
  vertical-align: 0.1em;
}

/* Product captures: a window frame on a stage ------------------------------ */

.product-capture {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 30px 80px rgb(26 26 24 / 0.16);
  margin: 0;
  overflow: hidden;
}

.capture-bar {
  align-items: center;
  background: var(--brand-canvas-strong);
  border-bottom: 1px solid var(--brand-border-soft);
  display: flex;
  gap: 0.6rem;
  height: 2.5rem;
  padding: 0 0.9rem;
}

.capture-dots {
  display: inline-flex;
  gap: 0.6rem;
}

.capture-dots > span {
  background: var(--brand-border);
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.capture-url {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 6px;
  color: var(--brand-text-faint);
  display: inline-flex;
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  gap: 0.4rem;
  height: 1.5rem;
  margin-left: 0.5rem;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.6rem;
  white-space: nowrap;
}

.capture-url .icon {
  font-size: 0.625rem;
}

.capture-live {
  margin-left: auto;
}

.capture-live,
.live-label {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  gap: 0.4rem;
  white-space: nowrap;
}

.capture-live::before {
  background: var(--brand-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand-accent);
  content: "";
  height: 6px;
  width: 6px;
}

.product-capture img {
  display: block;
  height: auto;
  width: 100%;
}

.capture-dark {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .capture-light {
    display: none !important;
  }

  :root:not([data-theme="light"]) .capture-dark {
    display: block !important;
  }

  :root:not([data-theme="light"]) .product-capture {
    box-shadow:
      0 1px 0 rgb(255 255 255 / 0.06) inset,
      0 30px 80px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] .capture-light {
  display: none !important;
}

:root[data-theme="dark"] .capture-dark {
  display: block !important;
}

:root[data-theme="dark"] .product-capture {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 30px 80px rgb(0 0 0 / 0.6);
}

.hero,
.product {
  /* The page colour (white) in light mode; the dark theme keeps its deepest grey. */
  background-color: var(--brand-canvas);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero,
  :root:not([data-theme="light"]) .product {
    background-color: var(--brand-canvas-strong);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .product {
  background-color: var(--brand-canvas-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

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

.hero {
  border-bottom: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: clamp(3.5rem, 7vw, 5rem);
  position: relative;
}

/* A green rule under the hero. */
.hero::after {
  background: var(--brand-accent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.6;
  position: absolute;
  right: 0;
}

/* The title column is as wide as its heading (at most 60%), so the description sits a set gap
   away from it rather than across a wide empty middle. */
.hero-grid {
  align-items: start;
  column-gap: clamp(3rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: fit-content(60%) minmax(0, 1fr);
  row-gap: 2rem;
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.status-dot {
  background: var(--brand-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--brand-accent);
  display: inline-block;
  flex: none;
  height: 0.5rem;
  width: 0.5rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
}

.hero-description {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 0.6rem;
}

.hero-summary {
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
}

.hero-lede {
  color: var(--brand-text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* On phones the two only just fit side by side, so they wrapped or not depending on which font
   had loaded, and moved everything below when the web font arrived. Stacked, they never move. */
@media (max-width: 480px) {
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.hero-stage {
  margin-top: 3rem;
}

.hero-capture {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Facts strip ------------------------------------------------------------ */

.facts {
  border-bottom: 1px solid var(--home-line);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-block: 0;
}

.facts-grid > div {
  padding: 1.75rem 1.5rem;
}

.facts-grid > div:first-child {
  padding-left: 0;
}

.facts-grid > div:last-child {
  padding-right: 0;
}

.facts-grid > div + div {
  border-left: 1px solid var(--home-line);
}

.facts-grid dt {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.facts-grid small,
.facts-grid dd {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  font-weight: 400;
}

.facts-grid dd {
  margin: 0.4rem 0 0;
}

.facts-grid dd a {
  text-decoration: none;
}

/* Four things -------------------------------------------------------------- */

.host {
  border-bottom: 0;
}

.host-grid {
  border-top: 1px solid var(--home-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 3.5rem;
}

.host-item {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem 1.75rem;
}

.host-item:first-child {
  padding-left: 0;
}

.host-item:last-child {
  padding-right: 0;
}

.host-item + .host-item {
  border-left: 1px solid var(--home-line);
}

.host-index {
  align-items: center;
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  gap: 0.5rem;
}

.availability {
  color: var(--brand-warning-text);
}

.availability-live {
  color: var(--brand-accent-strong);
}

.host-item h3 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.host-item-soon h3 {
  color: var(--brand-text-secondary);
}

.host-item > p:not(.host-index, .host-note) {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.host-note {
  color: var(--brand-accent-strong);
  font-size: 0.8125rem;
  margin-top: auto !important;
  padding-top: 0.75rem;
}

.host-note-soon {
  color: var(--brand-text-faint);
}

/* App wall: the catalogue by name, with each app's own mark ------------------ */

.app-wall {
  border-bottom: 0;
  padding-top: 0;
}

.app-wall-list {
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 0 1.5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1rem 0 0;
}

.app-wall-list li {
  min-width: 0;
}

/* Each app links to its guide. */
.app-wall-card,
.app-wall-more {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.875rem 0;
  text-decoration: none;
}

/* Hovering (or focusing) a tile lifts it onto a snug panel, tilts its icon and shows "Find out
   more", so it reads as the link to that app's page. The panel hugs the tile (6px), and rows are
   spaced by the grid rather than by padding, so the lift stays tight. */
.app-wall-list {
  gap: 1.375rem 1.125rem;
  padding-top: 1.625rem;
}

.app-wall-card {
  border-radius: 10px;
  margin: -6px;
  padding: 6px;
  transition:
    background 300ms ease,
    box-shadow 350ms ease,
    transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.app-wall-more {
  padding: 0;
}

.app-wall-card .app-wall-logo {
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.app-wall-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-wall-sub {
  color: var(--brand-accent-strong);
  display: none;
  font-size: 0.65625rem;
  font-weight: 500;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-wall-card:focus-visible {
  background: var(--app-panel);
  box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.35);
}

.app-wall-card:focus-visible .app-wall-sub {
  display: block;
}

@media (hover: hover) {
  .app-wall-card:hover {
    background: var(--app-panel);
    box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.35);
    transform: translateY(-2px);
  }

  .app-wall-card:hover .app-wall-logo {
    transform: rotate(-6deg) scale(1.06);
  }

  .app-wall-card:hover .app-wall-sub {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-wall-card,
  .app-wall-card .app-wall-logo {
    transition: none;
  }

  .app-wall-card:hover,
  .app-wall-card:hover .app-wall-logo {
    transform: none;
  }
}

.app-wall-more {
  color: var(--brand-accent-strong) !important;
  font-size: 0.875rem;
  font-weight: 600;
  height: 100%;
}

.app-wall-logo {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 9px;
  color: var(--brand-accent-strong);
  display: inline-flex;
  flex: none;
  font-size: 1.1rem;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.app-wall-logo img {
  border-radius: 0.25rem;
  height: 1.75rem;
  object-fit: contain;
  width: 1.75rem;
}

.app-wall-name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Many app marks are black; on the dark theme they sit on a light tile so they stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-tint-anythingllm .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-ghost .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-hermes-agent .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-matrix-synapse .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-metabase .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-miniflux .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-umami .app-wall-logo img,
  :root:not([data-theme="light"]) .app-tint-vaultwarden .app-wall-logo img {
    background: var(--brand-ink);
    box-sizing: border-box;
    padding: 0.15rem;
  }
}

:root[data-theme="dark"] .app-tint-anythingllm .app-wall-logo img,
:root[data-theme="dark"] .app-tint-ghost .app-wall-logo img,
:root[data-theme="dark"] .app-tint-hermes-agent .app-wall-logo img,
:root[data-theme="dark"] .app-tint-matrix-synapse .app-wall-logo img,
:root[data-theme="dark"] .app-tint-metabase .app-wall-logo img,
:root[data-theme="dark"] .app-tint-miniflux .app-wall-logo img,
:root[data-theme="dark"] .app-tint-umami .app-wall-logo img,
:root[data-theme="dark"] .app-tint-vaultwarden .app-wall-logo img {
  background: var(--brand-ink);
  box-sizing: border-box;
  padding: 0.15rem;
}

.app-wall-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  margin-top: 2rem;
}

.app-wall-foot p {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 39rem;
  text-wrap: pretty;
}

.app-wall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Own servers: the one green band ------------------------------------------- */

/* Every machine: a datasheet --------------------------------------------------- */

.capabilities {
  border-bottom: 0;
}

.capabilities-inner {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.capabilities-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.capabilities-intro h2 {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
}

.capabilities-intro p {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.datasheet {
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 0 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.datasheet > div {
  border-bottom: 1px solid var(--home-line);
  display: grid;
  font-size: 0.875rem;
  gap: 1rem;
  grid-template-columns: 8.75rem minmax(0, 1fr);
  padding: 1rem 0;
}

.datasheet-wide {
  grid-column: 1 / -1;
}

.datasheet dt {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  padding-top: 0.2rem;
  text-transform: uppercase;
}

.datasheet dd {
  margin: 0;
}

/* Built-in image importers, each with its project's mark. */
.image-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.image-chips li {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 999px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem 0.25rem 0.4rem;
}

.image-chips .os-logo,
.image-chips .icon {
  border-radius: 0.15rem;
  flex: none;
  height: 1rem;
  object-fit: contain;
  width: 1rem;
}

.image-chips .icon {
  color: var(--brand-text-faint);
  font-size: 0.875rem;
}

/* Inside the console: a tour on the second stage --------------------------- */

.product {
  border-top: 1px solid var(--home-line);
}

/* One capture at a time: the list on the left picks which page the stage shows. Radios and
   :has() do the switching, so it works without JavaScript; browsers without :has() see every
   capture stacked. */
.tour {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 21.25rem minmax(0, 1fr);
  margin-top: 3.5rem;
}

.tour-list {
  border: 0;
  border-top: 1px solid var(--home-line);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.tour-item {
  border-bottom: 1px solid var(--home-line);
  cursor: pointer;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 1.125rem 0;
}

.tour-item:has(.tour-radio:focus-visible) {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.tour-radio {
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.tour-number {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  padding-top: 0.2rem;
}

.tour-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tour-text .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.tour-title {
  color: var(--brand-text-faint);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}

.tour-copy {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.25rem;
  text-wrap: pretty;
}

.tour-item:hover .tour-title {
  color: var(--brand-text-secondary);
}

.tour-item:has(.tour-radio:checked) .tour-number,
.tour-item:has(.tour-radio:checked) .landing-kicker {
  color: var(--brand-accent-strong);
}

.tour-item:has(.tour-radio:checked) .tour-title {
  color: var(--brand-text);
}

.tour-stage {
  min-width: 0;
  position: sticky;
  top: 6rem;
}

@supports selector(:has(input)) {
  .tour-item:not(:has(.tour-radio:checked)) .tour-copy {
    display: none;
  }

  .tour-panel {
    display: none;
  }

  .tour:has(#tour-dashboard:checked) [data-tour="dashboard"],
  .tour:has(#tour-sql:checked) [data-tour="sql"],
  .tour:has(#tour-extensions:checked) [data-tour="extensions"],
  .tour:has(#tour-usage:checked) [data-tour="usage"],
  .tour:has(#tour-activity:checked) [data-tour="activity"] {
    display: block;
  }
}

.tour-panel + .tour-panel {
  margin-top: 1rem;
}

.tour-caption {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin-top: 0.75rem !important;
}

/* Pricing -------------------------------------------------------------- */

.pricing {
  border-bottom: 0;
}

.pricing-lede {
  color: var(--brand-text-muted);
  line-height: 1.55;
  margin-top: 1.75rem !important;
  max-width: 40rem;
}

.pricing-plans {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.5rem;
}

.pricing-plan {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.75rem;
}

.pricing-plan-featured {
  border-color: var(--brand-accent);
}

.pricing-plan h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.pricing-plans-apps .pricing-plan {
  padding: 1.5rem;
}

.pricing-plans-apps .pricing-plan h3 {
  font-size: 1rem;
}

.plan-spec {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  margin-top: 0.375rem !important;
}

.plan-price {
  align-items: baseline;
  display: flex;
  gap: 0.3rem;
}

.plan-price > span:first-child {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.pricing-plans-apps .plan-price > span:first-child {
  font-size: 2.25rem;
}

.plan-interval {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
}

.plan-offer {
  color: var(--brand-accent-strong);
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  margin-top: 0.25rem !important;
}

.plan-resources {
  margin: 0;
}

.plan-resources > div {
  border-top: 1px solid var(--home-line);
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
  padding: 0.625rem 0;
}

.plan-resources dt {
  color: var(--brand-text-muted);
}

.plan-resources dd {
  font-weight: 600;
  margin: 0;
}

.pricing-plan .landing-button {
  margin-top: auto;
}

.pricing-plans-apps .landing-button {
  min-height: 2.5rem;
}

.pricing-inclusions-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  justify-content: space-between;
  margin-top: 1.25rem;
}

.pricing-inclusions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-inclusions li {
  align-items: center;
  background: var(--brand-surface-muted);
  border-radius: 999px;
  color: var(--brand-text-secondary);
  display: inline-flex;
  font-size: 0.8125rem;
  min-height: 1.875rem;
  padding: 0.3rem 0.75rem;
}

.pricing-tax-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.pricing-apps {
  margin-top: 4rem;
}

.pricing-apps .pricing-plans {
  margin-top: 0;
}

.pricing-plan-included {
  background: var(--band-accent);
  border-color: var(--band-accent-line);
}

.included-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.included-list li {
  color: var(--brand-text-secondary);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.included-list li::before {
  color: var(--brand-accent-strong);
  content: "✓";
}

.pricing-terms {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-top: 1.25rem !important;
  max-width: 56rem;
}

/* Credit ---------------------------------------------------------------- */

.credit {
  border-bottom: 0;
  padding-top: 0;
}

.credit-inner {
  align-items: center;
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: clamp(4rem, 8vw, 6rem);
}

.credit-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.credit-copy > p:not(.landing-kicker) {
  color: var(--brand-text-muted);
  line-height: 1.55;
  max-width: 28.75rem;
}

/* The credit section is a dark band in both themes, to break the page up. Its components
   read their colours from tokens, so the dark theme's values are restated here. */
.credit {
  --brand-text: #f0eee6;
  --brand-text-secondary: #c9c7bf;
  --brand-text-muted: #a8a69d;
  --brand-text-faint: #8a8880;
  --brand-border: #46453f;
  --brand-border-soft: #33322e;
  --brand-divider: #2a2a26;
  --home-line: #2e2e2a;
  --brand-surface: #242421;
  --brand-accent: #4ebe7d;
  --brand-accent-strong: #73ce95;
  --brand-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
  background: #1a1a18;
  color: var(--brand-text);
  color-scheme: dark;
}

.credit .credit-inner {
  border-top: 0;
}

/* The invoice's footer strip sits a shade darker than the card, in either theme. */
.credit .invoice-foot {
  background: rgb(0 0 0 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .credit {
    --brand-surface: #1c1c1a;
    background: var(--brand-canvas-strong);
    border-block: 1px solid var(--brand-divider);
  }
}

:root[data-theme="dark"] .credit {
  --brand-surface: #1c1c1a;
  background: var(--brand-canvas-strong);
  border-block: 1px solid var(--brand-divider);
}

/* Credit is money in the customer's favour, so it is the brand green. */
.credit-amount,
.invoice-credit,
.invoice-credit .mono:last-child {
  color: var(--brand-accent-strong);
}

.credit-steps {
  list-style: none;
  margin: 0.5rem 0 0;
  max-width: 28.75rem;
  padding: 0;
}

.credit-steps li {
  align-items: baseline;
  border-top: 1px solid var(--home-line);
  display: flex;
  gap: 1rem;
  padding: 0.875rem 0;
}

.credit-steps li:last-child {
  border-bottom: 1px solid var(--home-line);
}

.credit-step-number {
  color: var(--brand-text-faint);
  flex: none;
  font-size: 0.75rem;
  width: 1.5rem;
}

.credit-steps p {
  color: var(--brand-text-faint);
  font-size: 0.9375rem;
}

.credit-steps b {
  color: var(--brand-text);
}

.credit-invoice {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: var(--brand-shadow);
  justify-self: end;
  max-width: 27.5rem;
  overflow: hidden;
  width: 100%;
}

.invoice-head,
.invoice-foot {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.375rem;
}

.invoice-head {
  border-bottom: 1px solid var(--home-line);
  font-size: 0.9375rem;
}

.invoice-head .mono {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.invoice-lines {
  padding: 0.5rem 1.375rem;
}

.invoice-lines p {
  align-items: baseline;
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.invoice-lines p + p {
  border-top: 1px solid var(--home-line);
}

.invoice-lines p > span:first-child .mono {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  margin-left: 0.375rem;
}

.invoice-note {
  color: var(--brand-text-faint);
  font-size: 0.8125rem !important;
}

.invoice-total > span:first-child {
  font-size: 0.9375rem;
  font-weight: 600;
}

.invoice-total .mono {
  color: var(--brand-accent-strong);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.invoice-foot {
  background: var(--brand-canvas-strong);
  border-top: 1px solid var(--home-line);
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  padding-block: 0.75rem;
}

.invoice-foot > span {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.invoice-foot b {
  color: var(--brand-text-secondary);
}

/* Commitments and FAQ ---------------------------------------------------- */

.faq {
  border-bottom: 0;
}

.faq-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.commitments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commitments h2 {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
}

.commitment-list {
  border-top: 1px solid var(--home-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2rem 0 0;
}

.commitment-list > div {
  padding: 1.5rem 1.5rem 1.5rem 0;
}

.commitment-list > div + div {
  border-left: 1px solid var(--home-line);
  padding: 1.5rem 0 1.5rem 1.5rem;
}

.commitment-list dt {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.commitment-list dt span {
  color: var(--brand-accent-strong);
  font-size: 1.25rem;
}

.commitment-list dd {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
}

.commitment-list dd b {
  color: var(--brand-text);
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.commitment-soon {
  border-top: 1px solid var(--home-line);
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding-top: 1rem;
}

.commitment-soon .mono {
  color: var(--brand-warning-text);
  display: block;
  font-size: 0.6875rem;
  margin-bottom: 0.25rem;
}

.commitment-link {
  align-items: center;
  color: var(--brand-accent-strong) !important;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.4rem;
  margin-top: 0.5rem;
  text-decoration: none;
}

.faq-list h2 {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem !important;
}

.faq-list details {
  border-bottom: 1px solid var(--home-line);
}

.faq-list details:first-of-type {
  border-top: 1px solid var(--home-line);
}

.faq-list summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.0625rem;
  font-weight: 600;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1.25rem 0;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary .icon {
  color: var(--brand-text-faint);
}

/* The plus turns into a cross when open. */
.faq-list details[open] > summary > .disclosure-icon {
  transform: rotate(45deg);
}

.faq-list details p {
  color: var(--brand-text-secondary);
  line-height: 1.6;
  max-width: 44rem;
  padding-bottom: 1.25rem;
}

/* Closing band: ink on the light page, solid green on the dark one ------------- */

.final-signup {
  background: #1a1a18;
  color: #faf9f6;
  padding-block: clamp(4.5rem, 9vw, 6rem);
}

.final-signup-inner {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.final-signup .landing-kicker {
  color: #73ce95;
}

.final-signup h2 {
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 1rem !important;
}

.final-signup .cursor {
  color: #4ebe7d;
}

.final-signup-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.final-signup-row > p {
  color: #c9c7bf;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.final-signup-row > p a {
  color: inherit;
}

.final-signup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.landing-button-inverse {
  background: #4ebe7d;
  color: #1a1a18 !important;
}

.landing-button-inverse:hover {
  background: #73ce95;
}

.final-signup-email {
  border-color: #46453f;
  color: #faf9f6 !important;
  font-size: 0.875rem;
  font-weight: 500;
}

.final-signup-email:hover {
  border-color: #8a8880;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .final-signup { background: #4ebe7d; color: #1a1a18; }
  :root:not([data-theme="light"]) .final-signup .landing-kicker,
  :root:not([data-theme="light"]) .final-signup-row > p { color: #173523; }
  :root:not([data-theme="light"]) .final-signup .cursor { color: #0f3d22; }
  :root:not([data-theme="light"]) .final-signup .landing-button-inverse { background: #1a1a18; color: #faf9f6 !important; }
  :root:not([data-theme="light"]) .final-signup .landing-button-inverse:hover { background: #2e2e2b; }
  :root:not([data-theme="light"]) .final-signup-email { border-color: #173523; color: #1a1a18 !important; }
}

:root[data-theme="dark"] .final-signup { background: #4ebe7d; color: #1a1a18; }
:root[data-theme="dark"] .final-signup .landing-kicker,
:root[data-theme="dark"] .final-signup-row > p { color: #173523; }
:root[data-theme="dark"] .final-signup .cursor { color: #0f3d22; }
:root[data-theme="dark"] .final-signup .landing-button-inverse { background: #1a1a18; color: #faf9f6 !important; }
:root[data-theme="dark"] .final-signup .landing-button-inverse:hover { background: #2e2e2b; }
:root[data-theme="dark"] .final-signup-email { border-color: #173523; color: #1a1a18 !important; }

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

.landing-footer {
  background: var(--brand-canvas-strong);
  border-top: 1px solid var(--home-line, var(--brand-border-soft));
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
}

.footer-main {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  padding-block: 4rem 3rem;
}

.footer-brand-block {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-right: 2.5rem;
}

.footer-brand-block .brand-wordmark {
  font-size: 1.25rem;
}

.footer-brand-block > p {
  color: var(--brand-text-faint);
  line-height: 1.5;
}

.footer-status {
  align-items: center;
  background: var(--brand-canvas);
  border: 1px solid var(--home-line, var(--brand-border-soft));
  border-radius: 8px;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.footer-status .status-dot {
  height: 6px;
  width: 6px;
}

.footer-social {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.375rem;
}

.footer-social a {
  align-items: center;
  border: 1px solid var(--home-line, var(--brand-border-soft));
  border-radius: 8px;
  color: var(--brand-text-faint);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.footer-social a:hover {
  color: var(--brand-text);
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-column .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.footer-column a {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  text-decoration: none;
}

.footer-column a:hover,
.footer-status:hover {
  color: var(--brand-text);
}

.footer-soon {
  background: var(--brand-warning-soft);
  border-radius: 999px;
  color: var(--brand-warning-text);
  font-family: var(--brand-font-mono);
  font-size: 0.625rem;
  padding: 0.1rem 0.4rem;
}

.footer-unavailable small {
  color: var(--brand-text-faint);
  margin-left: 0.25rem;
}

.footer-bottom {
  border-top: 1px solid var(--home-line, var(--brand-border-soft));
}

.footer-bottom-inner {
  align-items: center;
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.25rem;
}

.footer-bottom-end {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
}

.footer-bottom-end b {
  color: var(--brand-text-secondary);
}

.footer-bottom a {
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--brand-text);
}

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

@media (max-width: 1080px) {
  .landing-nav {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .hero-grid,
.capabilities-inner,
.final-signup-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  

  

  .facts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts-grid > div {
    border-bottom: 1px solid var(--home-line);
    border-left: 0 !important;
    padding: 1.25rem 1.25rem 1.25rem 0;
  }

  .host-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .host-item {
    border-bottom: 1px solid var(--home-line);
    border-left: 0 !important;
    padding: 1.75rem 1.5rem 1.75rem 0;
  }

  .app-wall-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-brand-block {
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 860px) {
  .tour,
  .faq-grid,
  .credit-inner {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-stage {
    position: static;
  }

  .tour-item {
    padding: 0.875rem 0;
  }

  .pricing-plans,
  .pricing-plans-apps,
  .datasheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .credit-invoice {
    justify-self: start;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  .facts-grid,
.host-grid,
.commitment-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts-grid > div,
  .host-item {
    padding-right: 0;
  }

  .app-wall-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  

  

  .commitment-list > div,
  .commitment-list > div + div {
    border-left: 0;
    padding: 1.25rem 0;
  }

  .commitment-list > div + div {
    border-top: 1px solid var(--home-line);
  }

  .datasheet > div {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .capture-url {
    display: none;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* After the shared inline-flex rule below, so it wins on phones. */
  .header-sign-in {
    display: none !important;
  }
}

/* Icons ------------------------------------------------------------------ */

.header-sign-in,
.footer-top-link {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.header-sign-in .icon,
.footer-top-link .icon {
  font-size: 0.875rem;
}

/* Glitter: small, quiet motion ------------------------------------------ */

/* The hero cursor blinks like a prompt. Other cursors stay still. */
@keyframes cursor-blink {
  0%,
  55% {
    opacity: 1;
  }

  60%,
  100% {
    opacity: 0;
  }
}

.hero h1 .cursor {
  animation: cursor-blink 1.3s step-end infinite;
}

/* While the headline types out (landing.js), untyped letters keep their space so nothing
   moves, and the cursor sits on the next letter without taking room of its own. */
.is-typing .type-char:not(.is-typed) {
  visibility: hidden;
}

.is-typing .cursor {
  animation: none;
  display: inline-block;
  width: 0;
}

/* Cards lift a touch on hover. */
.pricing-plan {
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}

.pricing-plan:hover {
  box-shadow: 0 14px 30px -20px rgb(26 26 24 / 0.4);
  transform: translateY(-2px);
}

/* Nav links underline from the left; button arrows nudge forward. */
.landing-nav a {
  position: relative;
}

.landing-nav a::after {
  background: var(--brand-accent);
  bottom: -0.3rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.landing-nav a:hover::after {
  transform: scaleX(1);
}

.landing-button .icon,
.commitment-link .icon {
  transition: transform 200ms ease;
}

.landing-button:hover .icon,
.commitment-link:hover .icon {
  transform: translateX(2px);
}

/* Scroll reveal (classes are added by landing.js, so nothing hides without it). */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms ease var(--reveal-delay, 0ms),
    transform 600ms ease var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .cursor {
    animation: none;
  }

  .pricing-plan,
  .landing-nav a::after,
  .landing-button .icon,
  .commitment-link .icon,
  .tour-title,
  .reveal {
    transition: none;
  }

  .pricing-plan:hover,
  .landing-button:hover .icon,
  .commitment-link:hover .icon {
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Public pages: status, beta SLA, app guides ------------------------------ */

.public-page {
  border-bottom: 0;
}

.public-narrow {
  max-width: 52rem;
}

.public-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0.75rem 0 0 !important;
}

.section-head .public-title {
  margin-top: 0 !important;
}

.public-lede {
  color: var(--brand-text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 1.25rem !important;
  max-width: 44rem;
}

.public-subtitle {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem !important;
}

.public-muted {
  color: var(--brand-text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem !important;
}

.public-columns {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 3.5rem;
}

.public-prose {
  line-height: 1.65;
  margin-top: 3rem;
}

.public-prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
}

.public-prose p,
.public-prose li {
  color: var(--brand-text-secondary);
}

.public-prose p + p {
  margin-top: 0.75rem;
}

.public-prose ul,
.public-prose ol {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.25rem;
}

.public-prose strong {
  color: var(--brand-text);
}

.public-table {
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  width: 100%;
}

.public-table th,
.public-table td {
  border-bottom: 1px solid var(--brand-border-soft);
  padding: 0.65rem 0.5rem 0.65rem 0;
  text-align: left;
}

.public-table th {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Beta facts: three plain commitments (homepage, SLA, guides). */
.beta-facts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 0;
}

.beta-facts > div {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-large);
  padding: 1.25rem;
}

.beta-facts dt {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.45rem;
}

.beta-facts dt .icon {
  color: var(--brand-accent);
}

.beta-facts dd {
  color: var(--brand-text-secondary);
  line-height: 1.55;
  margin: 0.4rem 0 0;
}

.beta-link {
  margin-top: 1.5rem !important;
}

.beta-link a {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.4rem;
  text-decoration: none;
}

/* Status page. */
.status-banner {
  align-items: center;
  border-radius: var(--brand-radius-large);
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  gap: 0.75rem;
  padding: 1.1rem 1.35rem;
}

.status-banner-ok {
  background: var(--brand-success-soft);
  color: var(--brand-success);
}

.status-banner-down {
  background: var(--brand-warning-soft);
  color: var(--brand-warning);
}

.status-banner-dot {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  height: 0.6rem;
  width: 0.6rem;
}

.status-notice {
  border: 1px solid var(--brand-border);
  border-left-width: 4px;
  border-radius: var(--brand-radius);
  margin-top: 1rem;
  padding: 1rem 1.25rem;
}

.status-notice-incident {
  border-left-color: var(--brand-danger);
}

.status-notice-maintenance {
  border-left-color: var(--brand-info);
}

.status-notice h2 {
  font-size: 1.125rem;
  margin-top: 0.35rem !important;
}

.status-notice p:not(.landing-kicker) {
  color: var(--brand-text-secondary);
  margin-top: 0.4rem !important;
  white-space: pre-line;
}

.status-components {
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-large);
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.status-component {
  padding: 1.25rem 1.35rem;
}

.status-component + .status-component {
  border-top: 1px solid var(--brand-border-soft);
}

.status-component-head {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.status-component-head h2 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.status-state {
  align-items: center;
  display: inline-flex;
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.45rem;
}

.status-state-ok { color: var(--brand-success); }
.status-state-down { color: var(--brand-danger); }
.status-state-stale { color: var(--brand-warning); }

.status-component-description {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  margin-top: 0.25rem !important;
}

.status-days {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(90, minmax(0, 1fr));
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.status-days[data-days="30"] {
  gap: 3px;
  grid-template-columns: repeat(30, minmax(0, 1fr));
}

.status-day {
  border-radius: 2px;
  height: 2rem;
}

.status-day-ok { background: var(--brand-success); }
.status-day-partial { background: var(--brand-warning); }
.status-day-down { background: var(--brand-danger); }
.status-day-none { background: var(--brand-border-soft); }

.status-days-legend {
  color: var(--brand-text-muted);
  display: flex;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  justify-content: space-between;
  margin-top: 0.4rem !important;
}

.status-history {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-history h3 {
  font-size: 1rem;
  margin-top: 0.25rem !important;
}

.status-history p:not(.landing-kicker) {
  color: var(--brand-text-secondary);
  margin-top: 0.25rem !important;
}

/* App guides. */
.guide-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.guide-card {
  align-items: flex-start;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-large);
  display: flex;
  gap: 0.9rem;
  height: 100%;
  padding: 1.15rem;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.guide-card:hover {
  border-color: var(--brand-border);
}

.guide-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.guide-card-name {
  font-weight: 600;
}

.guide-card-meta {
  color: var(--brand-text-muted);
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
}

.guide-card-summary {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}

.guide-title {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.guide-title .public-title {
  margin-top: 0 !important;
}

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

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

  .status-days {
    gap: 1px;
  }

  .status-day {
    height: 1.5rem;
  }
}

@media (max-width: 560px) {
  /* 90 bars don't fit a phone; show the last 30 days. */
  .status-days {
    grid-template-columns: repeat(30, minmax(0, 1fr));
  }

  .status-day:nth-child(-n + 60) {
    display: none;
  }

  .status-days-legend span:first-child {
    visibility: hidden;
  }
}

.guide-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.6rem !important;
  list-style: none;
  padding-left: 0 !important;
}

.guide-links a {
  align-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 0.5rem;
  color: var(--brand-text);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
}

.guide-links a:hover {
  background: var(--brand-surface-hover);
}

.guide-licence {
  font-size: 0.9rem;
  margin-top: 0.75rem !important;
}

.guide-related {
  margin-top: 3.5rem;
}

.guide-related .guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

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

/* Each category has its own accent: the hero wash, the illustration, chips and step numbers. */
.guide,
.guide-group {
  --guide-accent: var(--brand-accent);
  --guide-soft: var(--brand-accent-soft);
}

[data-category="ai"] { --guide-accent: #7556d1; --guide-soft: #ece6fb; }
[data-category="analytics"] { --guide-accent: #c27a1c; --guide-soft: #fdeccd; }
[data-category="developer"] { --guide-accent: #2c6ccc; --guide-soft: #e0ebfb; }
[data-category="monitoring"] { --guide-accent: #c9473a; --guide-soft: #fde4df; }
[data-category="productivity"] { --guide-accent: #1b8580; --guide-soft: #d6f2ef; }
[data-category="community"] { --guide-accent: #bb3f78; --guide-soft: #fbe2ed; }
[data-category="media"] { --guide-accent: #b0601c; --guide-soft: #fae6d3; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide,
  :root:not([data-theme="light"]) .guide-group { --guide-soft: #18301f; }
  :root:not([data-theme="light"]) [data-category="ai"] { --guide-accent: #a993f0; --guide-soft: #27213a; }
  :root:not([data-theme="light"]) [data-category="analytics"] { --guide-accent: #e8b86d; --guide-soft: #33291a; }
  :root:not([data-theme="light"]) [data-category="developer"] { --guide-accent: #82abef; --guide-soft: #1b2738; }
  :root:not([data-theme="light"]) [data-category="monitoring"] { --guide-accent: #f08c7b; --guide-soft: #36201c; }
  :root:not([data-theme="light"]) [data-category="productivity"] { --guide-accent: #6dcdc5; --guide-soft: #162f2d; }
  :root:not([data-theme="light"]) [data-category="community"] { --guide-accent: #ea8cb7; --guide-soft: #351d29; }
  :root:not([data-theme="light"]) [data-category="media"] { --guide-accent: #e3a168; --guide-soft: #33241a; }
}

:root[data-theme="dark"] .guide,
:root[data-theme="dark"] .guide-group { --guide-soft: #18301f; }
:root[data-theme="dark"] [data-category="ai"] { --guide-accent: #a993f0; --guide-soft: #27213a; }
:root[data-theme="dark"] [data-category="analytics"] { --guide-accent: #e8b86d; --guide-soft: #33291a; }
:root[data-theme="dark"] [data-category="developer"] { --guide-accent: #82abef; --guide-soft: #1b2738; }
:root[data-theme="dark"] [data-category="monitoring"] { --guide-accent: #f08c7b; --guide-soft: #36201c; }
:root[data-theme="dark"] [data-category="productivity"] { --guide-accent: #6dcdc5; --guide-soft: #162f2d; }
:root[data-theme="dark"] [data-category="community"] { --guide-accent: #ea8cb7; --guide-soft: #351d29; }
:root[data-theme="dark"] [data-category="media"] { --guide-accent: #e3a168; --guide-soft: #33241a; }

/* Guide hero: what the app is, beside its category's drawing. */
.guide-hero {
  align-items: stretch;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  margin-top: 0.5rem;
}

.guide-tagline {
  color: var(--brand-text);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 1.25rem !important;
  max-width: 34ch;
  text-wrap: balance;
}

.guide-hero .public-lede {
  font-size: 1.0625rem;
  margin-top: 0.75rem !important;
}

.guide-hero-art {
  --art-fill: var(--brand-surface);
  --art-soft: color-mix(in srgb, var(--guide-accent) 24%, var(--brand-surface));
  --art-accent: var(--guide-accent);
  align-items: center;
  background: var(--guide-soft);
  border-radius: var(--brand-radius-large);
  color: var(--brand-text);
  display: flex;
  justify-content: center;
  min-height: 12rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.guide-hero-art .art-scene {
  display: block;
  height: auto;
  max-width: 17rem;
  overflow: visible;
  width: 100%;
}

.guide-good-for {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.guide-good-for li {
  background: var(--guide-soft);
  border-radius: 999px;
  color: var(--brand-text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.35rem 0.8rem;
}

/* Main column for the app, sticky aside for what Fresh does. */
.guide-layout {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) 20rem;
  margin-top: 1rem;
}

.guide-main {
  margin-top: 0;
}

.guide-steps {
  counter-reset: guide-step;
  gap: 0.75rem !important;
  list-style: none;
  padding-left: 0 !important;
}

.guide-steps > li {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius);
  counter-increment: guide-step;
  padding: 0.9rem 1rem 0.9rem 3.25rem;
  position: relative;
}

.guide-steps > li::before {
  align-items: center;
  background: var(--guide-soft);
  border-radius: 999px;
  color: var(--brand-text);
  content: counter(guide-step);
  display: flex;
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  height: 1.6rem;
  justify-content: center;
  left: 1rem;
  position: absolute;
  top: 0.85rem;
  width: 1.6rem;
}

.guide-signin {
  align-items: center;
  color: var(--brand-text);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.guide-signin .icon,
.guide-facts dt .icon {
  color: var(--guide-accent);
}

.guide-snippet {
  background: var(--brand-ink);
  border-radius: var(--brand-radius);
  color: var(--brand-ink-text);
  margin: 0.75rem 0;
  position: relative;
}

.guide-snippet pre {
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  margin: 0;
  overflow-x: auto;
  padding: 1rem 5.5rem 1rem 1rem;
  white-space: pre;
}

.guide-copy {
  align-items: center;
  background: var(--brand-ink-raised);
  border: 0;
  border-radius: 0.4rem;
  color: var(--brand-ink-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
}

.guide-copy:hover {
  background: #3d3c38;
}

.guide-copy > * {
  pointer-events: none;
}

.guide-note {
  font-size: 0.9375rem;
}

.guide-notes > li::marker {
  color: var(--guide-accent);
}

.guide-aside {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  position: sticky;
  top: 5.5rem;
}

.guide-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-large);
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.guide-panel-quiet {
  background: transparent;
  gap: 0.5rem;
}

.guide-facts {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.guide-facts dt {
  align-items: center;
  color: var(--brand-text-muted);
  display: flex;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  gap: 0.4rem;
  text-transform: uppercase;
}

.guide-facts dd {
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 0.2rem 0 0;
}

.guide-launch {
  justify-content: center;
}

.guide-panel-note {
  color: var(--brand-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.guide-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.guide-platform {
  color: var(--brand-text-secondary);
  display: grid;
  font-size: 0.875rem;
  gap: 0.4rem;
  line-height: 1.45;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.guide-platform li {
  padding-left: 1.1rem;
  position: relative;
}

.guide-platform li::before {
  background: var(--guide-accent);
  border-radius: 999px;
  content: "";
  height: 0.4rem;
  left: 0.1rem;
  position: absolute;
  top: 0.5rem;
  width: 0.4rem;
}

.guide-platform-caveats li::before {
  background: var(--brand-text-faint);
}

.guide-panel a:not(.landing-button) {
  color: var(--brand-text);
}

.guide-panel-link {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Index: a chip per category, then each category with its drawing. */
.guide-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.guide-chips a {
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  color: var(--brand-text);
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
}

.guide-chips a:hover {
  background: var(--brand-surface-hover);
}

.guide-chips span {
  color: var(--brand-text-muted);
  font-family: var(--brand-font-mono);
}

.guide-group {
  margin-top: 3.5rem;
  scroll-margin-top: 5.5rem;
}

.guide-group .guide-grid {
  margin-top: 1rem;
}

.guide-group-head {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.guide-group-head .public-subtitle {
  margin: 0 !important;
}

.guide-group-art {
  --art-fill: var(--brand-surface);
  --art-soft: color-mix(in srgb, var(--guide-accent) 24%, var(--brand-surface));
  --art-accent: var(--guide-accent);
  background: var(--guide-soft);
  border-radius: var(--brand-radius);
  color: var(--brand-text);
  display: block;
  flex: none;
  padding: 0.5rem 0.65rem;
  width: 5.5rem;
}

.guide-group-art .art-scene {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

@media (max-width: 900px) {
  .guide-hero,
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The offer and launch button come first on small screens; the illustration follows. */
  .guide-hero-art {
    min-height: 0;
    order: 1;
  }

  .guide-hero-art .art-scene {
    max-width: 12rem;
  }

  .guide-aside {
    margin-top: 0;
    position: static;
  }
}

@media (max-width: 560px) {
  /* Long lines scroll on a phone, so the button sits under the snippet instead of over it. */
  .guide-snippet {
    display: flex;
    flex-direction: column;
  }

  .guide-snippet pre {
    padding-right: 1rem;
  }

  .guide-copy {
    align-self: flex-end;
    margin: 0 0.6rem 0.6rem;
    position: static;
  }
}

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

/* Sidebar, article and "On this page", wider than the marketing pages' container. */
.docs-container {
  margin: 0 auto;
  max-width: 80rem;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  width: 100%;
}

.docs-header .header-inner {
  gap: 1.25rem;
  min-height: 4rem;
}

.docs-header-slash {
  color: var(--brand-border);
}

.docs-header-title {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.docs-header .landing-nav {
  gap: 1.25rem;
  margin-left: 0;
}

.docs-search {
  margin-left: auto;
  position: relative;
}

.docs-search-box {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  color: var(--brand-text-faint);
  cursor: text;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  width: 18.75rem;
}

.docs-search-box:focus-within {
  border-color: var(--brand-border);
}

.docs-search-box .icon {
  font-size: 0.875rem;
}

.docs-search-box input {
  background: transparent;
  border: 0;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  min-width: 0;
  outline: 0;
}

.docs-search-box input::-webkit-search-cancel-button {
  display: none;
}

.docs-search-box kbd {
  border: 1px solid var(--brand-border-soft);
  border-radius: 4px;
  font-size: 0.625rem;
  padding: 0.1rem 0.3rem;
  white-space: nowrap;
}

.docs-search-results {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
  display: grid;
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  padding: 0.375rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(30rem, calc(100vw - 2rem));
  z-index: 60;
}

.docs-search-results[hidden] {
  display: none;
}

.docs-search-results a {
  border-radius: 6px;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  text-decoration: none;
}

.docs-search-results a:hover,
.docs-search-results a[aria-selected="true"] {
  background: var(--brand-surface-hover);
}

.docs-search-results strong {
  color: var(--brand-text);
  font-size: 0.875rem;
}

.docs-search-page {
  color: var(--brand-accent-strong);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
}

.docs-search-text {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.docs-search-empty {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  padding: 0.75rem;
}

/* Sidebar | article | on this page. */
.docs-layout {
  align-items: start;
  display: grid;
  gap: 3.5rem;
  grid-template-areas: "sidebar article toc";
  grid-template-columns: 14.5rem minmax(0, 1fr) 12.5rem;
  padding-block: 2.5rem 5rem;
}

.docs-layout-index {
  grid-template-areas: "sidebar article";
  grid-template-columns: 14.5rem minmax(0, 1fr);
}

.docs-sidebar {
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  position: sticky;
  top: 5.5rem;
}

.docs-group {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin: 1.375rem 0 0.5rem !important;
  padding: 0 0.75rem;
}

.docs-group:first-child {
  margin-top: 0 !important;
}

.docs-sidebar > a {
  border-radius: 6px;
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}

.docs-sidebar > a:hover {
  background: var(--brand-surface);
  color: var(--brand-text);
}

/* The current page: full-strength text ending in the logo's green cursor, no bar or pill. */
.docs-sidebar > a[aria-current="page"] {
  background: transparent;
  box-shadow: none;
  color: var(--brand-text);
  font-weight: 600;
}

.docs-sidebar > a[aria-current="page"]::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: 0.05em;
}

.docs-sidebar-help {
  border-top: 1px solid var(--home-line);
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 1.75rem 0.75rem 0 !important;
  padding-top: 1.25rem;
}

.docs-sidebar-help a {
  color: var(--brand-accent-strong);
  font-size: 0.75rem;
}

.docs-article {
  display: flex;
  flex-direction: column;
  grid-area: article;
  max-width: 48rem;
  min-width: 0;
}

.docs-breadcrumb {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.docs-breadcrumb a {
  text-decoration: none;
}

.docs-title {
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-top: 0.875rem !important;
}

.docs-title-large {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  line-height: 1.02;
}

.docs-lede {
  color: var(--brand-text-muted);
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 0.875rem !important;
  max-width: 40rem;
}

.docs-meta {
  align-items: center;
  border-bottom: 1px solid var(--home-line);
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  gap: 0.5rem 1.125rem;
  margin-top: 1.125rem !important;
  padding-bottom: 1.25rem;
}

.docs-edit {
  align-items: center;
  display: inline-flex;
  font-family: var(--brand-font-sans);
  gap: 0.3rem;
  margin-left: auto;
  text-decoration: none;
}

.docs-edit:hover {
  color: var(--brand-text);
}

/* Article body. */
.docs-prose {
  margin-top: 0.5rem;
}

.docs-prose h2 {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 2.75rem 0 0.875rem;
  scroll-margin-top: 5.5rem;
}

.docs-prose h2:first-child {
  margin-top: 1.75rem;
}

.docs-prose p,
.docs-prose li,
.docs-prose td {
  color: var(--brand-text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

.docs-prose p + p {
  margin-top: 1rem;
}

.docs-prose ul,
.docs-prose ol {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
}

.docs-prose strong,
.docs-prose b {
  color: var(--brand-text);
}

.docs-prose a {
  text-decoration: underline;
  text-decoration-color: var(--brand-border);
  text-underline-offset: 3px;
}

.docs-prose a:hover {
  text-decoration-color: var(--brand-accent);
}

.docs-prose .mono {
  background: var(--brand-surface);
  border: 1px solid var(--home-line);
  border-radius: 5px;
  color: var(--brand-text);
  font-size: 0.8125em;
  padding: 0.1em 0.375em;
}

/* Two-column reference tables: the first column names the thing. */
.docs-prose .public-table {
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
}

.docs-prose .public-table th {
  border-bottom: 1px solid var(--home-line);
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0 1.5rem 0.625rem 0;
  text-transform: uppercase;
}

.docs-prose .public-table td {
  border-bottom: 1px solid var(--home-line);
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem 0.75rem 0;
  vertical-align: top;
}

.docs-prose .public-table td:first-child {
  color: var(--brand-text);
  font-weight: 600;
}

/* A command to copy. */
.docs-code {
  align-items: center;
  background: var(--brand-canvas-strong);
  border: 1px solid var(--home-line);
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1rem 0;
  padding: 0.875rem 1rem;
}

.docs-code pre {
  color: var(--brand-text);
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
  min-width: 0;
  overflow-x: auto;
}

.docs-copy {
  align-items: center;
  background: transparent;
  border: 1px solid var(--home-line);
  border-radius: 5px;
  color: var(--brand-text-faint);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: inherit;
  font-size: 0.6875rem;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
}

.docs-copy:hover {
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.docs-copy .icon {
  font-size: 0.75rem;
}

/* A note to read before acting: amber, like everything else that means "not yet" or "careful". */
/* Callouts hold running text (a bold lead-in, then plain text and links), so the content flows
   normally and the icon sits in the left padding. */
.docs-callout {
  background: var(--brand-surface);
  border: 1px solid var(--home-line);
  border-radius: 8px;
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 1.25rem 0;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  position: relative;
}

.docs-callout::before {
  align-items: center;
  border: 2px solid var(--brand-warning-text);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--brand-warning-text);
  content: "!";
  display: flex;
  font-size: 0.6875rem;
  font-weight: 700;
  height: 1.125rem;
  justify-content: center;
  left: 1rem;
  position: absolute;
  top: 1rem;
  width: 1.125rem;
}

/* Screenshots and videos sit straight on the page in their own window frame, as on the
   homepage: no stage behind them. */
.docs-stage,
.docs-figure {
  margin: 1.5rem 0 0;
}

.docs-figure img {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: var(--brand-shadow);
  display: block;
  height: auto;
  width: 100%;
}

.docs-figure {
  margin-bottom: 0.5rem;
}

.docs-figure figcaption,
.docs-prose .docs-caption {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  margin-top: 0.75rem !important;
}

.docs-figure figcaption {
  margin-bottom: -0.25rem;
}

.docs-capture {
  border-radius: 12px;
}

.docs-capture .capture-bar {
  height: 2.25rem;
}

.docs-capture video {
  background: #0f0f0e;
  display: block;
  height: auto;
  width: 100%;
}

/* A walkthrough: the video, then the same steps in text. */
.docs-video {
  margin: 0.5rem 0 0;
}

.docs-steps {
  counter-reset: step;
  display: grid;
  gap: 1rem !important;
  list-style: none;
  margin: 1.75rem 0 0 !important;
  padding: 0 !important;
}

.docs-steps li {
  padding-left: 2.625rem;
  position: relative;
}

.docs-steps li::before {
  align-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  color: var(--brand-text-secondary);
  content: counter(step);
  counter-increment: step;
  display: inline-flex;
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  height: 1.5rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0.125rem;
  width: 1.5rem;
}

/* Previous and next. */
.docs-pager {
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
  padding-top: 1.75rem;
}

.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
}

.docs-pager a > span:last-child {
  font-size: 1rem;
  font-weight: 600;
}

.docs-pager a:hover > span:last-child {
  color: var(--brand-accent-strong);
}

.docs-pager .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.docs-pager-next {
  grid-column: 2;
  text-align: right;
}

/* On this page. */
.docs-toc {
  display: flex;
  flex-direction: column;
  grid-area: toc;
  position: sticky;
  top: 5.5rem;
}

.docs-toc .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem !important;
}

.docs-toc > a {
  border-left: 1px solid var(--home-line);
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  padding: 0.3rem 0 0.3rem 0.875rem;
  text-decoration: none;
}

.docs-toc > a:hover {
  color: var(--brand-text);
}

.docs-toc > a[aria-current] {
  border-left-color: var(--brand-accent);
  color: var(--brand-text);
}

.docs-toc-more {
  border-top: 1px solid var(--home-line);
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.docs-toc-more a {
  color: var(--brand-text-faint);
  text-decoration: none;
}

.docs-toc-more a:hover {
  color: var(--brand-text);
}

/* The overview. */
.docs-overview {
  gap: 3rem;
  max-width: 54rem;
}

.docs-overview-head .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.docs-start {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-start-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 160ms ease;
}

.docs-start-card:hover {
  border-color: var(--brand-border);
}

.docs-start-card .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.docs-start-card-first .landing-kicker,
.docs-start-go {
  color: var(--brand-accent-strong) !important;
}

.docs-start-card strong {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.docs-start-card > span:not(.landing-kicker, .docs-start-go) {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.docs-start-go {
  align-items: center;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.375rem;
}

.docs-overview-section h2 {
  border-bottom: 1px solid var(--home-line);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: 0.5rem;
}

.docs-guide-list,
.docs-video-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-guide-list a {
  align-items: baseline;
  border-bottom: 1px solid var(--home-line);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 12.5rem minmax(0, 1fr) auto;
  padding: 1.125rem 0;
  text-decoration: none;
}

.docs-guide-list strong {
  font-size: 1rem;
}

.docs-guide-list a:hover strong {
  color: var(--brand-accent-strong);
}

.docs-guide-summary {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.docs-guide-facts {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.docs-overview-columns {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-video-list a {
  align-items: center;
  border-bottom: 1px solid var(--home-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  padding: 0.875rem 0;
  text-decoration: none;
}

.docs-video-list strong {
  display: block;
  font-size: 0.9375rem;
}

.docs-video-list a:hover strong {
  color: var(--brand-accent-strong);
}

.docs-video-list .mono {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  margin-top: 0.25rem;
}

.docs-video-thumb {
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  position: relative;
}

.docs-video-thumb img {
  display: block;
  height: auto;
  width: 100%;
}

.docs-video-play {
  align-items: center;
  background: #faf9f6;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
  color: #1a1a18;
  display: inline-flex;
  height: 1.625rem;
  justify-content: center;
  left: 50%;
  padding: 0.4rem 0.35rem 0.4rem 0.45rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.625rem;
}

.docs-video-play svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.docs-overview-note {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.875rem !important;
}

.docs-reference {
  margin: 0;
}

.docs-reference > div {
  border-bottom: 1px solid var(--home-line);
  display: grid;
  font-size: 0.875rem;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  padding: 0.75rem 0;
}

.docs-reference dt {
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  padding-top: 0.2rem;
  text-transform: uppercase;
}

.docs-reference dd {
  margin: 0;
}

.docs-reference .mono {
  font-size: 0.75rem;
}

/* Footer. */
.docs-footer {
  padding: 0;
}

.docs-footer-inner {
  align-items: center;
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.75rem;
}

.docs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
}

.docs-footer-links a {
  text-decoration: none;
}

.docs-footer-links a:hover {
  color: var(--brand-text);
}

.docs-footer b {
  color: var(--brand-text-secondary);
}

@media (max-width: 1240px) {
  .docs-layout {
    grid-template-areas: "sidebar article";
    grid-template-columns: 13rem minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }

  .docs-search-box {
    width: 15rem;
  }
}

@media (max-width: 1080px) {
  .docs-header .landing-nav {
    display: none;
  }
}

@media (max-width: 860px) {
  .docs-layout,
  .docs-layout-index {
    gap: 2rem;
    grid-template-areas: "sidebar" "article";
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5rem;
  }

  /* On one column the sidebar is a wrapped row of links above the article. */
  .docs-sidebar {
    border-bottom: 1px solid var(--home-line);
    flex-flow: row wrap;
    gap: 0.25rem;
    padding-bottom: 1rem;
    position: static;
  }

  .docs-group,
  .docs-sidebar-help {
    display: none;
  }

  .docs-sidebar > a {
    padding: 0.35rem 0.6rem;
  }

  .docs-start,
  .docs-overview-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-guide-list a {
    gap: 0.375rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-search {
    margin-left: 0;
    order: 10;
    width: 100%;
  }

  .docs-search-box {
    width: 100%;
  }

  .docs-header .header-inner {
    flex-wrap: wrap;
    padding-block: 0.75rem;
  }

  .docs-header .header-actions {
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .docs-header-slash,
  .docs-header-title {
    display: none;
  }

  .docs-meta .docs-edit {
    margin-left: 0;
  }

  .docs-search-box kbd {
    display: none;
  }

  .docs-prose .public-table {
    display: block;
    overflow-x: auto;
  }
}

/* The current page in the public nav carries the logo's cursor, like the console's tabs. */
.landing-nav a[aria-current="page"] {
  color: var(--brand-text);
}

.landing-nav a[aria-current="page"]::after {
  display: none;
}

.nav-cursor {
  color: var(--brand-accent);
  font-weight: 600;
  /* The link is a flex row with a gap; the cursor sits against the word. */
  margin-left: -0.4rem;
}

/* Homepage service cards link to their landing pages. */
.host-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.4rem;
  text-decoration: none;
}

.host-link .icon {
  color: var(--brand-accent-strong);
  transition: transform 200ms ease;
}

.host-link:hover .icon {
  transform: translateX(3px);
}

.host-link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.host-item {
  position: relative;
}

.pricing-plan-featured {
  position: relative;
}

.plan-badge {
  left: 1.75rem;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent);
  border-radius: 999px;
  color: var(--brand-accent-strong);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
}

/* Footer: the theme switch and the "All apps" link. */
.footer-theme {
  align-items: center;
  background: none;
  border: 1px solid var(--home-line, var(--brand-border-soft));
  border-radius: 8px;
  color: var(--brand-text-faint);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
}

.footer-theme:hover {
  color: var(--brand-text);
}

.footer-all {
  color: var(--brand-accent-strong) !important;
}

/* Service landing pages ------------------------------------------------------------------ */
.svc-hero .hero-title h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
}

.svc-section {
  border-top: 1px solid var(--home-line);
}

.svc-section .landing-heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.svc-section-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
}

.svc-aside {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.svc-datasheet {
  margin-top: 0;
}

.svc-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.svc-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.svc-steps {
  counter-reset: none;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-steps li {
  border-top: 1px solid var(--home-line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 1.25rem 0;
}

.svc-steps li > span {
  color: var(--brand-accent-strong);
  font-size: 0.75rem;
}

.svc-steps b {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.svc-steps p,
.svc-copy {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.svc-steps-compact {
  grid-template-columns: minmax(0, 1fr);
}

.svc-steps-compact li {
  flex-direction: row;
  gap: 1rem;
  padding: 1rem 0;
}

.svc-split {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.svc-split-top {
  align-items: start;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.svc-subheading {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.svc-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 2rem 0 0;
}

.svc-numbers dt {
  font-size: 1.75rem;
  font-weight: 600;
}

.svc-numbers dd {
  color: var(--brand-text-faint);
  font-size: 0.8125rem;
  margin: 0;
}

.svc-diagram {
  margin: 0;
}

.svc-diagram svg {
  display: block;
  height: auto;
  width: 100%;
}

.svc-diagram text {
  fill: var(--brand-text-muted);
  font-family: var(--brand-font-mono);
  font-size: 12px;
}

.svc-diagram-lines path {
  fill: none;
  stroke: var(--home-line);
  stroke-dasharray: 3 4;
}

.svc-diagram .svc-diagram-head,
.svc-diagram .svc-diagram-caption {
  fill: var(--brand-text-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.svc-diagram-switch rect {
  fill: var(--brand-surface);
  stroke: var(--brand-border-soft);
}

.svc-diagram-switch .dot {
  fill: var(--brand-text-faint);
  stroke: none;
}

.svc-diagram-switch.is-on rect:first-child {
  stroke: var(--brand-accent);
}

.svc-diagram-switch.is-on .dot {
  fill: var(--brand-accent);
}

.svc-diagram .svc-diagram-switch text {
  fill: var(--brand-text);
  font-size: 11px;
}

.svc-diagram-db path,
.svc-diagram-db ellipse {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1.5;
}

.svc-capture {
  margin: 0;
}

.svc-code {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 12px;
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
  overflow-x: auto;
  padding: 1.25rem 1.5rem;
}

.svc-code-comment {
  color: var(--brand-text-faint);
}

.svc-ext-groups {
  columns: 3 18rem;
  column-gap: 2.5rem;
}

.svc-ext-group {
  break-inside: avoid;
  margin-bottom: 2rem;
}

.svc-ext-group h3 {
  border-bottom: 1px solid var(--home-line);
  font-size: 0.9375rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

.svc-ext-group h3 span {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 0.35rem;
}

.svc-ext-group dl {
  margin: 0;
}

.svc-ext-group dl > div {
  border-bottom: 1px solid var(--home-line);
  padding: 0.6rem 0;
}

.svc-ext-group dt {
  font-size: 0.8125rem;
}

.svc-ext-group dd {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0.15rem 0 0;
}

.svc-app-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-app-grid a {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 12px;
  color: inherit;
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  transition: border-color 150ms ease;
}

.svc-app-grid a:hover {
  border-color: var(--brand-accent);
}

.svc-app-grid b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.svc-app-grid small {
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.svc-app-grid li {
  display: flex;
}

.svc-app-grid li > a {
  width: 100%;
}

.svc-four .plan-resources dt {
  white-space: nowrap;
}

.svc-four .plan-resources dd {
  text-align: right;
}

.svc-faq {
  margin: 0;
}

.svc-faq > div {
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 0.75rem 3rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  padding: 1.5rem 0;
}

.svc-faq dt {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.svc-faq dd {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.svc-also {
  border-top: 1px solid var(--home-line);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.svc-also .landing-kicker {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  margin-bottom: 1.25rem;
}

.svc-also-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-also-list a {
  border: 1px solid var(--brand-border-soft);
  border-radius: 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.25rem 1.4rem;
  text-decoration: none;
  transition: border-color 150ms ease;
}

.svc-also-list a:hover {
  border-color: var(--brand-accent);
}

.svc-also-list b {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.4rem;
}

.svc-also-list b .icon {
  color: var(--brand-accent-strong);
}

.svc-also-list span:not(.icon) {
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.svc-notify {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
}

.svc-notify p {
  color: var(--brand-text-muted);
  flex: 1 1 18rem;
  font-size: 0.9375rem;
}

.svc-notify p b {
  color: var(--brand-text);
}

.svc-notify input[type="email"] {
  background: var(--brand-canvas, transparent);
  border: 1px solid var(--brand-border-soft);
  border-radius: 8px;
  color: var(--brand-text);
  flex: 1 1 16rem;
  font: inherit;
  padding: 0.65rem 0.85rem;
}

.svc-notify input[type="email"]:focus {
  border-color: var(--brand-accent);
  outline: none;
}

.svc-notify-trap {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.svc-notify-message {
  border-left: 2px solid var(--brand-accent);
  color: var(--brand-text);
  margin-top: 2rem;
  padding-left: 0.85rem;
}

@media (max-width: 1080px) {
  .svc-four,
  .svc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .svc-three,
  .svc-split,
  .svc-also-list,
  .svc-faq > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-three .host-item {
    border-left: 0;
    border-top: 1px solid var(--home-line);
    padding-inline: 0;
  }
}

@media (max-width: 560px) {
  .svc-four,
  .svc-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-steps li {
    padding-right: 0;
  }

  .svc-notify {
    padding: 1rem;
  }

  .svc-notify .landing-button {
    width: 100%;
  }
}

/* Regions: the copy and region list, with the globe beside them once landing.js has it running.
   Without JavaScript or WebGL the stage stays hidden and the list stands alone. */
.regions-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.has-globe .regions-inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.regions-copy > p:not(.landing-kicker) {
  color: var(--brand-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 34rem;
  text-wrap: pretty;
}

.regions-copy .landing-heading {
  margin-top: 0.75rem;
}

.region-list {
  border-top: 1px solid var(--home-line);
  list-style: none;
  margin: 2rem 0 0;
  max-width: 34rem;
  padding: 0;
}

.region-list li {
  border-bottom: 1px solid var(--home-line);
}

.region {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.9rem;
  padding: 0.95rem 0.25rem;
  text-align: left;
  width: 100%;
}

.region:hover b {
  color: var(--brand-text);
}

.region:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--brand-focus, var(--brand-accent));
  outline-offset: 2px;
}

.region-dot {
  background: var(--brand-text-faint);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.region-live .region-dot {
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

.region-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.region-text b {
  color: var(--brand-text-secondary);
  font-size: 1.0625rem;
  font-weight: 600;
}

.region-text small {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.region-live .region-text small {
  color: var(--brand-accent-strong);
}

/* The chosen region carries the logo's cursor, like the nav and tabs. */
.region[aria-pressed="true"] b {
  color: var(--brand-text);
}

.has-globe .region[aria-pressed="true"] b::after {
  color: var(--brand-accent);
  content: "_";
  font-weight: 700;
  margin-left: 0.05em;
}

.regions-globe {
  aspect-ratio: 1;
  justify-self: center;
  max-width: 34rem;
  position: relative;
  touch-action: pan-y;
  width: 100%;
}

.regions-globe[hidden] {
  display: none;
}

.globe-canvas {
  cursor: grab;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
  width: 100%;
}

.regions-globe.is-ready .globe-canvas {
  opacity: 1;
}

.regions-globe.is-dragging .globe-canvas {
  cursor: grabbing;
}

/* Markers: a map pin on each region, its tip on the location (landing.js sets left/top to that
   point). Live regions are green, planned ones grey; the chosen pin grows and opens a label
   above it, and sits over its neighbours. */
.globe-marker {
  background: none;
  border: 0;
  color: var(--brand-text-faint);
  cursor: pointer;
  font: inherit;
  height: 1.375rem;
  left: 0;
  margin: -1.375rem 0 0 -0.5rem;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  transition: opacity 250ms ease, transform 200ms ease;
  width: 1rem;
}

.globe-marker-live {
  color: var(--brand-accent);
}

.regions-globe.is-ready .globe-marker {
  opacity: 1;
}

.regions-globe.is-ready .globe-marker.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.globe-marker:hover,
.globe-marker.is-selected {
  transform: scale(1.3);
  z-index: 1;
}

.globe-pin {
  display: block;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25));
  height: 100%;
  overflow: visible;
  width: 100%;
}

.globe-pin path {
  fill: currentColor;
}

.globe-pin circle {
  fill: var(--brand-surface);
}

.globe-marker-name {
  display: none;
}

.globe-marker.is-selected .globe-marker-name {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: 999px;
  color: var(--brand-text);
  bottom: calc(100% + 0.3rem);
  box-shadow: var(--brand-shadow-small);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.45rem;
  left: 50%;
  padding: 0.3rem 0.75rem;
  pointer-events: none;
  position: absolute;
  /* Undo the selected pin's 1.3x scale so the label stays its own size. */
  transform: translateX(-50%) scale(0.77);
  transform-origin: 50% 100%;
  white-space: nowrap;
}

.globe-marker.is-selected .globe-marker-name::after {
  color: var(--brand-text-faint);
  content: attr(data-status);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
}

.globe-marker-live.is-selected .globe-marker-name::after {
  color: var(--brand-accent-strong);
}

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

  .regions-globe {
    max-width: 26rem;
  }
}

/* Homepage hero, split: the offer, headline, buttons and proof on the left and the whole
   dashboard on the right, so the first screen shows the product and the £8 credit. Below
   1100px the screenshot drops under the copy. Service pages keep the stacked hero. */
.hero-split {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 3rem);
}

.hero-split-grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-split h1 {
  font-size: clamp(2.5rem, 3.7vw, 3.5rem);
}

@media (min-width: 1100px) {
  .hero-split .hero-summary {
    font-size: 1.125rem;
  }

  .hero-split .hero-lede {
    font-size: 0.9375rem;
  }
}

.hero-split .hero-actions {
  margin-top: 0.35rem;
}

.hero-split .hero-capture {
  border-bottom: 1px solid var(--brand-border-soft);
  border-radius: 14px;
  margin: 0;
}

@media (min-width: 1100px) {
  .hero-split-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* The new-account credit, as a full-width strip directly under the nav (homepage only, signed
   out). It scrolls away with the page; the sticky nav stays compact. */
.credit-banner {
  background: var(--brand-accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

.credit-banner-inner {
  align-items: center;
  color: var(--brand-text);
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  justify-content: center;
  padding-block: 0.6rem;
  text-decoration: none;
}

.credit-banner-emoji {
  flex: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}

.credit-banner-text b {
  font-weight: 600;
}

.credit-banner-detail {
  color: var(--brand-text-secondary);
}

.credit-banner-cta {
  align-items: center;
  color: var(--brand-accent-strong);
  display: inline-flex;
  flex: none;
  font-weight: 600;
  gap: 0.3rem;
}

.credit-banner-cta .icon {
  transition: transform 200ms ease;
}

.credit-banner-inner:hover .credit-banner-cta .icon {
  transform: translateX(2px);
}

.credit-banner-inner:hover .credit-banner-text b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .credit-banner-detail {
    display: none;
  }

  .credit-banner-inner {
    font-size: 0.8125rem;
    justify-content: space-between;
  }
}

.hero-proof {
  color: var(--brand-text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.35rem 1.25rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.hero-proof li {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.hero-proof .icon {
  color: var(--brand-accent);
  height: 0.95rem;
  width: 0.95rem;
}

.hero-proof a {
  color: inherit;
  text-decoration: none;
}

.hero-proof a:hover {
  text-decoration: underline;
}

/* App landing pages: the offer and launch button sit in the hero, above the guide. */
.guide-offer {
  color: var(--brand-text-secondary);
  font-size: 1.0625rem;
  margin-top: 0.25rem;
}

.guide-offer strong {
  color: var(--brand-text);
}

.guide-actions {
  margin-top: 0.25rem;
}

.guide-proof {
  margin-top: 0.1rem;
}

/* On phones the screenshot is shrunk to a third of its size but the browser bar would keep its
   full height, leaving a large empty grey strip. Show the screenshot in a plain rounded frame. */
@media (max-width: 640px) {
  .capture-bar {
    display: none;
  }

  .product-capture {
    border-radius: 10px;
    box-shadow: 0 12px 32px rgb(26 26 24 / 0.12);
  }
}

/* Homepage hero window: a browser frame with the padlock and address centred, cycling through
   the three products (landing.js). The views share one grid cell and cross-fade. */
.hero-window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.hero-window-bar .capture-url {
  color: var(--brand-text-faint);
  justify-self: center;
  margin-left: 0;
}

.hero-window-bar .capture-url b {
  color: var(--brand-text);
  font-weight: 500;
}

.hero-views {
  display: grid;
}

.hero-view {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-view.is-active {
  opacity: 1;
}

.hero-view img {
  display: block;
  height: auto;
  width: 100%;
}

/* The subhead line for the product on screen turns green. */
.hero-line {
  transition: color 400ms ease;
}

.hero-line.is-active {
  color: var(--brand-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  .hero-view,
  .hero-line {
    transition: none;
  }
}

.hero-line.is-selectable {
  cursor: pointer;
}

@media (max-width: 640px) {
  .hero-window-bar {
    display: none;
  }
}

/* "Four things": a large, faint numeral behind each card's heading, which arrives with the card.
   Gives the eye a reason to scan left to right. */
.host-item {
  isolation: isolate;
}

.host-watermark {
  color: var(--brand-text);
  font-size: clamp(5rem, 8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0.045;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  user-select: none;
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .host-watermark {
    opacity: 0.06;
  }
}

:root[data-theme="dark"] .host-watermark {
  opacity: 0.06;
}


/* App tiles: each logo sits on a square tinted with its own colour (18% over the tile), as in
   the design. Hues are each logo's dominant colour; mostly-black marks stay neutral and get a
   light backing in dark mode. The hover panel is a soft lift: a shade off the page, no border. */
.app-wall-list {
  --app-panel: var(--brand-surface-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-wall-list {
    --app-panel: var(--brand-surface);
  }
}

:root[data-theme="dark"] .app-wall-list {
  --app-panel: var(--brand-surface);
}

.app-wall-logo {
  position: relative;
}

.app-wall-logo::after {
  background: var(--app-tint, transparent);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.18;
  position: absolute;
}

.app-wall-logo img,
.app-wall-logo .icon {
  position: relative;
  z-index: 1;
}

.app-tint-activepieces { --app-tint: hsl(263 60% 50%); }
.app-tint-bookstack { --app-tint: hsl(203 60% 50%); }
.app-tint-discourse { --app-tint: hsl(57 60% 50%); }
.app-tint-drupal { --app-tint: hsl(198 60% 50%); }
.app-tint-forgejo { --app-tint: hsl(11 60% 50%); }
.app-tint-freshrss { --app-tint: hsl(209 60% 50%); }
.app-tint-gitea { --app-tint: hsl(90 60% 50%); }
.app-tint-jellyfin { --app-tint: hsl(233 60% 50%); }
.app-tint-kanboard { --app-tint: hsl(0 60% 50%); }
.app-tint-langflow { --app-tint: hsl(298 60% 50%); }
.app-tint-librechat { --app-tint: hsl(247 60% 50%); }
.app-tint-listmonk { --app-tint: hsl(216 60% 50%); }
.app-tint-mastodon { --app-tint: hsl(245 60% 50%); }
.app-tint-node-red { --app-tint: hsl(0 60% 50%); }
.app-tint-openclaw { --app-tint: hsl(0 60% 50%); }
.app-tint-paperless-ngx { --app-tint: hsl(134 60% 50%); }
.app-tint-uptime-kuma { --app-tint: hsl(142 60% 50%); }
.app-tint-vikunja { --app-tint: hsl(219 60% 50%); }
.app-tint-wikijs { --app-tint: hsl(203 60% 50%); }
.app-tint-woocommerce { --app-tint: hsl(263 60% 50%); }
.app-tint-wordpress { --app-tint: hsl(199 60% 50%); }

/* "Included, as standard": six rows carry a small live demo of what they describe (landing.js).
   Decorative, hidden until the script starts them; reduced motion shows a still frame. */
.ds-live {
  display: none;
  margin-top: 0.6rem;
}

.has-live .ds-live {
  display: block;
}

.ds-meter,
.ds-spend {
  background: var(--home-line);
  border-radius: 3px;
  display: block;
  height: 6px;
  overflow: hidden;
  position: relative;
}

.ds-meter i,
.ds-spend i {
  background: var(--brand-accent);
  border-radius: 3px;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  width: 10%;
}

.ds-meter i {
  opacity: 0.55;
}

.ds-meter b,
.ds-spend b {
  bottom: -3px;
  position: absolute;
  top: -3px;
  width: 1.5px;
}

/* The guaranteed floor (100 of 1,000 Mbit/s). */
.ds-meter b {
  background: var(--brand-accent);
  left: 10%;
}

.ds-meter-labels {
  color: var(--brand-text-faint);
  display: flex;
  font-size: 0.65625rem;
  justify-content: space-between;
  margin-top: 0.3rem;
}

.ds-meter-labels span:first-child {
  color: var(--brand-accent-strong);
}

.ds-bill {
  color: var(--brand-accent-strong);
  font-size: 0.75rem;
  font-weight: 500;
}

.ds-bill.is-capped {
  color: var(--brand-text);
}

.ds-spark {
  display: block;
  height: 36px;
  overflow: visible;
  width: 100%;
}

.ds-spark-guide {
  stroke: var(--brand-text-faint);
  stroke-dasharray: 3 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ds-spark-line {
  fill: none;
  stroke: var(--brand-accent);
  stroke-linejoin: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Exactly two one-line entries tall, so new entries never change the row's height. */
.ds-log {
  border-left: 2px solid var(--home-line);
  color: var(--brand-text-faint);
  display: block;
  font-size: 0.6875rem;
  height: 2.25rem;
  line-height: 1.125rem;
  overflow: hidden;
  padding-left: 0.5rem;
}

.ds-log span {
  animation: ds-row-in 400ms ease-out;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-log b {
  color: var(--brand-text);
  font-weight: 500;
}

@keyframes ds-row-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The limit you set, at 70% of the bar; past it the forecast turns amber and the email goes. */
.ds-spend {
  overflow: visible;
}

.ds-spend i {
  transition: width 300ms linear;
  width: 0;
}

.ds-spend b {
  background: var(--brand-warning-text);
  left: 70%;
}

.ds-spend.is-over i {
  background: var(--brand-warning-text);
}

.ds-alert {
  color: var(--brand-warning-text);
  display: block;
  font-size: 0.65625rem;
  margin-top: 0.3rem;
  opacity: 0;
  transition: opacity 300ms ease;
}

.ds-alert.is-on {
  opacity: 1;
}

.ds-locs {
  color: var(--brand-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  gap: 0.4rem 1rem;
}

.ds-locs span::before {
  border: 1.5px solid var(--brand-text-faint);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 0.4rem;
  vertical-align: 0;
  width: 7px;
}

.ds-locs .is-live {
  color: var(--brand-accent-strong);
}

.ds-locs .is-live::before {
  animation: ds-pulse 2s ease-out infinite;
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

@keyframes ds-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 60%, transparent);
  }

  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-log span,
  .ds-locs .is-live::before {
    animation: none;
  }

  .ds-meter i,
  .ds-spend i,
  .ds-alert {
    transition: none;
  }
}

/* Console tour, with landing.js: the screens stack and cross-fade with a small upward slide,
   the active description expands, and a green rail fills down the active item; when it is full
   the next item takes over. Hover pauses, a click jumps. Without the script the radios switch
   the screens as before. */
.tour-animated .tour-item {
  padding-left: 0.875rem;
  position: relative;
}

.tour-rail {
  background: var(--brand-accent);
  bottom: -1px;
  left: 0;
  position: absolute;
  top: -1px;
  transform: scaleY(0);
  transform-origin: top;
  width: 2px;
}

.tour.tour-animated .tour-item .tour-copy {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 500ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 400ms ease,
    margin 500ms ease;
}

.tour.tour-animated .tour-item:not(.is-active) .tour-copy {
  margin-top: 0;
}

.tour.tour-animated .tour-item.is-active .tour-copy {
  max-height: 7.5rem;
  opacity: 1;
}

.tour.tour-animated .tour-stage {
  display: grid;
}

.tour.tour-animated .tour-panel {
  display: block;
  grid-area: 1 / 1;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tour.tour-animated .tour-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.tour.tour-animated .tour-caption {
  grid-row: 2;
}

@media (prefers-reduced-motion: reduce) {
  .tour.tour-animated .tour-panel,
  .tour.tour-animated .tour-item .tour-copy {
    transition: none;
  }
}

/* Pricing: two products, two shapes. Machines are three cards; managed apps are one tinted
   panel with a size table, so Large and XL sit beside Small and Medium instead of in a note. */
.pricing-block-head {
  align-items: end;
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 2.75rem;
}

.pricing-apps .pricing-block-head {
  margin-top: 3.5rem;
}

.pricing-eyebrow {
  align-items: center;
  color: var(--brand-accent-strong);
  display: flex;
  font-size: 0.71875rem;
  gap: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-eyebrow::after {
  background: color-mix(in srgb, var(--brand-accent) 45%, transparent);
  content: "";
  height: 1px;
  width: 1.75rem;
}

.pricing-block-title {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 0.5rem;
}

.pricing-block-lede {
  color: var(--brand-text-muted);
  margin-top: 0.4rem;
  max-width: 56ch;
}

.pricing-block-who {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: right;
}

.pricing-block-who b {
  color: var(--brand-text);
  display: block;
  font-weight: 600;
}

.pricing .pricing-block-head + .pricing-plans {
  margin-top: 1.25rem;
}

.apps-sizes {
  background: var(--brand-accent-soft);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  border-radius: 14px;
  margin-top: 1.25rem;
  padding: 1.375rem 1.5rem;
}

.apps-sizes table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.apps-sizes thead th {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  color: var(--brand-text-faint);
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.625rem 0.625rem;
  text-align: left;
  text-transform: uppercase;
}

.apps-sizes tbody th,
.apps-sizes td {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  font-size: 0.90625rem;
  padding: 0.75rem 0.625rem;
  text-align: left;
  vertical-align: middle;
}

.apps-sizes tbody tr:last-child th,
.apps-sizes tbody tr:last-child td {
  border-bottom: 0;
}

.apps-sizes tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.apps-size-spec {
  color: var(--brand-text-muted);
  font-size: 0.75rem !important;
  white-space: nowrap;
}

.apps-size-price span {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.apps-size-price small {
  color: var(--brand-accent-strong);
  display: block;
  font-size: 0.71875rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.apps-size-fit {
  color: var(--brand-text-muted);
  font-size: 0.8125rem !important;
}

.apps-size-cta {
  text-align: right !important;
}

.apps-size-cta a {
  background: var(--brand-surface);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  border-radius: 8px;
  color: var(--brand-text);
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 0.875rem;
  text-decoration: none;
  transition: border-color 150ms ease;
}

.apps-size-cta a:hover {
  border-color: var(--brand-accent);
}

.apps-sizes-included {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.84375rem;
  gap: 0.5rem 1.375rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.apps-sizes-included li {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.apps-sizes-included .icon {
  color: var(--brand-accent-strong);
  height: 0.95rem;
  width: 0.95rem;
}

@media (max-width: 760px) {
  .pricing-block-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-block-who {
    text-align: left;
  }

  .apps-sizes {
    padding: 1rem;
  }

  .apps-size-spec,
  .apps-size-fit {
    display: none;
  }
}

/* "£8 on us": the paragraph's three examples take turns on the sample invoice (landing.js).
   The matching phrase lights up green, and the total rolls from the line's amount back to £0.00. */
.credit-example {
  color: var(--brand-text);
  font-weight: 500;
  transition: color 400ms ease;
}

.credit-example.is-lit {
  color: var(--brand-accent-strong);
}

.invoice-item {
  transition: background 400ms ease;
}

.invoice-item.is-highlighted {
  background: color-mix(in srgb, var(--brand-accent) 9%, transparent);
  margin-inline: -1.375rem;
  padding-inline: 1.375rem !important;
}

.invoice-total .mono.is-rolling {
  color: var(--brand-text);
}

@media (prefers-reduced-motion: reduce) {
  .credit-example,
  .invoice-item {
    transition: none;
  }
}

/* Managed Postgres page (service_postgres.html). */
.pg-hero .landing-kicker {
  margin-bottom: 1rem;
}

.pg-hero-lede {
  max-width: 50ch;
}

.pg-hero-note {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 52ch;
}

.pg-facts {
  padding-bottom: 1rem;
}

.pg-facts-grid {
  border-bottom: 1px solid var(--brand-border);
  border-top: 1px solid var(--brand-border);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pg-facts-grid > div {
  padding: 1.5rem 1.5rem 1.5rem 0;
}

.pg-facts-grid > div + div {
  border-left: 1px solid var(--brand-border);
  padding-left: 1.25rem;
}

.pg-facts-grid dt {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pg-facts-grid dd {
  color: var(--brand-text-muted);
  font-size: 0.84375rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
}

.pg-facts-grid dd a {
  color: inherit;
}

.pg-section-lede {
  margin-top: 1rem;
  max-width: 62ch;
}

/* You get / you give up */
.pg-tradeoff {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  overflow: hidden;
}

.pg-tradeoff-side {
  padding: 1.75rem;
}

.pg-tradeoff-give {
  background: var(--brand-surface-muted);
  border-left: 1px solid var(--brand-border);
}

.pg-tradeoff h3 {
  color: var(--brand-accent-strong);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pg-tradeoff-give h3 {
  color: var(--brand-text-faint);
}

.pg-tradeoff ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.pg-tradeoff li {
  align-items: start;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1rem minmax(0, 1fr);
  line-height: 1.5;
}

.pg-tradeoff li .icon {
  color: var(--brand-accent-strong);
  height: 1rem;
  margin-top: 0.2rem;
  width: 1rem;
}

.pg-tradeoff-give li {
  color: var(--brand-text-muted);
}

.pg-tradeoff-give li .icon {
  color: var(--brand-text-faint);
}

.pg-tradeoff-note {
  border-top: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.pg-tradeoff-note a {
  color: var(--brand-accent-strong);
}

/* Three things in the console */
.pg-three {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}

.pg-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.pg-card-index {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
}

.pg-card h3 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}

.pg-card > p:not(.pg-card-index):not(.pg-callout) {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.pg-callout {
  background: var(--brand-accent-soft);
  border-radius: 8px;
  color: var(--brand-accent-strong);
  font-size: 0.84375rem;
  line-height: 1.5;
  margin-top: auto;
  padding: 0.875rem 1rem;
  transform: translateY(0.25rem);
}

.pg-card > p:nth-of-type(2) + .pg-callout {
  margin-top: 1.25rem;
}

.pg-switches,
.pg-meters {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: auto 0 0;
  padding: 1.25rem 0 0;
}

.pg-switches li {
  align-items: center;
  display: flex;
  font-size: 0.84375rem;
  justify-content: space-between;
}

.pg-switch {
  background: var(--brand-border);
  border-radius: 999px;
  height: 18px;
  position: relative;
  width: 32px;
}

.pg-switch::after {
  background: var(--brand-surface);
  border-radius: 50%;
  content: "";
  height: 12px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 12px;
}

.pg-switch.is-on {
  background: var(--brand-accent-strong);
}

.pg-switch.is-on::after {
  left: 17px;
}

.pg-meters > div {
  display: grid;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  gap: 0.35rem;
  grid-template-columns: 1fr auto;
}

.pg-meters dt {
  color: var(--brand-text-muted);
}

.pg-meters dd {
  margin: 0;
}

.pg-meter {
  background: var(--brand-border);
  border-radius: 3px;
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  position: relative;
}

.pg-meter::before {
  background: var(--brand-accent-strong);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
}

.pg-meter-31::before { width: 31%; }
.pg-meter-48::before { width: 48%; }
.pg-meter-18::before { width: 18%; }

/* Where it sits */
.pg-where {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding: 2.25rem 2rem;
}

.pg-where-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0.75rem 0 1rem;
}

.pg-net {
  align-items: center;
  display: grid;
  gap: 1rem 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.pg-node {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  display: grid;
  gap: 0.3rem;
  padding: 0.875rem 1rem;
}

.pg-node p,
.pg-node span {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.pg-node b {
  font-size: 0.9375rem;
  font-weight: 600;
}

.pg-node-db {
  background: var(--brand-accent-soft);
  border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent);
}

.pg-node-db span {
  color: var(--brand-accent-strong);
}

.pg-node-away {
  border-style: dashed;
  grid-column: 2 / 4;
}

.pg-link {
  color: var(--brand-accent-strong);
  font-size: 0.75rem;
  white-space: nowrap;
}

.pg-link-back {
  color: var(--brand-text-faint);
  grid-column: 1;
  justify-self: end;
}

/* Datasheet */
.pg-specs {
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
}

.pg-specs .svc-copy {
  margin-top: 1rem;
}

.pg-specs-list {
  display: grid;
  gap: 0 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.pg-specs-list > div {
  border-top: 1px solid var(--brand-border);
  display: grid;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  padding: 1rem 0 1.125rem;
}

.pg-specs-list dt {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding-top: 0.2rem;
  text-transform: uppercase;
}

.pg-specs-list dd {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

/* Extensions */
.pg-ext {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-top: 2rem;
}

.pg-ext-examples,
.pg-ext-list {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
}

.pg-ext-tabs {
  background: var(--brand-surface-muted);
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
}

.pg-ext-tabs[hidden] {
  display: none;
}

.pg-ext-tabs button {
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--brand-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
}

.pg-ext-tabs button[aria-selected="true"] {
  background: var(--brand-text);
  color: var(--brand-canvas);
}

.pg-ext-panel {
  padding: 1.5rem;
}

.pg-ext-panel + .pg-ext-panel {
  border-top: 1px solid var(--brand-border);
}

.pg-ext-panel[hidden] {
  display: none;
}

.pg-ext-panel h3 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.125rem;
  font-weight: 600;
  gap: 0.25rem 0.75rem;
}

.pg-ext-panel h3 .mono {
  color: var(--brand-accent-strong);
  font-size: 0.71875rem;
  font-weight: 400;
}

.pg-ext-panel > p {
  color: var(--brand-text-muted);
  font-size: 0.9375rem;
  margin-top: 0.5rem;
}

.pg-ext-panel .svc-code {
  margin-top: 1rem;
}

.pg-ext-panel > .pg-ext-note {
  font-size: 0.875rem;
  margin-top: 1rem;
}

.pg-ext-filter {
  align-items: center;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
}

.pg-ext-filter[hidden] {
  display: none;
}

.pg-ext-filter .mono {
  color: var(--brand-text-faint);
  font-size: 0.6875rem;
}

.pg-ext-filter input {
  background: var(--brand-canvas);
  border: 1px solid var(--brand-border);
  border-radius: 7px;
  color: var(--brand-text);
  flex: 1;
  font: inherit;
  font-size: 0.875rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
}

.pg-ext-group {
  border-bottom: 1px solid var(--brand-border);
}

.pg-ext-group[hidden] {
  display: none;
}

.pg-ext-group summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  list-style: none;
  padding: 0.875rem 1rem;
}

.pg-ext-group summary::-webkit-details-marker {
  display: none;
}

.pg-ext-group summary .mono {
  color: var(--brand-text-faint);
  font-size: 0.75rem;
  font-weight: 400;
}

.pg-ext-group dl {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1rem 1rem;
}

.pg-ext-group dl > div {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
}

.pg-ext-group dl > div[hidden] {
  display: none;
}

.pg-ext-group dt {
  font-size: 0.8125rem;
}

.pg-ext-group dd {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  margin: 0;
}

.pg-ext-foot {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  padding: 0.875rem 1rem;
}

.pg-ext-foot a {
  color: inherit;
}

/* Pricing */
.pg-plans {
  margin-top: 2rem;
}

.pg-plans .plan-resources dd {
  text-align: right;
}

.pg-plan-credit {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
  margin-top: -0.5rem;
  text-align: center;
}

/* Questions */
.pg-faq {
  display: grid;
  gap: 2rem 4rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
}

.pg-faq-list details {
  border-bottom: 1px solid var(--brand-border);
}

.pg-faq-list details:first-child {
  border-top: 1px solid var(--brand-border);
}

.pg-faq-list summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.125rem;
  font-weight: 600;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: -0.01em;
  list-style: none;
  padding: 1.25rem 0;
}

.pg-faq-list summary::-webkit-details-marker {
  display: none;
}

.pg-faq-list summary::after {
  color: var(--brand-text-faint);
  content: "+";
  font-family: var(--brand-font-mono);
  font-weight: 400;
}

.pg-faq-list details[open] summary::after {
  content: "−";
}

.pg-faq-list details p {
  color: var(--brand-text-muted);
  max-width: 66ch;
  padding-bottom: 1.375rem;
}

/* Closing */
.pg-closing-steps {
  display: grid;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.pg-closing-steps li {
  align-items: baseline;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  padding: 0.75rem 0;
}

.pg-closing-steps li + li {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.pg-closing-steps .mono {
  color: var(--brand-accent);
  font-size: 0.71875rem;
}

.pg-closing-steps p {
  color: rgb(255 255 255 / 0.65);
}

.pg-closing-steps b {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .pg-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-facts-grid > div,
  .pg-facts-grid > div + div {
    border-left: 0;
    border-top: 1px solid var(--brand-border);
    padding: 1.25rem 1rem 1.25rem 0;
  }

  .pg-facts-grid > div:nth-child(-n + 2) {
    border-top: 0;
  }

  .pg-three,
  .pg-ext,
  .pg-where,
  .pg-specs,
  .pg-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-specs-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .pg-facts-grid > div:nth-child(2) {
    border-top: 1px solid var(--brand-border);
  }

  .pg-tradeoff {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-tradeoff-give {
    border-left: 0;
    border-top: 1px solid var(--brand-border);
  }

  .pg-tradeoff-side,
  .pg-card,
  .pg-where {
    padding: 1.25rem;
  }

  .pg-net {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-node-away {
    grid-column: auto;
  }

  .pg-link,
  .pg-link-back {
    justify-self: center;
    grid-column: auto;
  }

  .pg-specs-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}