/* =============================================================================
   MDCP marketing: design system and page styles
   -----------------------------------------------------------------------------
   One stylesheet for the whole marketing site. It mirrors the `mk-*` token set
   in apps/web (tailwind.config.js + src/index.css); when one moves, move both.

   The page is light and warm: an off-white canvas and warm-black text, with
   black as the only accent. The only dark surfaces are the things that really
   are code (the hero source pane and the deploy log), where the contrast does
   work instead of setting a mood.
============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg: #fdfcfa;
  --bg2: #f6f3ed;
  --surface: #ffffff;
  --raised: #f1ece3;
  --line: #e7e1d6;
  --line2: #d6cdbe;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --fg: #14110d;
  --fg2: #5c564c;
  --fg3: #8f887b;

  /* ── Accent + signals ─────────────────────────────────────────────────── */
  /* The accent is black: the page stays monochrome like the MDCP logo, which
     ships in black and white only. On the dark ink surfaces black disappears,
     so those use --inkfg instead. */
  --accent: #14110d;
  --accent2: #3a342c;
  --live: #0e9f6e;
  --draft: #8a8578;

  /* ── Dark code surfaces ───────────────────────────────────────────────── */
  --ink: #17140f;
  --ink2: #201c16;
  --inkline: #322c23;
  --inkfg: #f2ede4;
  --inkfg2: #a39a8a;
  --inkfg3: #746c5e;
  --inklive: #3dffa8;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Radius, shadow, motion ───────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 17, 13, 0.05), 0 10px 28px -14px rgba(20, 17, 13, 0.16);
  --shadow-lift: 0 1px 3px rgba(20, 17, 13, 0.06), 0 26px 60px -28px rgba(20, 17, 13, 0.3);
  --shadow-accent: 0 8px 24px -12px rgba(20, 17, 13, 0.45);
  --shadow-nav: 0 1px 2px rgba(20, 17, 13, 0.05), 0 12px 32px -16px rgba(20, 17, 13, 0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Rhythm ───────────────────────────────────────────────────────────── */
  --wrap: 1180px;
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: rgba(20, 17, 13, 0.14);
  color: var(--fg);
}

a {
  color: inherit;
  text-decoration: none;
}

/* =============================================================================
   Type scale
============================================================================= */

/* Bricolage Grotesque carries an optical-size axis: `opsz` has to climb with
   the type or the large sizes keep the generous spacing a 16px setting needs.
   Tracking tightens on the same curve. */
