/* Settlement Sidekick brand.css: one shared stylesheet, matched to the Android app (assets/index.html):
   app palette (teal #08807e / gold #f5bc37, navy + gold in dark), Roboto stack, 14px radii, app buttons and cards, Penny mascots.
   System fonts only, no third-party requests. */
:root{
  --bg:#ffffff;--card:#f2f9f8;--cb:#d6e8e6;--card2:#e4f3f2;--card3:#d3e9e7;--ink:#1d2a33;--ink2:#2f3d46;--muted:#4f5f69;--line:#d6e3e2;--line2:#aec6c4;
  --accent:#067573;--btn:#08807e;--btn-ink:#fff;--teal:#08807e;--mint:#e4f3f2;--inset:#edf6f5;
  --gold:#f5bc37;--onyel:#3a2a00;--goldbg:#fff3cd;--goldink:#8a5200;--amt:#067573;
  --hero-a:#d3e9e7;--hero-b:#fff3cd;--head-bg:#fff;--head-line:#f5bc37;--shadow:0 1px 3px rgba(16,40,50,.10);--glow:rgba(8,128,126,.25);
  --focus:#1d2a33;--r:14px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1a33;--card:#15294d;--cb:#15294d;--card2:#1e3763;--card3:#24395e;--ink:#ffffff;--ink2:#d3dcec;--muted:#aebbd3;--line:#24395e;--line2:#3a4f78;
  --accent:#e8b84a;--btn:#e8b84a;--btn-ink:#0b1a33;--teal:#e8b84a;--mint:#1e3763;--inset:#0e2347;
  --gold:#e8b84a;--onyel:#0b1a33;--goldbg:#3b2f10;--goldink:#f3c85a;--amt:#e8b84a;
  --hero-a:#15294d;--hero-b:#1e3763;--head-bg:#10244a;--head-line:#e8b84a;--shadow:none;--glow:rgba(232,184,74,.35);--focus:#e8b84a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16.5px/1.55 Roboto,"Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.brand,.btn,.badge{font-family:Roboto,"Noto Sans",Arial,sans-serif;font-weight:800}
p,li{color:var(--ink2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}
main{max-width:760px;margin:0 auto;padding:24px 18px 48px}
main.home{max-width:1040px;padding-top:12px}
a{color:var(--accent)}
h1{font-size:1.9rem;line-height:1.18;margin:.4em 0;letter-spacing:-.2px}
h2{font-size:1.3rem;line-height:1.3;margin-top:1.8em}
li{margin:.3em 0}
.muted{color:var(--muted);font-size:.92rem}
.card{background:var(--card);border:1px solid var(--cb);border-radius:var(--r);padding:16px 20px;margin:18px 0;box-shadow:var(--shadow)}
.badge{display:inline-block;background:var(--gold);color:var(--onyel);border:0;border-radius:10px;padding:4px 10px;font-size:.82rem;font-weight:800}
/* header */
header.site{background:var(--head-bg);border-bottom:2px solid var(--head-line);padding:8px 16px;position:sticky;top:0;z-index:5}
header.site .in{max-width:1040px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 16px}
header.site a{text-decoration:none}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.2px;min-height:44px}
.brand img{width:40px;height:40px;display:block;border-radius:10px}
.brand b{color:var(--ink);font-weight:800}
nav.main{display:flex;flex-wrap:wrap;gap:0 4px}
nav.main a{color:var(--ink);font-weight:600;font-size:.97rem;padding:10px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:10px}
nav.main a:hover{background:var(--mint);color:var(--accent)}
nav.main a[aria-current="page"]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
/* buttons */
.btn{display:inline-block;background:var(--btn);color:var(--btn-ink)!important;text-decoration:none;border:0;border-radius:var(--r);padding:13px 24px;font-weight:800;font-size:1.05rem;margin:8px 0;min-height:48px;line-height:1.4;text-align:center}
.hero-home .btn{font-size:1.2rem;padding:16px 30px;border-radius:20px;box-shadow:0 0 30px var(--glow)}
.btn:hover{filter:brightness(1.06)}
.btn.alt,.btn2{background:transparent;color:var(--accent)!important;border:2px solid var(--btn);box-shadow:none;padding:11px 22px}
/* hero (home) */
.hero-home{display:grid;gap:8px 28px;align-items:center;background:radial-gradient(circle at 80% 50%,var(--hero-b) 0,var(--hero-a) 62%);border:1px solid var(--line);border-radius:20px;padding:24px 20px 20px;margin:16px 0 8px;text-align:center}
.hero-home h1{font-size:2.05rem;margin:.2em 0 .3em}
.hero-home p.lead{font-size:1.15rem;margin:.2em 0 .6em}
.hero-home .penny{margin:0 auto;max-width:240px}
.hero-home .penny img{display:block;width:100%;height:auto}
.hero-home .penny.dark img{border-radius:28px}
.hero-home .small{font-size:.9rem;color:var(--muted);margin:.6em 0 0}
@media(min-width:760px){.hero-home{grid-template-columns:1.15fr .85fr;text-align:left;padding:40px 44px}.hero-home h1{font-size:2.6rem}.hero-home .penny{max-width:256px}}
section.band{margin:44px 0}
section.band>h2{font-size:1.6rem;margin:0 0 .5em;text-align:center}
section.band>p.sub{text-align:center;color:var(--muted);margin:0 auto 1em;max-width:620px}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.grid .card{margin:0}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--card3);color:var(--accent);font-weight:800;font-size:1.1rem}
.step h3{margin:.5em 0 .2em;font-size:1.15rem}
.step p{margin:.2em 0}
/* featured settlements */
.feat{display:flex;flex-direction:column}
.feat h3{margin:0 0 .3em;font-size:1.1rem}
.feat h3 a{color:var(--ink);text-decoration:none}
.feat h3 a:hover{text-decoration:underline}
.feat .min{font-family:Roboto,"Noto Sans",Arial,sans-serif;font-size:1.62rem;font-weight:800;color:var(--amt);line-height:1.2;margin:.2em 0;padding:4px 0 4px 10px;border-left:4px solid var(--gold)}
.feat .min small{display:block;font-size:.82rem;font-weight:600;color:var(--muted)}
.feat .due{margin:.5em 0;font-weight:700}
.feat .tag{display:inline-block;background:var(--card3);color:var(--accent);border-radius:10px;font-size:.78rem;font-weight:700;padding:2px 10px;margin:.2em 0}
.feat .go{margin-top:auto;font-weight:800;padding-top:.4em}
.center{text-align:center}
/* how we choose / content cards */
.choose{background:var(--mint)}
.choose h2,.choose h3{margin-top:.2em}
details.faq{background:var(--card);border:1px solid var(--cb);border-radius:var(--r);margin:10px 0;padding:0 18px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--accent);padding:14px 0;min-height:44px}
details.faq p{margin:0 0 14px}
.note{background:var(--inset);border:0;border-left:4px solid var(--btn);border-radius:8px;color:var(--ink2);padding:12px 18px;margin:18px 0}
/* settlement pages (existing classes) */
.facts dl{margin:0}.facts dt{font-weight:700;margin-top:.7em;color:var(--accent)}.facts dt:first-child{margin-top:0}.facts dd{margin:.1em 0 0}
.facts dd a{word-break:break-all}
ul.list{list-style:none;padding:0}ul.list li.card{margin:14px 0}ul.list h2{margin:0 0 .3em;font-size:1.2rem}ul.list p{margin:.3em 0}
.cta{border:2px solid var(--btn);background:var(--card2);display:block}
.cta .penny-wave{float:right;width:84px;height:auto;margin:0 0 6px 12px}
.closed{background:var(--goldbg);border:1px solid var(--gold);border-radius:10px;padding:10px 14px}
.hero{background:var(--card);border:1px solid var(--cb);border-left:5px solid var(--gold);border-radius:var(--r);padding:14px 18px;margin:14px 0;box-shadow:var(--shadow)}
.hero p{margin:.25em 0}.hero .big{font-size:1.3rem;font-weight:800;color:var(--amt);line-height:1.3}.hero .sub{color:var(--muted);font-size:.95rem}
.steps{padding-left:1.3em}.steps li{margin:.5em 0}
.check{list-style:none;padding:0}.check li{padding-left:1.6em;position:relative}.check li:before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}
.related a{font-weight:600}.trust{color:var(--muted);font-size:.92rem;margin:.2em 0 1em}
/* footer */
footer.site-foot{background:var(--head-bg);border-top:2px solid var(--head-line);margin-top:24px;padding:22px 18px 40px;color:var(--muted);font-size:.9rem}
footer.site-foot .in{max-width:1040px;margin:0 auto}
footer.site-foot .links{display:flex;flex-wrap:wrap;gap:0 14px;margin-bottom:10px}
footer.site-foot .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
footer.site-foot p{margin:.4em 0;max-width:820px}
footer.site-foot .fb{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-family:Roboto,"Noto Sans",Arial,sans-serif}
footer.site-foot .fb img{width:32px;height:32px;border-radius:9px}
@media(max-width:520px){h1{font-size:1.5rem}body{font-size:16px}main{padding:16px 14px 40px}.btn{display:block;text-align:center}.hero-home h1{font-size:1.75rem}header.site .in{justify-content:center}nav.main{justify-content:center}nav.main a{padding:10px 7px;font-size:.93rem}.brand{font-size:1.1rem}}
@media(prefers-reduced-motion:no-preference){.btn{transition:transform .12s}.btn:hover{transform:translateY(-1px)}}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--onyel);padding:10px 16px;font-weight:700;z-index:10;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* Penny mascots (app art, assets/mascot-*.webp) */
.mascot{display:block;height:auto;flex:none}
.head-mascot{display:flex;align-items:center;gap:14px}.head-mascot>div{flex:1;min-width:0}.head-mascot .mascot{width:96px}
.faq-mascot{width:88px;margin:0 auto 6px}
.foot-mascot{width:64px;float:right;margin:0 0 6px 12px}
.hero-home .penny img{filter:drop-shadow(0 8px 18px rgba(8,128,126,.18))}
@media(max-width:520px){.head-mascot .mascot{width:72px}.foot-mascot{width:52px}.hero-home .penny{max-width:180px}}
/* app-style card list and email reveal */
ul.list li.card{border-left:4px solid var(--btn)}
ul.list li.card h2 a{color:var(--ink);text-decoration:none}ul.list li.card h2 a:hover{color:var(--accent);text-decoration:underline}
ul.list li.card p:first-of-type{font-weight:800;color:var(--amt)}
.reveal-email{display:inline-block;padding:8px 18px;border-radius:var(--r);border:2px solid var(--btn);background:var(--btn);color:var(--btn-ink);font:800 .98rem Roboto,"Noto Sans",Arial,sans-serif;cursor:pointer;min-height:44px}
.reveal-email:hover{filter:brightness(1.06)}
.share .btn{margin:6px 4px 6px 0}
.feat .tag{align-self:flex-start}
/* header: app download offer (2026-10-29) */
header.site .in{flex-wrap:nowrap;gap:10px}
header.site .brand{flex:none;margin-right:auto}
.getapp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--gold);color:var(--onyel)!important;border-radius:999px;padding:5px 16px;line-height:1.15;min-height:44px;text-align:center;flex:none}
.getapp b{font-size:.95rem;font-weight:800}
.getapp small{font-size:.66rem;font-weight:600;opacity:.9;white-space:nowrap}
.getapp:hover{filter:brightness(1.05)}
details.menu{position:relative;display:none;flex:none}
details.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid var(--line2);color:var(--ink);font-size:1.3rem}
details.menu summary::-webkit-details-marker{display:none}
details.menu[open] summary{background:var(--card3)}
details.menu nav{position:absolute;right:0;top:52px;background:var(--head-bg);border:1px solid var(--cb);border-radius:var(--r);box-shadow:0 8px 24px rgba(16,40,50,.18);padding:6px;min-width:190px;display:flex;flex-direction:column;z-index:20}
details.menu nav a{color:var(--ink);font-weight:700;padding:11px 14px;border-radius:10px;text-decoration:none}
details.menu nav a:hover,details.menu nav a[aria-current="page"]{background:var(--card2);color:var(--accent)}
@media(max-width:760px){nav.main{display:none}details.menu{display:block}header.site .in{justify-content:flex-start}}
@media(max-width:380px){.brand span{display:none}}
@media(max-width:520px){.brand{font-size:1rem}.getapp{padding:5px 12px}.getapp b{font-size:.9rem}}
@media(max-width:520px){header.site{padding:8px 10px}header.site .in{gap:6px}.brand{gap:7px;font-size:.92rem;letter-spacing:-.3px}.brand img{width:34px;height:34px}.getapp{padding:4px 10px}.getapp b{font-size:.86rem}.getapp small{font-size:.6rem}details.menu summary{width:40px;height:40px}details.menu nav{top:48px}}
@media(max-width:360px){.brand span{display:none}}
.lead{font-size:1.15rem}
@media(min-width:700px){.grid.two{grid-template-columns:1fr 1fr}}
/* hero: Penny first on mobile (2026-10-29) */
@media(max-width:759px){.hero-home{padding-top:14px}.hero-home .penny{order:-1;max-width:none;margin:0 auto}.hero-home .penny img{height:130px;width:auto;margin:0 auto}.hero-home h1{margin-top:0}}
/* header v3 (2026-10-29): menu left, Get the app centered, Penny icon right */
header.site .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
header.site .hl{display:flex;align-items:center;justify-self:start;min-width:0}
header.site .getapp{justify-self:center}
header.site .brand{justify-self:end;margin:0;flex-direction:row}
header.site nav.main{flex-wrap:nowrap}
details.menu nav{left:0;right:auto}
@media(max-width:1000px) and (min-width:761px){header.site .brand span{display:none}}
@media(max-width:760px){header.site .brand span{display:none}header.site .in{justify-content:normal}}
header.site nav.main a{white-space:nowrap}