/* BitMap Media theme layer (10-11-2026). Loads after site.css on every converted page and re-skins it
   in the home page's "Answer" look: cool paper and ink, Instrument Sans + JetBrains Mono, 4px radius,
   red only for actions and markers, numbered question headings and a Sources rail. Content is untouched. */
[hidden]{display:none!important}
:root{
  --paper:#F2F3F1;--paper-2:#E9EBE7;--surface:#FFFFFF;--field:#FFFFFF;
  --ink:#121316;--ink-2:#4A4E56;--hair:#D3D6D1;--hair-strong:#121316;
  --accent:#E11D48;--accent-text:#BE123C;--accent-deep:#BE123C;--on-accent:#FFFFFF;--ok:#15803D;
  --f:"Instrument Sans","Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --fm:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
  /* site.css names mapped onto the theme */
  --navy:var(--ink);--navy2:var(--ink-2);--coral:var(--accent);--coral-dk:var(--accent-text);
  --cream:var(--paper);--line:var(--hair);--ink2:var(--ink-2);--muted:var(--ink-2);
  --r:4px;--h:var(--f);--b:var(--f);--maxw:1280px
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E0F12;--paper-2:#15171B;--surface:#17191D;--field:#17191D;
  --ink:#ECEDEA;--ink-2:#A5A9B0;--hair:#2B2E34;--hair-strong:#ECEDEA;
  --accent-text:#FF7E96;--ok:#4ADE80;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E0F12;--paper-2:#15171B;--surface:#17191D;--field:#17191D;
  --ink:#ECEDEA;--ink-2:#A5A9B0;--hair:#2B2E34;--hair-strong:#ECEDEA;
  --accent-text:#FF7E96;--ok:#4ADE80;color-scheme:dark}

html{scroll-behavior:smooth;scroll-padding-top:104px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--accent-text)}
img{border-radius:4px}
h1,h2,h3,h4{font-family:var(--f);font-weight:600;letter-spacing:normal;color:var(--ink);text-wrap:balance;font-stretch:90%}
h4{color:var(--ink)}
p,li,dd,small{text-wrap:pretty}
.lead{color:var(--ink-2);font-size:1.15rem;max-width:58ch}
.muted{color:var(--ink-2)}
.eyebrow,.kt-h,.rel h3,.soft,.calc-svc,.formula b,.snip .lbl,.tag,.rpv-pill,.pill,.legal-hero .eyebrow,.sc-head{letter-spacing:normal}
.eyebrow{font:500 12px/1.2 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.price,.calc-total,.rpv-big,.rpv-key b,.formula span,.sn,.rail .n,.m-src .n{font-variant-numeric:tabular-nums}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--hair)}
.nav .in{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw);height:84px;display:flex;align-items:center;gap:24px}
.home{display:flex;align-items:center;min-height:44px;flex:none;text-decoration:none}
.nav .logo,.foot .logo{display:block;overflow:visible}
.logo .wm{fill:currentColor}
.logo .px,.logo .md{fill:var(--accent)}
/* 10-11-2026: MEDIA lettering enlarged and lightened so it reads on black */
.logo .md{transform:matrix(1.9,0,0,1.9,-249.069,-294.372);fill:#FF5C7A}

.nav .logo{width:184px;color:var(--ink)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:14.5px}
.nav ul a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color .15s ease}
.nav ul a[aria-current]{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.nav ul a:hover{color:var(--ink)}}
.menu-btn{display:none;margin-left:auto;min-height:44px;min-width:44px;padding:0 10px;background:transparent;border:1px solid var(--hair);border-radius:4px;color:var(--ink);font:500 13px var(--fm);cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .nav .logo .px{animation:pxin .7s var(--ease) both;animation-delay:calc(var(--i) * 28ms + 120ms)}
  .home:hover .logo .px{animation:pxin2 .5s var(--ease) both;animation-delay:calc(var(--i) * 16ms)}
  @keyframes pxin{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
  @keyframes pxin2{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font:600 15px/1.2 var(--f);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease),background-color .2s ease}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:var(--ink)}
