/* The Blobby website (stage 33; the home page is stage 35): simple, friendly and plain-spoken, in Blobby's own look. The brand is the blob: the
   mascot greets you, the soft blob shape sits behind the product and numbers the steps, and everything is round and
   calm. It follows the visitor's light or dark setting, in the app's own colours (neutral greys, the app's primary
   button, ruby only on comment pins). Trust comes from facts: what it does, where your designs live, what it costs,
   who makes it. IBM Plex Sans and Mono, served from the site. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono.woff2') format('woff2');
}

:root {
  /* light: the app's light theme */
  --page: #f5f5f5;
  --panel: #fafafa;
  --card: #ffffff;
  --raised: #f0f0f0;
  --float: #ffffff;
  --ink: #1c1c1c;
  --text: #3a3a3a;
  --muted: #666666;
  --subtle: #8a8a8a;
  --line: #e3e3e3;
  --line-2: #d4d4d4;
  --hover: rgba(0, 0, 0, 0.045);
  --primary: #1c1c1c;
  --primary-hover: #333333;
  --on-primary: #ffffff;
  --secondary: #ffffff;
  --secondary-hover: #f2f2f2;
  --inv-bg: #1c1c1c;
  --inv-ink: #ffffff;
  --inv-text: #d6d6d6;
  --inv-muted: #9a9a9a;
  --code-bg: #1a1a1a;
  --code-ink: #e8e8e8;
  --pin: #c22d45;
  --sel: #4f74e8;
  --ok: #0b7a4b;
  --ok-soft: #5fd38d;
  --blob: #e7e7e5;
  --accent: #4150e0;
  --accent-hover: #3442c9;
  --on-accent: #ffffff;
  --tint: #faf8f5;
  --dot: rgba(0, 0, 0, 0.13);
  --g0: #eef0ff;
  --g1: #c4cdff;
  --g2: #f6cde0;
  --g3: #ffd8bd;
  --g4: #a7b3ff;
  --radius-panel: 28px;
  --radius-card: 20px;
  --shadow-card: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 0 0 1px var(--line), 0 16px 40px -12px rgba(0, 0, 0, 0.18);
  --shadow-window:
    0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 30px 70px -24px rgba(0, 0, 0, 0.22);
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light dark;

  /* The design system's names, pointed at the site's colours so shared parts match. */
  --text-muted: var(--muted);
  --bg-surface: var(--card);
  --border: var(--line);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* dark: the app's dark theme */
    --page: #111111;
    --panel: #161616;
    --card: #1b1b1b;
    --raised: #262626;
    --float: #2c2c2c;
    --ink: #ececec;
    --text: #c4c4c4;
    --muted: #a3a3a3;
    --subtle: #7a7a7a;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --hover: rgba(255, 255, 255, 0.055);
    --primary: #ececec;
    --primary-hover: #ffffff;
    --on-primary: #1a1a1a;
    --secondary: rgba(255, 255, 255, 0.06);
    --secondary-hover: rgba(255, 255, 255, 0.1);
    --inv-bg: #ececec;
    --inv-ink: #111111;
    --inv-text: #2e2e2e;
    --inv-muted: #5c5c5c;
    --code-bg: #0b0b0b;
    --code-ink: #e6e6e6;
    --ok: #5fd38d;
    --blob: #1a1a1a;
    --accent: #5a68f0;
    --accent-hover: #6c79f5;
    --on-accent: #ffffff;
    --tint: #181818;
    --dot: rgba(255, 255, 255, 0.1);
    --g0: #15161f;
    --g1: #2c3685;
    --g2: #55264a;
    --g3: #5a3720;
    --g4: #3a46a8;
    --shadow-card: 0 0 0 1px var(--line);
    --shadow-float: 0 0 0 1px var(--line-2), 0 24px 48px -18px rgba(0, 0, 0, 0.85);
    --shadow-window: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
