/* Goalside homepage. Uses the colour tokens from page.css, so dark mode comes for free. */
body{margin:0}
.home a{color:inherit}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero{padding:56px 0 48px}
.hero .eyebrow{margin:0 0 14px}
.hero h1{font-size:clamp(40px,5.4vw,66px);line-height:1;letter-spacing:.005em;margin:0}
.hero .lead{font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--ink-2);max-width:54ch;margin:20px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.note{margin:14px 0 0;color:var(--ink-2);font-size:15px}
.art{color:var(--ink-2)}
.pitch{width:100%;height:auto;display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;box-sizing:border-box}
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.stats ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stats li{display:flex;flex-direction:column;gap:2px}
.stats b{font:700 clamp(36px,6vw,54px)/1 var(--display)}
.stats span{color:var(--ink-2);font-size:15px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.blk{padding:64px 0}
.blk.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blk h2{font-size:clamp(32px,5vw,48px);margin:0}
.sec{color:var(--ink-2);margin:10px 0 0;max-width:60ch}
.ages{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:28px}
.age{display:grid;gap:4px;padding:20px;border:2px solid var(--ink);border-radius:16px;background:var(--ground);text-decoration:none;color:var(--ink)}
.age:hover{background:var(--ink);color:var(--ground)}
.age:hover .f,.age:hover .n{color:inherit}
.age .a{font:700 46px/1 var(--display)}
.age .f{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.age .t{font-size:17px;margin-top:6px}
.age .n{font-size:14px;color:var(--ink-2);margin-top:8px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.feat>div{background:var(--ground);border:1px solid var(--line);border-radius:16px;padding:22px}
.feat h3{font-size:26px;margin:0 0 8px}
.feat p{margin:0;color:var(--ink-2);font-size:16px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;max-width:820px}
.tier{min-width:0;border:2px solid var(--line);border-radius:18px;padding:26px;background:var(--ground)}
.tier.main{border-color:var(--ink)}
.tier h3{font-size:30px;margin:0}
.tier .price{font:700 40px/1.1 var(--display);margin:8px 0 6px}
.tier ul{padding-left:20px;margin:10px 0 20px}
.tier li{margin:6px 0}
.blk p{max-width:64ch}
@media (max-width:860px){
 .hgrid{grid-template-columns:1fr}
 .hero{padding:36px 0 36px}
 .feat{grid-template-columns:1fr 1fr}
 .stats ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
 .feat,.plans{grid-template-columns:minmax(0,1fr)}
 .blk{padding:44px 0}
  .cta }

.band{padding:56px 0;text-align:left;border-top:1px solid var(--line)}
.band h2{font-size:clamp(30px,5vw,44px);margin:0}

/* hero slideshow */
.show{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-sizing:border-box}
.show .pitch{border:0;background:none;padding:0;border-radius:0}
.slides{display:grid}
.slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.slide.on{opacity:1;visibility:visible}
.show:not([data-js]) .slide{opacity:1;visibility:visible;grid-area:auto;margin-bottom:18px}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.slide .eyebrow{margin:0 0 6px;font-size:14px}
.slide h3{font-size:clamp(28px,3.4vw,38px);margin:0 0 10px}
.pts{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.pts li{display:grid;grid-template-columns:7rem 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pts b{font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.pts span{font-size:16px}
.kitline{margin:12px 0 0;color:var(--ink-2);font-size:15px;max-width:none}
.kitline b{color:var(--ink)}
.stg{list-style:none;counter-reset:s;margin:0;padding:0;border-top:3px solid var(--ink)}
.stg li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline}
.stg li::before{content:counter(s);font:700 22px/1 var(--display)}
.stg b{font-weight:700}
.stg span{color:var(--ink-2);font-size:15px}
.bar{display:flex;gap:3px;margin-top:14px;height:12px}
.bar i{display:block;background:var(--ink);border-radius:3px}
.bar i.gap{background:none;border:2px dashed var(--line)}
.ctl{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.dots{display:flex;gap:4px}
.dots button{width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.dots button::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--ink);box-sizing:border-box}
.dots button[aria-current="true"]::after{background:var(--ink)}
.pp{min-height:44px;padding:0 14px;border:0;background:none;color:var(--ink);font:700 15px var(--body);cursor:pointer;text-decoration:underline}
.dots button:focus-visible,.pp:focus-visible{outline:3px solid #F26A1B;outline-offset:2px}
@media (max-width:560px){.pts li{grid-template-columns:1fr;gap:2px}}

.show{color:var(--ink)}
.show .pitch{color:var(--ink-2)}