/* Bakehouse Collect — one stylesheet, no framework, no build step.

   Committed to a light palette: every colour is painted explicitly so the
   page never borrows a host's ground. The ground is the cream from the
   logo rather than white, and the dark green, ochre and red are the three
   inks the mark itself uses. Changing the accent is one line. */

:root {
  color-scheme: light;

  /* The logo's ground. Cream, not white — warm enough to read as paper
     under the type, which is the whole point of a bakery brand. */
  --paper: #fbf7ec;
  --paper-sink: #f4eddd;
  --card: #ffffff;
  --bar: #fdfaf3;

  --rule: #e6ddc9;
  --rule-firm: #d7cab0;
  --rule-soft: #efe8d8;

  /* Ink — the dark green from the mark, not black. */
  --ink: #23302a;
  --ink-dim: #55635b;
  --ink-faint: #7f8b83;

  /* The ochre carries the decoration: rules, labels, icon strokes. It is
     deliberately never used for body text — on cream it does not reach
     4.5:1 and never will. */
  --ochre: #c08843;
  --ochre-deep: #9c6a2d;
  --ochre-soft: #f7ecd9;
  --ochre-line: #e6d2b0;

  /* The one true accent, spent sparingly: the red of the "C". */
  --accent: #a8301b;
  --accent-deep: #8a2615;
  --accent-soft: #fae9e4;
  --accent-line: #eccbc2;

  --ok: #2f6b4f;
  --ok-soft: #e7f1ec;
  --warn: #9a6b05;
  --warn-soft: #fbf0d6;

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1140px;

  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --shadow: 0 1px 2px rgba(35, 48, 42, 0.05), 0 8px 24px rgba(35, 48, 42, 0.05);
  --shadow-lift: 0 2px 4px rgba(35, 48, 42, 0.06), 0 14px 38px rgba(35, 48, 42, 0.09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* The top bar is sticky, so without this every #link lands with its
   heading tucked underneath it. */
html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.3rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.012em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

img { max-width: 100%; height: auto; display: block; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ============ top bar ============ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(253, 250, 243, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-thin { color: var(--ochre-deep); font-weight: 700; }
.brand img { flex: none; }

.nav {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
  font-size: 0.94rem;
}
.nav a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--ochre); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ochre); }

.topbar .btn-sm { margin-left: 0.25rem; }

/* Narrow screens fold the nav behind a Menu button. The button only
   appears once site.js has added .js, because without the script it
   could not open anything; the footer carries every link either way. */
.nav-toggle,
.nav-cta { display: none; }

.nav-toggle {
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  font: 600 0.88rem/1 var(--body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] { background: var(--card); }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 0.6rem; }
  .brand { margin-right: auto; }
  .topbar .btn-sm { margin-left: 0; }
  .nav { display: none; }
  .js .nav-toggle { display: inline-flex; }

  .topbar.nav-open .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-basis: 100%;
    order: 3;
    margin: 0.35rem 0 0.1rem;
    font-size: 1rem;
  }
  .topbar.nav-open .nav a {
    padding: 0.8rem 0.1rem;
    border-bottom: 1px solid var(--rule);
  }
  .topbar.nav-open .nav a[aria-current="page"] { border-bottom-color: var(--ochre); }
}

/* Too narrow for the brand, the call to action and Menu on one row, so
   the call to action moves into the menu. */
@media (max-width: 600px) {
  .topbar .btn-sm { display: none; }
  .topbar.nav-open .nav a.nav-cta {
    display: block;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    text-align: center;
    font-weight: 600;
    color: #fdfaf3;
    background: var(--ink);
    border: 0;
    border-radius: var(--radius-sm);
  }
}

/* ============ buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border-radius: var(--radius-sm);
  font: 600 0.97rem/1 var(--body);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-accent {
  background: var(--ink);
  color: #fdfaf3;
  box-shadow: var(--shadow);
}
.btn-accent:hover { background: #18241e; color: #fdfaf3; box-shadow: var(--shadow-lift); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-firm);
}
.btn-ghost:hover { background: var(--card); color: var(--ink); border-color: var(--ink-faint); }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; }

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

/* ============ sections ============ */

section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.band { background: var(--paper-sink); border-block: 1px solid var(--rule); }
.band--tint { background: var(--ochre-soft); border-color: var(--ochre-line); }

.eyebrow {
  display: inline-block;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin: 0 0 0.9rem;
}

.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-note { color: var(--ink-dim); font-size: 1.05rem; }

.lede {
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--ink-dim);
  max-width: 40rem;
}

/* ============ hero ============ */

.hero {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 80% 55% at 78% 8%, rgba(192, 136, 67, 0.13), transparent 70%),
    var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 0.65rem; }

