.marketing { max-width: 720px; }
.marketing h1 { margin: 0 0 16px; font: 600 32px/40px var(--sans); }
.marketing .lede { max-width: 62ch; margin: 0 0 24px; font: 400 16px/24px var(--sans); color: var(--ink-muted); }
.draft-banner { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); }
.price-grid, .step-grid, .article-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.step-grid, .article-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-card, .step-card, .article-card { border: 1px solid var(--border); background: var(--surface); padding: 16px; border-radius: var(--r-lg); min-height: 0; }
.price-card h2, .step-card h2, .article-card h2 { margin: 0 0 8px; font: 600 20px/28px var(--sans); }
.price-card .amount { margin: 8px 0; font: 600 24px/32px var(--sans); font-variant-numeric: tabular-nums; }
.price-card button, .text-button, .danger-button { min-height: 44px; }
.danger-button { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.release-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.release-form, .stack { display: grid; gap: 12px; max-width: 640px; }
.release-form label, .stack label { display: grid; gap: 8px; font: 500 14px/20px var(--sans); }
.release-form input, .release-form textarea, .release-form select, .stack input, .stack textarea { width: 100%; }
.prose { max-width: 68ch; }
.prose h2 { margin: 32px 0 8px; font: 600 20px/28px var(--sans); }
.prose p, .prose li { color: var(--ink-muted); }
.prose a { color: var(--accent); }
.site-footer { display: flex; gap: 16px; flex-wrap: wrap; padding: 32px 0 48px; color: var(--ink-muted); font: 400 12px/16px var(--sans); }
.site-footer a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
.home { max-width: 960px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 48px; align-items: start; padding: 32px 0 48px; }
.home-hero h1 { max-width: 16ch; margin: 0 0 12px; }
.home-hero .lede { max-width: 36ch; margin: 0 0 24px; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.home-actions a:not(.hero-link) { color: var(--accent); font: 500 14px/20px var(--sans); min-height: 44px; display: inline-flex; align-items: center; }
.inventory-mock { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.mock-top, .mock-row, .mock-packet { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mock-top { margin-bottom: 8px; }
.mock-title { font: 600 16px/24px var(--sans); }
.mock-meta, .mock-row span, .mock-packet span { color: var(--ink-muted); font: 400 12px/16px var(--sans); }
.mock-list { list-style: none; margin: 0; padding: 0; }
.mock-row { padding: 12px 0; border-top: 1px solid var(--border); }
.mock-row { flex-wrap: wrap; }
.mock-row strong, .mock-packet strong { min-width: 0; font: 500 14px/20px var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mock-packet { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.home-section { padding: 48px 0; border-top: 1px solid var(--border); }
.home-section h2 { margin: 0 0 16px; }
.home-steps { list-style: none; margin: 0; padding: 0; }
.home-steps li { padding: 16px 0; border-top: 1px solid var(--border); }
.home-steps h3 { margin: 0 0 4px; }
.home-steps p, .home-notes li, .home-faq p { margin: 0; color: var(--ink-muted); }
.home-notes { margin: 0; padding: 0; list-style: none; }
.home-notes li { padding: 12px 0; border-top: 1px solid var(--border); }
.home-notes strong { font-weight: 600; color: var(--ink); }
.home-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.home-prices div { padding: 16px; }
.home-prices div + div { border-left: 1px solid var(--border); }
.home-prices dt { margin: 0 0 8px; font: 500 14px/20px var(--sans); }
.home-prices dd { margin: 0; font: 600 24px/32px var(--sans); font-variant-numeric: tabular-nums; }
.home-more { margin: 16px 0 0; }
.home-faq details { border-top: 1px solid var(--border); }
.home-faq details:last-of-type { border-bottom: 1px solid var(--border); }
.home-faq summary { padding: 12px 0; font: 500 16px/24px var(--sans); cursor: pointer; min-height: 44px; }
.home-faq p { max-width: 62ch; padding-bottom: 12px; }
@media (max-width: 800px) {
  .price-grid, .step-grid, .article-list, .home-prices { grid-template-columns: 1fr 1fr; }
  .home-hero { grid-template-columns: 1fr; gap: 32px; }
  .home-prices div:nth-child(odd) { border-left: 0; }
  .home-prices div:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 639px) {
  .marketing h1, .home-hero h1 { font-size: 24px; line-height: 32px; }
  .price-grid, .step-grid, .article-list, .home-prices { grid-template-columns: 1fr; }
  .home-prices div + div { border-left: 0; border-top: 1px solid var(--border); }
  .home-section { padding: 32px 0; }
}