/* honesttag.com v2 — warm, human, tag-motif design system. No build step.
   Palette: cream #FDF8F1 / tint #F8EDDC / ink #35262B / coral #F06E45.
   All text combinations verified WCAG AA (see REPORT-site-v2.md). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched local fallbacks: if a woff2 ever paints late, text renders in
   size-adjusted Arial with the same line boxes, so the swap causes no layout
   shift. Overrides computed from the actual font tables (see REPORT-seo.md). */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial");
  ascent-override: 93%;
  descent-override: 27%;
  line-gap-override: 0%;
  size-adjust: 101.5%;
}
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial");
  ascent-override: 97.66%;
  descent-override: 25.78%;
  line-gap-override: 0%;
  size-adjust: 105.2%;
}

/* The colour tokens are honesttag-worker/src/brand_tokens.js, the one
   palette the site and the merchant app share; test/validate.mjs fails when
   this list and that one disagree. */
:root {
  --cream: #FDF8F1;
  --cream-2: #F8EDDC;
  --paper: #FFFDF8;
  --ink: #35262B;
  --ink-soft: #4A383D;
  --muted: #6B5751;
  --line: #E8DCCC;
  --line-dark: #D9C9B4;
  --coral: #F06E45;
  --coral-deep: #B23A18;
  --coral-light: #FFA482;
  --butter: #FFE7A3;
  --peach: #FFD9BE;
  --mint: #D5EDDC;
  --sky: #D7E6F2;
  --danger: #A82E1C;
  --danger-soft: #FBE3DC;
  --ok: #1E6B43;
  --warn-ink: #7A4B00;
  --info-ink: #2F5A78;
  --on-ink: #E3D3CB;
  --on-ink-muted: #BCA59B;
  --chart-good: #43A047;
  --chart-good-ink: #2E7D32;
  --chart-neutral: #BDBDBD;
  --chart-held: #FFB300;
  --chart-partial: #FB8C00;
  --chart-bad: #E53935;
  --chart-none: #FFCDD2;
  --shadow: 0 2px 6px rgba(53, 38, 43, 0.06), 0 14px 34px rgba(53, 38, 43, 0.09);
  --shadow-lift: 0 4px 10px rgba(53, 38, 43, 0.08), 0 22px 44px rgba(53, 38, 43, 0.13);
  --display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Arial Black", sans-serif;
  --sans: "Schibsted Grotesk", "Schibsted Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* frame width for every page's main content column (header/hero/grids/
     cards/tables/footer, and since 2026-09-30 prose pages too). Owner
     ruling, #honest-tag 2026-09-30 15:29 ET: "i want all pages widened, it
     looks weird if you navigate the website and some pages are narrow and
     some are not. Make all pages wide." That replaced the narrower
     --measure reading column .prose pages held until then; see
     reports/site-allwide-20260930/ for the before/after width table. 84rem
     sits inside the comparable-SaaS band measured 2026-09-30 (Stripe
     ~1264px, Vercel 1400px, Klaviyo 1440px, Northbeam's widest container
     1480px). Source data: reports/site-width-20260930/RESEARCH.md. */
  --maxw: 84rem;
  --r-lg: 22px;
  --r-md: 16px;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

html {
  font-family: var(--sans);
  scroll-behavior: smooth;
  /* keep anchor/focus targets clear of the sticky header (WCAG 2.4.11) */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* soft paper grain over everything — one tiny inline SVG, GPU-cheap */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 0.55em;
  font-weight: 800;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); margin-top: 0; }
h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--coral-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
/* coral-deep is only 2.4:1 against ink surfaces; swap the ring there */
section.inverted :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cream);
}

/* visually hidden, still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

code, .mono { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.35rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1.1rem;
  z-index: 1200;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: var(--cream); }

/* ---------- headline flourishes (hand-drawn energy) ---------- */

/* highlighter sweep behind a word */
.hl {
  background-image: linear-gradient(104deg, transparent 2%, var(--butter) 8%, var(--butter) 94%, transparent 98%);
  background-size: 100% 46%;
  background-position: 0 78%;
  background-repeat: no-repeat;
  padding: 0 0.08em;
}
.hl.peach { background-image: linear-gradient(104deg, transparent 2%, var(--peach) 8%, var(--peach) 94%, transparent 98%); }
.hl.mint { background-image: linear-gradient(104deg, transparent 2%, var(--mint) 8%, var(--mint) 94%, transparent 98%); }