.btn-coral{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-navy{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hair)}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn-coral:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
  .btn-navy:hover{background:var(--ink-2);border-color:var(--ink-2)}
  .btn-ghost:hover{background:var(--surface);border-color:var(--ink)}
}
.nav .btn{display:inline-block;line-height:42px;flex:none}
.link{color:var(--accent-text)}

/* page frame */
.frame{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw);display:grid;grid-template-columns:minmax(0,1fr) 248px;column-gap:clamp(32px,5vw,80px);align-items:start}
.frame.one{grid-template-columns:minmax(0,1fr)}
.frame > .body{min-width:0}
.side{min-width:0;padding-top:clamp(40px,6vw,72px);align-self:stretch}
.side > .burst{margin-bottom:28px}
.burst{display:block;width:100%;max-width:230px;margin-left:auto;overflow:visible}
.burst rect{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .burst.fly rect{animation:fly 1s var(--ease) both;animation-delay:calc(var(--i) * 34ms + 260ms)}
  @keyframes fly{from{opacity:0;transform:translateX(-30px) scale(.9)}to{opacity:1;transform:none}}
}
.lab{font:500 12px/1 var(--fm);text-transform:uppercase;color:var(--ink-2)}
.rail{min-width:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 108px);display:grid;gap:14px;padding-bottom:40px}
.rail ol,.m-src ol{list-style:none;margin:0;padding:0;display:grid}
.rail li,.m-src li{margin:0}
.rail li a,.m-src li a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline;padding:6px 0;color:var(--ink-2);text-decoration:none;font-size:13.5px;line-height:1.35;transition:color .15s ease}
.rail li a .n,.m-src li a .n{font:500 11.5px/1 var(--fm);color:var(--accent-text);border:1px solid var(--hair);border-radius:3px;padding:4px 0 3px;text-align:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.rail li a.on{color:var(--ink)}
.rail li a.on .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.rail li a:hover{color:var(--ink)}}
.rail .btn{justify-self:start;margin-top:6px;font-size:14px}
.m-src{display:none}

/* content: flatten the old full-width bands into one answer column */
.body .wrap{max-width:none;margin:0;padding-left:0;padding-right:0}
.body section.wrap,.body .band,.body .kt{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(36px,5vw,60px);background:transparent;border-top:1px solid var(--hair);color:inherit}
.body > section:first-child,.body > .ans-first{border-top:0}
.body .band.navy,.body .band.cta{background:transparent;color:var(--ink)}
.band.navy h2,.band.navy h3,.band.cta h2{color:var(--ink)}
.band.navy a{color:var(--accent-text)}
.band.cta .score-form label{color:var(--ink)}
.band .incl-grid>div,.band .tool{background:var(--surface)}
.band.navy .door{background:var(--surface);border-color:var(--hair);color:var(--ink)}
.band.navy .door h3{color:var(--ink)}.band.navy .door p{color:var(--ink-2)}
.promises dt{color:var(--ink);font-family:var(--f)}.promises dd{color:var(--ink-2)}
.timeline li{border-top-color:var(--hair)}
.timeline strong,.timeline.dark strong{color:var(--ink);font:500 12px/1.5 var(--fm);text-transform:uppercase}

/* hero */
.body .hero-sub{padding-top:clamp(40px,6vw,72px);gap:clamp(28px,4vw,56px)}
.body .hero-sub h1{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.05;margin-bottom:.45em}
.body .hero-sub.one h1{font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.04}
.ans-head{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--hair);margin:0 0 22px}
.ans-head .mark{width:22px;height:14px;display:block;flex:none}
.ans-head .mark rect{fill:var(--accent)}