p a,
li a,
.a a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
p a:hover,
li a:hover {
  text-decoration-color: var(--ink);
}
h1,
h2,
h3 {
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
p {
  margin: 0;
}
code,
kbd {
  font: 400 0.86em var(--mono);
  background: var(--raised);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
::selection {
  background: rgba(79, 116, 232, 0.3);
}
:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 3px;
  border-radius: 6px;
}
[hidden] {
  display: none !important;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ico {
  width: 1em;
  height: 1em;
  flex: none;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
}

/* ---------- layout and type ---------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.center {
  text-align: center;
}
.display {
  font-size: clamp(44px, 6.6vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}
.pro-mark {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- buttons: the app's ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 0;
  font: 500 15.5px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.btn .ico {
  width: 17px;
  height: 17px;
}
.btn:active {
  transform: translateY(1px);
}
.btn-light,
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.18);
}
.btn-light:hover,
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-line,
.btn-secondary {
  background: var(--secondary);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-line:hover,
.btn-secondary:hover {
  background: var(--secondary-hover);
}
.btn-sm {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 14.5px;
}
.btn-sm .ico {
  width: 15px;
  height: 15px;
}
.btn-lg {
  height: 52px;
  padding: 0 26px;
}
.btn-block {
  display: flex;
  width: 100%;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.actions.center {
  justify-content: center;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
}
.link-arrow .ico {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.link-arrow:hover .ico {
  transform: translateX(3px);
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 44px;
  max-width: 1376px;
  height: 68px;
  margin: 0 auto;
  padding: 0 32px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}
/* The app icon, as in the dock. */
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.brand span {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-lg img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}
.brand-lg span {
  font-size: 24px;
}
.nav-links {
  display: flex;
  gap: 30px;
  margin-right: auto;
  font-size: 15px;
  color: var(--muted);
}
.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--ink);
}
.nav-cta {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14.5px;
}
.nav-cta .ico {
  width: 15px;
  height: 15px;
}
.menu {
  display: none;
  position: relative;
}
.menu summary {
  list-style: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu summary .ico {
  width: 22px;
  height: 22px;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(320px, calc(100vw - 32px));
  background: var(--float);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 8px;
  display: grid;
  gap: 2px;
}
.menu-panel a:not(.btn) {
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink);
}
.menu-panel a:not(.btn):hover {
  background: var(--hover);
}
.menu-panel .btn {
  margin-top: 6px;
}

/* ---------- home page (stage 35): a hairline grid ----------
   The page is one framed column, ruled into sections and split cells. Mono labels, large light headlines whose
   second sentence fades to grey, one accent for the main button, and soft gradient panels in the blob's colours
   that hold the product. */
/* Every page is one framed column between the header and the footer. */
main {
  max-width: 1376px;
  margin: 0 auto;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
main > * + *:not(script) {
  border-top: 1px solid var(--line);
}
main > .sprite + * {
  border-top: 0;
}
.eyebrow {
  font: 400 14px/1.4 var(--mono);
  color: var(--muted);
  letter-spacing: 0;
}
.g-display {
  margin-top: 20px;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.g-h2 {
  margin-top: 14px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.soft {
  color: var(--subtle);
}
.g-lede {
  max-width: 600px;
  margin: 22px auto 0;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--muted);
}
.g-copy {
  max-width: 440px;
  margin-top: 18px;
  color: var(--muted);
}
.ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.btn-lg {
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
}
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-accent:hover {
  background: var(--accent-hover);
}
.bi {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink);
}

/* Soft gradient art: the blob's colours, no pictures. */
.art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 60% at 12% 18%, var(--g1) 0, transparent 70%),
    radial-gradient(40% 55% at 88% 22%, var(--g2) 0, transparent 70%),
    radial-gradient(55% 60% at 70% 100%, var(--g3) 0, transparent 70%),
    radial-gradient(35% 50% at 35% 75%, var(--g4) 0, transparent 70%), var(--g0);
}
.art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.2px) 0 0 / 22px 22px;
  mix-blend-mode: soft-light;
}
.art-warm {
  background:
    radial-gradient(50% 60% at 80% 15%, var(--g3) 0, transparent 70%),
    radial-gradient(45% 60% at 15% 85%, var(--g2) 0, transparent 70%),
    radial-gradient(40% 50% at 60% 55%, var(--g1) 0, transparent 70%), var(--g0);
}
.art-corner {
  left: 30%;
  border-radius: 0;
}

/* Hero */
.g-hero {
  padding: 104px 32px 72px;
  text-align: center;
}
.g-stage {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 52vw, 720px);
  padding: 56px 6% 0;
}
.prompt-card {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
}
.prompt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: 16px;
}
.prompt-bar > span:first-of-type {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-bar .ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.prompt-send {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
}
.prompt-send .ico {
  color: var(--on-primary);
  transform: rotate(-90deg);
}
.prompt-chips {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prompt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--raised);
  font-size: 13.5px;
  color: var(--text);
}
.prompt-chips .bi {
  width: 15px;
  height: 15px;
}
.stage-shot {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: -14px auto 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-window);
}

/* Logo strip */
.strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
}
.strip-label {
  padding: 40px;
  border-right: 1px solid var(--line);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  align-self: center;
}
.strip-logos {
  list-style: none;
  margin: 0;
  padding: 28px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
}
.strip-logos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  filter: grayscale(1);
  opacity: 0.85;
  transition:
    filter 0.2s,
    opacity 0.2s,
    color 0.2s;
}
.strip-logos li:hover {
  filter: none;
  opacity: 1;
  color: var(--ink);
}
.strip-logos .bi {
  width: 22px;
  height: 22px;
  color: currentColor;
}

/* Split cells */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cell {
  position: relative;
  padding: 72px 64px;
  min-height: 420px;
}
.cell + .cell {
  border-left: 1px solid var(--line);
}
.cell-tint {
  background: var(--tint);
}
.cell-art,
.cell-shot {
  overflow: hidden;
}
.cell-dots {
  display: flex;
  align-items: center;
  background: radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
.cell .link-arrow {
  margin-top: 28px;
}

.numbered {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 8px 32px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.numbered li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 24px 0;
}
.numbered li + li {
  border-top: 1px solid var(--line-2);
}
.num {
  font: 400 14px/1.8 var(--mono);
  color: var(--subtle);
}
.numbered p {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.numbered b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.g-statement {
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.g-statement span {
  color: var(--subtle);
}

.cell-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
}
.float-shot {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.float-narrow {
  max-width: 380px;
}

/* Bands: a heading row, then cells */
.band-head {
  padding: 80px 64px 56px;
}
.cells-4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.cells-4 li {
  padding: 36px 32px 44px;
}
.cells-4 li + li {
  border-left: 1px solid var(--line);
}
.cells-4 .ico {
  width: 22px;
  height: 22px;
  color: var(--ink);
}
.cells-4 h3 {
  margin-top: 40px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cells-4 p {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--muted);
}

/* The feature grid: twelve short cells, ruled like .cells-4 */
.cells-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.cells-grid li {
  background: var(--page);
  padding: 30px 32px 34px;
  min-width: 0;
}
.cells-grid h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cells-grid p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.cells-grid .pro-tag {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .cells-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .cells-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cells-grid li {
    padding: 24px 24px 28px;
  }
}

/* The hero's reassurance line */
.g-fine {
  margin-top: 18px;
  font-size: 14px;
  color: var(--subtle);
}

/* Pricing on the home page */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.tier {
  position: relative;
  padding: 56px 64px;
}
.tier + .tier {
  border-left: 1px solid var(--line);
}
.tier-pro {
  overflow: hidden;
  padding: 40px;
}
.tier-card {
  position: relative;
  z-index: 1;
  padding: 24px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.tier h3 {
  font: 400 14px/1.4 var(--mono);
  color: var(--muted);
}
.tier-price {
  margin-top: 10px;
  color: var(--muted);
}
.tier-price b {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-right: 4px;
}
.tier-list {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
}
.tier-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--text);
}
.tier-list li:last-child {
  border-bottom: 1px solid var(--line);
}

/* A word from the maker */
.quote-band {
  position: relative;
  overflow: hidden;
  padding: 96px 64px;
}
.quote {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  padding: 40px 44px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float);
}
.quote blockquote {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quote figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 15px;
  color: var(--muted);
}
.quote figcaption a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ beside its heading */
.split-faq .cell {
  min-height: 0;
}
.split-faq .faq {
  margin-top: -16px;
}

/* ---------- footer (stage 36): a closing call, ruled link columns, a faint wordmark ---------- */
.footer {
  max-width: 1376px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom: 0;
  color: var(--muted);
  overflow: hidden;
}
.foot-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 104px 64px;
  background: var(--tint);
}
.foot-call .g-h2 {
  max-width: 760px;
  font-size: clamp(34px, 4.2vw, 56px);
}
.foot-call .ctas {
  justify-content: flex-start;
}
.foot-mascot {
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.14));
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.foot-grid > * {
  padding: 40px 32px 48px;
}
.foot-grid > * + * {
  border-left: 1px solid var(--line);
}
.foot-brand {
  padding-left: 64px !important;
}
.footer .tagline {
  margin-top: 16px;
  max-width: 280px;
  font-size: 15px;
}
.footer nav {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 15px;
  min-width: 0;
}
.footer nav a {
  overflow-wrap: anywhere;
}
.footer nav h2 {
  margin-bottom: 8px;
  font: 400 13px/1.4 var(--mono);
  color: var(--subtle);
}
.footer a:hover {
  color: var(--ink);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 64px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--subtle);
}
.foot-word {
  margin: 0 0 -0.24em;
  padding: 0 40px;
  border-top: 1px solid var(--line);
  font-size: clamp(96px, 21vw, 300px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.065em;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, var(--line-2), transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

/* ---------- blobs at play (roadmap 38) ----------
   In front of the footer's wordmark: two blobs play catch, one hops back and forth, one peeks up from the bottom
   edge, one sleeps. Pure CSS; still for reduced motion (below). */
.foot-stage {
  position: relative;
  /* Its own box ends where the wordmark is cut off, so the blobs stand on the footer's visible bottom edge. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.play {
  position: absolute;
  inset: auto 0 0;
  height: 170px;
  pointer-events: none;
}
.actor {
  position: absolute;
  bottom: 14px;
  width: 58px;
  pointer-events: auto;
}
.b {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.1));
}
.b-body {
  fill: var(--tint-c);
  stroke: rgb(0 0 0 / 0.06);
  stroke-width: 6;
}
.b-shine {
  fill: #fff;
  opacity: 0.55;
}
.b-eyes {
  fill: #1d1d27;
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s infinite;
}
.b-shut {
  fill: none;
  stroke: #1d1d27;
  stroke-width: 14;
  stroke-linecap: round;
  animation: none;
}
.t-lilac {
  --tint-c: #c9c3ff;
}
.t-peach {
  --tint-c: #ffd2b5;
}
.t-mint {
  --tint-c: #bfe8d3;
}
.t-pink {
  --tint-c: #f7c4dc;
}
.t-sky {
  --tint-c: #c3dcf7;
}
@media (prefers-color-scheme: dark) {
  .t-lilac {
    --tint-c: #a99ff5;
  }
  .t-peach {
    --tint-c: #f0b48f;
  }
  .t-mint {
    --tint-c: #92d1b2;
  }
  .t-pink {
    --tint-c: #e7a0c2;
  }
  .t-sky {
    --tint-c: #96bde8;
  }
}
/* Point at a blob and it hops. */
.actor:hover .b {
  animation: boing 0.55s var(--ease-out, ease-out);
}

/* Catch: the ball flies between two blobs in an arc; each squashes as it catches. */
.catch {
  position: absolute;
  left: 7%;
  bottom: 0;
  width: 24%;
  height: 100%;
}
.catch-a {
  left: 0;
}
.catch-b {
  right: 0;
  transform: scaleX(-1);
}
.squash {
  transform-origin: 50% 100%;
}
.catch-a .squash {
  animation: catch-a 2.8s infinite;
}
.catch-b .squash {
  animation: catch-b 2.8s infinite;
}
.ball-x {
  position: absolute;
  bottom: 52px;
  left: 44px;
  animation: ball-x 1.4s linear infinite alternate;
}
.ball-y {
  animation: ball-y 1.4s infinite;
}
.ball {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #6d7cff 20% 100%);
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.15);
}

/* A walker hops along, turns round, and hops back. */
.walker {
  left: 42%;
  width: 46px;
  animation: walk 16s ease-in-out infinite;
}
.walker .face {
  animation: turn 16s step-end infinite;
}
.walker .hop {
  transform-origin: 50% 100%;
  animation: hop 0.5s ease-in-out infinite;
}

/* A peeker rises from the bottom edge, looks left and right, and ducks back. */
.peeker {
  left: 74%;
  bottom: 0;
  width: 64px;
  transform: translateY(105%);
  animation: peek 9s ease-in-out infinite 2s;
}
.peeker .b-eyes {
  animation:
    blink 5.2s infinite,
    look 9s ease-in-out infinite 2s;
}

/* A sleeper breathes, with z's drifting up. */
.sleeper {
  left: 87%;
  width: 62px;
}
.sleeper .breathe {
  transform-origin: 50% 100%;
  animation: breathe 3.6s ease-in-out infinite;
}
.z {
  position: absolute;
  left: 70%;
  top: -6px;
  font: 500 15px/1 var(--mono);
  color: var(--muted);
  opacity: 0;
  animation: zz 3.6s ease-out infinite;
}
.z2 {
  animation-delay: 1.2s;
}
.z3 {
  animation-delay: 2.4s;
}
.catch-b .b-eyes {
  animation-delay: 1.7s;
}
.walker .b-eyes {
  animation-delay: 3.1s;
}

@keyframes blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes boing {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(0) scale(1.15, 0.85);
  }
  55% {
    transform: translateY(-28px) scale(0.92, 1.08);
  }
}
@keyframes catch-a {
  0%,
  100% {
    transform: scale(1.14, 0.84);
  }
  8%,
  92% {
    transform: scale(1);
  }
  46% {
    transform: translateY(-3px);
  }
}
@keyframes catch-b {
  0%,
  42%,
  58%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14, 0.84);
  }
  96% {
    transform: translateY(-3px);
  }
}
@keyframes ball-x {
  from {
    left: 44px;
  }
  to {
    left: calc(100% - 60px);
  }
}
@keyframes ball-y {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-92px);
    animation-timing-function: ease-in;
  }
}
@keyframes walk {
  0%,
  4% {
    left: 40%;
  }
  46%,
  54% {
    left: 64%;
  }
  96%,
  100% {
    left: 40%;
  }
}
@keyframes turn {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
@keyframes hop {
  0%,
  100% {
    transform: translateY(0) scale(1.06, 0.94);
  }
  50% {
    transform: translateY(-16px) scale(0.96, 1.04);
  }
}
@keyframes peek {
  0%,
  12%,
  88%,
  100% {
    transform: translateY(105%);
  }
  22%,
  78% {
    transform: translateY(38%);
  }
}
@keyframes look {
  0%,
  28%,
  76%,
  100% {
    translate: 0 0;
  }
  36%,
  48% {
    translate: -28px 0;
  }
  56%,
  68% {
    translate: 28px 0;
  }
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.03, 1.06);
  }
}
@keyframes zz {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(18px, -46px) scale(1.2);
  }
}
@media (max-width: 620px) {
  /* Room for the ball's arc above the small wordmark. */
  .foot-stage {
    min-height: 140px;
  }
  .play {
    height: 140px;
  }
  .actor {
    width: 40px;
    bottom: 8px;
  }
  .catch {
    left: 6%;
    width: 52%;
  }
  .ball-x {
    bottom: 36px;
  }
  .walker,
  .peeker {
    display: none;
  }
  .sleeper {
    left: 78%;
    width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .play *,
  .play {
    animation: none !important;
  }
  .peeker {
    transform: translateY(40%);
  }
  .z {
    opacity: 0.6;
  }
  .z2 {
    transform: translate(10px, -18px);
  }
  .z3 {
    display: none;
  }
}

/* ---------- inner pages: a page head, then ruled cells ---------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding: 112px 64px 96px;
}
.page-head > :not(.art) {
  position: relative;
  z-index: 1;
}
.page-head h1 {
  margin-top: 18px;
  max-width: 13em;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.page-head .lead {
  margin-top: 22px;
  max-width: 36em;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--muted);
}
.page-head.centered {
  text-align: center;
}
.page-head.centered h1,
.page-head.centered .lead {
  margin-left: auto;
  margin-right: auto;
}
/* The soft gradient fades in from the right (or from the bottom when centred). */
.art-head {
  left: 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  opacity: 0.85;
}
.centered .art-head {
  left: 0;
  top: 35%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  mask-image: linear-gradient(180deg, transparent, #000 85%);
  opacity: 0.7;
}
.cell-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  font-size: 18px;
  color: var(--text);
}
.cell-text p {
  max-width: 34em;
}
.g-copy.wide {
  max-width: 44em;
}

/* Pricing: the Monthly / Yearly switch (two radios, no JavaScript), then the plans as two cells. */
.b-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.billing {
  display: flex;
  width: max-content;
  margin: 0 auto;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: var(--raised);
}
.pricing > .billing {
  margin: 0 auto 48px;
}
.pricing {
  padding-top: 56px;
}
.billing label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.billing .save {
  font: 400 12px var(--mono);
  color: var(--accent);
}
#b-month:checked ~ .billing label[for='b-month'],
#b-year:checked ~ .billing label[for='b-year'] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
#b-month:focus-visible ~ .billing label[for='b-month'],
#b-year:focus-visible ~ .billing label[for='b-year'] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.per-year,
#b-year:checked ~ .plans .per-month {
  display: none;
}
#b-year:checked ~ .plans .per-year {
  display: inline;
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.plan {
  position: relative;
  padding: 64px;
}
.plan + .plan {
  border-left: 1px solid var(--line);
}
.plan-pro {
  overflow: hidden;
  padding: 40px;
}
.plan-card {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 24px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.plan h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1.4 var(--mono);
  color: var(--muted);
}
.plan-for {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink);
}
.price {
  margin-top: 22px;
  color: var(--muted);
}
.price strong {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-right: 4px;
}
.plan-sub {
  color: var(--muted);
  font-size: 15px;
  min-height: 3em;
  margin: 4px 0 24px;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  font-size: 15px;
  color: var(--text);
}
.checks li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-top: 1px solid var(--line);
}
.checks li:last-child {
  border-bottom: 1px solid var(--line);
}
.checks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 18px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.checks .key strong {
  color: var(--ink);
  font-weight: 500;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq details:first-of-type {
  border-top: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--ink);
}
.faq details p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 42em;
}

