/*
 * The landing page and the legal pages.
 *
 * These are NOT part of the app bundle, on purpose. Somebody opening the
 * privacy policy from an app-store listing, or a regulator opening the
 * imprint, should not download two megabytes of react-native-web to read a
 * document — and the landing page is the first thing anyone sees, so it should
 * be a file, not a framework.
 *
 * The colours are the app's LIGHT palette, copied from src/theme/tokens.ts
 * rather than imported, because that file is TypeScript inside the bundle this
 * page exists to avoid. Two rules from it survive intact and matter here:
 *
 *   - the blue-teal (--accent) is the app's own voice: links and controls;
 *   - the deep teal (--match) means "probably fine", carries the dish count,
 *     and has NO counterpart. There is no red and no amber on this page
 *     either. A restaurant with four things you can eat is a restaurant you
 *     can eat at.
 *
 * REPAINTED 2026-08-24, from the warm paprika-and-paper scheme to the cool one
 * the app now uses. Because the values are copied rather than imported, the
 * two files can silently disagree — so if you are here changing a hex, the
 * other half of the change is `light` in src/theme/tokens.ts, and that is
 * where the contrast ratios behind each of these is written down.
 *
 * `--match` used to be a green and is now a deep teal; the app's note explains
 * why that is an improvement rather than a side effect. Nothing else about
 * what the colours MEAN changed.
 */

/*
 * Manrope for display, Inter for everything read in sentences — the app's
 * pairing since 2026-08-24, and this page follows it because the two surfaces
 * have to look like one product.
 *
 * Both cover Cyrillic INCLUDING Ukrainian's Ґ/ґ (U+0490-0491), which most
 * faces that claim "Cyrillic" quietly skip and which is the reason Manrope was
 * picked in the first place. Neither covers Devanagari, Tamil, Arabic or CJK;
 * those fall through to the stacks below, exactly as they did before.
 *
 * FOUR faces, not eight. Manrope 700 and 800 carry the headings, Inter 400 and
 * 600 the body and the buttons — enough to render the page as designed and no
 * more, because every one of these is ~340 KB served on first paint. `swap` so
 * the words are readable before they arrive; the fallback metrics are close
 * enough that the reflow is not violent.
 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Manrope_700Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Manrope_800ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter_400Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Inter_600SemiBold.ttf') format('truetype');
}

:root {
  /*
   * Light, always — this page does not follow the system.
   *
   * The app has a real light/dark/system preference, because it is a thing you
   * live in: you read a menu in a dark restaurant, and the screen is the only
   * light source at the table. A landing page is not that. It is read once,
   * usually in a browser tab next to other tabs, and the only thing it owes
   * anyone is being unmistakably the same product as the app's default.
   *
   * `color-scheme` matters more than it looks: it tells the browser to paint
   * scrollbars and form controls light too. Without it a dark-mode visitor gets
   * a warm-paper page framed by a black scrollbar.
   */
  color-scheme: light;

  --bg: #eef3f6;
  --surface: #ffffff;
  --surface-sunken: #e2ecef;
  --ink: #191c1d;
  --ink-muted: #3b5257;
  --accent: #0c7484;
  --accent-ink: #0a5f6e;
  --accent-soft: #d6eff4;
  --on-accent: #ffffff;
  --match: #006a6a;
  --on-match: #ffffff;
  --line: #dde9ed;

  /* The app's header teal. It has exactly one job on this page — the wordmark
     — and that is the whole reason it is here: somebody who reads the landing
     page and then opens the app should meet the same colour first in both. The
     page itself is NOT restyled around a teal panel; the design canvas that
     produced this palette describes the app, and a marketing page is a
     different document with a different job. */
  --brand: #0c766e;

  --measure: 34rem;
  --radius-card: 14px;
  --radius-chip: 999px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Inter is the page's voice; Manrope is claimed back by the headings and the
     wordmark below. The system stack behind it is what renders Hindi, Tamil,
     Arabic and CJK, none of which either webfont covers. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-ink);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Visible only once tabbed to — the first thing a keyboard user meets should
   not be the whole header. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ── chrome ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}

/* In-page links, hidden on narrow screens: on a phone the wordmark, two
   anchors and a button do not fit in one bar, and the sections they point at
   are three thumb-flicks away anyway. */
.topbar nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.navlink {
  color: var(--ink-muted);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.navlink:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 46rem) {
  .navlink {
    display: none;
  }
}

.wordmark {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--brand);
  text-decoration: none;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--accent);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  filter: brightness(1.06);
}

.btn--ghost {
  background: transparent;
}

/* ── page ───────────────────────────────────────────────────────────────── */

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.hero {
  padding: 3.5rem 0 3rem;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  max-width: 18ch;
}