/* numbered question headings */
.body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15}
.body h2[id]{scroll-margin-top:104px}
.body h2.qn{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:64px;background:var(--field);border:1.5px solid var(--hair-strong);border-radius:4px;font-size:clamp(1.22rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 24px}
.body h2.qn::before{content:attr(data-n);content:attr(data-n) / "";flex:none;font:500 12px/1 var(--fm);color:var(--accent-text);border:1px solid currentColor;border-radius:3px;padding:5px 6px 4px}
.body h2.qn::after{content:"";flex:none;width:9px;height:1.6em;background:var(--accent);margin-left:auto}

/* cards, lists, tables */
.incl-grid>div,.plan,.q,.author,.eight li,.tool,.tapp .pane,.calc,.rpv,.hero-card,.door,.cmp{background:var(--surface);border-color:var(--hair);border-radius:4px;box-shadow:none}
.plan.pop{border:2px solid var(--accent)}
.tag{font:500 11px/1 var(--fm);text-transform:uppercase;border-radius:3px}
.price{font-family:var(--f);font-weight:600;color:var(--ink)}.price span{color:var(--ink-2);font-family:var(--f)}
.eight li::before{background:var(--ink);color:var(--paper);font:500 12px var(--fm);border-radius:3px}
.eight li.ok::before{background:var(--ok);color:#0E0F12}.eight li.no::before{background:var(--accent);color:#fff}
.terms li::before{border-radius:3px;font:500 12px var(--fm)}
.ticks li::before{color:var(--ok)}
.ticks.x li::before{color:var(--accent-text)}
.cmp{border:1px solid var(--hair)}
.cmp th,.cmp td{border-bottom-color:var(--hair)}
.cmp thead th{background:var(--paper-2);color:var(--ink);font:500 12px/1.4 var(--fm);text-transform:uppercase}
.cmp tbody th{color:var(--ink)}
.tscroll{border-radius:4px}
.q button{color:var(--ink);font-family:var(--f)}
.q button::after{color:var(--accent-text)}
.q .a{color:var(--ink-2)}
.proof-list li{border-left-color:var(--accent)}
.sc-head{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}.sc-head strong{color:var(--accent-text)}
.dial b{background:var(--surface);color:var(--ink)}
.door{color:var(--ink)}.door p{color:var(--ink-2)}
.bmm-figure img{border-color:var(--hair);border-radius:4px}
.serp-example figcaption{color:var(--ink-2)}

/* key takeaways */
.body .kt{background:transparent}
.kt-h{font:500 12px/1 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.kt-list li{color:var(--ink-2);border-left-color:var(--hair)}
.kt-list strong{color:var(--ink)}

/* tools and forms */
.tool p{color:var(--ink-2)}
a.tool:hover{border-color:var(--accent)}
.soft{background:var(--paper-2);border-color:var(--hair);color:var(--ink-2);font:500 11px/1 var(--fm)}
.fld label{color:var(--ink-2)}
.fld .hint,.counter{color:var(--ink-2)}
.counter.over{color:var(--accent-text)}
.fld input,.fld select,.fld textarea,.row2 input{background:var(--field);color:var(--ink);border-color:var(--hair);border-radius:4px}
.fld textarea{font-family:var(--fm)}
.row2 .x{background:var(--field);color:var(--ink-2);border-color:var(--hair);border-radius:4px}
.score-form input,.score-form.big input[type=email]{background:var(--field);color:var(--ink);border:1.5px solid var(--hair-strong);border-radius:4px}
.score-form input::placeholder{color:var(--ink-2)}
.score-form small{color:var(--ink-2)}
.rep li{border-bottom-color:var(--hair)}
.rep code{background:var(--paper-2);color:var(--ink)}
.snip{background:#fff;border-color:var(--hair);border-radius:4px}
.tnote{background:var(--paper-2);border-color:var(--hair);border-radius:4px}
.tnote p{color:var(--ink-2)}
.s-again{color:var(--ink-2)}
.out{border-radius:4px}
.rpv-brand,.rpv-top h3,.rpv-big,.rpv-name,.rpv-q h4,.rpv-key b{color:var(--ink);font-family:var(--f)}
.rpv-who,.rpv-sub,.rpv-key,.rpv-rows p{color:var(--ink-2)}
.rpv-who span,.rpv-sub span,.rpv-big span,.rpv .sc-note{color:var(--ink-2)}
.rpv-glance{background:var(--paper-2);border-color:var(--hair);border-radius:4px}
.rpv-bar{background:var(--paper-2);border-radius:3px}
.rpv-rows li{border-bottom-color:var(--hair)}
.rpv-pill{font-family:var(--fm)}
.calc-tab{background:var(--field);color:var(--ink-2);border-color:var(--hair);border-radius:4px}
.calc-tab:hover{border-color:var(--ink)}
.calc-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.calc-ctl label{color:var(--ink-2)}
.calc-step{background:var(--paper-2);color:var(--ink);border-color:var(--hair)}
.calc-step:hover{background:var(--hair)}
#calc-pages{background:var(--field);color:var(--ink);border-color:var(--hair)}
.calc-out,.formula li{background:var(--paper-2);border-radius:4px}
.calc-total,.formula span{color:var(--ink);font-family:var(--f)}
.calc-sum,.calc-note,.calc-avg,.calc-hint{color:var(--ink-2)}
.calc-note{border-top-color:var(--hair)}
.calc-over{background:var(--surface);color:var(--ink-2)}
.calc-svc{font-family:var(--fm);color:var(--accent-text)}
.formula b{color:var(--ink-2);font-family:var(--fm)}

/* legal pages */
.legal-hero{background:transparent;color:var(--ink);padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--hair)}
.legal-hero h1{color:var(--ink);font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.05}
.legal-hero .eyebrow{color:var(--accent-text)}
.legal-hero .lead,.legal-hero .muted{color:var(--ink-2)}
.legal-toc strong{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}
.legal-toc a{color:var(--ink-2)}
.legal-toc a:hover{color:var(--ink)}
.body .legal a{color:var(--accent-text)}

/* related pages */
.body .rel{background:transparent;border-top:1px solid var(--hair);padding:clamp(36px,5vw,52px) 0 clamp(28px,4vw,40px)}
.rel h2{font-size:1.3rem}
.rel h3{font:500 12px/1.3 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.rel a{color:var(--ink-2);text-decoration-color:var(--hair)}
.rel a:hover{color:var(--ink);text-decoration-color:var(--accent)}

/* footer */
footer.foot{color:var(--ink-2);font-size:13px;background:var(--paper-2);padding-block:24px 28px;margin-top:clamp(40px,6vw,72px)}
.foot .wrap{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw)}
.foot h4{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink);margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0;display:grid}
.foot a{text-decoration:none;color:var(--ink-2);line-height:2.2}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--hair);padding-top:24px}
.foot .logo{width:184px;margin-bottom:14px;color:var(--ink)}
.foot p,.foot address{max-width:40ch;line-height:1.6;margin:0}
.foot address{font-style:normal;margin-top:12px;display:grid}
.foot .legal{max-width:none;margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px}
.foot .legal nav{display:flex;gap:14px;flex-wrap:wrap}
.foot .legal a{line-height:1.6}

