/* HoneyChatting marketing site — single shared stylesheet.
   Palette and type scale lifted from the hand-written pages so converted and
   new pages are visually identical. */

/* ---- Brand fonts.
   These pages used to render in the visitor's system font while the homepage
   used Manrope + IBM Plex Mono, which was the main reason a post read as a
   different, plainer site. The files are the same self-hosted woff2 the homepage
   loads (debundle-home.mjs writes them, and /assets/hp is passed through for
   every page), so this costs no new assets. Latin subsets only — the other
   subsets are never needed for this copy.
   Manrope is a variable font: one file covers 400-800. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/hp/9113fe69-ce13-49ab-8735-8e2b45b12c59.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/hp/36524f5b-6801-411c-a973-7960fd8063b1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/hp/8a256d24-6c9f-46b8-be41-727903067f18.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/hp/fcf84bb6-aa1f-404f-9152-dd52cac5c32c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --warm: #f4f0e8;
  --sand: #e4dccb;
  --amber: #9a6207;
  --ink-soft: #3a352d;
  --cream: #fbf8f3;
  --ink: #211c15;
  --muted: #6b6257;
  --honey: #ffbd59;
  --honey-deep: #d97706;
  --line: rgba(33, 28, 21, 0.12);
  --ok: #00a86b;
  --bad: #d32f2f;
  --info: #1976d2;
  --measure: 800px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

article, .wrap { max-width: var(--measure); margin: 0 auto; padding: 48px 24px; }
.wrap--wide { max-width: 1080px; }

h1 { font-size: clamp(32px, 5vw, 42px); line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.02em; }
h2 { font-size: 28px; margin-top: 48px; margin-bottom: 16px; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 20px; margin-top: 32px; margin-bottom: 12px; }
h4 { font-size: 17px; margin-top: 24px; margin-bottom: 8px; }
p { margin-bottom: 16px; }
ul, ol { margin-left: 24px; margin-bottom: 16px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

a { color: var(--honey-deep); text-decoration: none; border-bottom: 1px solid rgba(217, 119, 6, 0.3); }
a:hover { border-bottom-color: var(--honey-deep); }
a.plain, .breadcrumb a, .back-link, .related-list a, .card a { border-bottom: none; }

.lead { font-size: 18px; color: var(--muted); margin-bottom: 32px; line-height: 1.6; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { text-decoration: underline; }
.article-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 32px; font-size: 14px; color: var(--muted); }
/* The name is the one part of the meta line that is a person rather than a
   metadata token, so it carries the ink colour and a heavier weight. */
.article-meta .byline { color: var(--ink); font-weight: 700; }
.back-link { color: var(--muted); margin-top: 32px; display: inline-block; }