/* Download: this computer's installer on a gradient panel, then every installer in ruled cells. */
.dl-stage {
  position: relative;
  overflow: hidden;
  padding: 72px 32px;
}
.dl-primary {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 32px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.dl-primary img {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3);
}
.dl-for {
  font-weight: 500;
  color: var(--ink);
}
.dl-hint {
  color: var(--muted);
  font-size: 14px;
}
.dl-grid,
.first-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  scroll-margin-top: 100px;
}
.first-grid {
  border-top: 1px solid var(--line);
}
.dl-card,
.first-card,
.contact-card {
  padding: 40px 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dl-card + .dl-card,
.first-card + .first-card {
  border-left: 1px solid var(--line);
}
.dl-card h2,
.contact-card h2 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.dl-req,
.dl-note {
  color: var(--muted);
  font-size: 14px;
}
.dl-req {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.dl-note {
  margin-top: 8px;
}
.first-card h3 {
  font: 400 14px/1.4 var(--mono);
  color: var(--muted);
}
.first-card ol {
  margin: 8px 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
  color: var(--text);
  font-size: 15.5px;
}
.next-steps {
  counter-reset: step;
}
.next-steps li {
  display: block;
  position: relative;
  padding-left: 56px;
  counter-increment: step;
  font-size: 17px;
  color: var(--muted);
}
.next-steps li::before {
  content: '0' counter(step);
  position: absolute;
  left: 0;
  top: 24px;
  font: 400 14px/1.8 var(--mono);
  color: var(--subtle);
}
.next-steps strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

/* Contact: four ruled cells. */
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-card {
  align-items: flex-start;
  gap: 12px;
  padding: 48px 64px 56px;
}
.contact-card:nth-child(even) {
  border-left: 1px solid var(--line);
}
.contact-card:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}
.contact-card .num {
  margin-bottom: 18px;
}
.contact-card p:not(.num) {
  color: var(--muted);
  flex: 1;
  max-width: 30em;
}
.contact-card .btn {
  margin-top: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  border-radius: 999px;
}

/* Getting started (docs.html): the steps in a ruled column beside the guide. */
.docs {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: stretch;
}
.docs-toc {
  align-self: stretch;
  border-right: 1px solid var(--line);
  padding: 48px 24px;
}
.docs-toc > div {
  display: grid;
  align-content: start;
  gap: 2px;
  font-size: 14.5px;
}
.docs-toc > div {
  position: sticky;
  top: 96px;
}
.docs-toc a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--muted);
}
.docs-toc a:hover {
  color: var(--ink);
  background: var(--hover);
}
.docs-body {
  padding: 0 64px 32px;
  max-width: 820px;
}
.doc-step {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.doc-step:first-child {
  border-top: 0;
}
.doc-step h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.doc-step h2 .n {
  font: 400 14px/1 var(--mono);
  color: var(--subtle);
}
.doc-step h2 .n::before {
  content: '0';
}
.doc-step p,
.doc-step li {
  color: var(--text);
}
.doc-step p + p,
.doc-step p + ul,
.doc-step ul + p,
.doc-step .app-table + p {
  margin-top: 14px;
}
.doc-step ul {
  margin: 12px 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
}
.doc-step strong,
.doc-step b {
  color: var(--ink);
  font-weight: 500;
}
.doc-note {
  font-size: 15px;
  color: var(--muted) !important;
}
.app-table {
  margin-top: 20px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.app-table > div {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 18px;
  font-size: 15px;
}
.app-table > div + div {
  border-top: 1px solid var(--line);
}
.app-table > div > :first-child {
  color: var(--ink);
}
.app-table em {
  font-style: normal;
  color: var(--ink);
}
.prompt {
  margin: 16px 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--code-bg);
  font: 14.5px/1.5 var(--mono);
  color: var(--code-ink);
  white-space: pre-wrap;
}
.prompt-list {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line);
  gap: 0 !important;
}
.prompt-list li {
  padding: 13px 18px;
}
.prompt-list li + li {
  border-top: 1px solid var(--line);
}
.prompt-list code {
  background: none;
  padding: 0;
  font-size: 14px;
}

