/* Walkmic site styles.
   Every value comes from .claude/skills/landing-page-design:
   type = Tailwind scale pairs, spacing = B2 table, radius = Tailwind radii, motion = B7 curve. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
}

:root {
  /* colour */
  --bg: #fafaf7;
  --surface: #ffffff;
  --text: #0a0a0a;
  --muted: #5c5c57;
  --border: #e5e4de;
  --accent: #e8590c;
  --dark: #181818;
  --dark-raised: #272727;
  --success: #2b7a3d;
  --error: #b42318;

  /* spacing (B2) */
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* radius (Tailwind) */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* motion (B7) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* type scale (B1): size / line height pairs */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--s-900); }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-lg { width: 24px; height: 24px; flex: none; }

.container {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 var(--s-200);
}
@media (min-width: 640px) { .container { padding: 0 var(--s-300); } }
@media (min-width: 1024px) { .container { padding: 0 var(--s-400); } }

.section { padding: var(--s-700) 0; }
@media (min-width: 1024px) { .section { padding: var(--s-900) 0; } }

.eyebrow { color: var(--accent); font-weight: 600; }
.muted { color: var(--muted); }
.section-head { max-width: 680px; display: grid; gap: var(--s-200); margin-bottom: var(--s-600); }
.section-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 1024px) { .section-head h2 { font-size: 2.25rem; line-height: 2.5rem; } }

/* skip link (B10) */
.skip-link {
  position: absolute;
  left: var(--s-200);
  top: var(--s-200);
  z-index: 100;
  padding: var(--s-75) var(--s-100);
  background: var(--text);
  color: var(--surface);
  border-radius: var(--r-lg);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* focus ring (B9) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* buttons (B1, B2, B9) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 300ms var(--ease), background-color 300ms var(--ease), opacity 300ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--text); color: var(--surface); }
