:root { --fyw-ink:#1d2733; --fyw-muted:#5b6876; --fyw-accent:#1f6f43; --fyw-accent-2:#185a36; --fyw-line:#dfe5ea; --fyw-soft:#f4f7f9; }
body { color: var(--fyw-ink); background:#fff; }
.site-header { border-bottom:1px solid var(--fyw-line); background:var(--fyw-soft); }
.site-header .brand { font-weight:700; font-size:1.35rem; color:var(--fyw-ink); text-decoration:none; }
.site-header .tagline { color:var(--fyw-muted); margin-left:.6rem; font-size:.95rem; }
.site-nav { display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; }
.site-nav a { color:var(--fyw-ink); text-decoration:none; font-size:.95rem; white-space:nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--fyw-accent); text-decoration:underline; }
main.container { max-width: 860px; }   /* must beat Bootstrap's .container breakpoints */
h1 { font-size:1.9rem; margin:1.6rem 0 .6rem; }
.lead-sm { color:var(--fyw-muted); font-size:1.05rem; }
.tool-card { border:1px solid var(--fyw-line); border-radius:10px; padding:1.25rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.privacy-note { background:#eef7f1; border:1px solid #cfe8d7; border-radius:8px; padding:.6rem .8rem; font-size:.95rem; }
.btn-fyw { background:var(--fyw-accent); border-color:var(--fyw-accent); color:#fff; }
.btn-fyw:hover, .btn-fyw:focus { background:var(--fyw-accent-2); border-color:var(--fyw-accent-2); color:#fff; }
.btn-fyw:disabled { opacity:.55; }
#status { min-height:1.5rem; }
#status.error { color:#a12622; }
#status.ok { color:var(--fyw-accent-2); }
.tool-grid a.tool { display:block; height:100%; border:1px solid var(--fyw-line); border-radius:10px; padding:1rem 1.1rem; text-decoration:none; color:var(--fyw-ink); }
.tool-grid a.tool:hover { border-color:var(--fyw-accent); box-shadow:0 2px 8px rgba(31,111,67,.12); }
.tool-grid a.tool strong { display:block; font-size:1.1rem; color:var(--fyw-accent-2); margin-bottom:.25rem; }
article { margin:2.2rem 0 1rem; line-height:1.6; }
article h2 { font-size:1.35rem; margin-top:1.8rem; }
article h3 { font-size:1.08rem; margin-top:1.2rem; }
.site-footer { border-top:1px solid var(--fyw-line); color:var(--fyw-muted); font-size:.9rem; margin-top:2.5rem; padding:1.2rem 0; }
.site-footer a { color:var(--fyw-muted); }
@media (max-width: 575px) { h1 { font-size:1.55rem; } .site-header .tagline { display:block; margin-left:0; } }