/* hand-drawn squiggle underline */
.squiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='10' viewBox='0 0 110 10'%3E%3Cpath d='M2 7 C 12 2, 22 2, 32 6 S 52 9, 62 5 S 82 2, 92 6 S 104 8, 108 5' fill='none' stroke='%23F06E45' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 0.16em;
  padding-bottom: 0.18em;
}

/* small hand-drawn asterisk burst, used before kicker-ish lines */
.burst::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg stroke='%23B23A18' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 2 V18'/%3E%3Cpath d='M3 6 L17 14'/%3E%3Cpath d='M17 6 L3 14'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- tag stickers & chips (the HonestTag motif) ---------- */

.tag-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  height: 2.1em;
  color: var(--ink);
  background: var(--butter);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 0 0.85em;
  transform: rotate(-2deg);
  box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.16);
}
/* One continuous tag silhouette: rounded left cap + stretchy body + pointed
   tip with a punched hole, composed as three mask slices so the point and
   hole never distort with label width. The ink outline is drawn by stroking
   the masked silhouette (4 offset shadows), so body and point connect with
   no seam. Fallback above stays a plain rounded badge. */
.tag-badge.peach { background: var(--peach); }
.tag-badge.mint { background: var(--mint); }
.tag-badge.sky { background: var(--sky); }
.tag-badge.coral { background: var(--coral); }
@supports (mask-repeat: no-repeat) or (-webkit-mask-repeat: no-repeat) {
  .tag-badge {
    --tag-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 42'%3E%3Cpath fill='%23FFE7A3' stroke='%2335262B' stroke-width='2.2' d='M16 1.1H10A8.9 8.9 0 0 0 1.1 10v22a8.9 8.9 0 0 0 8.9 8.9h6'/%3E%3C/svg%3E");
    --tag-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 42' preserveAspectRatio='none'%3E%3Crect x='0' y='1.1' width='4' height='39.8' fill='%23FFE7A3'/%3E%3Cpath fill='%2335262B' d='M0 0h4v2.2H0Zm0 39.8h4v2.2H0Z'/%3E%3C/svg%3E");
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23FFE7A3' fill-rule='evenodd' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0M22.5 21a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0'/%3E%3C/svg%3E");
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 2em 0 0.85em;
    background-image: var(--tag-l), var(--tag-r), var(--tag-m);
    background-position: left center, right center, 0.7em center;
    background-size: 0.8em 100%, 2.1em 100%, calc(100% - 2.65em) 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    filter: drop-shadow(2px 3px 0 rgba(53, 38, 43, 0.16));
  }
  /* the plain variant rules above use the background shorthand at higher
     specificity, which resets every background longhand — each variant
     must redeclare the full drawn-slice stack, not just the color */
  .tag-badge.peach {
    --tag-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 42'%3E%3Cpath fill='%23FFD9BE' stroke='%2335262B' stroke-width='2.2' d='M16 1.1H10A8.9 8.9 0 0 0 1.1 10v22a8.9 8.9 0 0 0 8.9 8.9h6'/%3E%3C/svg%3E");
    --tag-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 42' preserveAspectRatio='none'%3E%3Crect x='0' y='1.1' width='4' height='39.8' fill='%23FFD9BE'/%3E%3Cpath fill='%2335262B' d='M0 0h4v2.2H0Zm0 39.8h4v2.2H0Z'/%3E%3C/svg%3E");
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23FFD9BE' fill-rule='evenodd' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0M22.5 21a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0'/%3E%3C/svg%3E");
    background-image: var(--tag-l), var(--tag-r), var(--tag-m);
    background-position: left center, right center, 0.7em center;
    background-size: 0.8em 100%, 2.1em 100%, calc(100% - 2.65em) 100%;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  .tag-badge.mint {
    --tag-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 42'%3E%3Cpath fill='%23D5EDDC' stroke='%2335262B' stroke-width='2.2' d='M16 1.1H10A8.9 8.9 0 0 0 1.1 10v22a8.9 8.9 0 0 0 8.9 8.9h6'/%3E%3C/svg%3E");
    --tag-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 42' preserveAspectRatio='none'%3E%3Crect x='0' y='1.1' width='4' height='39.8' fill='%23D5EDDC'/%3E%3Cpath fill='%2335262B' d='M0 0h4v2.2H0Zm0 39.8h4v2.2H0Z'/%3E%3C/svg%3E");
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23D5EDDC' fill-rule='evenodd' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0M22.5 21a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0'/%3E%3C/svg%3E");
    background-image: var(--tag-l), var(--tag-r), var(--tag-m);
    background-position: left center, right center, 0.7em center;
    background-size: 0.8em 100%, 2.1em 100%, calc(100% - 2.65em) 100%;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  .tag-badge.sky {
    --tag-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 42'%3E%3Cpath fill='%23D7E6F2' stroke='%2335262B' stroke-width='2.2' d='M16 1.1H10A8.9 8.9 0 0 0 1.1 10v22a8.9 8.9 0 0 0 8.9 8.9h6'/%3E%3C/svg%3E");
    --tag-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 42' preserveAspectRatio='none'%3E%3Crect x='0' y='1.1' width='4' height='39.8' fill='%23D7E6F2'/%3E%3Cpath fill='%2335262B' d='M0 0h4v2.2H0Zm0 39.8h4v2.2H0Z'/%3E%3C/svg%3E");
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23D7E6F2' fill-rule='evenodd' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0M22.5 21a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0'/%3E%3C/svg%3E");
    background-image: var(--tag-l), var(--tag-r), var(--tag-m);
    background-position: left center, right center, 0.7em center;
    background-size: 0.8em 100%, 2.1em 100%, calc(100% - 2.65em) 100%;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  .tag-badge.coral {
    --tag-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 42'%3E%3Cpath fill='%23F06E45' stroke='%2335262B' stroke-width='2.2' d='M16 1.1H10A8.9 8.9 0 0 0 1.1 10v22a8.9 8.9 0 0 0 8.9 8.9h6'/%3E%3C/svg%3E");
    --tag-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 42' preserveAspectRatio='none'%3E%3Crect x='0' y='1.1' width='4' height='39.8' fill='%23F06E45'/%3E%3Cpath fill='%2335262B' d='M0 0h4v2.2H0Zm0 39.8h4v2.2H0Z'/%3E%3C/svg%3E");
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23F06E45' fill-rule='evenodd' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0M22.5 21a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0'/%3E%3C/svg%3E");
    background-image: var(--tag-l), var(--tag-r), var(--tag-m);
    background-position: left center, right center, 0.7em center;
    background-size: 0.8em 100%, 2.1em 100%, calc(100% - 2.65em) 100%;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  /* dark bands: a punched hole vanishes against ink, so there the hole is
     the logo's version, cream fill with an ink ring. Only the coral badge
     appears on dark bands today. */
  .promise-band .tag-badge,
  section.inverted .tag-badge {
    --tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath fill='%23F06E45' stroke='%2335262B' stroke-width='2.2' stroke-linejoin='round' d='M0 1.1h12l24.2 17.5q2.3 2.4 0 4.8L12 40.9H0'/%3E%3Ccircle cx='17' cy='21' r='5.5' fill='%23FDF8F1' stroke='%2335262B' stroke-width='2.2'/%3E%3C/svg%3E");
  }
}
.tag-badge.tilt-r { transform: rotate(1.6deg); }

/* destination chips */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.38em 1.1em;
  background: var(--paper);
}
.chip:nth-of-type(6n+1) { background: var(--butter); transform: rotate(-1.2deg); }
.chip:nth-of-type(6n+2) { background: var(--paper); transform: rotate(0.8deg); }
.chip:nth-of-type(6n+3) { background: var(--mint); transform: rotate(-0.6deg); }
.chip:nth-of-type(6n+4) { background: var(--peach); transform: rotate(1.4deg); }
.chip:nth-of-type(6n+5) { background: var(--sky); transform: rotate(-1.5deg); }
.chip:nth-of-type(6n+6) { background: var(--paper); transform: rotate(0.5deg); }

/* ---------- destination strip ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.4rem 1.35rem 1.6rem;
}
.marquee-label {
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 auto 0.9rem;
  max-width: var(--maxw);
  padding: 0 1.35rem;
}
/* ---------- header ---------- */

.site-header {
  background: rgba(253, 248, 241, 0.9);
  position: sticky;
  top: 0;
  z-index: 900;
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line);
}
.site-header nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.75rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-family: var(--display);
  font-weight: 800;
  /* 1.7rem: Bricolage cap height (~0.71em) ~= the checkmark's rendered
     height inside the 38px tag mark, so H/T match the check (the product owner spec). */
  font-size: 1.7rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand svg { display: block; transform: rotate(-6deg); transition: transform 0.2s ease; }
.brand:hover svg { transform: rotate(4deg); }
.brand:hover { color: var(--ink); }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
}
.nav-links a:not(.btn):hover { color: var(--coral-deep); }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: -1px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* 24x24px minimum pointer targets (WCAG 2.5.8): pad the hit area, cancel the
   padding with negative margin so layout and visual spacing do not move. */
.nav-links a:not(.btn), .footer-links a, .footer-learn a, .crumbs a {
  padding: 0.35rem 0.15rem;
  margin: -0.35rem -0.15rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--coral);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.78rem 1.55rem;
  font-size: 1.02rem;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.9);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--coral);
  color: var(--ink);
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 3px 5px 0 rgba(53, 38, 43, 0.9);
}
.btn:active { transform: translateY(0) rotate(0deg); box-shadow: 1px 2px 0 rgba(53, 38, 43, 0.9); }
.btn.secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.btn.secondary:hover, .btn.secondary:focus-visible { background: var(--butter); transform: translateY(-2px) rotate(1deg); box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.35); }
.btn.small { padding: 0.42rem 1.05rem; font-size: 0.92rem; box-shadow: 1.5px 2px 0 rgba(53, 38, 43, 0.9); }

