/* ============================================================
   TRILLIONS — public site
   ------------------------------------------------------------
   Loads after tokens.css. Everything here is layout: the shell, the
   five page archetypes, and the two moments where the evidence
   ledger does work no other element can do.

   Colour is never introduced at this layer. If a rule below sets a
   hue, it is a verdict token from tokens.css, used on a finding.
   ============================================================ */

/* ------------------------------------------------------------
   SHELL
   The header and the hero are one continuous field of ink. The page
   drops to canvas at the report band and stays there, so the only
   dark surface on the site is the one that carries the proposition.
   ------------------------------------------------------------ */

.skip {
  position: absolute;
  inset-inline-start: var(--s4);
  inset-block-start: -100px;
  z-index: 200;
  padding: 10px var(--s4);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start var(--fast) var(--ease);
}

.skip:focus {
  inset-block-start: var(--s3);
}

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-head-in {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s3) var(--page-margin);
  min-height: 64px;
}

.site-head .lockup b {
  font-size: 18px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: 1;
}

.site-nav > a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.site-nav > a:hover {
  color: var(--ink);
}

.site-nav > a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

.site-nav-end {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-inline-start: auto;
}

/* The interface language control itself is a design system primitive and
   lives in tokens.css, because the buyer and supplier surfaces carry it
   too and they do not load this stylesheet. Only its placement in the
   public header belongs here. */
.site-nav-end .lang {
  margin-inline-end: var(--s2);
}

.site-nav-signin {
  color: var(--mute);
}

/* Once the button carries a name it carries somebody else's text, and names
   are not a length the design gets to choose. Clip it rather than let the
   header reflow around whatever arrives; the full name stays in aria-label. */
.site-nav-signin--named {
  max-width: 18ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-nav-signin:hover {
  background: var(--wash);
  color: var(--ink);
}

/* Above the mobile breakpoint the three links sit on the header's true centre,
   not on the centre of whatever space the lockup happened to leave behind.
   Taking both edge clusters out of flow is what makes that exact: .site-nav
   then spans the full inner width, so justify-content: center measures against
   the page rather than against the remainder. The symmetric padding reserves
   room for the two clusters at the narrow end of the desktop range; being
   symmetric, it does not move the centre.

   Every rule is scoped above 940px on purpose. The collapsed menu below that
   width is an absolute panel anchored to .site-head, and a position: relative
   leaking onto .site-head-in would re-anchor it to the padded inner box. */
@media (min-width: 941px) {
  .site-head-in {
    position: relative;
  }

  .site-head-in > .lockup {
    position: absolute;
    inset-inline-start: var(--page-margin);
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .site-nav {
    justify-content: center;
    padding-inline: 200px;
  }

  .site-nav-end {
    position: absolute;
    inset-inline-end: var(--page-margin);
    inset-block-start: 50%;
    transform: translateY(-50%);
    margin-inline-start: 0;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    gap: var(--s4);
  }

  .site-nav > a {
    font-size: 13px;
  }
}

@media (max-width: 940px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) var(--page-margin) var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.open {
    display: flex;
  }

  /* The collapsed menu is the same three links, so they read the same way:
     centred. Each one is a full-width row here rather than an inline item, so
     the centring is on the text inside the row, not on the row itself. */
  .site-nav > a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    text-align: center;
  }

  .site-nav > a[aria-current="page"] {
    border-bottom-color: var(--line-strong);
  }

  .site-nav-end {
    flex-wrap: wrap;
    margin-inline-start: 0;
    margin-block-start: var(--s4);
  }

  .site-nav-end .btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------
   THE CHECK RAIL
   A hairline in the ledger's geometry, pinned under the header on
   pages that walk through the twelve checks. It is not a verdict
   ledger — no cell here claims a result. It shows which of the
   twelve you are reading, which is the one thing about the ledger a
   buyer has to learn: the order never changes.
   ------------------------------------------------------------ */

.check-rail-bar {
  position: sticky;
  inset-block-start: 64px;
  z-index: 90;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.check-rail {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 10px var(--page-margin);
}

.check-rail i {
  flex: 1;
  height: 4px;
  border-radius: 1px;
  background: var(--line);
  transition: background var(--base) var(--ease);
}

.check-rail i[data-seen] {
  background: var(--mute-3);
}

.check-rail i[data-on] {
  background: var(--ink);
}

[dir="rtl"] .check-rail {
  flex-direction: row-reverse;
}

/* Without JavaScript, or with motion switched off, the rail is
   simply the twelve checks at rest. It never depends on movement to
   carry meaning. */
@media (prefers-reduced-motion: reduce) {
  .check-rail i {
    background: var(--mute-3);
  }
}

@media (max-width: 940px) {
  .check-rail-bar {
    inset-block-start: 60px;
  }
}

/* ------------------------------------------------------------
   HERO
   The homepage does not describe the service, it performs it. The
   first control on the page is the first stage of a real review.
   ------------------------------------------------------------ */

.hero {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero-in {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s8) var(--page-margin) var(--s9);
}

.hero h1 {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 17ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--mute-2);
}

.hero-lead {
  max-width: 52ch;
  margin-block-start: var(--s5);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute);
}

