/* ---------------------------------------------------------------------------
   CloudCompliance — cloudcompliance.ca
   Generated from shared/templates/custom.css.tpl. Do not edit per-domain
   copies by hand; edit the template and re-run shared/scripts/build-css.py.

   Design brief, so future edits do not drift:

   The reference points are soc2auditors.org and the Stripe docs, not a SaaS
   landing page. A reader arriving here has a problem ("our buyer wants a SOC 2
   report") and wants an answer in the first screen. So the content is the hero.
   There is no hero image, no illustration, no animation. Text starts near the
   top of the page and is left-aligned at a measure that stays readable.

   Deliberate omissions, each of which reads as machine-generated when present:
   gradients of any kind, backdrop-filter, box-shadow, border-radius above 4px,
   scroll-triggered reveals, hover transforms, and icon fonts. Hover states
   change colour and nothing else. Every one of these is cheap to add later and
   impossible to un-see once a reader has clocked the template.

   Bootstrap 5.3 is loaded from CDN for its grid and nothing else. Everything it
   styles visually is overridden below. If a Bootstrap component is recognisable
   on the rendered page, that is a bug.
--------------------------------------------------------------------------- */

:root {
  --accent:        #ea580c;
  --accent-dark:   #c2410c;
  --accent-wash:   #fff7ed;

  --ink:           #1a1a2e;
  --ink-dim:       #4a4a5e;
  --ink-muted:     #6b7280;
  --rule:          #e2e8f0;
  --rule-strong:   #cbd5e1;
  --paper:         #ffffff;
  --paper-alt:     #f8fafc;

  --measure:       720px;   /* prose column */
  --measure-wide:  1100px;  /* tables, directory, page frame */

  --radius:        3px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* --- base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap sets its own font stack and link colours on these. Take them back. */
body, .container, .container-fluid, .row, [class^="col-"], [class*=" col-"] {
  font-family: var(--font);
}

a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ink); }          /* colour only — no transform, no shadow */
a:focus-visible {
  /* accent-dark, not accent. The amber on soc2prep is 3.19:1 against white and
     3.04:1 against --paper-alt, which is at or under the 3:1 floor WCAG 1.4.11
     sets for a non-text indicator. Every accent_dark in the registry clears
     4.5:1, so the ring is visible on all six without touching the brand. */
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
  opacity: 1;                            /* Bootstrap fades hr to 0.25 */
}

/* --- typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.011em;
}

h1 { font-size: 2.05rem; margin-bottom: 0.5em; }
h2 {
  font-size: 1.45rem;
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
}
h3 { font-size: 1.15rem; margin-top: 1.9em; }
h4 { font-size: 1rem;    margin-top: 1.6em; }

/* First heading after the page intro should not carry a rule. */
h2.no-rule { border-top: 0; padding-top: 0; }

p { margin: 0 0 1.15rem; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
li > ul, li > ol { margin-top: 0.4rem; margin-bottom: 0.6rem; }

strong { font-weight: 650; }

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  color: var(--ink);
}

pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.4rem;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

blockquote {
  margin: 0 0 1.4rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-dim);
}

.lede {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 1.6rem;
}

.small-print {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* --- page frame ---------------------------------------------------------- */

.wrap {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.prose { max-width: var(--measure); }

/* Let tables and other wide blocks escape the prose measure without breaking
   the reading column for text. */
.prose .bleed { max-width: var(--measure-wide); }

main { padding-bottom: 4rem; }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead-inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 680;
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 20px; height: 20px; display: block; }

.nav-primary { display: flex; align-items: center; gap: 1.5rem; }
.nav-primary a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
}

/* The two commercial links in the masthead. A row of identically weighted grey
   links gives the thing the site is for no more prominence than a glossary
   entry, which is what made the chrome read as flat. */
