/* ═══════════════════════════════════════════════════════════════════════════
   DecoySignal — site styles

   Two readers, both served by the same decisions:
     · someone in their sixties who just watched a video and wants to know
       whether this channel can be trusted
     · a credit union's compliance officer deciding whether to license it

   Neither wants spectacle. Both want to feel a careful person made this.

   THE ONE IDEA
   The product is: here is the real message, here is the exact giveaway. So the
   page does that rather than describing it. The artifact leads, the tell is
   marked, the source sits under it. Everything else is support.

   TYPE
   Archivo carries the voice. IBM Plex Mono is reserved for things that are
   genuinely data — document numbers, dates, addresses, the scam domain itself.
   Never as a costume for a label.

   COLOUR
   Videos are dark; the site is light. Long legal copy read by older eyes
   belongs on light ground, institutional buyers expect it, and brand.json
   already defines light variants for exactly this. The dark identity holds the
   masthead, the artifact, and the footer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ground:      #FCFDFE;
  --tint:        #F1F5F9;
  --paper:       #FFFFFF;
  --rule:        #DEE6EE;

  --display:     #0D1116;
  --body:        #2B3542;
  --muted:       #47515F;

  --signal:      #6F4306;
  --tell:        #8E2620;

  --dark:        #0D1116;
  --dark-2:      #1A222C;
  --dark-3:      #333E4C;
  --dark-rule:   #2C3743;
  --on-dark:     #F2F5F8;
  --on-dark-mut: #B0BCCA;
  --signal-lit:  #F0A63C;
  --tell-lit:    #FF8A80;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --measure: 66ch;
  --gut: clamp(1.5rem, 5vw, 4rem);
  --col: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.72;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── browser surfaces ─────────────────────────────────────────────────────
   The parts nobody draws still carry the design. Selection, caret, scrollbar
   and focus ship with defaults that belong to no design system. */