/* ---------- sections & wavy dividers ---------- */

section { padding: 4rem 0; position: relative; }
section.tint { background: var(--cream-2); }
section.inverted {
  background: var(--ink);
  color: var(--cream);
}
section.inverted a { color: var(--coral-light); }
section.inverted a:hover { color: var(--cream); }

/* wave divider: sits at the seam, fill = the color of the section ABOVE it */
.wave {
  display: block;
  height: 44px;
  margin-bottom: -1px;
  position: relative;
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wave .f-cream { fill: var(--cream); }
.wave .f-cream2 { fill: var(--cream-2); }
.wave .f-ink { fill: var(--ink); }
section > .wave:first-child { margin-top: -4rem; margin-bottom: 1.5rem; }

.kicker {
  /* every kicker is a tag-badge; inline-block here used to defeat the
     badge's flex centering and the label sat high in the tag */
  display: inline-flex;
  margin-bottom: 1.1rem;
}

/* prose spans its content box; the 46rem cap that used to sit here left a
   third of every box empty on the right (the owner, 2026-09-16 21:32 ET) */
.lead { font-size: 1.22rem; color: var(--muted); }
section.inverted .lead { color: var(--on-ink); }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */

.hero { padding: 3.6rem 0 4rem; overflow: hidden; }
/* The fold is the business card (the owner, 2026-09-16 21:32 ET): kicker,
   a three-line h1, a three-line lead, the buttons and the whole receipt card
   sit inside 1280x800 and 1440x900. The text column gets the wider share
   and the h1 clamp is sized so the eight-word title holds three lines. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: 2.6rem;
  align-items: start;
}
/* .prose h2's 2.2em top margin (below) is meant for a heading that follows
   body text further down a page; it also matches a column's opening h1/h2,
   which should sit flush with the other column's top (owner, 2026-10-01). */
.hero-grid > div > h1:first-child,
.hero-grid > div > h2:first-child {
  margin-top: 0;
}
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.25rem); }
.hero .lead { font-size: 1.12rem; }
@media (max-width: 840px) {
  .hero { padding-top: 2.8rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
}
.hero .cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; align-items: center; }
.hero-note { font-size: 0.92rem; color: var(--muted); }
/* the app-purpose statement (Google brand verification reads it) sits in its
   own compact box directly under the fold instead of inside the hero column */