/* Callouts */
.cta-box { background: rgba(255, 189, 89, 0.1); border: 1px solid rgba(255, 189, 89, 0.25); border-radius: 12px; padding: 28px; margin: 40px 0; text-align: center; }
.cta-box p:last-of-type { margin-bottom: 0; }
.cta-button { display: inline-block; background: var(--honey); color: var(--ink); padding: 13px 30px; border-radius: 8px; font-weight: 700; border: none; margin-top: 12px; }
.cta-button:hover { border: none; filter: brightness(0.96); }
.warning-box { background: #ffebee; border-left: 4px solid var(--bad); padding: 16px 18px; border-radius: 8px; margin: 24px 0; }
.success-box { background: #e8f5e9; border-left: 4px solid var(--ok); padding: 16px 18px; border-radius: 8px; margin: 24px 0; }
.info-box { background: #f0f7ff; border-left: 4px solid var(--info); padding: 16px 18px; border-radius: 8px; margin: 24px 0; }
.step-box { background: #f9f9f9; padding: 16px 18px; border-radius: 8px; margin: 16px 0; border-left: 4px solid var(--honey); }
.warning-box > :last-child, .success-box > :last-child, .info-box > :last-child, .step-box > :last-child { margin-bottom: 0; }

/* Tables — must scroll inside themselves, never the page */
.table-wrap { overflow-x: auto; margin: 24px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
th { background: #f9f9f9; padding: 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--honey); }
td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tick { color: var(--ok); font-weight: 700; }
.cross { color: var(--bad); font-weight: 700; }
.partial { color: var(--honey-deep); font-weight: 700; }

/* Fact block used by the programmatic templates */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 28px 0; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.fact dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.fact dd { font-size: 15px; font-weight: 600; }

/* Cards, listings, related */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0; list-style: none; }
.card-grid > li { margin: 0; }
.card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; height: 100%; color: var(--ink); }
.card:hover { border-color: rgba(255, 189, 89, 0.6); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }
.card .kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--honey-deep); display: block; margin-bottom: 8px; }

.related-posts { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.related-posts h3 { margin-top: 0; }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; }
.related-list li { margin: 0; }
.related-list a { display: block; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 15px; }
.related-list a:hover { border-color: rgba(255, 189, 89, 0.6); }

/* Site chrome */
/* ---- Sliding logo.
   Ported from the homepage so both surfaces share one implementation: on hover the
   hexagon mark travels the width of the wordmark while rotating a full turn and
   picking up a honey glow, as the wordmark clips away behind it. */
.hc-logo { position: relative; display: block; flex-shrink: 0; height: 44px; width: 262px; overflow: hidden; border-bottom: none; }
.hc-logo-mark { position: absolute; left: 0; top: 5px; width: 34px; height: 34px; transform-origin: center; transition: transform 760ms cubic-bezier(.22,1,.36,1), filter 760ms cubic-bezier(.22,1,.36,1); z-index: 2; }
.hc-logo-word { position: absolute; left: 44px; top: 8px; width: 208px; height: 28px; filter: brightness(0); transition: opacity 420ms ease, transform 620ms cubic-bezier(.22,1,.36,1), clip-path 620ms cubic-bezier(.22,1,.36,1); transition-delay: 90ms; }
.hc-logo:hover .hc-logo-mark { transform: translateX(202px) rotate(360deg); filter: drop-shadow(0 6px 14px rgba(255, 189, 89, .55)); }
.hc-logo:hover .hc-logo-word { opacity: 0; transform: translateX(24px) scaleX(.82); clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .hc-logo-mark, .hc-logo-word { transition: none; }
  .hc-logo:hover .hc-logo-mark { transform: none; filter: none; }
  .hc-logo:hover .hc-logo-word { opacity: 1; transform: none; clip-path: none; }
}

/* ---- Header: the homepage bar, so a post does not read as a different site. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(33, 28, 21, .08);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; min-height: 78px; max-width: 1280px; }
.site-header nav { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 12px; background: var(--warm); font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.site-header nav a { padding: 8px 14px; border-radius: 8px; border-bottom: none; color: inherit; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.site-header nav a:hover { background: #fff; color: var(--ink); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta a { border-bottom: none; white-space: nowrap; font-size: 13.5px; font-weight: 700; height: 44px; display: inline-flex; align-items: center; border-radius: 10px; padding: 0 18px; }
.header-cta .h-quiet { color: var(--ink-soft); padding: 0 12px; }
.header-cta .h-quiet:hover { color: var(--amber); }
.header-cta .h-solid { background: var(--honey); color: var(--ink); font-weight: 800; }
.header-cta .h-solid:hover { filter: brightness(.96); }
.header-cta .h-dark { background: var(--ink); color: var(--cream); }
.header-cta .h-dark:hover { background: var(--ink-soft); }

/* ---- Footer: brand on top, columns, then the legal bar. */
.site-footer { border-top: 1px solid rgba(33, 28, 21, .08); background: var(--cream); margin-top: 72px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { max-width: 1280px; padding: 52px 24px 40px; }
.site-footer a { color: var(--ink-soft); border-bottom: none; }
.site-footer a:hover { color: var(--amber); }
.footer-brand { margin-bottom: 34px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px; }
.footer-cols .footer-col-label { margin: 0 0 13px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-cols li { margin: 0; }
.footer-cols a { font-size: 14.5px; }
/* Icons only, larger — no platform names, no handle text. */
.footer-socials { display: flex; align-items: center; gap: 14px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid var(--sand); color: var(--ink-soft); transition: transform .16s ease, border-color .16s ease, color .16s ease; }
.footer-socials a:hover { transform: translateY(-2px); border-color: var(--honey); color: var(--amber); }
.footer-socials svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.footer-base { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(33, 28, 21, .08); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-base p { margin: 0; font-family: var(--mono); font-size: 12px; color: #8c8375; }
.footer-base a { color: #8c8375; }
.footer-legal { display: flex; align-items: center; gap: 16px; font-size: 13.5px; font-weight: 600; }
.footer-badge { padding: 6px 12px; border-radius: 8px; background: #fff6e6; color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.lang-switch { font-size: 14px; display: flex; gap: 12px; margin-top: 14px; }

/* Screen-reader-only: keeps the icon-only social links named. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  .site-header nav { display: none; }
  .site-header .wrap { min-height: 66px; }
  .hc-logo { width: 210px; height: 38px; }
  .hc-logo-word { width: 166px; left: 40px; top: 6px; }
  .hc-logo:hover .hc-logo-mark { transform: translateX(160px) rotate(360deg); }
}

/* Below ~620px the logo plus three CTAs overflow the viewport — measured 16px of
   horizontal page scroll at 544px. Drop Sign in (a returning user knows where the
   app is) and tighten the rest, keeping the two that convert. */
/* The header CTA row is the widest thing on the page at phone widths: at 390px it
   needed 422px (150 logo + 16 gap + 208 buttons + 48 padding) against 375 available,
   so the page scrolled horizontally by default. Below 480 the logo shrinks, the
   spacing tightens and the longest label swaps for a short one, rather than dropping
   the signup path off mobile entirely. */
.cta-tight { display: none; }


@media (max-width: 620px) {
  .header-cta { gap: 8px; }
  .header-cta .h-quiet { display: none; }
  .header-cta a { font-size: 13px; padding: 0 14px; height: 40px; }
  .hc-logo { width: 150px; height: 34px; }
  .hc-logo-mark { width: 28px; height: 28px; top: 4px; }
  .hc-logo-word { width: 112px; left: 34px; top: 7px; height: 20px; }
  .hc-logo:hover .hc-logo-mark { transform: translateX(106px) rotate(360deg); }
}

@media (max-width: 480px) {
  .cta-full { display: none; }
  .cta-tight { display: inline; }
  .site-header .wrap { padding: 0 16px; gap: 8px; min-height: 66px; }
  .header-cta { gap: 6px; }
  .header-cta a { font-size: 12.5px; padding: 0 11px; height: 38px; }
  .hc-logo { width: 122px; height: 30px; }
  .hc-logo-mark { width: 24px; height: 24px; top: 4px; }
  .hc-logo-word { width: 92px; left: 29px; top: 7px; height: 17px; }
  .hc-logo:hover .hc-logo-mark { transform: translateX(88px) rotate(360deg); }
}

/* FAQ */
.faq { margin: 40px 0; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details[open] summary { margin-bottom: 10px; }

/* Tools / calculators */
.calc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin: 32px 0; }
.calc label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.calc .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px; }
.calc input, .calc select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; background: var(--cream); color: var(--ink); }
.calc output { display: block; font-size: 28px; font-weight: 800; margin-top: 4px; }

img { max-width: 100%; height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  article, .wrap { padding: 32px 18px; }
  h2 { font-size: 24px; margin-top: 36px; }
}

/* ==========================================================================
   Article components — see site/lib/components.mjs
   ========================================================================== */

/* Platform chips. Fill and text colour are inlined per platform from
   platformBrand.json, which computes them for WCAG AA contrast. */
.pchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; vertical-align: middle;
}
/* The platform's real logo, in the variant that contrasts with its own colour. */
.pchip__logo { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.pchip__mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.26);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
}
.pchip__soon {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  opacity: 0.72; padding-left: 3px;
}
.pchip--unknown { background: var(--cream); color: var(--muted); border-color: var(--line); }
.pchip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }

/* Charts */
.chart, .matrix, .stepflow { margin: 32px 0; }
.chart__title, .matrix .chart__title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.chart__scroll { overflow-x: auto; }
.chart__scroll svg { max-width: 100%; height: auto; display: block; }
.chart__note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.chart-label { font-size: 13px; font-weight: 600; fill: #211c15; }
.chart-value { font-size: 13px; font-weight: 700; fill: #211c15; }
.chart-value--muted { font-weight: 500; fill: #6b6257; }
.chart-tick { font-size: 11px; fill: #6b6257; }

/* Capability matrix */
.matrix__table th[scope="row"] { background: transparent; border-bottom: 1px solid var(--line); }
.matrix__table td { text-align: center; font-size: 15px; }
.matrix__table thead th { font-size: 13px; }
.unk { color: var(--muted); }
sup.ev { font-size: 9.5px; font-weight: 700; color: var(--honey-deep); margin-left: 1px; }

/* Fee waterfall keeps a tighter measure than the other charts */
.chart--waterfall .chart__note { font-style: italic; }

/* Step flow */
.stepflow ol { counter-reset: sf; list-style: none; margin: 0; padding: 0; }
.stepflow li {
  counter-increment: sf; position: relative;
  padding: 0 0 14px 42px; margin: 0;
  border-left: 2px solid var(--line); margin-left: 13px;
}
.stepflow li:last-child { border-left-color: transparent; padding-bottom: 0; }
.stepflow li::before {
  content: counter(sf); position: absolute; left: -14px; top: -2px;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--honey); color: var(--ink);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.stepflow__ui {
  display: inline-block; background: var(--cream); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; margin-right: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600;
}

/* Gotchas */
.gotcha {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--honey);
  border-radius: 10px; padding: 16px 18px; margin: 16px 0;
}
.gotcha__title { margin: 0 0 6px; font-size: 16px; }
.gotcha p { margin: 0; }
.gotcha__ev { margin-top: 8px !important; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Evidence markers */
.evidence { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.evidence::before { content: "◆ "; color: var(--honey-deep); }
.evidence--reported::before { content: "◇ "; }

@media (max-width: 640px) {
  .pchip { font-size: 12.5px; }
  .stepflow li { padding-left: 34px; }
}

/* ---- Pricing page: commission calculator and the reveal comparison.
   Lives here rather than inline on the page: Eleventy's `layout:` front matter
   wraps content, it does not do Nunjucks block inheritance, so a {% block head %}
   in a page renders in the BODY. Keeping it in the shared sheet puts it in the
   head where it belongs, and gets it cached. */
  .calc { background:#fff; border:1px solid var(--sand); border-radius:16px; padding:26px; margin:28px 0; }
  .calc__row { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px; }
  .calc__field label, .calc__label-static { display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .calc__field input[type=range] { width:100%; accent-color:var(--honey); }
  .calc__val { display:block; font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); margin-top:6px; }
  .calc__toggle { display:flex; gap:6px; }
  .calc__toggle button { flex:1; padding:11px 10px; border-radius:9px; border:1px solid var(--sand); background:#fff; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink-soft); cursor:pointer; }
  .calc__toggle button.is-on { background:var(--honey); border-color:var(--honey); color:var(--ink); }
  .calc__out { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
  .calc__n { display:block; font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
  .calc__stat--good .calc__n { color:var(--amber); }
  .calc__l { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .calc__note { font-size:12.5px; color:var(--muted); margin:20px 0 0; }
  .rate-card { background:#fff; border:1px solid var(--sand); border-radius:14px; padding:18px 22px; margin:28px 0; }
  .rate-card summary { font-weight:700; cursor:pointer; }
  .rate-card[open] summary { margin-bottom:12px; }

  /* ---- Reveal comparison.
     Two identical grids stacked; the good one is clipped from the right by --pos
     and uncovered as the handle moves. Identical markup keeps the rows aligned so
     the wipe reads as one table changing rather than two tables crossfading. */
  .reveal { margin:28px 0 8px; }
  .reveal__switch { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  .reveal__switch button { padding:9px 15px; border-radius:999px; border:1px solid var(--sand); background:#fff; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted); cursor:pointer; }
  .reveal__switch button.is-on { background:#fdecea; border-color:rgba(211,47,47,.35); color:#b3261e; }

  .reveal__stage { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--sand); }
  .reveal__grid { }
  .reveal__grid--good { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos,0%)) 0 0); }
  .reveal__grid--bad { background:#fdf6f5; }
  .reveal__grid--good { background:linear-gradient(165deg,#fff6e6,#fff); }

  .reveal__head, .reveal__row { display:grid; grid-template-columns:1.4fr 1fr .8fr; align-items:center; gap:14px; padding:14px 20px; }
  .reveal__head { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid rgba(33,28,21,.08); }
  .reveal__row + .reveal__row, .reveal__head + .reveal__row { border-top:1px solid rgba(33,28,21,.06); }
  .reveal__band { font-size:14.5px; font-weight:600; white-space:nowrap; }
  .reveal__pct { font-family:var(--mono); font-size:14px; }
  .reveal__big { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; }

  /* The two sides must be unmistakably different, not just differently worded. */
  .reveal__grid--bad .reveal__pct { color:#b3261e; }
  .reveal__grid--bad .reveal__big { color:#b3261e; }
  .reveal__grid--good .reveal__pct { color:var(--amber); }
  .reveal__grid--good .reveal__big { color:#1f7a4d; }

  .reveal__handle { position:absolute; top:0; bottom:0; left:var(--pos,0%); width:2px; background:var(--honey); pointer-events:none; }
  .reveal__handle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:var(--honey); border:2px solid #fff; box-shadow:0 3px 10px rgba(33,28,21,.25); }

  .reveal__ctl { display:block; margin:18px 0 8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
  #rv-pos { width:100%; accent-color:var(--honey); }
  .reveal__summary { margin:14px 0 0; font-size:15px; font-weight:700; min-height:1.6em; }

  @media (max-width:640px) {
    .reveal__head, .reveal__row { grid-template-columns:1.1fr .9fr .7fr; padding:12px 14px; gap:8px; }
    .reveal__band { font-size:13px; white-space:normal; }
    .reveal__big { font-size:21px; }
  }

/* ---- Download page (/download/).
   Two platform cards. The inline script there marks the one matching the
   visitor's OS with .dl-card--this; both cards are complete and clickable
   without it, so a blocked script only costs the emphasis. */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0 14px; }
.dl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.dl-card--this { border-color: var(--honey); box-shadow: 0 0 0 3px rgba(255, 189, 89, 0.18); }
.dl-card h2 { margin: 0 0 4px; font-size: 20px; }
.dl-card p { color: var(--muted); font-size: 15px; }
.dl-meta { margin: 0 0 14px; font-size: 13px; }
.dl-badge { display: none; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--honey-deep); }
.dl-card--this .dl-badge { display: block; }
.dl-card .cta-button, .dl-soon { margin-top: auto; text-align: center; }
.dl-soon { display: inline-block; padding: 13px 30px; border-radius: 8px; font-weight: 700; background: var(--warm); color: var(--muted); }
.dl-hash { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }