/* Lightmorphic Access - public checker. House style: solid panels, brand
   yellow accent, self-hosted Manrope, both themes. */

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;  --fg: #09090b;
  --panel: #ffffff;  --panel-border: rgba(24, 24, 40, 0.10);
  --border: #e4e4e7;  --muted: #f4f4f5;  --muted-fg: #71717a;
  --shadow-panel: 0 1px 2px rgba(24,24,40,.05), 0 8px 24px -16px rgba(24,24,40,.18);
  --accent: #fbc711;  --accent-hover: #ddaf0f;  --on-accent: #645007;
  --accent-container: #fff8e2;  --on-accent-container: #5f4c06;
  --brand-navy: #111827;
  --link: #1b74bc;
  --danger: #cc372d;   --danger-bg: #fef2f1;
  --success: #38813a;  --success-bg: #f2f9f3;
  --warning: #8f6c03;  --warning-bg: #fffbee;
  --info: #1b74bc;     --info-bg: #f0f8fe;
  --radius: 0.875rem;
  --panel-radius: 1.375rem;
  /* Page shell width, and the narrower measure long prose is held to. */
  --page: 64rem;
  --measure: 42rem;
  /* Chart hues, from the palette: teal for health, blue for AI readiness,
     pink for the pulse. Each clears 3:1 against the tile in both themes,
     which the brand yellow does not on a light surface. */
  --viz-health: #2bb3a3;
  --viz-ai: #4fadf5;
}

/* Dark mode arrives two ways: the browser setting, or an explicit choice
   from the switcher in the header, which wins either way. The two lists
   below are the same values and must be kept in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b;  --fg: #fafafa;
    --panel: #1b1d29;  --panel-border: rgba(255,255,255,.09);
    --border: #27272a;  --muted: #1c1c1f;  --muted-fg: #a1a1aa;
    --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
    --accent-container: #4b3c05;  --on-accent-container: #fde694;
    --link: #2295f1;
    --danger: #f34236;   --danger-bg: #350f0c;
    --success: #4bae4f;  --success-bg: #102611;
    --warning: #ffc006;  --warning-bg: #382a01;
    --info: #2295f1;     --info-bg: #072135;
  }
}
:root[data-theme="dark"] {
    --bg: #09090b;  --fg: #fafafa;
    --panel: #1b1d29;  --panel-border: rgba(255,255,255,.09);
    --border: #27272a;  --muted: #1c1c1f;  --muted-fg: #a1a1aa;
    --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
    --accent-container: #4b3c05;  --on-accent-container: #fde694;
    --link: #2295f1;
    --danger: #f34236;   --danger-bg: #350f0c;
    --success: #4bae4f;  --success-bg: #102611;
    --warning: #ffc006;  --warning-bg: #382a01;
    --info: #2295f1;     --info-bg: #072135;
}
/* Let form controls, scrollbars and the like follow the chosen theme too. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

a { color: var(--link); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--panel);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin-left: auto;      /* pushes the menu and the switch to the right */
}
.site-nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { border-bottom-color: var(--border); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.header-right { flex: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--fg);
}
.brand-mark { display: block; border-radius: 8px; flex: none; }
.brand-name {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-name-studio { font-weight: 500; }
.brand-name-product { font-weight: 800; }
.brand:hover .brand-name-product { text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
.hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 2rem 0 0.5rem;
}
.hero .strapline {
  font-size: 1.0625rem;
  color: var(--muted-fg);
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}

/* Scan form panel */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
}
/* Panels never touch: any panel directly following another gets air. */
.panel + .panel { margin-top: 1.5rem; }
/* That rule only fires when a panel directly follows a panel. A section
   that wraps a grid of cards is not a panel, so whatever came next butted
   straight against the last card with no gap at all. Give those wrappers
   their own clearance. */
.faq-section,
.findings-section,
.faq-group { margin-bottom: 1.5rem; }





.scan-form { margin-bottom: 2rem; }
/* Every panel runs to the same right-hand edge as the questions grid. */

