/* =========================================================
   BLOKZA v3.1 — Page styles, refined
   Focus on real product preview, richer animations,
   proper template + blog illustrations.
   ========================================================= */

/* =================== HERO =================== */
.hero {
  position: relative;
  padding: 56px 0 80px;
  overflow: hidden;
  background: #ffffff;
}
.hero > * { position: relative; z-index: 1; }

/* Decorative purple star behind the headline */
.hero__star {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 220px;
  height: 220px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.18));
  animation: hero-star-spin 24s linear infinite;
}
.hero__star svg { width: 100%; height: 100%; display: block; }
@keyframes hero-star-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 980px) {
  .hero__star { display: none; }
}

/* 2-column layout: copy left, illustration right */
.hero__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero__layout { grid-template-columns: 1fr; gap: 24px; }
  .hero { text-align: center; padding-top: 32px; }
  .hero__copy { order: 1; }
  .hero__illustration { order: 0; }
}

.hero__copy { position: relative; z-index: 2; max-width: 580px; }


/* Live dot indicator */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 2px;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}


/* Hero illustration (right side) */
.hero__illustration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  /* Subtle cursor parallax (vars set by site.js on .hero) */
  translate: var(--parallax-x, 0px) var(--parallax-y, 0px);
  /* Reveal (opacity/transform) gets a 0.15s stagger delay; translate must
     stay at 0s delay or every parallax update lags and the scene stutters. */
  transition: opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s, translate 0.6s var(--ease);
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero__illustration svg {
  max-width: 560px;
  width: 100%;
}

.hero__art {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 720 / 540;
  background-image: url('../images/hero.webp?v=ca6adc2854');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Float lives here (not on .hero__illustration) so it can't fight the
     data-reveal transform transition on the parent. */
  animation: hero-float 6s ease-in-out infinite;
  /* Not a real <img>: nothing to "save image as", nothing to drag out. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}


.hero__title {
  margin: 26px 0 22px;
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.hero__title .accent {
  display: inline-block;
  color: var(--p-700);
}
.hero__sub {
  max-width: 520px;
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.28rem);
  color: var(--fg-muted);
  line-height: 1.6;
}
.hero__ctas {
  margin-top: 28px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__meta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 13px;
  color: var(--fg-dim);
}
@media (max-width: 980px) {
  .hero__sub { margin: 0 auto; }
  .hero__ctas { justify-content: center; }
  .hero__meta { justify-content: center; }
}
.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__meta svg { color: var(--p-600); flex: 0 0 auto; }

/* ===== Hero product preview (real-feeling editor mock) ===== */
.product-preview {
  position: relative;
  margin: 64px auto 0;
  max-width: 1080px;
  padding: 0 24px 0;
}
.preview-stage {
  position: relative;
  border-radius: var(--r-3xl);
  background: linear-gradient(180deg, #fff, #faf7ff);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  transform: none;
  transition: box-shadow 0.4s var(--ease);
}

.preview-stage::before {
  /* subtle gradient border */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(122, 95, 229, 0.45), transparent 50%, rgba(122, 95, 229, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.preview-glow {
  display: none;
}

/* Editor mock browser frame */
.mock-window {
  background: #fff;
  border-radius: calc(var(--r-3xl) - 14px);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mock-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.mock-chrome .dots { display: inline-flex; gap: 6px; }
.mock-chrome .dots i {
  width: 11px; height: 11px;
  border-radius: 4px;
}
.mock-chrome .dots i:nth-child(1) { background: #fb7185; }
.mock-chrome .dots i:nth-child(2) { background: #fbbf24; }
.mock-chrome .dots i:nth-child(3) { background: #34d399; }
.mock-chrome .url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim);
}
.mock-chrome .url span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.mock-chrome .url svg { color: var(--p-600); }
.mock-chrome .publish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--p-700);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* 3-column editor body */
.mock-body {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  min-height: 420px;
  background: #fff;
}
@media (max-width: 720px) {
  .mock-body { grid-template-columns: 88px 1fr 96px; min-height: 320px; }
}
.mock-side {
  border-right: 1px solid var(--border);
  padding: 14px 12px;
}
.mock-side.right { border-right: none; border-left: 1px solid var(--border); }
.mock-side__title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 10px;
  padding: 0 6px;
  font-weight: 700;
}

/* component palette items */
.mock-comp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin: 2px 0;
  font-size: 12px;
  color: var(--fg-2);
  border-radius: 4px;
  transition: background 0.2s ease;
}
.mock-comp:hover, .mock-comp.is-active {
  background: var(--p-50);
  color: var(--p-700);
}
.mock-comp .ico {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-mute);
  color: var(--fg-muted);
  flex: 0 0 auto;
}
.mock-comp.is-active .ico { background: var(--p-100); color: var(--p-700); }

/* canvas area */
.mock-canvas {
  background: #fcfcfd;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.mock-doc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  box-shadow: var(--shadow-xs);
}
.mock-doc .h1 {
  height: 16px; width: 70%;
  border-radius: 4px;
  background: var(--fg);
  margin-bottom: 8px;
}
.mock-doc .h2 {
  height: 12px; width: 50%;
  border-radius: 4px;
  background: var(--fg-muted);
  margin-bottom: 16px;
}
.mock-doc .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mock-doc .tile {
  height: 64px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--p-50), #fff);
  border: 1px solid var(--border);
}
.mock-doc .tile.is-selected {
  background: linear-gradient(135deg, var(--p-100), var(--p-50));
  border-color: var(--p-300);
  box-shadow: 0 0 0 3px var(--p-100);
}
.mock-doc .ctas {
  margin-top: 14px;
  display: inline-flex;
  gap: 8px;
}
.mock-doc .ctas .b1 { width: 70px; height: 28px; border-radius: 4px; background: var(--p-700); }
.mock-doc .ctas .b2 { width: 70px; height: 28px; border-radius: 4px; border: 1px solid var(--border-2); }


@keyframes select-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 95, 229, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(122, 95, 229, 0.15); }
}

/* drag cursor that loops over the canvas */
.mock-cursor {
  position: absolute;
  left: 28px; top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  color: var(--p-700);
  filter: drop-shadow(0 6px 8px rgba(15,15,20,0.18));
  animation: cursor-loop 9s var(--ease-in-out) infinite;
  will-change: transform;
}
/*
 * The collaborator cursor fades in and out inside its own keyframes, so with the
 * duration clamped under prefers-reduced-motion it sat on the 0% frame - opacity
 * 0 - and vanished from the mock entirely. Reduced motion should remove the
 * movement, not the content.
 */
@media (prefers-reduced-motion: reduce) {
  .mock-cursor { opacity: 1 !important; }
}
.mock-cursor svg { color: var(--p-700); }
.mock-cursor .label {
  font-size: 10px;
  font-weight: 700;
  background: var(--p-700);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}
@keyframes cursor-loop {
  0%   { transform: translate(0, 0);     opacity: 0; }
  6%   { opacity: 1; }
  25%  { transform: translate(160px, 80px); }
  45%  { transform: translate(260px, 50px); }
  68%  { transform: translate(80px, 130px); }
  90%  { transform: translate(40px, 30px); opacity: 1; }
  100% { transform: translate(0, 0);     opacity: 0; }
}

/* settings panel */
.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 8px;
  margin: 4px 0;
  font-size: 11px;
  border-radius: 4px;
  background: var(--bg-soft);
}
.mock-row .label { color: var(--fg-dim); }
.mock-row .value { color: var(--fg); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.mock-row .swatch { width: 10px; height: 10px; border-radius: 4px; background: var(--p-600); }

.mock-bar {
  margin: 6px 8px;
  height: 6px;
  border-radius: 4px;
  background: var(--bg-mute);
  position: relative;
}
.mock-bar i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: inherit;
  background: var(--p-600);
  /*
   * Rests filled, and animates *from* empty. It used to rest at width 0, so
   * under prefers-reduced-motion - where the duration is clamped to ~0 - all
   * three bars in the hero mock rendered as empty tracks.
   *
   * scaleX rather than width: animating width on an infinite loop relayouts the
   * subtree on every frame, forever, even scrolled off-screen.
   */
  width: var(--w, 70%);
  transform-origin: left center;
  animation: bar-fill 2.4s var(--ease-in-out) infinite;
}
@keyframes bar-fill {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0.6; }
}

/* Floating chips around hero preview */
.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--fg);
  animation: float-chip 6s var(--ease-in-out) infinite;
  z-index: 2;
}
.float-chip .pip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
  animation: pulse-dot-green 2s var(--ease-in-out) infinite;
}
@keyframes pulse-dot-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.float-chip .pill {
  background: var(--p-100);
  color: var(--p-700);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.float-chip--saved { top: 14%; left: -12px; animation-delay: 0s; }
.float-chip--users { top: 42%; right: -16px; animation-delay: -2s; }
.float-chip--live { bottom: 12%; left: -10px; animation-delay: -4s; }
@keyframes float-chip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 880px) { .float-chip { display: none; } }

/* Avatar pile inside chip */
.avpile {
  display: inline-flex;
  align-items: center;
}
.avpile span {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 2px solid #fff;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  margin-left: -6px;
}
.avpile span:first-child { margin-left: 0; }
.avpile .a1 { background: linear-gradient(135deg, var(--p-500), var(--p-700)); }
.avpile .a2 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.avpile .a3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }


/* =================== SECTION HEAD =================== */
.section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.section-head .kicker { margin-bottom: 16px; }
.section-head h2 { margin-top: 0; }
.section-head p {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* =================== STAT CARDS =================== */
.stat-card {
  padding: 28px 30px;
  /* `opacity` belongs in this list. Without it the card's own shorthand
     replaced the reveal transition inherited from [data-reveal-stagger] and
     dropped opacity from it, so the card snapped to full opacity while its
     transform still slid - a pop instead of a fade. */
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease), opacity 0.7s var(--ease);
}
.stat-card:hover {
  border-color: var(--p-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.stat-card .row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-card .icon-tile { width: 44px; height: 44px; border-radius: 4px; }
.stat-card .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
}
.stat-card p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* =================== FEATURE CARDS =================== */
.feature-card {
  padding: 32px;
  height: 100%;
}
.feature-card h3 {
  margin: 24px 0 10px;
  font-size: 20px;
  font-weight: 700;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
}

/* =================== TABBED SHOWCASE =================== */
.showcase {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 880px) { .showcase { grid-template-columns: 1fr; } }

.tabs { display: grid; gap: 12px; }
.tab {
  display: block;
  padding: 18px 20px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tab:hover { border-color: var(--border-2); }
.tab__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.tab__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tab__title .icon-tile { width: 36px; height: 36px; border-radius: 4px; }
.tab__title h3 { margin: 0; font-size: 15px; font-weight: 700; }
.tab__title p { margin: 0; font-size: 12px; color: var(--fg-dim); }
.tab__chev {
  color: var(--fg-faint);
  transition: transform 0.3s var(--ease), color 0.3s ease;
  flex: 0 0 auto;
}
.tab__body {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.4s var(--ease), padding-top 0.4s var(--ease), margin-top 0.4s var(--ease);
}
.tab__body > div {
  overflow: hidden;
  min-height: 0;
}
.tab__body p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.65; }
.tab__body ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.tab__body ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
}
.tab__body ul li svg { color: var(--p-600); flex: 0 0 auto; }

.tab.is-active {
  background: var(--p-50);
  border-color: var(--p-200);
  box-shadow: 0 4px 12px -6px rgba(122, 95, 229, 0.18);
}
.tab.is-active .tab__title h3 { color: var(--p-700); }
.tab.is-active .tab__chev { transform: rotate(180deg); color: var(--p-600); }
.tab.is-active .tab__body {
  grid-template-rows: 1fr;
  margin-top: 16px;
  padding-top: 16px;
  border-top-color: var(--p-200);
}


.preview-card__top .label {
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 4px;
}


.metric .label-row .name { color: var(--fg-2); font-weight: 500; }




.preview-dots i.is-on { background: var(--p-600); width: 24px; }

/* =================== TEMPLATES (premium cards) =================== */
.template-card {
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.35s var(--ease),
              opacity 0.7s var(--ease);
}
.template-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -12px rgba(122, 95, 229, 0.2),
              0 8px 20px -8px rgba(0, 0, 0, 0.08);
  border-color: var(--p-300);
}

.template-thumb {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f8f6ff 0%, #f0eeff 100%);
}
.template-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.template-card:hover .template-thumb img {
  transform: scale(1.06);
}
/* Subtle gradient overlay on hover */
.template-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(122, 95, 229, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.template-card:hover .template-thumb::after {
  opacity: 1;
}

.template-thumb svg { display: block; width: 100%; height: 100%; }


.template-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
}
.template-meta .cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-500);
}
.template-meta__name {
  /* Promoted to h2 for the document outline; the display serif that h2
     normally carries is for section titles, not item titles. */
  font-family: var(--font-sans);
  font-size: 17px;
  margin-top: 5px;
  font-weight: 700;
  color: var(--fg);
}
.template-meta .arrow {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.template-card:hover .arrow {
  background: var(--p-700);
  border-color: var(--p-700);
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px rgba(122, 95, 229, 0.35);
}

/* =================== PRICING =================== */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-mute);
  border-radius: 4px;
  padding: 4px;
  margin-top: 24px;
  border: 1px solid var(--border);
}
.pricing-toggle button {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.pricing-toggle button.is-on {
  background: #fff;
  color: var(--p-700);
  box-shadow: var(--shadow-sm);
}
.pricing-toggle .save {
  margin-left: 6px;
  background: var(--p-100);
  color: var(--p-700);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
}

.price-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease), opacity 0.7s var(--ease);
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.price-card.is-highlight {
  border-color: var(--p-300);
  box-shadow: 0 0 0 4px var(--p-50), var(--shadow-md);
  background: linear-gradient(180deg, #fff 70%, var(--p-50));
}
.price-card .badge {
  position: absolute;
  top: -10px; right: 22px;
  background: var(--p-700);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: var(--shadow-purple);
}
.price-card h2 { font-size: 18px; font-family: var(--font-sans); }
.price-card .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 14px;
}
.price-card .price strong {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.price-card .price span { color: var(--fg-dim); font-size: 14px; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px;
  display: grid;
  gap: 12px;
}
.price-card ul li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--fg-2);
}
.price-card ul li svg { flex: 0 0 auto; color: var(--p-600); margin-top: 3px; }
.price-card .btn { margin-top: auto; }

/* =================== ABOUT PAGE =================== */
.about-hero {
  padding: 88px 0 56px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(122, 95, 229, .08), transparent 60%),
    #fff;
}
.about-hero h1 {
  margin: 14px auto 16px;
  max-width: 880px;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.about-hero__lede {
  max-width: 640px;
  margin: 0 auto 22px;
  color: var(--fg-muted);
  font-size: 17px;
}
.about-hero__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}


.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-grid__head h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 12px;
}
.about-grid__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-2);
  margin: 0;
}
.about-grid__body p + p { margin-top: 16px; }
.about-grid__body em { color: var(--p-700); }


.avatar.a2 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.avatar.a3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }


/* =================== FAQ =================== */
.faq {
  display: grid;
  gap: 14px;
}
.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 14px);
  /* Both opacity and transform were missing, so the FAQ stagger arrived as one
     instant pop rather than a sequence. */
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
              opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.faq details:hover { border-color: var(--border-2); }
.faq details[open] { border-color: var(--border-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  transition: transform 0.25s var(--ease);
  flex: 0 0 auto;
}
.faq details[open] summary .chev {
  transform: rotate(180deg);
  color: var(--fg);
}
.faq .faq__body {
  padding: 0 26px 24px;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 820px;
}
.faq .faq__body code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =================== CTA =================== */
.cta-banner {
  position: relative;
  text-align: center;
  padding: 100px 32px;
  border-radius: var(--r-3xl);
  border: 1px solid var(--p-200);
  background: linear-gradient(180deg, #fff, var(--p-50));
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(closest-side, rgba(122, 95, 229, 0.18), transparent 60%);
  z-index: -1;
}
.cta-banner h2 { color: var(--fg); }
.cta-banner p { max-width: 600px; margin: 18px auto 0; font-size: 17px; }
.cta-banner .ctas {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =================== STATS =================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 24px 26px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s var(--ease), opacity 0.7s var(--ease);
}
.stat:hover { border-color: var(--p-200); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat strong {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--p-700);
}
.stat span { color: var(--fg-muted); font-size: 13px; margin-top: 6px; display: block; }

/* =================== PAGE HERO =================== */
.page-hero {
  padding: 64px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -100px;
  width: 1000px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(122, 95, 229, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero p { max-width: 620px; margin: 18px auto 0; font-size: 16px; }

/* =================== DOCS =================== */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 920px) { .docs-layout { grid-template-columns: 1fr; } }
.docs-side {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 18px;
}
.docs-side h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 6px 8px 10px;
  font-weight: 600;
}
.docs-side a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--fg-muted);
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.docs-side a:hover, .docs-side a.is-active {
  background: var(--p-50);
  color: var(--p-700);
}


.blog-card .meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-700);
}


/* =================== CONTACT =================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card { padding: 28px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 500; color: var(--fg-2); }
.field input, .field textarea, .field select {
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px var(--p-100);
}
/*
 * `outline: none` a few lines up is on the resting state, so it also suppressed
 * the generic ring on focus — this stylesheet loads after base.css and the two
 * selectors tie on specificity. The colour change alone is not a sufficient
 * indicator, so the ring comes back for keyboard focus.
 */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--p-600);
  outline-offset: 2px;
}
.field textarea { min-height: 120px; resize: vertical; }
.muted-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.muted-list li { display: flex; gap: 14px; align-items: flex-start; }
.muted-list .icon-tile { width: 38px; height: 38px; }
.muted-list strong { display: block; font-size: 14px; color: var(--fg); }
.muted-list span { color: var(--fg-muted); font-size: 13px; }


.bento-cell .icon-tile { width: 38px; height: 38px; }


.bento-mock--toolbar i.is-on { background: var(--p-700); }


.bento-mock--device i.is-on { background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-200); }

.bento-mock--canvas .ln {
  height: 6px;
  background: var(--fg-2);
  border-radius: 999px;
  margin-bottom: 6px;
  width: 60%;
}