.display-xl,
.display-lg,
.display-md {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.display-xl {
  font-size: clamp(2.75rem, 6.2vw, 4.75rem);
  line-height: 0.97;
  letter-spacing: -0.032em;
  font-variation-settings: "opsz" 96;
}
.display-lg {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
  font-variation-settings: "opsz" 64;
}
.display-md {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 32;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}

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

/* =============================================================================
   Layout
============================================================================= */

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

.section {
  padding: 96px 0;
}
.section--alt {
  background: var(--bg2);
}

.heading {
  max-width: 640px;
  margin: 0 0 48px;
}
.heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.heading .display-lg {
  margin-top: 16px;
}
.heading .lead {
  margin-top: 16px;
}

/* =============================================================================
   Buttons + chips
============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease) 180ms, border-color var(--ease) 180ms,
    color var(--ease) 180ms;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
  background: var(--accent2);
}
.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line2);
  font-weight: 500;
}
.btn--ghost:hover {
  border-color: rgba(20, 17, 13, 0.45);
}
.btn:active {
  transform: scale(0.99);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  color: var(--fg2);
  transition: border-color var(--ease) 180ms, color var(--ease) 180ms;
}
.pill:hover {
  border-color: rgba(20, 17, 13, 0.45);
  color: var(--fg);
}
.pill__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(20, 17, 13, 0.07);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* =============================================================================
   Nav: floating pill
   -----------------------------------------------------------------------------
   At the top of the page the bar has no chrome, so the hero starts at the first
   pixel and nothing cuts a line across it. Once the page moves, the pill
   materialises and from then on it reads as an object floating above the
   content rather than a strip welded to the window.
============================================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px var(--gutter) 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 8px 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease),
    box-shadow 300ms var(--ease);
}
.nav--lifted .nav__inner {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--line);
  box-shadow: var(--shadow-nav);
}
.nav__links {
  display: flex;
  gap: 2px;
  margin-left: 28px;
}
.nav__link {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--fg2);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.nav__link:hover {
  background: var(--raised);
  color: var(--fg);
}
.nav__spacer {
  flex: 1;
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__signin {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg2);
  transition: color 180ms var(--ease);
}
.nav__signin:hover {
  color: var(--fg);
}
.nav__start {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
}

/* Burger + drawer. Hidden above the breakpoint, where the links sit in the
   pill itself. */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.nav__burger:hover {
  background: var(--raised);
  color: var(--fg);
}
.nav__drawer {
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-nav);
  display: grid;
  gap: 2px;
}
.nav__drawer a {
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: var(--fg2);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.nav__drawer a:hover {
  background: var(--raised);
  color: var(--fg);
}
.nav__drawer-rule {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}
.nav__drawer .btn--primary {
  justify-content: center;
  border-radius: 16px;
}

@media (max-width: 760px) {
  .nav__links,
  .nav__signin {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
  }
}
@media (min-width: 761px) {
  .nav__drawer {
    display: none;
  }
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
/* Official MDCP mark, monochrome by brand rule: it follows the text colour. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
}
.logo__mark {
  height: 20px;
  width: auto;
  display: block;
}
.logo__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* =============================================================================
   Hero
============================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 80px;
}
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 17, 13, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 17, 13, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(64% 52% at 50% 0%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(64% 52% at 50% 0%, #000 0%, transparent 76%);
}
.hero__inner {
  position: relative;
}
.hero__text {
  max-width: 760px;
}
.hero__sub {
  max-width: 560px;
  margin-top: 24px;
  font-size: 1.125rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}
.hero__fineprint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
}
.hero__visual {
  margin-top: 56px;
}

/* =============================================================================
   Numbers band
============================================================================= */

.numbers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.numbers__cell {
  background: var(--bg2);
  padding: 36px 8px;
  text-align: center;
}
.numbers__label {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}

@media (max-width: 760px) {
  .numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   Shared panel chrome
============================================================================= */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg2);
}
.panel__bar-right {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Dark variant, for the surfaces that are literally code. */
.ink {
  background: var(--ink);
  border-color: var(--inkline);
  color: var(--inkfg);
  color-scheme: dark;
}
.ink .panel__bar {
  background: var(--ink2);
  border-bottom-color: var(--inkline);
  color: var(--inkfg2);
}
.ink .panel__bar-right {
  color: var(--inkfg3);
}
.ink ::selection {
  background: rgba(242, 237, 228, 0.28);
  color: #ffffff;
}

/* =============================================================================
   Browser frame
============================================================================= */

.frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.frame__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg3);
  flex-shrink: 0;
}
.frame__url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg2);
}
.frame__url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame__scheme {
  color: var(--fg3);
}
.frame__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--live);
  font-size: 10px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.dot--live {
  background: var(--live);
  box-shadow: 0 0 6px rgba(14, 159, 110, 0.7);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dot--draft {
  background: var(--draft);
}
.dot--idle {
  background: var(--fg3);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* =============================================================================
   Hero morph: source pane and assembled site
============================================================================= */

.morph {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .morph {
    grid-template-columns: 1fr;
  }
}

.morph__source {
  border-radius: var(--r-lg);
  border: 1px solid var(--inkline);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.morph__code {
  margin: 0;
  height: 380px;
  overflow: hidden;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  white-space: pre;
}
.morph__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tok-front { color: var(--inkfg3); }
.tok-meta  { color: var(--inklive); }
.tok-h1    { color: var(--inkfg); font-weight: 500; }
.tok-h2    { color: var(--inkfg); font-weight: 500; }
.tok-text  { color: var(--inkfg2); }
.tok-punct { color: var(--inkfg3); }

.caret {
  display: inline-block;
  width: 7px;
  border-bottom: 2px solid var(--inkfg);
  transform: translateY(1px);
  margin-left: 1px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── The assembled site inside the frame ────────────────────────────────── */

.site {
  padding: 24px;
  min-height: 340px;
}
.site__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.site__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 500ms var(--ease);
}
.site__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  color: var(--fg3);
}
.site__signin {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--raised);
  transition: background 500ms var(--ease), color 500ms var(--ease);
}
.site__signin--on {
  background: var(--fg);
  color: #ffffff;
}
.slot {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.slot--on {
  opacity: 1;
  transform: none;
}
.site__h1 {
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.site__p {
  margin: 10px 0 0;
  max-width: 380px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg2);
}
.site__cta {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.site__cta-primary {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.site__cta-ghost {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  color: var(--fg2);
  font-size: 11px;
}
.site__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}
.site__card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg2);
  padding: 10px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--fg2);
}
.site__tier {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg2);
  padding: 10px;
}
.site__tier--on {
  border-color: rgba(20, 17, 13, 0.45);
  background: rgba(20, 17, 13, 0.04);
}
.site__tier-k {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.site__tier-v {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
}

/* ── Deploy strip under the frame ───────────────────────────────────────── */

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
}
.strip__state {
  transition: color 500ms var(--ease);
}
.strip__state--done {
  color: var(--live);
}
.strip__replay {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg2);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.strip__replay:hover {
  border-color: rgba(20, 17, 13, 0.45);
  color: var(--fg);
}