.domain-row,
.email-capture .email-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.domain-row label { flex-basis: 100%; font-weight: 600; font-size: 0.9375rem; }

input[type="text"], input[type="email"] {
  flex: 1 1 14rem;
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}

button.primary {
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { opacity: 0.55; cursor: not-allowed; }

button.secondary {
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--fg);
  cursor: pointer;
}

.terms-block {
  margin-top: 1rem;
  font-size: 0.9375rem;
}
.terms-block ul {
  margin: 0.5rem 0;
  padding-left: 1.4rem;
}
.terms-block li { margin: 0.15rem 0; }
/* The tick now leads the block, so it shouldn't carry the gap that used to
   separate it from the list above it. */
.terms-block > :first-child { margin-top: 0; }
.terms-tick {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}
.terms-tick input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.terms-note,
.score-caption {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin-top: 0.5rem;
}

.form-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}

/* The noscript warning still sits after the terms block, so it keeps the
   old above-content spacing rather than the alert's below-content one. */
noscript .form-error {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Progress */
.progress-panel { margin-bottom: 2rem; }
.progress-track {
  height: 0.75rem;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.6s ease;
}
.progress-stage {
  margin: 0.75rem 0 0.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.progress-rotating {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  min-height: 2.4em;
}

/* Scores */
.scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.score-card { text-align: center; }
.score-card h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.score-dial { width: 8.5rem; height: 8.5rem; }
.score-dial .track { stroke: var(--muted); }
.score-dial .value-arc { stroke: var(--accent); }
.score-number {
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  font-weight: 700;
  fill: var(--fg);
}

/* Findings */
.findings-section h2,
.faq-section h2 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
}
.finding {
  border-left: 5px solid var(--border);
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-panel);
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
}
.finding-red { border-left-color: var(--danger); }
.finding-amber { border-left-color: var(--warning); }
.finding-green { border-left-color: var(--success); }
.finding-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.finding-red .finding-label { color: var(--danger); background: var(--danger-bg); }
.finding-amber .finding-label { color: var(--warning); background: var(--warning-bg); }
.finding-green .finding-label { color: var(--success); background: var(--success-bg); }
.finding-summary { margin: 0 0 0.35rem; font-weight: 600; }
.finding-technical {
  margin: 0;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.finding-pages {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

.caveat {
  background: var(--info-bg);
  color: var(--info);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin: 1rem 0 2rem;
}

.cache-notice {
  background: var(--success-bg);
  color: var(--success);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-align: center;
}

/* Email capture */
.email-capture h2,
.refusal h2 { margin-top: 0; font-size: 1.0625rem; }
.newsletter-tick {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}
.newsletter-tick input { accent-color: var(--accent); margin-top: 0.25rem; }
.email-success {
  color: var(--success);
  background: var(--success-bg);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-top: 0.75rem;
}

/* Refusals / failures */
.refusal {
  border-left: 5px solid var(--info);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 1.5rem 1rem 2.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.site-footer .inner { max-width: var(--page); margin: 0 auto; }

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The honeypot field - visually gone, still in the DOM for bots to find. */
.contact-preference {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.55rem; }
  .panel { padding: 1.1rem; }
}


/* Common questions - a bento rather than a stack of identical slabs.
   The illustrated tile runs down the left across two rows, so no two
   neighbours share an edge length. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.faq-grid .panel { margin-top: 0; }        /* the grid gap does this job */
.faq-card {
  padding: 1.25rem 1.375rem;
}
.faq-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.faq-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-fg);
}

.faq-figure {
  grid-row: span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--brand-navy);
}
.faq-figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: #ffffff;
}
.faq-figure-caption {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
}
.score-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.score-chips li {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 800px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-figure { grid-row: auto; }
}


/* The questions tile artwork: the dials draw themselves once on load and
   the scan beam sweeps the page, so the tile has some life in it. Both
   stop dead for anyone who has asked for reduced motion. */