.badge-free {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.45rem 0.85rem;
  background: var(--ok-soft);
  border: 1px solid #cfe2d7;
  border-radius: 999px;
  color: var(--ok);
  font: 600 0.85rem/1 var(--body);
}

.hero-art {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-lift);
}
.hero-art img { border-radius: var(--radius-sm); }
/* The picker capture is small; at its natural width rather than
   stretched across a full-width tablet column, where it would blur. */
.hero-art .shot img { width: auto; max-width: 100%; margin-inline: auto; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust svg { color: var(--ochre); flex: none; }

/* ============ the problem ============ */

.quote-stack { display: grid; gap: 1rem; max-width: 42rem; }
.quote-stack p {
  margin: 0;
  padding: 0.9rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-dim);
}

/* ============ features ============ */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature--flip .feature-body { order: 2; }
/* For a capture too wide to read at half width: the text first, then the
   screenshot across the whole column. */
.feature--stack { grid-template-columns: minmax(0, 1fr); }
.feature--stack .feature-body { max-width: 46rem; }

@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature-body { order: 0; }
}

.feature h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
}

.tick {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.tick li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-dim);
}
.tick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--ochre);
  border-bottom: 2px solid var(--ochre);
  transform: rotate(-45deg);
}
.tick b { color: var(--ink); font-weight: 600; }

/* ============ screenshot slots ============ */

/* Every shot the page still needs, drawn as a labelled placeholder rather
   than left blank — a missing image you can see is a missing image that
   gets taken. Delete the .shot-slot and drop an <img> in its place. */
.shot {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem;
  box-shadow: var(--shadow);
}
.shot img { border-radius: var(--radius-sm); width: 100%; height: auto; }
.shot img + img { margin-top: 0.75rem; }
.shot figcaption {
  margin: 0.85rem 0.35rem 0.3rem;
  font-size: 0.92rem;
  color: var(--ink-faint);
  font-style: italic;
}

.shot-slot {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  min-height: 16rem;
  padding: 1.75rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 11px,
      rgba(192, 136, 67, 0.05) 11px, rgba(192, 136, 67, 0.05) 22px
    ),
    var(--ochre-soft);
  border: 2px dashed var(--ochre-line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
}
.shot-slot .tag {
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.shot-slot p { font-size: 0.92rem; max-width: 26rem; margin: 0; }

/* ============ screenshots page ============ */

/* One column, each capture at its own width. These are real screens:
   shrunk into a two-up grid their text stops being readable, and a small
   one stretched to match a wide one turns soft. */
.gallery {
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}
.gallery .shot {
  width: fit-content;
  max-width: 100%;
}
.gallery .shot img {
  width: auto;
  max-width: 100%;
}
.gallery-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gallery-index a {
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
}
.gallery-index a:hover { background: var(--card); }

/* ============ cards ============ */

/* A screenshot at the foot of a card, for features that are easier
   shown than described. */
.card-shot { margin: 1.1rem 0 0; }
.card-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.card-shot figcaption {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-faint);
}

.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--ink-dim); font-size: 0.97rem; }
.card-icon {
  display: grid;
  place-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--ochre-soft);
  color: var(--ochre-deep);
  border: 1px solid var(--ochre-line);
}

/* ============ pricing ============ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  max-width: 54rem;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.plan--paid {
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
}

.plan-name {
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.plan-price {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.7rem 0 0.15rem;
}
.plan-price small {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.plan-note { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 1.25rem; }
.plan .tick { margin-top: 0; flex: 1; }
.plan .btn { margin-top: 1.5rem; }

.plan-foot {
  max-width: 44rem;
  margin-top: 1.5rem;
  color: var(--ink-dim);
  font-size: 0.97rem;
}

/* ============ status pills ============ */

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font: 500 0.72rem/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status--free { background: var(--ok-soft); color: var(--ok); border: 1px solid #cfe2d7; }
.status--paid { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }

/* ============ faq ============ */

.faq { max-width: 46rem; display: grid; gap: 0.6rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0 1.2rem;
}
.faq details[open] { border-color: var(--rule-firm); }
.faq summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ochre-deep);
  font-size: 1.2rem;
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p,
.faq details > ul { color: var(--ink-dim); margin: 0 0 1rem; font-size: 0.97rem; }

/* ============ contact form ============ */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

form.enquiry {
  max-width: 44rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}

label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.hint { font-weight: 400; color: var(--ink-faint); }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: 400 16px/1.5 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius-sm);
}
textarea { resize: vertical; min-height: 8rem; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ochre);
  outline-offset: 1px;
  border-color: var(--ochre);
}

/* The honeypot. Off-screen rather than display:none — some bots skip
   anything hidden outright, and the point is that they fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status-msg {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.status-msg--ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #cfe2d7; }
.status-msg--bad { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }

/* ============ tables (legal + retention) ============ */