/* Legal pages: one readable column inside the frame. */
.legal {
  padding: 112px 64px 120px;
}
.legal > * {
  max-width: 760px;
}
.legal h1 {
  margin-top: 18px;
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.legal-date {
  font: 400 14px var(--mono);
  color: var(--subtle);
  margin: 16px 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 48px 0 12px;
  letter-spacing: -0.03em;
}
.legal h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}
.legal p,
.legal li {
  color: var(--text);
}
.legal p + p,
.legal ul + p,
.legal p + ul {
  margin-top: 12px;
}
.legal ul {
  padding-left: 1.2em;
  margin: 0;
  display: grid;
  gap: 6px;
}
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 136px;
  padding-bottom: 136px;
}
.not-found .actions .btn {
  border-radius: 999px;
}

/* ---------- reveal on scroll (site.js adds .js-reveal; without it everything shows) ---------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .cells-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cells-4 li:nth-child(3) {
    border-left: 0;
  }
  .cells-4 li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip-label {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px 32px;
  }
  .strip-logos {
    padding: 24px 32px;
  }
}
@media (max-width: 860px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .menu {
    display: block;
    margin-left: auto;
  }
  .split,
  .tiers,
  .plans,
  .contact-grid,
  .dl-grid,
  .first-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cell + .cell,
  .tier + .tier {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  /* A screenshot cell comes after its words. */
  .split > .cell-shot:first-child {
    order: 1;
  }
  .split > .cell-shot:first-child + .cell {
    border-top: 0;
  }
  .split > .cell-shot:first-child {
    border-top: 1px solid var(--line);
  }
  .cell {
    min-height: 0;
    padding: 56px 32px;
  }
  .art-corner {
    left: 0;
  }
  .foot-call {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
  }
  .foot-grid > :nth-child(2) {
    border-left: 0;
  }
  .plan + .plan,
  .dl-card + .dl-card,
  .first-card + .first-card,
  .contact-card:nth-child(even) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-toc {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 20px;
  }
  .docs-toc > div {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .docs-body {
    padding: 0 32px 24px;
  }
  .app-table > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .wrap {
    padding: 0 20px;
  }
  main,
  .footer,
  .nav-in {
    border-left: 0;
    border-right: 0;
  }
  .nav-in {
    padding: 0 16px;
  }
  .page-head,
  .legal {
    padding: 72px 20px 64px;
  }
  .art-head {
    left: 20%;
  }
  .plan,
  .dl-card,
  .first-card,
  .contact-card {
    padding: 32px 20px 40px;
  }
  .plan-pro {
    padding: 20px 16px;
  }
  .docs-body {
    padding: 0 20px 16px;
  }
  .foot-call {
    padding: 72px 20px;
  }
  .foot-grid > * {
    padding: 28px 20px 32px;
  }
  .foot-brand {
    padding-left: 20px !important;
  }
  .foot-bottom {
    padding: 18px 20px;
  }
  .g-hero {
    padding: 64px 20px 48px;
  }
  .g-display {
    font-size: 35px;
  }
  .ctas .btn {
    width: 100%;
  }
  .g-stage {
    height: auto;
    padding: 28px 16px 0;
  }
  .prompt-bar {
    font-size: 14px;
  }
  .stage-shot {
    margin-top: 20px;
    border-radius: 10px 10px 0 0;
  }
  .cell,
  .band-head,
  .tier,
  .quote-band {
    padding-left: 20px;
    padding-right: 20px;
  }
  .cell-shot {
    padding: 32px 16px;
  }
  .tier-pro {
    padding: 20px 16px;
  }
  .quote {
    padding: 28px 24px;
  }
  .cells-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .cells-4 li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .numbered {
    padding: 4px 20px;
  }
  .numbered li {
    grid-template-columns: 40px 1fr;
  }
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-grid > :nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .foot-grid > :nth-child(3) {
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 380px) {
  .brand span {
    font-size: 17px;
  }
}