.viz-arc {
  stroke-dasharray: var(--len);
  /* Resting state is the finished reading; the animation sweeps up to it,
     so a dial that never animates still shows the right value. */
  stroke-dashoffset: var(--end);
  animation: viz-arc-fill 1.7s 0.3s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.viz-arc-2 { animation-delay: 0.6s; }
@keyframes viz-arc-fill {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: var(--end); }
}

.viz-needle {
  transform-box: view-box;
  transform-origin: var(--pivot);
  transform: rotate(var(--angle));
  animation: viz-needle-swing 1.7s 0.3s cubic-bezier(0.3, 1.4, 0.4, 1) both;
}
.viz-needle-2 { animation-delay: 0.6s; }
@keyframes viz-needle-swing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--angle)); }
}

@media (prefers-reduced-motion: reduce) {
  .viz-arc,
  .viz-needle { animation: none; }
  .viz-beam { animation: none; }
}


.footer-disclaimer {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  max-width: var(--measure);
}


/* Footer: words on the left, the studio's own logo on the right. */




.footer-logo img { height: 2.25rem; width: auto; }
/* The wordmark is dark ink, so each theme gets the version drawn for it.
   These selectors must outrank `.footer-logo img` above, hence the depth. */
.footer-logo .logo-light { display: block; }
.footer-logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .footer-logo .logo-dark { display: block; }
}
:root[data-theme="dark"] .footer-logo .logo-light { display: none; }
:root[data-theme="dark"] .footer-logo .logo-dark { display: block; }
@media (max-width: 640px) {
  
}


/* Header right-hand group: the strapline and the light/dark switch. */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.theme-toggle:hover { background: var(--muted); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; display: block; }

/* Show the icon for the mode the button will switch you TO. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 620px) {
  /* Nav takes its own full-width row under the logo, still all visible -
     no hidden menu to open, which is one less thing to get wrong on a
     small screen. */
  .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: 0.25rem 1rem;
  }
  .site-nav a { font-size: 0.875rem; }
}









/* ---- guide and questions pages ---------------------------------------- */

.section-lede {
  max-width: 58rem;
  color: var(--muted-fg);
  margin: 0 0 1.25rem;
}
.guide-note {
  font-size: 0.9375rem;
  color: var(--muted-fg);
  max-width: var(--measure);
}
.guide-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0;
}
.guide-trio-item h3 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.guide-trio-sub {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-fg);
}
.guide-trio-item p:last-child { margin-bottom: 0; font-size: 0.9375rem; }

/* Artwork panels reuse the scanner-screen look from the homepage tile. */
.viz-panel {
  background: var(--brand-navy);
  color: #ffffff;
}
.viz-panel h2, .viz-panel h3 { color: #ffffff; }
.viz-panel p { color: rgba(255, 255, 255, 0.72); }
.journey-art, .weight-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.25rem 0;
  color: #ffffff;
  overflow: visible;
}
.weight-panel { margin-bottom: 1.5rem; }

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.check-list .panel { margin-top: 0; }
.check-card { padding: 1.25rem 1.375rem; }
.check-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.check-head h3,
.faq-item h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.check-points {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-container);
  color: var(--on-accent-container);
}
.check-card p { margin: 0 0 0.6rem; font-size: 0.9375rem; color: var(--muted-fg); }
.check-card p:last-child { margin-bottom: 0; }
.check-card strong { color: var(--fg); }

