:root{
  --bg:#f6f8f2; --ink:#1f2a1b; --muted:#5b6b55; --card:#ffffff; --line:#dfe6d8;
  --green:#2e7d32; --green-dark:#1f5a23; --accent:#ffb300; --hero-a:#2e7d32; --hero-b:#6aa84f;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#10170f; --ink:#eef4ea; --muted:#a6b5a0; --card:#18221a; --line:#2a392b; --green:#66bb6a; --green-dark:#43a047; --hero-a:#1b3d1d; --hero-b:#2f5d31; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;padding:56px 0 48px}
.hero h1{margin:.1em 0 .2em;font-size:clamp(2.2rem,7vw,3.2rem);line-height:1.1}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;opacity:.9}
.lead{margin:0;font-size:1.15rem;max-width:34em;opacity:.95}
h2{margin:2.2rem 0 .8rem;font-size:1.5rem}
.grid{display:grid;gap:16px}
.card{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;align-items:flex-start}
.icon{flex:0 0 96px;width:96px;height:96px;border-radius:22px}
.tile{display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff}
.tile.golf{background:linear-gradient(135deg,#43a047,#1b5e20)}
.body{min-width:0}
.card h3{margin:.1em 0 .3em;font-size:1.25rem}
.card p{margin:.2em 0 .6em;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:600;padding:10px 16px;border-radius:999px}
.btn:hover,.btn:focus{background:var(--green-dark)}
.small{font-size:.9rem;color:var(--muted)}
.note{color:var(--muted);margin-top:0}
.soon{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.soon li{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.soon span{color:var(--muted);font-size:.9rem}
a{color:var(--green)}
footer{margin-top:3rem;padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
@media (max-width:480px){
  .card{flex-direction:column}
  .icon{flex-basis:auto}
}