.btn-primary:hover { background: var(--dark-raised); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-sm { font-size: 0.875rem; line-height: 1.25rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* nav (B7 navigation) */
.nav {
  position: fixed;
  top: var(--s-200);
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - var(--s-400));
  display: flex;
  align-items: center;
  gap: var(--s-300);
  padding: var(--s-75);
  padding-left: var(--s-200);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}
/* nested radius: 16px outer, 8px gap, so the button gets 8px */
.nav .btn { border-radius: var(--r-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--s-75); font-weight: 600; text-decoration: none; }
.brand-mark { width: 24px; height: 24px; }
.nav-links { display: none; gap: var(--s-300); }
.nav-links a { color: var(--muted); text-decoration: none; transition: opacity 300ms var(--ease), color 300ms var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="true"],
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-cta { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

.nav-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: var(--s-100);
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: var(--r-full);
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.nav-toggle span:nth-child(1) { top: var(--s-200); }
.nav-toggle span:nth-child(2) { top: var(--s-300); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-300);
  padding: var(--s-900) var(--s-300);
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a:not(.btn) { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; text-decoration: none; }
.mobile-menu > * { opacity: 0; transform: translateY(var(--s-300)); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.mobile-menu.is-open > * { opacity: 1; transform: none; }
.mobile-menu.is-open > *:nth-child(1) { transition-delay: 0ms; }
.mobile-menu.is-open > *:nth-child(2) { transition-delay: 60ms; }
.mobile-menu.is-open > *:nth-child(3) { transition-delay: 120ms; }
.mobile-menu.is-open > *:nth-child(4) { transition-delay: 180ms; }
.mobile-menu.is-open > *:nth-child(5) { transition-delay: 240ms; }
.mobile-menu.is-open > *:nth-child(6) { transition-delay: 300ms; }
.mobile-menu.is-open > *:nth-child(7) { transition-delay: 360ms; }
.mobile-menu.is-open > *:nth-child(n+8) { transition-delay: 400ms; }
.mobile-menu a[aria-current] { color: var(--accent); }
@media (min-width: 900px) { .mobile-menu { display: none; } }

/* hero (B5): the blueprint engraving fills the hero card; text sits on a frosted paper panel
   (translucent surface + blur, as B7 uses for the nav) because the skill bans gradient scrims */
.hero { padding: var(--s-75); }
@media (min-width: 640px) { .hero { padding: var(--s-200); } }
.hero-stage { position: relative; }
.hero-art {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  background: var(--bg);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 22% top; }
@media (min-width: 768px) { .hero-art { height: 76%; } .hero-art img { object-position: center top; } }
.hero-inner { position: relative; padding-top: var(--s-900); }
.hero-copy {
  display: grid;
  gap: var(--s-300);
  justify-items: center;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-400) var(--s-200);
  text-align: center;
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
}
@media (min-width: 640px) { .hero-copy { padding: var(--s-400) var(--s-300); } }
@media (min-width: 1024px) { .hero-copy { margin-top: var(--s-700); padding: var(--s-600); } }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline; } }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-50) var(--s-100);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--muted);
  max-width: 100%;
  text-wrap: balance;
}
.badge-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); }
.hero h1 {
  max-width: 680px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
  background: linear-gradient(90deg, #000000, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 400px) { .hero h1 { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; line-height: 1; } }
.hero-sub { max-width: 680px; color: var(--muted); }
.hero-copy .waitlist { margin: 0 auto; }
.hero-copy .field-row { text-align: left; }
/* the secondary hero action: a quiet text link under the form, so the waitlist stays the one button */
.quiet-link { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; transition: color 300ms var(--ease), text-decoration-color 300ms var(--ease); }
.quiet-link:hover { color: var(--text); text-decoration-color: var(--accent); }
/* the form keeps an empty status row (no layout jump on submit), so the link moves up into the hero gap */
.hero-copy .quiet-link { margin-top: -24px; }
.proof-line { display: flex; align-items: center; justify-content: center; gap: var(--s-75); color: var(--muted); }
.proof-line .icon { color: var(--accent); }

/* forms (B9 states) */
.waitlist { display: grid; gap: var(--s-100); width: 100%; max-width: 520px; }
.field-row { display: flex; flex-direction: column; gap: var(--s-75); }
@media (min-width: 640px) { .field-row { flex-direction: row; } }
.input,
.select {
  flex: 1;
  min-width: 0;
  padding: var(--s-75) var(--s-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 300ms var(--ease);
}
.input:hover, .select:hover { border-color: var(--muted); }
.input[aria-invalid="true"] { border-color: var(--error); }
.check { display: flex; align-items: flex-start; gap: var(--s-75); color: var(--muted); }
.check input { margin: var(--s-50) 0 0; accent-color: var(--text); }
.form-msg { min-height: 1.25rem; }
.form-msg.is-error { color: var(--error); }
.form-msg.is-success { color: var(--success); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.label-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* device preview: crosses the bottom edge of the hero art */
.preview { margin-top: var(--s-700); }
.device {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-100);
  background: var(--dark);
  border-radius: var(--r-3xl);
  box-shadow: 0 24px 48px rgba(10, 10, 10, 0.18);
}
/* nested radius: 24px outer, 12px gap, so the screen gets 12px */
.screen {
  display: grid;
  gap: var(--s-200);
  padding: var(--s-200);
  background: var(--surface);
  border-radius: var(--r-xl);
}
.screen { grid-template-columns: minmax(0, 1fr); }
.screen > * { min-width: 0; }
@media (min-width: 768px) { .screen { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.screen-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-50) var(--s-200); color: var(--muted); }
.plan { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.plan .wall { stroke: var(--text); stroke-width: 6; fill: none; }
.plan .inner { stroke: var(--text); stroke-width: 3; fill: none; }
.plan .room-label { fill: var(--muted); font-size: 18px; font-family: inherit; }
.plan .pin circle { fill: var(--accent); }
.plan .pin text { fill: var(--surface); font-size: 16px; font-weight: 600; font-family: inherit; }
.plan .pin-active .ring { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 2000ms var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.cards { display: grid; gap: var(--s-200); align-content: start; }
.card {
  display: grid;
  gap: var(--s-100);
  padding: var(--s-200);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.card-head { display: flex; align-items: center; gap: var(--s-75); color: var(--muted); }
.card-head .icon { color: var(--accent); }
.quote { font-weight: 500; }
.item-title { font-weight: 600; }
.item-rows { display: grid; grid-template-columns: auto 1fr; gap: var(--s-50) var(--s-200); margin: 0; }
.item-rows dt { color: var(--muted); }
.item-rows dd { margin: 0; }
.chip {
  display: inline-flex;
  padding: var(--s-25) var(--s-75);
  border-radius: var(--r-full);
  background: var(--bg);
  border: 1px solid var(--border);
}
/* nested radius: 12px card with a 16px gap gives 12 minus 16, below 2, so buttons keep their own 8px radius */
.card-actions { display: flex; gap: var(--s-75); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-50); }
.pin-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--s-50);
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
}
.caption { margin-top: var(--s-200); color: var(--muted); text-align: center; }

/* problem */
.grid-3 { display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-300); } }
.tile {
  display: grid;
  gap: var(--s-100);
  align-content: start;
  padding: var(--s-300);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
}
.tile .icon-lg { color: var(--accent); }
.tile h3 { font-size: 1.125rem; line-height: 1.75rem; }
.tile p { color: var(--muted); }
.solution-line { margin-top: var(--s-400); max-width: 680px; }

/* tagline reveal (B11) */
.tagline { background: var(--dark); color: #ffffff; }
.tagline p {
  max-width: 680px;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (min-width: 1024px) { .tagline p { font-size: 3rem; line-height: 1; } }
.js .tagline .word { opacity: 0.3; transition: opacity 500ms var(--ease); }
.js .tagline .word.is-on { opacity: 1; }

/* features */
.features { display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .features { grid-template-columns: repeat(2, 1fr); gap: var(--s-300); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, 1fr); } }

/* steps */
.steps { display: grid; gap: var(--s-200); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-300); } }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}