/* =============================================================================
   Pipeline
============================================================================= */

.pipeline {
  position: relative;
}
.pipeline__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.pipeline__sheen {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.pipeline__sheen i {
  display: block;
  height: 1px;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sheen 2.8s var(--ease) infinite;
}
@keyframes sheen {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(420%); }
}

.pipeline__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pipeline__item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.pipeline__item--on {
  opacity: 1;
  transform: none;
}
.pipeline__node {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pipeline__index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg3);
}
.pipeline__title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pipeline__detail {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg2);
}
.pipeline__body {
  margin-top: 20px;
  padding-right: 16px;
}

@media (max-width: 900px) {
  .pipeline__rail {
    left: 27px;
    right: auto;
    top: 16px;
    bottom: 16px;
    width: 1px;
    height: auto;
  }
  .pipeline__sheen {
    display: none;
  }
  .pipeline__list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pipeline__item {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .pipeline__body {
    margin-top: 0;
  }
}

/* =============================================================================
   Jobs list
============================================================================= */

.jobs {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.job {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 32px;
  padding: 32px 24px;
  transition: background 180ms var(--ease);
}
.job + .job {
  border-top: 1px solid var(--line);
}
.job:hover {
  background: var(--bg2);
}
.job__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}
.job__claim {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.job__detail {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg2);
}
@media (max-width: 760px) {
  .job {
    grid-template-columns: 1fr;
  }
  .job__tag {
    margin: 0 0 12px;
  }
}

/* =============================================================================
   Pack switcher
============================================================================= */

.packs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12px;
  font-family: inherit;
  color: var(--fg2);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease),
    background 180ms var(--ease);
}
.chip:hover {
  border-color: var(--line2);
  color: var(--fg);
}
.chip--on {
  border-color: rgba(20, 17, 13, 0.5);
  background: rgba(20, 17, 13, 0.07);
  color: var(--fg);
}
.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.packs__state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
}
.packs__note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
}

/* The packed preview reads every value from a custom property, which is how
   the real renderer applies a pack. */