.nav-primary a.nav-cta {
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
  font-weight: 650;
}
.nav-primary a.nav-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.nav-primary a.nav-cta-quiet {
  background: transparent;
  color: var(--accent-dark);
  border-color: var(--accent);
}
.nav-primary a.nav-cta-quiet:hover {
  background: var(--accent-wash);
  color: var(--ink);
  border-color: var(--accent-dark);
}
/* Plain nav links only. Without the :not(), the current-page rule repaints the
   CTA buttons' label to the accent colour on top of an accent background, so
   standing on /get-quotes made the "Get quotes" button unreadable, and the same
   on every site in its own brand colour. */
.nav-primary a:not(.nav-cta):hover,
.nav-primary a:not(.nav-cta)[aria-current="page"] { color: var(--accent-dark); }

/* The current page, when it is one of the two CTAs. Keep the fill and the
   white label, and mark it with a ring instead of a colour change. */
.nav-primary a.nav-cta[aria-current="page"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.nav-primary a.nav-cta-quiet[aria-current="page"] {
  color: var(--ink);
  background: var(--accent-wash);
  border-color: var(--accent-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

/* --- breadcrumbs --------------------------------------------------------- */

.crumbs {
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 1.1rem 0 0;
  margin: 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
  content: "/";
  color: var(--rule-strong);
  margin-right: 0.4rem;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- page head ----------------------------------------------------------- */

.page-head { padding: 1.4rem 0 0.4rem; }
.page-head h1 { margin-bottom: 0.35rem; }
.page-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
.page-meta span + span::before {
  content: "·";
  margin: 0 0.5rem;
  color: var(--rule-strong);
}

/* --- layout with sidebar ------------------------------------------------- */

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 240px;
  gap: 3.5rem;
  align-items: start;
}

.aside {
  position: sticky;
  top: 1.5rem;
  font-size: 0.9rem;
  /* The grid puts the aside and the article in the same row, but the article
     starts 1.4rem down because of .page-head's padding. Without a matching
     offset the table of contents sits flush against the masthead while the h1
     beside it does not, which reads as a missing margin rather than a design.
     margin rather than padding, so the sticky offset above is unaffected once
     it detaches. */
  margin-top: 1.75rem;
}
.aside h2, .aside h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 0.7rem;
}
.aside ul { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.aside li { margin-bottom: 0.45rem; line-height: 1.45; }
.aside a { color: var(--ink-dim); text-decoration: none; }
.aside a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.6rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin: 0 0 1.6rem;
  /* Bootstrap's .table sets these on a class; we set them on the element so
     plain <table> in generated content is styled without extra markup. */
  color: var(--ink);
}
.table-scroll > table { margin-bottom: 0; }

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 0 0 0.5rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-weight: 650;
  font-size: 0.85rem;
  color: var(--ink-dim);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--paper-alt); }
tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* --- FAQ (details/summary) ----------------------------------------------- */

.faq { margin: 1.2rem 0 2rem; border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  padding: 0.85rem 1.8rem 0.85rem 0;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dark); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.8rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-muted);
  font-weight: 400;
}
.faq details[open] > summary::after { content: "\2212"; }  /* minus */
.faq details > *:not(summary) { margin-left: 0; }
.faq details p:last-child { margin-bottom: 1rem; }

/* --- callouts ------------------------------------------------------------ */

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
  font-size: 0.94rem;
}
.note :last-child { margin-bottom: 0; }
.note-title {
  font-weight: 650;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  margin: 0 0 0.35rem;
}

/* Affiliate and operator disclosures. Quieter than a note, still visible. */
.disclosure {
  font-size: 0.84rem;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0 0 1.6rem;
}
.disclosure :last-child { margin-bottom: 0; }

/* --- buttons and CTAs ---------------------------------------------------- */

.btn,
button.btn,
a.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  /* Bootstrap adds a transition and a focus ring shadow. Neither. */
  transition: none;
  box-shadow: none;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* A filled button must keep its white label in every link state. The generic
   a:hover and current-page rules above set a colour, and any of them landing on
   a button puts accent text on an accent fill. */
