/* ==========================================================================
   BF Gateway: the counter slip.
   One stylesheet, hand-written (edited over FTP, versioned by filemtime).
   World: multi-part slips in dyed stock (one dye per cocoon), white top sheet for reading,
   perforated edges, rectangular stamps. Fonts: Bricolage Grotesque (display) + Atkinson Hyperlegible Next (body).
   Order: 1 tokens . 2 base . 3 layout . 4 header . 5 hero . 6 blocks . 7 partners . 8 tools/forms . 9 footer . 10 motion/print
   ========================================================================== */

/* ---------- 1. tokens ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  /* paper and ink */
  --paper: #FBF9F4;          /* the white top sheet, the reading surface */
  --sheet: #FFFFFF;          /* cards that lie on the paper */
  --paper-2: #F1ECE1;        /* quiet alternate band */
  --ink: #211C19;
  --ink-2: #4A423D;
  --muted: #6B625B;          /* 5.6:1 on paper */
  --line: rgba(33, 28, 25, .16);
  --dark: #2B2522;           /* footer and ink bands */
  /* dyed stock: white text >= 6:1, dye on paper >= 5.7:1, ink on tint >= 12.7:1 */
  --vermilion: #B2380F; --vermilion-tint: #F7DFD4;
  --teal: #0E5E63;      --teal-tint: #D6EAE8;
  --ultramarine: #3437A3; --ultramarine-tint: #DEDFF4;
  --olive: #4F6116;     --olive-tint: #E5EACF;
  --plum: #6A2A63;      --plum-tint: #ECDAEA;
  --dye: var(--vermilion); --tint: var(--vermilion-tint);
  /* exchange convention: only inside odds cells, always with the words Back and Lay */
  --back: #D2E3EE; --lay: #F3D5D2;

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-small: .95rem;
  --fs-body: clamp(1.0625rem, 1.04rem + .11vw, 1.125rem);
  --fs-lead: clamp(1.2rem, 1.14rem + .3vw, 1.4rem);
  --fs-h4: clamp(1.25rem, 1.2rem + .25vw, 1.4rem);
  --fs-h3: clamp(1.5rem, 1.42rem + .4vw, 1.75rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --fs-h1: clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem);

  --gutter: clamp(16px, 4.2vw, 56px);
  --maxw: 1240px;
  --r: 6px;
  --shadow: 0 1px 0 rgba(33,28,25,.06), 0 14px 26px -16px rgba(33,28,25,.38);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 64px;
}
.tone-vermilion { --dye: var(--vermilion); --tint: var(--vermilion-tint); }
.tone-teal { --dye: var(--teal); --tint: var(--teal-tint); }
.tone-ultramarine { --dye: var(--ultramarine); --tint: var(--ultramarine-tint); }
.tone-olive { --dye: var(--olive); --tint: var(--olive-tint); }
.tone-plum { --dye: var(--plum); --tint: var(--plum-tint); }
.tone-ink { --dye: var(--ink); --tint: var(--paper-2); }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); accent-color: var(--dye); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; caret-color: var(--dye); scrollbar-color: var(--dye) var(--paper-2); }
::selection { background: var(--dye); color: #fff; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; word-spacing: .03em; text-wrap: balance; margin: 0; }
h3, h4, .faq__item summary, .steps strong, .partner__name, .callout__label, .situation h3, .ticket__main h2 { word-spacing: .07em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.2; }
p, li, dd { text-wrap: pretty; }
a { color: var(--dye); text-decoration-thickness: .08em; text-underline-offset: .2em; transition: text-decoration-thickness .15s; }
a:hover { text-decoration-thickness: .16em; }
strong { font-weight: 700; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
table { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.band--ink :focus-visible, .band--accent :focus-visible, .site-footer :focus-visible, .hero:not(.hero--home) :focus-visible, .cta :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: .7em 1em; border-radius: 4px; }
.skip:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* ---------- 3. layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { margin-top: 2.2em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.9em; }
.prose > h2 + *, .prose > h3 + * { margin-top: .7em; }
.prose > ul, .prose > ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--r); }
.band { padding-block: clamp(36px, 5vw, 72px); position: relative; }
.band--paper + .band--paper, .band--tint + .band--tint, .answer + .band--paper { padding-top: 0; }
.band > .wrap { display: flow-root; }
.band--paper { background: var(--paper); }
.band--tint { background: var(--tint); }
.band--ink { background: var(--dark); color: var(--paper); }
.band--accent { background: var(--dye); color: #fff; }
.band--ink a, .band--accent a { color: inherit; }
.band--ink .prose, .band--accent .prose { --muted: rgba(255,255,255,.82); }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.split > * { min-width: 0; }
.split { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 5fr 7fr; } .split--even { grid-template-columns: 1fr 1fr; } }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }

/* ticket geometry: notches cut into a slip. Use inside a .slipwrap so the shadow follows the notches. */
.slipwrap { filter: drop-shadow(0 12px 14px rgba(33, 28, 25, .16)); }
.slip {
  --perf: 64%; position: relative; background: var(--sheet); border-radius: var(--r); padding: clamp(18px, 2.4vw, 28px);
  -webkit-mask: radial-gradient(circle 9px at 0 var(--perf), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--perf), #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--perf), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--perf), #0000 97%, #000) right / 51% 100% no-repeat;
}
.slip--dye { background: var(--dye); color: #fff; }
.slip--tint { background: var(--tint); }
.slip--perf { background-image: linear-gradient(90deg, rgba(33,28,25,.34) 50%, transparent 0); background-size: 11px 2px; background-repeat: repeat-x; background-position: 0 var(--perf); }
.slip--dye.slip--perf { background-image: linear-gradient(90deg, rgba(255,255,255,.6) 50%, transparent 0); }
.stamp { display: inline-block; padding: .18em .6em; border: 2px solid currentColor; border-radius: 3px; font: 800 .85rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; transform: rotate(-2deg); color: var(--dye); background: transparent; }
.stamp--fill { background: var(--dye); border-color: var(--dye); color: #fff; }

/* ---------- 4. header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--vermilion); text-decoration: none; }
.logo__mark { width: 44px; height: 32px; }
.logo__mark text { fill: var(--logo-letter, #fff); }
.logo__word { font: 800 1.3rem/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
@media (max-width: 359px) { .site-header .logo__word { display: none; } .situation { grid-template-columns: auto minmax(0, 1fr); } .situation__go { display: none; } }
.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(2px, .6vw, 10px); list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-flex; align-items: center; gap: .3em; padding: .55em .7em; font: 700 .95rem/1 var(--display); color: var(--ink); text-decoration: none; border-radius: 4px; position: relative; cursor: pointer; }
.nav__link::after { content: ""; position: absolute; left: .7em; right: .7em; bottom: .2em; height: 3px; background: var(--dye); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); }
.nav__more { position: relative; }
.nav__more summary { list-style: none; }
.nav__more summary::-webkit-details-marker { display: none; }
.nav__more ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; margin: 0; padding: 8px; list-style: none; background: var(--sheet); border-radius: var(--r); box-shadow: var(--shadow); }
.nav__more ul a { display: block; padding: .6em .8em; border-radius: 4px; color: var(--dye); font: 700 .95rem var(--display); text-decoration: none; }
.nav__more ul a:hover { background: var(--tint); }
.site-header .site-header__cta { display: none; }
.menu { margin-left: auto; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 .9em; font: 700 1rem var(--display); border: 2px solid var(--ink); border-radius: 4px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu .menu__close { display: none; }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline-block; }
.menu__panel { position: fixed; inset: var(--header-h) 0 0 0; overflow: auto; background: var(--paper); padding: 16px var(--gutter) 40px; z-index: 40; }
.menu__list { list-style: none; margin: 0 auto; padding: 0; max-width: 620px; display: grid; gap: 10px; }
.menu__list a { display: grid; gap: .15em; padding: 14px 16px 14px 20px; background: var(--sheet); border-radius: var(--r); text-decoration: none; color: var(--ink); position: relative; box-shadow: 0 1px 0 var(--line); }
.menu__list li[class*="tone-"] strong::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .55em; border-radius: 2px; background: var(--dye); transform: rotate(45deg); vertical-align: .05em; }
.menu__list strong { font: 800 1.15rem var(--display); }
.menu__list span { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 1140px) {
  .nav { display: block; }
  .menu { display: none; }
  .site-header .site-header__cta { display: inline-flex; }
}

/* ---------- 5. hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--dye); color: #fff; overflow: hidden; }
/* phones: a strip of art above the text; desktop: art fills the right side */
.hero__img { position: absolute; inset: 0 0 auto 0; width: 100%; height: 210px; object-fit: cover; object-position: var(--focus, center); z-index: -2; }
.hero__img--art { object-fit: contain; object-position: right center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 0, transparent 110px, var(--dye) 210px); }
.hero__inner { display: grid; gap: 28px; padding-block: 232px clamp(56px, 9vw, 100px); }
.hero__text { max-width: 46rem; }
.hero__title { font-size: var(--fs-h1); font-weight: 800; line-height: .98; letter-spacing: -.035em; margin-top: .35em; text-wrap: balance; }
.hero:not(.hero--home) .hero__title { font-size: clamp(2.05rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.02; }
.hero__lede { font-size: var(--fs-lead); line-height: 1.42; margin: 1rem 0 0; max-width: 40ch; color: rgba(255,255,255,.95); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 1.6rem; }
.hero__actions a:not(.btn) { color: inherit; }
/* scalloped, perforated edge between the hero and the sheet below */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: radial-gradient(circle at 8px 14px, var(--paper) 7px, transparent 7.5px) 0 0 / 16px 14px repeat-x; }
@media (min-width: 860px) {
  .hero__img { inset: 0; height: 100%; object-position: var(--focus, 70% 50%); }
  .hero::before { background: linear-gradient(90deg, var(--dye) 0, var(--dye) 44%, transparent 62%); }
  .hero__inner { padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; min-height: clamp(360px, 38vw, 500px); }
}
.breadcrumb { font-size: var(--fs-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .1em .5em; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; opacity: .55; margin-right: .5em; }
.breadcrumb a { color: inherit; text-decoration: none; opacity: .85; }
.breadcrumb a:hover { text-decoration: underline; opacity: 1; }
@media (max-width: 859px) {
  .hero--legal .hero__img { height: 128px; }
  .hero--legal::before { background: linear-gradient(180deg, transparent 0, transparent 50px, var(--dye) 128px); }
  .hero--legal .hero__inner { padding-top: 150px; }
}
/* home: white top sheet, outline art behind a cascade of three slips */
.hero--home { background: var(--paper); color: var(--ink); }
.hero--home::before { background: none; }
.hero--home .hero__lede { color: var(--ink-2); }
.hero--home::after { background: radial-gradient(circle at 8px 14px, var(--paper-2) 7px, transparent 7.5px) 0 0 / 16px 14px repeat-x; }
.hero--home .hero__img { display: none; }
.hero--home .hero__inner { padding-block: 32px 60px; }
@media (min-width: 860px) {
  .hero--home .hero__img { display: block; object-position: right center; }
  .hero--home .hero__inner { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 84px); }
}
/* tickets: three horizontal slips, main part + perforated stub. Every word visible, every ticket a link. */
.tickets { display: grid; gap: 14px; }
.ticketlink { display: block; color: inherit; text-decoration: none; filter: drop-shadow(0 12px 12px rgba(33, 28, 25, .18)); transition: transform .4s var(--ease); }
.ticket { --stub: 84px; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); min-height: 108px; color: #fff; border-radius: var(--r);
  background-color: var(--dye); background-image: linear-gradient(180deg, rgba(255,255,255,.62) 50%, transparent 0); background-size: 2px 11px; background-repeat: repeat-y; background-position: calc(100% - var(--stub)) 0;
  -webkit-mask: radial-gradient(circle 9px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.ticket__main { padding: 16px 18px 16px 22px; align-self: center; }
.ticket__main h2 { font: 800 1.3rem/1.1 var(--display); letter-spacing: -.02em; }
.ticket__main p { margin: .35em 0 0; font-size: 1rem; line-height: 1.4; }
.ticket__stub { display: grid; place-items: center; }
.ticket__stub .icon { width: 1.7em; height: 1.7em; transition: transform .3s var(--ease); }
.ticketlink:hover .ticket__stub .icon { transform: translateX(5px); }
@media (min-width: 860px) {
  .tickets { gap: 18px; }
  .tickets .ticketlink:nth-child(1) { transform: rotate(-1.6deg) translateX(-14px); }
  .tickets .ticketlink:nth-child(2) { transform: rotate(1.2deg) translateX(12px); }
  .tickets .ticketlink:nth-child(3) { transform: rotate(-.8deg) translateX(-4px); }
  .tickets .ticketlink:hover { transform: rotate(0) translateY(-4px); }
}
/* situation cards: one lead card and two narrower ones, drawn icon, arrow */
.situations { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
.situations > *, .situation > span { min-width: 0; }
.situation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 20px; background: var(--dye); color: #fff; border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.situation:hover { transform: translateY(-3px); }
.situation__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.18); }
.situation__icon .icon { width: 28px; height: 28px; }
.situation h3 { font-size: 1.4rem; line-height: 1.1; }
.situation p { margin: .3em 0 0; font-size: 1rem; line-height: 1.4; }
.situation__go { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; }
@media (min-width: 720px) { .situations { grid-template-columns: 1fr 1fr; } .situation--lead { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .situations { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
  .situation--lead { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 30px; }
  .situation--lead h3 { font-size: clamp(2rem, 1.2rem + 2vw, 2.9rem); line-height: 1; }
  .situation--lead p { font-size: 1.15rem; max-width: 30ch; }
  .situation--lead .situation__go { align-self: flex-end; }
}

/* ---------- 6. content blocks ---------- */
.answer { padding-block: clamp(30px, 4vw, 52px); background: var(--paper); }
.answer__slip { position: relative; max-width: 68ch; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(30px, 3.4vw, 44px) clamp(20px, 3vw, 36px) clamp(20px, 3vw, 32px); }
.answer__slip p { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
/* the stamp label comes from data-label so it stays translatable */
.answer__slip::after { content: attr(data-label); position: absolute; left: clamp(16px, 2.6vw, 30px); top: -14px; padding: .2em .75em; background: var(--dye); color: #fff; border-radius: 3px; font: 800 .8rem/1.3 var(--display); letter-spacing: .07em; text-transform: uppercase; transform: rotate(-2deg); }
.callout { margin-block: 1.6em; padding: 18px 20px 20px; color: var(--ink); background: var(--tint); border: 1px solid color-mix(in srgb, var(--dye) 32%, transparent); border-radius: var(--r); }
.callout__head { display: flex; align-items: center; gap: .55em; color: var(--dye); font: 800 .85rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.callout__body { margin-top: .6em; }
.callout__body > * + * { margin-top: .7em; }
.callout--reality { --dye: var(--ink); --tint: var(--paper-2); }
.callout--example { --dye: var(--teal); --tint: var(--teal-tint); }
.callout--watch { --dye: var(--vermilion); --tint: var(--vermilion-tint); }
.callout--tip { --dye: var(--olive); --tint: var(--olive-tint); }
.callout--verdict { --dye: var(--ultramarine); --tint: var(--ultramarine-tint); }
.callout a { color: var(--dye); }
.callout--margin, .opinion--margin { }
.opinion { margin: 2em 0; padding: 0; font: 700 clamp(1.4rem, 1.15rem + 1.3vw, 2.1rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--dye); max-width: 32ch; }
.opinion p { margin: 0; }
.steps { list-style: none; counter-reset: s; padding: 0 !important; margin: 1.6em 0; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 3.6rem; margin: 0 0 1.5rem; min-height: 2.6rem; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 6px; background: var(--dye); color: #fff; font: 800 1.15rem var(--display); }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1.3rem; top: 2.85rem; bottom: -1.1rem; border-left: 2px dashed var(--line); }
.steps strong { display: block; font: 800 1.2rem/1.25 var(--display); margin-bottom: .15em; }
.steps p { margin: 0; }
.tablewrap { position: relative; overflow-x: auto; margin-block: 1.6em; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .97rem; min-width: 520px; }
.table caption { text-align: left; padding: 14px 16px 10px; font: 800 1.05rem var(--display); }
.table th, .table td { padding: .75em .9em; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { background: var(--tint); font: 800 .85rem/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; border-top: 0; }
.table tbody th { font-weight: 700; }
.table--matrix th[scope="row"], .table--ranking th[scope="row"] { position: sticky; left: 0; background: var(--sheet); z-index: 1; }
.table .back { background: var(--back); } .table .lay { background: var(--lay); }
.cov { text-align: center; }
.cov--yes { color: var(--dye); }
.cov--yes .icon { width: 1.3em; height: 1.3em; }
.cov__tool { display: block; font-size: .85rem; line-height: 1.2; color: var(--ink-2); margin-top: .15em; }
.cov--no { color: var(--muted); opacity: .6; }
.proscons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-block: 1.6em; }
.proscons__col { padding: 20px 22px; border-radius: var(--r); background: var(--tint); }
.proscons__col--pro { --tint: var(--teal-tint); --dye: var(--teal); }
.proscons__col--con { --tint: var(--vermilion-tint); --dye: var(--vermilion); }
.proscons h3 { font-size: 1.15rem; color: var(--dye); margin-bottom: .5em; }
.proscons ul { margin: 0; padding-left: 1.1em; }
.statline { margin: 1.2em 0; font: 700 clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem)/1.22 var(--display); letter-spacing: -.02em; word-spacing: .06em; max-width: 34ch; }
.statline strong { color: var(--dye); font-weight: 800; font-variant-numeric: tabular-nums; }
.band--ink .statline strong, .band--accent .statline strong { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.checklist { list-style: none; padding: 0 !important; margin: 1.4em 0; display: grid; gap: 8px; }
.checklist label { display: flex; align-items: center; gap: .8em; min-height: 48px; padding: 8px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.checklist input { width: 22px; height: 22px; }
.faq { margin-block: 2.2em; }
.faq__title { font-size: var(--fs-h3); margin-bottom: .7em; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 18px 4px; font: 700 1.15rem/1.3 var(--display); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 1.5em; height: 1.5em; color: var(--dye); transition: transform .3s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item[open] { background: linear-gradient(var(--tint), var(--tint)) no-repeat; background-size: 100% 0; }
.faq__a { padding: 0 4px 22px; max-width: 64ch; }
.faq__a > * + * { margin-top: .8em; }
.chart { margin-block: 2em; padding: 20px 20px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.chart__title { font: 800 1.15rem/1.25 var(--display); margin-bottom: 1em; }
.chart__note { font-size: var(--fs-small); color: var(--muted); margin: .9em 0 0; }
.chart--matrix { padding: 0; overflow: hidden; }
.chart--matrix .chart__title { padding: 18px 20px 0; margin: 0; }
.chart--matrix .tablewrap { margin: 12px 0 0; border: 0; border-radius: 0; }
.chart--matrix .table caption { display: none; }
.chart--matrix .chart__note { padding: 0 20px 16px; }
.bars { display: grid; gap: 14px; }
.bars__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.bars__label { grid-column: 1 / -1; font-weight: 700; }
.bars__track { height: 22px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.bars__fill { display: block; height: 100%; width: var(--w); background: var(--dye); border-radius: 3px; transform-origin: left; }
.bars__val { font: 800 1.1rem var(--display); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
@media (min-width: 640px) { .bars__row { grid-template-columns: minmax(7rem, 12rem) 1fr auto; } .bars__label { grid-column: auto; } }
.chart__data { margin-top: .9em; font-size: var(--fs-small); }
.chart__data .table { min-width: 0; }
.chart__data table { margin-top: .6em; }
.chart__data summary { cursor: pointer; color: var(--dye); font-weight: 700; }
.visual-band { margin: clamp(28px, 5vw, 56px) 0; }
.visual-band img { display: block; width: 100%; aspect-ratio: 16 / 8; max-height: 70vh; object-fit: cover; border-radius: var(--r); background: var(--tint); }
.visual-band figcaption { margin-top: .6em; font-size: var(--fs-small); color: var(--muted); }
.related { margin-block: 2.4em 0; }
.related__title { font-size: var(--fs-h4); margin-bottom: .7em; }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.related__list a { display: flex; gap: .7em; align-items: flex-start; height: 100%; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3; transition: background .2s, transform .2s var(--ease); }
.related__list a:hover { background: var(--tint); transform: translateY(-2px); }
.related__list .icon { color: var(--dye); margin-top: .1em; }

.wrap--rail, .band > .wrap.wrap--rail { display: grid; gap: 32px; }
.rail { display: grid; gap: 16px; align-content: start; }
.keyfacts { background: var(--dye); color: #fff; border-radius: var(--r); padding: 22px 22px 8px; box-shadow: var(--shadow); }
.keyfacts h2 { font-size: 1.3rem; }
.keyfacts dl { margin: .8em 0 0; }
.keyfacts dt { font: 800 .85rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; opacity: .9; }
.keyfacts dd { margin: .2em 0 1em; font-size: 1.02rem; line-height: 1.4; }
@media (min-width: 1100px) {
  .wrap--rail { grid-template-columns: minmax(0, 68ch) minmax(280px, 340px); justify-content: space-between; align-items: start; }
  .rail { position: sticky; top: calc(var(--header-h) + 24px); }
}
.bigline { margin: 0; max-width: 20ch; font: 800 clamp(2.1rem, 1.1rem + 4.8vw, 4.8rem)/1 var(--display); letter-spacing: -.035em; word-spacing: .04em; text-wrap: balance; }
.verdict { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-block: 2em; }
.verdict__item { position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 34px 22px 20px; box-shadow: var(--shadow); }
.verdict__item::before { content: attr(data-label); position: absolute; left: 18px; top: -14px; padding: .2em .75em; background: var(--dye); color: #fff; border-radius: 3px; font: 800 .85rem/1.3 var(--display); letter-spacing: .07em; text-transform: uppercase; transform: rotate(-2deg); }
.verdict__item--best { --dye: var(--teal); }
.verdict__item--not { --dye: var(--vermilion); }
.verdict__item p { margin: 0; }
.tones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-block: 1.6em; }
.tones__item { padding: 18px 16px; border-radius: var(--r); background: var(--dye); color: #fff; font: 800 1.05rem/1.2 var(--display); }
.tones__item span { display: block; margin-top: .3em; font: 400 .95rem/1.3 var(--body); opacity: .92; }

/* margin notes: opt-in callouts and quotes move into the empty right column on wide screens (not beside a rail) */
@media (min-width: 1240px) {
  .wrap:not(.wrap--rail) .callout--margin, .wrap:not(.wrap--rail) .opinion--margin { float: right; clear: right; width: 320px; max-width: 26vw; margin: .3em -376px 1.4em 1.5em; }
  .wrap:not(.wrap--rail) .opinion--margin { font-size: 1.5rem; margin-top: 0; }
}

/* cards: children of a cocoon (hubs) and cocoons (home). Coloured stock, one arrow stub. */
.cards { margin-block: 1.8em; }
.cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.cardlink { display: flex; flex-direction: column; gap: .5em; height: 100%; min-height: 150px; padding: 20px 20px 16px; background: var(--dye); color: #fff; border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.cardlink:hover { transform: translateY(-3px); }
.cardlink h3 { font-size: 1.3rem; line-height: 1.12; }
.cardlink p { margin: 0; flex: 1; font-size: 1rem; line-height: 1.4; opacity: .96; }
.cardlink__go { align-self: flex-end; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; }

/* ---------- 7. partners, calls to action ---------- */
.btn { --b: var(--dye); display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .7em 1.25em; font: 800 1rem/1.1 var(--display); letter-spacing: -.01em; text-decoration: none; text-align: center; color: var(--b); background: transparent; border: 2px solid var(--b); border-radius: 4px; cursor: pointer; transition: color .25s, background-size .35s var(--ease), transform .2s var(--ease); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0 100%; }
.btn:hover { background-size: 100% 100%; color: #fff; border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary { color: #fff; background-color: var(--b); background-image: linear-gradient(var(--ink), var(--ink)); }
.btn--primary:hover { border-color: var(--ink); }
.btn--lg { min-height: 56px; padding-inline: 1.6em; font-size: 1.1rem; }
.btn--sm { min-height: 44px; padding: .5em 1em; font-size: .95rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.hero:not(.hero--home) .btn--primary, .band--accent .btn--primary, .cta .btn--primary { --b: #fff; color: var(--dye); }
.hero:not(.hero--home) .btn--primary:hover, .band--accent .btn--primary:hover, .cta .btn--primary:hover { color: #fff; border-color: #fff; }
.partners { margin-block: 2.4em; }
.partners__title { font-size: var(--fs-h3); margin-bottom: .8em; }
.partners__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: p; }
.partner { counter-increment: p; position: relative; display: grid; gap: 14px; padding: 20px 20px 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); grid-template-columns: 1fr; }
.partner::before { content: counter(p); position: absolute; left: 20px; top: -13px; font: 800 .85rem var(--display); color: var(--dye); background: var(--sheet); border: 2px solid currentColor; border-radius: 3px; padding: .05em .55em; transform: rotate(-2deg); }
.partner__logo { display: flex; align-items: center; min-height: 56px; max-width: 220px; }
.partner .btn { white-space: nowrap; }
.partner__logo img { display: block; max-height: 44px; width: auto; object-fit: contain; }
.partner__name { font-size: 1.35rem; }
.partner__tool { display: flex; gap: .5em; align-items: center; margin: .25em 0 0; font-weight: 700; color: var(--dye); font-size: .97rem; }
.partner__tool em { font-weight: 400; color: var(--muted); }
.partner__body { padding-right: 24px; }
.partner__pitch { margin: .6em 0 0; color: var(--ink-2); max-width: 54ch; }
.partner__note { margin: .5em 0 0; font-size: .95rem; color: var(--muted); }
.partner .btn { margin: 4px -20px 0; border-radius: 0 0 var(--r) var(--r); border-width: 0; min-height: 56px; background-color: var(--dye); border-top: 2px dashed rgba(255,255,255,.55); }
.partners--compact .partner { grid-template-columns: auto 1fr; align-items: center; padding: 14px 16px; }
.partners--compact .partner .btn { grid-column: 1 / -1; margin: 6px 0 0; border-radius: 4px; border: 2px solid var(--dye); }
@media (min-width: 900px) {
  .partners--full .partner { grid-template-columns: 200px 1fr 230px; align-items: stretch; padding: 22px 0 22px 24px; gap: 24px; }
  .partners--full .partner__logo { align-self: center; }
  .partners--full .partner .btn { margin: -22px 0 -22px 0; border-radius: 0 var(--r) var(--r) 0; border-top: 0; border-left: 2px dashed rgba(255,255,255,.55); min-height: 100%; }
}
.cta { background: var(--dye); color: #fff; padding-block: clamp(28px, 4vw, 44px); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.cta__line { margin: 0; font: 800 clamp(1.4rem, 1.1rem + 1.4vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; flex: 1 1 100%; max-width: 24ch; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.cta__alt { color: #fff; font-weight: 700; }
.cta--final { padding-block: clamp(48px, 7vw, 88px); }
.cta--final .cta__line { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: 1; }
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgba(33,28,25,.4); transform: translateY(0); transition: transform .35s var(--ease); }
.stickybar[hidden] { display: block; transform: translateY(110%); visibility: hidden; pointer-events: none; }
.stickybar .btn { width: 100%; }
@media (min-width: 720px) { .stickybar { display: none !important; } }
@media (max-width: 719px) { .site-footer { padding-bottom: calc(28px + 76px); } }

/* ---------- 8. tools and forms ---------- */
.tool { margin-block: 2em; padding: clamp(18px, 3vw, 32px); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.tool noscript p { margin: 0; padding: 12px 14px; background: var(--vermilion-tint); border-radius: 4px; }
.field { display: grid; gap: .35em; margin-bottom: 1em; }
.field label, .field legend { font-weight: 700; }
.field .hint { font-size: var(--fs-small); color: var(--muted); }
input[type="text"], input[type="number"], input[type="email"], select, textarea { width: 100%; min-height: 48px; padding: .6em .8em; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--dye); outline-offset: 2px; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dye); }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border: 0; padding: 0; margin: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: block; padding: 12px 14px; min-height: 48px; background: var(--paper); border: 2px solid var(--line); border-radius: 4px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.choice input:checked + span { border-color: var(--dye); background: var(--tint); }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.tool__result { margin-top: 1.4em; }
.result-slip { background: var(--tint); border-radius: var(--r); padding: 18px 20px; }
.result-slip h3 { color: var(--dye); font-size: 1.2rem; margin-bottom: .4em; }
.result-figure { font: 800 clamp(2rem, 1.5rem + 2.5vw, 3rem)/1 var(--display); letter-spacing: -.03em; color: var(--dye); font-variant-numeric: tabular-nums; }
.tool__error { color: var(--vermilion); font-weight: 700; margin-top: .6em; }
.tool__empty { color: var(--muted); }

/* ---------- 9. footer ---------- */
.site-footer { margin-top: 0; background: var(--dark); color: var(--paper); padding-block: clamp(40px, 6vw, 72px) 28px; }
.site-footer a { color: inherit; }
.site-footer .logo { color: var(--paper); --logo-letter: var(--dark); }
.site-footer .logo__word { color: var(--paper); }
.site-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brand p { max-width: 34ch; color: rgba(251,249,244,.82); }
.site-footer__mail a { display: inline-flex; gap: .5em; align-items: center; font-weight: 700; }
.site-footer__col h2 { font: 800 .85rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: rgba(251,249,244,.72); margin-bottom: .8em; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.site-footer__legal { margin-top: 36px; padding-top: 22px; border-top: 1px dashed rgba(251,249,244,.35); font-size: .95rem; color: rgba(251,249,244,.88); }
.site-footer__legal p { max-width: 90ch; margin: 0 0 .6em; }
.ext { background: var(--paper); }
.ext__box { max-width: 34rem; margin: 18vh auto 0; padding: 0 var(--gutter); }
.ext__title { font: 800 2rem var(--display); }
.ext__small { color: var(--muted); font-size: var(--fs-small); }

/* ---------- 10. motion and print ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(16px); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js [data-reveal="stack"] .ticketlink { opacity: 0; translate: 0 22px; }
  html.js [data-reveal="stack"].is-in .ticketlink { opacity: 1; translate: 0 0; transition: opacity .55s var(--ease), translate .8s var(--ease), transform .4s var(--ease); }
  html.js [data-reveal="stack"].is-in .ticketlink:nth-child(2) { transition-delay: .12s, .12s, 0s; }
  html.js [data-reveal="stack"].is-in .ticketlink:nth-child(3) { transition-delay: .24s, .24s, 0s; }
  html.js .bars__fill { transform: scaleX(0); }
  html.js .is-in .bars__fill, html.js .chart.is-in .bars__fill { transform: scaleX(1); transition: transform .9s var(--ease); }
}
@media print {
  .site-header, .site-footer, .stickybar, .cta, .partners, .menu { display: none !important; }
  body { background: #fff; }
  .hero { background: #fff; color: #000; }
  .hero__img { display: none; }
}