/* KickForward — public site */
:root{
  --chalk:#F4F6F2; --paper:#FFFFFF; --mist:#DDE4DC; --ink:#0F1814; --ink-2:#3A4841; --ink-3:#6E7C74;
  --pitch:#1B5A3A; --pitch-deep:#12402A; --pitch-soft:#E4F0E8; --bib:#F5B928; --bib-ink:#1B1508;
  --good:#1B5A3A; --watch:#B8860B; --loss:#B4402E; --blue:#2F6FD6;
  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --chalk:#0D1411; --paper:#151F19; --mist:#28362E; --ink:#EAEEE7; --ink-2:#B7C2B9; --ink-3:#86948B;
  --pitch:#2E8A55; --pitch-deep:#1B5A3A; --pitch-soft:#173226; --good:#3FA56A; --watch:#E0B040; --loss:#E0674F; --blue:#6B9BEA;
}}
:root[data-theme="dark"]{
  --chalk:#0D1411; --paper:#151F19; --mist:#28362E; --ink:#EAEEE7; --ink-2:#B7C2B9; --ink-3:#86948B;
  --pitch:#2E8A55; --pitch-deep:#1B5A3A; --pitch-soft:#173226; --good:#3FA56A; --watch:#E0B040; --loss:#E0674F; --blue:#6B9BEA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--chalk); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; padding-inline:20px; padding-block:0}
h1,h2,h3,h4{font-family:var(--display); line-height:1.02; margin:0; text-wrap:balance; letter-spacing:-.012em}
h1{font-size:clamp(40px,6vw,72px); font-weight:800}
h2{font-size:clamp(30px,4vw,46px); font-weight:800}
h3{font-size:22px; font-weight:700}
h4{font-size:16px; font-weight:700}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1120px; margin:0 auto}
.eyebrow{font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pitch)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dim{color:var(--ink-3)}

/* brand */
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.025em; color:var(--ink)}
.logo .mark{width:34px; height:34px; flex:none}
.logo b{font-weight:800} .logo span{font-weight:500; color:var(--pitch); margin-left:-1px}

/* nav */
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; border-bottom:1px solid var(--mist)}
nav .links{display:flex; gap:24px; font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink-2)}
nav .links a{text-decoration:none; padding-block:4px; border-bottom:2px solid transparent}
nav .links a[aria-current="page"]{border-bottom-color:var(--bib); color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:16px; padding:11px 18px; border-radius:9px; text-decoration:none; border:1.5px solid transparent; cursor:pointer}
.btn.primary{background:var(--bib); color:var(--bib-ink)}
.btn.ghost{border-color:var(--mist); color:var(--ink); background:var(--paper)}
.btn:hover{filter:brightness(1.04)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--bib); outline-offset:2px}
@media (max-width:720px){ nav .links{display:none} }

/* hero */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding-block:60px 48px}
.hero .lead{font-size:20px; color:var(--ink-2); max-width:36ch; margin-top:20px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero .under{font-size:14px; color:var(--ink-3); margin-top:16px}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:32px} }

/* device frame - every product visual sits in one */
.shot{background:var(--paper); border:1px solid var(--mist); border-radius:16px; box-shadow:0 30px 60px -34px rgba(15,24,20,.45); overflow:hidden}
.shot .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--mist); font-family:var(--display); font-size:12px; color:var(--ink-3)}
.shot .bar i{width:9px; height:9px; border-radius:50%; background:var(--mist); display:inline-block}
.shot .bar .url{margin-left:auto; font-family:var(--mono); font-size:11px; background:var(--chalk); padding:3px 9px; border-radius:6px}
.shot .body{padding:16px 18px}
.shot.tint .body{background:linear-gradient(180deg, var(--pitch-soft), var(--paper) 60%)}

/* record card bits */
.who{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.shirt{font-family:var(--mono); background:var(--ink); color:var(--chalk); padding:2px 8px; border-radius:6px; font-size:13px}
.pname{font-family:var(--display); font-weight:800; font-size:24px}
.obj{border-top:1px solid var(--mist); padding-block:12px}
.obj h3{font-size:18px}
.obj .set{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.track{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:10px 0 4px}
.track span{height:6px; border-radius:3px; background:var(--mist)}
.track span.on{background:var(--pitch)} .track span.now{background:var(--bib)}
.stages{display:grid; grid-template-columns:repeat(4,1fr); font-family:var(--display); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.stages b{color:var(--ink)}
.obj p{font-size:14.5px; color:var(--ink-2); margin-top:8px}
.clips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.clip{aspect-ratio:16/10; border-radius:8px; background:linear-gradient(160deg, var(--pitch-deep), var(--pitch)); position:relative; overflow:hidden; color:#fff}
.clip::before{content:""; position:absolute; inset:16% 22% auto 22%; height:1px; background:rgba(255,255,255,.35)}
.clip::after{content:""; position:absolute; left:50%; top:52%; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.92); transform:translate(-50%,-50%); clip-path:polygon(35% 25%, 78% 50%, 35% 75%)}
.clip em{position:absolute; left:8px; bottom:6px; font-family:var(--mono); font-style:normal; font-size:10.5px; opacity:.9}
.clip s{position:absolute; right:8px; top:6px; font-family:var(--display); font-size:10px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; opacity:.85}
.famnote{margin-top:12px; padding:10px 12px; background:var(--chalk); border-radius:8px; font-size:14px; color:var(--ink-2)}
.famnote b{font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.tiles div{background:var(--chalk); border-radius:8px; padding:9px 11px}
.tiles b{font-family:var(--mono); font-size:19px; display:block}
.tiles span{font-size:11.5px; color:var(--ink-3)}
.tiles .up{color:var(--good)}

/* strip */
.strip{border-block:1px solid var(--mist); padding-block:16px; display:flex; gap:26px; flex-wrap:wrap; justify-content:center; font-family:var(--display); font-size:14px; color:var(--ink-3)}
.strip b{color:var(--ink); font-weight:700}

/* sections */
section{padding-block:68px}
.sec-head{max-width:62ch; margin-bottom:34px}
.sec-head p{font-size:19px; color:var(--ink-2); margin-top:14px}

/* audience tabs */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--mist); margin-bottom:34px; overflow-x:auto}
.tab{font:inherit; font-family:var(--display); font-weight:700; font-size:17px; padding:12px 18px; background:none; border:0; border-bottom:3px solid transparent; color:var(--ink-3); cursor:pointer; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--bib)}
.panel[hidden]{display:none}
.panel .intro{max-width:60ch; font-size:18px; color:var(--ink-2); margin-bottom:28px}
.feat{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding-block:26px; border-top:1px solid var(--mist)}
.feat:first-of-type{border-top:0}
.feat:nth-child(even) .txt{order:2}
.feat .txt h3{font-size:26px; margin-bottom:8px}
.feat .txt p{font-size:16.5px; color:var(--ink-2); max-width:44ch}
.feat .txt .k{display:block; margin-bottom:8px}
@media (max-width:800px){ .feat{grid-template-columns:1fr} .feat:nth-child(even) .txt{order:0} }

/* mini product visuals */
.pitch{width:100%; display:block}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); margin-top:8px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle}
.ins{display:grid; gap:7px}
.ins div{display:grid; grid-template-columns:14px 1fr auto; gap:9px; align-items:baseline; background:var(--paper); border:1px solid var(--mist); border-left:3px solid var(--mist); border-radius:8px; padding:9px 12px; font-size:14px}
.ins div.g{border-left-color:var(--good)} .ins div.w{border-left-color:var(--bib)}
.ins i{font-style:normal; font-size:10px; color:var(--ink-3)} .ins .g i{color:var(--good)} .ins .w i{color:var(--watch)}
.ins .n{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.sugg{margin-top:10px; border:1.5px dashed var(--mist); border-radius:10px; padding:12px 14px; background:var(--paper)}
.sugg .lab{font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.sugg b{font-family:var(--display); font-size:17px}
.sugg p{font-size:14px; color:var(--ink-2); margin-top:3px}
.sugg .acts{display:flex; gap:8px; margin-top:9px}
.pill{font-family:var(--display); font-weight:700; font-size:12.5px; padding:5px 11px; border-radius:999px; border:1.5px solid var(--mist); background:var(--paper)}
.pill.y{background:var(--bib); border-color:var(--bib); color:var(--bib-ink)}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.chip{font-family:var(--display); font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--mist); background:var(--paper); color:var(--ink-2)}
.chip.on{background:var(--bib); border-color:var(--bib); color:var(--bib-ink)}
.rows{display:grid; gap:6px}
.row{display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; background:var(--paper); border:1px solid var(--mist); border-radius:9px; padding:9px 12px}
.row .t{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.row b{font-family:var(--display); font-size:15px; display:block}
.row small{font-size:12px; color:var(--ink-3)}
.row .w{font-family:var(--display); font-weight:700; font-size:12px; background:var(--bib); color:var(--bib-ink); padding:5px 10px; border-radius:6px}
.star{color:var(--bib); font-size:16px}
.tl{position:relative; height:54px; background:var(--chalk); border:1px solid var(--mist); border-radius:8px; overflow:hidden; margin-top:6px}
.tl .q{position:absolute; top:0; bottom:0; background:var(--pitch-soft); border-right:1px solid var(--mist)}
.tl .q span{position:absolute; left:6px; top:3px; font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.tl .m{position:absolute; transform:translate(-50%,-50%); font-size:13px; line-height:1}
.tl .m.d{top:70%; font-size:10px; color:var(--pitch)} .tl .m.a{top:38%}
.keys{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:10px}
.key{background:var(--paper); border:1px solid var(--mist); border-radius:8px; padding:8px 6px; text-align:center; font-size:11px; color:var(--ink-2)}
.key b{display:block; font-family:var(--mono); font-size:15px; color:var(--ink); background:var(--chalk); border-radius:5px; margin:0 auto 4px; width:28px}
.key.hot b{background:var(--bib); color:var(--bib-ink)}
.trend{width:100%; display:block}

/* quotes / proof */
.proof{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.proof > div{background:var(--paper); border:1px solid var(--mist); border-radius:14px; padding:22px 24px}
.proof b{font-family:var(--display); font-size:34px; display:block; line-height:1}
.proof span{font-size:14px; color:var(--ink-3)}
.proof p{font-size:15px; color:var(--ink-2); margin-top:10px}
@media (max-width:760px){ .proof{grid-template-columns:1fr} }

/* cta band */
.band{background:var(--pitch-deep); color:#F2F5EE; border-radius:18px; padding:46px 44px; display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
.band h2{color:#fff}
.band p{color:#CFDCD2; font-size:18px; margin-top:12px; max-width:46ch}
.band .side{display:grid; gap:10px}
.band .side div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:14px 16px; font-size:15px; color:#DCE6DE}
.band .side b{font-family:var(--display); color:#fff; display:block; font-size:17px}
@media (max-width:760px){ .band{grid-template-columns:1fr; padding:32px 24px} }

footer{padding-block:36px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); border-top:1px solid var(--mist); margin-top:36px}
footer .links{display:flex; gap:18px} footer a{text-decoration:none}

/* objections page */
.page-head{padding-block:56px 36px; max-width:64ch}
.page-head p{font-size:20px; color:var(--ink-2); margin-top:16px}
.qa{display:grid; gap:14px; max-width:78ch}
.qa details{background:var(--paper); border:1px solid var(--mist); border-radius:14px; padding:0}
.qa summary{cursor:pointer; list-style:none; padding:20px 24px; font-family:var(--display); font-weight:700; font-size:21px; display:flex; justify-content:space-between; gap:16px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font-weight:500; color:var(--ink-3); font-size:26px; line-height:1}
.qa details[open] summary::after{content:"–"}
.qa .ans{padding:0 24px 22px; color:var(--ink-2); font-size:16.5px; display:grid; gap:12px}
.qa .ans b{color:var(--ink)}
.qa .ans .line{padding:12px 14px; background:var(--chalk); border-left:3px solid var(--bib); border-radius:6px; font-size:15.5px}
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.cmp > div{border:1px solid var(--mist); border-radius:10px; padding:14px 16px; font-size:15px}
.cmp h4{margin-bottom:6px}
.cmp ul{margin:0; padding-left:18px; display:grid; gap:4px}
@media (max-width:640px){ .cmp{grid-template-columns:1fr} }
@media (prefers-reduced-motion: no-preference){
  .hero .shot{animation:rise .7s ease-out both}
  @keyframes rise{from{transform:translateY(12px); opacity:.6} to{transform:none; opacity:1}}
}

/* ---- redesign: stories, audience cards, flows, journey ---- */
.hero .lead{max-width:38ch}
.story{display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; padding-block:40px}
.story.flip .txt{order:2}
.story .txt h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:10px}
.story .txt p{font-size:17px; color:var(--ink-2); max-width:38ch}
.story .txt .k{display:block; margin-bottom:10px}
@media (max-width:820px){ .story{grid-template-columns:1fr; gap:22px} .story.flip .txt{order:0} }
.callout{position:relative}
.callout .tag{position:absolute; z-index:2; font-family:var(--display); font-weight:700; font-size:12px; background:var(--ink); color:var(--chalk); padding:4px 9px; border-radius:6px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.callout .tag::before{content:""; position:absolute; width:8px; height:8px; background:var(--ink); transform:rotate(45deg)}
.callout .tag.l::before{left:-4px; top:50%; margin-top:-4px}
.callout .tag.b::before{bottom:-4px; left:50%; margin-left:-4px}
@media (max-width:600px){ .callout .tag{display:none} }

/* flow: objective -> observation -> evidence -> progress */
.flow{display:grid; gap:6px}
.flow .step{background:var(--paper); border:1px solid var(--mist); border-radius:10px; padding:11px 14px}
.flow .step .lab{font-family:var(--display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.flow .step b{font-family:var(--display); font-size:17px}
.flow .step p{font-size:14px; color:var(--ink-2); margin-top:2px}
.flow .arrow{text-align:center; color:var(--ink-3); font-size:16px; line-height:1; margin:-2px 0}
.flow .quote{font-style:italic}

/* audience cards */
.aud3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--paper); border:1px solid var(--mist); border-radius:16px; padding:26px 26px 22px; display:flex; flex-direction:column; gap:14px}
.card h3{font-size:24px}
.card .who{font-size:14px; color:var(--ink-3); margin:0}
.card ol{margin:0; padding:0; list-style:none; display:grid; gap:12px; flex:1}
.card li b{font-family:var(--display); font-size:16.5px; display:block}
.card li span{font-size:14.5px; color:var(--ink-2)}
.card a.more{font-family:var(--display); font-weight:700; text-decoration:none; color:var(--pitch); margin-top:4px}
.card a.more:hover{text-decoration:underline}
@media (max-width:820px){ .aud3{grid-template-columns:1fr} }

/* journey / moments timeline */
.journey{display:grid; gap:0; position:relative; padding-left:22px}
.journey::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--mist)}
.journey .j{position:relative; padding:8px 0 8px 10px}
.journey .j::before{content:""; position:absolute; left:-20px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--pitch)}
.journey .j.gold::before{background:var(--bib); border-color:var(--bib)}
.journey .j b{font-family:var(--display); font-size:16px; display:block}
.journey .j span{font-size:13px; color:var(--ink-3)}
.journey .j .w{display:inline-block; margin-left:8px; font-family:var(--display); font-weight:700; font-size:11.5px; background:var(--bib); color:var(--bib-ink); padding:2px 8px; border-radius:5px; vertical-align:middle}

/* stage progression Sept -> Dec */
.prog{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.prog div{background:var(--paper); border:1px solid var(--mist); border-radius:10px; padding:10px 12px; text-align:center}
.prog .m{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.prog .s{font-family:var(--display); font-weight:700; font-size:13px; margin-top:4px}
.prog .fill{height:6px; border-radius:3px; background:var(--mist); margin-top:8px}
.prog .fill i{display:block; height:100%; border-radius:3px; background:var(--pitch)}
.prog .now{border-color:var(--bib); box-shadow:inset 0 0 0 1px var(--bib)}
.prog .now .fill i{background:var(--bib)}

/* audience page */
.page-hero{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-block:54px 40px}
.page-hero .lead{font-size:19px; color:var(--ink-2); max-width:38ch; margin-top:18px}
@media (max-width:860px){ .page-hero{grid-template-columns:1fr} }
.outcomes{display:grid; gap:0}
.outcome{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding-block:34px; border-top:1px solid var(--mist)}
.outcome:nth-child(even) .txt{order:2}
.outcome .txt h3{font-size:26px; margin-bottom:8px}
.outcome .txt p{font-size:16.5px; color:var(--ink-2); max-width:40ch}
@media (max-width:820px){ .outcome{grid-template-columns:1fr} .outcome:nth-child(even) .txt{order:0} }
.mid-cta{text-align:center; padding-block:30px 10px}
.mid-cta p{color:var(--ink-3); font-size:14px; margin-top:10px}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stats-row div{background:var(--chalk); border-radius:8px; padding:10px 11px}
.stats-row b{font-family:var(--mono); font-size:20px; display:block}
.stats-row span{font-size:11.5px; color:var(--ink-3)}
@media (max-width:520px){ .stats-row,.prog{grid-template-columns:1fr 1fr} }
.goalface{width:100%; display:block}

/* ---- refinement: carousels, previews, tighter rhythm ---- */
section{padding-block:56px}
.hero{padding-block:48px 40px}
.story{padding-block:30px}
.sec-head{margin-bottom:26px}
.strip{padding-block:14px}
.carousel{position:relative}
.carousel .slides{position:relative; overflow:hidden; border-radius:16px}
.carousel .slide{display:none}
.carousel .slide.on{display:block}
.carousel .cap{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:10px}
.carousel .cap b{font-family:var(--display); font-size:16px}
.carousel .cap span{font-size:14px; color:var(--ink-2)}
.carousel .ctl{display:flex; align-items:center; gap:10px; margin-top:10px}
.carousel .arrow{font:inherit; font-family:var(--display); font-weight:700; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--mist); background:var(--paper); color:var(--ink); cursor:pointer}
.carousel .arrow:hover{border-color:var(--pitch)}
.carousel .dots{display:flex; gap:6px; margin-inline:auto}
.carousel .dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--mist); cursor:pointer}
.carousel .dot.on{background:var(--pitch); width:22px; border-radius:4px}
.carousel .count{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.note-tag{display:inline-block; font-family:var(--display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--bib); color:var(--bib-ink); padding:3px 8px; border-radius:5px}
.bars{display:grid; gap:7px}
.bars .b{display:grid; grid-template-columns:110px 1fr 36px; gap:8px; align-items:center; font-size:13px}
.bars .b .t{height:12px; background:var(--chalk); border-radius:6px; overflow:hidden}
.bars .b .t i{display:block; height:100%; background:var(--pitch); border-radius:6px}
.bars .b .t i.y{background:var(--bib)} .bars .b .t i.g{background:var(--ink-3)}
.bars .b .n{font-family:var(--mono); font-size:12px; text-align:right; color:var(--ink-2)}
.card .prev{border:1px solid var(--mist); border-radius:10px; overflow:hidden; background:var(--chalk); margin:-4px 0 4px}
.card .prev .body{padding:12px 14px; font-size:13px}
.card .prev .tiles{grid-template-columns:repeat(4,1fr); margin-top:8px} .card .prev .tiles b{font-size:16px} .card .prev .tiles div{background:var(--paper)}
.card .prev .obj{padding-block:6px; border-top:0} .card .prev .obj h3{font-size:15px}
.card .prev .clips{gap:5px; margin-top:6px} .card .prev .clip::after{width:14px;height:14px}
.card .prev .rows{gap:4px} .card .prev .row{padding:6px 9px; grid-template-columns:30px 1fr auto} .card .prev .row b{font-size:13px} .card .prev .row .w{font-size:10.5px; padding:3px 7px}
.hero .shot .tiles{opacity:.9}
.small-tiles .tiles b{font-size:16px}
@media (max-width:820px){ section{padding-block:44px} }