.bento-mock--canvas .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.bento-mock--canvas .row > div {
  height: 24px;
  background: var(--p-50);
  border: 1px solid var(--p-200);
}


@keyframes blink { 50% { border-color: transparent; } }


.mock-drag .palette i.is-active { background: var(--p-700); border-color: var(--p-700); }

.mock-drag .ln { height: 4px; background: var(--fg-2); width: 60%; margin-bottom: 4px; }


.mock-live .body .ln {
  height: 5px;
  border-radius: 999px;
  background: var(--fg-2);
  width: 60%;
}

.mock-live .badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: #10b981;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Dev docs (v2) ---- */
.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 36px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 96px;
}
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 880px) {
  .docs-layout { grid-template-columns: 1fr; padding: 24px 18px 72px; }
  .docs-side { position: static !important; }
}

/* Sidebar */
.docs-side {
  position: sticky;
  top: 96px;
  align-self: start;
  font-size: 13.5px;
}
.docs-side__inner {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 14px);
  padding: 16px 14px 14px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.docs-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: text;
  margin-bottom: 14px;
}
.docs-search kbd {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--fg-dim);
}
.docs-side__group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 14px 0 6px;
  padding: 0 10px;
}
.docs-side a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--fg-muted);
  border-radius: 6px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.docs-side a:hover, .docs-side a.is-active {
  color: var(--p-700);
  background: var(--p-50);
  border-left-color: var(--p-700);
}
.docs-side a code {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  background: transparent;
}
.docs-side__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md, 8px);
  color: var(--fg);
  background: var(--bg-soft);
}
.docs-side__cta strong { display: block; font-size: 13px; }
.docs-side__cta small  { display: block; font-size: 11.5px; color: var(--fg-muted); margin-top: 2px; }
.docs-side__cta:hover  { background: var(--p-50); border-color: var(--p-300); color: var(--p-700); }

/* Main content */
.docs-main { min-width: 0; }

.docs-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.docs-crumbs a:hover { color: var(--p-700); }
.docs-crumbs span { color: var(--fg-faint); }
.docs-crumbs .is-current { color: var(--fg); font-weight: 600; }

.docs-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}
.docs-hero h1 {
  font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.docs-hero p {
  color: var(--fg-muted);
  font-size: 17px;
  max-width: 680px;
  margin: 0;
}
.docs-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.docs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--p-50); border: 1px solid var(--p-200); color: var(--p-700);
}
.docs-chip--ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.docs-chip--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.docs-chip--ghost { background: transparent; border-color: var(--border); color: var(--fg-muted); }

/* Sections */
.docs-section { margin-top: 56px; scroll-margin-top: 96px; }
.docs-section h2 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px;
}
.docs-section h2 code {
  font-family: ui-monospace, monospace; font-size: 18px;
  padding: 4px 10px;
  background: var(--p-50); border: 1px solid var(--p-200); color: var(--p-700);
  border-radius: 6px; font-weight: 600;
}
.docs-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.docs-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--fg-muted);
}
.docs-tag--api { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.docs-section p {
  color: var(--fg-muted); font-size: 15px; line-height: 1.7;
  margin: 0; max-width: 720px;
}
.docs-section p + p { margin-top: 12px; }
.docs-section a:not(.btn) {
  color: var(--p-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.docs-lead { font-size: 16px !important; color: var(--fg-2) !important; }
.docs-h3 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; letter-spacing: -0.005em; }
.docs-steps {
  list-style: none;
  counter-reset: docs-step;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.docs-steps li {
  position: relative;
  padding: 14px 16px 14px 52px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.6;
  counter-increment: docs-step;
}
.docs-steps li::before {
  content: counter(docs-step);
  position: absolute;
  left: 16px; top: 14px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--p-50);
  color: var(--p-700);
  border: 1px solid var(--p-200);
  border-radius: 50%;
  font-size: 11.5px; font-weight: 700;
}
.docs-steps li strong { color: var(--fg); margin-right: 4px; }
.docs-steps li code   { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; }

/* Prop tables */
.props {
  margin-top: 18px; width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-md, 8px); overflow: hidden;
}
.props th, .props td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.props tr:last-child td { border-bottom: 0; }
.props th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-dim); background: var(--bg-soft);
}
.props td:first-child { white-space: nowrap; }
.props code {
  font-family: ui-monospace, monospace; font-size: 12.5px;
  background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; color: var(--fg);
}

/* Callout */
.docs-callout {
  margin-top: 18px; padding: 16px 20px;
  background: var(--p-50); border: 1px solid var(--p-200); border-left: 3px solid var(--p-500);
  border-radius: var(--r-md, 8px);
}
.docs-callout strong {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--p-700); margin-bottom: 6px;
}
.docs-callout p { color: var(--fg-2) !important; font-size: 14px !important; line-height: 1.6 !important; max-width: none !important; }
.docs-callout code {
  background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--p-800);
}

/* Info card grid */
.docs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 720px) { .docs-grid-2 { grid-template-columns: 1fr; } }
.docs-info {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md, 8px);
}
.docs-info__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-200);
}
.docs-info h3 { font-size: 14px; margin: 0 0 4px; font-weight: 700; }
.docs-info p { font-size: 13px !important; color: var(--fg-muted) !important; margin: 0 !important; max-width: none !important; }

/* Endpoints */
.docs-endpoints { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }
.docs-endpoints li {
  display: grid; grid-template-columns: 64px auto 1fr;
  align-items: center; gap: 14px;
  padding: 10px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md, 8px);
  font-size: 13.5px;
}
.docs-endpoints code { font-family: ui-monospace, monospace; font-size: 13px; color: var(--fg); }
.docs-endpoints__verb {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  padding: 3px 0; border-radius: 4px; letter-spacing: 0.06em;
}
.docs-endpoints__verb--get    { background: #ecfeff; color: #0e7490; }
.docs-endpoints__verb--post   { background: #ecfdf5; color: #047857; }
.docs-endpoints__verb--patch  { background: #fefce8; color: #a16207; }
.docs-endpoints__verb--delete { background: #fef2f2; color: #b91c1c; }
.docs-endpoints__desc { color: var(--fg-muted); font-size: 13px; text-align: right; }

/* Code blocks */
.docs-tabs { margin-top: 18px; }
.docs-tabs__bar {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 4px;
  gap: 2px;
}
.docs-tabs__btn {
  border: 0; background: transparent;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--fg-muted);
  border-radius: 5px; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.docs-tabs__btn:hover { color: var(--fg); }
.docs-tabs__btn.is-on {
  background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(15, 16, 28, .06);
}
.docs-tabs .devdocs-code:first-of-type { border-top-left-radius: 0; }

.devdocs-code {
  position: relative;
  background: #181024; color: #e1e5ed;
  border-radius: 8px; padding: 18px 20px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.65;
  overflow-x: auto; white-space: pre;
  margin-top: 0;
}
.devdocs-code pre { margin: 0; font-family: inherit; white-space: pre; }
.devdocs-code .tk  { color: #d0c5fd; }
.devdocs-code .ts  { color: #a5f3fc; }
.devdocs-code .tn  { color: #f0abfc; }
.devdocs-code .tc  { color: #6b7280; font-style: italic; }
.devdocs-code .tp  { color: #fde68a; }
.devdocs-code .tag { color: #fb7185; }
.devdocs-code__copy {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  border-radius: 6px; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.devdocs-code__copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
.devdocs-code__copy.is-copied { background: #10b981; border-color: #10b981; color: #fff; }
.devdocs-code__copy.is-copied::after {
  content: "Copied"; position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans, system-ui); font-size: 11.5px; font-weight: 700;
  background: #10b981; color: #fff; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}

/* Bottom CTA */
.docs-cta {
  margin-top: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 26px;
  background: var(--p-50); border: 1px solid var(--p-200); border-radius: var(--r-md, 8px);
  flex-wrap: wrap;
}
.docs-cta h3 { margin: 0; font-size: 18px; font-weight: 700; }
.docs-cta p  { margin: 4px 0 0; color: var(--fg-muted); font-size: 14px; }

/* Bottom prev/next */
.docs-footnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--border);
}
.docs-footnav a {
  display: block; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--r-md, 8px);
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.docs-footnav a:hover { border-color: var(--p-300); background: var(--p-50); }
.docs-footnav small {
  display: block; font-size: 11.5px; color: var(--fg-muted); margin-bottom: 4px;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.docs-footnav strong { display: block; font-size: 14.5px; color: var(--fg); }
.docs-footnav__next { text-align: right; }

/* Right TOC */
.docs-toc { position: sticky; top: 96px; align-self: start; font-size: 12.5px; }
.docs-toc__inner { padding: 18px 4px 18px 16px; border-left: 1px solid var(--border); }
.docs-toc__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dim); margin: 0 0 10px;
}
.docs-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.docs-toc a {
  display: block; padding: 4px 8px;
  font-size: 12.5px; color: var(--fg-muted); border-radius: 5px;
  border-left: 2px solid transparent;
  margin-left: -10px; padding-left: 10px;
}
.docs-toc a:hover { color: var(--fg); }
.docs-toc a.is-active { color: var(--p-700); border-left-color: var(--p-700); font-weight: 600; }
.docs-toc a code { font-family: ui-monospace, monospace; font-size: 11.5px; }
.docs-toc hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.docs-toc__edit { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted); }
.docs-toc__edit:hover { color: var(--p-700); }


.blog-item__row .badge {
  padding: 3px 8px;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  color: var(--p-700);
}


/* ---- Community wall ---- */
.community-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) { .community-grid { grid-template-columns: 1fr; } }

.com-feed {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
}
.com-feed__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com-feed__head strong { font-size: 14px; }
.com-feed__head .pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #047857;
}
.com-feed__head .pulse::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-ring 2s infinite;
}
.com-post {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
}
.com-post:last-child { border-bottom: none; }
.com-post__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-500), var(--p-700));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.com-post__avatar.a2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.com-post__avatar.a3 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.com-post__avatar.a4 { background: linear-gradient(135deg, #10b981, #047857); }
.com-post__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.com-post__head strong { color: var(--fg); }
.com-post__head span { color: var(--fg-dim); font-size: 12px; }
.com-post__body { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; margin-top: 4px; }
.com-post__body code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 1px 6px;
}
.com-post__react {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--fg-dim);
}
.com-post__react span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.com-post__react span.is-mine { background: var(--p-50); color: var(--p-700); border-color: var(--p-200); }

.com-side {
  display: grid;
  gap: 20px;
}
.com-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 22px;
}
.com-card h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 14px; font-family: var(--font-sans); }
.com-card .tpl-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.com-card .tpl-row:first-of-type { border-top: none; padding-top: 0; }
.com-card .tpl-thumb {
  width: 60px; height: 40px;
  background: linear-gradient(135deg, var(--p-100), var(--p-50));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.com-card .tpl-meta strong { display: block; font-size: 13px; }
.com-card .tpl-meta span { display: block; font-size: 11.5px; color: var(--fg-dim); }
.com-card .stars-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-muted);
}
.com-card .stars-row svg { color: #f59e0b; }


/* =========================================================
   PAGE-SPECIFIC styles — each menu page gets its own visual id
   ========================================================= */

/* ---------- OVERVIEW page ---------- */
.ov-hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}
.ov-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 90% 10%, rgba(122, 95, 229, 0.10), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(94, 131, 223, 0.08), transparent 70%);
  pointer-events: none;
}
.ov-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) { .ov-hero__grid { grid-template-columns: 1fr; gap: 36px; } }