.btn:link, .btn:visited, .btn:active,
a.btn:hover, a.btn[aria-current="page"] { color: #fff; }
.btn-secondary:link, .btn-secondary:visited, .btn-secondary:active { color: var(--accent-dark); }
.btn-secondary:hover { color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.btn-secondary,
a.btn-secondary {
  background: var(--paper);
  color: var(--accent-dark);
  border-color: var(--rule-strong);
}
.btn-secondary:hover {
  background: var(--paper-alt);
  color: var(--ink);
  border-color: var(--ink-dim);
}

.cta {
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 2.4rem 0;
  background: var(--accent-wash);
}
.cta h2, .cta h3 {
  border: 0;
  padding: 0;
  margin: 0 0 0.4rem;
  font-size: 1.22rem;
  color: var(--ink);
}
.cta p { color: var(--ink-dim); }
.cta .btn { margin-top: 0.5rem; font-size: 1rem; padding: 0.7rem 1.3rem; }

/* The centred pair under the lede on a landing page. Two equal asks, not a
   primary and an afterthought: browsing and asking are both legitimate ways
   in, and the reader knows which one they are. Stacks on a narrow screen so
   neither button ends up half a thumb wide. */
.hero-cta {
  margin: 1.8rem 0 2.4rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.hero-cta .btn {
  font-size: 1.02rem;
  padding: 0.75rem 1.5rem;
  min-width: 13rem;
}
.hero-cta-note {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
@media (max-width: 30rem) {
  .hero-cta-row { flex-direction: column; }
  .hero-cta .btn { width: 100%; min-width: 0; }
}

/* The one at the foot of a money page, where the reader has finished reading
   and is deciding. Wider and louder than an inline one on purpose. */
.cta-lead {
  padding: 1.8rem 1.6rem;
}
.cta-lead h2 { font-size: 1.45rem; }
.cta-lead .btn { font-size: 1.05rem; padding: 0.8rem 1.5rem; }
.cta p { margin-bottom: 1rem; color: var(--ink-dim); }
.cta :last-child { margin-bottom: 0; }

/* --- forms --------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.field-hint {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin: -0.15rem 0 0.4rem;
}

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  transition: none;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-dark);
  outline-offset: -1px;
  border-color: var(--accent-dark);
  box-shadow: none;
}
textarea { min-height: 110px; resize: vertical; }

fieldset { border: 0; margin: 0 0 1.1rem; padding: 0; }
legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.45rem;
  color: var(--ink);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}
.check input { margin-top: 0.3rem; flex: none; width: auto; }
.check label { font-weight: 400; margin: 0; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  color: #b91c1c;
  font-size: 0.88rem;
  margin-top: 0.3rem;
}
.form-note { font-size: 0.86rem; color: var(--ink-muted); margin-top: 0.8rem; }

/* --- email capture -------------------------------------------------------
   Closes every content page. It is a panel rather than a line of text, which
   is a deliberate exception to the rule that the page ends with one quiet ask:
   this one is trading a document for an address and the reader has to be able
   to see what the document is. It still obeys the rest of the system. No
   gradient, no shadow, no animation, and the accent appears once.

   It sits outside .prose so the article's measure does not apply. A form at
   66 characters wide puts the button on its own line at every width.
--------------------------------------------------------------------------- */

.capture {
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin: 3rem 0 0;
  background: var(--paper-alt);
}
.capture h2 {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 1.28rem;
  color: var(--ink);
}
.capture > p { color: var(--ink-dim); margin: 0 0 1rem; max-width: 46rem; }

.capture-items {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.capture-items li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-dim);
  padding-left: 1.1rem;
  position: relative;
}
.capture-items li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--accent-dark);
  border-radius: 1px;
}
.capture-items li strong { color: var(--ink); font-weight: 600; }

/* One row on a desktop, stacked on a phone. The email field is the one that
   has to be comfortable, so it takes the slack. */
.capture-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}
.capture-row input[type="text"] { flex: 1 1 11rem; width: auto; min-width: 0; }
.capture-row input[type="email"] { flex: 2 1 16rem; width: auto; min-width: 0; }
.capture-row .btn { flex: 0 0 auto; }
@media (max-width: 34rem) {
  .capture { padding: 1.2rem 1.1rem; }
  .capture-row input[type="text"],
  .capture-row input[type="email"],
  .capture-row .btn { flex: 1 1 100%; width: 100%; }
}