.hero-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  max-width: 520px;
  margin-block-start: var(--s6);
}

/* Only the geometry is set here — on a white hero the field takes the
   standard input treatment from the design system. */
.hero-form .input {
  flex: 1;
  min-width: 220px;
  height: 48px;
  border-radius: 10px;
}

.hero-note {
  margin-block-start: var(--s3);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mute-2);
  max-width: 62ch;
  line-height: 1.6;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s5);
  margin-block-start: var(--s7);
  padding-block-start: var(--s5);
  border-top: 1px solid var(--line);
}

.hero-facts b {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.hero-facts span {
  display: block;
  margin-block-start: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute-2);
}

/* Shorter opening band for every page that is not the homepage. */
.page-head {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.page-head-in {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s7) var(--page-margin) var(--s8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s7);
  align-items: end;
}

.page-head .eyebrow {
  color: var(--mute-2);
}

.page-head .eyebrow::after {
  background: var(--line);
}

.page-head h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 18ch;
}

.page-head-lead {
  max-width: 54ch;
  margin-block-start: var(--s4);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mute);
}

.page-head .btn-row {
  margin-block-start: var(--s5);
}

/* An opening band that carries the offer and nothing beside it. With no
   sidebar note the second column has nothing to hold, so the band drops to one
   track and the column sits on the page's centre line.

   The measures stay: 18ch on the h1 and 54ch on the lead are what keep a line
   readable, and centring them is a pair of auto margins, not a wider column.
   .ticks and .btn-row lay their children out themselves — one grid, one flex —
   so text-align cannot reach either and each is centred on its own axis.

   The tick list is centred as one block rather than row by row. Centring each
   row would scatter the four markers across four different positions; sizing
   the list to its widest row keeps them in the single column the marker is
   there to make, and text-align: start keeps a label that wraps on a narrow
   screen reading from the same edge. */
.page-head--centred .page-head-in {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.page-head--centred h1,
.page-head--centred .page-head-lead {
  margin-inline: auto;
}

.page-head--centred .ticks {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: start;
}

.page-head--centred .btn-row {
  justify-content: center;
}

/* The sidebar note on the opening band: one fact, never a second CTA. */
.head-note {
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r3);
  background: var(--surface);
}

.head-note b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-block-end: 6px;
}

.head-note p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mute);
}

@media (max-width: 880px) {
  .page-head-in {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding-block: var(--s6) var(--s7);
  }

  .hero-in {
    padding-block: var(--s6) var(--s7);
  }
}

/* ------------------------------------------------------------
   SECTION FURNITURE
   ------------------------------------------------------------ */

.section {
  padding-block: var(--s9);
}

