:root{
  --blue:#2E5EAA;
  --blue-dark:#20437C;
  --mint:#33C481;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --ink:#1A1A1A;
  --ink-soft:#5B6270;
  --line:#E3E7EE;
  --danger:#C4433B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-soft);
  color:var(--ink);
}
a{color:var(--blue);}
.wrap{max-width:820px;margin:0 auto;padding:0 18px;}

header.site{background:var(--blue);}
.header-inner{
  max-width:820px;margin:0 auto;padding:14px 18px;
  display:flex;align-items:center;gap:10px;
}
.header-inner a.brand{display:flex;align-items:center;gap:8px;text-decoration:none;}
.brand-mark{flex-shrink:0;}
.brand-text{color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:-0.01em;}
.brand-text span{color:var(--mint);}
.header-inner nav{margin-left:auto;}
.header-inner nav a{color:#DCE6F5;text-decoration:none;font-size:0.85rem;font-weight:600;}

main{padding-bottom:50px;}

.ad-slot{
  border:1px dashed #C7CCD6;background:#EDEFF3;color:#8B93A1;
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;
  border-radius:6px;margin:22px 0;
}
.ad-slot.leaderboard{height:90px;}
.ad-slot.infeed{height:100px;}

.card{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
}

.hero{padding:30px 0 6px;}
.hero h1{font-size:1.5rem;margin:0 0 8px;}
.hero p{color:var(--ink-soft);font-size:0.95rem;line-height:1.55;margin:0;max-width:60ch;}

.tool-card{padding:26px;margin-top:18px;}
.tool-card h2{margin:0 0 6px;font-size:1.1rem;}
.tool-card .helper{color:var(--ink-soft);font-size:0.85rem;margin:0 0 18px;}

.btn{
  display:inline-block;background:var(--mint);color:#04331D;border:none;border-radius:7px;
  padding:12px 20px;font-size:0.95rem;font-weight:700;cursor:pointer;text-decoration:none;
}
.btn:hover{filter:brightness(1.05);}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--ink);}
.btn.danger{background:var(--danger);color:#fff;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

.status{
  margin-top:14px;padding:10px 14px;border-radius:6px;font-size:0.85rem;
  background:#F1F7F3;border:1px solid #CFE3D6;color:var(--ink-soft);display:none;
}
.status.show{display:block;}
.status.error{background:#FBEEED;border-color:#EBC6C2;color:#8A3A34;}

.privacy-note{
  margin-top:16px;font-size:0.8rem;color:var(--ink-soft);
  background:#F5F7FA;border:1px solid var(--line);padding:10px 12px;border-radius:6px;
}

/* Hub grid */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
@media(min-width:560px){.tool-grid{grid-template-columns:1fr 1fr 1fr;}}
.tool-tile{
  padding:20px 16px;text-align:center;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tool-tile .emoji{font-size:1.8rem;}
.tool-tile .name{font-weight:700;font-size:0.95rem;}
.tool-tile .desc{font-size:0.78rem;color:var(--ink-soft);}
.tool-tile:hover{border-color:var(--blue);}

footer{border-top:1px solid var(--line);padding:22px 0 46px;font-size:0.78rem;color:var(--ink-soft);}
footer .links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
footer a{color:var(--ink-soft);}


.content-block{margin-top:34px;}
.content-block h2{font-size:1.15rem;margin:26px 0 10px;color:var(--ink);}
.content-block h2:first-child{margin-top:0;}
.content-block p{color:var(--ink-soft);font-size:0.92rem;line-height:1.65;margin:0 0 12px;}
.content-block ul{margin:0 0 12px;padding-left:20px;color:var(--ink-soft);font-size:0.92rem;line-height:1.65;}
.content-block li{margin-bottom:6px;}
.faq-item{margin-bottom:16px;}
.faq-item h3{font-size:0.95rem;margin:0 0 4px;color:var(--ink);}
.faq-item p{margin:0;}