.hero .purpose {
  margin: 2.4rem 0 2.6rem;
  padding: 0.95rem 1.2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.5px solid var(--line-dark);
  border-radius: var(--r-md);
}

/* ---------- receipt-style evidence card ---------- */

.receipt-wrap { position: relative; max-width: 26rem; margin: 0 auto; }
.hero .receipt-wrap { max-width: 29rem; }
.receipt {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line-dark);
  border-radius: 6px 6px 0 0;
  padding: 2rem 1.5rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.8;
  box-shadow: var(--shadow-lift);
  transform: rotate(1.8deg);
  position: relative;
  /* torn receipt bottom edge */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 97.5% 100%, 95% calc(100% - 8px), 92.5% 100%, 90% calc(100% - 8px), 87.5% 100%, 85% calc(100% - 8px), 82.5% 100%, 80% calc(100% - 8px), 77.5% 100%, 75% calc(100% - 8px), 72.5% 100%, 70% calc(100% - 8px), 67.5% 100%, 65% calc(100% - 8px), 62.5% 100%, 60% calc(100% - 8px), 57.5% 100%, 55% calc(100% - 8px), 52.5% 100%, 50% calc(100% - 8px), 47.5% 100%, 45% calc(100% - 8px), 42.5% 100%, 40% calc(100% - 8px), 37.5% 100%, 35% calc(100% - 8px), 32.5% 100%, 30% calc(100% - 8px), 27.5% 100%, 25% calc(100% - 8px), 22.5% 100%, 20% calc(100% - 8px), 17.5% 100%, 15% calc(100% - 8px), 12.5% 100%, 10% calc(100% - 8px), 7.5% 100%, 5% calc(100% - 8px), 2.5% 100%, 0 calc(100% - 8px));
}
/* strip of tape holding the receipt */
.receipt::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 231, 163, 0.75);
  border-left: 1px dashed rgba(53, 38, 43, 0.25);
  border-right: 1px dashed rgba(53, 38, 43, 0.25);
}
.receipt .ec-title {
  font-weight: 700;
  color: var(--coral-deep);
  border-bottom: 1.5px dashed var(--line-dark);
  padding-bottom: 0.55rem;
  margin-bottom: 0.65rem;
  letter-spacing: 0.02em;
}
.receipt table { border-collapse: collapse; width: 100%; }
.receipt td { padding: 0.08rem 0; vertical-align: top; }
.receipt td:first-child { color: var(--muted); padding-right: 1.1rem; white-space: nowrap; }
.receipt .ok { color: var(--coral-deep); font-weight: 700; }
.receipt .ec-foot {
  color: var(--muted);
  margin: 0.8rem 0 0;
  font-size: 0.74rem;
  border-top: 1.5px dashed var(--line-dark);
  padding-top: 0.6rem;
}
/* little swing tag hanging off the receipt corner */
.receipt-tag {
  position: absolute;
  right: -1.2rem;
  bottom: -2.2rem;
  z-index: 2;
  pointer-events: none;
}