.crawler-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
}
.crawler { display: flex; flex-direction: column; gap: 0.15rem; }
.crawler code {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.crawler span { font-size: 0.8125rem; color: var(--muted-fg); }

/* ---- questions filter -------------------------------------------------- */

.faq-controls label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
#faq-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0.6rem;
}
.faq-chip {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  color: var(--fg);
  background: var(--muted);
  border: 1px solid var(--border);
}
.faq-chip:hover { border-color: var(--muted-fg); }
.faq-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.faq-count { margin: 0; font-size: 0.8125rem; color: var(--muted-fg); }
.faq-group-heading { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.faq-item { margin-top: 1rem; }
.faq-item p { margin: 0; color: var(--muted-fg); }
.faq-empty { margin: 2rem 0; color: var(--muted-fg); }
.linklike {
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}


/* Wide artwork and code keep their own horizontal scroll rather than
   squeezing: a four-stage diagram crushed into a phone width renders its
   labels at about 5px, which is no use to anybody. The page itself never
   scrolls sideways - only these boxes do. */
.viz-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.journey-art { min-width: 620px; }
.weight-art { min-width: 520px; }

pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

/* Nothing overflows its container just because it is an image. */
img { max-width: 100%; }


/* These are real lists in the markup - semantics for machines, no bullets
   for people. */
.check-list,
.crawler-grid,
.faq-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-items { display: block; }


/* ---- footer ------------------------------------------------------------
   Three columns over a base bar, rather than one block of text: brand,
   where to go next, and who we are. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2rem 3rem;
  padding-bottom: 2rem;
}
.footer-col > :first-child { margin-top: 0; }
.footer-brand p {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  max-width: 26rem;
}
.footer-logo {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius);
}
.footer-logo img { height: 2rem; width: auto; }

.footer-heading {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links a {
  font-size: 0.875rem;
  color: var(--muted-fg);
  text-decoration: none;
}
.footer-links a:hover { color: var(--fg); text-decoration: underline; }

.footer-address {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--muted-fg);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.footer-address a { color: var(--link); }

.footer-base {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.footer-disclaimer {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--muted-fg);
  max-width: 60rem;
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-fg);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}


/* Typography tidy-up: let the browser avoid stranding a single word on the
   last line, and even out headings across lines. Both are ignored by
   browsers that don't support them, so nothing breaks. */
h1, h2, h3, .strapline, .footer-heading {
  text-wrap: balance;
}
p, li, address, figcaption, .guide-note, .section-lede {
  text-wrap: pretty;
}
/* Don't break a short link across two lines - it reads as two links. */
.section-lede a,
.footer-links a,
.site-nav a {
  white-space: nowrap;
}
@media (max-width: 520px) {
  /* On a narrow screen a nowrap link could push the page sideways, so let
     them wrap again down here. */
  .section-lede a { white-space: normal; }
}


/* ---- interface guidelines pass ---------------------------------------- */

/* Anchored headings shouldn't land hard against the top edge. */
[id] { scroll-margin-top: 1.5rem; }

/* Removes the ~300ms double-tap delay on anything tappable, and sets the
   tap flash deliberately rather than leaving the browser's blue box. */
a, button, input, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(251, 199, 17, 0.25);
}

/* Keep the header and footer clear of a phone's notch in landscape. */
.site-header,
.site-footer .inner,
main {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.site-footer .inner { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }

/* ---- the per-country panel in a report --------------------------------- */

.laws-panel { margin-top: 1.5rem; }
.laws-lede { max-width: var(--measure); color: var(--muted-fg); }
.laws-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
}
.law {
  border-left: 5px solid var(--border);
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.15rem;
}
.law-green { border-left-color: var(--success); }
.law-amber { border-left-color: var(--warning); }
.law-red   { border-left-color: var(--danger); }
.law-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.law-head h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.law-verdict {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
}
.law-green .law-verdict { color: var(--success); }
.law-amber .law-verdict { color: var(--warning); }
.law-red   .law-verdict { color: var(--danger); }
.law p { margin: 0 0 0.4rem; font-size: 0.875rem; color: var(--muted-fg); }
.law p:last-child { margin-bottom: 0; }
.law-standard { font-weight: 600; }
.laws-disclaimer {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-fg);
  max-width: 60rem;
}

/* The criterion a finding tested, for anyone who has to cite it. */
.finding-criterion {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-fg);
}

/* Every required field says so in words, not just by turning red - which is
   the check this tool marks other people down for failing. */
.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}