/* free tools and templates: the link sits at the bottom of each card */
.try-cards .tile { grid-template-rows: auto auto 1fr auto; }
.try-cards .text-link { justify-self: start; margin-top: var(--s-75); }
.try-cards .text-link .icon { color: var(--accent); }

/* pain points */
.grid-2 { display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-300); } }
.tile a { text-underline-offset: 2px; }

/* proof */
.source-note { margin-top: var(--s-300); color: var(--muted); max-width: 680px; }
.source-note a { text-underline-offset: 2px; }

/* early access price */
.offer {
  display: grid;
  gap: var(--s-400);
  padding: var(--s-300);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  background: var(--surface);
}
@media (min-width: 1024px) { .offer { grid-template-columns: 1fr 1fr; padding: var(--s-600); } }
.price { display: flex; align-items: baseline; gap: var(--s-75); }
.price-num { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.ticks { display: grid; gap: var(--s-100); }
.ticks li { display: flex; gap: var(--s-75); }
.ticks .icon { color: var(--success); margin-top: var(--s-25); }

/* faq */
.faq { display: grid; gap: var(--s-100); max-width: 800px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-200);
  padding: var(--s-200) var(--s-300);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 500ms var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 var(--s-300) var(--s-200); color: var(--muted); }

/* final cta */
.final { text-align: left; }
.final-box { display: grid; gap: var(--s-300); justify-items: start; max-width: 680px; }

/* footer */
.footer { padding: var(--s-600) 0; border-top: 1px solid var(--border); color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-200); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-100) var(--s-300); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-links a[aria-current] { color: var(--text); font-weight: 600; }
.footer-navs { display: flex; flex-wrap: wrap; gap: var(--s-200) var(--s-400); }
.legal-note { margin-top: var(--s-200); }

