/* styles.css — reallyfree.app
   One stylesheet for every page on the site.
   Design tokens copied from extension/tokens.css (07-DESIGN.md LOCKED
   values) so the site and the extension always look like one product.
   No frameworks, no external fonts, no CDN, no analytics — system font stack
   only. The privacy policy says this site loads nothing from anyone else;
   this file is where that stops being a claim and starts being true. */

:root {
  /* Verdict colours — LOCKED (D98). Three colours and one shape: DOTS and a
     DASH. The word beside the dot carries the nuance, never a new colour and
     never a new shape. */
  --rf-green:  #639922; /* you get everything you need */
  --rf-yellow: #EF9F27; /* something's missing */
  --rf-red:    #E24B4A; /* it costs money */
  --rf-gray:   #888780; /* grey: dot = read it, couldn't pin it down; dash = nothing to judge. ("Not looked yet" is the BLUE "?".) */

  /* Brand */
  --rf-accent: #3b6df0;
  --rf-accent-contrast: #ffffff;

  /* Surfaces / text */
  --rf-bg: #ffffff;
  --rf-bg-subtle: #f6f7f9;
  --rf-text: #1a1a1a;
  --rf-text-muted: #6b7280;
  --rf-border: #e2e4e8;

  /* Type */
  --rf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --rf-radius: 6px;
  --rf-radius-lg: 14px;
  --rf-radius-pill: 999px;

  /* Motion (mirrors extension/tokens.css UI-feel LAW: pop, hold, graceful
     exit — never abrupt; motion on every state change). */
  --rf-ease-pop: cubic-bezier(.2,.9,.3,1.1);
  --rf-ease: ease;
  --rf-dur-fast: 120ms;
  --rf-dur-base: 180ms;
  --rf-dur-pop: 220ms;
  --rf-dur-entrance: 420ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--rf-font);
  color: var(--rf-text);
  background: var(--rf-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rf-accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--rf-accent);
  outline-offset: 2px;
}

.rf-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* -------------------------------------------------------------------- */
/* Header / brand                                                        */
/* -------------------------------------------------------------------- */
.rf-site-header {
  border-bottom: 1px solid var(--rf-border);
  background: var(--rf-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.rf-site-header .rf-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.rf-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--rf-text);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.rf-wordmark-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--rf-text);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
  flex: none;
  transition: transform var(--rf-dur-fast) var(--rf-ease-pop);
}
.rf-wordmark:hover .rf-wordmark-mark { transform: scale(1.08) rotate(-2deg); }
.rf-wordmark-name { white-space: nowrap; }
.rf-wordmark-name b { color: var(--rf-green); }

/* ONE HEADER, EVERYWHERE (Marcus, 2026-07-20 consistency ruling): nav-link
   lists are retired site-wide. The wordmark (left) is the only other header
   link — it goes home. The single green CTA button (right) is THE style,
   copied verbatim from the header this was proposed and approved in
   (index.html's inline mockup styles) so every page renders byte-identical. */
.rf-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rf-green);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--rf-radius-pill);
  box-shadow: 0 6px 16px -6px rgba(99,153,34,.55), 0 2px 4px rgba(0,0,0,.10);
  transition: transform 0.15s var(--rf-ease-pop), box-shadow 0.15s ease;
}
.rf-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(99,153,34,.6), 0 3px 6px rgba(0,0,0,.12);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */
.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rf-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--rf-radius);
  border: 1px solid var(--rf-border);
  background: var(--rf-bg-subtle);
  color: var(--rf-text);
  padding: 12px 20px;
  cursor: pointer;
  transition: transform var(--rf-dur-fast) var(--rf-ease-pop),
              background var(--rf-dur-fast) var(--rf-ease),
              box-shadow var(--rf-dur-fast) var(--rf-ease);
}
.rf-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
.rf-btn:active { transform: translateY(0) scale(0.99); }

.rf-btn-primary {
  background: var(--rf-accent);
  color: var(--rf-accent-contrast);
  border-color: var(--rf-accent);
}
.rf-btn-primary:hover { box-shadow: 0 8px 20px rgba(59,109,240,0.35); }

.rf-btn-green {
  background: var(--rf-green);
  color: #fff;
  border-color: var(--rf-green);
}
.rf-btn-green:hover { box-shadow: 0 8px 20px rgba(99,153,34,0.35); }

