/* Homepage sections (REFACTOR-SPEC §5.3). Shared pieces live in components.css. */
body{color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.home h1,.home h2,.home h3,.home p{margin:0}
.home a{color:inherit}

/* 1. Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:center;padding:64px 0 72px}
.hero h1{font:500 clamp(44px,6.2vw,80px)/1.02 var(--sans);letter-spacing:-.06em;text-wrap:balance}
.hero .sub{margin-top:22px;max-width:46ch;font-size:17px;line-height:1.65;color:var(--muted)}
.hero .btn-row{margin-top:30px}
.hero-note{margin-top:18px}
.hero-card{min-width:0}
.hero-card .gcard.feature{min-height:260px}
.hero-card .kicker{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}

/* Section frame */
.hsec{border-top:1px solid var(--line);padding:56px 0 64px}
.hsec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.hsec h2{font:500 clamp(32px,3.6vw,48px)/1.06 var(--sans);letter-spacing:-.05em;text-wrap:balance;max-width:20ch}
.hsec-head p{max-width:46ch;color:var(--muted);font-size:15px;line-height:1.65}

/* 2. Source tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tile{background:#fff;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile .chip{align-self:flex-start}
.tile b{font:500 40px/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.tile b.soon{font-size:22px;letter-spacing:-.03em;color:var(--muted)}
.tile p{font-size:13.5px;line-height:1.6;color:var(--muted)}

/* 3. How a gap is scored */
.how{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.how-diagram{border:1px solid var(--edge);border-radius:var(--radius);background:#fff;padding:26px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.parts{list-style:none;margin:0;padding:0;border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.parts li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.parts li:last-child{border-bottom:0}
.parts .w{grid-row:span 2;font:600 14px var(--mono);color:var(--brand-purple);padding-top:1px}
.parts b{font:500 14.5px var(--sans);letter-spacing:-.01em}
.parts span{font-size:13px;line-height:1.55;color:var(--muted)}
.verdict-key{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px;font-size:13px;color:var(--muted);align-items:center}

/* 4. This week's gaps */
.after{margin-top:22px}

/* 5. Plug in your agent */
.plug{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.plug p{margin-top:18px;color:var(--muted);font-size:15px;line-height:1.7;max-width:42ch}
.codebox .tabs{margin-bottom:12px}
.codebox .code{min-height:190px}

/* 6. Pricing preview */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.plan{background:#fff;padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.plan.on{background:#FBFAFF}
.plan .kicker{color:var(--ink)}
.plan .price{font:500 30px/1.05 var(--sans);letter-spacing:-.045em}
.plan .price small{font-size:14px;color:var(--muted);letter-spacing:0;font-weight:400}
.plan ul{margin:4px 0 0;padding-left:17px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.plan .btn{margin-top:auto;align-self:flex-start}
.strip{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.strip b{color:var(--ink);font-weight:500}

/* 7. Final CTA */
.end{border-top:1px solid var(--line);padding:80px 0 24px;text-align:center}
.end h2{font:500 clamp(40px,5.4vw,72px)/1.04 var(--sans);letter-spacing:-.06em;text-wrap:balance}
.end .btn-row{justify-content:center;margin-top:28px}

@media(max-width:1000px){
 .hero,.how,.plug{grid-template-columns:1fr}
 .plans{grid-template-columns:1fr}
}
@media(max-width:640px){
 .hero{padding:36px 0 48px}
 .hero .sub{font-size:15.5px}
 .tiles,.plans{grid-template-columns:1fr}
 .hsec{padding:44px 0 48px}
 .how-diagram{padding:16px}
 .end{padding:56px 0 16px}
}