/* responsive */
@media (max-width:1180px){.nav ul{gap:16px;font-size:14px}}
@media (max-width:1080px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .m-src{display:block;border:1px solid var(--hair);border-radius:4px;background:var(--surface);margin:0 0 8px}
  .m-src summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}
  .m-src summary::-webkit-details-marker{display:none}
  .m-src summary::after{content:"+";font-size:18px;color:var(--accent-text)}
  .m-src[open] summary::after{content:"\2212"}
  .m-src ol{padding:0 16px 10px}
  .m-src li a{min-height:44px;align-items:center}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1 / -1}
}
@media (max-width:980px){
  .nav ul{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .nav .btn{margin-left:0}
  .nav.open ul{display:grid;position:absolute;top:84px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:8px max(16px,3vw) 18px;gap:0;font-size:17px}
  .nav.open ul a{display:flex;color:var(--ink)}
}
@media (max-width:860px){
  .foot a,.foot .legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;line-height:1.25}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .nav .in{gap:10px;height:72px}
  .nav .logo{width:132px}
  .nav.open ul{top:72px}
  .nav .btn{padding:0 12px;font-size:14px}
  .body .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
  .body h2.qn{padding:12px 14px;gap:10px}
}
@media (max-width:520px){.nav .btn .long{display:none}}
@media (max-width:360px){.nav .logo{width:108px}.nav .btn{padding:0 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 10-11-2026: section numbers bold and the same size as the section heading */
.body h2.qn::before{font-family:inherit;font-size:1em;font-weight:700;border-width:2px;border-radius:4px;padding:.14em .3em .08em;min-width:1.4em;text-align:center;line-height:1}

/* 10-11-2026: site runs dark by default on a black background */
:root[data-theme="dark"]{--paper:#000000;--paper-2:#0D0E10;--surface:#121316;--field:#121316;--hair:#2A2D33;--tile-hair:#2A2D33}

/* 10-11-2026 dark: panels and fields that site.css paints white */
:root[data-theme="dark"] .score-form input,:root[data-theme="dark"] .score-form.big input[type=email],:root[data-theme="dark"] .dial b,:root[data-theme="dark"] .tool,:root[data-theme="dark"] .tapp .pane,:root[data-theme="dark"] .fld input,:root[data-theme="dark"] .fld select,:root[data-theme="dark"] .fld textarea,:root[data-theme="dark"] .btn-ghost,:root[data-theme="dark"] .row2 input,:root[data-theme="dark"] .row2 .x,:root[data-theme="dark"] .calc-tab,:root[data-theme="dark"] .calc-over,:root[data-theme="dark"] .rpv{background:var(--field);color:var(--ink);border-color:var(--hair)}
:root[data-theme="dark"] .rep code,:root[data-theme="dark"] .s-out.busy,:root[data-theme="dark"] .rpv-bar{background:var(--paper-2);color:var(--ink)}
:root[data-theme="dark"] .pill.warn,:root[data-theme="dark"] .rpv-pill.a{background:#3A2A06;color:#FCD34D}
:root[data-theme="dark"] .pill.bad,:root[data-theme="dark"] .rpv-pill.r,:root[data-theme="dark"] .s-out.bad{background:#3B0A16;color:#FF9AAE}
:root[data-theme="dark"] .s-out.good{background:#062A14;color:#86EFAC}
:root[data-theme="dark"] .fld input::placeholder,:root[data-theme="dark"] .fld textarea::placeholder,:root[data-theme="dark"] .score-form input::placeholder,:root[data-theme="dark"] .row2 input::placeholder{color:var(--ink-2)}

/* 10-11-2026: buttons inside navy bands keep their own text colour */
.band.navy a.btn,.band.navy a.btn-coral{color:var(--on-accent)}
.band.navy a.btn-navy{color:var(--paper)}

/* 10-11-2026: tool panels never push wider than the screen */
.tapp > *{min-width:0}
.fld input,.fld select,.fld textarea{max-width:100%;box-sizing:border-box}

/* 10-11-2026: illustrations are transparent on the dark theme, so nothing sits behind them */
:root[data-theme="dark"] .bmm-figure img,:root[data-theme="dark"] .serp-example img,:root[data-theme="dark"] .legal-hero img,:root[data-theme="dark"] .hero img,:root[data-theme="dark"] .hero-art img,:root[data-theme="dark"] .tile-img img,:root[data-theme="dark"] main img{background:transparent;box-shadow:none}
:root[data-theme="dark"] .bmm-figure,:root[data-theme="dark"] .tile-img,:root[data-theme="dark"] .serp-example,:root[data-theme="dark"] figure{background:transparent;border-color:transparent;box-shadow:none}
/* 10-11-2026: 'In detail' continuation subheading after an answer-first paragraph; not numbered, not in the rail */
h2.more{font:600 12px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 10px;padding-top:12px;border-top:1px solid var(--hair)}