.ov-hero__copy h1 {
  font-size: clamp(2.8rem, 1.8rem + 3.2vw, 4.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-weight: 700;
}
.ov-hero__sub {
  margin-top: 22px;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 540px;
}

.ov-stat-strip {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.ov-stat-strip > div {
  border-left: 2px solid var(--p-300);
  padding-left: 14px;
}
.ov-stat-strip strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.ov-stat-strip span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hero visual — stack of floating cards */
.ov-stack {
  position: relative;
  perspective: 1400px;
  min-height: 500px;
}
.ov-stack__card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 32px 60px -28px rgba(11, 18, 32, 0.22);
  border-radius: 6px;
  padding: 16px;
}
.ov-stack__card--main {
  inset: 32px 16px 80px 0;
  transform: rotate(-1deg);
  z-index: 2;
}
.ov-stack__card--ai {
  width: 240px;
  top: 0; right: -14px;
  z-index: 3;
  transform: rotate(3deg);
}
.ov-stack__card--device {
  bottom: 0; right: 36px;
  width: 280px;
  z-index: 3;
  transform: rotate(-2deg);
}
.ov-stack__card--cursor {
  top: 50%; left: -20px;
  z-index: 4;
  transform: rotate(-4deg);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--p-700);
  color: #fff;
  border-color: var(--p-700);
}
.ov-stack__card--cursor svg { color: #fff; }
.ov-stack__card--cursor span { font-size: 12px; font-weight: 700; }

.ov-stack__chrome {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  align-items: center;
}
.ov-stack__chrome i {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.ov-stack__chrome i:nth-child(1) { background: #fb7185; }
.ov-stack__chrome i:nth-child(2) { background: #fbbf24; }
.ov-stack__chrome i:nth-child(3) { background: #34d399; }
.ov-stack__chrome span {
  /* Was `margin-left: auto`, i.e. hard right — exactly where the rotated
     "Add section" card overlaps this one, so the URL was completely hidden
     behind it. Next to the traffic lights instead, which is where a browser
     puts it anyway. */
  margin-left: 8px;
  font-size: 10px;
  color: var(--fg-dim);
  font-family: ui-monospace, monospace;
}

.ov-stack__content {
  display: grid;
  gap: 8px;
}
.ov-stack__content .ln {
  height: 8px;
  background: var(--fg);
  border-radius: 4px;
}
.ov-stack__content .ln--accent { background: var(--p-700); width: 60%; }
.ov-stack__content .ln--muted { background: var(--fg-faint); height: 4px; width: 80%; }
.ov-stack__content .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.ov-stack__content .row > div {
  height: 56px;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  border-radius: 4px;
}
.ov-stack__content .ctas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ov-stack__content .ctas span {
  height: 22px; width: 56px;
  background: var(--p-700);
}
.ov-stack__content .ctas span:nth-child(2) { background: #fff; border: 1px solid var(--border); }

/* Sticky-scroll feature reveal */
.ov-sections {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
}
.ov-sections__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 980px) { .ov-sections__grid { grid-template-columns: 1fr; gap: 36px; } }

.ov-feature {
  display: grid;
  gap: 18px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.ov-feature:first-of-type { border-top: none; }
.ov-feature__num {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-700);
  letter-spacing: 0.06em;
}
.ov-feature h2 {
  /* Promoted to h2 for the document outline; the display serif that h2
     normally carries is for section titles, not item titles. */
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.ov-feature p { color: var(--fg-muted); font-size: 15.5px; line-height: 1.65; }
.ov-feature ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 10px;
}
.ov-feature ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-2);
}
.ov-feature ul li::before {
  content: "→";
  color: var(--p-700);
  font-weight: 700;
}

.ov-sticky {
  position: sticky;
  top: 96px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: 6px;
}

/* The closing CTA on Overview is unique — full-width split */
.ov-finale {
  background: linear-gradient(165deg, #181024 0%, #d0c5fd 100%);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.ov-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 100% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(141, 171, 247, 0.20), transparent 60%);
}
.ov-finale__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) { .ov-finale__inner { grid-template-columns: 1fr; } }
.ov-finale h2 {
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
}
.ov-finale p {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 480px;
}
.ov-finale__ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.ov-finale__ctas .btn-primary {
  background: #fff;
  color: var(--p-700);
}
.ov-finale__ctas .btn-primary:hover { background: var(--p-50); }
.ov-finale__ctas .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}
.ov-finale__ctas .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

/* Stat block right side */
.ov-finale__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.ov-finale__stats > div {
  background: rgba(11, 18, 32, 0.4);
  padding: 28px;
}
.ov-finale__stats strong {
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.ov-finale__stats span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- HOW IT WORKS page ---------- */
.how-hero {
  padding: 80px 0 48px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(122, 95, 229, 0.08), transparent 60%);
}
.how-hero h1 {
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.how-hero h1 .ord {
  display: inline-block;
  font-size: 0.9em;
  background: linear-gradient(120deg, var(--p-700), var(--p-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* background-clip: text doesn't reach into the inline-block word spans
   created by the reveal-words splitter, so re-apply it per word */
.how-hero h1 .ord .word > span {
  background: linear-gradient(120deg, var(--p-700), var(--p-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.how-hero p {
  max-width: 580px;
  margin: 22px auto 0;
  font-size: 17px;
  color: var(--fg-muted);
}

/* The big step labels */
.how-rail {
  position: relative;
  margin: 60px 0 80px;
  padding: 28px 0;
}
.how-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5%; right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(122, 95, 229, 0.3) 8%,
    rgba(122, 95, 229, 0.6) 50%,
    rgba(122, 95, 229, 0.3) 92%,
    transparent);
  filter: drop-shadow(0 0 6px rgba(122, 95, 229, 0.3));
}
.how-rail__inner {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.how-rail__node {
  position: relative;
  width: 64px; height: 64px;
  background: #fff;
  border: 2px solid var(--p-700);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--p-700);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(122, 95, 229, 0.08), 0 12px 30px -10px rgba(11, 18, 32, 0.18);
}
.how-rail__node::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .how-rail__inner { flex-direction: column; gap: 64px; }
  .how-rail::before { left: 50%; right: auto; top: 5%; bottom: 5%; width: 2px; height: auto; }
}

/* Each step gets a hero-sized section */
.how-step {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.how-step:nth-child(odd) { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how-step:nth-child(even) { background: var(--bg); }
.how-step__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.how-step--reverse .how-step__inner { grid-template-columns: 1.2fr 1fr; }
.how-step--reverse .how-step__copy { order: 2; }
.how-step--reverse .how-step__visual { order: 1; }
@media (max-width: 980px) {
  .how-step__inner, .how-step--reverse .how-step__inner { grid-template-columns: 1fr; gap: 36px; }
  .how-step--reverse .how-step__copy, .how-step--reverse .how-step__visual { order: initial; }
}

.how-step__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-700);
}
.how-step__num span {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--p-700);
  color: #fff;
}
.how-step h2 {
  margin-top: 18px;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
}
.how-step__copy p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.65;
}
.how-step__copy ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.how-step__copy ul li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.how-step__copy ul li > span {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  color: var(--p-700);
  font-weight: 700;
  font-size: 12px;
  font-family: ui-monospace, monospace;
}
.how-step__copy ul li > div strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.how-step__copy ul li > div p {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--fg-muted);
}

/* Step 1 visual: AI prompt modal */
.how-promptcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 30px 60px -20px rgba(11, 18, 32, 0.18);
  position: relative;
}
.how-promptcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-700);
  margin-bottom: 14px;
}
.how-promptcard__head .badge {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--p-500), var(--p-700));
  color: #fff;
}
.how-promptcard__input {
  border: 1px solid var(--p-300);
  background: var(--p-50);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.how-promptcard__input span { display: inline-block; }
.how-promptcard__input .cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--p-700);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
.how-promptcard__sugg {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.how-promptcard__sugg span {
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg-2);
  cursor: pointer;
}
.how-promptcard__sugg span:hover { border-color: var(--p-300); color: var(--p-700); background: var(--p-50); }
.how-promptcard__output {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: grid;
  gap: 8px;
}
.how-promptcard__output .step-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
}
.how-promptcard__output .step-line .check {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}
.how-promptcard__output .step-line.is-active .check {
  background: var(--p-700);
  border-color: var(--p-700);
  color: #fff;
}
.how-promptcard__output .step-line .check svg { display: block; }