.table-scroll { overflow-x: auto; margin: 0 0 1.25rem; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.95rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
th, td {
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
th {
  font: 500 0.76rem/1.5 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-sink);
}

/* ============ prose (legal pages) ============ */

.prose { max-width: 44rem; }
.prose h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-firm);
}
.prose h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.prose p, .prose li { color: var(--ink-dim); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose strong { color: var(--ink); }

.doc-meta {
  color: var(--ink-faint);
  font-size: 0.92rem;
  font-family: var(--mono);
  margin-bottom: 2rem;
}

.callout {
  background: var(--ochre-soft);
  border: 1px solid var(--ochre-line);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.callout p { color: var(--ink-dim); }
.callout p:first-child { margin-top: 0; }

/* ============ placeholders that must not ship ============ */

/* Anything still to be filled in, marked so it is impossible to read past.
   Search the pages for class="todo" before going live. */
.todo {
  background: var(--warn-soft);
  border: 1px dashed #d8b860;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  color: var(--warn);
  font-weight: 600;
}

/* ============ footer ============ */

.foot {
  background: var(--ink);
  color: #cfd8d2;
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
}
.foot a { color: #e8ede9; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
/* On a phone the brand block and the first link column would share a
   row, and the wordmark, which cannot wrap, runs into the heading beside
   it. So the brand takes a row of its own and the links pair up below. */
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
.foot h4 {
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 1rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.94rem; }
.foot .brand { color: #f4f1e8; }
.foot .brand .brand-thin { color: var(--ochre); }
.foot-blurb { margin-top: 0.9rem; font-size: 0.94rem; color: #9fada6; max-width: 24rem; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.87rem;
  color: #8e9c95;
}
.foot-legal { max-width: 46rem; }

.disclaimer {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #8e9c95;
}

/* ============ 404 ============ */

.oops {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.5rem;
}
.oops .code {
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--ochre-deep);
}

/* ============ print ============ */

@media print {
  .topbar, .foot, .cta-row, form.enquiry, .shot-slot { display: none; }
  body { background: #fff; font-size: 11pt; }
  .prose { max-width: none; }
}

/* ============ utilities ============ */

/* The CSP is style-src 'self' with no 'unsafe-inline', so a style=""
   attribute silently does nothing in production while looking fine on a
   developer's machine. Everything that would otherwise have been written
   inline lives here instead, and a test fails if one creeps back in. */

.u-bare { border: 0; box-shadow: none; padding: 0; }
.u-mt { margin-top: 1rem; }
.u-mb { margin-bottom: 1.5rem; }
.u-center-x { margin-inline: auto; }
.u-narrow { max-width: 52rem; }
.u-narrower { max-width: 44rem; }

.shot--sm { max-width: 34rem; margin-top: 2.5rem; }
.shot--below { margin-top: 1.5rem; }

.cta-row--tight { margin-top: 1.25rem; align-items: center; }
.cta-row--center { justify-content: center; }

.foot-base--bare { border-top: 0; padding-top: 0; }

.disclaimer--doc { color: var(--ink-faint); margin-top: 2.5rem; }

/* ============ plan comparison ============ */

/* Three states per row, and they have to be tellable apart without
   colour: a tick, a dash, and a triangle for "there but limited". */

.cmp { margin-bottom: 2.5rem; }
.cmp table { min-width: 34rem; }
.cmp th.col, .cmp td.col { width: 9.5rem; }

.cmp td.what { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.cmp td.what .note {
  display: block;
  font-weight: 400;
  color: var(--ink-dim);
  font-size: 0.87rem;
  line-height: 1.5;
  margin-top: 0.2rem;
  max-width: 42em;
}
.cmp td.col { font-size: 0.89rem; font-variant-numeric: tabular-nums; }

.in { color: var(--ink); font-weight: 600; }
.in::before { content: "\2713"; color: var(--ok); font-weight: 700; margin-right: 0.4em; }

.out { color: var(--ink-faint); font-weight: 400; }
.out::before { content: "\2014"; margin-right: 0.4em; }

.cap { color: var(--ink-dim); font-weight: 600; }
.cap::before {
  content: "\25B2";
  color: var(--ochre-deep);
  font-size: 0.62em;
  vertical-align: 0.18em;
  margin-right: 0.45em;
}

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
}

.plans--top { margin-bottom: 0; }

/* Billing line under a plan price: the alternative term, and the rough
   sterling figure. The sterling is hand-maintained and drifts with the
   rate, so it is set quieter than the real price it approximates. */
.plan-billing {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.plan-approx { color: var(--ink-faint); }

/* The line under each form saying what its details are used for. UK GDPR
   wants that said when the details are collected, not only in a policy
   linked from the footer. */
.form-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}