/* ═══════════════════════════════════════════════════════════════════
   BLOCKWORKS — marketing site styles

   The palette is the app's own (oxblood, brass, butcher-paper cream), so
   a butcher who books a demo sees the same colours on the site and in the
   product. Headings are a heavy sans, not the serif the Butchers Block
   Advisory site uses: the two brands should not look like one business.

   Two rules carried over from the BBA site, for the same reasons:
     1. Nothing functional below 13px (--fs-label). Butchers read this on a
        phone at the block.
     2. Uppercase only for short fixed chrome (plan tags, the "New" pill).
        Anything holding a sentence stays sentence case.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #F6F1E7;
  --surface: #FFFDF8;
  --surface-alt: #EFE7D7;
  --ink: #241D17;
  --ink-soft: #4E4338;
  --muted: #5F5346;
  --line: #DDD4C2;
  --line-strong: #C9BBA0;
  --oxblood: #862628;
  --oxblood-dark: #6B1D1F;
  --brass: #825E24;
  --brass-tint: #F1E4CC;
  --dark: #1D1713;
  --dark-2: #2A221C;
  --on-dark: #F6F1E7;
  --on-dark-soft: #D9CDBA;
  --ok: #2F6B3A;
  --ok-tint: #E3EFE2;

  --font-head: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-label: 0.8125rem;   /* 13px: the floor for anything functional */
  --fs-small: 0.9375rem;
  --fs-body: 1.0625rem;
  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 1160px;
  --gutter: 16px;
  --shadow: 0 1px 2px rgba(36, 29, 23, .06), 0 8px 28px rgba(36, 29, 23, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--oxblood); text-underline-offset: 3px; }
a:hover { color: var(--oxblood-dark); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
.standfirst { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--on-dark); padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }

.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-alt { background: var(--surface-alt); }
.section-white { background: var(--surface); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--on-dark); }
.section-dark .standfirst, .section-dark .muted { color: var(--on-dark-soft); }
.section-dark a:not(.btn) { color: #F2C9A0; }
.section-head { max-width: 760px; margin-bottom: 40px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  font: 600 1rem/1.2 var(--font-body);
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--oxblood); color: #FFF8EE; }
.btn-primary:hover { background: var(--oxblood-dark); color: #FFF8EE; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.section-dark .btn-ghost, .hero .btn-ghost { border-color: rgba(246, 241, 231, .4); color: var(--on-dark); }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row .call { font-size: var(--fs-small); color: inherit; }
.btn-row .call a { color: inherit; font-weight: 600; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── Founding bar ────────────────────────────────────────────────────── */

.found-bar {
  background: var(--oxblood); color: #FFF4E6;
  font-size: var(--fs-small); text-align: center;
  padding: 8px var(--gutter); line-height: 1.4;
}
.found-bar a { color: #FFF4E6; font-weight: 600; white-space: nowrap; }
.found-bar a:hover { color: #FFFFFF; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 241, 231, .96);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand svg { width: 38px; height: 38px; }
.wordmark { font-family: var(--font-head); font-weight: 900; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1; color: #3A1414; }
.wordmark span { font-weight: 500; letter-spacing: -0.01em; }
.main-nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.main-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.main-nav a:hover { background: var(--surface-alt); color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--oxblood); font-weight: 600; }
.header-actions { display: none; align-items: center; gap: 8px; }
.header-actions .login { color: var(--ink); font-weight: 500; text-decoration: none; padding: 10px 12px; }
.header-actions .login:hover { color: var(--oxblood); }
.header-actions .btn { min-height: 42px; padding: 9px 18px; font-size: .95rem; }
.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 .95rem var(--font-body); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-menu.open { display: block; }
.site-header .mobile-menu .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-top: 8px; padding-bottom: 20px; }
.mobile-menu .wrap > a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.05rem;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.mobile-menu .wrap > a[aria-current="page"] { color: var(--oxblood); font-weight: 600; }
.mobile-menu .call a { color: var(--ink); font-weight: 600; }
.mobile-menu .btn { margin-top: 16px; }
.mobile-menu .call { margin-top: 12px; text-align: center; font-size: var(--fs-small); }
@media (min-width: 1040px) {
  .main-nav, .header-actions { display: flex; }
  .nav-toggle, .mobile-menu, .mobile-menu.open { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  background:
    radial-gradient(1100px 520px at 85% 10%, rgba(134, 38, 40, .38), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(130, 94, 36, .22), transparent 60%),
    var(--dark);
  color: var(--on-dark);
  padding: 56px 0 64px;
}
.hero h1 { color: var(--on-dark); margin-bottom: .4em; }
.hero .standfirst { color: var(--on-dark-soft); }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) {
  .hero { padding: 88px 0 96px; }
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
}
.hero-points {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--fs-small); color: var(--on-dark-soft);
}
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { width: 18px; height: 18px; color: #E8C48F; flex-shrink: 0; }
/* Home hero over Tony's photo of Smithfield market. The shade is darkest
   behind the words (at least .8 there keeps the soft text readable over
   the white vans) and lifts on the right, where the order cards sit. */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); }
.hero-photo::before, .hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.hero-photo::before { background: url('smithfield.jpg') center 52% / cover no-repeat; filter: saturate(.9); }
.hero-photo::after { background: rgba(29, 23, 19, .8); }
@media (min-width: 980px) {
  .hero-photo::after { background: linear-gradient(90deg, rgba(29, 23, 19, .88) 0%, rgba(29, 23, 19, .8) 50%, rgba(29, 23, 19, .5) 100%); }
}
.hero .feat-nav { margin: 0 0 28px; }
.hero .feat-nav a { background: rgba(246, 241, 231, .08); border-color: rgba(246, 241, 231, .3); color: var(--on-dark); }
.hero .feat-nav a:hover { border-color: var(--on-dark); color: var(--on-dark); }
.page-hero { padding: 56px 0 48px; }
@media (min-width: 900px) { .page-hero { padding: 80px 0 64px; } }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }

/* The message-to-order picture in the home hero. Built in HTML, not a
   screenshot, so it stays sharp on a phone and says exactly what happens. */
.flow { display: grid; gap: 14px; max-width: 520px; justify-self: center; width: 100%; }
.flow-msg {
  background: #E9F7DF; color: #1E2A18; border-radius: 16px 16px 16px 4px;
  padding: 14px 16px 10px; box-shadow: var(--shadow); max-width: 88%;
}
.flow-msg .who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 600; color: #2F5E22; margin-bottom: 6px; }
.flow-msg .who svg { width: 16px; height: 16px; }
.flow-msg p { margin: 0; font-size: 1rem; line-height: 1.45; }
.flow-msg .time { display: block; text-align: right; font-size: var(--fs-label); color: #5B6B52; margin-top: 4px; }
.flow-arrow { display: flex; align-items: center; gap: 10px; color: var(--on-dark-soft); font-size: var(--fs-label); padding-left: 18px; }
.flow-arrow svg { width: 20px; height: 20px; color: #E8C48F; }
.flow-order {
  background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 16px 14px; border: 1px solid var(--line);
}
.flow-order .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.flow-order .head strong { font-family: var(--font-head); font-size: 1.05rem; }
.flow-order .head span { font-size: var(--fs-label); color: var(--muted); }
.flow-order table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.flow-order td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.flow-order td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow-order .est { display: block; font-size: var(--fs-label); color: var(--brass); }
.flow-order .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.flow-order .foot .total { font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-order .foot .fake-btn {
  background: var(--oxblood); color: #FFF8EE; border-radius: 999px; padding: 8px 16px;
  font-size: var(--fs-small); font-weight: 600;
}

/* ── Cards and grids ─────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brass-tint); color: var(--oxblood); display: grid; place-items: center; margin-bottom: 16px; }
.card .ic svg { width: 24px; height: 24px; }
.card .more { margin-top: auto; padding-top: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.card .more svg { width: 16px; height: 16px; }
.section-dark .card { background: var(--dark-2); border-color: rgba(246, 241, 231, .12); color: var(--on-dark); }
.section-dark .card .ic { background: rgba(232, 196, 143, .14); color: #E8C48F; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li svg { position: absolute; left: 0; top: 4px; width: 19px; height: 19px; color: var(--ok); }
.section-dark .ticks li svg { color: #9FD39C; }

/* Plan and status tags: short fixed labels, so uppercase is allowed. */
.tag {
  display: inline-block; vertical-align: middle;
  font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 8px 4px; border-radius: 6px; white-space: nowrap;
}
.tag-new { background: var(--brass-tint); color: #5E4316; }
.tag-plan { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }

/* ── A day at the block ──────────────────────────────────────────────── */

.day { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 860px; }
.day li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.day li:last-child { border-bottom: 1px solid var(--line); }
.day time { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.day h3 { margin: 0 0 .2em; font-size: 1.1rem; }
.day p { margin: 0; color: var(--ink-soft); }
@media (min-width: 720px) { .day li { grid-template-columns: 110px 1fr; } .day time { font-size: 1.45rem; } }

/* ── Who it's for strip ──────────────────────────────────────────────── */

.who-card blockquote {
  margin: 0 0 16px; padding: 0; font-size: 1.05rem; color: var(--ink-soft);
}
.who-card .fits { font-size: var(--fs-small); color: var(--muted); margin-top: auto; }

/* ── Feature pages ───────────────────────────────────────────────────── */

.feat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.feat-nav a {
  text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: var(--fs-small); font-weight: 500;
}
.feat-nav a:hover { border-color: var(--ink); color: var(--ink); }
.feat-group { padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.feat-group:first-of-type { border-top: 0; }
.feat-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 8px; }
.feat-group-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.feat-list { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 820px) { .feat-list { grid-template-columns: repeat(2, 1fr); } }
.feat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.feat h3 { font-size: 1.05rem; margin: 0 0 .3em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feat p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
.feat .limit { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); }
.feat .limit strong { color: var(--ink); font-weight: 600; }
.not-yet { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 24px; }
.not-yet ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ── Pricing ─────────────────────────────────────────────────────────── */

.plans { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; position: relative;
}
.plan.featured { border: 2px solid var(--oxblood); box-shadow: var(--shadow); }
.plan .badge {
  position: absolute; top: -13px; left: 24px; background: var(--oxblood); color: #FFF8EE;
  font: 600 var(--fs-label)/1 var(--font-body); padding: 7px 10px 6px; border-radius: 999px;
}
.plan h3 { font-size: 1.35rem; margin: 0 0 .2em; }
.plan .for { color: var(--muted); font-size: var(--fs-small); min-height: 3em; }
.plan .price { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; margin: 14px 0 4px; }
.plan .price small { font: 500 1rem var(--font-body); color: var(--muted); letter-spacing: 0; }
.plan .setup { font-size: var(--fs-small); color: var(--muted); margin-bottom: 18px; }
.plan .ticks { font-size: var(--fs-small); margin-bottom: 22px; }
.plan .everything { font-weight: 600; font-size: var(--fs-small); margin-bottom: 10px; }
.plan .btn { margin-top: auto; }
.plan-brief .price { font-size: 2rem; }

.founding {
  background: var(--dark); color: var(--on-dark); border-radius: var(--radius);
  padding: 32px 24px; display: grid; gap: 24px; align-items: center;
}
.founding h2, .founding h3 { color: var(--on-dark); }
.founding p { color: var(--on-dark-soft); }
@media (min-width: 900px) { .founding { grid-template-columns: 1.4fr 1fr; padding: 44px; } }

.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative;
  font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
  transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--ink-soft); padding-right: 24px; }

/* ── Demo cards ──────────────────────────────────────────────────────── */

.demo-card { gap: 6px; }
.demo-card .who { font-size: var(--fs-small); color: var(--muted); margin-bottom: 8px; }
.demo-card .btn { margin-top: auto; align-self: flex-start; }
.demo-note { font-size: var(--fs-small); color: var(--muted); margin-top: 24px; }

/* ── Forms ───────────────────────────────────────────────────────────── */

.form-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
@media (min-width: 720px) { .form-panel { padding: 32px; } }
.section-dark .form-panel { color: var(--ink); }
.section-dark .form-panel h2, .section-dark .form-panel h3 { color: var(--ink); }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.form-field label, .form-field legend { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 6px; color: var(--ink); }
.form-field .opt { font-weight: 400; color: var(--muted); }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field select, .form-field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: 400 1rem var(--font-body); color: var(--ink);
  background: #FFFFFF; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--oxblood); outline: none; box-shadow: 0 0 0 3px rgba(134, 38, 40, .15); }
fieldset.form-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: #FFFFFF;
  font-size: var(--fs-small); cursor: pointer; user-select: none;
}
.choice input:checked + span { border-color: var(--oxblood); background: #F7E8E4; color: var(--oxblood-dark); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #FBE9E7; color: #7A1E1E; font-size: var(--fs-small); }
.form-success { display: none; padding: 8px 0; }
.form-success h3 { color: var(--ok); }
.form-promise { font-size: var(--fs-small); color: var(--muted); margin: 12px 0 0; }
.form-panel .btn-primary { width: 100%; margin-top: 8px; }
@media (min-width: 640px) { .form-panel .btn-primary { width: auto; } }

.slug-row { display: flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: #FFFFFF; overflow: hidden; }
.slug-row:focus-within { border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(134, 38, 40, .15); }
.slug-row input { border: 0 !important; box-shadow: none !important; min-width: 0; flex: 1; }
.slug-row span { display: flex; align-items: center; padding: 0 14px; background: var(--surface-alt); color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }

/* ── Prose (about, privacy) ──────────────────────────────────────────── */

.prose { max-width: 720px; }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: .4em; }

/* ── CTA band ────────────────────────────────────────────────────────── */

.cta-band { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .cta-band { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--dark); color: var(--on-dark-soft); padding: 56px 0 32px; font-size: var(--fs-small); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #FFFFFF; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer .brand { color: var(--on-dark); }
.site-footer .wordmark { color: var(--on-dark); }
.site-footer h2 { font: 600 var(--fs-small) var(--font-body); color: var(--on-dark); letter-spacing: 0; margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-cross { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(246, 241, 231, .14); }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(246, 241, 231, .14); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }