/* golo. — results updated by a tagged story */
.how-cta{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;gap:14px;align-items:center;margin:16px 20px 0;padding:16px;border-radius:22px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--l1) 14%,var(--card)),color-mix(in srgb,var(--vet) 14%,var(--card)));box-shadow:inset 0 0 0 1px var(--hair)}
.how-cta b{display:block;font:700 15px/1.2 var(--disp);letter-spacing:-.02em}
.how-cta span span{display:block;font-size:13px;color:var(--ink2);margin-top:3px;font-weight:600}
.how-cta>svg{width:18px;height:18px;fill:none;stroke:var(--ink3);stroke-width:2.4}
.how-tag,.ig-sticker{display:inline-block;padding:7px 11px;border-radius:9px;background:#fff;color:#111114;font:800 13px var(--txt);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.18);rotate:-4deg}
.ig-sticker{background:linear-gradient(90deg,#FF2E8A,#FF3D2E);color:#fff;font-size:16px;padding:9px 14px;rotate:-6deg}

.how{display:flex;flex-direction:column;gap:8px;margin:20px 20px 0}
.how-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:20px;background:var(--card)}
.how-step b{display:block;font:700 15px/1.25 var(--disp);letter-spacing:-.02em}
.how-step small{display:block;margin-top:4px;color:var(--ink2);font-size:13.5px;font-weight:500;line-height:1.45}
.hs-n{width:40px;height:40px;border-radius:13px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:900 16px var(--disp)}

.link-btn{font:800 13.5px var(--txt);color:var(--l1)}
.demo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center;margin:0 20px}
@media (max-width:380px){.demo{grid-template-columns:170px minmax(0,1fr)}}
.demo-side{display:flex;flex-direction:column;gap:8px}
.demo-btn{height:auto;min-height:50px;padding:10px 14px;gap:8px;font-size:14px;line-height:1.2;text-align:left;justify-content:flex-start;border:0;cursor:pointer}
.demo-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.btn-ghost.demo-btn{color:var(--ink);display:flex;align-items:center}

.story-mock{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 70% at 20% 0%,color-mix(in srgb,var(--c) 70%,#000),transparent 70%),radial-gradient(120% 80% at 100% 100%,#8A4DFF88,transparent 60%),#111114;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.sm-bar{position:absolute;left:10px;right:10px;top:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.sm-bar i{display:block;height:100%;border-radius:2px;background:#fff}
.sm-head{position:absolute;left:10px;right:10px;top:20px;display:flex;align-items:center;gap:7px;font-size:11px}
.sm-head .crest{width:22px;height:22px;background:#fff;border-radius:50%;padding:2px}
.sm-head b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-head small{opacity:.7}
.sm-body{position:absolute;inset:56px 10px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.sm-kick{font:900 26px/1 var(--disp);letter-spacing:-.04em;text-transform:uppercase}
.sm-score{display:flex;align-items:center;gap:8px}
.sm-score .crest.m{width:34px;height:34px;background:#fff;border-radius:50%;padding:3px}
.sm-score b{font:900 34px/1 var(--disp);letter-spacing:-.05em}
.sm-teams{font:800 9.5px var(--txt);letter-spacing:.08em;opacity:.8}
.sm-body .ig-sticker{margin-top:10px;font-size:12px;padding:7px 10px}
.sm-scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);opacity:0}
.story-mock.fresh .sm-scan{animation:sm-scan .9s ease-out 1}
.story-mock.fresh .sm-score b{animation:sm-pop .5s cubic-bezier(.2,.9,.25,1.2) 1}
@keyframes sm-scan{0%{top:-30%;opacity:1}100%{top:110%;opacity:0}}
@keyframes sm-pop{0%{scale:1.4}100%{scale:1}}

.fx.is-live{background:color-mix(in srgb,var(--l1) 6%,transparent)}
.fx-m .live{color:var(--l1)}
.fx-m .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--l1);margin-right:5px;vertical-align:2px}

.src-line{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:10px;align-items:center;margin:12px 20px 0;padding:12px 14px;border-radius:18px;
  background:color-mix(in srgb,var(--l1) 10%,var(--card));font-size:13.5px;font-weight:500;color:var(--ink)}
.src-line.soft{background:var(--card);color:var(--ink2)}
.src-line i{font-style:normal;color:var(--l1);font-weight:700}
.src-line>svg{width:16px;height:16px;fill:none;stroke:var(--ink3);stroke-width:2.4}
.src-ig{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#FF2E8A,#FF3D2E 50%,#8A4DFF);color:#fff}
.src-ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

.club-rule{margin:0 20px;padding:22px 20px;border-radius:26px;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;gap:10px}
.club-rule b{font:700 19px/1.25 var(--disp);letter-spacing:-.02em}
.copy-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:linear-gradient(90deg,#FF2E8A,#FF3D2E);color:#fff;font:900 20px var(--disp);letter-spacing:-.02em}
.copy-tag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.copy-tag span{font:700 12px var(--txt);opacity:.9}
.tt-via{font:800 10px var(--txt);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#FF2E8A,#FF3D2E);padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:2px}

.live-pip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--l1);margin-right:8px;vertical-align:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--l1) 25%,transparent)}

/* live states (Intervalo, Ao vivo) need a wider time column */
.fx{grid-template-columns:76px minmax(0,1fr)}
.fx-m b.live{font-size:12.5px;letter-spacing:-.01em}

/* match header: long club names and live labels must fit on a phone */
.mp-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.mp-t{min-width:0}
.mp-t span{max-width:100%;font-size:clamp(11px,3.4vw,15px);overflow-wrap:anywhere;line-height:1.1}
.mp-t .crest{width:clamp(52px,17vw,76px);height:clamp(52px,17vw,76px)}
.mp-s{font-size:clamp(38px,13vw,58px)}
.mp-s small{font-size:10px;letter-spacing:.1em}
.mp-t span{overflow-wrap:normal;white-space:nowrap;font-size:clamp(10px,2.9vw,15px);letter-spacing:-.04em}
.fx-m{font-size:11.5px;white-space:nowrap;letter-spacing:-.02em}