.rf-btn-lg { font-size: 17px; padding: 15px 26px; }
.rf-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.rf-btn-ghost {
  background: transparent;
  border-color: var(--rf-border);
  /* Must override .rf-btn-primary's white text when both classes sit on the
     disabled install button — white-on-white made "Coming soon to Edge"
     invisible (Marcus, 07-18). */
  color: var(--rf-text-muted);
}

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */
.rf-hero {
  padding: 64px 0 48px;
  text-align: center;
}
.rf-hero-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rf-accent);
  background: rgba(59,109,240,0.10);
  padding: 6px 12px;
  border-radius: var(--rf-radius-pill);
  margin-bottom: 18px;
}
.rf-hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.rf-hero p.rf-lede {
  font-size: 18px;
  color: var(--rf-text-muted);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.55;
}

.rf-verdict-strip {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 0 0 40px;
  flex-wrap: wrap;
}
.rf-verdict-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--rf-text);
}

/* D98 — DOTS AND A DASH. Four colours, one shape, and the word beside the
   dot carries every bit of nuance. The old triangle/square/diamond set is
   gone from every surface: four shapes is a legend nobody reads, and the dot
   is the thing people actually learn. Matches extension/tokens.css exactly. */
.rf-shape {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.rf-shape-dot,
.rf-shape-green,
.rf-shape-yellow,
.rf-shape-red,
.rf-shape-gray { border-radius: 50%; }
.rf-shape-green  { background: var(--rf-green); }
.rf-shape-yellow { background: var(--rf-yellow); }
.rf-shape-red    { background: var(--rf-red); }
/* 2026-07-17: the grey "couldn't pin it down" dot joins the legend — the
   extension draws it, so the site must teach it. Same grey as the dash. */
.rf-shape-gray   { background: var(--rf-gray); }

/* A tick, for a list of promises — a plain check mark, kept distinct from the
   verdict dots so a list of features never reads as a row of verdicts. */
.rf-tick {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--rf-green);
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}
.rf-tick::after { content: "✓"; }

/* The other two marks a user actually sees (D98 / extension tokens.css).
   The site's legend must show every mark the extension can draw, or the
   legend is a lie. */
.rf-shape-dash {
  background: var(--rf-gray);
  border-radius: 1px;
  height: 4px;
  align-self: center;
}
.rf-shape-ask {
  background: var(--rf-accent);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.rf-shape-ask::after { content: "?"; }
.rf-verdict-shape-big.rf-shape-dash { height: 9px; width: 40px; }
.rf-verdict-shape-big.rf-shape-ask  { font-size: 26px; line-height: 40px; }

/* -------------------------------------------------------------------- */
/* The six-state legend (home + standard). Mobile-first: stacks.         */
/* -------------------------------------------------------------------- */
.rf-legend {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.rf-legend-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  background: #fff;
}
.rf-legend-row .rf-shape { margin-top: 3px; }
.rf-legend-name { font-weight: 800; font-size: 15px; margin: 0 0 2px; }
.rf-legend-row p { margin: 0; color: var(--rf-text-muted); font-size: 14.5px; line-height: 1.45; }
.rf-word {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-bg-subtle);
  border: 1px solid var(--rf-border);
  color: var(--rf-text);
  white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* The standard, stated. Used on home + standard.html.                   */
/* -------------------------------------------------------------------- */
.rf-standard-quote {
  max-width: 660px;
  margin: 0 auto;
  padding: 24px;
  border-left: 4px solid var(--rf-green);
  background: var(--rf-bg-subtle);
  border-radius: var(--rf-radius);
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

/* The boxed self-test / callout card. The default accent is the yellow of a
   "here's the catch" callout; boxes that state our own verdict override it
   green inline (W46: our verdict is GREEN, no word). */
.rf-selftest {
  max-width: 660px;
  margin: 0 auto;
  padding: 20px 22px;
  border: 1px solid var(--rf-border);
  border-left: 4px solid var(--rf-yellow);
  border-radius: var(--rf-radius);
  background: #fff;
  text-align: left;
}
.rf-selftest h3 { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.rf-selftest p { margin: 0 0 8px; color: var(--rf-text-muted); font-size: 14.5px; }
.rf-selftest p:last-child { margin-bottom: 0; }

.rf-cta-block { max-width: 560px; margin: 0 auto; }
.rf-cta-block .rf-btn { width: 100%; }
.rf-cta-sub {
  text-align: center;
  font-size: 13px;
  color: var(--rf-text-muted);
  margin: 12px 0 0;
}

/* The word beside a verdict, never inside it. Used in the collection table
   and the legend vocabulary on home + standard. */
.rf-word {
  margin-left: 7px;
  font-size: 12.5px;
  color: var(--rf-text-muted);
}

/* The muted "nothing to catch here" cell in the collection table. */
.rf-pending {
  color: var(--rf-text-muted);
  font-style: italic;
}

/* Q&A blocks — plain, no accordion, no javascript. */
.rf-qa { max-width: 660px; margin: 0 auto; text-align: left; }
.rf-qa h3 { font-size: 16px; margin: 22px 0 6px; }
.rf-qa p { margin: 0; color: var(--rf-text-muted); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 720px) {
  .rf-install-card { padding: 22px 18px; }
  .rf-hero h1 { font-size: 30px; }
  .rf-section { padding: 40px 0; }
}

/* -------------------------------------------------------------------- */
/* Install widget                                                        */
/* -------------------------------------------------------------------- */
.rf-install-card {
  background: var(--rf-bg-subtle);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  padding: 32px;
  max-width: 560px;
  margin: 0 auto;
}
.rf-install-primary { margin-bottom: 14px; }
.rf-install-primary .rf-btn { width: 100%; }

/* 2026-07-17 PURGE (Marcus ruling): the install-check widget's status CSS is
   DELETED with the dead widget itself. Dead styles are deleted, not kept
   warm. */

.rf-also-available {
  border-top: 1px solid var(--rf-border);
  padding-top: 16px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--rf-text-muted);
}
.rf-also-available-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.rf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rf-border);
  background: #fff;
  border-radius: var(--rf-radius-pill);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-text);
  text-decoration: none;
  transition: transform var(--rf-dur-fast) var(--rf-ease-pop), border-color var(--rf-dur-fast) var(--rf-ease);
}
.rf-chip:hover { transform: translateY(-1px); border-color: var(--rf-accent); color: var(--rf-accent); }
.rf-chip[aria-disabled="true"] { color: var(--rf-text-muted); cursor: default; }
.rf-chip[aria-disabled="true"]:hover { transform: none; border-color: var(--rf-border); color: var(--rf-text-muted); }