/* hero load-in: the receipt settles into its resting tilt, the swing tag
   stamps down a beat later. CSS only, gated on no-preference so a reduced-
   motion user (or the global kill-switch below) sees the resting state with
   no animation at all; text content is never part of this. */
@media (prefers-reduced-motion: no-preference) {
  .hero .receipt { animation: receipt-settle 0.6s cubic-bezier(0.19, 1, 0.22, 1) both; }
  .hero .receipt-tag { animation: tag-stamp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both; }
}
@keyframes receipt-settle {
  from { opacity: 0; transform: translateY(14px) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(1.8deg); }
}
@keyframes tag-stamp {
  from { opacity: 0; transform: scale(0.75) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (max-width: 840px) {
  .receipt-tag { right: 0.2rem; }
}

/* ---------- cards / grids ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.2rem;
}
/* card grids that are real lists (steps = ol, feature sets = ul) */
ol.grid-3, ul.grid-3, ul.learn-grid {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
ol.grid-3 + h2, ul.grid-3 + h2, ul.learn-grid + h2,
ol.grid-3 + h3, ul.grid-3 + h3, ul.learn-grid + h3,
ol.grid-3 + p, ul.grid-3 + p, ul.learn-grid + p {
  margin-top: 2.4rem;
}
@media (max-width: 840px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
  box-shadow: 3px 4px 0 rgba(53, 38, 43, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 4px 7px 0 rgba(53, 38, 43, 0.18); }
.card h3 { margin-top: 0.3rem; }
.card p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.grid-3 .card:nth-child(3n+1) { background: var(--butter); }
.grid-3 .card:nth-child(3n+2) { background: var(--peach); }
.grid-3 .card:nth-child(3n+3) { background: var(--mint); }
.grid-3.cool .card:nth-child(3n+1) { background: var(--mint); }
.grid-3.cool .card:nth-child(3n+2) { background: var(--sky); }
.grid-3.cool .card:nth-child(3n+3) { background: var(--butter); }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 rgba(53, 38, 43, 0.25);
}

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

.table-wrap {
  overflow-x: auto;
  margin-top: 2.2rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow);
}
table.pricing {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  min-width: 640px;
}
table.pricing th, table.pricing td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.pricing thead th {
  background: var(--cream-2);
  font-family: var(--display);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--ink);
}
table.pricing tbody tr:last-child td, table.pricing tbody tr:last-child th { border-bottom: none; }
table.pricing tbody tr:nth-child(even) td, table.pricing tbody tr:nth-child(even) th { background: rgba(248, 237, 220, 0.45); }
table.pricing .price { font-weight: 700; white-space: nowrap; color: var(--coral-deep); }
table.pricing .tier-name { font-family: var(--display); font-weight: 700; }
table.pricing td.na { color: var(--muted); } /* prior lighter gray was 3.1:1 on paper */
/* Night QA 2026-10-07: at 390 only Mirror and Starter showed, nothing said the
   table scrolls, and the row labels scrolled away with it. The label column
   stays put and a line says the table scrolls. */
.plan-finder { margin-top: 0.8rem; }
.table-hint { display: none; font-size: 0.88rem; color: var(--muted); margin: 0.4rem 0 0; }
@media (max-width: 840px) {
  .table-hint { display: block; }
  table.pricing th:first-child, table.pricing td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--paper); }
  table.pricing thead th:first-child { background: var(--cream-2); }
  table.pricing tbody tr:nth-child(even) th:first-child { background: color-mix(in srgb, var(--cream-2) 45%, var(--paper)); }
  table.pricing .row-label { min-width: 120px; }
}
table.pricing .row-label {
  font-weight: 500;
  /* NO nowrap: long feature labels ("Conversions delivered to your ad
     platforms (server-side)") forced to one line blew the table's intrinsic
     width past the container at EVERY viewport — the "scrolls for no reason"
     bug (product decision, 2026-07-19). Labels wrap; tier headers/prices stay nowrap. */
  min-width: 180px;
  max-width: 300px;
}

