/* /sponsor/ page (sponsor.mjs). Booking planner styles live in public/js/book.js. */
.sp{--y:#F5E900;--bg:#121212;--card:#181818;--line:#2a2a2a;--mute:#9a9a9a;--soft:#c9c9c9;color:#fff;font-family:Inter,Helvetica,Arial,sans-serif}
.sp *{box-sizing:border-box}
.sp>*{max-width:1120px;margin-left:auto;margin-right:auto}
.sp a{color:inherit}
.sp h1,.sp h2,.sp h3{font-family:inherit;color:#fff;margin:0}
.sp-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin:0 0 12px}
.sp h2{font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:700;max-width:760px}
.sp-intro{color:var(--soft);font-size:16px;line-height:1.55;max-width:640px;margin:14px 0 0}

/* buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--y);color:#000;border:0;border-radius:999px;padding:16px 28px;font:700 15px/1 Inter,Helvetica,Arial,sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s;white-space:nowrap}
.sp-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.sp-btn:focus-visible,.sp-link:focus-visible,.sp summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sp-btn-sm{padding:12px 18px;font-size:14px}
.sp-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #3a3a3a}
.sp-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--y);filter:none}
.sp-link{color:var(--soft);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid #444;padding-bottom:2px}
.sp-link:hover{color:#fff;border-color:#fff}

/* hero */
.sp-hero{padding:6px 0 56px}
.sp-home{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.02em;font-size:14px;color:#fff;opacity:.85;margin-bottom:44px}
.sp-home:hover{opacity:1}
.sp-home img{border-radius:7px}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center}
.sp h1{font-size:clamp(38px,5.2vw,68px);line-height:1;letter-spacing:-.035em;font-weight:700}
.sp-sub{color:var(--soft);font-size:17px;line-height:1.55;margin:22px 0 30px;max-width:580px}
.sp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.sp-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.sp-stats div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.sp-stats dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
.sp-stats dd{margin:10px 0 4px;font-size:clamp(30px,3.2vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1}
.sp-stats p{margin:0;color:var(--mute);font-size:13px}

/* sections */
.sp-sec{padding:72px 0 0}
.sp-sec+.sp-sec{border-top:0}

/* placements */
.sp-places{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.sp-place{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:80px}
.sp-place-b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.sp-place-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sp-place h3{font-size:22px;letter-spacing:-.015em;font-weight:700}
.sp-price{margin:0;font-size:22px;font-weight:700;color:#fff;white-space:nowrap}
.sp-price span{font-size:14px;color:var(--mute);font-weight:500;margin-left:5px}
.sp-lead{color:var(--soft);font-size:15px;line-height:1.5;margin:10px 0 14px}
.sp-place ul{list-style:none;margin:0 0 18px;padding:0}
.sp-place li{position:relative;padding-left:22px;color:var(--soft);font-size:14px;line-height:1.5;margin:6px 0}
.sp-place li:before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(-45deg)}
.sp-place li a{text-decoration:underline;text-underline-offset:3px}
.sp-here{font-size:13px;color:var(--y);margin:-6px 0 16px}
.sp-place-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.sp-avail{margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--soft);font-weight:500}
.sp-avail i{width:8px;height:8px;border-radius:50%;background:#555;flex:none}
.sp-avail.ok i{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.15)}
.sp-avail.low i{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.15)}
.sp-avail.out i{background:#f87171}

/* placement previews: grey wireframes, the sponsor part in see-through yellow with a yellow outline, gently moving */
.mk{position:relative;aspect-ratio:16/8.4;background:#0f0f0f;border-bottom:1px solid var(--line);overflow:hidden;display:block}
.mk i,.mk b,.mk span{display:block}
.mk-sp{background:rgba(245,233,0,.08) !important;box-shadow:inset 0 0 0 1.5px rgba(245,233,0,.8)}
.mk-sp b{border:1px solid var(--y);color:var(--y);font:700 7px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:9px;padding:3px 6px}
.mk-sp .mk-logo{background:var(--y) !important;border-radius:2px}
.mk-sp .mk-line{background:rgba(245,233,0,.38) !important;border-radius:3px}
.mk-sp .mk-btn{background:var(--y) !important}
/* top bar: pinned while the page scrolls under it */
.mk-site{padding:0 18px 18px}
.mk-top{position:relative;z-index:2;height:30px;margin:10px -6px 12px;border-radius:9px;display:flex !important;align-items:center;gap:10px;padding:0 12px}
.mk-top.mk-sp{position:absolute;left:12px;right:12px;top:10px;margin:0;background:rgba(22,22,10,.86) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mk-top .mk-logo{width:38px;height:9px}
.mk-top .mk-line{width:120px;height:5px}
.mk-top.mk-dim{background:#1a1a1a;margin:10px -6px 12px}
.mk-top.mk-dim b{border:1px solid #333;border-radius:9px;width:34px;height:13px}
.mk-top.mk-dim .mk-logo{background:#2e2e2e;border-radius:2px}.mk-top.mk-dim .mk-line{background:#262626;border-radius:3px}
.mk-view{position:absolute;inset:0;overflow:hidden;padding:0 18px}
.mk-roll{animation:mkRoll 14s linear infinite}
.mk-half{padding-top:52px}
.mk-word{height:38px;background:#1d1d1d;border-radius:6px;margin-bottom:8px}
.mk-tiles{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-half .mk-tiles>i{height:58px}

.mk-tiles>i{background:#1d1d1d;border-radius:6px}
@keyframes mkRoll{to{transform:translateY(-50%)}}
/* grid card: two carousels of the sponsor's work, one up, one down */
.mk-tiles-grid{height:calc(100% - 52px);grid-template-rows:1fr 1.15fr 1fr}
.mk-card{grid-column:1/-1;position:relative;display:flex !important;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:0 0 0 14px;overflow:hidden;border-radius:6px}
.mk-card>b{flex:none}
.mk-card>.mk-logo{width:46px;height:9px}
.mk-card>.mk-line{width:30%;height:5px}
.mk-car{position:absolute;top:5px;bottom:5px;right:5px;width:52%;display:grid !important;grid-template-columns:1fr 1fr;gap:5px;overflow:hidden}
.mk-col{display:flex !important;flex-direction:column;gap:5px;animation:mkUp 9s linear infinite}
.mk-col+.mk-col{animation-name:mkDown}
.mk-col i{flex:none;height:34px;border-radius:4px;background:rgba(245,233,0,.16);box-shadow:inset 0 0 0 1px rgba(245,233,0,.28)}
@keyframes mkUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 2.5px))}}
@keyframes mkDown{from{transform:translateY(calc(-50% - 2.5px))}to{transform:translateY(0)}}
/* Monday issue: the email scrolls past the sponsor block */
.mk-mail{display:block}
.mk-paper{position:absolute;left:50%;top:16px;width:52%;margin-left:-26%;background:#191919;box-shadow:inset 0 0 0 1px #2a2a2a;border-radius:7px;padding:12px;display:flex !important;flex-direction:column;gap:7px;animation:mkRead 10s ease-in-out infinite alternate}
.mk-paper>i{background:#2a2a2a;border-radius:3px;flex:none}
.mk-h{height:12px;width:60%}
.mk-paper .mk-by{height:14px;border-radius:4px}
.mk-img{height:44px;background:#242424 !important}
.mk-t{height:5px;width:90%}.mk-s{width:70%}
.mk-spon{border-radius:6px;padding:10px;display:flex !important;align-items:center;gap:7px}
.mk-spon .mk-logo{width:30px;height:9px}
.mk-spon .mk-line{flex:1;height:5px}
.mk-spon .mk-btn{width:28px;height:12px;border-radius:6px}
@keyframes mkRead{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-30%)}}
.mk-gif{background:#000}
.mk-gif img{width:100%;height:100%;object-fit:cover;display:block}
.mk-cap{position:absolute;left:12px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:7px}
@media (prefers-reduced-motion:reduce){.mk-roll,.mk-col,.mk-paper{animation:none}}

/* bundles */
.sp-bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.sp-bundle{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;display:flex;flex-direction:column}
.sp-bundle.is-pick{border-color:var(--y)}
.sp-badge{position:absolute;top:-11px;left:22px;background:var(--y);color:#000;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 10px}
.sp-bundle h3{font-size:20px;font-weight:700}
.sp-what{color:var(--soft);font-size:14px;margin:6px 0 16px;line-height:1.45}
.sp-bprice{margin:0 0 12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.sp-bprice b{font-size:34px;letter-spacing:-.03em}
.sp-bprice s{color:var(--mute);font-size:16px}
.sp-bprice span{font-size:12px;font-weight:700;color:#000;background:#4ade80;border-radius:999px;padding:3px 8px}
.sp-why{color:var(--mute);font-size:14px;line-height:1.5;margin:0 0 20px}
.sp-bundle .sp-btn{margin-top:auto;width:100%}

.sp-callrow{margin:18px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--soft);font-size:15px}
/* results */
.sp-results{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sp-res{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px}
.sp-res-who{display:flex;align-items:center;gap:8px;margin:0 0 26px;min-height:26px;flex-wrap:wrap}
.sp-res-who img{height:22px;width:auto}
.sp-res-who img[alt="Wegrow"]{height:18px}
.sp-res-who img.r-mark{height:18px}
.sp-res-who span{font-weight:600;font-size:16px}
.sp-res-who em{font-style:normal;margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
.sp-res-big{font-size:36px;font-weight:700;letter-spacing:-.03em;margin:0 0 6px;color:var(--y);line-height:1}
.sp-res-body{margin:0;color:var(--soft);font-size:14px;line-height:1.5}

/* audience */
.sp-crowd{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px;align-items:center;margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px}
.sp-crowd-n>div{margin-bottom:18px}
.sp-crowd-n b{display:block;font-size:clamp(40px,4.4vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.sp-crowd-n b.y{color:var(--y)}
.sp-crowd-n span{display:block;color:var(--soft);font-size:14px;margin-top:6px}
.sp-crowd-k{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;color:var(--mute);font-size:12.5px}
.sp-crowd-k span{display:flex;align-items:center;gap:7px}
.sp-crowd-k i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}.sp-crowd-k i.y{background:var(--y)}
.sp-crowd canvas{width:100%;height:240px;display:block}
@media (max-width:760px){.sp-crowd{grid-template-columns:1fr;padding:20px;gap:18px}.sp-crowd canvas{height:220px}.sp-crowd-n{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sp-crowd-n>div{margin:0}.sp-crowd-k{grid-column:1/-1}}

.sp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.sp-cols>div{border-top:2px solid var(--y);padding-top:18px}
.sp-cols h3{font-size:17px;margin-bottom:8px}
.sp-cols p{margin:0;color:var(--soft);font-size:15px;line-height:1.55}

/* thursday */
.sp-thx{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.sp-thx a{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;transition:border-color .2s}
.sp-thx a:hover{border-color:var(--y)}
.sp-thx .tx-img{aspect-ratio:16/9;background:#000;overflow:hidden;display:block}
.sp-thx .tx-img img{width:100%;height:100%;object-fit:cover;display:block}
.sp-thx .tx-sw{display:flex;height:100%}.sp-thx .tx-sw span{flex:1}
.sp-thx .tx-d{padding:16px 18px 0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sp-thx .tx-t{padding:6px 18px 0;font-size:17px;font-weight:700;line-height:1.3}
.sp-thx .tx-l{padding:12px 18px 18px;margin-top:auto;color:var(--y);font-weight:700;font-size:14px}
.sp-next{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sp-next>p{margin:0;color:var(--soft);font-size:15px;width:100%}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px}
.sp-chips span{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;color:#ddd}

/* how it works + rules */
.sp-steps{list-style:none;counter-reset:st;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp-steps li{counter-increment:st;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.sp-steps li:before{content:counter(st);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--y);color:#000;font-weight:700;margin-bottom:18px}
.sp-steps b{display:block;font-size:18px;margin-bottom:8px}
.sp-steps span{color:var(--soft);font-size:15px;line-height:1.5}
.sp-rules{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp-rules li{color:var(--mute);font-size:14px;line-height:1.5;padding:18px 0 0;border-top:1px solid var(--line)}
.sp-rules b{color:#fff;display:block;margin-bottom:4px}

/* faq */
.sp-faq{margin-top:28px;border-top:1px solid var(--line);max-width:860px}
.sp-faq details{border-bottom:1px solid var(--line)}
.sp-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:17px;font-weight:600;position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--y);border-bottom:2px solid var(--y);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.sp-faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.sp-faq p{margin:0 0 22px;color:var(--soft);font-size:15.5px;line-height:1.6;max-width:720px}
.sp-faq a{color:var(--y)}

/* end */
.sp-end{margin-top:80px !important;background:var(--card);border:1px solid var(--y);border-radius:28px;padding:56px 40px;text-align:center}
.sp-end h2{margin:0 auto;max-width:640px}
.sp-end p{margin:16px auto 28px;max-width:560px;font-size:16px;line-height:1.5;color:var(--soft)}
.sp-end a{color:var(--y);font-weight:600}
.sp-end .sp-foot{margin:26px auto 0;font-size:12.5px;color:var(--mute)}
.sp+*{margin-top:0}
.sp{padding-bottom:40px}

@media (max-width:1000px){
.sp-hero-grid{grid-template-columns:1fr;gap:36px}
.sp-results{grid-template-columns:1fr 1fr}
.sp-rules{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.sp-hero{padding-bottom:36px}
.sp-home{margin-bottom:28px}
.sp-sub{font-size:16px}
.sp-ctas .sp-btn{width:100%}
.sp-ctas .sp-link{margin:0 auto}
.sp-places,.sp-bundles,.sp-cols,.sp-thx,.sp-steps{grid-template-columns:1fr}
.sp-sec{padding-top:56px}
.sp-stats div{padding:16px}
.sp-results{grid-template-columns:1fr}
.sp-rules{grid-template-columns:1fr}
.sp-place-f{flex-direction:column;align-items:stretch}
.sp-place-f .sp-btn{width:100%}
.sp-end{padding:40px 22px;border-radius:22px}
.sp-end .sp-btn{width:100%}
.mk-paper{width:66%;margin-left:-33%}
}

/* sponsor form (#sponsor-form), the page's one call to action */
.sp a.sp-btn{color:#000}
.sp a.sp-btn-ghost{color:#fff}
.sp-form-sec{margin-top:80px !important;background:var(--card);border:1px solid var(--y);border-radius:28px;padding:48px 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;scroll-margin-top:90px}
.sp-form-head .sp-intro a{color:var(--y);font-weight:600}
.sp-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.sp-f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-f{display:flex;flex-direction:column;gap:8px;min-width:0;border:0;padding:0;margin:0}
.sp-f>span,.sp-f legend{font-size:13px;font-weight:600;color:var(--soft);padding:0}
.sp-f em{font-style:normal;font-weight:500;color:var(--mute);margin-left:4px}
.sp-f input,.sp-f select,.sp-f textarea{width:100%;background:#0f0f0f;border:1px solid var(--line);border-radius:12px;color:#fff;font:500 15px/1.4 Inter,Helvetica,Arial,sans-serif;padding:13px 14px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.sp-f select{background-image:linear-gradient(45deg,transparent 50%,#9a9a9a 50%),linear-gradient(135deg,#9a9a9a 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.sp-f textarea{resize:vertical;min-height:110px}
.sp-f input::placeholder,.sp-f textarea::placeholder{color:#5f5f5f}
.sp-f input:focus,.sp-f select:focus,.sp-f textarea:focus{outline:0;border-color:var(--y);box-shadow:0 0 0 3px rgba(245,233,0,.15)}
.sp-f [aria-invalid=true]{border-color:#f87171}
.sp-chips-in{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.sp-chips-in label{position:relative;cursor:pointer}
.sp-chips-in input{position:absolute;opacity:0;width:1px;height:1px}
.sp-chips-in span{display:inline-flex;align-items:center;gap:8px;border:1px solid #3a3a3a;border-radius:999px;padding:10px 14px;font-size:14px;font-weight:500;color:#e6e6e6;transition:border-color .15s,background .15s,color .15s}
.sp-chips-in span:before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid #5a5a5a;flex:none;transition:all .15s}
.sp-chips-in label:hover span{border-color:#5a5a5a}
.sp-chips-in input:checked+span{border-color:var(--y);background:rgba(245,233,0,.08);color:#fff}
.sp-chips-in input:checked+span:before{background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.6l4.6-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--y)}
.sp-chips-in input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.sp-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-f-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.sp-f-foot .sp-btn{min-width:160px}
.sp-f-foot .sp-btn[disabled]{opacity:.6;cursor:default;transform:none}
.sp-f-note{margin:0;font-size:14px;color:var(--soft);flex:1;min-width:200px}
.sp-f-note.is-err{color:#fca5a5}
.sp-f-note a{color:var(--y)}
.sp-form .sp-foot{margin:6px 0 0;font-size:12.5px;color:var(--mute)}
.sp-sent{align-self:center}
.sp-sent h3{font-size:28px;letter-spacing:-.02em;margin:0 0 12px}
.sp-sent p{color:var(--soft);font-size:16px;line-height:1.55;margin:0}
.sp-sent b{color:#fff}
.sp-sent a{color:var(--y)}
@media (max-width:860px){
  .sp-form-sec{grid-template-columns:1fr;gap:28px;padding:36px 22px;border-radius:22px}
  .sp-f-row{grid-template-columns:1fr}
}

/* top bar preview: a cursor rests on the bar and the drop-down card opens (same as the live bar), then closes */
.mk-top .mk-chev{width:7px;height:7px;margin-left:2px;border-right:1.5px solid var(--y);border-bottom:1.5px solid var(--y);transform:translateY(-2px) rotate(45deg);opacity:.8}
.mk-drop{position:absolute;left:12px;right:12px;top:44px;height:50%;z-index:3;border-radius:9px;display:flex !important;gap:12px;padding:12px;transform-origin:top center;opacity:0;animation:mkDrop 9s ease-in-out infinite}
.mk-drop.mk-sp{background:rgba(22,22,10,.95) !important}
.mk-drop-copy{width:32%;display:flex !important;flex-direction:column;justify-content:center;gap:7px}
.mk-drop-copy b{align-self:flex-start}
.mk-drop .mk-logo{width:48px;height:10px;flex:none}
.mk-drop .mk-h2{height:7px;width:92%;background:rgba(255,255,255,.5);border-radius:3px}
.mk-drop .mk-s2{width:64%}
.mk-drop .mk-btn{width:58px;height:17px;border-radius:9px;margin-top:3px}
.mk-strip{flex:1;position:relative;overflow:hidden;border-radius:6px}
.mk-strip>span{display:flex !important;gap:6px;height:100%;width:max-content;animation:mkSide 7s linear infinite}
.mk-strip i{height:100%;aspect-ratio:4/3;border-radius:5px;background:rgba(245,233,0,.16);box-shadow:inset 0 0 0 1px rgba(245,233,0,.3)}
.mk-cur{position:absolute;z-index:4;width:13px;height:18px;background:#fff;clip-path:polygon(0 0,0 78%,24% 60%,40% 100%,56% 93%,40% 56%,72% 56%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));opacity:0;animation:mkCur 9s ease-in-out infinite}
/* top bar preview: same 3D hand cursor as the How it works steps */
.mk-cur{width:29px;height:36px;margin:-1px 0 0 -5px;background:url("data:image/webp;base64,UklGRkgKAABXRUJQVlA4WAoAAAAQAAAASwAAXwAAQUxQSHEEAAABoHBrmyFJntAb8cXatm3btm3btm3btm3b5thG63RFfN+7qM7MzqiImAA0DcDmD/dN1vHjlUsDHlkLVniTPXZcPx18ToJdO2lqJC2Rvy0Kn49gUzKx5wYHzu18Lt7NOsISizb4ns9GcC0jize4H0IeDjOMNSuR7JdJXB4B2zCxrHFFSCbnWCwVeSpCJvexXOIr8JncW4Fx+NRweZxdAZVrwuexI1O5yFMRcvCYq5NWKvF1+Bzg8DFTKeO46eH+5ySEEMTVJeAyxlJUbggBIOhRaiLYglou8jwX4Dzc6sdfeOFJG04COABOgkgQV53DrG20Uolvw3tg92/Z9JfDAHGCHqUyeHxMLWWcMFPAVA+RFmOMSr4xM4AptrnsmWcv324q+MoCLmcsxcgTMe27jMqm2uA3i0xz9J9s2ucgeFeRYEumcmbjzv2RkQUT2waRKaYUE3kHxFXjMGsbrVRTZWElk7KpNngTJpUQxJWCx7tMFVhUljRlwQZ3Q1NxZQLOY6ygl007Tt5g771WnhxwJQQbUuvWc59zJocv5jD9WFrtLGpMRn41J3wheLzDVLvm2s3vp/SuUMB5jJmQ3bwEoZBgQ2o2qqOmhSviMP1oWi5UbgopAsHLTNlEOx6hUMCpjPnwrhKCNWnZJL4HX8hh6uHUXJT9JoErAsErTLmQ3fOVCDiVMRvlBpBCgjWp2UQehVDIYZrh1HxuKAHBM4y5JL4GKRZwTD7KvwKKC1Y0y4XsmguukMMUA2m5KNeBFILgacZcIg9EKBZwTE6Xl/FYkWaZJL4IKeYw+WDmovxVXDEIHmXKxNg5F3yxgIMZM6FyY0gxj6XUcok8DaEYMNlAajbPQUp4fMiUibL/5HDFAh5izMTYWBC+zC3ZULkWpMzZOa1b7vh8Io9FKOC8TCYn5/QspJkPaHp0Psph08D9TwDMtvTq22z/FjUXKteGAM5hvvO+nMDMI8/AJHAOJ44nSUtJM0p8DeJEniCjGjM3jpoGgsfZMLZA5VrAQWywJUaeihlGqLaGxJdwJJWt0Th0mresVdC4/jBaq0i8wNgylW+k1mHs05fWKsj2pyy1Dm5HbR0pfMPUIozDsDaTtgbld4LDydgSkt2JgEO7yKj5KfcCBMu9GklNlpdx7GwABFjm8r9IRs0p8hH833tgih2eaieT5qNctQngA4AFTvqBTLlEvgBpBjgRQPb4kykPS50LuwIAfACmuYspiwaPg6BsAE5iyqDBZxFQ3gU8ylS7yB+n9q4CeD93m1rNIv+YGx6VCk5jrFeDv84NQbVOJv2GqUaa+PaMEFTtsehE1bpYJK8UeFQv2JZJ65HIPtvCefRmwMFkqkEiu66YDuLQuwE7tjFa71gi7fElAEGvByzzMRm1MtNI2utrAOJQQ4GcOJRMScuZpkiy7cFVAfGopwdmPqcPSWpSM5JmqikZSeoXJy8AeI/6CjDFdvf9pSzb9edTxywBQDxq7QKAKVY5+u4PB4wgOwYP/PT1u07ZbrHJACB4VAkAVlA4ILAFAABQHgCdASpMAGAAPi0ShkKhoQ4lZ2wMAWJaQDQxMuKHI1zyXOZ9Zn6AH63dY9+1PsAfwb+2/+3CiuO35HpUhNVI5/Uf8l6ruf96W9gP+Pfzr/a/2P2nfXh6Fn6oB/j1YUWm4y/uABT3adFOavOovOWfw7rdXQd40aZEQN32EArO7EuUHZr2oM6nED9Gfp2FyPDKIYqeVVsafZxQPnZVtSmztSpq1uNsK5hGaHmmmldtBzFSbnhyzQV325NjN8iW6lDx37WoDcdB46nQuIatZU3nZ/vj4skrul1dc8gtnuLBzG7Pzkhq2WhgzDYjwX4bOhJHuf2Vi3ctDWrMAAD+/7WCGXmMtRZPCGQlkqeBUJEllVS3IieR+SGRwHV+g5PWIUaOPZpU7cS2RdugHfRwNaf3RXZoOE4C1Yob1b7GOw2BaQ8n8ePU8R9Z89f19MDsoFgG+770c/K3VVKa1kBhOkXhlQsxG0mwYh62GV9e1o2H/DD7MmZe8SLN3QabETp7Q8rOjHtr0PdCAs27Kkpnvj2LQ5l1//+iIiMwSi8FVO//76e91Pe90CStdeICKVAit+ItARfxyAPPpnqPIURkIOazPTHWGXBYm6dkwIkLFXLvfX497ubm+fjMJIvXKbWdQdQAJHlwRa6Qu0fh19K6J/13FPeIpWOlRn/Jgqo4uINmdDtnzFe1/l9uH3y+U63b9mMP8VTuk8+OT4KRZMSCpnnM6mMMzWWiuZxXFzKkxuf8b0NM+Yl7ah13mtidVLfGL1a/pZwfePfHD4Y8hquIEH2WK3ThdYp2Mj3t23491cPJkyjbTw9bRO+fNoJJz/Kuf8EUmGvxRPv920G2l6TDXUrK/pdcHh/H33CzBtKbrAQ3pS6qTfU7OvyK/Tih+8wj6wb7+aoI48+6rrss/0dPm2ZTHKXaCFiKyFzOcG/ee5OcDWyM8NAFrm4JaBkpdy5i/GCfUH1xjnG7Jk/fF2hSV8msKOsh/4AQVvA/J6E94y8I6EBBgk/4T74aDUzw7bTIR8vy7+jjOfI5ULGtLdECPd9j+d/Wrbw8kaxx/AtYUZK8dgDmn0spG8ajbnQ49z///tDB58gO3jF0z7LeeECFrLpSZH7US5yNUqEvLcuHC3MANgozeR14ykuaoEPqUbxwqBMUxrzRKMaoNW+tJQfmWBlsvUkcDgHoICmUnmLDq049Wb9SnEjGzBdoY5DkdvZlzJjntvmb/toW5bjfxlNH4P+DXx5nSH/51Tz9pH5qZAyqn8moBMR6b42MYHiPzfjdo0zI+QvWVZlTsxJOPtQj5jA8p/0cafcLj7NRaP8uHTNe7ITwAzUp1cB+53gv3I6E//BZ5/5yGHO7VjQIxulHDxSsiw3s17POP+HY5GNu85SbOc6C+t2+hIsJTVKd/U7h3lUyxVsrI+ISIJXJK1893Alw5I0fyAawC/9aSDigQmvB+PjLrd/6qQ65VTJNZTgjH5Nc1rkbpu/aX1xxEcoP1fgBmo2OLD0ZDXZP8NNLPeHLqBG5JHlt+xO//ARBXBZB41vyVaDiZ5WL1SFW3bljUyIsnMBeIlrXxazU7Dc2Qv1lc9qiePt4VEIzL0vXf8ISR0GyrwnTlGvOSmynS5wHDguqT5KCcB8l+j+wY5wqEQfx2V2z7umHHGsF2hnEv/sDJ+Wp5vQc/lxcPgWqfXKjeWJ0sjQWGaZJxeuBiSqJN7HUXP3DF998/+FYeIPegro9LBwuMs3s1bkem8b3mN1vzRKQxfyNyzBN7lQs/kqiMFroIgAXilCcF+fyubno2QgEmM0J7uAVWQTU5SeiwRcQq+R7EgQ09C/aqb+LJ//gR5qnUs/qU4C+P3ROKBfOUBBRbPLyY4FaKtc2/7EthP9V4D7HKr03sfDBIQsTnWthgdyJ81v0xv9WXPeuFy8OcpsK//EP3sGQCKfOGVaJ9fgHt8AA") center/contain no-repeat;clip-path:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
@keyframes mkSide{to{transform:translateX(calc(-50% - 3px))}}
@keyframes mkDrop{0%,34%{opacity:0;transform:translateY(-8px) scaleY(.9)}40%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-8px) scaleY(.9)}}
@keyframes mkCur{0%,10%{left:80%;top:88%;opacity:0}16%{opacity:1}28%,40%{left:52%;top:20px;opacity:1}58%,80%{left:66%;top:44%;opacity:1}90%{left:84%;top:92%;opacity:1}96%,100%{left:84%;top:92%;opacity:0}}
@media (prefers-reduced-motion:reduce){.mk-drop{animation:none;opacity:1}.mk-strip>span{animation:none}.mk-cur{display:none !important}}
.sp-sec.sp-form-sec{border:1px solid var(--y)}

/* section labels on this page: an outlined pill (same family as the "Sponsor" tag in the top bar), sentence case */
.sp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#e9e9e9;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px 7px 12px;margin:0 0 18px;line-height:1}
.sp-kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--y);flex:none}

/* hero stats: glass cards over a box of real project covers scrolling slowly */
.sp-statbox{position:relative;border-radius:26px;overflow:hidden;padding:14px;border:1px solid var(--line);background:#0c0c0c;isolation:isolate}
.sp-statbg{position:absolute;inset:-10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;z-index:-2;transform:rotate(-6deg) scale(1.18)}
.sp-statbg:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(12,12,12,.35),rgba(12,12,12,.75));z-index:1}
.sb-col{display:flex;flex-direction:column;gap:10px;animation:sbUp 60s linear infinite}
.sb-c1{animation-name:sbDown;animation-duration:70s}
.sb-c2{animation-duration:54s}
.sb-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:#1a1a1a}
@keyframes sbUp{to{transform:translateY(calc(-50% - 5px))}}
@keyframes sbDown{from{transform:translateY(calc(-50% - 5px))}to{transform:translateY(0)}}
.sp-statbox .sp-stats div{background:rgba(22,22,22,.48);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sp-statbox .sp-stats dt{color:#c9c9c9}
.sp-statbox .sp-stats p{color:#bdbdbd}

/* sponsors and partners: full-width row under the hero, bigger logos, and a "+ Your brand" box that goes to the form */
.sp-trust{margin-top:56px}
.sp-trust>p{margin:0 0 18px;color:var(--mute);font-size:14px;font-weight:500}
.sp-trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px}
.sp-trust .t-logo{height:30px;width:auto;opacity:.88;display:block}
.sp-trust .t-fr{display:flex;align-items:center;gap:8px;height:auto}
.sp-trust .t-fr img{height:28px;width:auto}
.sp-trust .t-fr b{color:#fff;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.sp-trust .t-newlyn{height:36px}
.sp-trust .t-fontfabric{height:32px}
.sp-trust .t-logolounge{height:27px}
.sp a.t-join{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border:1.5px dashed rgba(255,255,255,.28);border-radius:14px;color:#d9d9d9;font-size:16px;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.sp a.t-join span{font-size:22px;font-weight:400;line-height:1;color:var(--y)}
.sp a.t-join:hover{border-color:var(--y);color:#fff;background:rgba(245,233,0,.06)}

/* how it works: numbers light up one after another, each card has a small looping animation */
.sp-steps li:before{background:#2a2a2a;color:#8a8a8a;transition:background .4s,color .4s}
.sp-steps.is-in li:before{background:var(--y);color:#000}
.sp-steps.is-in li:nth-child(2):before{transition-delay:.35s}
.sp-steps.is-in li:nth-child(3):before{transition-delay:.7s}
.sp-steps .st-anim{position:relative;display:block;height:132px;margin:0 0 20px;border-radius:14px;background:#101010;border:1px solid #232323;overflow:hidden}
.sp-steps .st-anim i,.sp-steps .st-anim span{display:block}
.st-form{padding:16px 18px}
.st-f{height:12px;border-radius:6px;background:#1e1e1e;margin-bottom:9px;overflow:hidden}
.st-f i{height:100%;width:0;background:rgba(255,255,255,.35);border-radius:6px;animation:stType 6s ease-in-out infinite}
.st-f2{width:72%}.st-f2 i{animation-name:stType2}
.st-chips{display:flex !important;gap:6px;margin:12px 0}
.st-chips i{width:44px;height:16px;border-radius:9px;border:1px solid #3a3a3a;animation:stChip 6s ease infinite}
.st-chips i:nth-child(2){width:58px;animation-name:stChip2}.st-chips i:nth-child(3){width:36px;animation-name:none}
.st-send{position:absolute !important;right:16px;bottom:14px}
.st-btn{width:64px;height:22px;border-radius:12px;background:var(--y);animation:stPress 6s ease infinite}
@keyframes stType{0%,6%{width:0}24%,92%{width:58%}100%{width:0}}
@keyframes stType2{0%,22%{width:0}38%,92%{width:76%}100%{width:0}}
/* 3: the sponsor bar slides onto a tiny page and the click chart climbs */
.st-live{display:flex !important;gap:14px;padding:14px 16px}
.st-page{flex:1.2;border-radius:8px;background:#161616;padding:8px;overflow:hidden}
.st-bar{height:12px;border-radius:5px;margin-bottom:7px;background:rgba(245,233,0,.12);box-shadow:inset 0 0 0 1.5px var(--y);transform:translateY(-22px);animation:stBarIn 6s ease infinite}
.st-tiles{display:grid !important;grid-template-columns:repeat(3,1fr);gap:5px}
.st-tiles i{height:34px;border-radius:4px;background:#222}
.st-chart{flex:1;display:flex !important;align-items:flex-end;gap:6px;border-bottom:1px solid #333;padding-bottom:2px}
.st-chart i{flex:1;border-radius:3px 3px 0 0;background:var(--y);height:4%;animation:stGrow 6s ease infinite}
.st-chart i:nth-child(1){--h:30%}.st-chart i:nth-child(2){--h:46%;animation-delay:.15s}.st-chart i:nth-child(3){--h:40%;animation-delay:.3s}.st-chart i:nth-child(4){--h:70%;animation-delay:.45s}.st-chart i:nth-child(5){--h:94%;animation-delay:.6s}
@keyframes stBarIn{0%,12%{transform:translateY(-22px)}24%,90%{transform:none}100%{transform:translateY(-22px)}}
@keyframes stGrow{0%,30%{height:4%}55%,90%{height:var(--h)}100%{height:4%}}

@media (max-width:1000px){.sp-statbox{max-width:560px}}
@media (max-width:760px){.sp-trust-row{gap:18px 28px}.sp-trust .t-logo{height:24px}.sp-trust .t-fr img{height:22px}.sp-trust .t-fr b{font-size:22px}.sp-trust .t-newlyn{height:28px}.sp-trust .t-fontfabric{height:26px}.sp-trust .t-logolounge{height:22px}.sp a.t-join{height:46px;padding:0 18px;font-size:15px}.sp-statbox{padding:10px}}
@media (prefers-reduced-motion:reduce){.sb-col,.st-anim *{animation:none !important}.st-f i{width:60%}.st-chart i{height:var(--h)}.st-bar{transform:none}}
.sp-statbox{padding:30px}
@media (max-width:760px){.sp-statbox{padding:16px}}

/* ---- Oct 19 layout pass: more air, a light proof band, a statement, side-scrolling issues, two-column FAQ, glass form band ---- */
.sp-sec{padding-top:128px}
.sp-hero{padding-bottom:0}
.sp-trust{margin-top:64px}
.sp h2+.sp-intro{margin-top:16px}

/* light band for the proof (results + audience): off-white, black type, white cards */
.sp>.sp-light{max-width:none;margin:88px calc(-1 * (var(--pad) - var(--gutter))) 0;padding:0 calc(var(--pad) - var(--gutter)) 112px;background:#f3f1ec;color:#0b0b0b;border-radius:var(--surface-radius)}
.sp-light>*{max-width:1120px;margin-left:auto;margin-right:auto}
.sp-light .sp-sec{padding-top:104px}
.sp-light h2,.sp-light h3{color:#0b0b0b}
.sp-light .sp-kicker{color:#1a1a1a;background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.14)}
.sp-light .sp-kicker:before{box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.sp-light .sp-res{background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 36px rgba(0,0,0,.06)}
.sp-light .sp-res-who img{filter:brightness(0)}
.sp-light .sp-res-who span{color:#0b0b0b}
.sp-light .sp-res-who em{color:#555;border-color:rgba(0,0,0,.14)}
.sp-light .sp-res-big{display:inline-block;color:#0b0b0b;background:linear-gradient(transparent 56%,var(--y) 56%,var(--y) 94%,transparent 94%);padding:0 6px;margin:0 0 10px -6px}
.sp-light .sp-res-body{color:#444}
.sp-light .sp-crowd{background:#121212;border-color:#121212;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.14)}
.sp-light .sp-cols>div{border-top-color:#0b0b0b}
.sp-light .sp-cols p{color:#444}

/* the one line we never bend on, set big */
.sp-statement{padding:160px 0 0;text-align:center}
.sp-big{margin:0 auto;font-size:clamp(46px,8.4vw,120px);line-height:.94;letter-spacing:-.05em;font-weight:700;max-width:11ch;text-wrap:balance}
.sp-big span{color:var(--y)}
.sp-big-sub{margin:30px auto 0;max-width:560px;color:var(--soft);font-size:17px;line-height:1.55;text-wrap:pretty}

/* Thursday issues slide sideways */
.sp .sp-thx{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px;margin-top:32px;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent;-webkit-overflow-scrolling:touch}
.sp-thx a{flex:0 0 min(460px,80%);scroll-snap-align:start}

/* FAQ: heading stays put on the left while the questions scroll */
.sp-faq-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.sp-faq-head{position:sticky;top:110px}
.sp-faq-sec .sp-faq{margin-top:0;max-width:none}

/* form band: covers moving behind, the form on frosted glass, runs to the bottom of the page */
main.sp.page{padding-bottom:0}
.sp>.sp-form-band{position:relative;max-width:none;margin:128px calc(-1 * (var(--pad) - var(--gutter))) 0;padding:120px calc(var(--pad) - var(--gutter));border-radius:var(--surface-radius);overflow:hidden;isolation:isolate;background:#0c0c0c;scroll-margin-top:40px}
.sp-formbg{position:absolute;inset:-60px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;z-index:-2;transform:rotate(-6deg) scale(1.12)}
.sp-formbg:after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(90% 80% at 50% 50%,rgba(10,10,10,.5),rgba(10,10,10,.82))}
.fb-col{display:flex;flex-direction:column;gap:12px;animation:sbUp 90s linear infinite}
.fb-c1,.fb-c3,.fb-c5{animation-name:sbDown;animation-duration:104s}
.fb-c2{animation-duration:78s}.fb-c4{animation-duration:96s}
.fb-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#1a1a1a}
.sp-form-band .sp-sec.sp-form-sec{max-width:1120px;margin:0 auto !important;padding:52px 44px;background:rgba(16,16,16,.5);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--y);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.sp-form-band .sp-f input,.sp-form-band .sp-f select,.sp-form-band .sp-f textarea{background-color:rgba(0,0,0,.38);border-color:rgba(255,255,255,.14)}
.sp-form-band .sp-chips-in span{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.2)}
.sp-form-band .sp-chips-in input:checked+span{background:rgba(245,233,0,.12);border-color:var(--y)}

/* how it works: a white cursor does each step */
.st-cur{position:absolute;z-index:3;left:70%;top:120px;margin:-3px 0 0 -4px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));transform-origin:4px 3px;pointer-events:none}
/* 1: fields fill, the cursor ticks two chips and presses Send, the button turns into a check */
.st-chips i:nth-child(1){animation:stChip 6s ease infinite}
.st-btn{position:relative;animation:stPress 6s ease infinite}
.st-btn:before{content:"";position:absolute;left:16px;right:16px;top:9px;height:4px;border-radius:2px;background:rgba(0,0,0,.55);animation:stLabel 6s ease infinite}
.st-btn:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.8 7.4 5.7 10l5.5-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;opacity:0;transform:scale(.4);animation:stCheck 6s ease infinite}
.st-form .st-cur{animation:stCur1 6s ease-in-out infinite}
@keyframes stChip{0%,43%{background:transparent;border-color:#3a3a3a}45%,92%{background:rgba(245,233,0,.85);border-color:var(--y)}100%{background:transparent;border-color:#3a3a3a}}
@keyframes stChip2{0%,53%{background:transparent;border-color:#3a3a3a}55%,92%{background:rgba(245,233,0,.85);border-color:var(--y)}100%{background:transparent;border-color:#3a3a3a}}
@keyframes stPress{0%,64%,70%,100%{transform:scale(1)}67%{transform:scale(.9)}}
@keyframes stLabel{0%,67%{opacity:1}69%,94%{opacity:0}100%{opacity:1}}
@keyframes stCheck{0%,67%{opacity:0;transform:scale(.4)}71%{opacity:1;transform:scale(1.15)}74%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes stCur1{
0%,8%{left:72%;top:124px;opacity:0;transform:scale(1)}
14%{left:62%;top:112px;opacity:1}
40%{left:40px;top:69px;transform:scale(1)}
43%{left:40px;top:69px;transform:scale(.82)}
46%{left:40px;top:69px;transform:scale(1)}
51%{left:97px;top:69px;transform:scale(1)}
53%{left:97px;top:69px;transform:scale(.82)}
56%{left:97px;top:69px;transform:scale(1)}
63%{left:calc(100% - 48px);top:105px;transform:scale(1)}
66%{left:calc(100% - 48px);top:105px;transform:scale(.82)}
69%{left:calc(100% - 48px);top:105px;transform:scale(1)}
86%{left:calc(100% - 34px);top:118px;opacity:1}
92%,100%{left:calc(100% - 34px);top:118px;opacity:0}}
/* 2: the cursor drags across five days, they fill yellow, a check pops on the last one */
.st-cal{display:flex !important;align-items:center;padding:16px 18px;--cw:calc((100% - 66px) / 7)}
.st-days{flex:1;display:grid !important;grid-template-columns:repeat(7,1fr);gap:5px}
.st-days i{height:22px;border-radius:5px;background:#1e1e1e}
.st-days i:nth-child(n+10):nth-child(-n+14){animation:stDay 6s ease infinite}
.st-cal .st-days i:nth-child(11){animation-name:stDay2}.st-cal .st-days i:nth-child(12){animation-name:stDay3}.st-cal .st-days i:nth-child(13){animation-name:stDay4}.st-cal .st-days i:nth-child(14){animation-name:stDay5}
.st-ok{position:absolute !important;z-index:2;left:calc(18px + 7 * var(--cw) + 30px - 9px);top:44px;width:20px;height:20px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3 5.8 9.8l5-5.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 3px #101010;opacity:0;transform:scale(.3);animation:stOk 6s ease infinite}
.st-cal .st-cur{animation:stCur2 6s ease-in-out infinite}
@keyframes stDay{0%,22%{background:#1e1e1e}24%,90%{background:var(--y)}96%,100%{background:#1e1e1e}}
@keyframes stDay2{0%,28%{background:#1e1e1e}30%,90%{background:var(--y)}96%,100%{background:#1e1e1e}}
@keyframes stDay3{0%,34%{background:#1e1e1e}36%,90%{background:var(--y)}96%,100%{background:#1e1e1e}}
@keyframes stDay4{0%,40%{background:#1e1e1e}42%,90%{background:var(--y)}96%,100%{background:#1e1e1e}}
@keyframes stDay5{0%,46%{background:#1e1e1e}48%,90%{background:var(--y)}96%,100%{background:#1e1e1e}}
@keyframes stOk{0%,54%{opacity:0;transform:scale(.3)}58%{opacity:1;transform:scale(1.2)}61%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes stCur2{
0%,8%{left:60%;top:122px;opacity:0;transform:scale(1)}
14%{left:48%;top:108px;opacity:1}
20%{left:calc(18px + 2.5 * var(--cw) + 10px);top:65px;transform:scale(1)}
23%{left:calc(18px + 2.5 * var(--cw) + 10px);top:65px;transform:scale(.82);animation-timing-function:linear}
48%{left:calc(18px + 6.5 * var(--cw) + 30px);top:65px;transform:scale(.82)}
51%{left:calc(18px + 6.5 * var(--cw) + 30px);top:65px;transform:scale(1)}
62%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:1}
86%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:1}
92%,100%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:0}}
/* 3: the bar slides onto the page, the cursor clicks it, the chart climbs */
.st-bar{animation:stBarIn 6s ease infinite,stBarHit 6s ease infinite}
.st-live .st-cur{animation:stCur3 6s ease-in-out infinite}
@keyframes stBarIn{0%,10%{transform:translateY(-22px)}20%,92%{transform:none}100%{transform:translateY(-22px)}}
@keyframes stBarHit{0%,30%{background:rgba(245,233,0,.12)}32%{background:rgba(245,233,0,.7)}40%,100%{background:rgba(245,233,0,.12)}}
@keyframes stGrow{0%,36%{height:4%}58%,90%{height:var(--h)}100%{height:4%}}
@keyframes stCur3{
0%,10%{left:46%;top:118px;opacity:0;transform:scale(1)}
16%{left:40%;top:100px;opacity:1}
27%{left:26%;top:29px;transform:scale(1)}
30%{left:26%;top:29px;transform:scale(.82)}
33%{left:26%;top:29px;transform:scale(1)}
48%{left:44%;top:106px;opacity:1}
86%{left:44%;top:106px;opacity:1}
92%,100%{left:44%;top:106px;opacity:0}}

@media (max-width:860px){
.sp-faq-sec{grid-template-columns:1fr;gap:24px}
.sp-faq-head{position:static}
.sp-form-band .sp-sec.sp-form-sec{padding:34px 20px}
}
@media (max-width:760px){
.sp-sec{padding-top:72px}
.sp-light .sp-sec{padding-top:64px}
.sp>.sp-light{margin-top:56px;padding-bottom:64px}
.sp-statement{padding-top:96px}
.sp-big-sub{font-size:16px}
.sp-thx a{flex-basis:84%}
.sp>.sp-form-band{margin-top:80px;padding-top:56px;padding-bottom:56px}
.sp-formbg{grid-template-columns:repeat(3,1fr)}
.fb-c3,.fb-c4,.fb-c5{display:none !important}
}
@media (prefers-reduced-motion:reduce){
.fb-col,.st-cur,.st-ok,.st-btn:before,.st-btn:after{animation:none !important}
.st-cur{display:none !important}
.st-days i:nth-child(n+10):nth-child(-n+14){background:var(--y)}
.st-ok{opacity:1;transform:none}
}

/* Oct 19 notes: 3D hand cursor in the steps, form intro at the bottom of its column, grey band for statement + Thursday */
.sp-steps .st-anim .st-cur{width:29px;height:36px;margin:-1px 0 0 -5px;transform-origin:5px 1px;background:url("data:image/webp;base64,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") center/contain no-repeat;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.sp-form-head{align-self:stretch;display:flex;flex-direction:column}
.sp-form-head .sp-intro{margin-top:auto;padding-top:28px;font-size:15px}
.sp>.sp-grey{max-width:none;margin:128px calc(-1 * (var(--pad) - var(--gutter))) 0;padding:0 calc(var(--pad) - var(--gutter)) 112px;background:#1c1c1c;border-radius:var(--surface-radius)}
.sp-grey>*{max-width:1120px;margin-left:auto;margin-right:auto}
.sp-grey .sp-statement{padding-top:120px}
.sp-grey .sp-thx a{background:#121212;border-color:rgba(255,255,255,.06)}
.sp-grey .sp-thx a:hover{border-color:var(--y)}
.sp-grey .sp-chips span{border-color:rgba(255,255,255,.14)}
.sp-grey .sp-kicker{background:rgba(255,255,255,.05)}
@media (max-width:860px){.sp-form-head .sp-intro{padding-top:14px}}
@media (max-width:760px){.sp>.sp-grey{margin-top:72px;padding-bottom:64px}.sp-grey .sp-statement{padding-top:72px}}
.sp-form-head .sp-kicker{align-self:flex-start}
.sp .sp-form-head .sp-intro{margin-top:auto}
@media (max-width:860px){.sp .sp-form-head .sp-intro{margin-top:14px}}
/* Oct 19 notes: plain black result numbers; taller hero stat box with the glass cards at the bottom and the covers showing above */
.sp-light .sp-res-big{display:block;background:none;padding:0;margin:0 0 10px}
.sp-hero-grid{align-items:stretch}
.sp-hero-copy{align-self:center}
.sp-statbox{display:flex;flex-direction:column;justify-content:flex-end;min-height:600px}
.sp-statbg:after{background:linear-gradient(180deg,rgba(12,12,12,.1) 0%,rgba(12,12,12,.3) 38%,rgba(12,12,12,.78) 100%)}
@media (max-width:1000px){.sp-statbox{min-height:0;padding-top:150px}}
@media (max-width:760px){.sp-statbox{padding-top:110px}}
/* Oct 19 notes: stat box lines up with the text column (top = pill, bottom = buttons); partner row spans the hero width with bigger logos; results = huge number, short line, small description */
.sp-statbox{min-height:0}
.sp-hero-copy{align-self:start}
.sp-trust-row{justify-content:space-between;gap:22px 32px}
.sp-trust .t-logo{height:35px}
.sp-trust .t-fr img{height:32px}
.sp-trust .t-fr b{font-size:32px}
.sp-trust .t-newlyn{height:41px}
.sp-trust .t-fontfabric{height:37px}
.sp-trust .t-logolounge{height:31px}
.sp a.t-join{height:58px;padding:0 26px;font-size:17px}
.sp-res{display:flex;flex-direction:column}
.sp-res-who{margin-bottom:34px}
.sp-light .sp-res-big{font-size:clamp(64px,6.6vw,96px);line-height:.88;letter-spacing:-.055em;font-weight:700;margin:0 0 10px -3px}
.sp-res-unit{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#0b0b0b}
.sp-light .sp-res-body{margin:12px 0 0;font-size:13px;line-height:1.5;color:#666}
@media (max-width:1000px){.sp-trust-row{justify-content:flex-start;gap:22px 40px}}
@media (max-width:760px){.sp-trust-row{gap:18px 28px}.sp-trust .t-logo{height:24px}.sp-trust .t-fr img{height:22px}.sp-trust .t-fr b{font-size:22px}.sp-trust .t-newlyn{height:28px}.sp-trust .t-fontfabric{height:26px}.sp-trust .t-logolounge{height:22px}.sp a.t-join{height:46px;padding:0 18px;font-size:15px}.sp-light .sp-res-big{font-size:80px}}
/* Oct 19: sponsor page sits straight on the black page background (no grey surface box) */
main.sp.page{background:#000;border-radius:0}
@keyframes stType{0%,3%{width:0}12%,96%{width:58%}100%{width:0}}
@keyframes stType2{0%,11%{width:0}19%,96%{width:76%}100%{width:0}}
@keyframes stChip{0%,21.5%{background:transparent;border-color:#3a3a3a}22.5%,96%{background:rgba(245,233,0,.85);border-color:var(--y)}100%{background:transparent;border-color:#3a3a3a}}
@keyframes stChip2{0%,26.5%{background:transparent;border-color:#3a3a3a}27.5%,96%{background:rgba(245,233,0,.85);border-color:var(--y)}100%{background:transparent;border-color:#3a3a3a}}
@keyframes stPress{0%,32%,35%,100%{transform:scale(1)}33.5%{transform:scale(.9)}}
@keyframes stLabel{0%,33.5%{opacity:1}34.5%,97%{opacity:0}100%{opacity:1}}
@keyframes stCheck{0%,33.5%{opacity:0;transform:scale(.4)}35.5%{opacity:1;transform:scale(1.15)}37%,96%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.4)}}
@keyframes stCur1{
0%,4%{left:72%;top:124px;opacity:0;transform:scale(1)}
7%{left:62%;top:112px;opacity:1}
20%{left:40px;top:69px;transform:scale(1)}
21.5%{left:40px;top:69px;transform:scale(.82)}
23%{left:40px;top:69px;transform:scale(1)}
25.5%{left:97px;top:69px;transform:scale(1)}
26.5%{left:97px;top:69px;transform:scale(.82)}
28%{left:97px;top:69px;transform:scale(1)}
31.5%{left:calc(100% - 48px);top:105px;transform:scale(1)}
33%{left:calc(100% - 48px);top:105px;transform:scale(.82)}
34.5%{left:calc(100% - 48px);top:105px;transform:scale(1)}
43%{left:calc(100% - 34px);top:118px;opacity:1}
46%,100%{left:calc(100% - 34px);top:118px;opacity:0}}
@keyframes stDay{0%,11%{background:#1e1e1e}12%,95%{background:var(--y)}98%,100%{background:#1e1e1e}}
@keyframes stDay2{0%,14%{background:#1e1e1e}15%,95%{background:var(--y)}98%,100%{background:#1e1e1e}}
@keyframes stDay3{0%,17%{background:#1e1e1e}18%,95%{background:var(--y)}98%,100%{background:#1e1e1e}}
@keyframes stDay4{0%,20%{background:#1e1e1e}21%,95%{background:var(--y)}98%,100%{background:#1e1e1e}}
@keyframes stDay5{0%,23%{background:#1e1e1e}24%,95%{background:var(--y)}98%,100%{background:#1e1e1e}}
@keyframes stOk{0%,27%{opacity:0;transform:scale(.3)}29%{opacity:1;transform:scale(1.2)}30.5%,95%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.3)}}
@keyframes stCur2{
0%,4%{left:60%;top:122px;opacity:0;transform:scale(1)}
7%{left:48%;top:108px;opacity:1}
10%{left:calc(18px + 2.5 * var(--cw) + 10px);top:65px;transform:scale(1)}
11.5%{left:calc(18px + 2.5 * var(--cw) + 10px);top:65px;transform:scale(.82);animation-timing-function:linear}
24%{left:calc(18px + 6.5 * var(--cw) + 30px);top:65px;transform:scale(.82)}
25.5%{left:calc(18px + 6.5 * var(--cw) + 30px);top:65px;transform:scale(1)}
31%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:1}
43%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:1}
46%,100%{left:calc(18px + 5.6 * var(--cw) + 25px);top:96px;opacity:0}}
@keyframes stBarIn{0%,5%{transform:translateY(-22px)}10%,96%{transform:none}100%{transform:translateY(-22px)}}
@keyframes stBarHit{0%,15%{background:rgba(245,233,0,.12)}16%{background:rgba(245,233,0,.7)}20%,100%{background:rgba(245,233,0,.12)}}
@keyframes stGrow{0%,18%{height:4%}29%,95%{height:var(--h)}100%{height:4%}}
@keyframes stCur3{
0%,5%{left:46%;top:118px;opacity:0;transform:scale(1)}
8%{left:40%;top:100px;opacity:1}
13.5%{left:26%;top:29px;transform:scale(1)}
15%{left:26%;top:29px;transform:scale(.82)}
16.5%{left:26%;top:29px;transform:scale(1)}
24%{left:44%;top:106px;opacity:1}
43%{left:44%;top:106px;opacity:1}
46%,100%{left:44%;top:106px;opacity:0}}/* steps play in order (1, then 2, then 3, slight overlap) on one 13.5s loop, starting when the section scrolls into view */
.sp-steps .st-anim *,.sp-steps .st-btn:before,.sp-steps .st-btn:after{animation-duration:13.5s !important}
.sp-steps li:nth-child(2) .st-anim *{animation-delay:4.5s !important}
.sp-steps li:nth-child(3) .st-anim *{animation-delay:9s !important}
.sp-steps li:nth-child(3) .st-chart i:nth-child(2){animation-delay:9.15s !important}
.sp-steps li:nth-child(3) .st-chart i:nth-child(3){animation-delay:9.3s !important}
.sp-steps li:nth-child(3) .st-chart i:nth-child(4){animation-delay:9.45s !important}
.sp-steps li:nth-child(3) .st-chart i:nth-child(5){animation-delay:9.6s !important}
.sp-steps:not(.is-in) .st-anim *,.sp-steps:not(.is-in) .st-btn:before,.sp-steps:not(.is-in) .st-btn:after{animation-play-state:paused !important}
.sp-steps.is-in li:nth-child(2):before{transition-delay:4.5s}
.sp-steps.is-in li:nth-child(3):before{transition-delay:9s}

/* no lines: Who/Where/Why and the placement card footers */
.sp-light .sp-cols>div{border-top:0;padding-top:0}
.sp-place-f{border-top:0;padding-top:4px}

/* FAQ: each question is its own rounded box */
.sp-faq-sec .sp-faq{border-top:0;display:flex;flex-direction:column;gap:10px}
.sp-faq details{border:0;background:#181818;border-radius:30px;transition:background .2s}
.sp-faq details:hover,.sp-faq details[open]{background:#1f1f1f}
.sp-faq summary{padding:20px 64px 20px 28px}
.sp-faq summary:after{right:28px}
.sp-faq p{margin:-4px 28px 24px;max-width:none}

/* Thursday issues: a plain 3-up row on desktop, swipe row on phones */
.sp .sp-thx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:0;scroll-snap-type:none}
.sp-thx a{flex:none}
@media (max-width:760px){
.sp .sp-thx{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
.sp-thx a{flex:0 0 84%}
.sp-faq summary{padding:18px 56px 18px 22px;font-size:16px}.sp-faq summary:after{right:22px}.sp-faq p{margin:-4px 22px 20px}
}

/* Oct 19 notes: thin plus only in the "your brand" slot; quieter theme tags with the CTA beside the label; pick badge inside the card; custom package CTA box */
.sp a.t-join{width:150px;justify-content:center;padding:0;gap:0}
.sp a.t-join svg{display:block;transition:transform .2s}
.sp a.t-join:hover svg{transform:rotate(90deg)}
.sp-next{display:block;margin-top:40px}
.sp-next-h{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.sp-next-h p{margin:0;color:var(--soft);font-size:15px;font-weight:500}
.sp a.sp-btn-y{color:var(--y);box-shadow:inset 0 0 0 1.5px var(--y)}
.sp a.sp-btn-y:hover{background:var(--y);color:#000}
.sp-grey .sp-chips span,.sp-chips span{border:0;background:rgba(255,255,255,.07);padding:7px 13px;font-size:13px;color:#cfcfcf}
.sp-badge{position:static;align-self:flex-start;margin:0 0 14px}
.sp-custom{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:20px 32px;background:#181818;border:1px solid var(--line);border-radius:22px;padding:28px 32px}
.sp-custom h3{font-size:22px;letter-spacing:-.015em;font-weight:700;margin:0}
.sp-custom p{margin:6px 0 0;color:var(--soft);font-size:15px;line-height:1.5}
.sp-custom .sp-btn{flex:none}
@media (max-width:760px){.sp-custom{flex-direction:column;align-items:stretch;padding:24px 22px}.sp-custom h3{font-size:19px}.sp-custom .sp-btn{width:100%}.sp a.t-join{width:110px}.sp-next-h .sp-btn{width:100%}}
.sp-bundle .sp-badge{position:absolute;top:27px;right:22px;left:auto;margin:0}

/* Hero in a dark grey box that rises over the bottom third of the BRRRANDING wordmark (wordmark height is about
   23% of its width, so a third of it is ~7.8vw). */
.sp .sp-hero{position:relative;z-index:2;max-width:1216px;background:#1c1c1c;border-radius:32px;padding:48px;margin:24px auto 0;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
@media (max-width:1024px){.sp .sp-hero{padding:36px;border-radius:28px}}
@media (max-width:640px){.sp .sp-hero{padding:20px;border-radius:22px;margin:16px auto 0}}

/* Parallax hero (script in sponsor.mjs adds html.sp-plx): the wordmark sits under the page and is held in place
   with a transform; the page is see-through so it shows between the hero box and the light band. */
html.sp-plx body{background:#000}
html.sp-plx .hero-band{position:relative;z-index:0;will-change:transform}
html.sp-plx main.sp.page{position:relative;z-index:1;background:transparent}

/* BRR mark + name in the top-left of the stat box, on a small glass pill over the moving covers */
.sp-mark{position:absolute;top:30px;left:30px;z-index:2;display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:700 15px/1 Inter,Helvetica,Arial,sans-serif;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.sp-mark img{border-radius:9px;display:block;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.sp-mark:hover span{opacity:.85}
@media (max-width:760px){.sp-mark{top:16px;left:16px;font-size:13px;gap:10px}.sp-mark img{width:28px;height:28px}}

/* Who you reach: bento of tiles in the light band (replaces the dot box + Who/Where/Why columns).
   The dot crowd now fills the black tile behind the big number; CROWD_JS still counts both numbers up. */
.sp-light .sp-crowd.sp-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px;margin-top:32px;padding:0;background:none;border:0;box-shadow:none;color:#0b0b0b;align-items:stretch}
.sp-bento .bt{position:relative;overflow:hidden;border-radius:24px;padding:26px 28px;display:flex;flex-direction:column;min-width:0;background:#fff}
.sp-bento .bt-a{grid-column:span 2;grid-row:span 2;min-height:400px;background:#0b0b0b;color:#fff}
.sp-bento .bt-b{grid-column:span 2;grid-row:span 2;min-height:400px;background:var(--y);color:#0b0b0b}
.sp-bento .bt-c,.sp-bento .bt-e{grid-column:span 2}
.sp-bento .bt-a canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.sp-bento .bt-a:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.55) 34%,rgba(11,11,11,.15) 62%,rgba(11,11,11,.7) 100%);pointer-events:none}
.sp-bento .bt>*{position:relative;z-index:1}
.sp-bento .bt-l{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;opacity:.7}
.sp-bento .bt-n{display:block;font-size:clamp(64px,8.2vw,124px);line-height:.9;font-weight:700;letter-spacing:-.05em;margin-top:14px;font-variant-numeric:tabular-nums}
.sp-bento .bt-f{margin:auto 0 0;padding-top:18px;font-size:13.5px;opacity:.75;display:flex;flex-wrap:wrap;gap:6px 18px}
.sp-bento .bt-f span{display:inline-flex;align-items:center;gap:7px}
.sp-bento .bt-f i{width:9px;height:9px;border-radius:50%;background:#555}
.sp-bento .bt-f i.y{background:var(--y)}
.sp-bento .bt-b .bt-l,.sp-bento .bt-b .bt-f{opacity:.8}
.sp-bento ul{list-style:none;margin:16px 0 0;padding:0}
.sp-bento .bt-who{display:flex;flex-wrap:wrap;gap:8px}
.sp-bento .bt-who li{font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1;padding:12px 18px;border-radius:999px;background:#f3f1ec}
.sp-bento .bt-why{margin:16px 0 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.3}
@media (max-width:1024px){.sp-light .sp-crowd.sp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-bento .bt-a,.sp-bento .bt-b{grid-row:auto;min-height:300px}.sp-bento .bt-c,.sp-bento .bt-e{grid-column:span 2}}
@media (max-width:640px){.sp-light .sp-crowd.sp-bento{grid-template-columns:1fr}.sp-bento .bt-a,.sp-bento .bt-b,.sp-bento .bt-c,.sp-bento .bt-e{grid-column:auto}.sp-bento .bt-a,.sp-bento .bt-b{min-height:240px}.sp-bento .bt{padding:22px}}
.sp-bento .bt-mini{margin-top:auto;display:grid;grid-template-columns:1fr;gap:8px;padding-top:24px}
.sp-bento .bt-mini>div{border-radius:16px;background:rgba(0,0,0,.07);padding:16px 20px;display:flex;align-items:center;gap:18px}
.sp-bento .bt-mini b{display:block;flex:0 0 auto;min-width:2.4em;font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1}
.sp-bento .bm-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.sp-bento .bm-r span{display:block;font-size:14px;line-height:1.2;opacity:.75}
.sp-bento .bm-bar{display:block;height:10px;border-radius:999px;background:rgba(0,0,0,.1);overflow:hidden}
.sp-bento .bm-bar i{display:block;height:100%;border-radius:inherit;background:#0e0e0e}
.sp-bento .bm-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.sp-bento .bm-week i{font-style:normal;display:grid;place-items:center;aspect-ratio:1;max-height:30px;border-radius:7px;background:rgba(0,0,0,.1);font-size:11px;font-weight:600;color:rgba(0,0,0,.45)}
.sp-bento .bm-week i.on{background:#0e0e0e;color:#F5E900}

.sp-bento .bt-mini-d>div{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.sp-bento .bm-geo{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.sp-bento .bm-geo i{font-style:normal;display:grid;place-items:center;height:30px;border-radius:7px;background:rgba(255,255,255,.1);font-size:11px;font-weight:700;color:rgba(255,255,255,.6)}
.sp-bento .bm-geo i.on{background:var(--y);color:#0b0b0b}

/* What sponsors got: flat cards, no outline or shadow, each with a tiny drawing of where the sponsor ran. */
.sp-light .sp-res{background:#fff;border:0;box-shadow:none;border-radius:24px;padding:26px}
.sp-light .sp-res-who em{border:0;padding:0;color:#8a8a8a}
.sp-res .sp-res-tag{margin:0 0 30px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.sp-res .sp-res-body{margin-bottom:28px}
.sp-res .sp-res-who{margin:auto 0 0;padding-top:20px;border-top:0;min-height:0}
.sp-res .sp-res-who img{height:24px}
.sp-res .sp-res-who img[alt="Wegrow"]{height:20px}
.sp-res .sp-res-who img.r-mark{height:20px}
.sp-res .sp-res-who span{font-size:18px}

/* Who you reach, pass 2: same structure in both big tiles (thin bars on row 1, squares on row 2), number columns aligned,
   dots only in the middle band of the black tile, solid mini boxes, smaller Who pills. */
.sp-bento .bt-mini b{flex:0 0 3.4em;min-width:0}
.sp-bento .bm-week{grid-template-columns:repeat(7,1fr)}
.sp-bento .bm-week i{aspect-ratio:auto;max-height:none;height:30px}
.sp-bento .bt-a:after{background:linear-gradient(180deg,rgba(11,11,11,.94) 0%,rgba(11,11,11,.82) 24%,rgba(11,11,11,.12) 40%,rgba(11,11,11,.12) 50%,rgba(11,11,11,.96) 64%,#0b0b0b 100%)}
.sp-bento .bt-mini-d>div{background:#1c1c1c;-webkit-backdrop-filter:none;backdrop-filter:none}
.sp-bento .bt-mini-d span{opacity:.6}
.sp-bento .bm-min{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.sp-bento .bm-min>i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.sp-bento .bm-min>i>i{display:block;height:100%;background:var(--y);border-radius:inherit}
.sp-bento .bt-who li{font-size:clamp(15px,1.25vw,18px);padding:10px 16px}
.sp-bento .bt-why{text-wrap:balance}

/* Placements split in two rows: website (dark cards) and newsletter (yellow cards, like the yellow readers tile). */
.sp .sp-pg{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:40px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sp .sp-pg b{font-weight:700;color:#fff}
.sp .sp-pg span{color:var(--mute);font-weight:600}
.sp .sp-pg span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#555;margin-right:10px;vertical-align:1px}
.sp .sp-pg-mail span:before{background:var(--y)}
.sp .sp-pg+.sp-places{margin-top:16px}

/* Result card eyebrow: a chip with a channel dot (black = website, yellow = newsletter), linking to its placement below. */
.sp .sp-res .sp-res-tag{margin:0 0 30px;font-size:inherit;letter-spacing:0;text-transform:none}
.sp .sp-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:999px;background:#f3f1ec;color:#0b0b0b;font-size:13px;font-weight:600;line-height:1;text-decoration:none;transition:background .15s}
.sp a.sp-chip:hover{background:#e9e6de}
.sp .sp-chip i{width:8px;height:8px;border-radius:50%;background:#0b0b0b}
.sp .sp-chip.is-mail i{background:var(--y);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* Placements toggle: Website / Newsletter. Without JS both rows show. */
.sp .sp-tog{display:inline-flex;gap:4px;padding:4px;margin-top:32px;border-radius:999px;background:#1c1c1c}
.sp .sp-tog button{display:inline-flex;align-items:baseline;gap:10px;border:0;cursor:pointer;border-radius:999px;padding:12px 20px;background:transparent;color:#cfcfcf;font:700 15px/1 Inter,Helvetica,Arial,sans-serif;transition:background .2s,color .2s}
.sp .sp-tog button span{font-weight:500;font-size:13px;color:#8a8a8a;transition:color .2s}
.sp .sp-tog button:hover{color:#fff}
.sp .sp-tog button[aria-selected=true]{background:#fff;color:#0b0b0b}
.sp .sp-tog button[data-tab=mail][aria-selected=true]{background:var(--y)}
.sp .sp-tog button[aria-selected=true] span{color:rgba(11,11,11,.6)}
.sp .sp-tog button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sp .sp-tog+.sp-places{margin-top:20px}
.sp-places-mail{margin-top:16px}
html.sp-tabs .sp [data-panel]{display:none;margin-top:20px}
html.sp-tabs .sp [data-panel].is-on{display:grid;animation:spTab .35s ease}
@keyframes spTab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.sp-tabs .sp [data-panel].is-on{animation:none}}
@media (max-width:640px){.sp .sp-tog{display:flex}.sp .sp-tog button{flex:1;flex-direction:column;align-items:center;gap:5px;padding:11px 10px}}
html:not(.sp-tabs) .sp-tog{display:none}
/* Themes block: the button sits under the chips, like the card buttons. */
.sp-next-f{margin-top:24px}

/* One distance from text to button across the page: 24px. */
.sp .sp-sub{margin-bottom:24px}
.sp .sp-place ul{margin-bottom:0}
.sp .sp-here{margin:12px 0 0}
.sp .sp-place-f{padding-top:24px}
.sp .sp-next-f{margin-top:24px}
.sp .sp-f-foot{margin-top:8px}
/* Form "Interested in" chips: equal columns, equal gaps both ways. */
.sp .sp-chips-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sp .sp-chips-in label{display:flex;min-width:0}
.sp .sp-chips-in span{flex:1;min-width:0}
@media (max-width:480px){.sp .sp-chips-in{grid-template-columns:1fr}}

/* What sponsors got on phones: 2x2 grid, scaled down. */
@media (max-width:760px){
  .sp .sp-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sp-light .sp-res{padding:18px 16px;border-radius:20px}
  .sp-light .sp-res-big{font-size:clamp(40px,12.5vw,64px);margin-bottom:8px}
  .sp .sp-res-unit{font-size:14px;line-height:1.25}
  .sp-light .sp-res .sp-res-body{font-size:12px;line-height:1.45;margin:8px 0 16px}
  .sp .sp-res .sp-res-who{padding-top:12px}
  .sp .sp-res .sp-res-who img{height:18px}
  .sp .sp-res .sp-res-who img[alt="Wegrow"],.sp .sp-res .sp-res-who img.r-mark{height:15px}
  .sp .sp-res .sp-res-who span{font-size:15px}
}

/* Placement checklists: check mark centred on the first line of text. */
.sp .sp-place li{padding-left:24px}
.sp .sp-place li:before{left:0;top:0;width:14px;height:1.5em;border:0;transform:none;background:var(--y);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7.4 5.4 10.4 11.8 3.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7.4 5.4 10.4 11.8 3.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}

/* How it works as the BRR mark: three steps side by side, the open one widest (1 / .6 / .35 like the thinning letters). Desktop only. */
@keyframes stProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:1024px){
  .sp .sp-steps.sp-acc{display:flex;gap:12px}
  .sp .sp-steps.sp-acc li{flex:.35 1 0;min-width:0;overflow:hidden;position:relative;display:flex;flex-direction:column;cursor:pointer;transition:flex-grow .8s cubic-bezier(.65,0,.25,1),background .4s}
  .sp .sp-steps.sp-acc li.is-near{flex-grow:.6}
  .sp .sp-steps.sp-acc li.is-open{flex-grow:1;cursor:default}
  .sp .sp-steps.sp-acc li:not(.is-open):hover{background:#202020}
  .sp .sp-steps.sp-acc li:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .sp .sp-steps.sp-acc .st-in{width:var(--ow,520px);flex:1;display:flex;flex-direction:column}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){transition:opacity .45s}
  .sp .sp-steps.sp-acc .st-anim{transition:opacity .6s}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim{opacity:.22}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-in>span:not(.st-anim){opacity:0}
  .sp .sp-steps.sp-acc li.is-open:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--y);transform-origin:left;transform:scaleX(0)}
  .sp .sp-steps.sp-acc.is-in li.is-open:after{animation:stProg 5.5s linear forwards}
  .sp .sp-steps.sp-acc li.is-open:hover:after{animation-play-state:paused}
  /* each step's drawing plays from the start when it opens */
  .sp .sp-steps.sp-acc li .st-anim *{animation-delay:0s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(2){animation-delay:.15s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(3){animation-delay:.3s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(4){animation-delay:.45s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(5){animation-delay:.6s !important}
  .sp .sp-steps.sp-acc.is-in li:before{transition-delay:0s !important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.sp .sp-steps.sp-acc li{transition:none}.sp .sp-steps.sp-acc li.is-open:after{display:none}}

/* Closed steps: the drawing box shrinks to a square with the step number; opening it widens the square into the drawing. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li:before{display:none}
  .sp .sp-steps.sp-acc li{padding-top:24px}
  .sp .sp-steps.sp-acc .st-anim{width:100%;transition:width .8s cubic-bezier(.65,0,.25,1),background .5s,border-color .5s;opacity:1 !important}
  .sp .sp-steps.sp-acc .st-anim>*{transition:opacity .35s}
  .sp .sp-steps.sp-acc .st-anim:after{content:counter(st);position:absolute;inset:0;display:grid;place-items:center;font:700 56px/1 Inter,Helvetica,Arial,sans-serif;letter-spacing:-.04em;color:var(--y);transition:opacity .3s;pointer-events:none}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim{width:132px;background:rgba(245,233,0,.05);border-color:rgba(245,233,0,.35)}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim>*{opacity:0 !important}
  .sp .sp-steps.sp-acc li.is-open .st-anim:after{opacity:0}
  .sp .sp-steps.sp-acc li.is-open .st-anim>*{transition-delay:.45s}
}

@media (min-width:1024px){.sp .sp-steps.sp-acc .st-in{width:auto;min-width:var(--ow,480px)}}
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim>*{visibility:hidden;transition:opacity .35s,visibility 0s .35s}
  .sp .sp-steps.sp-acc li.is-open .st-anim>*{visibility:visible;transition:opacity .35s .45s,visibility 0s .45s}
}

/* Steps, refined: one card height, 28px padding all round, the box is the same object open or closed
   (neutral dark box, yellow outline + number when closed), progress runs inside the open box. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc{gap:12px}
  .sp .sp-steps.sp-acc li{padding:28px;border:1px solid #262626;border-radius:24px;background:#1a1a1a}
  .sp .sp-steps.sp-acc li.is-open:after{display:none}
  .sp .sp-steps.sp-acc .st-in{display:grid;grid-template-rows:140px auto auto;row-gap:0;align-content:start}
  .sp .sp-steps.sp-acc .st-anim{height:140px;margin:0 0 24px;border-radius:16px;background:#111;border:1px solid #262626;transition:width .8s cubic-bezier(.65,0,.25,1),border-color .5s}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim{width:140px;background:#111;border-color:rgba(245,233,0,.32)}
  .sp .sp-steps.sp-acc .st-anim:after{font-size:52px;font-variant-numeric:tabular-nums}
  .sp .sp-steps.sp-acc .st-anim:before{content:"";position:absolute;z-index:3;left:16px;right:16px;bottom:12px;height:2px;border-radius:2px;background:linear-gradient(var(--y),var(--y)) left/0 100% no-repeat,rgba(255,255,255,.08);opacity:0;transition:opacity .3s}
  .sp .sp-steps.sp-acc.is-in li.is-open .st-anim:before{opacity:1;animation:stProgBg 5.5s linear forwards}
  .sp .sp-steps.sp-acc li.is-open:hover .st-anim:before{animation-play-state:paused}
  .sp .sp-steps.sp-acc b{font-size:18px;line-height:1.3;margin:0;white-space:nowrap}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){display:block;margin-top:8px;min-height:3em;font-size:15px;line-height:1.5;max-width:44ch}
  .sp .sp-steps.sp-acc li:not(.is-open):hover{background:#1e1e1e}
}
@keyframes stProgBg{from{background-size:0 100%,auto}to{background-size:100% 100%,auto}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.sp .sp-steps.sp-acc li.is-open .st-anim:before{display:none}}

@media (min-width:1024px){
  .sp .sp-steps.sp-acc .st-anim{margin:0}
  .sp .sp-steps.sp-acc .st-anim:before{display:none}
  .sp .sp-steps.sp-acc .st-in{position:relative}
  .sp .sp-steps.sp-acc .st-in:before{content:"";position:absolute;left:0;right:0;top:151px;height:2px;border-radius:2px;background:linear-gradient(var(--y),var(--y)) left/0 100% no-repeat,rgba(255,255,255,.08);opacity:0;transition:opacity .3s}
  .sp .sp-steps.sp-acc.is-in li.is-open .st-in:before{opacity:1;animation:stProgBg 5.5s linear forwards}
  .sp .sp-steps.sp-acc li.is-open:hover .st-in:before{animation-play-state:paused}
  .sp .sp-steps.sp-acc b{margin-top:26px}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){max-width:none}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.sp .sp-steps.sp-acc li.is-open .st-in:before{display:none}}
@media (min-width:1024px){.sp .sp-steps.sp-acc .st-in>span:not(.st-anim){min-height:1.5em;white-space:nowrap}}

/* Start state: the three steps sit as the BRR mark (thin, medium, wide yellow shapes, no content).
   When the section comes into view the first one grows, the shapes turn into cards and the content fades in. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li{transition:flex-grow .9s cubic-bezier(.65,0,.25,1),padding .9s cubic-bezier(.65,0,.25,1),background-color .6s .25s,border-color .6s .25s,border-radius .9s}
  .sp .sp-steps.sp-acc .st-in{transition:opacity .5s .55s}
  .sp .sp-steps.sp-acc.is-mark li{padding:0;background:var(--y);border-color:var(--y);border-radius:36px;cursor:default;pointer-events:none}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(1){flex-grow:.14}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(2){flex-grow:.55}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(3){flex-grow:1}
  .sp .sp-steps.sp-acc.is-mark .st-in{opacity:0;transition:none}
  .sp .sp-steps.sp-acc.is-mark li .st-in:before{animation:none !important;opacity:0}
}

/* Mark state, refined: fixed card height, the yellow is a layer that wipes up after the shapes resize (no muddy colour blend). */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li{height:278px;box-sizing:border-box;transition:flex-grow .9s cubic-bezier(.65,0,.25,1),padding .9s cubic-bezier(.65,0,.25,1),border-color .4s 1s,border-radius .9s}
  .sp .sp-steps.sp-acc li:before{content:"";display:block;position:absolute;inset:0;z-index:5;margin:0;width:auto;height:auto;border-radius:inherit;background:var(--y);clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.65,0,.25,1) .85s;pointer-events:none}
  .sp .sp-steps.sp-acc li:nth-child(2):before{transition-delay:.93s}
  .sp .sp-steps.sp-acc li:nth-child(3):before{transition-delay:1.01s}
  .sp .sp-steps.sp-acc.is-mark li{background:#1a1a1a;border-color:transparent}
  .sp .sp-steps.sp-acc.is-mark li:before{clip-path:inset(0 0 0 0);transition:none}
  .sp .sp-steps.sp-acc .st-in{transition:opacity .5s 1.25s}
}
@media (min-width:1024px){
  .sp .sp-steps.sp-acc.is-in li:nth-child(1):before{transition-delay:.9s !important}
  .sp .sp-steps.sp-acc.is-in li:nth-child(2):before{transition-delay:.98s !important}
  .sp .sp-steps.sp-acc.is-in li:nth-child(3):before{transition-delay:1.06s !important}
}

/* Steps v3: every step is a yellow shape like the BRR mark. The open one is widest and shows its drawing and text;
   the others are clean yellow shapes with no content and no numbers. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li,.sp .sp-steps.sp-acc.is-mark li{background:var(--y);border:0;border-radius:28px;color:#0b0b0b}
  .sp .sp-steps.sp-acc li:before{display:none !important}
  .sp .sp-steps.sp-acc li{transition:flex-grow .9s cubic-bezier(.65,0,.25,1),padding .9s cubic-bezier(.65,0,.25,1),filter .2s}
  .sp .sp-steps.sp-acc li:not(.is-open):hover{background:var(--y);filter:brightness(.95)}
  .sp .sp-steps.sp-acc.is-mark li{border-radius:28px}
  /* content: only in the open step, fading in while it widens */
  .sp .sp-steps.sp-acc .st-in{opacity:0;transition:opacity .25s}
  .sp .sp-steps.sp-acc li.is-open .st-in{opacity:1;transition:opacity .55s .3s}
  .sp .sp-steps.sp-acc.is-mark .st-in{opacity:0 !important;transition:none}
  /* drawing box: always full width, no number square */
  .sp .sp-steps.sp-acc .st-anim,.sp .sp-steps.sp-acc li:not(.is-open) .st-anim{width:100%;background:#111;border:0;transition:none}
  .sp .sp-steps.sp-acc .st-anim:after{display:none}
  .sp .sp-steps.sp-acc li:not(.is-open) .st-anim>*{visibility:visible;opacity:1 !important}
  .sp .sp-steps.sp-acc li.is-open .st-anim>*{transition:none}
  /* text on yellow */
  .sp .sp-steps.sp-acc b{color:#0b0b0b}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){color:rgba(11,11,11,.72);opacity:1 !important}
  .sp .sp-steps.sp-acc .st-in:before{background:linear-gradient(#0b0b0b,#0b0b0b) left/0 100% no-repeat,rgba(0,0,0,.14)}
}

/* The playing step goes back to the dark grey card; the closed ones stay yellow. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li{transition:flex-grow .9s cubic-bezier(.65,0,.25,1),padding .9s cubic-bezier(.65,0,.25,1),background-color .3s,box-shadow .3s,filter .2s}
  .sp .sp-steps.sp-acc li.is-open{background:#1a1a1a;box-shadow:inset 0 0 0 1px #262626;color:#fff}
  .sp .sp-steps.sp-acc li.is-open b{color:#fff}
  .sp .sp-steps.sp-acc li.is-open .st-in>span:not(.st-anim){color:var(--soft)}
  .sp .sp-steps.sp-acc li.is-open .st-anim{background:#111;box-shadow:inset 0 0 0 1px #232323}
  .sp .sp-steps.sp-acc li.is-open .st-in:before{background:linear-gradient(var(--y),var(--y)) left/0 100% no-repeat,rgba(255,255,255,.08)}
}
/* Optical padding: 28px top and sides, 24px bottom (the text line adds ~4px below the letters), fixed height so the mark shapes match. */
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li{height:272px;padding:28px 28px 24px}
  .sp .sp-steps.sp-acc.is-mark li{padding:0}
}

/* Step progress: three short segments beside the heading (like stories) instead of a line inside the card. */
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.st-prog{display:none}
@media (min-width:1024px){
  .sp .sp-steps.sp-acc .st-in:before{display:none !important}
  .st-prog{display:flex;gap:6px;padding-bottom:8px}
  .st-prog button{width:44px;height:16px;padding:6px 0;border:0;background:none;cursor:pointer}
  .st-prog i{display:block;height:4px;border-radius:4px;background:linear-gradient(var(--y),var(--y)) left/0 100% no-repeat,#2c2c2c}
  .st-prog .is-done i{background-size:100% 100%,auto}
  .st-prog .is-on i{animation:stProgBg 5.5s linear forwards}
  .st-prog.is-paused .is-on i{animation-play-state:paused}
  .st-prog button:hover i{background-color:#3a3a3a}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.st-prog .is-on i{animation:none;background-size:100% 100%,auto}}

/* Hero box entry, same as the footer card rising over the handwritten script: it rises over the wordmark on load. */
@keyframes spHeroIn{from{opacity:0;transform:translateY(80px) scale(.95)}to{opacity:1;transform:none}}
.js .sp .sp-hero{animation:spHeroIn .9s cubic-bezier(.22,.61,.36,1) .25s both;transform-origin:50% 0}
@media (prefers-reduced-motion:reduce){.js .sp .sp-hero{animation:none}}

/* Steps on phones and tablets: the same idea stacked vertically. The open step is a dark card,
   the others are yellow strips (72px next to it, 40px further away); the intro starts as thin, medium, full. */
@media (max-width:1023px){
  .sp .sp-steps.sp-acc{display:flex;flex-direction:column;gap:10px}
  .sp .sp-steps.sp-acc li{flex:none;height:40px;min-height:0;padding:0 24px;margin:0;overflow:hidden;position:relative;background:var(--y);border:0;border-radius:20px;cursor:pointer;transition:height .8s cubic-bezier(.65,0,.25,1),padding .8s cubic-bezier(.65,0,.25,1),background-color .3s,box-shadow .3s}
  .sp .sp-steps.sp-acc li:before{display:none}
  .sp .sp-steps.sp-acc li.is-near{height:72px}
  .sp .sp-steps.sp-acc li.is-open{height:var(--oh,300px);padding:24px;background:#1a1a1a;box-shadow:inset 0 0 0 1px #262626;cursor:default}
  .sp .sp-steps.sp-acc .st-in{opacity:0;transition:opacity .25s}
  .sp .sp-steps.sp-acc li.is-open .st-in{opacity:1;transition:opacity .5s .3s}
  .sp .sp-steps.sp-acc .st-anim{height:140px;margin:0 0 20px;width:100%}
  .sp .sp-steps.sp-acc li .st-anim *{animation-delay:0s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(2){animation-delay:.15s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(3){animation-delay:.3s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(4){animation-delay:.45s !important}
  .sp .sp-steps.sp-acc li .st-chart i:nth-child(5){animation-delay:.6s !important}
  .sp .sp-steps.sp-acc.is-mark li{padding:0 24px;background:var(--y);box-shadow:none}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(1){height:40px}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(2){height:72px}
  .sp .sp-steps.sp-acc.is-mark li:nth-child(3){height:var(--oh,300px)}
  .sp .sp-steps.sp-acc.is-mark .st-in{opacity:0 !important;transition:none}
  .st-prog{display:flex;gap:5px;padding-bottom:6px}
  .st-prog button{width:30px;height:14px;padding:5px 0;border:0;background:none;cursor:pointer}
  .st-prog i{display:block;height:4px;border-radius:4px;background:linear-gradient(var(--y),var(--y)) left/0 100% no-repeat,#2c2c2c}
  .st-prog .is-done i{background-size:100% 100%,auto}
  .st-prog .is-on i{animation:stProgBg 5.5s linear forwards}
  .st-prog.is-paused .is-on i{animation-play-state:paused}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.sp .sp-steps.sp-acc li{transition:none}.st-prog .is-on i{animation:none;background-size:100% 100%,auto}}
@media (max-width:1023px){.sp .sp-steps.sp-acc[data-cur="1"] li.is-near{height:56px}}

/* Pricing cards: a raised top block (drawing, name, big price, one line, full-width button) and the list underneath. */
.sp .sp-place{background:#161616;border:1px solid #232323;border-radius:28px;padding:8px;gap:0}
.sp .sp-top{background:#222;border-radius:22px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.sp .sp-top .mk{border-radius:16px;border:0;aspect-ratio:16/8.4}
.sp .sp-top-b{padding:22px 18px 10px;display:flex;flex-direction:column}
.sp .sp-top-b h3{margin:0;font-size:16px;font-weight:600;color:var(--soft);letter-spacing:0}
.sp .sp-top-b .sp-price{margin:8px 0 0;font-size:clamp(40px,4vw,52px);line-height:1;letter-spacing:-.04em;font-weight:700;color:#fff}
.sp .sp-top-b .sp-price span{font-size:16px;letter-spacing:0;font-weight:500;color:var(--mute);margin-left:4px}
.sp .sp-top-b .sp-lead{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--soft)}
.sp .sp-top-b .sp-btn-full{margin-top:24px;width:100%;padding:16px 24px;font-size:15px}
.sp .sp-place .sp-place-b{padding:24px 26px 18px;flex:1}
.sp .sp-place .sp-place-b ul{margin:0}
.sp .sp-place .sp-place-b li{margin:0 0 12px}
.sp .sp-place .sp-place-b .sp-here{margin:14px 0 0}
@media (max-width:640px){.sp .sp-top-b{padding:20px 14px 8px}.sp .sp-place .sp-place-b{padding:22px 20px 14px}}

/* Past themed issues: same layout as the pricing cards' raised block (inset image, label, title, full-width button), no outer box. */
.sp .sp-thx a,.sp .sp-grey .sp-thx a{background:#222;border:0;border-radius:22px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .25s,box-shadow .25s}
.sp .sp-thx a:hover,.sp .sp-grey .sp-thx a:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.sp .sp-thx .tx-img{border-radius:16px}
.sp .sp-thx .tx-d{padding:22px 18px 0;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--soft)}
.sp .sp-thx .tx-t{padding:8px 18px 0;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.sp .sp-thx .tx-l{margin:24px 10px 10px;padding:16px 24px;border-radius:999px;background:#2e2e2e;color:#fff;font-size:15px;text-align:center;transition:background .2s,color .2s}
.sp .sp-thx a:hover .tx-l{background:var(--y);color:#000}
@media (max-width:640px){.sp .sp-thx .tx-d{padding:20px 14px 0}.sp .sp-thx .tx-t{padding:8px 14px 0}.sp .sp-thx .tx-l{margin:20px 6px 6px}}
.sp .sp-thx .tx-t{padding-bottom:24px}
.sp .sp-thx .tx-l{margin:auto 10px 10px}
@media (max-width:640px){.sp .sp-thx .tx-t{padding-bottom:20px}.sp .sp-thx .tx-l{margin:auto 6px 6px}}

/* Steps use the pricing card padding: 8px around the drawing box, text inset 18px under it. */
.sp .sp-steps.sp-acc .st-in>b{padding:0 18px}
@media (min-width:1024px){
  .sp .sp-steps.sp-acc li{height:250px;padding:8px}
  .sp .sp-steps.sp-acc .st-anim{border-radius:16px}
  .sp .sp-steps.sp-acc b{margin-top:22px}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){padding:0 18px}
}
@media (max-width:1023px){
  .sp .sp-steps.sp-acc li.is-open{padding:8px}
  .sp .sp-steps.sp-acc .st-anim{border-radius:16px;margin:0}
  .sp .sp-steps.sp-acc .st-in>b{display:block;margin-top:20px}
  .sp .sp-steps.sp-acc .st-in>span:not(.st-anim){display:block;padding:8px 18px 18px}
}
.sp .sp-steps.sp-acc li,.sp .sp-steps.sp-acc.is-mark li{border-radius:24px}
@media (min-width:1001px){.sp .sp-statbox{padding-top:82px}}
/* No shadows on the raised blocks (themed issues, pricing). */
.sp .sp-thx a,.sp .sp-grey .sp-thx a,.sp .sp-thx a:hover,.sp .sp-grey .sp-thx a:hover,.sp .sp-top{box-shadow:none}

/* Concentric corners: every outer radius = inner radius + the padding between them. */
.sp .sp-statbox .sp-stats div{border-radius:14px}
.sp .sp-statbox{border-radius:30px;padding:16px}
.sp .sp-mark{top:16px;left:16px}
@media (min-width:1001px){.sp .sp-statbox{padding-top:68px}}
@media (min-width:761px) and (max-width:1000px){.sp .sp-statbox{padding-top:150px}}
@media (max-width:760px){.sp .sp-statbox{padding-top:110px}}
.sp .sp-hero{border-radius:78px}
@media (max-width:1024px){.sp .sp-hero{border-radius:66px}}
@media (max-width:640px){.sp .sp-hero{border-radius:50px}}
.sp .sp-place{border-radius:32px}
.sp .sp-top{border-radius:24px}
.sp .sp-top .mk{border-radius:16px}
.sp .sp-thx a,.sp .sp-grey .sp-thx a{border-radius:24px}
.sp .sp-thx .tx-img{border-radius:16px}
/* Hero keeps its original corners; the stat panel inside is tighter (panel 20 = cards 8 + 12 padding). */
.sp .sp-hero{border-radius:32px}
@media (max-width:1024px){.sp .sp-hero{border-radius:28px}}
@media (max-width:640px){.sp .sp-hero{border-radius:22px}}
.sp .sp-statbox{border-radius:20px;padding:12px}
.sp .sp-statbox .sp-stats div{border-radius:8px}
.sp .sp-statbox .sp-stats{gap:8px}
.sp .sp-mark{top:12px;left:12px}
@media (min-width:1001px){.sp .sp-statbox{padding-top:64px}}
@media (min-width:761px) and (max-width:1000px){.sp .sp-statbox{padding-top:150px}}
@media (max-width:760px){.sp .sp-statbox{padding-top:110px}}
/* forms on */
/* results: unit + line closer together, sitting a bit lower */
.sp-light .sp-res .sp-res-unit{margin-top:18px}
.sp-light .sp-res .sp-res-body{margin-top:4px}
@media (max-width:760px){.sp-light .sp-res .sp-res-unit{margin-top:12px}.sp-light .sp-res .sp-res-body{margin-top:3px}}