/* Marketing — TycoonBox editorial palette */

.app.app--guest:has(.main--marketing) {
  overflow-x: clip;
  --nav-height: 4.75rem;

  /* Warm paper ground */
  --mkt-bg: oklch(99% 0.004 85);
  --mkt-bg-elevated: oklch(100% 0 0);
  --mkt-bg-subtle: oklch(98.5% 0.002 240);
  --mkt-bg-band: oklch(97.5% 0.003 240);
  --mkt-text: oklch(21% 0.014 240);
  --mkt-text-secondary: oklch(47% 0.014 240);
  --mkt-text-tertiary: oklch(58% 0.01 240);
  --mkt-border-hairline: oklch(91% 0.006 240);
  --mkt-border: oklch(84% 0.01 240);
  --mkt-ink: oklch(17% 0.012 240);
  --mkt-accent: oklch(52% 0.19 250);
  --mkt-accent-hover: oklch(48% 0.19 250);
  --mkt-scroll-offset: calc(var(--nav-height) + 1rem);

  scroll-behavior: smooth;
  --mkt-dark: oklch(16% 0.004 240);
  --mkt-dark-muted: oklch(65% 0.008 240);
  --mkt-dark-border: oklch(28% 0.006 240);
  --mkt-dark-surface: oklch(20% 0.005 240);
  --mkt-terminal: oklch(14% 0.006 240);
  --mkt-shadow: oklch(17% 0.01 240 / 0.06);
  --mkt-shadow-lg: oklch(17% 0.01 240 / 0.1);

  --mkt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mkt-ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
  --mkt-duration-fast: 0.15s;
  --mkt-duration: 0.22s;

  --mkt-font-display: "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mkt-font-prose: "Bitter", Georgia, "Times New Roman", serif;
  --mkt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --color-bg: var(--mkt-bg);
  --color-surface: var(--mkt-bg-subtle);
  --color-text: var(--mkt-text);
  --color-text-muted: var(--mkt-text-secondary);
  --color-border: var(--mkt-border-hairline);
  --color-border-dark: var(--mkt-border-hairline);
  --color-border-darker: var(--mkt-border);
  --color-link: var(--mkt-accent);
  --color-selected: oklch(96% 0.02 250);
  --color-selected-dark: oklch(88% 0.04 250);

  background-color: var(--mkt-bg);
  color: var(--mkt-text);
  font-family: var(--mkt-font-display);
}

.main--marketing {
  max-inline-size: none;
  overflow-x: clip;
  padding: 0;
}

.marketing {
  overflow-x: clip;
}

.app.app--guest:has(.main--marketing) {
  --nav-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' fill='none'%3E%3Cpath d='M3 12C18 6 28 16 48 9C68 2 82 15 104 8C122 2 138 14 157 7' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M8 14C24 11 40 17 66 12C92 7 112 15 152 10' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-nav {
  background-color: color-mix(in oklch, var(--mkt-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--mkt-border-hairline);
  box-shadow: 0 0.35rem 1rem -0.65rem oklch(17% 0.01 240 / 0.12);
  inset-block-start: 0;
  position: sticky;
  z-index: 10;
}

.site-nav__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space);
  justify-content: space-between;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  min-block-size: var(--nav-height);
  padding-inline: var(--inline-space);
}

.site-nav__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.site-nav__drawer {
  display: none;
}

.site-nav__mobile-end {
  display: contents;
}

.site-nav__cta--pinned {
  display: none;
}