/* The Green List fact chips (LENS-AND-FACTS.md). Toggle buttons: OFF is a
   plain chip, ON is filled green — the same green the verdict dot wears, so
   "no ads / no account needed / no in-app purchases" reads as an active filter
   on the same facts the extension lens reads. */
.rf-fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.rf-fact-chips .rf-chip { cursor: pointer; }
.rf-chip-on,
.rf-chip[aria-pressed="true"] {
  background: var(--rf-green);
  border-color: var(--rf-green);
  color: #fff;
}
.rf-chip-on:hover,
.rf-chip[aria-pressed="true"]:hover { color: #fff; border-color: var(--rf-green); }

/* -------------------------------------------------------------------- */
/* Sections / cards                                                      */
/* -------------------------------------------------------------------- */
.rf-section { padding: 56px 0; }
.rf-section-tight { padding: 40px 0; }
.rf-section h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 10px;
}
.rf-section-sub {
  text-align: center;
  color: var(--rf-text-muted);
  max-width: 560px;
  margin: 0 auto 36px;
}

.rf-verdict-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.rf-verdict-card {
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  padding: 24px;
  text-align: center;
  background: #fff;
  transition: transform var(--rf-dur-base) var(--rf-ease-pop), box-shadow var(--rf-dur-base) var(--rf-ease);
  animation: rf-fade-up var(--rf-dur-entrance) var(--rf-ease-pop) both;
}
.rf-verdict-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.rf-verdict-card:nth-child(2) { animation-delay: 80ms; }
.rf-verdict-card:nth-child(3) { animation-delay: 160ms; }
.rf-verdict-shape-big {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.rf-verdict-card h3 { margin: 0 0 8px; font-size: 18px; }
.rf-verdict-card p { margin: 0; color: var(--rf-text-muted); font-size: 14px; }
.rf-verdict-card[data-verdict="green"] h3 { color: var(--rf-green); }
.rf-verdict-card[data-verdict="yellow"] h3 { color: #9a6414; }
.rf-verdict-card[data-verdict="red"] h3 { color: var(--rf-red); }

/* -------------------------------------------------------------------- */
/* Dark call-out card. Used for "Who pays for this" on standard.html.    */
/* -------------------------------------------------------------------- */
.rf-tease {
  background: var(--rf-text);
  color: #fff;
  border-radius: var(--rf-radius-lg);
  padding: 36px;
  text-align: center;
}
.rf-tease h2 { color: #fff; }
.rf-tease p { color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 22px; }
.rf-tease .rf-btn { background: #fff; color: var(--rf-text); border-color: #fff; }
.rf-tease .rf-btn:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.35); }

/* -------------------------------------------------------------------- */
/* Privacy / long-form article page                                     */
/* -------------------------------------------------------------------- */
.rf-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}
.rf-article h1 { font-size: 32px; letter-spacing: -0.01em; margin-bottom: 4px; }
.rf-article .rf-effective-date { color: var(--rf-text-muted); font-size: 14px; margin-bottom: 32px; }
.rf-article h2 { font-size: 20px; margin: 36px 0 12px; }
.rf-article p, .rf-article li { color: var(--rf-text); font-size: 15.5px; line-height: 1.65; }
.rf-article ul { padding-left: 22px; }
.rf-article li { margin-bottom: 8px; }
.rf-article strong { color: var(--rf-text); }
.rf-callout {
  background: var(--rf-bg-subtle);
  border: 1px solid var(--rf-border);
  border-left: 4px solid var(--rf-accent);
  border-radius: var(--rf-radius);
  padding: 16px 18px;
  margin: 20px 0;
  font-size: 14.5px;
}
.rf-perm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 24px;
  font-size: 14px;
}
.rf-perm-table th, .rf-perm-table td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--rf-border);
  vertical-align: top;
}
.rf-perm-table th { background: var(--rf-bg-subtle); font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.rf-site-footer {
  border-top: 1px solid var(--rf-border);
  padding: 32px 0 48px;
  margin-top: 24px;
}
.rf-site-footer .rf-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rf-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.rf-footer-links a {
  color: var(--rf-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.rf-footer-links a:hover { color: var(--rf-accent); }
.rf-footer-copy { color: var(--rf-text-muted); font-size: 13px; }

/* -------------------------------------------------------------------- */
/* Entrance animations (UI-feel LAW: nothing snaps into place)          */
/* -------------------------------------------------------------------- */
@keyframes rf-fade-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rf-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rf-hero-kicker, .rf-hero h1, .rf-hero p.rf-lede, .rf-install-card {
  animation: rf-fade-up var(--rf-dur-entrance) var(--rf-ease-pop) both;
}
.rf-hero h1 { animation-delay: 60ms; }
.rf-hero p.rf-lede { animation-delay: 120ms; }
.rf-install-card { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 720px) {
  .rf-verdict-grid { grid-template-columns: 1fr; }
  .rf-header-cta { padding: 10px 16px; font-size: 13px; }
  .rf-hero { padding: 44px 0 32px; }
  .rf-site-footer .rf-container { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------- */
/* THE COLLECTION (collection.html)                                      */
/* Marcus: "the world's easiest website to organize, sort, filter, and   */
/* click through. It has no ambitions." So: one table, three controls,   */
/* no pagination, no infinite scroll, no cleverness.                     */
/* -------------------------------------------------------------------- */
.rf-hero-short { padding: 40px 0 16px; }

.rf-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  background: var(--rf-bg-subtle);
}
.rf-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}
.rf-control-block { flex: 1 1 100%; margin-bottom: 12px; }
.rf-control-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rf-text-muted);
}
.rf-control input,
.rf-control select,
.rf-control textarea {
  font-family: var(--rf-font);
  font-size: 15px;
  color: var(--rf-text);
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  padding: 10px 12px;
  width: 100%;
}
.rf-control-count { flex: 0 0 auto; }
.rf-count { font-size: 18px; font-weight: 800; white-space: nowrap; }

.rf-collection {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.rf-collection th,
.rf-collection td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rf-border);
  vertical-align: middle;
}
.rf-collection thead th {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rf-text-muted);
  border-bottom: 2px solid var(--rf-border);
}
.rf-collection tbody tr:hover { background: var(--rf-bg-subtle); }
.rf-collection a { text-decoration: none; font-weight: 600; }
.rf-collection a:hover { text-decoration: underline; }
.rf-col-verdict { white-space: nowrap; }
.rf-col-verdict .rf-shape { vertical-align: middle; margin-right: 8px; }
.rf-col-verdict-name { font-size: 13px; color: var(--rf-text-muted); }

.rf-tellus {
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  padding: 28px;
  background: #fff;
}
.rf-tellus h2 { text-align: center; margin: 0 0 6px; font-size: 24px; }
.rf-tellus-form { max-width: 620px; margin: 0 auto; }
.rf-tellus-form .rf-btn { width: 100%; }

@media (max-width: 720px) {
  /* COLOURBLIND RULE (taxonomy.js): the plain-language verdict is compulsory
     and may never be hidden, leaving only a green-vs-yellow dot. On narrow
     screens the word stacks under the dot instead of sitting beside it. */
  .rf-col-verdict { white-space: normal; }
  .rf-col-verdict-name { display: block; margin-top: 2px; }
  .rf-collection th, .rf-collection td { padding: 10px 6px; }
}

/* Marcus 2026-07-19 layout law: header and footer justify to the page margins. */
header .rf-container, .rf-site-footer .rf-container { max-width:none; padding:0 24px; }
.rf-site-footer .rf-container { padding:0 24px; }