.capture .form-note { margin-top: 0.9rem; max-width: 46rem; }
/* The Compliance Brief opt-in: an unticked box on the capture and on the quote
   and tool forms. Plain and quiet; it is a question, not an upsell. */
.brief-optin {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-dim);
  font-weight: 400;
  cursor: pointer;
  margin: 0.8rem 0 0;
  max-width: 46rem;
}
.brief-optin input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0.2rem 0 0;
  accent-color: var(--accent-dark);
}
.brief-optin a { color: var(--accent-dark); }
.brief-optin-row { margin: 1rem 0; }
.brief-optin-row .brief-optin { margin: 0; }
.capture .form-error[hidden] { display: none; }
.capture-done-msg { font-weight: 600; margin: 0 0 0.7rem; color: var(--ink); }
#capture-done .capture-items li { padding-left: 1.1rem; }
#capture-done:focus { outline: 2px solid var(--accent-dark); outline-offset: 3px; }

/* Labels that exist for a screen reader and a form autofill heuristic, not for
   sighted readers: the fields are placeheld and the panel would read as a wall
   of duplicated words with them visible. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- The Compliance Brief ------------------------------------------------
   The weekly email, on its own /brief section and in three quiet places
   elsewhere: a line in the capture note, a card inside long articles, and a
   short list on the homepage. Same system as the capture panel: a hairline
   box, the accent once, no shadow.
--------------------------------------------------------------------------- */
.brief-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 0.35rem;
}
.brief-signup {
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 1.8rem 0;
  background: var(--paper-alt);
}
.brief-signup-h { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 0.35rem; }
.brief-signup-p { color: var(--ink-dim); margin: 0 0 0.9rem; }
.brief-signup .form-note { margin-top: 0.8rem; }
.brief-signup .form-error[hidden], .brief-done[hidden] { display: none; }
@media (max-width: 34rem) {
  .brief-signup { padding: 1.1rem 1rem; }
  .brief-signup .capture-row input[type="email"],
  .brief-signup .capture-row .btn { flex: 1 1 100%; width: 100%; }
}
.brief-src { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.4rem; }
.brief-take {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 0.7rem 1rem;
  margin: 0.8rem 0;
}
.brief-take p { margin: 0; }
.brief-take .brief-take-lbl {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.3rem;
}
.brief-more { font-size: 0.92rem; }
.brief-list, .brief-issues { list-style: none; padding: 0; margin: 0.6rem 0 1.4rem; }
.brief-list li, .brief-issues li { padding: 0.65rem 0; border-bottom: 1px solid var(--rule); }
.brief-list li:last-child, .brief-issues li:last-child { border-bottom: 0; }
.brief-list a, .brief-issues a { font-weight: 600; }
.brief-meta { display: inline-block; font-size: 0.82rem; color: var(--ink-muted); margin-left: 0.3rem; }
.brief-sum { display: block; font-size: 0.9rem; color: var(--ink-dim); margin-top: 0.2rem; }
.brief-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 2rem 0 0; font-size: 0.92rem; }
.brief-card {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 1.8rem 0;
  background: var(--paper-alt);
  font-size: 0.95rem;
}
.brief-card p:last-child { margin-bottom: 0; }
.brief-home {
  border-top: 1px solid var(--rule);
  margin: 3rem 0 0;
  padding: 1.8rem 0 0;
}
.brief-home h2 { border: 0; padding: 0; margin: 0 0 0.4rem; font-size: 1.28rem; }
.brief-home > p { color: var(--ink-dim); }
.brief-home-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }

/* --- directory listings --------------------------------------------------
   Rows, not cards. A directory is a data set and reads better as a list with
   hairline separators than as a grid of boxes with shadows.
--------------------------------------------------------------------------- */

.listing {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: start;
}
.listing:last-child { border-bottom: 1px solid var(--rule); }

.listing-name {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0;
  line-height: 1.35;
}
.listing-name a { text-decoration: none; color: var(--ink); }
.listing-name a:hover { color: var(--accent-dark); text-decoration: underline; }

.listing-meta {
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin: 0.1rem 0 0.35rem;
}
.listing-meta span + span::before {
  content: "·";
  margin: 0 0.45rem;
  color: var(--rule-strong);
}
.listing-desc { font-size: 0.94rem; color: var(--ink-dim); margin: 0; }
.listing-actions { grid-column: 2; grid-row: 1 / span 3; text-align: right; }

/* A directory row is a thing a reader is choosing between, so it gets a hover
   state and its own action. Rows separated only by a hairline read as a table
   of contents rather than as something browsable. */
.listing { border-radius: var(--radius); transition: none; }
.listing:hover { background: var(--paper-alt); }
.listing:hover .listing-name a { color: var(--accent-dark); }
.listing .btn { font-size: 0.9rem; padding: 0.5rem 0.95rem; }
.listing-link {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--accent-dark);
}
.filters-note {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin: -0.6rem 0 1.2rem;
}
.filters-reset { display: flex; align-items: flex-end; }
.filters-empty {
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-alt);
  margin: 0 0 1.4rem;
}
.listing-count.is-filtered strong { color: var(--accent-dark); }

.listing-count {
  font-size: 0.95rem;
  color: var(--ink-dim);
  margin: 0 0 1.2rem;
}
.listing-count strong {
  font-size: 1.15rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* A Verified row is the paid tier and is ordered above the rest, so it is
   marked once, quietly, with a rule rather than a background: a highlighted
   block would read as an advert, which is the thing /list-your-firm promises
   the tier is not. */
.listing.is-verified { border-left: 3px solid var(--accent); padding-left: 0.9rem; }

.badge-verified {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.4rem;
}
/* Claimed but not paying. The directory has three real states now that
   /list-your-firm describes them as three tiers, and the middle one had no
   badge, so directory pages were carrying it in the meta line instead.
   Deliberately quieter than Verified: claimed means a firm confirmed the
   listing is theirs, which is worth showing and is not worth showing loudly. */
.badge-claimed {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.4rem;
}
/* The operator's own row. Deliberately plain rather than decorative: it is a
   disclosure, not a boast. */
.badge-operator {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: var(--paper-alt);
  border: 1px dashed var(--rule-strong);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.35rem;
}
.badge-unclaimed {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.4rem;
}

.filters {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}
.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }

/* --- tools (calculators, assessments) ------------------------------------ */

.tool { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 0 0 1.8rem; }
.tool-step { display: none; }
.tool-step.is-active { display: block; }
.tool-progress {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 650;
  margin-bottom: 0.9rem;
}
.tool-nav { display: flex; gap: 0.6rem; margin-top: 1.2rem; }

/* The result panel. tool.js moves focus here when the result renders, so a
   screen reader announces it. Without styling it had no padding (text ran to
   the screen edge on a phone) and Chrome drew its default black focus ring
   round the whole thing. The ring now shows only for keyboard focus
   (:focus-visible), in the site's accent with an offset. */
#tool-result {
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 1.3rem 1.4rem;
  margin: 0 0 1.8rem;
}
#tool-result:focus,
.tool [tabindex="-1"]:focus,
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
#tool-result:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}
#tool-result > :last-child { margin-bottom: 0; }
@media (max-width: 34rem) {
  .tool, #tool-result { padding: 1.05rem 1rem; }
  #tool-result { margin-left: 0; margin-right: 0; }
  #tool-result table { display: block; overflow-x: auto; }
}