.section--tight {
  padding-block: var(--s8);
}

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 66ch;
  margin-block-end: var(--s6);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: var(--s3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.section-head h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.lead {
  margin-block-start: var(--s3);
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mute);
}

.sub-h {
  margin-block: var(--s7) var(--s4);
  padding-block-end: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 70ch;
}

/* ------------------------------------------------------------
   REPORT BAND
   The first white surface on the homepage, carrying the thing the
   buyer actually receives. The ledger fills once on load and then
   holds still.
   ------------------------------------------------------------ */

.report-band {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s8);
}

/* The ledger, its column names, its key and the sentence explaining it are one
   object. They share a measure so the reader's eye does not have to re-find
   the left edge four times. */
.report-band .report-caption,
.report-band .ledger,
.report-band .ledger-cols,
.report-band .ledger-key,
.report-band .note,
.report-band .btn-row {
  max-width: 720px;
}

.report-band .ledger-key {
  margin-block-start: var(--s4);
  padding-block-start: var(--s4);
  border-top: 1px solid var(--line);
}

.report-band .note {
  margin-block-start: var(--s4);
}

.report-band .btn-row {
  margin-block-start: var(--s5);
}

.ledger-load i {
  transform-origin: bottom;
  animation: trillions-fill 620ms var(--ease) backwards;
}

.ledger-load i:nth-child(1){ animation-delay: 100ms; }
.ledger-load i:nth-child(2){ animation-delay: 150ms; }
.ledger-load i:nth-child(3){ animation-delay: 200ms; }
.ledger-load i:nth-child(4){ animation-delay: 250ms; }
.ledger-load i:nth-child(5){ animation-delay: 300ms; }
.ledger-load i:nth-child(6){ animation-delay: 350ms; }
.ledger-load i:nth-child(7){ animation-delay: 400ms; }
.ledger-load i:nth-child(8){ animation-delay: 450ms; }
.ledger-load i:nth-child(9){ animation-delay: 500ms; }
.ledger-load i:nth-child(10){ animation-delay: 550ms; }
.ledger-load i:nth-child(11){ animation-delay: 600ms; }
.ledger-load i:nth-child(12){ animation-delay: 650ms; }

@keyframes trillions-fill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.report-caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--s4);
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
}

.card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
}

.card .btn--link {
  margin-block-start: auto;
  padding-block-start: var(--s3);
  align-self: flex-start;
  font-size: 13px;
}

.card-num {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mute-2);
  margin-block-end: var(--s2);
}

/* A definition row: term on the start edge, meaning beside it. Used
   wherever the content is a list of named things rather than a
   sequence — which is most of them. */

@media (max-width: 760px) {
  .def {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ------------------------------------------------------------
   THE TWELVE CHECKS
   The order is fixed and published. Each entry carries its own cell
   position so the rail above can follow the reader down the page.
   ------------------------------------------------------------ */

.checks {
  counter-reset: check;
  border: 1px solid var(--line);
  border-radius: var(--r4);
  background: var(--surface);
  overflow: hidden;
}

.check-item {
  display: grid;
  grid-template-columns: 56px 200px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
  align-items: start;
  scroll-margin-block-start: 120px;
}

.check-item:last-child {
  border-bottom: 0;
}

.check-item .n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute-2);
}

.check-item h3 {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.check-item p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 76ch;
}

.check-item.is-current {
  background: var(--wash);
}

@media (max-width: 820px) {
  .check-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s4);
  }

  .check-item p {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------
   LIMITS
   What the service does not do gets its own space in the layout,
   never a footnote. Absence is information.
   ------------------------------------------------------------ */

.limits {
  border: 1px solid var(--line-strong);
  border-radius: var(--r4);
  background: var(--surface);
  padding: var(--s5);
}

.limits h2,
.limits h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-end: var(--s3);
}

.limits ul {
  display: grid;
  gap: var(--s3);
}

.limits li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s3);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
}

.limits li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-block-start: 5px;
  border-radius: 3px;
  border: 1.5px solid var(--miss);
}