.site-nav__toggle {
  cursor: pointer;
  list-style: none;
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

/* Menu button — accent disc + thick lines (jonas.do-inspired) */

.site-nav__menu-btn {
  block-size: 3rem;
  display: block;
  inline-size: 3rem;
  position: relative;
}

.site-nav__menu-label {
  block-size: 1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.site-nav__menu-bg {
  background: var(--mkt-accent);
  block-size: 3rem;
  border-radius: 50%;
  inline-size: 3rem;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0.14;
  position: absolute;
  transition:
    opacity 0.28s var(--mkt-ease-out),
    transform 0.34s var(--mkt-ease-spring);
  z-index: 0;
}

.site-nav__drawer[open] .site-nav__menu-bg,
.marketing-demo__shell:not(.marketing-demo__shell--sidebar-collapsed) .site-nav__menu-bg {
  opacity: 0.2;
  transform: scale(1.08);
}

.site-nav__menu-line {
  --site-nav-menu-line-gap: 0.35rem;
  --site-nav-menu-line-size: 2.5px;
  background: var(--mkt-text);
  block-size: var(--site-nav-menu-line-size);
  border: none;
  inline-size: calc(100% - 1.4rem);
  inset-block-start: 50%;
  inset-inline-start: 0.7rem;
  position: absolute;
  transform-origin: center;
  transition: transform 0.32s var(--mkt-ease-spring);
  z-index: 1;
}

.site-nav__menu-line--1 {
  transform: translateY(calc(-50% - var(--site-nav-menu-line-gap)));
}

.site-nav__menu-line--2 {
  transform: translateY(calc(-50% + var(--site-nav-menu-line-gap)));
}

.site-nav__drawer[open] .site-nav__menu-line--1,
.marketing-demo__shell:not(.marketing-demo__shell--sidebar-collapsed) .site-nav__menu-line--1 {
  transform: translateY(-50%) rotate(45deg);
}

.site-nav__drawer[open] .site-nav__menu-line--2,
.marketing-demo__shell:not(.marketing-demo__shell--sidebar-collapsed) .site-nav__menu-line--2 {
  transform: translateY(-50%) rotate(-45deg);
}

.site-nav__menu-btn--compact {
  block-size: 2rem;
  inline-size: 2rem;
}

.site-nav__menu-btn--compact .site-nav__menu-bg {
  block-size: 2rem;
  inline-size: 2rem;
  opacity: 0.1;
}

.site-nav__menu-btn--compact .site-nav__menu-line {
  --site-nav-menu-line-gap: 0.22rem;
  --site-nav-menu-line-size: 2px;
  inline-size: calc(100% - 0.9rem);
  inset-inline-start: 0.45rem;
}

@media (max-width: 47.99rem) {
  body.site-nav-open {
    overflow: hidden;
  }

  .site-nav__inner {
    flex-wrap: nowrap;
    gap: 0.65rem;
  }

  .site-nav__bar {
    display: none;
  }

  .site-nav__mobile-end {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    margin-inline-start: auto;
  }

  .site-nav__cta--pinned {
    display: inline-flex;
    white-space: nowrap;
  }

  .app.app--guest:has(.main--marketing) .site-nav__cta--pinned {
    --btn-background: var(--mkt-accent);
    --btn-border-color: var(--mkt-accent);
    --btn-border-radius: 980px;
    box-shadow:
      0 0 0 1px oklch(52% 0.19 250 / 0.12),
      0 0.15em 0.35em -0.1em oklch(52% 0.19 250 / 0.35);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-block: 0.5em;
    padding-inline: 0.72em;
  }

  @media (max-width: 24rem) {
    .site-nav .wordmark--nav {
      --wordmark-size: 1.05rem;
    }

    .app.app--guest:has(.main--marketing) .site-nav__cta--pinned {
      font-size: 0.75rem;
      padding-inline: 0.6em;
    }
  }

  @media (max-width: 21.25rem) {
    .site-nav__cta--pinned {
      display: none;
    }
  }

  .site-nav__drawer {
    display: block;
    margin-inline-start: 0;
    position: relative;
    z-index: 12;
  }

  .site-nav__dropdown {
    background: var(--mkt-bg);
    border: 1px solid var(--mkt-border);
    box-shadow:
      0 0 0 1px oklch(17% 0.01 240 / 0.04),
      0 0.5rem 1.25rem -0.35rem oklch(17% 0.01 240 / 0.14);
    inline-size: min(16rem, calc(100vw - var(--inline-space) * 2));
    inset-block-start: calc(100% + 0.35rem);
    inset-inline-end: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, -0.65rem, 0) scale(0.96);
    transform-origin: top right;
    transition:
      opacity 0.24s var(--mkt-ease-out),
      transform 0.36s var(--mkt-ease-spring),
      visibility 0s linear 0.36s;
    visibility: hidden;
  }

  .site-nav__drawer[open] .site-nav__dropdown {
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
      opacity 0.3s var(--mkt-ease-out),
      transform 0.42s var(--mkt-ease-spring),
      visibility 0s linear 0s;
    visibility: visible;
  }

  .site-nav__dropdown-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__dropdown-link {
    background: var(--mkt-ink);
    border-block-end: 3px solid var(--mkt-bg);
    color: oklch(99% 0 0);
    display: block;
    font-family: var(--mkt-font-mono);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    text-transform: uppercase;
    transform: translate3d(0, -0.4rem, 0);
    transition:
      opacity 0.22s var(--mkt-ease-out),
      transform 0.3s var(--mkt-ease-spring);
    transition-delay: 0s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-links li:nth-child(1) .site-nav__dropdown-link {
    transition-delay: 0.06s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-links li:nth-child(2) .site-nav__dropdown-link {
    transition-delay: 0.1s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-links li:nth-child(3) .site-nav__dropdown-link {
    transition-delay: 0.14s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-links li:nth-child(4) .site-nav__dropdown-link {
    transition-delay: 0.18s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-link {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .site-nav__dropdown-link:hover,
  .site-nav__dropdown-link:focus-visible {
    color: oklch(99% 0 0);
    text-decoration: none;
  }

  .site-nav__dropdown-links li:last-child .site-nav__dropdown-link {
    border-block-end: none;
  }

  .site-nav__dropdown-actions {
    border-block-start: 1px solid var(--mkt-border-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    padding: 0.75rem;
    transform: translate3d(0, 0.35rem, 0);
    transition:
      opacity 0.24s var(--mkt-ease-out),
      transform 0.32s var(--mkt-ease-spring);
    transition-delay: 0s;
  }

  .site-nav__drawer[open] .site-nav__dropdown-actions {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.22s;
  }

  .site-nav__dropdown-actions .btn {
    justify-content: center;
  }

  .site-nav__dropdown-actions .btn:not(.btn--primary) {
    --btn-background: var(--mkt-bg-elevated);
    --btn-border-color: var(--mkt-border);
    --btn-border-radius: 980px;
    --btn-color: var(--mkt-text);
  }

  .site-nav__dropdown-actions .btn--primary {
    --btn-background: var(--mkt-accent);
    --btn-border-color: var(--mkt-accent);
    --btn-border-radius: 980px;
    box-shadow:
      0 0 0 1px oklch(52% 0.19 250 / 0.12),
      0 0.15em 0.35em -0.1em oklch(52% 0.19 250 / 0.35);
  }
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: var(--mkt-text-secondary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.site-nav__label {
  display: inline-block;
  position: relative;
}

.site-nav__label::after,
.site-nav a.wordmark .wordmark__text::after {
  background: var(--mkt-accent);
  block-size: 0.46em;
  content: "";
  inline-size: 100%;
  inset-block-end: -0.28em;
  inset-inline-start: 0;
  -webkit-mask: var(--nav-scribble) center / 100% 100% no-repeat;
  mask: var(--nav-scribble) center / 100% 100% no-repeat;
  pointer-events: none;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mkt-duration) var(--mkt-ease-spring);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--mkt-text);
  text-decoration: none;
}

.site-nav__link:hover .site-nav__label::after,
.site-nav__link:focus-visible .site-nav__label::after,
.site-nav__dropdown-link:hover .site-nav__label::after,
.site-nav__dropdown-link:focus-visible .site-nav__label::after,
.site-nav a.wordmark:hover .wordmark__text::after,
.site-nav a.wordmark:focus-visible .wordmark__text::after {
  transform: scaleX(1);
}

.site-nav__actions {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.app.app--guest:has(.main--marketing) .site-nav__actions .btn--small {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: 0.55em;
  padding-inline: 1.15em;
}

.app.app--guest:has(.main--marketing) .site-nav__actions .site-nav__cta {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-block: 0.65em;
  padding-inline: 1.4em;
}

.app.app--guest:has(.main--marketing) .site-nav__actions .btn:not(.btn--primary) {
  --btn-background: transparent;
  --btn-border-color: var(--mkt-border);
  --btn-border-radius: 980px;
  --btn-color: var(--mkt-text);
}

.app.app--guest:has(.main--marketing) .site-nav__actions .btn--primary {
  --btn-background: var(--mkt-accent);
  --btn-border-color: var(--mkt-accent);
  --btn-border-radius: 980px;
  box-shadow:
    0 0 0 1px oklch(52% 0.19 250 / 0.12),
    0 0.15em 0.35em -0.1em oklch(52% 0.19 250 / 0.35);
}

.app.app--guest:has(.main--marketing) .site-footer {
  margin-block-start: 0;
}

.site-footer {
  border-block-start: 1px solid var(--color-border-dark);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-block-start: 4rem;
  padding-block: 2rem;
}

.site-footer__inner {
  display: grid;
  gap: 2rem;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-inline: var(--inline-space);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

.site-footer__title {
  color: var(--color-text);
  font-weight: 700;
  margin-block-end: 0.75rem;
}

.site-footer__links {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__signoff {
  color: var(--mkt-text-secondary);
  margin: 0.85rem 0 0;
}

.site-footer__copyright {
  margin-block-start: 1rem;
}

/* Inner marketing pages (pricing, beta, MCP) — BEM block: marketing-page */

.marketing-page {
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
  padding-inline: var(--inline-space);
  text-align: center;
}

.marketing-page__kicker {
  color: var(--mkt-text-tertiary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-block-end: 0.65rem;
}

.marketing-page__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.05;
  margin-block-end: 0.75rem;
}

.marketing-page__lead {
  color: var(--mkt-text-secondary);
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height: 1.5;
  margin-block-end: 2rem;
  margin-inline: auto;
  max-inline-size: 34rem;
}

.marketing-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-block-end: 1rem;
}

.marketing-page__note {
  color: var(--mkt-text-tertiary);
  font-size: 0.8125rem;
}

.marketing-page__footnote {
  color: var(--mkt-text-tertiary);
  font-size: 0.8125rem;
  margin-block-start: 2rem;
}

.marketing-page__form {
  margin-inline: auto;
  max-inline-size: 28rem;
  text-align: start;
}

.form__errors {
  margin-block-end: var(--block-space);
}

.form__errors-title {
  font-weight: 700;
  margin-block-end: 0.35rem;
}

.form__errors-list {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.pricing-page__alert {
  margin-block-end: 1.5rem;
  text-align: start;
}

.pricing-page__alert .form__hint {
  margin: 0;
}

.marketing-page__list.icon-list {
  list-style: none;
  padding: 0;
}

/* MCP & docs-style subpage sections */

.marketing-page__hero {
  border-block-end: 1px solid var(--mkt-border-hairline);
  margin-inline: calc(-1 * var(--inline-space));
  padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem);
  padding-inline: var(--inline-space);
}

.marketing-page__hero-grid {
  align-items: center;
  display: grid;
  gap: 2.5rem;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  text-align: center;
}

@media (min-width: 56rem) {
  .marketing-page__hero-grid {
    grid-template-columns: 1fr min(26rem, 42vw);
    text-align: start;
  }

  .marketing-page__hero-grid .marketing-page__actions {
    justify-content: flex-start;
  }

  .marketing-page__hero-grid .marketing-page__lead {
    margin-inline: 0;
  }
}

.marketing-page__section {
  padding-block: clamp(3.5rem, 8vw, 5rem);
  text-align: start;
}

.marketing-page__section--band {
  background-color: var(--mkt-bg-band);
  border-block: 1px solid var(--mkt-border-hairline);
  margin-inline: calc(-1 * var(--inline-space));
  padding-inline: var(--inline-space);
}

.marketing-page__section-kicker {
  color: var(--mkt-text-tertiary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-block-end: 0.45rem;
  text-align: center;
}

.marketing-page__section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-block-end: 0.75rem;
  text-align: center;
}

.marketing-page__section-lead {
  color: var(--mkt-text-secondary);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-block-end: 2.25rem;
  margin-inline: auto;
  max-inline-size: 38rem;
  text-align: center;
}

.marketing-page__steps {
  margin-inline: auto;
  max-inline-size: 40rem;
  text-align: start;
}

.marketing-page__steps li + li {
  margin-block-start: 0.75rem;
}

.marketing-page__grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 48rem) {
  .marketing-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.marketing-page__grid-card {
  background: var(--mkt-bg);
  border-radius: 0.875rem;
  border: 1px solid var(--mkt-border-hairline);
  padding: 1.35rem 1.25rem;
  transition: border-color 180ms ease;
}

.marketing-page__grid-card:hover {
  border-color: var(--mkt-border);
}

.marketing-page__grid-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0.45rem;
}

.marketing-page__grid-text {
  color: var(--mkt-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.marketing-page__close {
  border-block-start: 1px solid var(--mkt-border-hairline);
  margin-block: 0 2rem;
  margin-inline: calc(-1 * var(--inline-space));
  padding-block: clamp(3.5rem, 8vw, 5rem);
  padding-inline: var(--inline-space);
  text-align: center;
}

.marketing-page__close-title {
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-block-end: 0.75rem;
}

.marketing-page__close .marketing-page__lead {
  margin-inline: auto;
}

.main--marketing .icon--feature {
  color: var(--mkt-text);
  margin-block-end: 0.65rem;
  opacity: 0.85;
}

/* Shared terminal visual (homepage + MCP) */

.marketing-terminal {
  background: var(--mkt-terminal);
  border: 1px solid oklch(24% 0.006 240);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  text-align: start;
}

.marketing-terminal__chrome {
  align-items: center;
  background: oklch(18% 0.006 240);
  border-block-end: 1px solid oklch(26% 0.006 240);
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
}

.marketing-terminal__dot {
  block-size: 0.55rem;
  border-radius: 50%;
  inline-size: 0.55rem;
}

.marketing-terminal__dot--red { background: #ff5f57; }
.marketing-terminal__dot--yellow { background: #febc2e; }
.marketing-terminal__dot--green { background: #28c840; }

.marketing-terminal__title {
  color: color-mix(in oklch, white 55%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  margin-inline-start: 0.35rem;
}

.marketing-terminal__log {
  color: color-mix(in oklch, white 88%, transparent);
  display: grid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  gap: 0.4rem;
  line-height: 1.5;
  padding: 1.25rem 1.1rem 1.35rem;
}

.marketing-terminal__line {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

.marketing-terminal__line--dim {
  color: color-mix(in oklch, white 42%, transparent);
}

.marketing-terminal__line--ok {
  color: oklch(78% 0.18 145);
}

/* Pill CTAs on marketing pages */

.main--marketing .btn {
  transition:
    transform var(--mkt-duration) var(--mkt-ease-spring),
    background-color var(--mkt-duration-fast) var(--mkt-ease-out),
    border-color var(--mkt-duration-fast) var(--mkt-ease-out),
    color var(--mkt-duration-fast) var(--mkt-ease-out),
    filter var(--mkt-duration-fast) var(--mkt-ease-out);
}

.main--marketing .btn--primary {
  --btn-background: var(--mkt-accent);
  --btn-border-color: var(--mkt-accent);
  --btn-color: oklch(99% 0 0);
  --btn-border-radius: 980px;
  box-shadow:
    0 0 0 1px oklch(52% 0.19 250 / 0.12),
    0 0.2em 0.45em -0.15em oklch(52% 0.19 250 / 0.35);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: 0.72em;
  padding-inline: 1.45em;
}

.main--marketing .btn--primary:hover {
  --btn-background: var(--mkt-accent-hover);
  --btn-border-color: var(--mkt-accent-hover);
  box-shadow:
    0 0 0 1px oklch(48% 0.19 250 / 0.18),
    0 0.25em 0.55em -0.1em oklch(48% 0.19 250 / 0.4);
  filter: none;
  transform: translateY(-1px);
}

.main--marketing .btn:not(.btn--primary) {
  --btn-background: var(--mkt-bg-elevated);
  --btn-border-color: var(--mkt-border);
  --btn-border-radius: 980px;
  font-weight: 600;
}

.main--marketing .btn--primary.btn--large {
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-block: 0.9em;
  padding-inline: clamp(1.75em, 4.5vw, 2.25em);
  box-shadow:
    0 0 0 1px oklch(52% 0.19 250 / 0.14),
    0 0.35em 0.75em -0.15em oklch(52% 0.19 250 / 0.42);
}

.main--marketing .btn--primary.btn--large:hover {
  box-shadow:
    0 0 0 1px oklch(48% 0.19 250 / 0.2),
    0 0.45em 0.9em -0.12em oklch(48% 0.19 250 / 0.48);
  transform: translateY(-2px);
}

/* Pricing page — BEM block: pricing */

.pricing {
  color: var(--mkt-text);
  text-align: center;
}

.pricing__hero {
  margin-inline: auto;
  max-inline-size: 52rem;
  padding-block: clamp(3.5rem, 10vw, 6.5rem) clamp(2rem, 5vw, 3rem);
  padding-inline: var(--inline-space);
}

.pricing__product {
  color: var(--mkt-text-secondary);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-block-end: 0.35rem;
}

.pricing__headline {
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.048em;
  line-height: 0.95;
  margin-block-end: 0.75rem;
}

.pricing__tagline {
  color: var(--mkt-text-secondary);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  margin-inline: auto;
  max-inline-size: 34rem;
}

.pricing__plans {
  isolation: isolate;
  margin-inline: calc(-1 * var(--inline-space));
  overflow: hidden;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 8vw, 5rem);
  padding-inline: var(--inline-space);
  position: relative;
}

.pricing__plans::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 8 h32 v32 h-32 z' fill='none' stroke='%23899aa8' stroke-opacity='0.14' stroke-width='0.85'/%3E%3Cpath d='M16 16 h16 v16 h-16 z' fill='none' stroke='%23899aa8' stroke-opacity='0.09' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 20%, #000 12%, transparent 72%);
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.pricing__plans-scroll,
.pricing__checkout-notice {
  position: relative;
  z-index: 1;
}

.pricing__plans-scroll {
  margin-inline: auto;
  max-inline-size: 56rem;
}

.pricing__checkout-notice {
  margin: 1.25rem auto 0;
  max-inline-size: 42rem;
  text-align: center;
}

.pricing__plans-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pricing__plan {
  background: var(--mkt-bg);
  border: 1px solid var(--mkt-border);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: start;
}

.pricing__plan--featured {
  background: var(--mkt-bg);
  border-color: var(--mkt-accent);
  border-width: 2px;
  box-shadow: none;
  transform: none;
}

.pricing__plan-badge {
  background: transparent;
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 0;
  color: var(--mkt-text-secondary);
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-block-end: 1rem;
  padding: 0.3rem 0.55rem;
  text-transform: uppercase;
}

.pricing__plan--featured .pricing__plan-badge {
  background: transparent;
  border-color: var(--mkt-accent);
  color: var(--mkt-accent);
}

.pricing__plan-name {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-block-end: 0.35rem;
}

.pricing__plan-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-block-end: 0.65rem;
}

.pricing__plan-amount {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.pricing__plan-period {
  color: var(--mkt-text-tertiary);
  font-size: 1.0625rem;
  font-weight: 500;
}

.pricing__plan-desc {
  color: var(--mkt-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-block-end: 1.25rem;
}

.pricing__plan-features {
  display: grid;
  flex: 1;
  gap: 0.55rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.pricing__plan-feature {
  align-items: flex-start;
  color: var(--mkt-text-secondary);
  display: flex;
  font-size: 0.875rem;
  gap: 0.45rem;
  line-height: 1.4;
}

.pricing__plan-check {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}

.pricing__plan-action {
  margin-block-start: auto;
}

.pricing__cta {
  appearance: none;
  background: var(--mkt-ink);
  border: none;
  border-radius: 980px;
  color: oklch(99% 0 0);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  inline-size: 100%;
  padding-block: 0.65rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--mkt-duration) var(--mkt-ease-spring),
    background-color var(--mkt-duration-fast) var(--mkt-ease-out),
    filter var(--mkt-duration-fast) var(--mkt-ease-out);
}

.pricing__cta:hover {
  filter: brightness(1.08);
  text-decoration: none;
  transform: none;
}

.pricing__cta--featured {
  background: var(--mkt-accent);
}

.pricing__cta--featured:hover {
  background: var(--mkt-accent-hover);
  filter: none;
}

.pricing__cta--current {
  background: var(--mkt-bg-subtle);
  border: 1px solid var(--mkt-border);
  color: var(--mkt-text-secondary);
  cursor: default;
  pointer-events: none;
}

.marketing--pricing .pricing__plan-action .pricing__cta {
  color: oklch(99% 0 0);
}

.marketing--pricing .pricing__plan-action .pricing__cta--current {
  color: var(--mkt-text-secondary);
}

/* Compare table */

.pricing__compare {
  background: var(--mkt-bg-band);
  border-block: 1px solid var(--mkt-border-hairline);
  margin-inline: calc(-1 * var(--inline-space));
  padding-block: clamp(4rem, 10vw, 6.5rem);
  padding-inline: var(--inline-space);
}

.pricing__compare-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

.pricing__compare-scroll {
  margin-inline: auto;
  max-inline-size: var(--content-width);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pricing__compare-table {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 36rem;
  text-align: center;
}

.pricing__compare-table th,
.pricing__compare-table td {
  border-block-end: 1px solid var(--mkt-border-hairline);
  padding-block: 0.95rem;
  padding-inline: 0.75rem;
}

.pricing__compare-table thead th {
  border-block-end-width: 2px;
  color: var(--mkt-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding-block-end: 1.1rem;
}

.pricing__compare-feature-col {
  color: var(--mkt-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
}

.pricing__compare-plan-col {
  font-size: 0.9375rem;
  font-weight: 500;
  min-inline-size: 5.5rem;
}

.pricing__compare-plan-col--featured {
  background: oklch(100% 0 0 / 0.55);
  color: var(--mkt-text);
  font-weight: 600;
}

.pricing__compare-dash {
  color: var(--mkt-text-tertiary);
}

/* Included band */

.pricing__included {
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-block: clamp(4.5rem, 11vw, 7rem);
  padding-inline: var(--inline-space);
}

.pricing__included-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

.pricing__included-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

@media (min-width: 40rem) {
  .pricing__included-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .pricing__included-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing__included-item {
  border-block-start: 1px solid var(--mkt-border-hairline);
  padding-block-start: 1.15rem;
}

@media (min-width: 64rem) {
  .pricing__included-item {
    border-block-start: none;
    border-inline-start: 1px solid var(--mkt-border-hairline);
    padding-block-start: 0;
    padding-inline-start: 1.25rem;
  }

  .pricing__included-item:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

.pricing__included-label {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0.4rem;
}

.pricing__included-copy {
  color: var(--mkt-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

/* Closing CTA */

.pricing__close {
  background: var(--mkt-dark);
  border-block-start: 1px solid var(--mkt-dark-border);
  color: oklch(98% 0 0);
  margin-inline: calc(-1 * var(--inline-space));
  padding-block: clamp(5rem, 12vw, 8rem);
  padding-inline: var(--inline-space);
}

.pricing__close-label {
  color: var(--mkt-dark-muted);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-block-end: 0.5rem;
}

.pricing__close-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-block-end: 1.75rem;
}

.pricing__close-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  justify-content: center;
}

.pricing__close-nav .pricing__cta {
  inline-size: auto;
  min-inline-size: 9rem;
}

.pricing__chevron {
  color: oklch(72% 0.14 250);
  font-size: 1.0625rem;
  font-weight: 400;
  text-decoration: none;
}

.pricing__chevron::after {
  content: " ›";
}

.pricing__chevron:hover {
  text-decoration: underline;
}

/* Panel shell variant */

.pricing--panel .pricing__plans {
  margin-inline: 0;
  padding-block: 0 2rem;
  padding-inline: 0;
}

.pricing--panel .pricing__plans-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  inline-size: auto;
}

.pricing--panel .pricing__plan--featured {
  transform: none;
}

.pricing--panel .pricing__compare {
  margin-inline: 0;
  padding-inline: 0;
}

.pricing--panel .pricing__included {
  padding-inline: 0;
}

.docs-layout {
  display: grid;
  gap: 2rem;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding: var(--block-space-double) var(--inline-space);
  text-align: start;
}

@media (min-width: 48rem) {
  .docs-layout {
    grid-template-columns: 14rem 1fr;
  }
}

.docs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-nav__link {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 0.35rem;
  text-decoration: none;
}

.docs-nav__link--active {
  color: var(--color-link);
}

.docs-content h1,
.docs-content h2,
.docs-content h3 {
  margin-block: 1.5rem 0.75rem;
}

.docs-content p,
.docs-content ul {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-block-end: 1rem;
}

.docs-content pre {
  background-color: var(--color-surface);
  border-radius: 0.5em;
  border: 1px solid var(--color-border-dark);
  overflow-x: auto;
  padding: 1rem;
}

.docs-content code {
  font-size: 0.875em;
}

.docs-sidebar__title {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-block-end: 0.75rem;
  text-transform: uppercase;
}

.docs-page-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin-block-start: var(--block-space-double);
  padding: 0;
}

.docs-page-list__link {
  align-items: center;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  padding-block: 1rem;
  text-decoration: none;
}

.docs-page-list__link:first-child {
  border-block-start: none;
}

.docs-page-list__link:hover {
  color: var(--color-link);
  text-decoration: none;
}

.docs-page-list__title {
  font-size: 1rem;
}

.panel-main .docs-layout {
  max-inline-size: none;
  padding: 0;
}

.docs-layout--panel {
  max-inline-size: 56rem;
  padding: 0;
}

.docs-layout--panel .docs-main {
  min-inline-size: 0;
}

.panel-main .docs-content pre {
  background-color: var(--color-surface);
}

.beta-success__url {
  margin-inline: auto;
  max-inline-size: 36rem;
  text-align: start;
  white-space: pre-wrap;
  word-break: break-all;
}

.legal-page {
  margin-inline: auto;
  max-inline-size: 42rem;
  padding: var(--block-space-double) var(--inline-space);
  text-align: start;
}

.legal-page h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-block-end: 1.5rem;
}

.legal-page h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-block: 1.5rem 0.5rem;
}

.legal-page p,
.legal-page li {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-block-end: 0.75rem;
}

.beta-success {
  margin-inline: auto;
  max-inline-size: 32rem;
  padding-block: 3rem;
  text-align: center;
}

.beta-success__url {
  background-color: var(--color-surface);
  border-radius: 0.5em;
  border: 1px solid var(--color-border-dark);
  font-size: 0.8125rem;
  margin-block: 1rem;
  overflow-wrap: anywhere;
  padding: 0.75rem;
  text-align: start;
}

.embed-layout {
  --mkt-bg: oklch(100% 0 0);
  --mkt-text: oklch(21% 0.014 240);
  --mkt-text-secondary: oklch(47% 0.014 240);
  --mkt-text-tertiary: oklch(58% 0.01 240);
  --mkt-border-hairline: oklch(91% 0.006 240);
  --mkt-border: oklch(84% 0.01 240);
  --mkt-ink: oklch(17% 0.012 240);
  --color-bg: var(--mkt-bg);
  --color-text: var(--mkt-text);
  --color-text-muted: var(--mkt-text-secondary);
  --color-border: var(--mkt-border-hairline);
  --color-border-dark: var(--mkt-border-hairline);
  --color-border-darker: var(--mkt-border);

  background: var(--mkt-bg);
  color: var(--mkt-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 1.15rem;
}

.embed-layout .btn--primary {
  --btn-background: var(--mkt-ink);
  --btn-border-color: var(--mkt-ink);
  --btn-color: oklch(99% 0 0);
  --btn-border-radius: 980px;
  font-weight: 500;
}

.embed {
  margin-inline: auto;
  max-inline-size: 24rem;
}

.embed__eyebrow {
  color: var(--mkt-text-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block-end: 0.35rem;
}

.embed__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0.35rem;
}

.embed__lead {
  color: var(--mkt-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-block-end: 1rem;
}

.embed__form .form__group {
  margin-block-end: 0.75rem;
}

.embed__footer {
  color: var(--mkt-text-tertiary);
  font-size: 0.75rem;
  margin-block-start: 0.85rem;
  text-align: center;
}

.embed__actions {
  margin-block-start: 0.5rem;
}

/* Pricing viewed inside authenticated panel shell */

.panel-main .marketing-page {
  max-inline-size: none;
  padding-block: 0;
  text-align: start;
}

.panel-main .marketing-page__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  text-align: start;
}

.panel-main .marketing-page__lead {
  margin-block-end: var(--block-space-double);
  text-align: start;
}

.panel-main .marketing-page__footnote,
.panel-main .marketing-page__note {
  text-align: start;
}

.panel-main .pricing--panel .pricing__plan {
  background-color: var(--color-bg);
  border-color: var(--color-border-dark);
  box-shadow:
    0 0 0 1px oklch(var(--lch-black) / 0.02),
    0 0.2em 1.2em -0.6em oklch(var(--lch-black) / 0.08);
}

.panel-main .pricing--panel .pricing__compare {
  background: var(--color-surface);
  border-color: var(--color-border-dark);
}

.panel-main .pricing-page__alert {
  text-align: start;
}

.mcp-config {
  margin-block: 1.5rem;
  max-inline-size: 100%;
  min-inline-size: 0;
  text-align: start;
}

.mcp-config__json {
  margin-block-end: 0.75rem;
  max-block-size: 20rem;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: auto;
  text-align: start;
  white-space: pre;
}

.marketing .copyable-block {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.marketing .copyable-block .code-block {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.mcp-tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.mcp-tools__tag {
  font-size: 0.75rem;
}

.mcp-prompts {
  margin-inline: auto;
  max-inline-size: 36rem;
  text-align: start;
}

/* Product marketing pages — editorial layout, TycoonBox box motif */

.marketing {
  color: var(--mkt-text);
  text-align: center;
}

/* Long-form bands read left; heroes and section intros stay centered */
.marketing > .marketing__scatter,
.marketing > .marketing__manifesto,
.marketing > .marketing__pillars,
.marketing > .marketing__letter,
.marketing > .marketing__relief,
.marketing__body,
.marketing__scatter-card,
.marketing__pillar,
.marketing__trust-card,
.marketing__tour-feature,
.marketing__chapter,
.marketing--pricing .marketing__body,
.marketing--pricing .marketing__chapter {
  text-align: start;
}

.marketing__section-head {
  margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
  margin-inline: auto;
  max-inline-size: var(--mkt-measure);
  text-align: center;
}

.marketing__section-head--inset {
  margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
  max-inline-size: var(--mkt-measure-narrow);
  padding-inline: var(--inline-space);
  position: relative;
  z-index: 1;
}

.marketing--pricing,
.marketing--form {
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-inline: var(--inline-space);
}

.marketing--form {
  max-inline-size: 36rem;
}

.marketing--form .marketing__hero--compact {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(0.75rem, 2vw, 1.25rem);
}

.marketing--form .marketing__actions .btn--primary {
  inline-size: 100%;
  justify-content: center;
}

.marketing [id] {
  scroll-margin-top: var(--mkt-scroll-offset);
}

/* Hero — flat grid field, no gradients or shadows */

.marketing__hero {
  background-color: var(--mkt-bg);
  background-image:
    linear-gradient(var(--mkt-border-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--mkt-border-hairline) 1px, transparent 1px);
  background-size: 24px 24px;
  border-block-end: 2px solid var(--mkt-border);
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(4rem, 11vw, 7rem) clamp(3rem, 7vw, 4.5rem);
  padding-inline: var(--inline-space);
  position: relative;
}

/* Break out of padded marketing sub-pages only (pricing, beta) */
.marketing--pricing .marketing__hero,
.marketing--form .marketing__hero {
  margin-inline: calc(-1 * var(--inline-space));
}

.marketing__hero::after {
  background: linear-gradient(180deg, transparent 0%, var(--mkt-bg) 88%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__hero > * {
  position: relative;
  z-index: 1;
}

.marketing__hero--compact {
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.marketing__hero--compact .marketing__deck {
  margin-block-end: 0;
}

.marketing__hero-grid {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  margin-inline: auto;
  max-inline-size: var(--content-width);
}

@media (min-width: 68rem) {
  .marketing__hero-grid {
    align-items: center;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    text-align: start;
  }

  .marketing__hero-copy .marketing__actions,
  .marketing__hero-copy .marketing__specs {
    justify-content: flex-start;
  }

  .marketing__hero-copy .marketing__title {
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
    letter-spacing: -0.042em;
    line-height: 1.05;
  }
}

.marketing__kicker-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  margin-block-end: 1.15rem;
}

.marketing__kicker {
  margin-block-end: 0;
}

@media (max-width: 67.99rem) {
  .marketing__hero .marketing__title {
    font-size: clamp(2.15rem, 7.2vw, 3.25rem);
    letter-spacing: -0.038em;
    line-height: 1.06;
    overflow-wrap: normal;
    word-break: normal;
  }
}

.marketing__title {
  margin-block-end: 1.35rem;
  text-wrap: balance;
}

.marketing__hero-copy.mkt-panel {
  overflow: hidden;
}

.marketing__tagline {
  color: var(--mkt-text-secondary);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.45;
  margin-block: 0 1.15rem;
}

.marketing__deck {
  margin-block-end: 1.75rem;
}

@media (min-width: 68rem) {
  .marketing__hero-copy .marketing__deck {
    margin-inline: 0;
  }
}

.marketing__deck code {
  font-family: var(--mkt-font-mono);
  font-size: 0.88em;
}

/* Spec row — replaces pill highlights */

.marketing__specs {
  border-block-start: 1px solid var(--mkt-border-hairline);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin-block-start: 2rem;
  margin-inline: auto;
  max-inline-size: 28rem;
  padding: 0;
  text-align: start;
}

@media (min-width: 36rem) {
  .marketing__specs {
    grid-template-columns: repeat(4, 1fr);
    max-inline-size: none;
  }
}

.marketing__specs-row {
  border-block-end: 1px solid var(--mkt-border-hairline);
  padding: 0.75rem 0.5rem 0.75rem 0;
  transition: background-color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__specs-row:hover {
  background-color: oklch(52% 0.19 250 / 0.04);
}

@media (min-width: 36rem) {
  .marketing__specs-row:not(:last-child) {
    border-inline-end: 1px solid var(--mkt-border-hairline);
    padding-inline-end: 1rem;
  }

  .marketing__specs-row:not(:first-child) {
    padding-inline-start: 1rem;
  }
}

.marketing__specs-term {
  margin: 0;
  transition: color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__specs-row:hover .marketing__specs-term {
  color: var(--mkt-accent);
}

.marketing__specs-detail {
  margin: 0.2rem 0 0;
}

/* Terminal — sharp box with corner brackets */

.marketing-terminal--preview {
  box-shadow: none;
  margin-inline: auto;
  max-inline-size: 28rem;
}

.marketing-terminal--boxed {
  overflow: hidden;
  position: relative;
}

.marketing__hero-copy {
  min-inline-size: 0;
}

.marketing__hero-demo {
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
}

.marketing__demo-intro {
  margin-block-end: 1rem;
}

.marketing__demo-kicker {
  color: var(--mkt-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.marketing__demo-title {
  margin: 0 0 0.5rem;
}

.marketing__demo-deck {
  color: var(--mkt-text-secondary);
  margin: 0 0 0.25rem;
}

.marketing__demo-note {
  color: var(--mkt-text-tertiary);
  font-style: italic;
  margin: 0.65rem 0 0;
}

.marketing__contrast {
  border-block-start: 1px solid var(--mkt-border);
  isolation: isolate;
  margin-inline: calc(-1 * var(--inline-space));
  overflow: hidden;
  padding-block: var(--mkt-space-xl);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__contrast::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 40 L40 0' fill='none' stroke='%23899aa8' stroke-opacity='0.14' stroke-width='0.85'/%3E%3Cpath d='M-8 8 L32 48 M8 -8 L48 32' fill='none' stroke='%23899aa8' stroke-opacity='0.08' stroke-width='0.75'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 52%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__contrast::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1.15' fill='%23899aa8' fill-opacity='0.2'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, #000 56%, #000 100%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__contrast-inner {
  display: grid;
  gap: 1rem;
  margin-inline: auto;
  max-inline-size: var(--mkt-measure-wide);
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .marketing__contrast-inner {
    gap: 0;
    grid-template-columns: 1fr 1fr;
  }
}

.marketing__contrast-card {
  border: 1px solid var(--mkt-border);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 48rem) {
  .marketing__contrast-card--before {
    border-inline-end: none;
  }
}

.marketing__contrast-card--after {
  background: oklch(52% 0.19 250 / 0.05);
  border-color: oklch(52% 0.19 250 / 0.22);
}

.marketing__contrast-label {
  color: var(--mkt-text-tertiary);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.marketing__contrast-copy {
  margin: 0;
}

.marketing__tour {
  border-block-start: 1px solid var(--mkt-border);
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--mkt-space-2xl);
  position: relative;
}

.marketing__tour::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='4' cy='4' r='1.1' fill='%23899aa8' fill-opacity='0.22'/%3E%3Ccircle cx='18' cy='18' r='1.1' fill='%23899aa8' fill-opacity='0.16'/%3E%3Cpath d='M14 0 L28 14 L14 28 L0 14 Z' fill='none' stroke='%23899aa8' stroke-opacity='0.08' stroke-width='0.75'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(105deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__tour > * {
  position: relative;
  z-index: 1;
}

.marketing__tour .showcase {
  margin-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 2.75rem);
}

.marketing__tour .showcase--wide {
  margin-inline: auto;
}

.marketing__tour-features {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 52rem) {
  .marketing__tour-features {
    gap: clamp(2rem, 5vw, 3rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing__tour-feature--wide {
    grid-column: 1 / -1;
  }
}

.marketing__tour-feature {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 0.65rem;
  overflow: hidden;
  padding-block-end: 1.15rem;
}

.marketing__tour-feature .showcase {
  margin-block: 0 clamp(1rem, 2.5vw, 1.35rem);
}

.marketing__tour-feature .marketing__tour-title,
.marketing__tour-feature .marketing__tour-copy {
  padding-inline: clamp(1rem, 2.5vw, 1.35rem);
}

.marketing__tour-feature--wide .showcase {
  margin-inline: auto;
}

.marketing-demo-page__showcase .showcase + .showcase {
  margin-block-start: clamp(2rem, 5vw, 3rem);
}

.marketing__tour-list {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .marketing__tour-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.marketing__tour-item {
  border-block-start: 3px solid var(--mkt-accent);
  padding-block-start: 1rem;
}

.marketing__tour-title {
  margin: 0 0 0.5rem;
}

.marketing__tour-copy {
  color: var(--mkt-text-secondary);
  margin: 0;
}

.marketing__tour-foot {
  margin-block-start: 1.75rem;
}

.marketing__tour .marketing__section-head {
  margin-block-end: clamp(1.5rem, 4vw, 2.25rem);
}

.marketing__tour-lead {
  margin-block: 0.75rem 0;
  margin-inline: auto;
}

/* Panel demo — miniature real app shell (always light; isolated from OS theme) */

.marketing-demo {
  color-scheme: light;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 100%;
}

.marketing-demo__shell {
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 67% 0.01 240;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;

  --color-bg: oklch(100% 0 0);
  --color-bg-subtle: oklch(98.5% 0.002 264);
  --color-surface: oklch(96% 0.005 96);
  --color-canvas: oklch(98.5% 0.002 240);
  --color-nav-bg: oklch(100% 0 0);
  --color-text: oklch(21% 0.014 240);
  --color-text-muted: oklch(47% 0.014 240);
  --color-border: oklch(91% 0.006 240);
  --color-border-dark: oklch(91% 0.006 240);
  --color-border-darker: oklch(75% 0.01 240);
  --color-selected: oklch(96% 0.02 250);
  --color-selected-dark: oklch(88% 0.04 250);
  --color-link: oklch(52% 0.19 250);
  --color-log-bg: oklch(18% 0.01 255);
  --color-log-border: oklch(30% 0.01 255);
  --color-log-muted: oklch(60% 0.01 255);
  --btn-secondary-bg: oklch(100% 0 0);
  --btn-secondary-color: oklch(21% 0.014 240);

  background: var(--color-bg);
  block-size: 27rem;
  border: 1px solid var(--mkt-border);
  border-block-start: 3px solid var(--mkt-accent);
  color: var(--color-text);
  color-scheme: light;
  display: grid;
  grid-template-areas:
    "sidebar nav"
    "sidebar main";
  grid-template-columns: min(11.75rem, 34%) 1fr;
  grid-template-rows: auto 1fr;
  isolation: isolate;
  max-block-size: 27rem;
  min-block-size: 27rem;
  overflow: hidden;
  transition: grid-template-columns 0.45s cubic-bezier(0.34, 1.28, 0.64, 1);
}

.marketing-demo__shell--sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

.marketing-demo__shell--sidebar-collapsed .marketing-demo__sidebar {
  border-inline-end: none;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.marketing-demo__shell--sidebar-collapsed .marketing-demo__main {
  border-inline-start: none;
}

.marketing-demo .sidebar,
.marketing-demo__sidebar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: oklch(98% 0.002 240);
  block-size: 100%;
  border-inline-end-color: var(--color-border-dark);
  grid-area: sidebar;
  inline-size: 100%;
  inset: auto;
  max-block-size: none;
  position: relative;
  transform: none;
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.marketing-demo .sidebar__link {
  border-color: var(--color-border-dark);
  color: var(--color-text-muted);
}

.marketing-demo .sidebar__link--current {
  background-color: var(--color-selected);
  border-color: var(--color-border-darker);
  color: oklch(var(--lch-blue));
}

html[data-theme="dark"] .marketing-demo .sidebar__link--current,
html[data-theme="light"] .marketing-demo .sidebar__link--current {
  background-color: var(--color-selected);
  border-color: var(--color-border-darker);
  color: oklch(var(--lch-blue));
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .marketing-demo .sidebar__link--current {
    background-color: var(--color-selected);
    border-color: var(--color-border-darker);
    color: oklch(var(--lch-blue));
  }
}

@media (max-width: 100ch) {
  .marketing-demo .sidebar,
  .marketing-demo__sidebar {
    block-size: 100%;
    inline-size: 100%;
    inset: auto;
    max-block-size: none;
    position: relative;
    transform: none;
  }
}

.marketing-demo .sidebar__inner {
  gap: 1rem;
  padding: 0.85rem 0.65rem 1rem;
}

.marketing-demo .wordmark--sidebar {
  --wordmark-size: 0.95rem;
}

.marketing-demo .sidebar__account {
  font-size: 0.6875rem;
}

.marketing-demo .sidebar__link {
  cursor: default;
  font-size: 0.75rem;
  gap: 0.45rem;
  padding: 0.45em 0.55em;
  pointer-events: none;
}

.marketing-demo .sidebar__link .icon {
  block-size: 0.875rem;
  inline-size: 0.875rem;
}

.marketing-demo .sidebar__app-link {
  cursor: default;
  font-size: 0.75rem;
  pointer-events: none;
}

.marketing-demo .sidebar__app-links {
  max-block-size: none;
}

.marketing-demo__app-dot--rails {
  background: oklch(54% 0.23 255);
}

.marketing-demo__app-dot--green {
  background: oklch(65% 0.17 145);
}

.marketing-demo__drop {
  align-items: center;
  background: var(--color-bg);
  border: 1px dashed var(--color-border-darker);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  min-block-size: 5.5rem;
  padding: 0.85rem 1rem;
  text-align: center;
  transition:
    border-color var(--mkt-duration-fast) var(--mkt-ease-out),
    background-color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing-demo__drop--ready {
  background: oklch(65.59% 0.234 142.49 / 0.08);
  border-color: oklch(65.59% 0.234 142.49 / 0.45);
  border-style: solid;
}

.marketing-demo__drop-empty,
.marketing-demo__drop-ready {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  gap: 0.45rem;
  line-height: 1.35;
}

.marketing-demo__drop-ready {
  color: var(--color-text);
}

.marketing-demo__panel-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--color-nav-bg);
  border-block-end: 1px solid var(--color-border-dark);
  grid-area: nav;
  min-block-size: 2.35rem;
  padding-inline: 0.5rem;
  position: static;
}

.marketing-demo .panel-nav__heading {
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.marketing-demo .panel-nav__menu {
  --btn-border-color: transparent;
  --btn-padding: 0;
  align-items: center;
  block-size: 2rem;
  cursor: pointer;
  display: inline-flex;
  inline-size: 2rem;
  justify-content: center;
  line-height: 0;
  padding: 0;
  transition: opacity var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing-demo .panel-nav__menu .site-nav__menu-btn {
  flex-shrink: 0;
}

.marketing-demo .site-nav__menu-line {
  background: var(--color-text);
}

.marketing-demo .panel-nav__menu:hover {
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-demo__shell {
    transition: none;
  }
}

.marketing-demo__main {
  background: var(--color-canvas);
  border-inline-start: 1px solid var(--color-border-dark);
  grid-area: main;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
}

.marketing-demo__page {
  block-size: 100%;
  font-size: 0.875rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0.75rem 0.85rem;
}

.marketing-demo__back {
  font-size: 0.75rem;
  margin-block-end: 0.35rem;
  pointer-events: none;
}

.marketing-demo__page .detail-header {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.65rem;
  margin-block-end: 0;
}

.marketing-demo__page .detail-header .toolbar--deploy {
  justify-content: flex-start;
  max-inline-size: none;
}

.marketing-demo__page .dash-home__title {
  font-size: 1.05rem;
}

.marketing-demo__page .dash-home__meta {
  font-size: 0.6875rem;
}

.marketing-demo__page .project-nav {
  border-block-end-color: oklch(0% 0 0 / 0.08);
  font-size: 0.8125rem;
  gap: 0.15rem 0.85rem;
  margin-block: 0.25rem 0.65rem;
}

.marketing-demo__tabs .project-nav__tab {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  padding-inline: 0;
}

.marketing-demo__tabs .project-nav__tab--current {
  border-block-end-color: oklch(var(--lch-blue));
  color: var(--color-text);
}

.marketing-demo .meta-chip {
  background-color: var(--color-surface);
  border-color: var(--color-border-dark);
  color: var(--color-text-muted);
}

.marketing-demo .wordmark {
  color: var(--color-text);
}

.marketing-demo .wordmark__tld {
  color: var(--color-text-muted);
}

.marketing-demo .page__back {
  color: var(--color-text-muted);
}

.marketing-demo .detail-section__desc,
.marketing-demo .config-row__meta,
.marketing-demo .dash-home__meta {
  color: var(--color-text-muted);
}

.marketing-demo .config-row {
  border-block-start-color: var(--color-border);
}

.marketing-demo .log-viewer {
  background: var(--color-log-bg);
  border: 1px solid var(--color-log-border);
  color: var(--color-log-muted);
}

.marketing-demo .btn--primary {
  --btn-background: oklch(var(--lch-blue));
  --btn-border-color: oklch(var(--lch-blue));
  --btn-border-radius: 2em;
  --btn-color: oklch(100% 0 0);
  filter: none;
}

.marketing-demo .btn--primary:hover {
  filter: brightness(1.08);
}

.marketing-demo .btn:not(.btn--primary) {
  --btn-background: var(--btn-secondary-bg);
  --btn-border-color: var(--color-border-darker);
  --btn-border-radius: 2em;
  --btn-color: var(--btn-secondary-color);
  filter: none;
}

.marketing-demo__form-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.marketing-demo__form-row .input {
  font-size: 0.75rem;
  max-inline-size: 7rem;
}

.marketing-demo__toolbar {
  margin-block-end: 0.65rem;
}

.marketing-demo__page .detail-section {
  margin-block-end: 0.85rem;
}

.marketing-demo__page .dash-section__title {
  font-size: 0.875rem;
}

.marketing-demo__page .detail-section__desc {
  font-size: 0.75rem;
}

.marketing-demo__timeline {
  margin-block-start: 0.35rem;
}

.marketing-demo__page .dash-timeline__time {
  font-size: 0.6875rem;
}

.marketing-demo__log-viewer {
  font-size: 0.625rem;
  max-block-size: 8.5rem;
}

.marketing-demo__page .config-row__title {
  font-size: 0.75rem;
}

.marketing-demo__page .config-row__meta {
  font-size: 0.6875rem;
}

.marketing-demo__page .toolbar--deploy .btn {
  font-size: 0.6875rem;
}

@media (min-width: 68rem) {
  .marketing-demo__shell {
    grid-template-columns: min(11rem, 30%) 1fr;
  }
}

@media (max-width: 40rem) {
  .marketing-demo__shell {
    grid-template-columns: 0 1fr;
    position: relative;
  }

  .marketing-demo__shell:not(.marketing-demo__shell--sidebar-collapsed) .marketing-demo__sidebar {
    block-size: 100%;
    box-shadow: 0.35rem 0 1.5rem oklch(0% 0 0 / 0.12);
    inline-size: min(12rem, 78%);
    inset-block: 0;
    inset-inline-start: 0;
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    visibility: visible;
    z-index: 4;
  }

  .marketing-demo__page {
    padding-inline: 0.65rem;
  }

  .marketing-demo__page .detail-header__main,
  .marketing-demo__page .config-row__main,
  .marketing-demo__page .dash-home__actions {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .marketing-demo .config-row__meta,
  .marketing-demo .dash-home__meta {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .marketing-demo .config-row__meta code,
  .marketing-demo .dash-home__meta code {
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .marketing-demo__page .project-nav {
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
  }
}

/* Marketing motion — quick fade-in on hero only */

@keyframes mkt-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marketing__hero-copy {
    animation: mkt-fade-in 0.28s var(--mkt-ease-out) both;
  }

  .marketing__hero-demo {
    animation: mkt-fade-in 0.32s var(--mkt-ease-out) 0.06s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing__hero-copy,
  .marketing__hero-demo {
    animation: none;
  }
}

.app.app--guest:has(.main--marketing) .site-footer a {
  position: relative;
  text-decoration: none;
  transition: color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.app.app--guest:has(.main--marketing) .site-footer a::after {
  background: var(--mkt-accent);
  block-size: 1px;
  content: "";
  inset-block-end: -0.05em;
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mkt-duration) var(--mkt-ease-spring);
}

.app.app--guest:has(.main--marketing) .site-footer a:hover::after,
.app.app--guest:has(.main--marketing) .site-footer a:focus-visible::after {
  transform: scaleX(1);
}

.marketing-demo__scene {
  opacity: 0;
  transition: opacity 0.18s var(--mkt-ease-out);
}

.marketing-demo__scene.is-visible {
  opacity: 1;
}

.marketing-demo__tabs .project-nav__tab {
  transition:
    background-color var(--mkt-duration-fast) var(--mkt-ease-out),
    border-color var(--mkt-duration-fast) var(--mkt-ease-out),
    color var(--mkt-duration-fast) var(--mkt-ease-out);
}

/* Relief strip — green payoff + struck-through pain */

.marketing__relief {
  background-color: var(--mkt-bg-subtle);
  background-image:
    linear-gradient(var(--mkt-border-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--mkt-border-hairline) 1px, transparent 1px);
  background-size: 24px 24px;
  border-block: 1px solid var(--mkt-border);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 3rem);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__relief .marketing__section-head {
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.marketing__relief-list {
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  grid-template-columns: 1fr;
  list-style: none;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding: 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .marketing__relief-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.marketing__relief-item {
  min-inline-size: 0;
}

.marketing__relief-card {
  background: var(--mkt-bg);
  border: 1px solid var(--mkt-border);
  border-inline-start: 3px solid oklch(48% 0.16 145);
  box-shadow:
    0 0 0 1px oklch(17% 0.01 240 / 0.03),
    0 0.25rem 0.75rem -0.25rem oklch(17% 0.01 240 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-block-size: 100%;
}

.marketing__relief-after {
  background: oklch(97.5% 0.035 145);
  color: oklch(36% 0.14 145);
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  margin: 0;
  padding: clamp(0.85rem, 2vw, 1.05rem) clamp(0.85rem, 2.5vw, 1.1rem);
}

.marketing__relief-payoff {
  align-items: center;
  display: inline-flex;
  gap: 0.42em;
  max-inline-size: 100%;
}

.marketing__relief-check {
  block-size: 0.95em;
  color: oklch(42% 0.17 145);
  display: block;
  flex: 0 0 auto;
  inline-size: 1.9em;
  overflow: visible;
}

.marketing__relief-label {
  font-family: var(--mkt-font-mono);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  min-inline-size: 0;
  text-transform: uppercase;
}

.marketing__relief-before {
  border-block-start: 1px dashed var(--mkt-border-hairline);
  color: var(--mkt-text-tertiary);
  flex: 1;
  font-size: clamp(0.875rem, 1.6vw, 0.9875rem);
  line-height: 1.45;
  margin: 0;
  padding: 0.85rem 1rem 1.05rem;
  text-decoration: line-through;
  text-decoration-color: oklch(62% 0.06 31 / 0.55);
  text-decoration-thickness: 1.5px;
}

/* Accessory engine chips */

.marketing__engines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin-block: 1.25rem 0;
  padding: 0;
}

.marketing__engines-chip {
  background: var(--mkt-bg-subtle);
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 980px;
  font-family: var(--mkt-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  transition:
    background-color var(--mkt-duration-fast) var(--mkt-ease-out),
    border-color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__engines-chip:hover {
  background-color: var(--mkt-bg-elevated);
  border-color: var(--mkt-border);
}

.marketing__engines-chip[data-engine="postgresql"] {
  border-block-start: 2px solid oklch(52% 0.14 250);
}

.marketing__engines-chip[data-engine="mysql"] {
  border-block-start: 2px solid oklch(52% 0.12 145);
}

.marketing__engines-chip[data-engine="redis"] {
  border-block-start: 2px solid oklch(52% 0.16 31);
}

/* Audience — who it's for */

.marketing__audience-title {
  margin-block: 0 0.75rem;
  margin-inline: auto;
  max-inline-size: 24rem;
}

.marketing__audience-deck {
  margin-block: 0;
  margin-inline: auto;
}

.marketing__audience-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .marketing__audience-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.5rem;
  }

  .marketing__audience-item:not(:nth-child(3n)) {
    border-inline-end: 1px solid var(--mkt-border-hairline);
    padding-inline-end: 1.25rem;
  }

  .marketing__audience-item:not(:nth-child(3n + 1)) {
    padding-inline-start: 1.25rem;
  }

  .marketing__audience-item:nth-child(n + 4) {
    border-block-start: 1px solid var(--mkt-border-hairline);
    padding-block-start: 1.5rem;
  }
}

.marketing__audience-item {
  border-block-end: 1px solid var(--mkt-border-hairline);
  padding-block: 1rem;
}

@media (min-width: 48rem) {
  .marketing__audience-item {
    border-block-end: none;
    padding-block: 0;
  }
}

.marketing__audience-label {
  display: block;
  margin-block-end: 0.35rem;
  transition: color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__audience-item:hover .marketing__audience-label {
  color: var(--mkt-accent);
}

.marketing__audience-copy {
  margin: 0;
}

/* Team letter */

.marketing__letter {
  background-color: var(--mkt-bg-subtle);
  border-block-start: 1px solid var(--mkt-border);
  isolation: isolate;
  margin-inline: calc(-1 * var(--inline-space));
  overflow: hidden;
  padding-block: var(--mkt-space-2xl);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__letter--lead {
  margin-block-start: 0;
}

.marketing__letter-email {
  color: var(--mkt-accent);
  font-style: normal;
  text-decoration: none;
}

.marketing__letter-email:hover {
  text-decoration: underline;
}

.marketing__inline-link {
  color: var(--mkt-accent);
  font-weight: 600;
  text-decoration: none;
}

.marketing__inline-link:hover {
  text-decoration: underline;
}

.marketing__trust {
  border-block-start: 1px solid var(--mkt-border);
  isolation: isolate;
  margin-block: var(--mkt-space-xl);
  margin-inline: calc(-1 * var(--inline-space));
  overflow: hidden;
  padding-block: var(--mkt-space-2xl);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__trust::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 8 H32 M8 0 V16 M24 0 V16' fill='none' stroke='%23899aa8' stroke-opacity='0.12' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: 32px 16px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  opacity: 0.8;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__trust-head {
  margin-block-end: clamp(1.75rem, 4vw, 2.25rem);
  position: relative;
  z-index: 1;
}

.marketing__trust-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.35rem);
  margin-inline: auto;
  max-inline-size: var(--content-width);
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .marketing__trust-grid {
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.marketing__trust-card {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-block-start: 3px solid var(--mkt-accent);
  border-radius: 0.65rem;
  padding: clamp(1.25rem, 3vw, 1.5rem);
  transition:
    border-color var(--mkt-duration-fast) var(--mkt-ease-out),
    box-shadow var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__trust-card:hover {
  border-color: var(--mkt-border);
  box-shadow: 0 12px 28px -18px oklch(17% 0.01 240 / 0.35);
}

.marketing__trust-title {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin-block: 0 0.65rem;
}

.mkt-check {
  color: var(--mkt-accent);
  display: block;
  flex: 0 0 auto;
  height: 1.15rem;
  width: 1.35rem;
}

.mkt-check svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.marketing__trust-copy {
  color: var(--mkt-text-secondary);
  margin: 0;
}

.marketing__letter-inner {
  background-color: var(--mkt-bg);
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.7rem - 1px),
    oklch(91% 0.006 240 / 0.55) calc(1.7rem - 1px),
    oklch(91% 0.006 240 / 0.55) 1.7rem
  );
  background-position: 0 3.25rem;
  background-size: 100% 1.7rem;
  isolation: isolate;
  margin-inline: auto;
  max-inline-size: var(--mkt-measure);
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}

.marketing__letter-kicker {
  margin-block-end: 0.85rem;
}

.marketing__letter-title {
  margin-block: 0 1.15rem;
}

.marketing__letter-body {
  max-inline-size: 38rem;
}

.marketing__letter-signoff {
  color: var(--mkt-text-tertiary);
  font-style: italic;
  margin-block: 1.5rem 0;
}

.marketing__steps {
  counter-reset: mkt-step;
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0 0 1.25rem;
  max-inline-size: 38rem;
  padding: 0;
}

.marketing__steps li {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-inline-start: 3px solid var(--mkt-accent);
  counter-increment: mkt-step;
  line-height: 1.5;
  padding: 0.9rem 1rem 0.9rem 2.85rem;
  position: relative;
}

.marketing__steps li::before {
  align-items: center;
  color: var(--mkt-accent);
  content: counter(mkt-step);
  display: flex;
  font-family: var(--mkt-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  inset-block: 0;
  inset-inline-start: 0;
  justify-content: center;
  position: absolute;
  width: 2.25rem;
}

/* Body — numbered chapters */

.marketing__body {
  isolation: isolate;
  margin-inline: auto;
  max-inline-size: var(--mkt-measure-wide);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__body--wide {
  max-inline-size: var(--content-width);
}

.marketing__chapter {
  border-block-start: 1px solid var(--mkt-border);
  display: grid;
  column-gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: min(5.5rem, 18vw) 1fr;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--mkt-space-2xl);
  position: relative;
  text-align: start;
}

.marketing__chapter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 12 H24 M12 0 V24' fill='none' stroke='%23899aa8' stroke-opacity='0.11' stroke-width='0.7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='none' stroke='%23899aa8' stroke-opacity='0.08' stroke-width='0.65'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(165deg, transparent 5%, #000 40%, #000 70%, transparent 95%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__chapter > * {
  position: relative;
  z-index: 1;
}

.marketing__body > .marketing__chapter--highlight {
  margin-inline: calc(-1 * var(--inline-space));
  padding-inline: var(--inline-space);
}

.marketing__chapter--highlight {
  background: oklch(52% 0.19 250 / 0.04);
  border-inline-start: 4px solid var(--mkt-accent);
  padding-inline-start: calc(var(--inline-space) + 0.25rem);
}

.marketing__chapter--cta .marketing__chapter-cta {
  margin-block-start: 1rem;
}

.marketing__chapter--form {
  border-block-start: none;
  display: block;
  padding-block-start: 0;
}

.marketing__chapter-head {
  display: contents;
}

.marketing__chapter-num {
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  margin-block-start: 0.15em;
}

.marketing__chapter-num:not(.mkt-chapter-index) {
  align-self: center;
  color: var(--mkt-accent);
  font-family: var(--mkt-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.marketing__chapter-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-inline-size: 32rem;
}

.marketing__chapter-body {
  grid-column: 2;
  grid-row: 2;
  margin-block-start: 1.25rem;
}

@media (max-width: 35.99rem) {
  .marketing__chapter {
    grid-template-columns: 1fr;
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }

  .marketing__chapter-num.mkt-chapter-index {
    font-size: clamp(2.25rem, 14vw, 3.25rem);
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0.35rem;
  }

  .marketing__chapter-num:not(.mkt-chapter-index) {
    writing-mode: horizontal-tb;
  }

  .marketing__chapter-title {
    grid-column: 1;
    grid-row: 2;
    max-inline-size: none;
  }

  .marketing__chapter-body {
    grid-column: 1;
    grid-row: 3;
    margin-block-start: 1rem;
  }
}

.marketing__chapter-body--flush {
  margin-inline: calc(-1 * var(--inline-space));
  max-inline-size: none;
  overflow-x: auto;
}

.marketing__note {
  color: var(--mkt-text-tertiary);
  font-size: 0.8125rem;
  margin-block-start: 1rem;
}

.marketing__note--left {
  margin-block-start: 1.25rem;
  text-align: start;
}

.marketing__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  justify-content: center;
}

.marketing__actions--tight {
  margin-block-start: 1.5rem;
}

.marketing__actions--start {
  justify-content: flex-start;
}

.marketing__cta-block {
  margin-block-end: 1.75rem;
}

.marketing__trial {
  background: var(--mkt-surface-raised, #fff);
  border: 1px solid var(--mkt-border, rgba(0, 0, 0, 0.08));
  border-radius: 0.65rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  color: var(--mkt-text);
  margin-inline: auto;
  max-width: 26rem;
  padding: 1.35rem 1.5rem 1.15rem;
  text-align: start;
  width: 100%;
}

.marketing__hero-copy--centered .marketing__trial {
  margin-inline: auto;
}

.marketing__trial--compact {
  max-width: 28rem;
  padding: 1.35rem 1.5rem 1.15rem;
}

.marketing__trial--on-dark {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.marketing__trial-pill {
  background: var(--mkt-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  left: 50%;
  line-height: 1.2;
  margin: 0;
  padding: 0.4rem 0.95rem;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 3;
}

.marketing__hero .marketing__trial,
.marketing__trial--compact {
  margin-block-start: 1rem;
}

.main--marketing .marketing__trial-lead,
.main--marketing .marketing__trial-instruction {
  text-align: center;
}

.marketing__trial-instruction {
  margin: 0 0 1rem;
}

.main--marketing .marketing__trial-instruction {
  font-weight: 700;
}

.marketing__trial-form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.marketing__trial-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-block-end: 0.35rem;
  text-transform: uppercase;
}

.marketing__trial-input {
  --input-background: var(--mkt-bg-elevated);
  background-color: var(--mkt-bg-elevated);
  border: 2px solid oklch(72% 0.012 240);
  color: var(--mkt-text);
  color-scheme: light;
  font-size: 1.0625rem;
  min-height: 2.75rem;
  width: 100%;
}

.marketing__trial-input::placeholder {
  color: var(--mkt-text-tertiary);
  opacity: 1;
}

.marketing__trial-input:focus {
  border-color: var(--mkt-accent);
  box-shadow: 0 0 0 0.15em oklch(88% 0.04 250);
}

.marketing__trial-input:-webkit-autofill {
  -webkit-text-fill-color: var(--mkt-text);
  box-shadow: 0 0 0 1000px var(--mkt-bg-elevated) inset;
  caret-color: var(--mkt-text);
}

.marketing__trial-submit {
  font-size: 1.0625rem;
  font-weight: 700;
  min-height: 2.85rem;
}

.marketing__trial-fine {
  color: var(--mkt-text-secondary);
  margin: 0.85rem 0 0;
  text-align: center;
}

.marketing__trial--on-dark .marketing__trial-fine {
  color: rgba(0, 0, 0, 0.55);
}

.marketing__trial--auth {
  margin-block: 0;
  max-width: 26rem;
}

.marketing__chapter-cta {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-block-start: 1.25rem;
}

.marketing--form .marketing__trial--auth .marketing__signup-reassurance {
  margin-block-end: 1rem;
}

.marketing--form .marketing__auth-form {
  gap: 0.85rem;
}

.marketing--form .marketing__actions--auth {
  align-items: stretch;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 0.25rem;
}

.marketing--form .marketing__auth-secondary {
  align-self: center;
  font-size: 0.9375rem;
}

.marketing--form .input-with-action .marketing__trial-input {
  padding-inline-end: 4.25rem;
}

.marketing__cta-strip-form {
  margin-block-start: 1.25rem;
  max-width: 28rem;
}

.marketing__signup-reassurance {
  color: var(--mkt-text-secondary);
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.marketing__signup-reassurance li {
  padding-inline-start: 1.55rem;
  position: relative;
}

.marketing__signup-reassurance li::before {
  background-color: var(--mkt-accent);
  content: "";
  height: 0.95em;
  left: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 44'%3E%3Cpath d='M5 24C10 30 15 37 20 39' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M16 37C26 26 36 14 48 6' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  top: 0.12em;
  width: 1.1em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 44'%3E%3Cpath d='M5 24C10 30 15 37 20 39' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M16 37C26 26 36 14 48 6' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.marketing__cta-hint {
  color: var(--mkt-text-secondary);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  margin-block-start: 0.85rem;
  text-align: center;
}

@media (min-width: 68rem) {
  .marketing__hero-copy .marketing__cta-hint {
    text-align: start;
  }
}

.marketing__link {
  color: var(--mkt-accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  text-decoration: none;
  transition: color var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__link::after {
  background: currentColor;
  block-size: 1px;
  content: "";
  inset-block-end: -0.1em;
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mkt-duration) var(--mkt-ease-spring);
}

.marketing__link:hover,
.marketing__link:focus-visible {
  color: var(--mkt-accent-hover);
  text-decoration: none;
}

.marketing__link:hover::after,
.marketing__link:focus-visible::after {
  transform: scaleX(1);
}

.marketing__link--on-dark {
  color: oklch(78% 0.12 250);
}

.marketing__btn--on-dark {
  --btn-background: oklch(99% 0 0);
  --btn-border-color: oklch(99% 0 0);
  --btn-color: var(--mkt-ink);
}

.marketing__prose p {
  margin: 0;
}

.marketing__prose p + p {
  margin-block-start: 1.15rem;
}

.marketing__pullquote {
  border-inline-start: 4px solid var(--mkt-accent);
  font-family: var(--mkt-font-prose);
  font-style: italic;
  margin-block-start: 1.75rem;
  padding-inline-start: 1.15rem;
}

/* Feature columns — divided, no card boxes */

.marketing__features {
  border-block-start: 1px solid var(--mkt-border-hairline);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  list-style: none;
  margin-block-start: 1.5rem;
  padding: 0;
}

@media (min-width: 36rem) {
  .marketing__features {
    grid-template-columns: repeat(3, 1fr);
  }

  .marketing__features-item:not(:last-child) {
    border-inline-end: 1px solid var(--mkt-border-hairline);
  }
}

.marketing__features-item {
  isolation: isolate;
  overflow: hidden;
  padding: 1rem 0;
  position: relative;
}

.marketing__features-item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='2' fill='none' stroke='%23899aa8' stroke-opacity='0.12' stroke-width='0.7'/%3E%3C/svg%3E");
  background-position: 0 0.35rem;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__features-item > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 36rem) {
  .marketing__features-item {
    padding: 1rem 1.25rem 0 0;
  }

  .marketing__features-item:not(:first-child) {
    padding-inline-start: 1.25rem;
  }
}

.marketing__features-label {
  display: block;
  margin-block-end: 0.25rem;
}

.marketing__features-copy {
  color: var(--mkt-text-tertiary);
  display: block;
}

.marketing__code {
  background: var(--mkt-bg-subtle);
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 0;
  color: var(--mkt-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-block-start: 1.5rem;
  overflow-x: auto;
  padding: 1rem 1.15rem;
  text-align: start;
  white-space: pre-wrap;
}

.marketing__list {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing__list-item {
  isolation: isolate;
  overflow: hidden;
  padding: 0.15rem 0;
  position: relative;
}

.marketing__list-item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0 16 H32 M16 0 V32' fill='none' stroke='%23899aa8' stroke-opacity='0.09' stroke-width='0.65'/%3E%3C/svg%3E");
  background-size: 32px 32px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 62%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__list-item > * {
  position: relative;
  z-index: 1;
}

.marketing__list--tools {
  gap: 1.25rem;
}

.marketing__list-label {
  margin-block-end: 0.35rem;
}

.marketing__list-copy {
  margin: 0;
}

.marketing__list--cards {
  gap: 1rem;
}

@media (min-width: 48rem) {
  .marketing__list--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.marketing__list--cards .marketing__list-item {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-block-start: 3px solid oklch(52% 0.19 250 / 0.35);
  border-radius: 0.65rem;
  padding: 1.2rem 1.35rem;
}

.marketing__list--cards .marketing__list-item::before {
  display: none;
}

.marketing__list--cards .marketing__list-item:hover {
  border-block-start-color: var(--mkt-accent);
  border-color: var(--mkt-border);
}

.marketing__prompts {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing__prompts-item {
  border-block-end: 1px solid var(--mkt-border-hairline);
  color: var(--mkt-text-secondary);
  font-family: var(--mkt-font-mono);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.5;
  padding-block: 0.85rem;
}

.marketing__form {
  margin-block-start: 0;
  max-inline-size: none;
}

.marketing--form .form {
  gap: 1.15rem;
  max-inline-size: none;
}

.signup-steps__progress {
  margin: 0;
}

.signup-steps__error {
  color: oklch(51% 0.2 31);
  font-size: 0.875rem;
  margin: 0;
}

.signup-steps__back,
.signup-steps__team-toggle {
  background: none;
  border: 0;
  color: var(--mkt-text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-align: start;
}

.signup-steps__back:hover,
.signup-steps__team-toggle:hover {
  color: var(--mkt-text);
}

.signup-steps--ready .marketing__actions {
  align-items: stretch;
  flex-direction: column;
}

.signup-steps--ready .signup-steps__back {
  align-self: flex-start;
}

.marketing--form .form__label {
  color: var(--mkt-text-secondary);
  font-family: var(--mkt-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketing--form .input {
  --input-background: var(--mkt-bg-elevated);
  --hover-size: 2px;
  --hover-color: oklch(52% 0.19 250 / 0.2);

  background-color: var(--mkt-bg-elevated);
  border-color: var(--mkt-border);
  border-radius: 0;
  color: var(--mkt-text);
}

.marketing--form .input::placeholder {
  color: var(--mkt-text-tertiary);
}

.marketing--form .input:focus {
  border-color: var(--mkt-accent);
  box-shadow: 0 0 0 2px oklch(52% 0.19 250 / 0.15);
}

.marketing--form .input--readonly,
.marketing--form .input[readonly] {
  background-color: var(--mkt-bg-subtle);
  color: var(--mkt-text-secondary);
  cursor: default;
}

.marketing--form .form__errors {
  background: oklch(51% 0.2 31 / 0.06);
  border-inline-start: 3px solid oklch(51% 0.2 31);
  color: var(--mkt-text);
  padding: 0.85rem 1rem;
}

.marketing--form .form__errors-title {
  font-size: 0.875rem;
}

.marketing--form .form__errors-list {
  color: var(--mkt-text-secondary);
  font-size: 0.8125rem;
}

.main--marketing > .flash {
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 36rem;
  padding-block: 1rem 0;
  padding-inline: var(--inline-space);
  width: 100%;
}

.main--marketing > .flash .notice {
  backdrop-filter: none;
  background: var(--mkt-bg-elevated);
  border-color: var(--mkt-border);
  border-radius: 0;
  box-shadow: none;
  margin-inline: 0;
}

.main--marketing > .flash .notice--error {
  background: oklch(51% 0.2 31 / 0.06);
  border-color: oklch(51% 0.2 31 / 0.35);
  border-inline-start-width: 3px;
}

.main--marketing > .flash .notice--success {
  background: oklch(52% 0.15 145 / 0.08);
  border-color: oklch(52% 0.15 145 / 0.35);
  border-inline-start-width: 3px;
}

.marketing--form .beta-success__url {
  margin-block-end: 1.25rem;
}

.marketing--form .beta-success__url .code-block {
  background-color: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border);
  border-radius: 0;
  color: var(--mkt-text);
  font-family: var(--mkt-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 0.85rem 1rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.marketing--form .beta-success__url .toolbar {
  margin-block-start: 0.75rem;
}

.marketing--form .auth__oauth {
  margin-block-end: 1.25rem;
}

.marketing--form .auth__divider {
  color: var(--mkt-text-tertiary);
  font-size: 0.8125rem;
  margin-block: 1.25rem;
}

.marketing--form .auth__divider span {
  background-color: var(--mkt-bg);
}

.marketing--form .auth__divider::before {
  background-color: var(--mkt-border-hairline);
}

.marketing--form .btn--oauth {
  background-color: var(--mkt-bg-elevated);
  border-color: var(--mkt-border);
  color: var(--mkt-text);
  inline-size: 100%;
  justify-content: center;
}

.marketing--form .btn--oauth:hover {
  background-color: var(--mkt-bg-subtle);
}

.marketing__form-footnote {
  border-block-start: 1px solid var(--mkt-border-hairline);
  color: var(--mkt-text-secondary);
  margin-block: 1.25rem 0 0;
  padding-block-start: 1rem;
  text-align: center;
}

/* Dark CTA strip — full bleed, flat */

.marketing__body > .marketing__cta-strip {
  margin-inline: calc(-1 * var(--inline-space));
}

.marketing__cta-strip {
  background: var(--mkt-ink);
  border-block-start: 4px solid var(--mkt-accent);
  color: oklch(98% 0 0);
  isolation: isolate;
  margin-block-start: var(--mkt-space-xl);
  overflow: hidden;
  padding: clamp(3rem, 7vw, 4.5rem) var(--inline-space);
  position: relative;
  text-align: start;
  transition: border-color var(--mkt-duration-slow) var(--mkt-ease-out);
}

.marketing__cta-strip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M-8 16 L40 64 M16 -8 L64 40' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'/%3E%3Cpath d='M-8 40 L16 64 M40 -8 L64 16' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 90% 80% at 30% 50%, #000 10%, transparent 70%);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .marketing__cta-strip:hover {
    border-block-start-color: oklch(58% 0.2 250);
  }
}

.marketing__cta-strip-inner {
  margin-inline: auto;
  max-inline-size: var(--mkt-measure);
  position: relative;
  z-index: 1;
}

.marketing__cta-title {
  margin-block-end: 1rem;
  max-inline-size: 24rem;
}

.marketing__cta-strip-actions {
  align-items: stretch;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
  max-inline-size: 24rem;
}

.marketing__cta-strip-actions .marketing__auth-secondary {
  align-self: center;
  color: oklch(78% 0.12 250);
}

/* Pricing on marketing pages */

.marketing--pricing .marketing__hero-copy--centered {
  margin-inline: auto;
  text-align: center;
}

.marketing--pricing .pricing__plans {
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-block: 0 clamp(1.5rem, 4vw, 2.5rem);
  padding-inline: var(--inline-space);
}

.marketing--pricing .pricing__plan {
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 1.35rem;
}

.marketing--pricing .pricing__plan--featured {
  border-color: var(--mkt-accent);
  border-width: 2px;
  box-shadow: none;
  transform: none;
}

.marketing--pricing .pricing__plan-name {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.marketing--pricing .pricing__plan-amount {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.marketing--pricing .pricing__plan-desc {
  font-size: 1rem;
  line-height: 1.55;
}

.marketing--pricing .pricing__plan-badge {
  background: transparent;
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 0;
  color: var(--mkt-text-secondary);
}

.marketing--pricing .pricing__plan--featured .pricing__plan-badge {
  background: transparent;
  border-color: var(--mkt-accent);
  color: var(--mkt-accent);
}

.marketing--pricing .pricing__compare {
  background: none;
  border: none;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-block: 0;
  padding-inline: 0;
}

.marketing--pricing .pricing__compare-title {
  display: none;
}

.marketing--pricing .pricing__compare-scroll {
  margin-inline: 0;
  overflow-x: auto;
}

.marketing--pricing .pricing__compare-table {
  border-collapse: collapse;
  inline-size: 100%;
}

.marketing--pricing .pricing__compare-table th,
.marketing--pricing .pricing__compare-table td {
  border-block-end: 1px solid var(--mkt-border-hairline);
}

.marketing--pricing .pricing__close {
  display: none;
}

.marketing--pricing .pricing__included {
  display: none;
}

/* Homepage — centered hero + extra persuasion sections */

.marketing__hero-copy--centered {
  margin-inline: auto;
  max-inline-size: 42rem;
  text-align: center;
}

.marketing__hero-copy--centered .marketing__actions,
.marketing__hero-copy--centered .marketing__tagline,
.marketing__hero-copy--centered .marketing__cta-hint {
  margin-inline: auto;
}

.marketing__hero-copy--centered .marketing__actions {
  justify-content: center;
}

.marketing__hero-copy--centered .marketing__cta-hint {
  text-align: center;
}

.marketing__hero-copy--centered .marketing__cta-block {
  margin-block: 0.15rem 0;
}

.marketing__hero-deck {
  margin-block: clamp(2.25rem, 6vw, 3.25rem);
  margin-inline: auto;
  max-inline-size: min(74em, 100%);
  padding-inline: var(--inline-space);
  width: 100%;
}

.marketing__hero-deck .showcase--deck {
  margin-block: 0;
}

.marketing__hero-copy--cta {
  margin-block-start: clamp(1.5rem, 4vw, 2.25rem);
  max-inline-size: 42rem;
}

.marketing__hero-demo-teaser {
  border-block-start: 1px solid var(--mkt-border-hairline);
  color: var(--mkt-text-secondary);
  margin-block-start: 1.75rem;
  padding-block-start: 1.25rem;
}

/* Product screenshots (SQ1-style window frames) */

.showcase {
  --showcase-ratio: 16 / 10;
  --showcase-width: 58em;
  --showcase-radius: 0.65rem;
  --showcase-edge: var(--mkt-border);
  --showcase-mat: var(--mkt-bg-elevated);
  --showcase-shadow: oklch(17% 0.01 240 / 0.22);
  isolation: isolate;
  margin-block: clamp(2rem, 5vw, 2.75rem) 0;
  margin-inline: auto;
  max-inline-size: min(var(--showcase-width), 100%);
  position: relative;
  width: min(var(--showcase-width), 100%);
}

.showcase::before {
  background: radial-gradient(ellipse 72% 58% at 50% 42%, oklch(52% 0.19 250 / 0.14), transparent 72%);
  content: "";
  inset: -14% -10%;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.showcase--deck::before {
  background: radial-gradient(ellipse 90% 65% at 50% 45%, oklch(52% 0.19 250 / 0.1), transparent 75%);
  inset: -8% -4%;
}

.showcase__frame {
  aspect-ratio: var(--showcase-ratio);
  background-color: var(--showcase-mat);
  border: 1px solid var(--showcase-edge);
  border-radius: var(--showcase-radius);
  box-shadow: 0 24px 60px -30px var(--showcase-shadow);
  display: block;
  overflow: hidden;
}

.showcase__shot {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.showcase__caption {
  color: var(--mkt-text-tertiary);
  margin-block-start: 0.85em;
  text-align: center;
}

.showcase--wide {
  --showcase-width: 72em;
}

.showcase--deck {
  --showcase-deck-lap: 2.5%;
  --showcase-width: 74em;
}

.showcase__deck {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .showcase__deck {
    align-items: center;
    gap: 0;
    grid-template-columns: 1fr 1.55fr 1fr;
  }
}

.showcase__frame--lead {
  position: relative;
  z-index: 1;
}

@media (min-width: 60rem) {
  .showcase__frame--lead {
    box-shadow: 0 32px 72px -32px var(--showcase-shadow);
    margin-inline: calc(-1 * var(--showcase-deck-lap));
  }
}

.showcase__frame--aside {
  --showcase-radius: 0.5rem;
  display: none;
}

@media (min-width: 60rem) {
  .showcase__frame--aside {
    display: block;
  }
}

.marketing-demo-page__showcase {
  isolation: isolate;
  margin-inline: auto;
  max-inline-size: var(--content-width);
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3rem);
  padding-inline: var(--inline-space);
  position: relative;
  text-align: center;
}

.marketing-demo-page__showcase::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 18 Q12 6 24 18 T48 18' fill='none' stroke='%23899aa8' stroke-opacity='0.14' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 48px 24px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing-demo-page__showcase > * {
  position: relative;
  z-index: 1;
}

.marketing-demo-page__showcase-note {
  color: var(--mkt-text-secondary);
  margin-block-start: 1rem;
  margin-inline: auto;
  max-inline-size: 32rem;
}

/* Section textures — hero + relief keep the 24px line grid; SVG overlays sit on ::before/::after. */

.marketing__scatter {
  background-color: var(--mkt-bg-band);
  border-block: 1px solid var(--mkt-border-hairline);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  position: relative;
}

.marketing__scatter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M-6 6 L30 42 M6 -6 L42 30' fill='none' stroke='%23899aa8' stroke-opacity='0.22' stroke-width='1'/%3E%3Cpath d='M-6 30 L30 -6 M6 42 L42 6' fill='none' stroke='%23899aa8' stroke-opacity='0.14' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 36px 36px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__scatter-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 2.75rem);
  margin-inline: auto;
  max-inline-size: var(--content-width);
  padding-inline: var(--inline-space);
  position: relative;
  z-index: 1;
}

.marketing__scatter-bridge {
  margin: 0;
}

.marketing__scatter-deck {
  margin-block: 0.85rem 0;
  margin-inline: auto;
}

.marketing__scatter-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.25rem);
}

@media (min-width: 56rem) {
  .marketing__scatter-grid {
    gap: 0;
    grid-template-columns: 1fr 1fr;
  }
}

.marketing__scatter-card {
  background: var(--mkt-bg);
  border: 1px solid var(--mkt-border);
  padding: clamp(1.25rem, 3vw, 1.65rem);
}

@media (min-width: 56rem) {
  .marketing__scatter-card--before {
    border-inline-end: none;
  }
}

.marketing__scatter-card--after {
  background: oklch(52% 0.19 250 / 0.05);
  border-color: oklch(52% 0.19 250 / 0.22);
}

.marketing__scatter-kicker {
  color: var(--mkt-text-tertiary);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-block-end: 0.5rem;
  text-transform: uppercase;
}

.marketing__scatter-title {
  margin-block: 0 1rem;
}

.marketing__scatter-list {
  color: var(--mkt-text-secondary);
  display: grid;
  gap: 0.75rem;
  line-height: 1.5;
  margin: 0;
  padding-inline-start: 1.15rem;
}

.marketing__manifesto {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__manifesto::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 1 L43 22 L22 43 L1 22 Z' fill='none' stroke='%23899aa8' stroke-opacity='0.2' stroke-width='0.85'/%3E%3Ccircle cx='22' cy='22' r='1.25' fill='%23899aa8' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-position: 50% 35%;
  background-size: 44px 44px;
  content: "";
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__manifesto-inner {
  margin-inline: auto;
  max-inline-size: 40rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

.marketing__manifesto-title {
  margin-block: 0 1rem;
}

.marketing__manifesto-kicker {
  color: var(--mkt-text-tertiary);
  margin-block-end: 0.5rem;
}

.marketing__manifesto-list {
  color: var(--mkt-text-secondary);
  display: grid;
  gap: 0.7rem;
  line-height: 1.5;
  list-style: none;
  margin: 1.35rem 0 1.6rem;
  padding: 0;
  text-align: start;
}

.marketing__manifesto-list li {
  padding-inline-start: 1.35rem;
  position: relative;
}

.marketing__manifesto-list li::before {
  color: oklch(51% 0.18 31);
  content: "×";
  font-size: 1.05em;
  font-weight: 700;
  inset-inline-start: 0;
  line-height: 1.35;
  position: absolute;
}

.marketing__manifesto-deck {
  color: var(--mkt-text-secondary);
  margin: 0 auto;
}

.marketing__pillars {
  border-block-start: 1px solid var(--mkt-border-hairline);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--inline-space);
  position: relative;
}

.marketing__pillars::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M10 0 v40 M0 10 h20 M0 30 h20' fill='none' stroke='%23899aa8' stroke-opacity='0.16' stroke-width='0.75'/%3E%3C/svg%3E");
  background-size: 20px 40px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 72%);
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing__pillars .marketing__section-head {
  margin-block-end: clamp(1.75rem, 4vw, 2.25rem);
  position: relative;
  z-index: 1;
}

.marketing__pillars-heading {
  margin: 0;
  margin-inline: auto;
  max-inline-size: 36rem;
}

.marketing__pillars-deck {
  margin-block: 0.75rem 0;
  margin-inline: auto;
}

.marketing__pillars-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0 auto;
  max-inline-size: var(--content-width);
  padding: 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .marketing__pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 72rem) {
  .marketing__pillars-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.marketing__pillar {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-block-start: 3px solid oklch(52% 0.19 250 / 0.35);
  border-radius: 0.65rem;
  padding: 1.4rem 1.5rem;
  transition:
    border-color var(--mkt-duration-fast) var(--mkt-ease-out),
    box-shadow var(--mkt-duration-fast) var(--mkt-ease-out);
}

.marketing__pillar:hover {
  border-block-start-color: var(--mkt-accent);
  border-color: var(--mkt-border);
  box-shadow: 0 12px 28px -18px oklch(17% 0.01 240 / 0.3);
}

.marketing__pillar-title {
  margin-block-end: 0.45rem;
}

.marketing__pillar-copy {
  color: var(--mkt-text-secondary);
  margin: 0;
}

/* Full-page panel demo */

.marketing--demo-page {
  margin-inline: auto;
  max-inline-size: 72rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem);
  padding-inline: var(--inline-space);
}

.marketing-demo-page__head {
  isolation: isolate;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
  margin-inline: auto;
  max-inline-size: 44rem;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  text-align: center;
}

.marketing-demo-page__head::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 14 Q14 2 28 14 T56 14' fill='none' stroke='%23899aa8' stroke-opacity='0.16' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 56px 28px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 15%, transparent 75%);
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing-demo-page__head > * {
  position: relative;
  z-index: 1;
}

.marketing__demo-intro--page .marketing__demo-deck {
  margin-inline: auto;
}

.marketing__demo-title--page {
  margin-block-end: 0.85rem;
}

.marketing-demo-page__actions {
  justify-content: center;
  margin-block-start: 1.35rem;
}

.marketing-demo-page__stage {
  isolation: isolate;
  margin-inline: auto;
  max-inline-size: 100%;
  overflow: hidden;
  position: relative;
}

.marketing-demo-page__stage::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M4 24 h16 M28 24 h16 M24 4 v16 M24 28 v16' fill='none' stroke='%23899aa8' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%23899aa8' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  content: "";
  inset: -2% 0;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 20%, transparent 72%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing-demo-page__stage > * {
  position: relative;
  z-index: 1;
}

.marketing--demo-page .marketing-demo {
  max-inline-size: none;
}

.marketing--demo-page .marketing-demo__shell {
  block-size: min(78vh, 44rem);
  max-block-size: none;
  min-block-size: clamp(22rem, 62vh, 44rem);
}

.marketing-demo-page__foot {
  border-block-start: 1px solid var(--mkt-border-hairline);
  isolation: isolate;
  margin-block-start: clamp(2rem, 5vw, 3rem);
  overflow: hidden;
  padding-block-start: 1.75rem;
  position: relative;
  text-align: center;
}

.marketing-demo-page__foot::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Cpath d='M0 4 H32' fill='none' stroke='%23899aa8' stroke-opacity='0.14' stroke-width='0.7'/%3E%3Cpath d='M8 1 V7 M24 1 V7' fill='none' stroke='%23899aa8' stroke-opacity='0.1' stroke-width='0.65'/%3E%3C/svg%3E");
  background-size: 32px 8px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.marketing-demo-page__foot > * {
  position: relative;
  z-index: 1;
}

.marketing-demo-page__foot-copy {
  color: var(--mkt-text-secondary);
  margin-block-end: 1.25rem;
  margin-inline: auto;
}

.marketing-demo-page__foot .marketing__actions {
  justify-content: center;
}

.open-wake {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 auto;
  max-width: 28rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.open-wake__logo {
  margin-block-end: 0.5rem;
}

.open-wake__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
}

.open-wake__copy {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.open-wake__host {
  margin: 0;
}

.open-wake__status {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.open-wake__spinner {
  animation: open-wake-spin 0.8s linear infinite;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  border-top-color: var(--color-accent);
  height: 2rem;
  width: 2rem;
}

@keyframes open-wake-spin {
  to { transform: rotate(360deg); }
}

/* Launch onboarding strip (guest marketing) */
.marketing-launch-strip {
  background: var(--mkt-ink);
  border-block-end: 1px solid var(--mkt-dark-border);
  color: oklch(98% 0.01 85);
  padding: 0.45rem var(--inline-space);
  position: sticky;
  inset-block-start: var(--nav-height);
  text-align: center;
  z-index: 9;
}

.marketing-launch-strip__text {
  margin: 0;
}

.marketing-launch-strip__link {
  color: inherit;
  font-weight: 600;
  margin-inline-start: 0.35rem;
  text-decoration: underline;
}

.app.app--guest:has(.main--marketing):has(.marketing-launch-strip) {
  --mkt-scroll-offset: calc(var(--nav-height) + 2.25rem);
}

.marketing__proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.marketing__proof-chip {
  background: var(--mkt-bg-elevated);
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

/* Selling polish: clean paper, a big try-box, a letter, a calm split.
   Same sections. Closer to the Basecamp pages that converted. */

.marketing__hero--compact {
  background-image: none;
  border-block-end: 0;
  padding-block: clamp(3.25rem, 8vw, 5.25rem) clamp(1.25rem, 3vw, 2rem);
}

.marketing__hero--compact::after {
  display: none;
}

.marketing__hero--compact .marketing__hero-copy .marketing__title.mkt-display {
  font-size: clamp(1.5rem, 7.6vw, 4.4rem);
  letter-spacing: -0.046em;
  line-height: 1.02;
  margin-block-end: 1rem;
  text-wrap: wrap;
}

.marketing__hero-copy--centered {
  max-inline-size: 52rem;
}

.marketing__scribble {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M2 9C22 4 38 12 58 7C78 2 96 11 118 6' stroke='%232a5bd7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: left 100%;
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  padding-bottom: 0.06em;
}

.marketing__hero-copy--centered .marketing__tagline {
  color: var(--mkt-text);
  font-family: var(--mkt-font-prose);
  font-size: clamp(1.4rem, 2.3vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  max-inline-size: 40rem;
}

.marketing__hero .marketing__trial {
  max-width: 28rem;
  padding: 1.6rem 1.6rem 1.35rem;
}

.marketing__trial-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.marketing__trial-input,
.marketing__trial-submit {
  min-height: 3.15rem;
}

.marketing__trial-form .marketing__trial-submit {
  inline-size: 100%;
  margin-block-start: 0.35rem;
}

.marketing__hero-copy--centered .marketing__proof-chips {
  gap: 0;
  margin-block-start: 1.1rem;
}

.marketing__hero-copy--centered .marketing__proof-chip {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mkt-text-secondary);
  padding: 0 0.7rem;
}

.marketing__hero-copy--centered .marketing__proof-chip + .marketing__proof-chip {
  border-inline-start: 1px solid var(--mkt-border);
}

.marketing-launch-strip {
  background: oklch(96.5% 0.035 95);
  border-block-end: 1px solid oklch(88% 0.03 85);
  color: var(--mkt-ink);
}

.marketing__hero-deck {
  margin-block-start: clamp(2.75rem, 7vw, 4rem);
}

.showcase::before,
.showcase--deck::before {
  background: none;
}

.showcase__frame {
  box-shadow: 0 28px 70px -36px oklch(17% 0.02 240 / 0.55);
}

.marketing__scatter {
  background-color: var(--mkt-bg);
}

.marketing__scatter::before {
  opacity: 0.28;
}

.marketing__scatter-card {
  padding: clamp(1.6rem, 3.2vw, 2.15rem);
}

.marketing__scatter-card--before {
  background: oklch(97.2% 0.004 240);
}

.marketing__scatter-card--after {
  background: var(--mkt-bg-elevated);
  box-shadow: 0 18px 44px -28px oklch(17% 0.03 250 / 0.55);
}

.marketing__letter {
  background-color: var(--mkt-bg-subtle);
}

.marketing__letter-inner {
  background-color: var(--mkt-bg-elevated);
  background-image: none;
  border: 1px solid var(--mkt-border-hairline);
  border-radius: 0.4rem;
  box-shadow: 0 22px 50px -32px oklch(17% 0.02 240 / 0.55);
  max-inline-size: 40rem;
  padding: clamp(1.85rem, 4vw, 2.85rem) clamp(1.4rem, 4vw, 2.6rem);
}

.main--marketing .marketing__letter-kicker.mkt-caption,
.main--marketing .marketing__letter .mkt-headline,
.main--marketing .marketing__letter .marketing__steps.mkt-body,
.main--marketing .marketing__letter-signoff.mkt-caption {
  font-family: var(--mkt-font-prose);
}

.main--marketing .marketing__letter .marketing__steps.mkt-body {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

.main--marketing .marketing__letter .mkt-headline {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.marketing__scatter::before {
  opacity: 0;
}

.marketing__letter-body p {
  line-height: 1.6;
}

.marketing__letter-signoff {
  color: var(--mkt-text);
  font-style: normal;
}

.marketing__letter .marketing__steps {
  gap: 0;
  margin-block: 1.35rem 0.4rem;
}

.marketing__letter .marketing__steps li {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--mkt-border-hairline);
  border-radius: 0;
  padding-block: 0.85rem;
  padding-inline-start: 2.4rem;
}

.marketing__letter .marketing__steps li:last-child {
  border-block-end: 0;
}

.marketing__letter .marketing__steps li::before {
  background: var(--mkt-accent);
  block-size: 1.45rem;
  border-radius: 999px;
  color: #fff;
  font-family: var(--mkt-font-display);
  font-size: 0.78rem;
  inset-block: 0.95rem auto;
  width: 1.45rem;
}

.marketing__letter-signature {
  color: oklch(32% 0.02 250);
  display: block;
  height: auto;
  margin-block-end: 0.45rem;
  width: 7.25rem;
}

.marketing__letter-ps {
  font-family: var(--mkt-font-prose);
  font-size: clamp(1.15rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  margin: 1.15rem 0 0;
}

/* Pen marks. Same places, a few arrows in the margin. */

.mkt-mark {
  color: var(--mkt-accent);
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.mkt-mark svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.marketing__trial:has(.mkt-mark) {
  position: relative;
}

@media (min-width: 68rem) {
  .mkt-mark--try {
    display: block;
    left: auto;
    right: calc(100% - 1.15rem);
    top: 11.2rem;
    width: 7.6rem;
  }

  .mkt-mark--down {
    display: block;
    left: calc(100% - 1.7rem);
    top: 11.4rem;
    width: 9.4rem;
  }
}

@media (min-width: 72rem) {
  .mkt-mark--offer,
  .mkt-mark--ship,
  .mkt-mark--yaml,
  .mkt-mark--steps {
    display: block;
  }

  .mkt-mark--offer {
    left: calc(100% - 2.35rem);
    top: -0.2rem;
    width: 7.6rem;
  }

  .mkt-mark--ship {
    left: auto;
    right: calc(100% - 1.35rem);
    top: 0.15rem;
    width: 7.2rem;
  }

  .mkt-mark--yaml {
    left: calc(50% - 26.2rem);
    top: 8.5rem;
    width: 7.4rem;
  }

  .mkt-mark--steps {
    left: calc(50% + 18.15rem);
    top: 43.2rem;
    width: 8.2rem;
  }
}

@media (min-width: 56rem) {
  .marketing__scatter-grid {
    position: relative;
  }

  .mkt-mark--across {
    display: block;
    left: 50%;
    top: 0;
    transform: translate(-50%, -108%) rotate(4deg);
    width: 5.2rem;
  }
}

@media (min-width: 72rem) {
  .marketing__letter {
    position: relative;
  }

  .mkt-mark--note {
    display: block;
    left: calc(50% - 23.5rem);
    top: 3.4rem;
    width: 4.6rem;
  }
}

/* Interior marketing pages share the homepage paper. */

.marketing__hero--compact .marketing__hero-copy--centered .marketing__deck {
  color: var(--mkt-text);
  font-family: var(--mkt-font-prose);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-inline: auto;
  max-inline-size: 40rem;
}

.marketing__hero-copy--centered .marketing__actions {
  justify-content: center;
}

.marketing__hero-copy--centered .marketing__note {
  text-align: center;
}

.marketing__hero-copy--centered .marketing__hero-terminal {
  margin-block-start: 2rem;
  margin-inline: auto;
  max-inline-size: 34rem;
  text-align: start;
}

.main--marketing .docs-page-list {
  margin-block: 0 4.5rem;
}

.main--marketing .docs-page-list__link {
  border-color: var(--mkt-border);
  color: var(--mkt-text);
  font-family: var(--mkt-font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  padding-block: 1.15rem;
}

.main--marketing .docs-page-list__link:hover,
.main--marketing .docs-page-list__link:focus-visible {
  color: var(--mkt-text);
}

.main--marketing .docs-page-list__title {
  font-size: inherit;
  position: relative;
}

.main--marketing .docs-page-list__title::after {
  background: var(--mkt-accent);
  block-size: 0.28em;
  content: "";
  inset-block-end: -0.08em;
  inset-inline: 0;
  -webkit-mask: var(--nav-scribble) center / 100% 100% no-repeat;
  mask: var(--nav-scribble) center / 100% 100% no-repeat;
  pointer-events: none;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mkt-duration, 0.26s) var(--mkt-ease-spring, ease);
}

.main--marketing .docs-page-list__link:hover .docs-page-list__title::after,
.main--marketing .docs-page-list__link:focus-visible .docs-page-list__title::after {
  transform: scaleX(1);
}

.main--marketing .docs-layout {
  padding-block-start: clamp(2.5rem, 6vw, 4.25rem);
}

.main--marketing .docs-content h1.marketing__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-block-end: 1.35rem;
}

.main--marketing .docs-sidebar__title {
  color: var(--mkt-text-secondary);
  font-family: var(--mkt-font-display);
}

.main--marketing .docs-nav__link {
  color: var(--mkt-text-secondary);
  font-size: 1.02rem;
  padding-block: 0.42rem;
}

.main--marketing .docs-nav__link--active,
.main--marketing .docs-nav__link:hover {
  color: var(--mkt-text);
}

.main--marketing .docs-content h2,
.main--marketing .docs-content h3 {
  color: var(--mkt-text);
  font-family: var(--mkt-font-display);
  letter-spacing: -0.03em;
}

.main--marketing .docs-content p,
.main--marketing .docs-content li {
  color: var(--mkt-text);
  font-family: var(--mkt-font-prose);
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  line-height: 1.6;
}

.legal-page--prose {
  max-inline-size: 40rem;
  padding-block: 0 4.5rem;
  padding-inline: 0;
}

.legal-page--prose h2 {
  color: var(--mkt-text);
  font-family: var(--mkt-font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
}

.legal-page--prose p,
.legal-page--prose li {
  color: var(--mkt-text);
  font-family: var(--mkt-font-prose);
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  line-height: 1.6;
}