/* plain pages (legal, 404) */
.page { padding-top: var(--s-900); padding-bottom: var(--s-900); }
.page .prose { margin-top: var(--s-600); }
.prose { max-width: 680px; display: grid; gap: var(--s-200); }
.prose h1 { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.025em; }
.prose h2 { font-size: 1.25rem; line-height: 1.75rem; margin-top: var(--s-300); }
.prose ul { list-style: disc; padding-left: var(--s-300); display: grid; gap: var(--s-75); }
.draft-note { padding: var(--s-100) var(--s-200); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); }

/* SEO pages (content/*.md through site/_templates/page.html) */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-75); color: var(--muted); }
.breadcrumb li { display: flex; gap: var(--s-75); min-width: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--border); }
.breadcrumb a { text-decoration: none; transition: color 300ms var(--ease); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* Article page: the title spans the container; below it, the text column and (from 1024px) a sticky side column.
   1152px container − 64px padding − 64px gap − 280px side column = a 744px text column (about 80 characters). */
.article { display: grid; gap: var(--s-400); }
.article-layout { display: grid; gap: var(--s-400); }
.article-main { display: grid; gap: var(--s-400); min-width: 0; align-content: start; }
.article-aside { display: none; }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-700); }
  .article-aside {
    position: sticky;
    top: var(--s-900);
    align-self: start;
    display: grid;
    gap: var(--s-300);
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }
}
/* the fixed nav covers the top 80px, so linked headings stop below it */
.article-body h2, .article-body h3, .article-faq h2 { scroll-margin-top: var(--s-900); }
.toc { display: grid; gap: var(--s-100); }
.toc-title { font-weight: 600; }
.toc-list { display: grid; gap: var(--s-75); }
.toc-list a { color: var(--muted); text-decoration: none; transition: color 300ms var(--ease); }
.toc-list a:hover,
.toc-list a[aria-current="true"] { color: var(--text); }
.toc-list a[aria-current="true"] { font-weight: 600; }
.aside-card {
  display: grid;
  gap: var(--s-100);
  justify-items: start;
  padding: var(--s-300);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
}
.aside-card-title { font-weight: 600; }
.aside-card .btn { margin-top: var(--s-75); }
.dl-list { display: grid; gap: var(--s-75); width: 100%; }
.dl-link {
  display: flex;
  align-items: center;
  gap: var(--s-100);
  padding: var(--s-50) 0;
  text-decoration: none;
  transition: transform 300ms var(--ease);
}
.dl-link .icon { color: var(--accent); }
.dl-name { transition: color 300ms var(--ease); }
.dl-link:hover .dl-name { color: var(--accent); }
.dl-link:active { transform: translateY(1px); }
.dl-text { display: grid; }
.dl-name { font-weight: 600; }
.dl-ext { color: var(--muted); }
.article > .draft-note { justify-self: start; }
.page .article .prose { margin-top: 0; }
.article-head { display: grid; gap: var(--s-200); }
.article-head h1 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.025em; }
@media (min-width: 640px) { .article-head h1 { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .article-head h1 { font-size: 3rem; line-height: 1; } }
.article-meta { color: var(--muted); }
.article-meta a { color: var(--text); text-underline-offset: 2px; }

/* long form prose: the text column above, Tailwind type pairs */
.article-body { max-width: none; gap: var(--s-300); }
@media (min-width: 640px) { .article-body { font-size: 1.125rem; line-height: 1.75rem; } }
.article-body h2 { font-size: 1.5rem; line-height: 2rem; margin-top: var(--s-300); letter-spacing: -0.025em; }
.article-body h3 { font-size: 1.25rem; line-height: 1.75rem; margin-top: var(--s-200); }
.article-body h4 { font-size: 1.125rem; line-height: 1.75rem; }
.prose ol { list-style: decimal; padding-left: var(--s-300); display: grid; gap: var(--s-75); }
.prose li > p { display: inline; }
.prose li::marker { color: var(--muted); }
.prose a { text-decoration-color: var(--accent); text-underline-offset: 2px; transition: color 300ms var(--ease); }
.prose a:hover { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose code { padding: var(--s-25) var(--s-50); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: 0.875rem; line-height: 1.25rem; }
.prose hr { width: 100%; height: 1px; margin: var(--s-200) 0; border: 0; background: var(--border); }
.prose blockquote {
  margin: 0;
  padding: var(--s-200) var(--s-300);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--muted);
}
.prose blockquote > * + * { margin-top: var(--s-100); }
.prose figure { margin: 0; display: grid; gap: var(--s-75); }
.prose figure img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); transition: border-color 300ms var(--ease); }
.figure-link { display: block; border-radius: var(--r-xl); cursor: zoom-in; transition: transform 300ms var(--ease); }
.figure-link:hover img { border-color: var(--muted); }
.figure-link:active { transform: translateY(1px); }
.prose figcaption { color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.25rem; }
@media (min-width: 640px) { .table-wrap table { font-size: 1rem; line-height: 1.5rem; } }
.table-wrap th,
.table-wrap td { padding: var(--s-75) var(--s-100); text-align: left; vertical-align: top; }
.table-wrap th { font-weight: 600; background: var(--bg); }
.table-wrap tr + tr td,
.table-wrap tbody tr:first-child td { border-top: 1px solid var(--border); }
.tldr {
  display: grid;
  gap: var(--s-100);
  padding: var(--s-300);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
}
.article-body .tldr h2 { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--accent); letter-spacing: 0; }
.article-faq { display: grid; gap: var(--s-300); margin-top: var(--s-200); }
.article-faq h2 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.025em; }