/* Footnotes trail cards/tables — without explicit clearance they sit
   flush against the box above (product decision, 2026-07-11, three pages). */
.footnote { font-size: 0.9rem; color: var(--muted); margin: 18px 0 0; }

/* inverted promise band (and inline promise boxes on prose-ish pages) */
/* top/bottom only: see the .prose comment above — the same 0-left/right
   shorthand bug, here on the home/pricing/partners/product promise band,
   ran its centered text edge to edge at mobile widths with no gutter. */
.promise-band { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.promise-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.4em; }
.promise-band .tag-badge { font-size: 1rem; margin-bottom: 1.4rem; }
.promise-band p { color: var(--on-ink); }
.promise-band p:last-child { margin-bottom: 0; }

.promise {
  margin-top: 1.6rem;
  margin-bottom: 2.6rem;
  background: var(--butter);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  padding: 1.05rem 1.3rem;
  font-weight: 500;
  box-shadow: 3px 4px 0 rgba(53, 38, 43, 0.14);
  transform: rotate(-0.5deg);
}
.promise p { margin: 0; }

/* ---------- FAQ ---------- */

.faq { margin-top: 2rem; }
.faq details {
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 0;
  margin-bottom: 0.85rem;
  box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.1);
}
.faq details[open] { background: var(--paper); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  list-style: none;
  position: relative;
  border-radius: var(--r-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  content: "+" / ""; /* alt text: keep the glyph out of the accessible name */
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--peach);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; background: var(--mint); }
.faq .faq-body { padding: 0 1.3rem 1.15rem; color: var(--ink-soft); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- rows: a strong-led list as full-width boxes ---------- */

/* Long strong-led bullets (pricing tier rules, payout terms, support
   expectations) read as one wall at 68rem. Each item becomes its own box:
   the lead-in on its own line, the body spanning the box. Same ink border
   and paper as the FAQ. */
ul.rows, .prose ul.rows {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.85rem;
}
ul.rows + h2 { margin-top: 2.4rem; }
.rows li {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  padding: 1.05rem 1.3rem;
  margin: 0;
  box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.1);
  color: var(--ink-soft);
}
.rows li > strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.rows li p { margin: 0 0 0.6em; }
.rows li p:last-child { margin-bottom: 0; }