.hero em {
  font-style: normal;
  color: var(--accent);
}

.lead {
  max-width: var(--measure);
  font-size: 1.15rem;
  color: var(--ink-muted);
}

.lead strong {
  color: var(--ink);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.cta-note {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ── the corpus figures ─────────────────────────────────────────────────── */

/*
 * Three counts, read out of `public.cities` when the page was built — see
 * `fetchCorpusStats` in scripts/build-web.mjs.
 *
 * Ink, not green. Green in this product means "probably fine for you" and it
 * carries the per-restaurant match count; these are totals of everything the
 * corpus holds, filtered by nobody, and borrowing the badge colour for them
 * would say something the numbers do not mean.
 */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: var(--measure);
}

.stats li {
  flex: 1 1 7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.stats b {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stats span {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.panel {
  border-top: 1px solid var(--line);
  padding: 2.75rem 0;
}

.panel h2 {
  font-size: 1.5rem;
}

.panel p {
  max-width: var(--measure);
  color: var(--ink-muted);
}

.panel p strong {
  color: var(--ink);
}

.panel--quiet p {
  font-size: 1rem;
}

/* ── the count demo ─────────────────────────────────────────────────────── */

.demo {
  list-style: none;
  margin: 1.5rem 0 0.6rem;
  padding: 0;
  max-width: 26rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.demo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
}

.demo li + li {
  border-top: 1px solid var(--line);
}

.demo-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* The app's badge, at the app's size. `tabular-nums` because a column of
   counts that jitters as the digits change reads as sloppy. */
.badge {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 0.5rem;
  border-radius: var(--radius-chip);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.badge--match {
  background: var(--match);
  color: var(--on-match);
}

/* ── example searches ───────────────────────────────────────────────────── */

/* Not inputs, and deliberately not styled as one. They are the five things
   worth knowing you can type, and showing them is shorter than the paragraph
   that would otherwise have to describe the syntax. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0.75rem;
  padding: 0;
}

.chips li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--surface);
  font-size: 0.95rem;
}

.chips-note {
  font-size: 0.95rem;
}

/* ── the two worked examples ────────────────────────────────────────────── */

/* The city list and one menu inside it, side by side where there is room —
   the zoom-out and the zoom-in of the same claim, which is the part of this
   product that a sentence has never explained as well as a picture. */
.examples {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
  margin-top: 1.75rem;
}

.example {
  margin: 0;
}

.example-label {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.example figcaption {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.example .demo {
  margin: 0;
  max-width: none;
}

/* One menu, as the app lists it: name, price, and the ingredients the verdict
   was read out of. The unmatched dish is not dimmed and not marked — it is
   simply a dish without a tag, which is the whole difference between counting
   and warning. */
.menucard {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.menucard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.menucard ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menucard li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.75rem;
  padding: 0.75rem 1rem;
}

.menucard li + li {
  border-top: 1px solid var(--line);
}

.dish-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dish-price {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.dish-why {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.dish-why strong {
  color: var(--ink);
  font-weight: 800;
}

/* Green, like the badge, and for the same reason: it is the app's one word for
   "probably fine for you". */
.tag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-chip);
  background: var(--match);
  color: var(--on-match);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* ── the closing ask ────────────────────────────────────────────────────── */

/* Somebody who has read to the bottom of the questions has just spent two
   minutes deciding, and the only button on the page was above all of it. */
.closer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 3.5rem;
  text-align: center;
}

.closer h2 {
  font-size: 1.6rem;
}

.closer p {
  max-width: var(--measure);
  margin: 0 auto;
  color: var(--ink-muted);
}

.closer .cta {
  justify-content: center;
}

/* ── steps ──────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.steps h3::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: var(--radius-chip);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.8rem;
}

.steps p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-muted);
}

/* ── who it is for ──────────────────────────────────────────────────────── */

/* Cards rather than bullets. Six lines of prose in a column is a wall nobody
   reads to the end of; six cards is a thing you scan for yourself and stop at.
   The bold lead-in is the label, so each card carries its own heading. */
.audience {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.audience li {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.98rem;
}

.audience strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink);
}

/* ── questions ──────────────────────────────────────────────────────────── */

/* Two columns where there is room. Seven questions stacked is a long scroll
   past answers you already know; side by side the whole set is one glance.
   Not an accordion: an answer worth writing is worth being readable without a
   click, by a person and by whatever is quoting the page. */
.faq {
  display: grid;
  gap: 1.75rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 1.5rem;
}

.qa h3 {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.qa p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-muted);
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding: 2.5rem 1.25rem 3rem;
  background: var(--surface-sunken);
}

.footer-cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width: 60rem;
  margin: 0 auto;
}

.footer h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 800;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li + li {
  margin-top: 0.35rem;
}

.footer .muted {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.colophon {
  max-width: 60rem;
  margin: 2.5rem auto 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ── the city pages ─────────────────────────────────────────────────────── */

/*
 * /cities and /cities/<slug>. Everything below is an addition — not one rule
 * above it is overridden — because a city page is the landing page's layout
 * with different sentences in it, and somebody arriving from a search result
 * should not be able to tell which of the two they landed on.
 */

/* The one piece of chrome the landing page has no use for. A city page can be
   entered directly from a search result with no idea what site it is on, so it
   has to say where it sits. Mirrored in BreadcrumbList markup. */
.crumbs {
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.crumbs a {
  color: var(--ink-muted);
}

.crumbs span[aria-hidden] {
  padding: 0 0.35rem;
}

/* Shorter than the landing hero: nobody arrives here to be introduced to the
   product, they arrive with a city in mind and want the numbers. */
.hero--city {
  padding: 2rem 0 2.5rem;
}

.hero--city h1 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  max-width: 20ch;
}

.stats-note {
  margin-top: 0.9rem;
  max-width: var(--measure);
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/*
 * The three diet counts. Same cards as the corpus figures, wider basis: the
 * label under each is a sentence ("of 817 menus have a vegan dish") rather
 * than one word, and at the hero's 7rem it wraps to four lines.
 *
 * Still ink, not green — the note above .stats holds here too. Green in this
 * product carries a per-restaurant match count and appears on this page as the
 * badge on every row below; a city-wide total is not that number, and
 * borrowing the colour would say something it does not mean.
 */
.stats--diet {
  max-width: 46rem;
}

.stats--diet li {
  flex: 1 1 12rem;
}

/*
 * The per-diet lists.
 *
 * An <ol>, and the numbers are hidden: the ORDER is meaningful — most matching
 * dishes first — but a printed "1." reads as a placing in a chart, and this is
 * a count of what is on a menu, not a ranking of restaurants. The green badge
 * carries the number that actually matters, which is the same badge, the same
 * green and the same meaning as in the app.
 */
/* Three of these stack inside one section, so the gap above each is what says
   where one diet's list ends and the next begins — without it they read as one
   long list with headings dropped into the middle of it. */
.menugroup {
  font-size: 1.1rem;
  margin: 2.75rem 0 0;
}

.menurows {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  max-width: 44rem;
}

.menurows li {
  padding: 1rem;
}

.menurows li + li {
  border-top: 1px solid var(--line);
}

.menurow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}

.menurow-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.menurow-meta {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* The example dishes, in the language the menu was written in. Set apart from
   the meta line because they are the evidence, not the metadata. */
.menurow-dishes {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
}

/* The cuisine chips, which are the landing page's chips carrying a count. */
.chips--counted li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.chips--counted b {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-weight: 800;
  font-size: 0.85rem;
}

/* City lists: on the hub, and as the cross-links at the foot of every city
   page. One column, because the second line is a sentence fragment and two
   columns of those read as a table that has lost its header. */
.citylinks {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  max-width: 34rem;
}

.citylinks li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.citylinks li a {
  font-weight: 800;
}

.citylinks li span {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* A city with no page yet. Not greyed out and not struck through — it is a
   real city we will get to, and the sentence beside it says which kind of
   "not yet" it is. */
.citylinks-soon {
  font-weight: 800;
  color: var(--ink);
}

.country + .country {
  margin-top: 1.75rem;
}

.country h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0;
}

/* The landing page's city section: cards rather than a list, because there it
   is competing with the rest of the page for a glance. */
.citycards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  list-style: none;
  margin: 1.5rem 0 1rem;
  padding: 0;
}

.citycards li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.citycards a {
  font-weight: 800;
  font-size: 1.05rem;
}

.citycards span {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ── legal documents ────────────────────────────────────────────────────── */

.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.doc h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.doc h2 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.doc h3 {
  font-size: 1.05rem;
  margin-top: 1.75rem;
}

.doc li {
  margin-bottom: 0.35rem;
}

.doc code {
  background: var(--surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}

.doc th,
.doc td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--surface-sunken);
}

.doc blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  color: var(--ink-muted);
}

/*
 * The unfilled-placeholder marker.
 *
 * A document that still says {{CONTROLLER_NAME}} must be impossible to mistake
 * for a published one — the whole point of `null` in legal/entity.json is that
 * a placeholder which renders is a placeholder that ships. So it is loud, and
 * the page above it carries a banner saying the same thing in words.
 */
.draft-banner {
  max-width: 44rem;
  margin: 1.25rem auto 0;
  padding: 0.85rem 1rem;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.95rem;
}

.todo {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-bottom: 2px dotted var(--accent);
  padding: 0 0.2em;
  font-weight: 800;
}