/* Step 2 visual: drag scene */
.how-dragscene {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(11, 18, 32, 0.18);
}
.how-dragscene__palette {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.how-dragscene__palette > div {
  height: 50px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
}
.how-dragscene__palette > div::after {
  content: "";
  width: 32px; height: 4px;
  background: var(--fg-faint);
}
.how-dragscene__palette > div.is-grabbed {
  background: var(--p-50);
  border-color: var(--p-700);
  border-style: dashed;
}
.how-dragscene__palette > div.is-grabbed::after { background: var(--p-500); }
.how-dragscene__canvas {
  padding: 22px;
  position: relative;
  min-height: 360px;
}
.how-dragscene__block {
  background: #fff;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
}
.how-dragscene__block .ln { height: 6px; background: var(--fg-2); border-radius: 999px; width: 60%; }
.how-dragscene__block .ln + .ln { margin-top: 4px; width: 40%; background: var(--fg-faint); }
.how-dragscene__drop {
  height: 80px;
  border: 2px dashed var(--p-500);
  background: var(--p-50);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
}
.how-dragscene__pointer {
  position: absolute;
  bottom: 24px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.how-dragscene__pointer svg { color: var(--p-700); filter: drop-shadow(0 4px 6px rgba(11,18,32,0.2)); }
.how-dragscene__pointer span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--p-700);
  padding: 3px 8px;
}
.how-dragscene__floating {
  position: absolute;
  bottom: 56px;
  right: 50px;
  background: rgba(11, 18, 32, 0.92);
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  font-size: 11px;
  align-items: center;
}
/* Spans, not buttons — they were never interactive, and as <button> they put
   three dead stops in the keyboard tab order. */
.how-dragscene__floating span {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  border-radius: 3px;
}

/* Step 3 visual: live publish */
.how-publishcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(11, 18, 32, 0.18);
}
.how-publishcard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}
.how-publishcard__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 5px 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-2);
}
.how-publishcard__url::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-ring 2s infinite;
}
.how-publishcard__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #047857;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.how-publishcard__page {
  padding: 32px;
  background: linear-gradient(180deg, var(--p-50), #fff);
}
/* Scoped to beat `.how-publishcard__page p`, which is one type selector
   stronger than a bare class and was overriding the title's size. */
.how-publishcard__page .how-publishcard__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.how-publishcard__page p { color: var(--fg-muted); font-size: 13px; }
.how-publishcard__page .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.how-publishcard__page .row > div {
  height: 64px;
  background: #fff;
  border: 1px solid var(--p-200);
  border-radius: 4px;
}
.how-publishcard__page .ctas {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.how-publishcard__page .ctas span {
  height: 28px; width: 80px;
  background: var(--p-700);
}
.how-publishcard__page .ctas span:nth-child(2) { background: #fff; border: 1px solid var(--border); }

.how-publishcard__metrics {
  padding: 14px 16px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.how-publishcard__metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.how-publishcard__metrics strong {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.how-publishcard__metrics span {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* How: closing FAQ band */
.how-faq {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.how-faq h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
}
.how-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .how-faq__grid { grid-template-columns: 1fr; } }
.how-faq details {
  background: #fff;
  border: 1px solid var(--border);
  padding: 20px 24px;
}
.how-faq details[open] { border-color: var(--p-300); background: var(--p-50); }
.how-faq summary {
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.how-faq summary::-webkit-details-marker { display: none; }
.how-faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--p-700);
  line-height: 1;
}
.how-faq details[open] summary::after { content: "−"; }
.how-faq details > p {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* How: end CTA — single line band */
.how-end {
  padding: 56px 0;
  background: var(--p-700);
  color: #fff;
  text-align: center;
}
.how-end h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: #fff;
}
.how-end p { color: rgba(255, 255, 255, 0.78); margin-bottom: 24px; font-size: 15px; }
.how-end .btn-primary { background: #fff; color: var(--p-700); }
.how-end .btn-secondary { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }

/* ===========================================================================
   Layout corrections — measured, not guessed
   =========================================================================== */

/*
 * Floating chips belong beside the mockup, never on top of it.
 *
 * They were offset −12/−16px from the preview box, which straddles the stage
 * edge, so at *every* viewport width the "Auto-saved" chip covered the
 * "Components" label and the presence chip covered "Spacing" — sitting on the
 * exact words they exist to draw attention to.
 *
 * Anchoring the chip's inner edge to the stage edge keeps it clear whatever the
 * chip's own width. Below the width where the page has a gutter to hold them,
 * they are dropped outright: an absent flourish beats one obscuring a label.
 */
.float-chip { display: none; }

@media (min-width: 1340px) {
  .float-chip { display: inline-flex; }
  .float-chip--saved { top: 12%;    right: calc(100% - 14px); left: auto; }
  .float-chip--users { top: 42%;    left:  calc(100% - 14px); right: auto; }
  .float-chip--live  { bottom: 12%; right: calc(100% - 14px); left: auto; }
}

/*
 * Reference tables scroll rather than widening the page.
 *
 * `.props` needs about 440px to lay out its four columns, so on a 375px screen
 * it pushed the whole document sideways — every section then scrolled a little,
 * which reads as a broken page rather than a wide table.
 */
@media (max-width: 720px) {
  .props {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Illustrations inside cards scale with the card instead of setting its width. */
.card svg[viewBox] { max-width: 100%; height: auto; }

/* ===========================================================================
   Template cards — the label leaves the artwork
   ===========================================================================
   A black "Live demo" pill used to sit on top of each mock, where it collided
   with that mock's own header: four heavy pills were the loudest thing in a
   section whose whole job is to show the work. Moving the label into the meta
   row removes the collision by construction rather than by nudging offsets, and
   lets it say what clicking does.
   =========================================================================== */

.template-thumb { border-bottom-color: transparent; transition: border-color 0.35s var(--ease); }
.template-card:hover .template-thumb { border-bottom-color: var(--border); }

.template-meta { align-items: flex-end; gap: 16px; }

/* ===========================================================================
   Showcase panels — show the product, not a scorecard
   ===========================================================================
   All four panels previously shared one shape: labelled progress bars. A bar at
   65% for "Maya is editing Hero" encodes nothing, and the design panel invented
   a polish score, a conversion lift and an AI recommendation the product does
   not produce. Each panel now uses the form its content actually has — code for
   code, a timeline for activity, a checklist for a deploy.

   Palette stays inside the existing tokens. The amber and green bars were the
   only place those hues appeared on the site.
   =========================================================================== */

.pv {
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 14px);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(24, 16, 36, 0.16);
}

.pv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.pv__path {
  font: 12px/1 var(--font-mono);
  color: var(--fg-muted);
}
.pv__meta {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- design: canvas beside the code it produces --- */
.pv__split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.pv__stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(circle at 1px 1px, rgba(24,16,36,0.07) 1px, transparent 0) 0 0 / 14px 14px;
}
.pv__sel {
  position: relative;
  border: 1.5px solid var(--p-500);
  border-radius: 10px;
  padding: 18px;
  background: #fff;
}
.pv__seltag {
  position: absolute;
  top: -10px; left: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--p-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pv__block { display: flex; flex-direction: column; gap: 9px; }
.pv__line { height: 9px; border-radius: 3px; background: var(--fg); display: block; }
.pv__line--lg { width: 82%; }
.pv__line--md { width: 58%; background: var(--border-2); }
.pv__cta { display: block; width: 74px; height: 24px; border-radius: 6px; background: var(--p-600); }


.pv__code {
  margin: 0;
  padding: 22px;
  overflow-x: auto;
  font: 12.5px/1.75 var(--font-mono);
  color: var(--fg-2);
  background: #fff;
  tab-size: 2;
}
.pv__code--wide { border-top: 0; }
.pv__code .c-sel,
.pv__code .c-tag  { color: var(--p-700); font-weight: 600; }
.pv__code .c-prop { color: var(--fg-2); }
.pv__code .c-val  { color: var(--fg-muted); }
.pv__code .c-cmt  { color: var(--fg-faint); font-style: italic; }

/* --- collaborate: a timeline, because the timestamps are the information --- */
.pv__feed { list-style: none; margin: 0; padding: 8px 0; }
.pv__feed li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bg-mute);
  font-size: 13.5px;
  color: var(--fg-2);
}
.pv__feed li:last-child { border-bottom: 0; }
.pv__who {
  flex: none;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--who) 16%, #fff);
  color: var(--who);
  font-size: 11px; font-weight: 700;
}
.pv__what { flex: 1 1 auto; min-width: 0; }
.pv__what b { font-weight: 650; color: var(--fg); }
.pv__feed time { flex: none; font: 11px/1 var(--font-mono); color: var(--fg-faint); }

/* --- publish: a checklist with the durations that were actually measured --- */
.pv__steps { list-style: none; margin: 0; padding: 8px 0; counter-reset: step; }
.pv__steps li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--bg-mute);
  font-size: 13.5px;
  color: var(--fg-2);
}
.pv__steps li:last-child { border-bottom: 0; }
.pv__tick {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  position: relative;
}
.pv__steps li.is-done .pv__tick { background: var(--p-600); border-color: var(--p-600); }
.pv__steps li.is-done .pv__tick::after {
  content: "";
  position: absolute; inset: 0;
  background: no-repeat center / 10px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
}


.pv__foot {
  margin: 0;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-muted);
}

