/*
Theme Name: TM 9 Ball
Author: Ted Mauro
Version: 1.0
*/

:root{--felt:#0b5d3b;--felt2:#073d27;--wood:#3b2414;--gold:#f5c518;--ball9:#f5c518;--ink:#1b1b1b;--paper:#fffdf6}
*{box-sizing:border-box}body{margin:0;font:18px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--paper)}
a{color:#0a6a43}img{max-width:100%;height:auto}
.top{background:var(--wood);color:#fff;border-bottom:4px solid var(--gold)}
.wrap{max-width:1120px;margin:auto;padding:0 20px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:22px}
.logo i{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 34%,transparent 35%),linear-gradient(#fff 0 28%,var(--ball9) 28% 72%,#fff 72%);display:grid;place-items:center;font-style:normal;color:#000;font-size:15px;box-shadow:inset -4px -4px 8px rgba(0,0,0,.3)}
nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600}nav a:hover{color:var(--gold)}
.hero{background:radial-gradient(ellipse at center,#14894f,var(--felt) 55%,var(--felt2));color:#fff;padding:70px 0 80px;border-bottom:14px solid var(--wood)}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.1;margin:0 0 14px}.hero p{font-size:21px;max-width:640px;opacity:.95}
.btn{display:inline-block;background:var(--gold);color:#000;font-weight:800;padding:14px 26px;border-radius:40px;text-decoration:none;margin:8px 10px 0 0}
.btn.ghost{background:transparent;color:#fff;border:2px solid #fff}
.balls{display:flex;gap:8px;margin-top:28px}.balls span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 13px sans-serif;color:#000;box-shadow:inset -4px -4px 8px rgba(0,0,0,.35)}
.balls span:before{content:attr(data-n);background:#fff;border-radius:50%;width:18px;height:18px;display:grid;place-items:center}
h2.sec{font-size:30px;margin:48px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.08);border-top:5px solid var(--felt)}
.card h3{margin:0 0 8px;font-size:20px;line-height:1.3}.card h3 a{color:var(--ink);text-decoration:none}.card p{margin:0;color:#555;font-size:16px}
.promo{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;background:linear-gradient(135deg,#1c1c1c,#3b2414);color:#fff;border-radius:18px;padding:28px;margin:44px 0;border:3px solid var(--gold)}
.promo h2{margin:0 0 8px;color:var(--gold)}
.optin{background:var(--felt);color:#fff;border-radius:18px;padding:28px;margin:40px 0}
.optin h2{margin-top:0;color:var(--gold)}
.links{display:flex;flex-wrap:wrap;gap:10px}.links a{background:#eef6f1;padding:8px 14px;border-radius:30px;text-decoration:none;font-weight:600}
.layout{display:grid;grid-template-columns:1fr 320px;gap:40px;margin:40px auto}
article h1{font-size:clamp(30px,4.5vw,44px);line-height:1.15}
.side .box{background:#fff;border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.side h3{margin-top:0}
footer{background:var(--felt2);color:#d9eee2;padding:40px 0;margin-top:60px}footer a{color:#fff}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.todo{border:2px dashed #c00;padding:10px;color:#c00;font-size:14px}
@media(max-width:860px){.layout{grid-template-columns:1fr}.promo{grid-template-columns:1fr;text-align:center}.promo img{margin:auto}nav a{margin:0 14px 0 0}}