.packed {
  min-height: 300px;
  background: var(--p-bg);
  color: var(--p-fg);
  font-family: var(--p-font);
  padding: var(--p-pad);
  transition: background 480ms var(--ease), color 480ms var(--ease);
}
.packed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--p-line);
}
.packed__brand {
  font-family: var(--p-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--p-tracking);
}
.packed__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--p-fg2);
}
.packed__signin {
  background: var(--p-accent);
  color: var(--p-accent-fg);
  border-radius: var(--p-radius);
  padding: 4px 10px;
}
.packed__h1 {
  margin: 24px 0 0;
  max-width: 18ch;
  font-family: var(--p-display);
  font-weight: var(--p-weight);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.08;
  letter-spacing: var(--p-tracking);
}
.packed__h1--upper {
  text-transform: uppercase;
}
.packed__p {
  margin: 12px 0 0;
  max-width: 440px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--p-fg2);
}
.packed__cta {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.packed__btn {
  padding: 9px 18px;
  border-radius: var(--p-radius);
  background: var(--p-accent);
  color: var(--p-accent-fg);
  font-size: 12px;
  font-weight: 600;
}
.packed__btn--ghost {
  background: transparent;
  border: 1px solid var(--p-line);
  color: var(--p-fg2);
  font-weight: 400;
}
.packed__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.packed__stat {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 12px 14px;
}
.packed__stat-k {
  font-size: 10px;
  color: var(--p-fg2);
}
.packed__stat-v {
  margin-top: 4px;
  font-family: var(--p-display);
  font-weight: var(--p-weight);
  font-size: 15px;
  letter-spacing: var(--p-tracking);
}

/* =============================================================================
   Deploy panel
============================================================================= */

.deploy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (max-width: 900px) {
  .deploy {
    grid-template-columns: 1fr;
  }
}
.deploy__routes {
  border-right: 1px solid var(--line);
}
@media (max-width: 900px) {
  .deploy__routes {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
.routes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.route + .route {
  border-top: 1px solid var(--line);
}
.route__path {
  width: 104px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route__title {
  flex: 1;
  font-size: 13px;
}
.route__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.route__state--live { color: var(--live); }
.route__state--draft { color: var(--draft); }

.log {
  margin: 0;
  padding: 16px;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
}
.log__line {
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.log__line + .log__line {
  margin-top: 8px;
}
.log__line--on {
  opacity: 1;
  transform: none;
}
.log__at {
  width: 40px;
  flex-shrink: 0;
  color: var(--inkfg3);
}
.log__text { color: var(--inkfg2); }
.log__text--accent { color: var(--inkfg); }
.log__text--live { color: var(--inklive); }

.progress {
  margin: 0 16px 16px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--inkline);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--inkfg2);
  transition: width 500ms ease-out;
}
.progress i.is-done {
  background: var(--inklive);
}

/* =============================================================================
   Product demo (Vimeo)
============================================================================= */

.demo__frame {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.demo__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================================================
   FAQ
============================================================================= */

.faq {
  display: grid;
  gap: 8px;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 180ms var(--ease);
}
.faq__item[open] {
  border-color: rgba(20, 17, 13, 0.35);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__sign {
  color: var(--fg3);
  font-family: var(--mono);
  flex-shrink: 0;
  transition: transform 200ms var(--ease);
}
.faq__item[open] .faq__sign {
  transform: rotate(45deg);
}
.faq__a {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg2);
  max-width: 68ch;
}

/* =============================================================================
   Closing CTA + footer
============================================================================= */

.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 112px 0;
  text-align: center;
}
.cta__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg2);
  padding: 56px 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer__about {
  max-width: 300px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg2);
}
.footer__col h3 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
}
.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.footer__col a {
  font-size: 13px;
  color: var(--fg2);
  transition: color 180ms var(--ease);
}
.footer__col a:hover {
  color: var(--fg);
}
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* =============================================================================
   Motion opt-out
============================================================================= */

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