::selection { background: #FDE9C8; color: var(--display); }
:root { caret-color: var(--signal); accent-color: var(--signal); }
html { scrollbar-color: #B9C6D4 var(--tint); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--tint); }
::-webkit-scrollbar-thumb { background: #B9C6D4; border-radius: 6px; border: 3px solid var(--tint); }
::-webkit-scrollbar-thumb:hover { background: #93A3B4; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--display); color: var(--on-dark);
  padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

a { color: var(--signal); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--display); text-decoration-thickness: 2px; }

/* ── masthead ─────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: .95rem var(--gut);
  background: rgba(13, 17, 22, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--dark-rule);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--on-dark); text-decoration: none;
  font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em;
}
.brand em { font-style: normal; color: var(--signal-lit); }
.brand svg { flex: none; }

header.site nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-left: auto; }
header.site nav a {
  color: var(--on-dark-mut); text-decoration: none;
  font-size: .95rem; font-weight: 600;
  padding: .2rem 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
header.site nav a:hover { color: var(--on-dark); }
header.site nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--signal-lit); }

@media (max-width: 760px) {
  header.site { gap: .7rem; padding-bottom: .7rem; }
  header.site nav { margin-left: 0; width: 100%; gap: 1.1rem; }
  header.site nav a { font-size: .88rem; }
}

/* ── rhythm ───────────────────────────────────────────────────────────────
   The content column is centred by the padding, so every child aligns left
   inside it. Centring each child individually leaves narrow paragraphs
   floating mid-page while headings sit left. */
section {
  padding-block: clamp(3.6rem, 8vw, 7rem);
  padding-inline: max(var(--gut), calc((100% - var(--col)) / 2));
}
section > * { max-width: 100%; }

h1, h2, h3, h4 { color: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.5rem); margin: 0; }
h1 em { font-style: normal; color: var(--signal); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 0 0 1.5rem; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .45rem; line-height: 1.3; }

.lede { font-size: clamp(1.18rem, 1.9vw, 1.42rem); line-height: 1.58; max-width: 56ch; }
p { max-width: var(--measure); }
strong { font-weight: 700; color: var(--display); }

/* ── hero: the artifact leads ─────────────────────────────────────────── */
.hero {
  background: radial-gradient(130% 110% at 12% 0%, #1F2937 0%, rgba(31,41,55,0) 58%), var(--dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--dark-rule);
  padding-block: clamp(3.6rem, 8vw, 6.4rem);
}
.hero-grid {
  display: grid; gap: clamp(2.6rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--on-dark); }
.hero h1 em { color: var(--signal-lit); }
.hero .lede { color: var(--on-dark-mut); margin: 1.7rem 0 0; }

.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.4rem; }
.btn {
  display: inline-block; padding: .9rem 1.5rem; border-radius: 3px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  background: var(--signal-lit); color: var(--dark); border: 1px solid var(--signal-lit);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), background .16s, box-shadow .16s;
}
.btn:hover { background: #FFBD5F; border-color: #FFBD5F; color: var(--dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(240,166,60,.24); }
.btn.ghost { background: transparent; color: var(--on-dark); border-color: #46525F; box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.07); border-color: var(--on-dark-mut); color: var(--on-dark); transform: translateY(-1px); }

/* ── the artifact — the one authored moment ───────────────────────────── */
.artifact { margin: 0; align-self: center; }
.artifact-frame {
  background: linear-gradient(168deg, #26303C 0%, #1B232D 100%);
  border: 1px solid #3B4757;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.7);
}
.artifact-from {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-mut); margin: 0 0 1rem;
}
.artifact-msg {
  background: var(--dark-3); border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 1.1rem 1.2rem; margin: 0;
  font-size: 1.02rem; line-height: 1.55; color: var(--on-dark); max-width: none;
}
.artifact-msg .dom { font-family: var(--mono); font-size: .96em; }
.artifact-msg mark {
  background: #FFEAE7; color: #8E2620; font-weight: 600;
  border-bottom: 2px solid #8E2620;
  padding: 1px 4px 2px; margin: 0 -2px; border-radius: 2px;
}
.artifact-time { font-family: var(--mono); font-size: .82rem; color: #B0BCCA; margin: .7rem 0 0; padding-left: .3rem; }

.artifact figcaption { margin-top: 1.4rem; display: grid; gap: .55rem; }
.artifact .verdict { font-size: 1.06rem; line-height: 1.5; color: var(--on-dark); margin: 0; max-width: none; }
.artifact .verdict b { color: var(--tell-lit); font-weight: 700; }
.artifact cite {
  font-family: var(--mono); font-style: normal; font-size: .88rem;
  line-height: 1.55; color: #B0BCCA;
}

/* ── bands ────────────────────────────────────────────────────────────────
   On wide screens the heading takes a left rail and the content sits beside
   it. A 62ch measure alone leaves the right 40% of a 1440px page empty, which
   reads as unfinished rather than spacious. */
.band.alt { background: var(--tint); }
@media (min-width: 1000px) {
  .band { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 0 4.5rem; align-items: start; }
  .band > h2 { grid-column: 1; margin: 0; position: sticky; top: 6rem; }
  .band > *:not(h2) { grid-column: 2; }
  .band > .seq { margin-top: 0; }
  .band > .wide:first-of-type { margin-top: .3rem; }
}
.wide { max-width: 62ch; font-size: 1.16rem; }
.small { font-size: 1.0625rem; color: var(--muted); }

/* ── ordered sequence — a list, not a card grid ────────────────────────────
   These three are genuinely chronological relative to being scammed, so the
   numbers carry information. They are set as an editorial list because
   same-size boxes are the lazy container. */
.seq { counter-reset: s; list-style: none; margin: 2.4rem 0 0; padding: 0; }
.seq li {
  counter-increment: s; position: relative;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1.2rem; align-items: start;
  padding: 1.7rem 0; border-top: 1px solid var(--rule);
}
.seq li:last-child { border-bottom: 1px solid var(--rule); }
.seq li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .92rem; font-weight: 500;
  color: var(--signal); padding-top: .34em;
}
.seq h3 { grid-column: 2; margin: 0 0 .3rem; font-size: 1.34rem; }
.seq p { grid-column: 2; margin: 0; max-width: 58ch; font-size: 1.06rem; line-height: 1.6; }
@media (max-width: 620px) {
  .seq li { grid-template-columns: 1fr; gap: .3rem; }
  .seq li::before { grid-column: 1; padding: 0 0 .3rem; }
  .seq h3, .seq p { grid-column: 1; }
}

/* ── check lists — the trust apparatus ────────────────────────────────── */
.checks { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 68ch; }
.checks li {
  position: relative; padding: 0 0 1rem 2.1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule); font-size: 1.06rem; line-height: 1.6;
}
.checks li:last-child { border-bottom: 0; margin-bottom: 0; }
.checks li::before {
  content: ""; position: absolute; left: .15rem; top: .62em;
  width: .74rem; height: .42rem;
  border-left: 2.2px solid var(--signal); border-bottom: 2.2px solid var(--signal);
  transform: rotate(-45deg);
}

/* ── numbered tiers ───────────────────────────────────────────────────── */
.tiers { counter-reset: t; list-style: none; margin: 1.7rem 0 0; padding: 0; max-width: 70ch; }
.tiers li {
  counter-increment: t; position: relative;
  padding: 0 0 1.4rem 3.4rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule); font-size: 1.06rem; line-height: 1.62;
}
.tiers li:last-child { border-bottom: 0; }
.tiers li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: var(--mono); font-size: .92rem; color: var(--signal);
}