/* ---------- waitlist form ---------- */

.waitlist-box {
  max-width: 36rem;
  margin: 0 auto;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 2.4rem 2.2rem 2.2rem;
  box-shadow: var(--shadow-lift);
  transform: rotate(-0.6deg);
  position: relative;
}
.waitlist-box::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 104px;
  height: 27px;
  transform: translateX(-50%) rotate(2.5deg);
  background: rgba(255, 217, 190, 0.8);
  border-left: 1px dashed rgba(53, 38, 43, 0.25);
  border-right: 1px dashed rgba(53, 38, 43, 0.25);
}
.waitlist-box h2 { margin-top: 0; }
.waitlist-form { margin-top: 1.3rem; }
.waitlist-form label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.field-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.waitlist-form input[type="email"],
.login-form input[type="text"] {
  flex: 1 1 15rem;
  font: inherit;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
}
.waitlist-form input[type="email"]::placeholder,
.login-form input[type="text"]::placeholder { color: var(--muted); } /* prior lighter tone was 4.1:1 */
.waitlist-form input[type="email"]:focus,
.login-form input[type="text"]:focus {
  outline: 3px solid var(--coral-deep); /* coral was 2.8:1 vs cream */
  outline-offset: 1px;
}
/* Login status note: shown only when the login redirect lands on its
   fragment (#unknown) - no script, just :target. */
.login-status { display: none; margin-top: 1rem; padding: 0.8rem 1rem;
  border: 1.5px solid var(--ink); border-radius: 14px; background: var(--butter); }
.login-status:target { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin-top: 0.8rem; font-weight: 500; min-height: 1.4em; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--danger); }

/* ---------- partner apply form (same box motif, multi-field grid) ---------- */

.waitlist-box.wide { max-width: 44rem; }
.apply-form {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
}
@media (max-width: 840px) { .apply-form { grid-template-columns: 1fr; } }
.apply-form .field { display: flex; flex-direction: column; min-width: 0; }
.apply-form label { font-weight: 700; margin-bottom: 0.4rem; }
.apply-form .field-wide { grid-column: 1 / -1; }
.apply-form textarea { resize: vertical; min-height: 96px; font-family: var(--sans); }
.apply-form input, .apply-form select, .apply-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
}
.apply-form input::placeholder, .apply-form textarea::placeholder { color: var(--muted); }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
  outline: 3px solid var(--coral-deep);
  outline-offset: 1px;
}
.apply-form .req { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.apply-form .actions { grid-column: 1 / -1; margin-top: 0.3rem; }
.apply-form .form-msg { grid-column: 1 / -1; margin: 0; }

/* ---------- prose pages (privacy, terms, support) ---------- */

/* top/bottom only: a 3-value shorthand here would zero the horizontal
   padding .container already set, pulling crumbs/h1/body text off the
   header's left edge (reported 2026-09-30, honesttag.com/learn/mer/). */
.prose { padding-top: 3.2rem; padding-bottom: 4.5rem; }

/* support page: the request form sits beside "What to expect" instead of
   centered alone under it, so it reads as part of the frame at wide
   viewports instead of a leftover narrow card (reported 2026-09-30). Reuses
   .hero-grid's column mechanics; only the vertical alignment differs. */
.support-layout .waitlist-box.wide { margin: 0; }
.prose h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.prose h2 { font-size: 1.55rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.18rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4em; }
.prose .updated { color: var(--muted); font-size: 0.92rem; }
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  margin: 1rem 0 1.5rem;
}
.prose table th, .prose table td {
  border: 1px solid var(--line-dark);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.prose table th { background: var(--cream-2); }
/* The compare tables ran 13-24px past their box at 390 and cut the HonestTag
   column (night QA 2026-10-07). Long words may break so the table fits. */
@media (max-width: 520px) {
  .prose table th, .prose table td { padding: 0.45rem 0.5rem; overflow-wrap: anywhere; }
  /* "anywhere" also lets a short column shrink below its longest word and
     split it mid-word ("Compon/ent", "Operati/onal" on the status table,
     presubmit gate 2026-10-07). A table marked words-whole fits at 390 with
     words kept whole (the compare tables do not), so it breaks only a word
     that is wider than its cell. */
  .prose table.words-whole :is(th, td) { overflow-wrap: break-word; }
}
/* also the callout that breaks a run of paragraphs on marketing pages */
.summary-box {
  background: var(--mint);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
  box-shadow: 3px 4px 0 rgba(53, 38, 43, 0.12);
}
.summary-box p:first-child { margin-top: 0; }
.summary-box p:last-child, .summary-box ul:last-child { margin-bottom: 0; }

/* ---------- breadcrumbs + learn ---------- */

.crumbs { font-size: 0.88rem; margin: 0 0 1.5rem; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  padding: 0;
  margin: 0;
}
.crumbs li { color: var(--muted); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 0.45em; color: var(--line-dark); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--coral-deep); }