/* CTA block on SEO pages and hubs */
.cta { margin-top: var(--s-700); }
@media (min-width: 1024px) { .cta { margin-top: var(--s-900); align-items: center; } }
.cta-form .waitlist { max-width: none; }
.text-link { display: inline-flex; align-items: center; gap: var(--s-75); font-weight: 600; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.text-link .icon { transition: transform 300ms var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }

/* hubs */
.hub { display: grid; gap: var(--s-400); }
.hub-head { display: grid; gap: var(--s-200); max-width: 680px; }
.hub-head h1 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.025em; }
@media (min-width: 640px) { .hub-head h1 { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .hub-head h1 { font-size: 3rem; line-height: 1; } }
.hub-list { display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .hub-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-300); } }
@media (min-width: 1024px) { .hub-list { grid-template-columns: repeat(3, 1fr); } }
.hub-list li { display: grid; }
.hub-card { text-decoration: none; transition: transform 500ms var(--ease), border-color 300ms var(--ease); }
.hub-card:hover { transform: translateY(-4px); border-color: var(--muted); }
.hub-card:active { transform: scale(0.98); }
.hub-card h2 { font-size: 1.125rem; line-height: 1.75rem; }
.hub-more { display: inline-flex; align-items: center; gap: var(--s-75); margin-top: var(--s-75); font-weight: 600; }
.hub-more .icon { color: var(--accent); }
.empty-state { justify-items: start; gap: var(--s-200); padding: var(--s-400) var(--s-300); max-width: 680px; }
@media (min-width: 640px) { .empty-state { padding: var(--s-600); } }
.empty-state h2 { font-size: 1.5rem; line-height: 2rem; }
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--accent);
}
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-75); }

/* scroll reveal (B7) */
.js .reveal { opacity: 0; transform: translateY(var(--s-400)); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; }
  .mobile-menu > * { transform: none; }
  .plan .pin-active .ring { animation: none; }
  .btn:active { transform: none; }
  .hub-card:hover, .hub-card:active, .text-link:hover .icon, .dl-link:active, .figure-link:active { transform: none; }
}