/* Aasare. Trust-first non-profit, coastal Karnataka.
   Dials: variance 6, motion 3, density 4. Motion is deliberately low: a
   donation site that bounces reads as untrustworthy.
   Radius rule: panels and controls 12px, badges and progress bars are pills.
   One accent (marigold) carries the give action and the progress fill.
   Everything structural is forest green. */

@font-face{font-family:Outfit;src:url(../fonts/outfit-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Kannada;src:url(../fonts/kannada-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Kannada;src:url(../fonts/kannada-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Selawik;src:url(../fonts/selawik-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Selawik;src:url(../fonts/selawik-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#e9f6ef; --surface:#ffffff; --surface-2:#f4fbf8;
  --ink:#0e1f1a; --ink2:#3a534b; --mute:#678077;
  --brand:#0b7a63; --brand-2:#076150; --brand-vivid:#13b88e; --brand-head:#15a67f;
  --brand-pale:#d2f5e7; --brand-soft:#eafaf3; --brand-line:#7ad9bf;
  --accent:#c9550f; --accent-vivid:#f59020; --accent-bright:#ffab3d; --accent-pale:#ffeeda;
  --line:#cfe6dc; --line2:#e0f1ea;
  --scrim:rgba(10,32,26,.60);
  --r:12px;
  --shadow:0 1px 2px rgba(16,33,28,.05), 0 8px 24px -12px rgba(16,33,28,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08120f; --surface:#101e19; --surface-2:#15261f;
    --ink:#e9f2ee; --ink2:#a7c2b8; --mute:#7d978d;
    --brand:#35d6a8; --brand-2:#5ee3bd; --brand-vivid:#2fe0ad;
    --brand-pale:#0f3a2f; --brand-line:#1d5041;
    --accent:#f9a04b; --accent-vivid:#ffae52; --accent-bright:#ffc277; --accent-pale:#2e1f10;
    --line:#223129; --line2:#1b2824;
    --scrim:rgba(4,14,11,.64);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
    --bg:#08120f; --surface:#101e19; --surface-2:#15261f;
    --ink:#e9f2ee; --ink2:#a7c2b8; --mute:#7d978d;
    --brand:#35d6a8; --brand-2:#5ee3bd; --brand-vivid:#2fe0ad;
    --brand-pale:#0f3a2f; --brand-line:#1d5041;
    --accent:#f9a04b; --accent-vivid:#ffae52; --accent-bright:#ffc277; --accent-pale:#2e1f10;
    --line:#223129; --line2:#1b2824;
    --scrim:rgba(4,14,11,.64);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Selawik,Kannada,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.dsp,.brand{font-family:Outfit,Kannada,Selawik,"Segoe UI",system-ui,sans-serif}
/* Kannada needs more room between lines than Latin at the same size */
html[lang="kn"] body{line-height:1.78}
html[lang="kn"] .cname, html[lang="kn"] h1, html[lang="kn"] h2, html[lang="kn"] h3{line-height:1.4}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.narrow{max-width:780px}

/* sandbox banner, one per view */
.sbx{background:var(--accent-pale); color:var(--accent); border-bottom:1px solid var(--brand-line);
  font-size:12.5px; padding:7px 0; text-align:center}
.sbx b{font-weight:600}

/* header */
header.top{background:var(--brand-head); color:#fff; position:relative; z-index:3}
.top .wrap{display:flex; align-items:center; gap:20px; min-height:66px}
.brand{font-size:21px; font-weight:600; color:#fff; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:9px}
.brand .mk{width:27px; height:27px; flex:0 0 27px; display:block}
.brand span{opacity:.72; font-weight:400; font-size:12.5px; margin-left:9px; letter-spacing:.04em}
.top .tabs{margin-left:auto; display:flex; gap:2px}
.top .tabs a{color:#e3f7ef; padding:7px 13px; border-radius:var(--r); font-size:14px;
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  transition:background .18s ease, color .18s ease}
.top .tabs .ic{display:none; width:21px; height:21px}
.top .tabs .ic svg{width:100%; height:100%; display:block}
.top .tabs a:hover{background:rgba(255,255,255,.12); color:#fff; text-decoration:none}
.top .tabs a.on{background:rgba(255,255,255,.18); color:#fff}

.top .who{margin-left:16px; text-align:right; line-height:1.25}
.top .wn{color:#fff; font-size:13.5px; font-weight:600}
.top .wr{color:#c3ecdd; font-size:11.5px}
.lng{background:rgba(255,255,255,.18); border:0; color:#fff; font-family:inherit;
  font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:99px; cursor:pointer;
  margin-left:12px; white-space:nowrap}
.lng:hover{background:rgba(255,255,255,.3)}
.app .appbar .lng{margin-left:0}
.top .out{color:#e3f7ef; font-size:13px; margin-left:14px; white-space:nowrap}
.top .out:hover{color:#fff}
.gate{max-width:560px; margin:56px auto}
.pick{display:flex; align-items:center; gap:16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 16px; margin-bottom:9px;
  box-shadow:var(--shadow)}
.pick > div:first-child{flex:1; min-width:0}
.pick .pr{font-family:Outfit,sans-serif; font-weight:600; font-size:15px; color:var(--ink)}
.pick .pn{color:var(--mute); font-size:12.8px; margin-top:1px}
.pick button{padding:8px 16px; font-size:14px}
.aud{border-left:2px solid var(--line); padding-left:16px; margin:10px 0 0}
.aud div{font-size:13px; color:var(--ink2); padding:5px 0}
.aud .w{color:var(--mute); font-size:12.5px}
@media (max-width:760px){
  .top .who{display:none}
  /* the sub-label costs about the width of the sign-out link */
  .brand span{display:none}
  .top .out{margin-left:6px; font-size:12.5px}
  .top nav a{padding:8px 8px}
}

/* hero: full-bleed photograph, content left */
.hero{position:relative; min-height:clamp(380px,52vh,520px); display:flex; align-items:center;
  overflow:hidden; background:var(--brand-2)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(108deg, rgba(11,122,99,.92) 0%, rgba(19,184,142,.80) 44%,
    rgba(19,184,142,.46) 74%, rgba(245,144,32,.38) 100%)}
.hero .wrap{position:relative; z-index:2; padding-top:52px; padding-bottom:52px}
.hero h1{color:#fff; font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.06; letter-spacing:-.028em;
  font-weight:700; margin:0 0 16px; max-width:16ch}
.hero p{color:#dcebe5; font-size:17px; margin:0 0 26px; max-width:50ch; line-height:1.55}

/* icons always sit inline with their label, never above or wrapped */
.ic{display:inline-flex; width:18px; height:18px; flex:0 0 18px; vertical-align:-3px}
.ic svg{width:100%; height:100%; display:block}
h2 .ic, h3 .ic{width:21px; height:21px; flex-basis:21px; color:var(--brand-vivid); margin-right:9px; vertical-align:-4px}
h2, h3{display:flex; align-items:center}
.meta-ic{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.meta-ic .ic{width:15px; height:15px; flex-basis:15px; color:var(--mute); vertical-align:-2px}
.note .ic{color:var(--brand); margin-right:7px}
.stats .k{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.stats .k .ic{width:16px; height:16px; flex-basis:16px; color:var(--accent)}
.steps b{display:flex; align-items:center; gap:9px}
.steps b .ic{color:var(--brand-vivid)}

.app .tabs{position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; width:100%;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
  background:var(--surface); border-top:1px solid var(--line);
  padding:5px 2px calc(5px + env(safe-area-inset-bottom))}
.app .tabs a{display:grid; justify-items:center; gap:3px; padding:7px 2px;
  color:var(--mute); font-size:10.5px; line-height:1.15; text-align:center; border-radius:10px}
.app .tabs a.on{color:var(--brand); font-weight:700}
.app .tabs .ic{display:block; width:23px; height:23px; flex-basis:23px}
.app .tabs .lbl{display:block; max-width:76px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* ==================== app shell ====================
   Only inside the APK. The website is untouched. */
.app body{padding-bottom:66px}
.app .sbx{display:none}
.app footer{display:none}
.app .hero, .app .band, .app .wash{display:none !important}

.app .appbar{display:flex; align-items:center; gap:10px; min-height:54px;
  padding:0 14px; background:var(--brand-head); color:#fff;
  position:sticky; top:0; z-index:30}
.app .appbar .ttl{font-family:Outfit,sans-serif; font-weight:600; font-size:18.5px;
  letter-spacing:-.015em; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.app .appbar .bk{background:none; border:0; padding:6px; margin-left:-6px; color:#fff;
  display:grid; place-items:center; cursor:pointer}
.app .appbar .bk .ic{width:23px; height:23px; flex-basis:23px; transform:rotate(180deg)}
.app .appbar .sbxpill{font-size:10.5px; font-weight:700; letter-spacing:.04em;
  background:rgba(255,255,255,.22); color:#fff; padding:3px 9px; border-radius:99px}

/* content runs to the edges, the way a list does */
.app .wrap{padding:0; max-width:none}
.app h1{display:none}
.app .lede{display:none}
.app h2{font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mute); margin:20px 16px 8px; font-weight:700}
.app h2 .ic{width:16px; height:16px; flex-basis:16px; margin-right:7px}
.app h3{margin:20px 16px 8px; font-size:15px}

/* rows become list items: no card, no radius, dividers only */
.app .clist{gap:0}
.app .crow{border:0; border-bottom:1px solid var(--line2); border-radius:0;
  box-shadow:none; background:var(--surface); padding:14px 16px;
  grid-template-columns:48px 1fr; gap:13px}
.app .crow:first-child{border-top:1px solid var(--line2)}
.app .crow > div:last-child{grid-column:1 / -1; margin-top:2px}
.app .pf{width:48px; height:48px; flex-basis:48px; font-size:15px}
.app .cname{font-size:16px}
.app .ccond{font-size:14px}

/* panels lose their float */
.app .card, .app .vt, .app .attn, .app .pick{border-left:0; border-right:0;
  border-radius:0; box-shadow:none; margin-left:0; margin-right:0}
.app .card, .app .vt, .app .attn, .app .pick{padding-left:16px; padding-right:16px}
.app .note{margin-left:16px; margin-right:16px}
.app .stats{border-left:0; border-right:0; border-radius:0; margin:0}
.app .steps{margin-left:16px; margin-right:16px}
.app form{padding:0 16px}
.app .gate{margin:40px 16px; max-width:none}
.app table{border-left:0; border-right:0; border-radius:0}
.app .actions{padding:0 16px}
.app .card .actions, .app form .actions{padding:0}

/* touch targets */
.app button, .app .btn{padding:13px 20px; font-size:15.5px}
.app input, .app select, .app textarea{padding:12px 13px; font-size:16px}

/* page furniture */
h1{font-size:clamp(1.7rem,3vw,2.2rem); line-height:1.18; letter-spacing:-.018em; font-weight:600; margin:30px 0 6px}
h2{font-size:1.3rem; letter-spacing:-.012em; font-weight:600; margin:34px 0 12px}
h3{font-size:1.06rem; letter-spacing:-.008em; font-weight:600; margin:28px 0 10px}
p.lede{color:var(--ink2); margin:0 0 18px; font-size:16.5px; max-width:66ch}
.muted{color:var(--mute)}
.sm{font-size:13px}
.mono{font-family:Consolas,"Cascadia Mono",ui-monospace,monospace; font-size:12.8px}

/* stat band: rules, not cards */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:26px 0 8px;
  background:var(--surface); border:1px solid var(--brand-line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow)}
.stats > div{padding:20px 22px 22px; border-left:1px solid var(--line2)}
.stats > div:first-child{border-left:0}
.stats .k{color:var(--ink2)}
.stats .k{color:var(--mute); font-size:12.5px}
.stats .v{font-family:Outfit,sans-serif; font-size:31px; font-weight:700; letter-spacing:-.028em;
  margin-top:0; font-variant-numeric:tabular-nums; color:var(--brand-2)}

/* admin surfaces: denser than the public pages, numbers in tabular figures */
.stats.six{grid-template-columns:repeat(6,1fr)}
.fig{font-variant-numeric:tabular-nums}
.dense th{padding:9px 12px; font-size:11.5px}
.dense td{padding:8px 12px; font-size:13.5px}
.dense .b{font-size:11px; padding:2px 8px}

/* one thing waiting on a person, per row */
.attn{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:14px 18px; margin-bottom:10px; box-shadow:var(--shadow)}
.attn .aw{font-family:Outfit,sans-serif; font-weight:600; font-size:15px; color:var(--ink)}
.attn .an{color:var(--ink2); font-size:13px; margin-top:2px}
.attn .ay{color:var(--mute); font-size:13px; margin-top:5px; max-width:70ch}
@media (max-width:760px){
  .stats.six{grid-template-columns:repeat(2,1fr)}
  .attn{grid-template-columns:1fr; gap:12px}
}

/* panels + tables */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
th{text-align:left; font-size:12px; color:var(--mute); font-weight:600;
  padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}

/* request rows */
.clist{display:grid; gap:12px}
.crow{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; display:grid; grid-template-columns:56px 1fr 232px; gap:20px; align-items:center;
  box-shadow:var(--shadow); transition:border-color .18s ease, transform .18s ease}
.crow:hover{border-color:var(--brand-line); transform:translateY(-1px); text-decoration:none}
.crow:active{transform:translateY(0)}
.cname{font-family:Outfit,sans-serif; font-weight:600; font-size:17px; letter-spacing:-.012em; color:var(--ink)}
.ccond{color:var(--ink2); font-size:14.5px; margin-top:2px}
.cmeta{color:var(--mute); font-size:12.8px; margin-top:7px}
.bar{height:9px; background:var(--line2); border-radius:99px; overflow:hidden; margin:8px 0 7px}
.bar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent-vivid), var(--accent-bright))}
.bar.full i{background:linear-gradient(90deg, var(--brand), var(--brand-vivid))}
.amt{font-size:14px; color:var(--mute)}
.amt b{font-family:Outfit,sans-serif; font-size:18px; font-weight:600; color:var(--ink);
  letter-spacing:-.015em; font-variant-numeric:tabular-nums}

/* portraits: illustrated, not photographic. Nobody real is shown, so no
   real person is given a fabricated illness. */
.pf{width:56px; height:56px; border-radius:99px; flex:0 0 56px;
  display:grid; place-items:center; background:var(--brand-pale);
  border:1px solid var(--brand-line); color:var(--brand);
  font-family:Outfit,sans-serif; font-weight:600; font-size:17px; letter-spacing:.01em}
.pf.big{width:76px; height:76px; flex:0 0 76px; font-size:23px}
.phead{display:flex; gap:18px; align-items:center; margin:30px 0 4px}
.phead h1{margin:0}

/* a washed section, so the page is not white cards on grey all the way down */
.wash{background:var(--brand-pale); border-top:2px solid var(--brand-vivid);
  border-bottom:1px solid var(--brand-line); padding:38px 0 42px; margin:46px 0}
.wash h2{margin-top:0}
.wash .lede{color:var(--ink2)}

/* rule-separated process rows: its own layout family, not another card grid */
.steps{list-style:none; margin:22px 0 0; padding:0}
.steps li{display:grid; grid-template-columns:1fr 1.5fr; gap:26px; padding:16px 2px;
  border-top:1px solid var(--brand-line)}
.steps li:last-child{border-bottom:1px solid var(--brand-line)}
.steps b{font-family:Outfit,sans-serif; font-weight:600; font-size:15.5px; color:var(--ink)}
.steps span{color:var(--ink2); font-size:14.5px}
@media (max-width:760px){ .steps li{grid-template-columns:1fr; gap:4px} }

/* badges are pills, by the documented rule */
.b{display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px;
  letter-spacing:.015em}
.b.ok{background:var(--brand-vivid); color:#fff}
.b.live{background:var(--accent-vivid); color:#fff}
.b.wait{background:var(--line); color:var(--ink2)}

/* verification trail */
.vt{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  overflow:hidden; box-shadow:var(--shadow)}
.vt .vr{display:grid; grid-template-columns:24px 1fr; gap:13px; padding:15px 18px;
  border-bottom:1px solid var(--line2)}
.vt .vr:last-child{border-bottom:0}
.tick{width:20px; height:20px; border-radius:99px; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; background:var(--brand); margin-top:2px}
.tick.no{background:var(--line); color:var(--mute)}
.vk{font-weight:600; font-size:14.5px}
.vn{color:var(--ink2); font-size:14px; margin-top:3px}
.vw{color:var(--mute); font-size:12.5px; margin-top:4px}

/* full-width image band */
.band{position:relative; margin:42px 0; border-radius:var(--r); overflow:hidden; min-height:230px;
  display:flex; align-items:center; background:var(--brand-2)}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,122,99,.92), rgba(19,184,142,.74) 68%, rgba(245,144,32,.44))}
.band .bt{position:relative; z-index:3; padding:34px 38px; max-width:62ch}
.band h2{color:#fff; margin:0 0 8px; font-size:1.45rem}
.band p{color:#d9e8e3; margin:0; font-size:15.5px}

/* forms + buttons */
label{display:block; font-size:13px; font-weight:600; color:var(--ink2); margin:16px 0 5px}
input,select,textarea{width:100%; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--mute); opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
textarea{min-height:88px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
button,.btn{font-family:Outfit,sans-serif; font-size:15px; font-weight:600; padding:11px 20px;
  border-radius:var(--r); border:1px solid var(--brand); background:var(--brand); color:#fff;
  cursor:pointer; white-space:nowrap; display:inline-block;
  transition:background .18s ease, transform .12s ease}
button:hover,.btn:hover{background:var(--brand-2); text-decoration:none; color:#fff}
button:active,.btn:active{transform:translateY(1px)}
button.give,.btn.give{background:var(--accent); border-color:var(--accent); color:#fff}
button.give:hover{background:#9c5b0f}
/* sits on the hero photograph in BOTH modes, so its ink is fixed dark green.
   Using var(--brand) here put light teal on white in dark mode. */
.btn.onwhite{background:#fff; color:#0e4a3c; border-color:#fff}
.btn.onwhite:hover{background:#e6f0ec; color:#0a3a2f}
.btn.outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn.outline:hover{background:rgba(255,255,255,.14); color:#fff}
button.quiet,.btn.quiet{background:var(--surface); color:var(--brand); border-color:var(--brand-line)}
button.quiet:hover,.btn.quiet:hover{background:var(--brand-pale); color:var(--brand)}
button:disabled{background:var(--line); border-color:var(--line); color:var(--mute); cursor:not-allowed}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* notes */
.note{background:var(--brand-pale); border-left:3px solid var(--brand); padding:13px 16px;
  border-radius:0 var(--r) var(--r) 0; font-size:14.5px; margin:16px 0; color:var(--ink2)}
.note b,.note strong{color:var(--ink)}
.note.warn{background:var(--accent-pale); border-left-color:var(--accent)}

.led td{font-size:14px}
.led .in{color:var(--brand); font-weight:600}
.led .out{color:var(--accent); font-weight:600}

footer{color:var(--mute); font-size:13px; padding:34px 0 44px; text-align:center;
  border-top:1px solid var(--line); margin-top:44px}

@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
  /* drop the divider on the left column, but never the padding: the
     numbers were sitting hard against the panel edge */
  .stats > div:nth-child(odd){border-left:0}
}
@media (max-width:760px){
  /* the nav leaves the header and becomes a bottom tab bar: icon over label,
     which is what stops a web view feeling like a web page */
  body{padding-bottom:66px}
  .top{position:sticky; top:0}
  .top .wrap{min-height:0; padding-top:11px; padding-bottom:11px; flex-wrap:nowrap; gap:10px}
  .tabs{position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; width:100%;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
    background:var(--surface); border-top:1px solid var(--line);
    padding:5px 2px calc(5px + env(safe-area-inset-bottom)); overflow:visible}
  .tabs a{display:grid; justify-items:center; gap:3px; padding:7px 2px; border-radius:10px;
    color:var(--mute); font-size:10.5px; line-height:1.15; text-align:center}
  .tabs a:hover{background:transparent; color:var(--brand)}
  .tabs a.on{background:transparent; color:var(--brand); font-weight:700}
  .tabs .ic{display:block; width:23px; height:23px}
  .tabs .lbl{display:block; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* tables: stacked rows with their column name, instead of sideways scroll */
  table, thead, tbody, tr, th, td{display:block}
  table{border:0; background:transparent; overflow:visible}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  tbody tr{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    margin-bottom:10px; padding:4px 2px; box-shadow:var(--shadow)}
  tbody td{border:0; padding:7px 14px; display:grid; grid-template-columns:34% 1fr; gap:12px;
    align-items:baseline; text-align:left}
  tbody td::before{content:attr(data-label); color:var(--mute); font-size:12.5px; font-weight:600}
  tbody td:empty{display:none}
  tbody td.r{text-align:left}
  /* the campaign page's two-column fact table is already a label/value pair */
  .facts tbody tr{border:1px solid var(--line)}
  .facts th{display:grid; padding:9px 14px 0; background:transparent; border:0;
    color:var(--mute); font-size:12.5px}
  .facts td{display:block; padding:0 14px 9px}
  .facts td::before{content:none}
  .crow{grid-template-columns:56px 1fr; gap:14px}
  .crow > div:last-child{grid-column:1 / -1}
  .row2{grid-template-columns:1fr}
  .hero .wrap{padding-top:40px; padding-bottom:40px}
  .band .bt{padding:26px 24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}