/* Brand colors and font: see docs/brand.md. The site serves Sora Bold itself (the page can't load Google Fonts,
   decision 0012); headings, labels and big numbers use it, as the pitch deck does (decision 0030). */
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --brand: #3225e4;
  --brand-light: #e4e2fc;
  --brand-dark-mode: #a9a3f4;
  --brand-ink: #1b1470;
  --bg: #f8f8fc;
  --ink: #14132b;
  --muted: #4a4870;
  --line: #e3e2ee;
  --card: #ffffff;
  --card-line: var(--brand-light);
  --soft: var(--brand-light);
  --soft-ink: var(--brand-ink);
  --display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --accent: var(--brand);
  --accent-ink: #ffffff;
  --good: #15803d;
  --bad: #b91c1c;
  --warn-bg: #fef3c7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0e1a;
    --ink: #efeef8;
    --muted: #a4a2ba;
    --line: #2d2b44;
    --card: #19182b;
    --card-line: #2d2b44;
    --soft: #201e3c;
    --soft-ink: #e4e2fc;
    --accent: var(--brand-dark-mode);
    --accent-ink: var(--brand-ink);
    --good: #4ade80;
    --bad: #f87171;
    --warn-bg: #3b2f0b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; justify-content: space-between; align-items: center; max-width: 880px; margin: 0 auto; padding: 18px 16px; }
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 28px; width: auto; }
.toplink { font-weight: 600; text-decoration: none; }
.toplinks { display: flex; gap: 20px; }
/* Landing page (decision 0030): laid out like the pitch deck. The top is its title slide, the white logo, tagline
   and headline on the plain main blue in light and dark mode; each section below is a content slide, a blue label
   over a big heading with white cards. The footer was its closing slide, blue again, until decision 0040 made it light. */
.home .wrap, .home .top { max-width: 1072px; padding-left: 24px; padding-right: 24px; }
.masthead { background: var(--brand); position: sticky; top: 0; z-index: 20; }
.masthead .top { justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.masthead .brand img { height: 26px; }
.masthead .toplinks { align-items: center; gap: 22px; }
.topbtn { background: #ffffff; color: var(--brand) !important; border-radius: 10px; padding: 9px 14px; font-family: var(--display); white-space: nowrap; }
.masthead .brand { flex: none; margin-right: 16px; }
.topbtn:hover { filter: brightness(1.05); }
.masthead .toplink { color: #ffffff; }
.hero { background: var(--brand); color: #ffffff; padding: 56px 0 72px; margin-top: -1px; } /* overlaps the top bar by a pixel so no hairline shows between the two blues */
.hero h1 { color: #ffffff; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 14em; }
.hero .subhead { color: var(--brand-light); font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 500; line-height: 1.3; margin: 0 0 22px; }
.hero .lede { color: var(--brand-light); max-width: 36em; margin: 0 0 30px; }
.hero .btn { background: #ffffff; color: var(--brand); }
.hero .lede { margin-bottom: 26px; }
.sect { padding: 72px 0 0; }
.sect h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 22em; }
.sect .lede { margin: 0 0 28px; }
.sect .card h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.tiles { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .tiles.three, .tiles.two { grid-template-columns: 1fr; } .tiles.four { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--card); border: 2px solid var(--card-line); border-radius: 20px; padding: 28px; }
.tile h3 { font-size: 1.3rem; margin: 0 0 8px; }
.tile p { margin: 0; color: var(--muted); }
.tile p.big { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 2rem; line-height: 1; margin: 0 0 18px; }
#clock .tile p.big { font-size: clamp(2.8rem, 6vw, 4rem); margin: 0; }
#clock .tile p.unit { margin: 2px 0 10px; }
#clock .tile h3 { margin: 0; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0 0 28px; }
@media (max-width: 860px) { .chips { grid-template-columns: 1fr; } }
.chips li { display: flex; align-items: center; gap: 14px; background: var(--soft); color: var(--soft-ink); border-radius: 20px; padding: 22px 24px; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.chips svg { flex: none; width: 30px; height: 30px; color: var(--accent); }
.chips svg path { stroke: var(--bg); }
.sect .card { margin: 0; padding: 32px; border: 2px solid var(--card-line); border-radius: 20px; }
.card.soft { background: var(--soft); border-color: var(--soft); }
.card.soft .muted { color: var(--soft-ink); }
.eyebrow .soon { margin-left: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.foot-logo { display: block; height: 36px; width: auto; }
.foot .foot-tag { font-family: var(--display); font-size: 1.15rem; margin: 14px 0 0; }
@media (max-width: 600px) {
  .home .wrap, .home .top { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 32px 0 48px; }
  .sect { padding-top: 56px; }
  .sect .card { padding: 22px 18px; }
  .tile { padding: 22px; }
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0.3em 0; }
h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h3 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.3em; }
/* The small blue label above a heading, like the deck's. */
.eyebrow { font-family: var(--display); color: var(--accent); font-weight: 700; font-size: 0.95rem; margin: 0 0 10px; }
.subhead { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; margin: 0 0 0.4em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 40em; }
.muted { color: var(--muted); font-size: 0.9rem; }
.notice { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.legal { max-width: 720px; padding-bottom: 16px; }
.legal h2 { margin-top: 1.6em; }
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
  padding: 14px 22px; font: inherit; font-family: var(--display); font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.soon { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 10px; vertical-align: 2px; white-space: nowrap; }
.features { padding-left: 1.2em; display: grid; gap: 8px; margin-bottom: 32px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-top: 24px; margin-bottom: 32px; }
/* The free check: pick the app, follow its guide, upload. One path, top to bottom. */
.flow { display: grid; gap: 28px; }
.flow-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.flow-step + .flow-step { border-top: 1px solid var(--line); padding-top: 24px; }
.flow-step.form { max-width: none; }
.flow-step.form > * { max-width: 480px; }
.flow-step legend, .flow-step h3 { font-size: 1.2rem; font-weight: 700; padding: 0; margin: 0 0 14px; }
.step-of { display: block; font-family: var(--display); color: var(--accent); font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .apps { grid-template-columns: 1fr; } }
.app { display: flex; align-items: center; gap: 12px; border: 2px solid var(--card-line); border-radius: 14px; padding: 14px 16px; font-weight: 700; cursor: pointer; background: var(--bg); }
.app input { width: 20px; height: 20px; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.app:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.app:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Only the chosen app's guide shows. Browsers without :has show all four, which still works. */
.flow:has(input[value="doordash"]:checked) .guide:not(.doordash),
.flow:has(input[value="ubereats"]:checked) .guide:not(.ubereats),
.flow:has(input[value="grubhub"]:checked) .guide:not(.grubhub),
.flow:has(input[value="ezcater"]:checked) .guide:not(.ezcater) { display: none; }
.guide { display: grid; gap: 16px 28px; margin-bottom: 8px; }
@media (min-width: 760px) { .guide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.guide figure { margin: 0; }
.guide img { display: block; width: 100%; height: auto; border-radius: 14px; }
.guide figcaption { margin-top: 6px; }
.guide-steps > p { margin: 0 0 12px; }
/* Step numbers drawn like the badges in the guide pictures, so they match at a glance. */
.nums { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: 12px; }
.nums li { counter-increment: n; position: relative; padding-left: 38px; min-height: 26px; }
.nums li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.85rem; line-height: 26px; text-align: center; }
/* Phones only: the apps' report downloads need a computer. */
.phone-note { display: none; margin: 0 0 16px; }
@media (max-width: 760px) and (pointer: coarse) { .phone-note { display: block; } }
/* "Open the app" button on phones (ALE-225, decision 0039): only the picked app's, none for ezCater or before a pick. */
.app-open, .app-open-note { display: none; }
.app-open { margin: 0 8px 8px 0; }
.flow:not(:has(input[value="doordash"]:checked, input[value="ubereats"]:checked, input[value="grubhub"]:checked)) .app-open-row { display: none; }
.flow:has(input[value="doordash"]:checked) .app-open.doordash,
.flow:has(input[value="ubereats"]:checked) .app-open.ubereats,
.flow:has(input[value="grubhub"]:checked) .app-open.grubhub { display: inline-block; }
.flow:has(input[value="doordash"]:checked, input[value="ubereats"]:checked, input[value="grubhub"]:checked) .app-open-note { display: block; margin-top: 8px; }
details { border-bottom: 1px solid var(--line); padding: 10px 0; }
summary { font-weight: 700; cursor: pointer; }
.form { display: grid; gap: 16px; max-width: 480px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form label.tick { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form label.tick input { width: auto; margin-top: 5px; flex: none; }
input, select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; color: var(--muted); font-size: 0.95rem; }
.stat span { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.stat.good span { color: var(--good); }
.stat.bad span { color: var(--bad); }
.warn { background: var(--warn-bg); border-radius: 8px; padding: 10px 14px; }
.unlock { border-color: var(--accent); }
.table-scroll { overflow-x: auto; }
/* Phones: each charge becomes a card, verdict first, so nothing hides off the right edge. */
@media (max-width: 600px) {
  .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; }
  .table-scroll thead { display: none; }
  .table-scroll tr { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
  .table-scroll td { border: 0; padding: 3px 0; text-align: left; }
  .table-scroll td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font: 0.85rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  /* Each card leads with what the charge is and its amount, then our take, then the date and order (ALE-223). */
  .table-scroll td.said { order: -3; font-weight: 700; font-size: 1.05rem; }
  .table-scroll td.said .muted { font-weight: 400; }
  .table-scroll td.said::before { content: none; }
  .table-scroll td.said + td.num { order: -2; text-align: left; padding-bottom: 8px; }
  .table-scroll td.take { order: -1; padding-bottom: 8px; }
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.num { text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }
.tag { display: inline-block; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.v-fight { background: var(--good); color: var(--bg); }
.v-skip { background: var(--line); color: var(--ink); }
.v-expired { background: var(--bad); color: var(--bg); }
.v-covers { background: var(--accent); color: var(--accent-ink); margin-top: 4px; }
.letter { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; overflow: hidden; }
.letter-head { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.letter-head .copy { margin-left: auto; }
.copy { font: inherit; font-size: 0.85rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.proof { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.proof p { margin: 0 0 4px; font-weight: 600; }
.proof ul { margin: 0; padding-left: 20px; }
.mark { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.mark button { font: inherit; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.mark button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mark-note { margin: 8px 0 0; font-size: 0.85rem; font-weight: 600; }
.newer { display: grid; gap: 10px; justify-items: start; }
/* The newsletter sign-up: email and button side by side, stacking on a phone. */
.signup { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; max-width: 560px; margin: 0 0 12px; }
.signup label { flex: 1 1 260px; display: grid; gap: 6px; font-weight: 600; }
.newer label { display: grid; gap: 6px; font-weight: 600; }
.steps + .proof { border-top: 1px solid var(--line); border-bottom: 0; }
.steps { margin: 0; padding: 12px 14px 12px 36px; display: grid; gap: 6px; }
.letter details { border-bottom: 0; border-top: 1px solid var(--line); padding: 0; }
.letter summary { padding: 10px 14px; }
.letter details .letter-head { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.letter .pick { margin: 0; padding: 10px 14px; }
.letter > details + details { border-top: 1px solid var(--line); }
pre { white-space: pre-wrap; margin: 0; padding: 14px; font: 0.95rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.foot { color: var(--muted); font-size: 0.9rem; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot p { margin: 0 0 6px; }

/* Brand kit page (/brand/, ALE-199). Colors come from here, not the page: the site blocks in-page styles. */
.kit blockquote { margin: 0 0 8px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.kit .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kit .tile { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.kit .tile img { display: block; box-sizing: border-box; width: 100%; height: 120px; object-fit: contain; padding: 28px; }
.kit .tile-light img { background: #ffffff; }
.kit .tile-blue img { background: var(--brand); }
.kit .tile figcaption { padding: 10px 14px; font-size: 0.9rem; color: var(--muted); }
.kit .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kit .swatch { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.kit .chip { display: block; height: 64px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; }
.kit .chip-main { background: var(--brand); }
.kit .chip-light { background: var(--brand-light); }
.kit .chip-dark-mode { background: var(--brand-dark-mode); }
.kit .chip-ink { background: var(--brand-ink); }

/* ALE-213 (decision 0032) and ALE-220 (decision 0033): the peers' page shape, with fewer boxes and ticks. */
/* The top bar: section links on a computer; on a phone only the logo and the button stay. */
@media (max-width: 760px) { .sectlink { display: none; } .masthead .toplinks { gap: 14px; } .masthead .brand img { height: 22px; } .topbtn { padding: 8px 12px; } }
/* The hero: words on the left, the example result on the right, a footnote under both. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 0 22px; }
.hero-facts { color: #ffffff; font-weight: 600; margin: 0; }
.works-note { margin: 48px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.25); color: var(--brand-light); font-size: 0.9rem; max-width: 40em; }
.works-note strong { color: #ffffff; }
/* The example result: always a white card with dark text, because it sits on the main blue in both color modes. */
.example { margin: 0; background: #ffffff; color: #14132b; border-radius: 20px; padding: 22px 24px 18px; box-shadow: 0 24px 60px rgba(10, 6, 80, 0.35); }
.example .muted { color: #4a4870; }
.example-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 0.85rem; }
.example-tag { font-family: var(--display); font-weight: 700; color: var(--brand); background: var(--brand-light); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; }
.example-title { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: 0 0 4px; color: #14132b; }
.example-sub { margin: 0 0 14px; color: #4a4870; font-size: 0.9rem; }
.example-rows { list-style: none; padding: 0; margin: 0 0 12px; border-top: 1px solid #e3e2ee; }
.example-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid #e3e2ee; font-size: 0.92rem; align-items: center; }
.example-rows .what { font-weight: 600; }
.example-rows .when { grid-column: 1 / -1; color: #4a4870; font-size: 0.85rem; }
.example .tag { font-size: 0.75rem; }
.example .v-fight { background: #15803d; color: #ffffff; }
.example .v-skip { background: #e3e2ee; color: #14132b; }
.example .v-expired { background: #b91c1c; color: #ffffff; }
.example figcaption { font-size: 0.8rem; line-height: 1.4; }
/* The clock: each app's window as a bar, its length the days out of ezCater's 45. */
.windows { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.window .bar { display: flex; align-items: center; gap: 14px; }
.window h3 { order: -1; flex: none; width: 6.5em; margin: 0; font-size: 1.05rem; }
.window .bar::before { content: ""; flex: none; height: 44px; border-radius: 8px; background: var(--accent); width: calc(var(--share) * (100% - 12em)); min-width: 8px; }
.window p { margin: 0; }
.window p.big { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 1.9rem; line-height: 1; }
.window p.unit { color: var(--muted); font-size: 0.95rem; }
.w-14 { --share: 0.311; } .w-30 { --share: 0.667; } .w-45 { --share: 1; }
@media (max-width: 600px) { .window h3 { width: 5.2em; font-size: 0.95rem; } .window .bar::before { height: 34px; width: calc(var(--share) * (100% - 10.5em)); } .window p.big { font-size: 1.5rem; } }
/* How it works: numbered steps beside the wall. */
.how-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; gap: 40px; } }
.steps-list { list-style: none; counter-reset: s; padding: 0; margin: 32px 0 0; display: grid; gap: 26px; }
.steps-list li { counter-increment: s; position: relative; padding-left: 64px; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: -0.1em; font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); }
.steps-list h3 { margin: 0 0 6px; font-size: 1.2rem; }
.steps-list p { margin: 0; color: var(--muted); }
.wall-fig { margin: 0; justify-self: end; max-width: 400px; width: 100%; }
.wall { display: block; width: 86%; height: auto; margin: 0 0 22px 7%; }
.wall .brick { fill: var(--brand-ink); }
.wall .found { fill: var(--brand); }
@media (prefers-color-scheme: dark) { .wall .brick { fill: #3a3570; } .wall .found { fill: var(--brand-dark-mode); } }
.wall-fig figcaption { color: var(--muted); font-size: 0.95rem; line-height: 1.5; padding-left: 7%; }
@media (max-width: 860px) { .wall-fig { justify-self: start; } }
/* By hand or with unComped: uneven columns, a rule between, no boxes. */
.compare { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-top: 36px; align-items: start; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; gap: 32px; } }
.compare h3 { margin: 0 0 10px; }
.compare p { margin: 0; color: var(--muted); }
.side-new { border-left: 3px solid var(--accent); padding-left: 32px; }
@media (max-width: 760px) { .side-new { padding-left: 24px; } }
.pull { margin: 0 0 32px !important; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.pull-num { display: block; font-family: var(--display); font-weight: 700; color: var(--accent); font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 10px; }
/* Pricing: two cards, the paid one edged in blue. The only tick lists on the page. */
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); }
.plain li { position: relative; padding-left: 26px; line-height: 1.45; }
.plain.ticks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.plain.ticks li::after { content: ""; position: absolute; left: 6px; top: calc(0.3em + 3px); width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.prices .tile { display: flex; flex-direction: column; gap: 14px; }
.prices .tile h3 { margin: 0; }
.prices .tile p { margin: 0; }
.prices .tile p.big { font-size: clamp(2.4rem, 5vw, 3.2rem); margin: 0; }
.prices .per { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--muted); }
.prices .tile.featured { border-color: var(--accent); }
.prices .plain { flex: 1; }
.prices .btn { align-self: flex-start; }
/* How we work: three statements over a rule, no badges. */
.never { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 760px) { .never { grid-template-columns: 1fr; gap: 14px; } }
.never li { border-top: 3px solid var(--accent); padding-top: 14px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.founder { font-weight: 600; }
/* Questions: each one opens on its own. */
.faq { margin-top: 28px; border-top: 1px solid var(--line); }
.faq details { padding: 0; }
.faq summary { padding: 18px 36px 18px 0; font-family: var(--display); font-size: 1.1rem; line-height: 1.3; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: 44em; }
/* What's next: a plain list in two columns. */
.next-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
@media (max-width: 760px) { .next-list { grid-template-columns: 1fr; gap: 22px; } }
.next-list li { border-top: 1px solid var(--line); padding-top: 16px; }
.next-list h3 { margin: 0 0 6px; font-size: 1.15rem; }
.next-list p { margin: 0; color: var(--muted); }
/* The footer: the closing ask, then the links in groups (colors in the ALE-226 block below). */
.foot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; }
.foot-cta p { margin: 0; }
.foot-ask { font-size: 1.1rem; margin-top: 10px !important; max-width: 30em; }
.foot-groups { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px 72px; margin-bottom: 32px; }
@media (max-width: 600px) { .foot-groups { grid-template-columns: 1fr 1fr; gap: 24px 32px; } }
.foot-groups h3 { font-size: 0.9rem; margin: 0 0 10px; }
.foot-groups a { display: block; text-decoration: none; margin: 0 0 8px; font-size: 0.95rem; }
.foot-groups a:hover { text-decoration: underline; }
.foot-copy { font-size: 0.85rem; }

/* Owner dashboard (ALE-91) */
.three:not(.tiles) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 760px) { .three:not(.tiles) { grid-template-columns: 1fr; } }
.three h3 { margin: 0 0 8px; font-size: 1rem; }
.tally { margin: 0; padding-left: 1.3em; }
.tally li { margin: 4px 0; }
.days { list-style: none; margin: 0; padding: 0; }
.days li { display: grid; grid-template-columns: 2.5em 1fr 2em; align-items: center; gap: 8px; margin: 4px 0; }
.days meter { width: 100%; height: 10px; }
.days li span:last-child { text-align: right; color: var(--muted); }
.card.saved { border-color: var(--card-line); }
.actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 32px 0; }
.actions form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ALE-222 (decision 0035): the free check form helps before anything is sent. */
/* Until an app is picked, step 2 says to pick one instead of showing all four guides. */
.guide-pick { display: none; }
.flow:not(:has(input[name="platform"]:checked)) .guide { display: none; }
.flow:not(:has(input[name="platform"]:checked)) .guide-pick { display: block; margin: 0; }
/* ezCater takes only the report file, so the screenshot wording hides when it's picked. */
.for-ezcater { display: none; }
.flow:has(input[value="ezcater"]:checked) .for-ezcater { display: inline; }
.flow:has(input[value="ezcater"]:checked) .not-ezcater { display: none; }
/* The upload box. Without the form's script the browser's own file button shows, as before. */
.drop { display: grid; gap: 6px; font-weight: 600; }
.drop-box { display: none; }
form.js .drop { position: relative; }
form.js .drop-box { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 26px 18px; border: 2px dashed var(--card-line); border-radius: 14px; background: var(--bg); font-weight: 400; }
/* The real file field lies invisibly over the whole box, so a click or a dropped file lands on it. */
form.js .drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.drop-cta { font-family: var(--display); color: var(--accent); }
.drop-or { color: var(--muted); font-size: 0.9rem; }
.drop-name { font-weight: 700; word-break: break-all; }
.drop-name:empty { display: none; }
form.js .drop:hover .drop-box, form.js .drop.over .drop-box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
form.js .drop:has(input:focus-visible) .drop-box { outline: 2px solid var(--accent); outline-offset: 2px; }
form.js .drop.chosen .drop-box { border-style: solid; border-color: var(--accent); }
form.js .drop.chosen .drop-cta { font-size: 0.9rem; }
.drop-name { order: -1; }
form.js .drop.bad .drop-box { border-color: var(--bad); }
form.js .drop.chosen .drop-or { display: none; }
.field-error { margin: -6px 0 0; color: var(--bad); font-weight: 600; font-size: 0.95rem; }
.btn:disabled { opacity: 0.75; cursor: progress; filter: none; }
@media (pointer: coarse) { .drop-or { display: none; } }

/* ALE-223 (decision 0036): days left worked out when the result opens, shown as its own tag; dates kept on one line. */
.nowrap { white-space: nowrap; }
.tag.due { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tag.due.urgent { color: var(--bad); border-color: var(--bad); }
.tag.due.over { background: var(--bad); color: var(--bg); border-color: var(--bad); }
/* Every page has the home page's blue top bar (ALE-223). Only the home page's stays on screen as you scroll, so a
   jump to a charge on the result page isn't hidden under it. */
body:not(.home) .masthead { position: static; }
.newer .drop { justify-self: stretch; max-width: 480px; }
.newer .field-error { margin: 0; }
/* "Credited back to your payout": said plainly where it matters, in the site's green for a good result (ALE-223). */
.unlock .back { font-weight: 600; color: var(--good); }

/* unComped News, uncomped.news (ALE-215, decision 0034): the landing page's blue bar and band, then the issue in
   a reading column. The issue's HTML is cleaned to plain tags (src/news.js), so it's styled by tag here. */
.news .wrap, .news .top { max-width: 760px; }
.news-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.news-word { font-family: var(--display); font-weight: 700; color: var(--brand-light); font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; }
.news-hero { padding: 44px 0 52px; }
.news-hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); max-width: 15em; }
.news-hero .lede { margin-bottom: 26px; }
.news-hero .signup { max-width: 600px; }
.news-hero .signup label { color: #ffffff; }
.news-hero input { background: #ffffff; color: var(--ink); border-color: #ffffff; }
.hero-fine { color: var(--brand-light); font-size: 0.85rem; margin: 6px 0 0; max-width: 40em; }
.hero-fine a { color: #ffffff; }
.issue { padding: 44px 0 8px; }
.issue h2 { font-size: clamp(1.6rem, 4.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 22px; }
.issue-body { font-size: 1.06rem; line-height: 1.65; }
.issue-body p, .issue-body ul, .issue-body ol, .issue-body blockquote { margin: 0 0 1.05em; }
.issue-body h3 { font-size: 1.22rem; margin: 1.7em 0 0.45em; }
.issue-body h4 { font-size: 1.05rem; margin: 1.4em 0 0.4em; }
.issue-body li + li { margin-top: 0.35em; }
/* Quotes in an issue are the "Who pays?" boxes (docs/newsletter.md), so they show as a soft blue box. */
.issue-body blockquote { margin-left: 0; margin-right: 0; padding: 12px 16px; background: var(--soft); color: var(--soft-ink); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }
.issue-body blockquote p { margin: 0; }
.issue-body blockquote p + p { margin-top: 0.35em; }
.issue-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.issue-body pre { background: var(--soft); border-radius: 8px; }
.news-again { margin: 28px 0 8px; }
.news-again h2 { margin-bottom: 6px; }
.issue-empty { margin: 40px 0 8px; }
.past { padding-top: 40px; }
.past h2 { font-size: 1.15rem; margin-bottom: 8px; }
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.issue-list a { font-weight: 600; text-decoration: none; }
.issue-list a:hover { text-decoration: underline; }
.issue-list time { flex: none; color: var(--muted); font-size: 0.88rem; }
.news-check { margin: 40px 0 0; padding: 18px 20px; border-radius: 12px; background: var(--soft); color: var(--soft-ink); }
.news-check a { color: inherit; font-weight: 700; }
.issue h2 a { color: inherit; text-decoration: none; }
.issue h2 a:hover { text-decoration: underline; }
.issue .eyebrow a { color: inherit; text-decoration: none; }
/* One issue on its own address (ALE-216). */
.news-single .issue { padding-top: 40px; }
.news-single .issue h1 { font-size: clamp(1.9rem, 5.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 24px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.share span { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.issue-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.issue-nav a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 600; line-height: 1.35; }
.issue-nav a:hover { border-color: var(--accent); }
.issue-nav span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 600; margin-bottom: 2px; }
.issue-older { text-align: right; grid-column: 2; }
@media (max-width: 600px) {
  .news-hero { padding: 30px 0 40px; }
  .issue-nav { grid-template-columns: 1fr; }
  .issue-older { text-align: left; grid-column: auto; }
  .news-word { font-size: 1.1rem; }
  .issue { padding-top: 32px; }
  .issue-list li { flex-direction: column; gap: 2px; }
}

/* ALE-226 (decision 0040): the home page takes the News page's lighter feel. A light strip separates the blue top
   bar from the blue band below it on every page, the band is the News page's height, and the footer is light,
   with the closing ask between two hairlines, instead of a second blue band. */
.masthead { margin-bottom: 28px; }
.hero { margin-top: 0; padding: 44px 0 52px; }
.works-note { margin: 22px 0 0; padding: 0; border: 0; color: var(--muted); }
.works-note strong { color: var(--ink); }
.light-foot { margin-top: 88px; padding-top: 0; border-top: 0; }
.light-foot .foot-cta { padding: 40px 0; margin-bottom: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.light-foot .foot-tag { color: var(--ink); }
.light-foot .foot-ask { color: var(--muted); }
.light-foot .foot-groups { padding-top: 0; }
.light-foot .foot-groups h3 { color: var(--ink); }
.light-foot .foot-groups a { color: var(--accent); }
.light-foot .notice { margin: 8px 0 6px; }
@media (max-width: 600px) {
  .hero { padding: 30px 0 40px; }
  .masthead { margin-bottom: 20px; }
  .light-foot .foot-cta { padding: 32px 0; }
}

/* ALE-228 (decision 0042): a calmer hero, closer to the News page's band: the tagline, the check headline, one
   short line, one button and a quiet facts line beside a three-row example. The disclaimer sits just under it. */
.hero .lede { max-width: 30em; }
.hero-facts { color: var(--brand-light); font-weight: 500; font-size: 0.95rem; }
.hero-actions { margin-bottom: 16px; }
.under-hero .works-note { margin-bottom: 6px; }
.under-hero .notice { margin: 0; max-width: 60em; }