/* ========= Theme ========= */

:root{

  --green: #29c07e;       /* light, friendly green */

  --green-700:#199b63;    /* darker hover */

  --ink:#111827;          /* near-black text */

  --muted:#6b7280;        /* gray text */

  --bg:#f7f9f8;           /* off-white background */

  --panel:#ffffff;        /* white panels */

  --line:#e5e7eb;         /* light gray borders */

  --shadow: 0 10px 30px rgba(0,0,0,.06);

  --radius: 14px;

}



*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{

  font-family: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  background: var(--bg);

  color: var(--ink);

  line-height: 1.6;

}



/* ========= Utilities ========= */

.sr-only{position:absolute;left:-9999px}

.btn{

  display:inline-flex;align-items:center;gap:10px;

  padding:12px 16px;border-radius:12px;font-weight:700;

  text-decoration:none;border:1px solid var(--line);color:var(--ink);

  background: #fff; transition: all .15s ease;

}

.btn:hover{transform:translateY(-2px)}

.btn.primary{

  background: var(--green); color:#042014; border-color: transparent; box-shadow: var(--shadow);

}

.btn.primary:hover{background: var(--green-700)}

.btn.ghost{

  background:#fff;border:1px solid var(--line);color:var(--ink);

}

.btn.pill{border-radius:999px}

.btn.full{width:100%;justify-content:center}



/* ========= Nav ========= */

.nav{

  position: sticky; top:0; z-index: 10;

  display:flex;justify-content:space-between;align-items:center;

  padding:14px 20px;background:rgba(255,255,255,.9);backdrop-filter: blur(8px);

  border-bottom:1px solid var(--line);

}

.brand{display:flex;align-items:center;gap:10px;font-weight:800}

.brand .name{font-size:1.1rem}

.brand .accent{color:var(--green)}

.brand i{color:var(--green)}

.nav a{color:var(--ink);text-decoration:none;font-weight:600;margin-inline:10px}

.nav .btn{margin-inline-start:6px}



/* ========= Hero ========= */

.hero{

  max-width:1100px;margin:50px auto 28px;padding:0 18px;text-align:center;

}

.hero h1{font-size: clamp(28px, 5vw, 44px);margin-bottom:8px}

.lead{color:var(--muted);margin-bottom:16px}

.search{display:flex;gap:10px;justify-content:center;margin:0 auto 14px;max-width:720px}

.search input{

  flex:1;padding:14px 16px;border:1px solid var(--line);

  background:#fff;border-radius:12px

}

.search .btn{background:var(--panel)}

.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

.disclaimer{font-size:.95rem;color:var(--muted);margin-top:12px}



/* ========= Sections ========= */

.section{max-width:1100px;margin:32px auto;padding:0 18px}

.section h2{font-size:1.6rem;margin-bottom:12px}



/* cards */

.cards{display:grid;gap:14px;grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) )}

.card{

  background: var(--panel); border:1px solid var(--line);

  border-radius: var(--radius); padding:18px;text-align:center;color:inherit;text-decoration:none;

  box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;

}

.card:hover{transform:translateY(-4px);border-color:#d1d5db}

.card i{font-size:28px;color:var(--green);margin-bottom:10px}

.card h3{font-size:1.05rem}



/* how */

.how ol{padding-left:22px;color:var(--muted)}

.how li{margin:8px 0}



/* form */

.post .form{

  background: var(--panel); border:1px solid var(--line);

  padding:18px;border-radius: var(--radius); box-shadow: var(--shadow);

}

.post label{display:block;margin-bottom:6px;color:var(--muted);font-size:.95rem}

.post input[type="text"],

.post input[type="date"],

.post input[type="time"],

.post select,

.post textarea{

  width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);

  border-radius:12px;padding:12px 14px

}

.post .row{margin-bottom:14px}

.post .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.post .policy{

  background:#f4f8f6;border:1px dashed #cfe8db;color:#0f422c;border-radius:12px;padding:12px

}

.post .policy .inline{display:flex;gap:10px;align-items:center;margin-top:8px}



/* helpers */

.helpers .list{display:grid;gap:12px}

.helper{

  display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);

  border-radius:14px;padding:14px;box-shadow: var(--shadow)

}

.helper .avatar{

  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#042014;font-weight:900

}

.helper .info{flex:1}

.helper .info h3{font-size:1.05rem}

.helper .info p{color:var(--muted);font-size:.95rem}

.helper .rating{color:#f59e0b}



/* footer */

.footer{

  margin-top:50px;padding:26px 18px;text-align:center;color:var(--muted);

  border-top:1px solid var(--line)

}



/* ========= Responsive ========= */

@media (max-width: 680px){

  .post .two{grid-template-columns:1fr}

  .nav nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

  .nav a{margin-inline:4px}

}