/* The affirmative twin of .limits, and it keeps the same rule: colour only ever
   carries a verdict. --ok is the present one, --miss the absent one, and the
   two lists are the same object read in opposite directions.

   The marker is a ::before rather than a tick glyph in the markup. A bare "✔"
   is a text node, so the locale generator would extract it as a translatable
   string and put it in front of every translator. */
.ticks {
  display: grid;
  gap: var(--s3);
  margin-block-start: var(--s5);
}

.ticks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.ticks li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-block-start: 6px;
  border-radius: 3px;
  border: 1.5px solid var(--ok);
  background: var(--ok);
}

/* ------------------------------------------------------------
   CALL TO ACTION
   ------------------------------------------------------------ */

.cta-band {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r5);
  padding: var(--s7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
}

.cta-band h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 22ch;
}

.cta-band p {
  margin-block-start: var(--s3);
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}

@media (max-width: 820px) {
  .cta-band {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s6) var(--s5);
  }
}

/* ------------------------------------------------------------
   FORM PAGE ARCHETYPE
   The form sits on surface; the guidance that helps a buyer fill it
   in sits on canvas beside it, never inside it.
   ------------------------------------------------------------ */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s6);
  align-items: start;
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.form-grid .field-full,
.field-full {
  grid-column: 1 / -1;
}

.form-aside {
  display: grid;
  gap: var(--s3);
  position: sticky;
  inset-block-start: 96px;
}

.aside-list {
  display: grid;
  gap: 9px;
  font-size: 12.5px;
  color: var(--mute);
}

.aside-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s2);
}

.aside-list b {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute-2);
  font-weight: 500;
}

.declaration {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r3);
  background: var(--surface);
}


@media (max-width: 1000px) {
  .form-layout {
    grid-template-columns: 1fr;
  }

  .form-aside {
    position: static;
  }
}

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

  .form-card {
    padding: var(--s5) var(--s4);
  }
}

/* Supplier intake wizard. main.js drives the step visibility, the
   step indicators and the per-input file summaries; these rules only
   describe them. */
.wizard-steps {
  margin-block-end: var(--s5);
}


.upload-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mute);
}

/* ------------------------------------------------------------
   DOCUMENT ARCHETYPE — privacy, terms
   One column, one measure, mono for anything dated.
   ------------------------------------------------------------ */

.doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  padding: var(--s7);
}

.doc h2 {
  margin-block: var(--s6) var(--s3);
  padding-block-end: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.doc h2:first-of-type {
  margin-block-start: 0;
}

.doc p,
.doc li {
  max-width: 76ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* The paragraph that says which of two things a reader is here for, before the
   first heading. The refund policy covers a sourcing fee and a catalogue order
   on different rules, and a reader who lands on the wrong half and stops has
   read the wrong policy. */
.doc-lead {
  margin-block-end: var(--s5);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.doc p + p {
  margin-block-start: var(--s3);
}

.doc ul {
  display: grid;
  gap: var(--s2);
  margin-block-start: var(--s3);
}

.doc li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--s3);
  color: var(--mute);
}

.doc li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-block-start: 10px;
  border-radius: 50%;
  background: var(--mute-3);
}

/* The stamp on a policy page. IBM Plex Mono has no Arabic, so an Arabic date
   set in it falls back per glyph and the letters stop joining — "آخر تحديث"
   arrives as loose characters. The mono face is there to mark the line as a
   stamp rather than prose, and in a script it cannot set that is not a trade
   worth making, so Arabic gets the body face and keeps the rest of the
   treatment. */
[dir="rtl"] .doc-dated {
  font-family: inherit;
  letter-spacing: normal;
}

.doc-dated {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mute);
  margin-block-end: var(--s5);
  padding-block-end: var(--s4);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 620px) {
  .doc {
    padding: var(--s5) var(--s4);
  }
}