@media (max-width: 880px) {
  .pv__split { grid-template-columns: minmax(0, 1fr); }
  .pv__stage { border-right: 0; border-bottom: 1px solid var(--border); }
}

/*
 * The panel fills its column instead of leaving a void beside the accordion.
 *
 * `align-items: start` on the showcase grid let the panel end wherever its
 * content did — with the scorecard's bars gone the panel got shorter, leaving
 * roughly 270px of empty column beside four stacked accordion cards.
 */
@media (min-width: 881px) {
  .showcase { align-items: stretch; }
  /*
   * `:not([hidden])` is load-bearing. The tab script hides the inactive panels
   * with the `hidden` attribute, which works through `display: none` in the user
   * agent stylesheet — and any author `display` declaration beats it. Writing
   * `.pv { display: flex }` unhid all four panels and stacked them down the page.
   */
  .pv:not([hidden]) { display: flex; flex-direction: column; }
  .pv__split { flex: 1 1 auto; }
  .pv__stage { justify-content: center; }
  /* Code sits optically centred in its half rather than jammed to the top. */
  .pv__code { display: grid; align-content: center; }
  .pv__feed, .pv__steps { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}

/* ===========================================================================
   Breakpoint comparison — the proportions are the content
   ===========================================================================
   A section headed "one canvas, three views" was three equal-width cards
   describing three different widths in prose: the one layout that cannot
   demonstrate its own subject, and the same three-up grid the builder and
   publish pages already used.

   Here the column widths are the breakpoints — 1.44fr / 0.82fr / 0.39fr — and
   the same mock section reflows inside each: three columns, then two, then one,
   with the navigation collapsing to a menu button at the narrowest. The panels
   share a baseline so the eye compares them rather than reading them in turn.
   =========================================================================== */

.views {
  display: grid;
  grid-template-columns: 1.44fr 0.82fr 0.39fr;
  gap: 20px;
  align-items: end;
}

.views__item { margin: 0; min-width: 0; }

.views__frame {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px -18px rgba(24, 16, 36, 0.18);
}

.views__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-mute);
}
.views__brand { width: 22px; height: 7px; border-radius: 2px; background: var(--fg); flex: none; }
.views__links { display: flex; gap: 7px; margin-left: auto; }
.views__links i { width: 16px; height: 4px; border-radius: 2px; background: var(--border-2); display: block; }
.views__cta { width: 26px; height: 10px; border-radius: 3px; background: var(--p-500); flex: none; }
.views__burger { display: grid; gap: 3px; margin-left: auto; }
.views__burger i { width: 12px; height: 2px; border-radius: 1px; background: var(--fg-dim); display: block; }

.views__hero { display: grid; gap: 5px; padding: 4px 0 2px; }
.views__h { height: 8px; border-radius: 2px; background: var(--fg); display: block; }
.views__h--short { width: 62%; }
.views__p { height: 4px; width: 78%; border-radius: 2px; background: var(--border-2); display: block; }

/* The single declaration that carries the whole point of the section. */
.views__cards { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.views__cards i {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-mute);
}

.views__item figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.views__w {
  font: 700 12px/1 var(--font-mono);
  color: var(--p-700);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--p-50);
}
.views__item figcaption em {
  flex: 1 1 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-muted);
}

/*
 * Below the point where the narrowest frame stops being legible, the comparison
 * becomes a stack — but each frame keeps a width proportional to its
 * breakpoint, because that relationship is the whole argument.
 */
@media (max-width: 860px) {
  .views { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: start; }
  .views__item { width: 100%; }
  .views__item:nth-child(2) { max-width: 68%; }
  .views__item:nth-child(3) { max-width: 40%; }
}
@media (max-width: 520px) {
  .views__item:nth-child(2) { max-width: 82%; }
  .views__item:nth-child(3) { max-width: 56%; }
}

/* ===========================================================================
   The drag, as its four moments
   ===========================================================================
   This slot held three interchangeable feature cards in the same three-up grid
   the responsive and publish pages used, on a page whose entire subject is
   direct manipulation. A drag has a sequence, so the numbering here carries
   information instead of decorating: pick up, move, see the target, adjust.
   =========================================================================== */

.drag {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.drag__step { min-width: 0; }

.drag__frame {
  position: relative;
  height: 132px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 1px 1px, rgba(24,16,36,0.07) 1px, transparent 0) 0 0 / 12px 12px,
    #fff;
  overflow: hidden;
}

/* The component tray, pinned left in every frame so the eye has a fixed anchor. */
.drag__tray {
  position: absolute;
  top: 10px; left: 10px; bottom: 10px;
  width: 26px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 5px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-mute);
}
.drag__tray i { display: block; height: 6px; border-radius: 2px; background: var(--border-2); }

.drag__block {
  position: absolute;
  width: 44px; height: 22px;
  border-radius: 5px;
  background: var(--p-600);
}
/* 1 — still in the tray. 2 — lifted, with a shadow. 3 — over the target.
   4 — seated in a slot with a selection ring. */
.drag__block--tray   { left: 14px; top: 16px; width: 18px; height: 10px; }
.drag__block--lift   { left: 52px; top: 40px; box-shadow: 0 10px 18px -8px rgba(122,95,229,0.65); transform: rotate(-2deg); }
.drag__block--snap   { right: 16px; top: 52px; box-shadow: 0 8px 14px -8px rgba(122,95,229,0.5); }
.drag__block--placed { position: static; display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--p-600); }

.drag__guide { position: absolute; background: var(--p-500); opacity: 0.55; }
.drag__guide--y { top: 8px; bottom: 8px; right: 60px; width: 1px; }
.drag__guide--x { left: 44px; right: 10px; top: 46px; height: 1px; }

/*
 * Step four is the component seated and selected. An earlier version wrapped it
 * in a tinted slot, which read as an empty placeholder rather than something
 * that had landed — the ring alone says "selected" without washing the block out.
 */
.drag__slot {
  position: absolute;
  right: 14px; top: 48px;
  width: 48px; height: 26px;
  border-radius: 5px;
  outline: 1.5px solid var(--p-500);
  outline-offset: 3px;
  display: block;
}

.drag__step h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--fg);
}
.drag__n {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--p-50);
  border: 1px solid var(--p-200);
  font: 700 11px/1 var(--font-mono);
  color: var(--p-700);
}
.drag__step p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}

@media (max-width: 900px) { .drag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 520px) { .drag { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
   Feature-page heroes — three silhouettes, three real screenshots
   ===========================================================================
   All three feature pages shared one hero: centred kicker, a two-line headline
   whose second line was purple, a paragraph, two buttons, then a full-width
   drawing. Three pages selling three different capabilities opened identically.

   Each now has a shape that comes from its own subject, and shows the editor
   itself rather than an illustration of it — the product exists, so there is no
   reason to draw a picture of it.
   =========================================================================== */

.phero { padding: 68px 0 0; overflow: hidden; }
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.phero__copy .kicker { display: inline-block; }
.phero__copy h1 { text-align: left; }
.phero__copy p {
  margin-top: 18px;
  max-width: 46ch;
  text-align: left;
  font-size: 17px;
  line-height: 1.62;
  color: var(--fg-muted);
}
.phero__copy .hero__ctas { justify-content: flex-start; }

.phero__shot { margin: 0; }
.phero__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 40px 90px -40px rgba(24, 16, 36, 0.34);
}

/* Builder: landscape, and it runs off the right edge so the tool reads as
   bigger than the page rather than as a framed picture of itself. The copy
   column is narrow and the bleed deep on purpose — at the first attempt the
   whole editor was scaled into ~700px and every label in it turned to mush,
   which reads as a low-quality image rather than a real product. */
.phero--bleed .phero__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
.phero--bleed .phero__shot { margin-right: -18vw; }
/*
 * This headline is long, and at the display size the other heroes use it ran to
 * five lines in a narrowed column and pushed the paragraph and buttons off the
 * first screen. Slightly smaller here, so the whole proposition is visible at
 * once — which is the only thing a hero has to do.
 */
.phero--bleed .phero__copy h1 { font-size: clamp(2.1rem, 3.4vw, 3.15rem); }

/* Responsive: mirrored, and portrait — the shape of the thing it shows. */
.phero--mirror .phero__grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
.phero__shot--tall { max-width: 340px; margin-left: auto; }
.phero__shot--tall img { border-radius: 14px; }

/* Publish: centred copy, then the real export at full width. */
.phero--stacked { text-align: center; }
.phero--stacked .hero__ctas { justify-content: center; }
.phero--stacked p { margin-left: auto; margin-right: auto; max-width: 60ch; }
.phero__wide {
  margin: 52px auto 0;
  max-width: 1180px;
  padding: 0 24px;
}
.phero__wide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  box-shadow: 0 -10px 60px -30px rgba(24, 16, 36, 0.3);
}