.result-figure {
  font-size: 1.9rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.2rem;
}
.result-label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* --- cross-network links -------------------------------------------------- */

.network {
  border-top: 1px solid var(--rule);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
}
.network h2 {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.network ul { list-style: none; padding: 0; margin: 0; }
.network li { margin-bottom: 0.5rem; font-size: 0.94rem; line-height: 1.5; }
.network li span { color: var(--ink-muted); }

/* --- read next -----------------------------------------------------------
   Pages that ended on their last paragraph and left the reader with nowhere to
   go. A bare <ul> of links reads as an afterthought, so each row is the page
   title on its own line with the reason underneath, which is the information a
   reader needs to pick one.
--------------------------------------------------------------------------- */
.read-next { list-style: none; margin: 0 0 2rem; padding: 0; }
.read-next li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.93rem; line-height: 1.6; color: var(--ink-muted); }
.read-next li:first-child { border-top: 1px solid var(--rule); }
.read-next a { display: block; font-weight: 600; font-size: 1rem;
  color: var(--ink); text-decoration: none; margin-bottom: 0.15rem; }
.read-next a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- social proof --------------------------------------------------------
   This used to be hidden and filled in by script with the number of matches
   made this month, which on a young site rendered "1 companies matched with
   firms this month" and made a real directory read as a side project. It now
   states how many firms are listed, which is substituted at build time from
   the generated directory, is true on the day it ships, and does not fall to
   zero on a quiet week. Being a fact rather than a fetch, it ships visible.
--------------------------------------------------------------------------- */
.social-proof {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}
.social-proof strong { color: var(--ink); }

/* --- exit intent ---------------------------------------------------------
   A bar at the foot of the viewport, not a modal over the content. It is
   hidden in markup and revealed by js/site.js only on pages that opted in,
   once per session, and never on touch devices. Everything here degrades to
   nothing if the script does not run, because the element ships hidden.
--------------------------------------------------------------------------- */

.exit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--paper);
  border-top: 2px solid var(--accent-dark);
  box-shadow: none;
  padding: 0.85rem 0;
}
.exit-bar[hidden] { display: none; }
.exit-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.exit-bar p {
  margin: 0;
  flex: 1;
  font-size: 0.93rem;
  line-height: 1.45;
}
.exit-bar .btn { flex: none; }
.exit-close {
  flex: none;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  background: none;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
}
.exit-close:hover { color: var(--ink); }

@media (max-width: 620px) {
  .exit-bar-inner { flex-wrap: wrap; }
  .exit-bar p { flex: 1 1 100%; }
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 2rem 0 2.6rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  background: var(--paper-alt);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}
.footer-cols h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 0.4rem; line-height: 1.45; }
.footer-cols a { color: var(--ink-muted); text-decoration: none; }
.footer-cols a:hover { color: var(--accent-dark); text-decoration: underline; }

.colophon {
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: baseline;
}
.colophon a { color: var(--ink-muted); }
.colophon a:hover { color: var(--accent-dark); }
.colophon .operator { color: var(--ink-dim); }

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- 404 ----------------------------------------------------------------- */

