/* CountMy guides (18 Sep 2026). Same tokens as the app, built to be read:
   cedi numbers first, short sections, tables not prose, one action repeated. */
:root{color-scheme:light dark;--link:#1D4E9E;--on-accent:#FFFFFF;--paper:#F8F3EC;--surface:#FFFFFF;--ink:#221A12;--ink-soft:#5C5142;--muted:#6E6353;--rule:#E7DDCD;--flame:#D9541A;--flame-deep:#A83F12;--flame-soft:#FBE3D2;--leaf:#1B7A43;--leaf-deep:#125C32;--leaf-soft:#E1F2E7;--navy:#1E2F55;--steel-soft:#E1EAF6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link:#9DBBF2;--on-accent:#121417;--paper:#121417;--surface:#1B1E23;--ink:#F2F1EE;--ink-soft:#C7C9CE;--muted:#8B8F97;--rule:#2E323A;--flame:#F0713A;--flame-deep:#F79764;--flame-soft:#2E2119;--leaf:#4CC585;--leaf-deep:#6FD79E;--leaf-soft:#152420;--navy:#D6DEF2;--steel-soft:#1F2A3D}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1.02rem;line-height:1.55}
.wrap{max-width:720px;margin:0 auto;padding:16px 18px 60px}
.top{display:flex;align-items:center;gap:10px;padding:6px 0 14px}
.top a{color:var(--navy);font-family:"Manrope",sans-serif;font-weight:800;font-size:1.25rem;text-decoration:none}
.top .my{color:var(--flame)}
h1{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.75rem;line-height:1.15;margin:6px 0 10px;color:var(--navy);text-wrap:balance}
h2{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.25rem;margin:30px 0 8px;color:var(--ink)}
h3{font-family:"Manrope",sans-serif;font-weight:700;font-size:1.05rem;margin:20px 0 6px}
p{margin:0 0 12px}
.lead{font-size:1.1rem;color:var(--ink-soft)}
.stamp{font-size:.85rem;color:var(--muted);margin:0 0 18px}
.big{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:14px 16px;margin:0 0 18px}
.big .n{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.6rem;color:var(--leaf-deep)}
/* Tables (4 Oct 2026): fit a 360px phone first (headers and prose cells wrap, numbers never split).
   If one is still wider, a soft edge shows on the side that has more to scroll (pure CSS, invisible when nothing overflows). */
:root{--edge:rgba(30,47,85,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--edge:rgba(214,222,242,.45)}}
.tw{overflow-x:auto;margin:0 0 14px;border-radius:12px;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)) 0 0/28px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)) 100% 0/28px 100% no-repeat local,
    linear-gradient(to right,var(--edge),rgba(0,0,0,0)) 0 0/18px 100% no-repeat scroll,
    linear-gradient(to left,var(--edge),rgba(0,0,0,0)) 100% 0/18px 100% no-repeat scroll,
    var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:transparent}
th,td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{background:var(--steel-soft);color:var(--navy);font-weight:700}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{white-space:normal}
td.num.txt{white-space:normal;text-align:left}
@media (max-width:420px){table{font-size:.88rem}th,td{padding:8px 6px}}
.say{background:var(--leaf-soft);border-radius:14px;padding:12px 14px;margin:14px 0}
.say b{color:var(--leaf-deep)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--flame);color:var(--on-accent);text-decoration:none;font-family:"Manrope",sans-serif;font-weight:800;font-size:1.2rem;border-radius:16px;padding:16px 18px;margin:18px 0}
.cta svg{width:26px;height:26px}
.cta:active{background:var(--flame-deep)}
.cta-sub{text-align:center;color:var(--muted);font-size:.88rem;margin:-10px 0 18px}
.twi{color:var(--ink-soft);font-style:italic}
ul,ol{padding-left:20px;margin:0 0 12px}
li{margin:0 0 6px}
.faq h3{margin-top:16px}
.links{margin:30px 0 0;padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:14px}
.links a{color:var(--navy);font-weight:700}
.foot{color:var(--muted);font-size:.85rem;margin-top:30px}
.foot a{color:var(--muted)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.jump a{background:var(--surface);border:1px solid var(--rule);border-radius:100px;padding:6px 12px;font-size:.88rem;color:var(--navy);text-decoration:none;font-weight:600}
/* Contrast pass 26 Sep (measured): links had no colour, so dark mode showed the
   browser's default blue at 1.8:1 on the dark page. Links now follow the theme
   (7.2:1 light, 9.5:1 dark) and stay underlined so they read as links. */
a{color:var(--link)}
a:visited{color:var(--link)}
.cta,.cta:visited{color:var(--on-accent)}
.cta:active{color:var(--on-accent)}
.swipe{display:none;font-size:.85rem;color:var(--muted);margin:0 0 4px;text-align:right}
@media (max-width:500px){.swipe{display:block}}
/* Site navigation (8 Oct 2026): breadcrumb under the logo, related links, and one footer of hubs on every page (tools/site_nav.py). */
.crumbs{font-size:.85rem;margin:-6px 0 12px}
.crumbs ol{list-style:none;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}
.crumbs li{margin:0;color:var(--ink-soft)}
.crumbs li+li:before{content:"\203A";margin:0 6px;color:var(--muted)}
.crumbs a{color:var(--ink-soft)}
.sitenav{margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-soft)}
.sitenav p{margin:0 0 8px;line-height:1.7}
.sitenav a{font-weight:600}
.sitenav b{color:var(--ink)}
.related{font-size:.95rem}
.crumbs,.sitenav{break-inside:avoid}
/* Placeholder text: the browser default grey is 4.2:1 on the paper and 4.0:1 in dark mode; the muted token passes AA in both (contrast audit, 8 Oct 2026). */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* Brand band, stage 1 (11 Oct 2026, owner-approved). A woven stripe under the logo on every page that uses
   this file. ABSTRACT on purpose: plain alternating blocks, never a copy of a real kente (or Wayuu) cloth.
   One market = one "skin" = these four colours; the layout, logo, tokens and type never change.
   How it draws: the bottom border of .top is painted with a border-image, and border-image-outset pushes
   the paint out to both edges of the screen. Paint outside the border box is ink overflow: it never makes
   the page scroll sideways (scrollWidth is checked at 320px). Purely decorative, no element, no text.
   Old-syntax colour stops (start and end written twice) so Chrome/WebView 60 draws it too. */
:root{--band-a:#f6c445;--band-b:#c8312b;--band-c:#1a1a1a;--band-gap:#0f5132;--band-h:12px}
/* Future Spanish skin (VE/CO). Not switched on: same colours as Ghana until the owner picks a palette.
html[lang^="es"]{--band-a:#f6c445;--band-b:#c8312b;--band-c:#1a1a1a;--band-gap:#0f5132}
*/
.top{padding-bottom:10px;margin-bottom:16px;border-bottom:var(--band-h) solid var(--band-a);
  border-image:repeating-linear-gradient(90deg,
    var(--band-a) 0,var(--band-a) 30px,var(--band-gap) 30px,var(--band-gap) 33px,
    var(--band-b) 33px,var(--band-b) 47px,var(--band-gap) 47px,var(--band-gap) 50px,
    var(--band-c) 50px,var(--band-c) 60px,var(--band-gap) 60px,var(--band-gap) 63px,
    var(--band-b) 63px,var(--band-b) 77px,var(--band-gap) 77px,var(--band-gap) 80px) 0 0 100% 0 / 0 0 var(--band-h) 0 / 0 100vw 0 100vw stretch}
@media print{.top{border-bottom:0;border-image:none;margin-bottom:0}}