/* ── editions — parallel options, so no numbers ───────────────────────── */
.editions { margin: 2.2rem 0 0; display: grid; gap: 0; }
.editions > div {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .4rem 2.4rem; padding: 1.7rem 0; border-top: 1px solid var(--rule);
}
.editions > div:last-child { border-bottom: 1px solid var(--rule); }
.editions h3 { margin: 0; font-size: 1.24rem; }
.editions p { margin: 0; font-size: 1.06rem; line-height: 1.6; max-width: 56ch; }
@media (max-width: 720px) { .editions > div { grid-template-columns: 1fr; gap: .4rem; } }

/* ── prose ────────────────────────────────────────────────────────────── */
.page-head { background: var(--tint); border-bottom: 1px solid var(--rule); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 1.4rem; color: var(--muted); }

.prose > * { max-width: var(--measure); }
.prose h2 {
  margin: 3.2rem 0 1rem; font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  padding-top: 1.8rem; border-top: 1px solid var(--rule); max-width: none;
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose p { margin: 0 0 1.2rem; }
.prose ul:not(.checks) { max-width: 68ch; padding-left: 1.2rem; margin: 0 0 1.3rem; }
.prose ul:not(.checks) li { margin-bottom: .8rem; line-height: 1.62; }
.prose .checks, .prose .tiers, .prose .split, .prose .editions { max-width: none; }

.split { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.8rem; }
.split h3 { margin-top: 0; }
.split ul { padding-left: 1.15rem; }
.split li { margin-bottom: .7rem; font-size: 1.02rem; line-height: 1.58; }

.legal p, .legal li { font-size: 1.125rem; }
.addr-block {
  font-family: var(--mono); font-size: .98rem; line-height: 1.7;
  background: var(--tint); border: 1px solid var(--rule);
  padding: 1rem 1.2rem; border-radius: 3px;
}

.empty-log {
  background: var(--tint); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1.9rem; max-width: 62ch;
}
.empty-log p { margin: 0 0 .7rem; }
.empty-log p:last-child { margin: 0; color: var(--muted); font-size: 1.0625rem; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site {
  background: var(--dark); color: var(--on-dark-mut);
  padding-block: clamp(3rem, 6vw, 4.6rem) 2.6rem;
  padding-inline: max(var(--gut), calc((100% - var(--col)) / 2));
  font-size: .98rem;
}
footer.site > * { max-width: 100%; }
.foot-grid {
  display: grid; gap: 2.6rem; grid-template-columns: 1.5fr 1fr 1.2fr;
  padding-bottom: 2.4rem; border-bottom: 1px solid var(--dark-rule);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

.brand-sm { font-size: 1rem; }
.tag { color: var(--signal-lit); font-weight: 700; margin: .9rem 0 1.3rem; font-size: 1rem; }
.addr { font-family: var(--mono); font-size: .86rem; line-height: 1.75; margin: 0; }

footer.site h3 {
  color: var(--on-dark); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; margin: 0 0 .95rem;
}
footer.site h3.sp { margin-top: 1.8rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: .6rem; }
footer.site a { color: var(--on-dark-mut); text-decoration: none; }
footer.site a:hover { color: var(--signal-lit); text-decoration: underline; }

.disclaimer, .ai, .rev { max-width: 74ch; }
.disclaimer { margin: 2.3rem 0 0; font-size: .95rem; line-height: 1.68; }
.disclaimer strong { color: var(--on-dark); }
/* footer.site a is (0,1,2); .disclaimer a is (0,1,1), so the shorter selector
   lost and these links rendered identical to the prose around them, with no
   underline. Colour alone would not be enough anyway. */
footer.site .disclaimer a, footer.site .ai a {
  color: var(--signal-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ai { margin: 1.1rem 0 0; font-size: .92rem; line-height: 1.62; color: #A6B3C2; }
.rev { margin: 2rem 0 0; font-family: var(--mono); font-size: .82rem; color: #A6B3C2; }

/* ── motion ───────────────────────────────────────────────────────────────
   One authored moment: the artifact resolves on load, and its tell is marked
   a beat later. Everything else is already in place. An identical entrance on
   every section is a tic, not a design. */
@media (prefers-reduced-motion: no-preference) {
  .artifact-frame {
    animation: settle .7s cubic-bezier(.16,1,.3,1) both;
  }
  .artifact-msg mark {
    animation: mark .5s cubic-bezier(.16,1,.3,1) .85s both;
  }
  @keyframes settle {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes mark {
    from { background-color: #E8EDF3; border-bottom-color: transparent; }
    to   { background-color: #FFEAE7; border-bottom-color: #8E2620; }
  }
}

/* ── print ────────────────────────────────────────────────────────────── */
@media print {
  header.site, .cta-row { display: none; }
  body { background: #fff; font-size: 11pt; }
  .hero, .page-head, footer.site { background: #fff !important; color: #000; }
  .hero h1, .hero .lede, footer.site, footer.site h3 { color: #000; }
  a { color: #000; }
}


/* ═══ additions after external review ═══════════════════════════════════ */

/* ── the sample video ─────────────────────────────────────────────────────
   Vertical, because the product is vertical. Capped by height so it does not
   dominate a desktop page, and preload="none" so a phone on mobile data does
   not pull 5.7MB before anyone asks for it. */
.watch video {
  display: block;
  width: auto; max-width: 100%;
  height: auto; max-height: min(74vh, 720px);
  border-radius: 12px; background: var(--dark);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px -16px rgba(13,17,22,.34);
}
.watch-note { margin: 1.3rem 0 0; font-size: 1.06rem; color: var(--muted); max-width: 54ch; }
@media (max-width: 999px) { .watch video { margin-inline: auto; } }

/* ── the urgent route ─────────────────────────────────────────────────────
   Someone who has just lost money is the least patient reader on the site.
   Their door is first and it is visually distinct from everything else. */
.btn.urgent { background: var(--tell); border-color: var(--tell); color: #fff; }
.btn.urgent:hover { background: #C43A31; border-color: #C43A31; color: #fff; box-shadow: 0 6px 18px rgba(168,47,39,.3); }

header.site nav a[href="/act"] { color: #FFA79E; }
header.site nav a[href="/act"]:hover,
header.site nav a[href="/act"][aria-current="page"] { color: #FFC9C3; border-bottom-color: var(--tell-lit); }

.act-hero .lede { color: var(--on-dark-mut); }
.act-first {
  margin: 2rem 0 0; padding: 1.2rem 1.4rem; max-width: 60ch;
  background: rgba(168,47,39,.14); border: 1px solid rgba(255,107,96,.32);
  border-radius: 6px; color: var(--on-dark); font-size: 1.06rem; line-height: 1.6;
}
.act-first strong { color: var(--tell-lit); }

/* ── recovery routes ─────────────────────────────────────────────────────
   Not cards: a reader scans for their own situation, so each route is a band
   with a heading they can find, and the rule that applies sits with it. */
/* Eleven routes is too many to scroll past when you are panicking, so the
   situations are listed first and each one jumps to its own answer. */
.route-jump {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: 0 0 2.6rem; padding: 0 0 2.2rem;
  border-bottom: 1px solid var(--rule);
}
.route-jump a {
  display: inline-block; padding: .5rem .85rem;
  background: var(--tint); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--display); text-decoration: none;
  font-size: 1rem; font-weight: 600; line-height: 1.3;
}
.route-jump a:hover { border-color: var(--signal); color: var(--signal); }
.routes { display: grid; gap: 0; }
.route-steps {
  margin: 0 0 .9rem; padding-left: 1.15rem; max-width: 64ch;
  font-size: 1.06rem; line-height: 1.62;
}
.route-steps li { margin-bottom: .6rem; }
.route-steps strong { color: var(--display); }
.routes article { padding: 2rem 0; border-top: 1px solid var(--rule); }
.routes article:last-child { border-bottom: 1px solid var(--rule); }
.routes h3 { font-size: 1.5rem; margin: 0 0 .8rem; }
.routes p { margin: 0 0 .8rem; max-width: 64ch; }
.route-do { font-size: 1.14rem; line-height: 1.6; color: var(--display); font-weight: 600; }
.route-why { font-size: 1.06rem; line-height: 1.62; }
.route-src { font-family: var(--mono); font-size: .92rem; color: var(--muted); margin: 0 !important; }
@media (min-width: 1000px) {
  .routes article { display: grid; grid-template-columns: minmax(0,15rem) minmax(0,1fr); gap: 0 3rem; }
  .routes h3 { grid-column: 1; margin: 0; }
  .routes p, .route-steps { grid-column: 2; }
}

/* ── submission page ──────────────────────────────────────────────────────
   The warning is the first thing on the page because it is the one part that
   protects the reader rather than us. It is a genuine callout, not decoration,
   so it gets a box; nothing else on this page does. */
.warn-box {
  background: #FFF4F3; border: 1px solid #E8B4AE; border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 2.2rem); max-width: 62ch;
}
.warn-h { margin: 0 0 .9rem; font-size: 1.6rem; color: var(--tell); }
.warn-box p { margin: 0 0 1.1rem; font-size: 1.08rem; line-height: 1.62; max-width: none; }
.warn-list {
  margin: 0 0 1.2rem; padding-left: 1.15rem;
  font-size: 1.08rem; line-height: 1.55; font-weight: 600; color: var(--display);
}
.warn-list li { margin-bottom: .45rem; }
.warn-foot { font-size: 1rem !important; color: var(--muted); margin-bottom: 0 !important; }

/* Numbered because the order genuinely carries information: nobody should send
   an artifact before step two has happened. */
.steps { counter-reset: step; list-style: none; margin: 2.4rem 0 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 1.9rem 3.4rem; max-width: 66ch;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  color: var(--signal); border: 1px solid var(--rule); border-radius: 50%;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
}
.steps h3 { margin: .1rem 0 .5rem; font-size: 1.28rem; }
.steps p { margin: 0; font-size: 1.08rem; line-height: 1.62; }

/* Two parallel choices, so a rule between them rather than two boxes. */
.consents { display: grid; gap: 2.2rem; margin: 2.4rem 0 2rem; }
.consents article { padding-top: 1.6rem; border-top: 2px solid var(--rule); }
.consents h3 { margin: 0 0 .6rem; font-size: 1.28rem; }
.consents p { margin: 0; font-size: 1.08rem; line-height: 1.62; }
@media (min-width: 860px) {
  .consents { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ── mobile navigation ────────────────────────────────────────────────────
   Six items at 14px in two cramped rows fails the audience this is for.
   Full-width rows, 44px minimum touch targets, readable size. */
@media (max-width: 860px) {
  header.site { padding: .8rem var(--gut) .35rem; }
  header.site nav {
    width: 100%; margin: .5rem 0 0; gap: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--dark-rule);
  }
  header.site nav a {
    font-size: 1rem; padding: .82rem .2rem; min-height: 44px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--dark-rule); border-top: 0;
  }
  header.site nav a[aria-current="page"] {
    border-bottom-color: var(--signal-lit); border-bottom-width: 2px;
  }
}

/* ── footer on small screens ──────────────────────────────────────────────
   It was running to a third of some pages. Same information, less of it in
   the reader's way. */
@media (max-width: 760px) {
  footer.site { padding-block: 2.4rem 1.8rem; font-size: .94rem; }
  .foot-grid { gap: 1.7rem; padding-bottom: 1.7rem; }
  footer.site li { margin-bottom: .45rem; }
  footer.site h3 { margin-bottom: .6rem; }
  .tag { margin: .7rem 0 .9rem; }
  .disclaimer { margin-top: 1.7rem; font-size: .9rem; }
  .ai { font-size: .84rem; }
}


/* Anchor landing under a sticky header — external review, REQUIRED.
   /act has 12 route links that jump to a heading. The header is sticky and goes
   multi-row on a phone, so a jump could land the destination heading UNDERNEATH
   it: the person taps "Gift cards", the page moves, and the first thing they see
   is the middle of someone else's instructions. On the page someone opens twenty
   minutes after losing money, that is not a cosmetic bug.
   Generous on mobile, where the header is tallest. */
.route-list article,
[id] { scroll-margin-top: 96px; }
@media (max-width: 700px) {
  .route-list article,
  [id] { scroll-margin-top: 168px; }
}

/* 44x44 is the WCAG 2.2 enhanced target size. Our audience is 55+ on a phone,
   often in a hurry, so the route chips take the enhanced target rather than the
   24x24 minimum. */
.route-jump a {
  min-height: 44px; display: inline-flex; align-items: center;
  /* The class name matters: this rule first targeted .route-chips, which does not
     exist in the markup, so the touch-target fix silently did nothing. External
     review caught it by comparing the CSS against the rendered HTML. A style rule
     that matches no element fails exactly like a passing test that ran nothing. */
}

/* ── Evidence register ────────────────────────────────────────────────────
   The page exists to be READ SCEPTICALLY: someone heard a claim in a video and
   came to check it. So the claim and its source sit together, and the source is
   never the smallest thing on the page — external review found our citation
   text at 14px, which for a 55+ audience made the evidence the hardest part to
   read on a page whose entire purpose is evidence. */
.claims { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.6rem; }

.claim {
  border-left: 3px solid var(--rule);
  padding: .1rem 0 .1rem 1.25rem;
}
.claim .said {
  font-size: 1.08rem; font-weight: 600; color: var(--display);
  margin: 0 0 .55rem; line-height: 1.55;
}
.claim .src-quote {
  margin: 0 0 .5rem; padding: .55rem .9rem;
  background: var(--tint); border-radius: 6px;
  font-size: .98rem; color: var(--body); font-style: italic;
}
.claim .src-line { margin: 0; font-size: .98rem; }
.claim .src-line a { word-break: break-word; }
.claim .src-when { color: var(--muted); white-space: nowrap; }

/* Our own words wear a different colour from an agency's. A reader must be able
   to tell, at a glance, which is which — conflating them is the exact defect
   this register was built to make impossible. */
.claim.own { border-left-color: var(--muted); }
.claim.own .src-own { margin: 0; font-size: .98rem; color: var(--muted); }
.claim.missing { border-left-color: var(--tell); }
.claim.missing .src-none { margin: 0; font-size: .98rem; color: var(--tell); font-weight: 600; }

.claim .src-precision, .claim .src-safety {
  margin: .5rem 0 0; font-size: .95rem; color: var(--muted); line-height: 1.6;
}

.ev-meta { font-size: 1rem; color: var(--body); margin: .9rem 0 .4rem; }
.ev-meta .warn { color: var(--tell); }
.ev-hash { font-size: .92rem; color: var(--muted); margin: .3rem 0 0; }
.ev-hash code { font-size: .8rem; word-break: break-all; }
.ev-note { font-size: .98rem; color: var(--body); margin-top: 1.1rem; }

.ev-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ev-table th, .ev-table td {
  text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ev-table th { font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ev-table .muted { color: var(--muted); font-size: .92rem; }
.hash-short { font-size: .82rem; color: var(--muted); }

@media (max-width: 700px) {
  /* One card per item, each value labelled by the column it came from. */
  .ev-table, .ev-table tbody, .ev-table tr, .ev-table td { display: block; width: 100%; }
  .ev-table thead { display: none; }
  .ev-table tr {
    border: 1px solid var(--rule); border-radius: 10px;
    padding: .9rem 1rem; margin-bottom: .9rem;
  }
  .ev-table td { border: 0; padding: .3rem 0; }
  .ev-table td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: .8rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); margin-bottom: .1rem;
  }
  /* The item name leads the card and needs no label above it. */
  .ev-table td:first-child::before { content: none; }
  .ev-table td:first-child a { font-size: 1.12rem; font-weight: 700; }
}

/* Evidence identity line sits BELOW the h1, not above it. The site's own binding
   design rule forbids a kicker or eyebrow above any heading, and the first
   version of this page broke that rule on the newest page while the standard
   still banned it. A hard rule silently violated is worse than no rule. */
.ev-ident { font-family: var(--mono, monospace); font-size: .92rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: .5rem 0 0; }

/* Timecode, chapter grouping, and collapsed detail on the evidence pages.
   Review: "A normal viewer cannot quickly answer 'where is the claim I heard at
   2:15?'" — so every claim now carries when it is spoken, claims group under the
   chapter they belong to, and the long precision notes collapse. */
.ev-chapter {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 2.2rem 0 .2rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.claim .at {
  font-family: var(--mono, monospace); font-size: .92rem; color: var(--signal);
  margin: 0 0 .25rem; font-weight: 600;
}
.src-more { margin-top: .5rem; }
.src-more summary {
  cursor: pointer; font-size: .95rem; color: var(--muted);
  padding: .3rem 0; min-height: 44px; display: flex; align-items: center;
}
.src-more summary:hover { color: var(--body); }
.src-more[open] summary { margin-bottom: .3rem; }

/* THE EVIDENCE MUST NOT BE THE SMALLEST TEXT ON THE PAGE.
   Review: "The site makes the evidence smaller than the prose... For this
   audience, the most important trust information should not be the smallest
   information." Source lines, citations, hashes and the AI disclosure all sat
   between .8rem and .98rem while body text is 1.125rem — on a site whose
   audience is 55+ and whose entire proposition is that you can check the source. */
.claim .src-line,
.claim .src-own,
.claim .src-quote,
.claim .src-precision,
.claim .src-safety,
.src-more summary,
.route-src,
.ev-note,
.ev-meta,
.ev-table .muted,
.ev-table td[data-label]::before { font-size: 1.02rem; }

.ev-hash { font-size: 1rem; }
.ev-hash code, .hash-short { font-size: .92rem; }
.claim .at { font-size: 1rem; }
figcaption cite, .cite, .source-line { font-size: 1.02rem; }

/* The AI disclosure in the footer is a compliance statement, not fine print. */
footer .ai, .site-foot .ai, .foot-ai { font-size: 1.02rem; }
@media (max-width: 700px) {
  footer .ai, .site-foot .ai, .foot-ai { font-size: 1rem; }
}

/* ── the sticky header costs too much on a phone ──────────────────────────
   Seven items in two columns is four rows plus the brand bar: roughly a quarter
   of a 390x844 screen, held there on every page. On Home that is tolerable. On
   /act — a long page someone reads while frightened — and on the evidence
   pages it is expensive, and it was also why anchor jumps needed a large
   scroll-margin to clear it.

   So on phone the masthead scrolls away with the page. The navigation is still
   the first thing on every page, /act carries its own in-page route jumps, and
   the footer repeats every link — so nothing becomes unreachable, it simply
   stops occupying the screen while someone is trying to read.

   Kept sticky on larger screens, where it costs a small fraction of the
   viewport and aids orientation. */
@media (max-width: 860px) {
  header.site { position: static; }
  /* With no sticky header to clear, anchors no longer need the large offset. */
  .route-list article, [id] { scroll-margin-top: 16px; }
}

/* ── the home sample video was too small for the space around it ──────────
   Review: "The vertical video is too small for the enormous amount of
   surrounding white space. It reads slightly like an embedded asset dropped
   into a layout rather than a premium showcase of the product."
   It is the only place a visitor can see what we actually make, so it should
   look like the point of the section rather than an afterthought. */
.band.watch video {
  width: 100%; max-width: 420px; height: auto; border-radius: 14px;
  border: 1px solid var(--rule); box-shadow: 0 18px 48px rgba(13,17,22,.14);
  display: block;
}
@media (min-width: 1100px) { .band.watch video { max-width: 480px; } }
@media (max-width: 700px)  { .band.watch video { max-width: 100%; box-shadow: none; } }