.notfound { padding: 3rem 0 2rem; max-width: var(--measure); }
.notfound h1 { font-size: 1.7rem; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .aside {
    position: static;
    border-top: 1px solid var(--rule);
    padding-top: 1.4rem;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 1.62rem; }
  h2 { font-size: 1.28rem; }

  .nav-toggle { display: block; }
  .nav-primary {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem 1.25rem 0.9rem;
    z-index: 20;
  }
  .nav-primary.is-open { display: flex; }
  .nav-primary a { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
  .nav-primary a:last-child { border-bottom: 0; }

  /* In the stacked mobile menu the two CTAs stay buttons, but full width and
     spaced away from the list, otherwise they read as two oddly boxed rows in
     the middle of a plain list. */
  .nav-primary a.nav-cta {
    text-align: center;
    padding: 0.7rem 1rem;
    margin-top: 0.7rem;
    border-bottom: 1px solid var(--accent-dark);
  }
  .nav-primary a.nav-cta-quiet {
    margin-top: 0.5rem;
    border-bottom: 1px solid var(--accent);
  }
  .masthead { position: relative; }

  .listing { grid-template-columns: 1fr; }
  .listing-actions { grid-column: 1; grid-row: auto; text-align: left; }

  th, td { padding: 0.5rem 0.6rem; }
}

/* --- devices added for the content build-out ----------------------------- */

/* Definition list. Nothing in the network used <dl> because there was no style
   for it, so pages that were defining terms defined them in paragraphs and the
   reader lost the shape. Ruled left edge rather than a box: it stays a list. */
dl {
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}
dt {
  font-weight: 650;
  color: var(--ink);
  margin-top: 1rem;
}
dt:first-child { margin-top: 0; }
dd {
  margin: 0.25rem 0 0;
  color: var(--ink-dim);
}

/* A single figure pulled out of the prose. The tools already render results
   like this; the same treatment was not available to an authored page, so cost
   pages buried the number the reader came for in paragraph two. Tabular
   numerals so a column of these lines up. */
.stat {
  margin: 1.6rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
.stat-figure {
  display: block;
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.2rem 1.6rem;
  margin: 1.6rem 0;
}
.stat-row .stat { margin: 0; }

/* Totals row on a cost table. The line-item tables had no total, which is the
   number the reader is actually adding up by hand. */
tfoot td, tfoot th {
  font-weight: 650;
  color: var(--ink);
  border-top: 2px solid var(--rule-strong);
  background: var(--paper-alt);
}

/* A checklist the reader can actually tick, with the state kept in their own
   browser by site.js. Used where a page IS the working document rather than a
   description of one. Prints with empty boxes, which is the point. */
.checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.checklist li:last-child { border-bottom: 0; }
.checklist input[type="checkbox"] {
  margin-top: 0.32rem;
  flex: none;
  width: auto;
  accent-color: var(--accent-dark);
}
.checklist label { font-weight: 400; margin: 0; cursor: pointer; }
.checklist input:checked + label { color: var(--ink-muted); }
.checklist-reset {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* An ordered decision ladder. <ol> was used on five pages network-wide because
   the default rendering gave a numbered sequence no more shape than a <ul>. */
ol.steps { list-style: none; counter-reset: step; margin: 0 0 1.6rem; padding: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.4rem;
  line-height: 1.6;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline data figure. Real data drawn as SVG, never decoration, and always
   accompanied by the same numbers in a table for anyone who cannot see it. */
.figure { margin: 1.6rem 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}

/* --- print --------------------------------------------------------------- */

@media print {
  .masthead, .site-footer, .cta, .nav-primary, .aside, .social-proof { display: none; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: underline; color: #000; }
  .prose { max-width: none; }
  .faq details { border-bottom: 1px solid #ccc; }
  .faq details > *:not(summary) { display: block; }  /* print answers even when collapsed */
  .checklist-reset { display: none; }
  .checklist input[type="checkbox"] { -webkit-appearance: none; appearance: none;
    width: 11pt; height: 11pt; border: 1pt solid #000; }  /* an empty box to tick by hand */
  .stat { border-left-color: #000; }
}

/* "Who can do this" (lib_site.insert_who_can). A quiet aside near the end of
   a page: an option among others, so it reads as a note, not a second CTA. */
.who-can {
  margin: 2rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 4px 4px 0;
}
.who-can p { margin: 0 0 0.5rem; }
.who-can p:last-child { margin-bottom: 0; }
.who-can .who-can-head {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-dark);
}
.who-can a { color: var(--accent-dark); font-weight: 600; }