/* ------------------------------------------------------------
   REPORT ARCHETYPE — the deliverable, shown in public
   ------------------------------------------------------------ */

.report {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  overflow: hidden;
}

.report-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s6);
  padding: var(--s6);
  border-bottom: 1px solid var(--line);
}

.report-head h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.report-sub {
  margin-block-start: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mute);
}

.report-body {
  padding: var(--s6);
}

.report-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin-block: var(--s6) var(--s2);
}

.report-body h3:first-child {
  margin-block-start: 0;
}

.report-foot {
  margin-block-start: var(--s5);
  padding-block-start: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 80ch;
}

@media (max-width: 880px) {
  .report-head {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s5);
  }

  .report-body {
    padding: var(--s5);
  }
}

/* ------------------------------------------------------------
   COMPARISON — what the quote says next to what it leaves open
   ------------------------------------------------------------ */

.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
}

.vs > div {
  background: var(--surface);
  padding: var(--s4);
}

.vs .no {
  background: #fefafa;
}

.vs .tag {
  display: block;
  margin-block-end: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.vs .no .tag {
  color: var(--miss);
}

.vs .yes .tag {
  color: var(--ok);
}

.vs p {
  font-size: 13.5px;
  line-height: 1.5;
}

.vs .no p {
  color: var(--mute);
}

.vs em {
  display: block;
  margin-block-start: 9px;
  padding-block-start: 9px;
  border-top: 1px solid var(--line);
  font-style: normal;
  font-size: 12px;
  color: var(--mute);
}

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

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.site-foot {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
  margin-block-start: auto;
}

.site-foot-in {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s8) var(--page-margin) var(--s6);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}

.foot-brand p {
  margin-block-start: var(--s4);
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

.foot-mail a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}

.foot-mail a:hover {
  text-decoration-color: var(--ink);
}

.foot-col h2 {
  margin-block-end: var(--s3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.foot-col a {
  display: block;
  padding-block: 5px;
  font-size: 13px;
  color: var(--mute);
  text-decoration: none;
}

.foot-col a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-legal {
  margin-block-start: var(--s7);
  padding-block-start: var(--s4);
  border-top: 1px solid var(--line);
}

.foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-block-end: var(--s3);
}

.foot-legal-links a {
  font-size: 12.5px;
  color: var(--mute);
  text-decoration: none;
}

.foot-legal-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

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

/* ------------------------------------------------------------
   PAGE FRAME
   ------------------------------------------------------------ */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ------------------------------------------------------------
   ASSISTANT — where AI is used, and where it is not
   ------------------------------------------------------------ */

.boundary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  overflow: hidden;
}

.boundary > div {
  background: var(--surface);
  padding: var(--s5);
}

.boundary h3 {
  font-size: 15px;
  font-weight: 700;
  margin-block-end: var(--s3);
}

.boundary ul {
  display: grid;
  gap: var(--s3);
}

.boundary li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--s3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mute);
}

.boundary li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-block-start: 6px;
  border-radius: 2px;
}

.boundary .does li::before {
  background: var(--ink);
}

.boundary .does-not li::before {
  border: 1.5px solid var(--miss);
}

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

/* ------------------------------------------------------------
   THE CART IN THE HEADER
   The link itself is in the canonical header, so it is on every
   public page; main.js writes the count onto it from cart.js.
   Only its placement in the public header belongs here — the
   ordering pages' own styles are in tokens.css beside the rest
   of the shop vocabulary.
   ------------------------------------------------------------ */

.site-nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.site-nav-cart:hover,
.site-nav-cart[aria-current="page"] {
  background: var(--wash);
  color: var(--ink);
}

/* The count is a number on a mark, not a verdict, so it takes the brand
   navy rather than any of the four colours that mean something. */
.site-nav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 940px) {
  /* In the drawer the header's end cluster is a stack of full-width rows, and
     a link that hugged its own text would sit oddly among them. */
  .site-nav-cart {
    flex: 1;
    justify-content: center;
    padding-block: 10px;
  }
}