/* The breakpoint row on the responsive hero: the numbers are the content. */
.bpset { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.bpset li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--fg-muted);
}
.bpset b { font: 700 12.5px/1 var(--font-mono); color: var(--p-700); }

@media (max-width: 900px) {
  .phero { padding-top: 44px; }
  .phero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .phero--mirror .phero__grid { grid-template-columns: minmax(0, 1fr); }
  /* On one column the mirrored hero leads with its words, not its picture. */
  .phero--mirror .phero__shot--tall { order: 2; margin: 0 auto; }
  .phero--mirror .phero__copy { order: 1; }
  /*
   * `.phero--bleed .phero__grid` above is (0,2,0) and sits outside any media
   * query, so the single-column rule two lines up — (0,1,0) — never beat it and
   * this one hero stayed two columns on every phone: a 127px copy column with
   * the headline wrapping to one word per line. `.phero--mirror` was reset here
   * and `--bleed` was not.
   */
  .phero--bleed .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .phero--bleed .phero__shot { margin-right: 0; }
  .phero__shot--tall { max-width: 280px; }
}

/* ===========================================================================
   Legal and policy documents
   ===========================================================================
   A document, not a marketing page: one narrow column of prose at a readable
   measure, a contents list that stays put while you scroll, and numbered
   sections you can link someone straight to. Deliberately unlike every other
   section on the site, because it is doing a different job — these pages exist
   to be read closely and quoted from, not scanned.
   =========================================================================== */

.legal { padding: 64px 0 96px; }

.legal__head { max-width: 62ch; }
.legal__head h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; }
.legal__lead {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--fg-2);
}
.legal__stamp {
  margin-top: 18px;
  font: 12px/1 var(--font-mono);
  color: var(--fg-faint);
}

.legal__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  margin-top: 52px;
  align-items: start;
}

.legal__toc { position: sticky; top: 96px; }
.legal__toc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  border-left: 1px solid var(--border);
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-muted);
  text-decoration: none;
}
.legal__toc a::before {
  content: counter(toc) ". ";
  color: var(--fg-faint);
  font: 11px/1 var(--font-mono);
}
.legal__toc a:hover { color: var(--p-700); border-left-color: var(--p-300); }

.legal__body { max-width: 68ch; counter-reset: sec; }
.legal__sec { counter-increment: sec; padding-top: 8px; }
.legal__sec + .legal__sec { margin-top: 42px; padding-top: 42px; border-top: 1px solid var(--border); }
.legal__sec h2 {
  display: flex;
  gap: 12px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--fg);
  /* The section numbers are how someone cites a clause back at us. */
  scroll-margin-top: 96px;
}
.legal__sec h2::before {
  content: counter(sec);
  flex: none;
  font: 700 13px/1.55 var(--font-mono);
  color: var(--p-600);
}
.legal__sec p { margin-top: 14px; font-size: 15.5px; line-height: 1.72; color: var(--fg-2); }
.legal__sec ul { margin: 14px 0 0; padding-left: 20px; }
.legal__sec li { font-size: 15.5px; line-height: 1.72; color: var(--fg-2); margin-top: 8px; }
.legal__sec b { font-weight: 650; color: var(--fg); }
.legal__sec code {
  font: 13px/1 var(--font-mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg-2);
}
.legal__sec a { color: var(--p-700); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 880px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .legal__toc { position: static; }
  .legal__toc ol { display: flex; flex-wrap: wrap; gap: 2px 14px; border-left: 0; }
  .legal__toc a { padding: 4px 0; border-left: 0; }
}

/* ===========================================================================
   Changelog — dated entries, newest first
   ===========================================================================
   The date column is the structure: it is what someone scanning this page is
   actually looking for. Not a card grid, because these entries are a sequence.
   =========================================================================== */

.log__head { max-width: 58ch; }
.log__head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--fg-muted); }
.log { margin-top: 52px; }

.log__entry {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--border);
}
.log__entry:last-child { border-bottom: 1px solid var(--border); }
.log__when time {
  font: 12px/1.4 var(--font-mono);
  color: var(--fg-faint);
  /* Sticks while its own entry is on screen, so the date stays with the text. */
  position: sticky;
  top: 96px;
  display: block;
}
.log__what h2 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--fg); }
.log__what ul { margin: 14px 0 0; padding-left: 20px; }
.log__what li { font-size: 15px; line-height: 1.7; color: var(--fg-2); margin-top: 8px; }

@media (max-width: 720px) {
  .log__entry { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .log__when time { position: static; }
}

/* ===========================================================================
   Support — three routes, then the questions people actually ask
   =========================================================================== */

.sup__head { max-width: 56ch; }
.sup__head p { margin-top: 16px; font-size: 17px; color: var(--fg-muted); }

.sup__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.sup__route {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 14px);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sup__route:hover {
  border-color: var(--p-300);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(122, 95, 229, 0.3);
}
/* Numbered because these are ordered by what to try first, not decoration. */
.sup__num { font: 700 12px/1 var(--font-mono); color: var(--p-500); letter-spacing: 0.04em; }
.sup__route h2 { font-size: 17px; font-weight: 650; color: var(--fg); }
.sup__route p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); flex: 1 1 auto; }
.sup__go { font-size: 13px; font-weight: 600; color: var(--p-700); }

.sup__common { margin-top: 72px; max-width: 72ch; }
.sup__common h2 { font-size: 21px; font-weight: 650; color: var(--fg); }
.sup__common dl { margin: 24px 0 0; }
.sup__common dt {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  font-weight: 650;
  color: var(--fg);
}
.sup__common dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sup__common dd { margin: 10px 0 0; font-size: 15.5px; line-height: 1.72; color: var(--fg-2); }

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

/* ===========================================================================
   Careers — a statement, then how we work
   =========================================================================== */

.care__head { max-width: 60ch; }
.care__head h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.care__lead { margin-top: 18px; font-size: 17.5px; line-height: 1.62; color: var(--fg-2); }

.care__how { margin-top: 84px; padding-top: 40px; border-top: 1px solid var(--border); }
.care__how h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.care__pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  margin-top: 28px;
  max-width: 78ch;
}
.care__pairs h3 { font-size: 17px; font-weight: 650; color: var(--fg); }
.care__pairs p { margin-top: 9px; font-size: 15px; line-height: 1.7; color: var(--fg-muted); }

