/* beninbet.net - "le guichet": white counter, flag green, gold rule.
   A dark green hero band on a white page, uppercase headings, dashed receipts. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF; --text:#14181A; --muted:#5C6663;
  --accent:#0F7A3D; --accent2:#C98A00; --border:rgba(20,24,26,.14);
  --radius:0px; --rule:rgba(15,122,61,.35);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
}
body{background:var(--bg);color:var(--text);font-size:16.5px;line-height:1.68}
.wrap{max-width:940px}
header.site{background:#FFFFFF;border-bottom:3px solid var(--accent)}
header.site .logo .dot{background:var(--accent2);border-radius:0;width:11px;height:11px}
nav.top a{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:12px}
nav.top a[aria-current],nav.top a:hover{color:var(--accent)}

/* the hero is a green counter band - nothing else on the network looks like this */
.hero{background:linear-gradient(180deg,#0C6331 0%,#0F7A3D 100%);color:#F3FBF5;
  margin:0 -100vmax 0;padding:46px 100vmax 40px;border:0}
.hero h1{color:#FFFFFF;font-size:clamp(30px,4.2vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.02em}
.hero p.lead{color:#D6EEDE;font-size:18px;max-width:68ch}
.hero .pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#FFFFFF;
  border-radius:0;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:700;padding:5px 10px}
.hero .card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#EDF7F0}
.hero .card h3,.hero .card p{color:#FFFFFF}
.hero .calc{background:#FFFFFF!important;color:var(--text);border:0;border-top:4px solid var(--accent2)}
.hero .calc label{color:var(--muted)}
.hero .calc .out,.hero .calc .out *{color:var(--text)}

h2{font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:42px 0 10px;
  padding-bottom:8px;border-bottom:3px solid var(--accent2)}
h3{font-size:18px;font-weight:750}
.card{background:#FFFFFF;border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:0;padding:16px 18px;box-shadow:0 1px 0 rgba(20,24,26,.05)}
.card p{color:var(--muted)}
.card.link:hover{border-left-color:var(--accent2);background:#F7FCF9;transform:translateY(-1px)}
.grid{gap:16px}
.calc{background:#FFFFFF!important;border:1px dashed var(--rule);border-left:4px solid var(--accent);padding:20px}
input,select{background:#fff;border:2px solid var(--border);border-radius:0;color:var(--text);font-weight:600}
input:focus,select:focus{outline:0;border-color:var(--accent)}
button{background:var(--accent);color:#FFFFFF;border-radius:0;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:13px}
button.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.out .big{font-size:31px;font-weight:800;color:#0C6331}
table th{background:#0F7A3D;color:#FFFFFF;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:11.5px}
table td,table th{border-bottom:1px solid var(--border)}
tbody tr:nth-child(even){background:#F6FBF7}
code{background:#F2F7F3;border:1px solid var(--border)}
details{border-bottom:1px dashed var(--border);padding:14px 0}
details summary{font-weight:700;color:var(--accent)}
footer.site{background:#0C6331;color:#D6EEDE;border-top:0}
footer.site a,footer.site h4{color:#FFFFFF}
.rg{background:#F2F7F3;border-left:4px solid var(--accent2)}