.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 2.2rem;
}
@media (max-width: 840px) { .learn-grid { grid-template-columns: 1fr; } }
.learn-grid .card h3 { margin-top: 0; }
.learn-grid .card:nth-child(4n+1) { background: var(--butter); }
.learn-grid .card:nth-child(4n+2) { background: var(--mint); }
.learn-grid .card:nth-child(4n+3) { background: var(--peach); }
.learn-grid .card:nth-child(4n+4) { background: var(--sky); }

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

/* top/bottom only: same 0-left/right shorthand bug as .prose above, here
   on the 404 page. */
.error-page { text-align: center; padding-top: 5rem; padding-bottom: 6rem; }
.error-page .code {
  font-family: var(--display);
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 800;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 0.6rem;
  text-shadow: 3px 3px 0 rgba(53, 38, 43, 0.9);
  -webkit-text-stroke: 2px var(--ink);
}
.error-page .lost-tag { margin: 0 auto 1.6rem; width: 110px; }

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

.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding: 0 0 2.4rem;
  font-size: 0.93rem;
}
.site-footer .wave { transform: translateY(-1px); }
.site-footer .container { padding-top: 2.4rem; }
.site-footer a { color: var(--coral-light); }
.site-footer a:hover { color: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
  gap: 2rem 2.4rem;
  align-items: start;
}
.footer-brand { padding-right: 1rem; }
.footer-wordmark {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  margin-bottom: 0.4rem;
}
.footer-tagline { margin: 0 0 0.6rem; }
.footer-heading {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.footer-links a { color: var(--on-ink); text-decoration: none; }
.footer-links a:hover { color: var(--cream); }
.site-footer .legal { margin-top: 2rem; font-size: 0.83rem; color: var(--on-ink-muted); }
.site-footer .legal + .legal { margin-top: 0.8rem; }
@media (max-width: 840px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- motion safety ---------- */

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 3px 0 rgba(53, 38, 43, 0.16);
  z-index: 900;
}
.to-top:hover { background: var(--butter); color: var(--ink); }
/* Night QA 2026-10-07, 390px walk: the button showed at scroll 0 and sat over
   body text and table cells; phones have their own way back to the top. The
   header wrapped to three rows and stayed pinned at 170px (a fifth of the
   screen, over every anchor target), so it scrolls away on narrow screens. */
@media (max-width: 840px) {
  .to-top { display: none; }
  .site-header { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .btn:hover, .btn:focus-visible, .card:hover { transform: none; }
  .brand:hover svg { transform: rotate(-6deg); } /* hold the resting tilt */
}

/* Cookie choice banner (public/consent.js), shown only to EEA, UK and Swiss visitors. */
.consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 950;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line-dark);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.consent-banner p { margin: 0; flex: 1 1 18rem; font-size: 0.95rem; }
.consent-actions { display: flex; gap: 0.6rem; }