@media (max-width: 760px) { .care__pairs { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ===========================================================================
   Template cards, second pass — let the work be the loudest thing
   ===========================================================================
   The first pass moved the "Live demo" badge out of the artwork, which fixed the
   collision but left four identical bordered pills in a row — the heaviest
   element in each card, in a section whose job is to show four *different*
   pieces of work. The card is already a link, so the pill was repeating what the
   card said and outweighing the template's name while doing it.

   The pill is gone. The preview takes more of the card, the label is one quiet
   line, and the arrow only asserts itself on hover.
   =========================================================================== */

/*
 * The artwork keeps its own 4:3 ratio. Widening the frame to 16/11 to give the
 * preview more of the card cropped it instead: these SVGs are drawn on a 320x240
 * canvas and slice, so Lift lost its feature row and Stack lost the bottom of
 * its chart. The preview gains its space from the tighter label below rather
 * than from cutting the picture.
 */
.template-thumb { aspect-ratio: 4 / 3; }

.template-meta { align-items: center; padding: 16px 18px 18px; }

.template-meta .cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}
.template-meta__name { font-family: var(--font-sans); margin-top: 3px; font-size: 18px; letter-spacing: -0.015em; }

/* The live signal at the size the claim is worth: 5px, next to the category. */
.template-live {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2f8f6b;
  flex: none;
}


.template-card:hover .template-arrow {
  opacity: 1;
  color: var(--p-700);
  background: var(--p-50);
  transform: translateX(3px);
}

/* ===========================================================================
   Template gallery — the previews are the section
   ===========================================================================
   The previous version was a frame inside a frame: each preview already draws
   its own window, complete with traffic lights and an address bar, and that was
   then wrapped in a bordered white card. Four identical boxes in a rigid row,
   each containing a smaller box.

   The outer card is gone. Each preview sits on the page background lifted by a
   shadow, the row is staggered so it reads as a contact sheet rather than a
   grid, and the label is one line of type underneath. No arrow, no pill: the
   whole preview is the link and it rises when you point at it.
   =========================================================================== */

.tpl-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

/*
 * Aligned, not staggered. An earlier pass offset every other card to break the
 * grid rhythm; it read as misalignment, and it put the four names at four
 * different heights so reading the list meant zigzagging down the page.
 */
.tpl-row { align-items: start; }

.template-card {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

.template-card .template-thumb {
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* No outline — the artwork's own window chrome is the frame. Depth instead. */
  box-shadow:
    0 1px 0 rgba(24, 16, 36, 0.06),
    0 18px 34px -20px rgba(24, 16, 36, 0.26);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.template-card:hover .template-thumb {
  transform: translateY(-8px);
  box-shadow:
    0 1px 0 rgba(24, 16, 36, 0.06),
    0 34px 60px -26px rgba(122, 95, 229, 0.4);
}
.template-card:focus-visible .template-thumb { outline: 2px solid var(--p-500); outline-offset: 3px; }

.template-card .template-meta {
  /*
   * A row, not a block. `display: block` here overrode the flex layout further
   * up, which dropped the 34px arrow onto its own line under every template
   * name where it read as a stray empty box.
   */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 2px 0;
}
.template-card .template-meta .cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.template-card .template-meta__name {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.template-card:hover .template-meta__name { color: var(--p-700); }

@media (max-width: 1000px) {
  .tpl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .tpl-row .template-card:nth-child(even) { margin-top: 0; }
  .tpl-row .template-card:nth-child(n+3) { margin-top: 14px; }
}
@media (max-width: 600px) {
  .tpl-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .tpl-row .template-card:nth-child(n) { margin-top: 0; }
}


/*
 * The badge that sits where the avatar pile used to.
 *
 * That pile showed four photographs of real people, fetched from a third party
 * and captioned "2,847 Active Users" — a number that was hardcoded and nudged at
 * random every five seconds. The slot says something true now.
 */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--fg-muted);
}

/* The three-card row under the selected hero, so the stage shows a section
   rather than a single floating block on a large empty field. */
.pv__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv__row span {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--border);
}

/* ===========================================================================
   Publishing, as the sequence it is
   ===========================================================================
   Replaces three cards in the same three-up grid two other feature pages used,
   on the one page whose subject is explicitly a series of steps in order. The
   rule running through the markers is the sequence; it is the only decoration
   here and it carries the meaning.
   =========================================================================== */

.ship {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ship;
}
.ship__step { position: relative; counter-increment: ship; padding-top: 34px; }

/* The connecting rule, drawn between markers rather than under everything. */
.ship__step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 18px;
  right: -28px;
  height: 1px;
  background: var(--border-2);
}
.ship__step:last-child::before { display: none; }

.ship__dot {
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--p-300);
  display: grid;
  place-items: center;
}
.ship__dot::after {
  content: counter(ship);
  font: 700 9.5px/1 var(--font-mono);
  color: var(--p-700);
}
.ship__step.is-live .ship__dot { background: var(--p-600); border-color: var(--p-600); }
.ship__step.is-live .ship__dot::after { color: #fff; }

.ship__step h3 { font-size: 16px; font-weight: 650; color: var(--fg); }
.ship__step p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--fg-muted); }

@media (max-width: 900px) {
  .ship { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
  .ship__step:nth-child(2)::before { display: none; }
}
@media (max-width: 560px) {
  .ship { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ship__step::before { display: none; }
}

/* ===========================================================================
   Canvas and code, visibly the same thing
   ===========================================================================
   The panel asserts that what you drag is what publishes, then showed two
   unrelated halves: nothing on the left corresponded to `padding: 32px` on the
   right. The block carries the editor's own annotations now — the dashed padding
   inset and the radius marker it really draws — and the three values they report
   are marked in the listing, so the pairing is visible rather than claimed.

   The three cards were empty outlined rectangles, which is the placeholder look
   that made the Market template read as unfinished. They have content.
   =========================================================================== */

.pv__sel { position: relative; }

/* The padding inset, drawn where the editor draws it. */
.pv__pad {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(122, 95, 229, 0.55);
  border-radius: 6px;
  pointer-events: none;
}
.pv__pad b,
.pv__rad b {
  position: absolute;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--p-700);
  background: #fff;
  padding: 1px 3px;
  border-radius: 2px;
}
.pv__pad b { top: -6px; left: 50%; transform: translateX(-50%); }

/* The radius marker: a quarter arc hugging the corner it describes. */
.pv__rad {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 26px; height: 26px;
  border-right: 1px solid rgba(122, 95, 229, 0.55);
  border-bottom: 1px solid rgba(122, 95, 229, 0.55);
  border-bottom-right-radius: 10px;
  pointer-events: none;
}
.pv__rad b { right: -4px; bottom: -13px; }

/* Cards with something in them. */
.pv__row span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  aspect-ratio: 4 / 3;
  padding: 9px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--border);
}
.pv__row i {
  display: block;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--p-100);
  border: 1px solid var(--p-200);
  flex: none;
}
.pv__row em { display: block; height: 4px; border-radius: 2px; background: var(--bg-mute); }
.pv__row em.is-short { width: 62%; }

.pv__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-faint);
}

/* The three values the annotations report, marked in the listing. */
.pv__code .c-tie {
  color: var(--p-700);
  font-weight: 600;
  background: var(--p-50);
  border-bottom: 1px solid var(--p-200);
  padding: 0 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- docs search */
/*
 * A native <dialog>, so the backdrop, modality, focus containment and Escape
 * are the platform's job rather than this file's.
 */
.docs-find {
  width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  padding: 0;
  margin: 12vh auto auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 32px 80px -24px rgba(24, 16, 36, 0.4);
  overflow: hidden;
}
.docs-find::backdrop { background: rgba(24, 16, 36, 0.4); }
.docs-find__form { display: flex; flex-direction: column; max-height: inherit; }
.docs-find__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-faint);
}
.docs-find__bar svg { flex: none; }
.docs-find__input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  font: 500 15px/1.4 var(--font-sans);
  color: var(--fg);
  background: none;
}
/* The dialog itself is the focus indicator here; a ring inside it would only
   draw a box around the whole bar. */
.docs-find__input:focus { outline: none; }
.docs-find__input::placeholder { color: var(--fg-faint); font-weight: 400; }
.docs-find__bar kbd {
  flex: none;
  padding: 2px 6px;
  font: 600 10px/1.5 var(--font-mono);
  color: var(--fg-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.docs-find__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}
.docs-find__hit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  font-size: 14px;
  color: var(--fg);
  border-radius: 8px;
  cursor: pointer;
}
.docs-find__hit em { font-style: normal; font-size: 11px; color: var(--fg-faint); }
.docs-find__hit.is-active { background: var(--p-50); color: var(--p-700); }
.docs-find__hit.is-active em { color: var(--p-600); }
.docs-find__none { padding: 18px 11px; font-size: 13px; color: var(--fg-faint); }
.docs-find__help {
  margin: 0;
  padding: 9px 15px;
  font-size: 11px;
  color: var(--fg-faint);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

/* The template gallery. Four templates in a three-column grid left the fourth
   stranded on a row of its own; two-up also gives the previews the size they
   deserve on the page whose whole job is showing them. */
.tpl-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}
@media (max-width: 760px) {
  .tpl-gallery { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------------------------------------------------------------- the output */
/*
 * Deliberately not a card grid. This section replaced one that restated the
 * showcase above it, and three equal cards is exactly the shape that made them
 * interchangeable; a list of claims beside the actual file listing is a
 * different thing to look at.
 */
.out {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
  margin-top: 52px;
}
@media (max-width: 900px) { .out { grid-template-columns: 1fr; gap: 40px; } }

.out__facts dl { margin: 0; display: grid; gap: 30px; }
.out__facts dt {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-bottom: 7px;
}
.out__facts dd { margin: 0; font-size: 15px; line-height: 1.62; color: var(--fg-muted); }
.out__facts code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 1px 5px;
  color: var(--p-700);
  background: var(--p-50);
  border-radius: 4px;
}
.out__note {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--fg-muted);
}
.out__note b { color: var(--fg); font-weight: 700; }

/* The file listing. A real directory, so it is typeset like one. */
.out__tree {
  margin: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.out__tree figcaption {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.out__tree ol { margin: 0; padding: 10px 0; list-style: none; counter-reset: none; }
.out__tree li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 18px;
}
.out__f {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
/* The one file that carries every page's styling earns the accent. */
.out__f.is-css { color: var(--p-700); font-weight: 600; }
.out__tree li.is-dir .out__f { color: var(--fg-muted); }
.out__tree em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--fg-faint);
  white-space: nowrap;
}
.out__host {
  margin: 0;
  padding: 14px 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

/* A plan feature that is intended but not built yet. Listing it with the same
   tick as a shipped one is a claim the product cannot keep, so it reads
   differently and says so. */
.price-card li.is-planned { color: var(--fg-faint); }
.price-card li.is-planned span { display: inline-block; width: 14px; text-align: center; }
.price-card li.is-planned em {
  font-style: normal;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* The plan-comparison table. A four-column table cannot fit a phone, so it
   scrolls sideways rather than having its last column clipped off by the card's
   own rounded overflow. `min-width` on the table is what gives it something to
   scroll. */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }