@font-face{font-family:Diatype;src:url('/assets/diatype-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Diatype;src:url('/assets/diatype-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Anton;src:url('/assets/anton.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:light;--bg:#f9f7f4;--surface:#f6f4f2;--card:#f4f2ee;--ink:#201e1b;--muted:#1c1917;--line:#201e1b20;--lime:#1c1917;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Diatype,Arial,sans-serif;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-weight:400;letter-spacing:-.035em}p{font-size:18px;line-height:1.5;color:var(--muted)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0}img,video{max-width:100%;display:block}button:disabled{opacity:.35;cursor:not-allowed}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.container{width:min(1072px,calc(100% - 80px));margin-inline:auto}.section{padding:80px 0}.section-heading{margin-bottom:40px}.centered{text-align:center;max-width:640px;margin-inline:auto}.section-heading h2,h2{font-size:48px;line-height:1.25}.section-heading p{margin-top:16px}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:6px 12px;color:var(--ink);font-size:14px;line-height:1.25;margin-bottom:12px}.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}.icon{width:24px;height:24px;flex:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 21px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:15px;line-height:1.4;transition:background .2s,transform .2s}.button:hover{background:#1c1917;transform:translateY(-2px)}.button-dark{background:var(--bg);color:var(--ink)}.button-dark:hover{background:#ceccc9}.text-link{display:inline-flex;gap:5px;align-items:center;font-size:15px;min-height:44px}.text-link .icon{width:20px;height:20px;transition:transform .25s}.text-link:hover .icon{transform:translateX(4px)}.skip{position:fixed;z-index:50;top:-80px;left:16px;padding:12px;background:var(--lime);color:var(--bg)}.skip:focus{top:16px}
.site-header{position:fixed;z-index:30;inset:0 0 auto;height:72px;background:transparent;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}.site-header.scrolled,.site-header.menu-open{background:#f9f7f4f5;border-bottom-color:var(--line);backdrop-filter:blur(16px)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:inline-flex;align-items:center;gap:9px}.brand img{filter:brightness(0) invert(1)}.brand>span{font-family:Anton,sans-serif;letter-spacing:-.02em;font-size:27px;line-height:1}.site-header nav{display:flex;align-items:center;gap:32px}.site-header nav a{font-size:15px;position:relative;line-height:1.4}.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .25s}.site-header nav a:hover::after{transform:scaleX(1)}.menu-toggle{display:none}
.hero{background:var(--bg);min-height:862px;padding:160px 0 80px;overflow:hidden}.hero-inner{position:relative}.hero-copy{width:494px;position:relative;z-index:2}.hero h1{font-size:60px;line-height:1.05;letter-spacing:-.045em}.hero h1>span{display:block;margin-top:20px;max-width:490px;font-size:42px;line-height:1.13;color:var(--lime)}.hero-description{max-width:490px;margin-top:24px;font-size:18px}.hero-actions{display:flex;align-items:center;gap:16px;margin-top:32px}.hero-proof{display:flex;align-items:center;gap:13px;margin-top:56px}.hero-proof img{filter:brightness(0) invert(1)}.hero-proof p{font-size:15px;line-height:1.45;color:var(--ink)}.hero-proof p span{color:var(--muted)}
.hero-window{position:absolute;left:634px;top:0;width:1000px;height:624px;background:#f4f2f0;border:5px solid #201e1b28;border-radius:24px;overflow:hidden;box-shadow:0 16px 60px #1c191715}.window-top{height:66px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.window-brand{display:flex;align-items:center;gap:10px;font-size:15px}.window-brand>span{color:#1c1917;padding-inline:6px}.window-brand img{filter:brightness(0) invert(1)}.mini-tag{font-size:12px;border-radius:99px;padding:5px 10px;background:#201e1b0c;color:var(--muted)}.window-content{display:grid;grid-template-columns:540px 1fr;gap:24px;padding:24px}.hero-campaign{border-radius:16px;overflow:hidden;background:#f0eeea;border:1px solid var(--line)}.highlight-frame{position:relative;height:304px;isolation:isolate;background:#f8f6f4}.video-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--shot-position,50% center);opacity:0;pointer-events:none}.video-layer.is-current{opacity:1}.playback{position:absolute;right:12px;top:12px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border:1px solid #12100c55;border-radius:50%;padding:12px;background:#f9f7f49c;backdrop-filter:blur(12px)}.playback svg{grid-area:1/1;width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}.playback .play-icon{fill:currentColor;stroke:none}.playback .pause-icon{display:none}.highlight-frame[data-paused=false] .play-icon{display:none}.highlight-frame[data-paused=false] .pause-icon{display:block}.hero-campaign figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px}.hero-campaign figcaption #highlight-audience{font-size:15px;color:var(--muted)}.hero-campaign figcaption strong{display:block;font-weight:400;font-size:38px;line-height:1.2;letter-spacing:-.035em;color:var(--lime);margin-top:5px}.hero-campaign figcaption p{font-size:16px;color:var(--ink);margin-top:5px}.reward-covered{display:inline-flex;gap:5px;font-size:12px;white-space:nowrap;align-items:center}.reward-covered .icon{width:16px;height:16px;color:var(--lime)}.sidebar-label{font-size:16px;margin:4px 0 18px}.campaign-note{display:flex;gap:14px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.campaign-note>.icon{color:var(--lime)}.campaign-note span{font-size:13px;color:var(--muted)}.campaign-note strong{display:block;font-size:16px;font-weight:400;color:var(--ink);margin-top:7px}.campaign-assurance{margin-top:24px;padding:24px;background:var(--lime);color:var(--bg);border-radius:14px}.campaign-assurance img{filter:brightness(0)}.campaign-assurance h3{font-size:30px;line-height:1.1;margin-top:18px}.campaign-assurance p{color:#cccac8;font-size:14px;margin-top:12px}
.category-band{padding:80px 0 40px;text-align:center}.category-band p{font-size:16px}.category-marquee{overflow:hidden;max-width:900px;margin:30px auto 0;mask-image:linear-gradient(90deg,transparent,#fcfcfd 12%,#fcfcfd 88%,transparent)}.category-track{display:flex;width:max-content;animation:marquee 36s linear infinite}.category-set{display:flex;align-items:center;gap:70px;padding-right:70px}.category-set span{white-space:nowrap;font-size:27px;letter-spacing:-.04em;color:#353330}.category-set span:nth-child(2n){font-style:italic}.persona-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.persona-card{min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:58px;background:#f4f2ee;border:4px solid #201e1b10;border-radius:24px;padding:28px;box-shadow:0 4px 50px #1c191705}.round-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:#cbc9c6}.round-icon .icon{width:28px;height:28px}.persona-card h3{font-size:22px;line-height:1.3;margin-bottom:12px}.persona-card p{font-size:16px;line-height:1.45}.persona-card p strong{font-weight:400;color:#373532}
.site-footer{background:var(--bg);padding:64px 0 28px}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:64px}.footer-main>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.footer-main p{font-size:16px;margin-top:4px}.footer-main>div>span{font-size:16px;margin-bottom:6px}.footer-main a:not(.brand){display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}.footer-main .icon{width:18px;height:18px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;font-size:14px;color:var(--muted)}
@keyframes marquee{to{transform:translateX(-50%)}}.category-marquee:hover .category-track{animation-play-state:paused}
.js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease) var(--delay,0s),transform .8s var(--ease) var(--delay,0s)}.js [data-reveal].visible{opacity:1;transform:none}.hero-copy>[data-reveal]:nth-child(1){--delay:.2s}.hero-copy>[data-reveal]:nth-child(2){--delay:.4s}.hero-copy>[data-reveal]:nth-child(3){--delay:.6s}.hero-copy>[data-reveal]:nth-child(4){--delay:.8s}
@media(max-width:1199px){.site-header nav{gap:20px}.nav-inner{gap:20px}.hero{padding-top:140px;min-height:0;padding-bottom:0}.hero-copy{width:600px;max-width:100%;text-align:center;margin:auto}.hero h1>span{max-width:600px;font-size:38px}.hero-description{max-width:560px;margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-proof{margin-top:36px;text-align:left}.hero-window{position:relative;left:auto;top:auto;width:1000px;height:520px;margin-top:64px}.persona-card{padding:24px;gap:50px}.section{padding:40px 0}.section-heading h2,h2{font-size:40px}.hero h1{font-size:52px}}
@media(max-width:809px){.container{width:calc(100% - 40px)}.site-header{height:56px}.nav-cta{display:none}.brand>span{font-size:25px}.brand img{width:25px;height:25px}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;background:transparent}.menu-toggle span{width:18px;height:1.5px;background:currentColor;transition:transform .2s}.menu-open .menu-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-open .menu-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.site-header nav{display:none;position:absolute;top:56px;left:0;right:0;padding:24px 20px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:12px;align-items:stretch}.site-header.menu-open nav{display:flex}.site-header nav a{padding:10px 0;font-size:18px}.hero{padding-top:120px}.hero h1{font-size:36px;line-height:1.25;letter-spacing:-.04em}.hero h1>span{font-size:28px;line-height:1.2;margin-top:16px}.hero-description{font-size:16px;line-height:1.5;max-width:440px;margin-top:20px}.hero-actions{flex-direction:column;align-items:stretch;margin-top:32px;gap:16px}.hero-actions .text-link{justify-content:center}.hero-actions .button{width:100%}.hero-proof{display:none}.hero-window{width:680px;height:390px;margin-top:48px;border-radius:20px 20px 0 0;border-width:3px}.window-top{height:44px;padding:0 12px}.window-top .mini-tag{display:none}.window-brand{font-size:12px;gap:6px}.window-brand img{width:16px;height:16px}.window-brand>span{padding-inline:2px}.window-content{grid-template-columns:326px 272px;gap:18px;padding:12px}.highlight-frame{height:183px}.hero-campaign{border-radius:12px}.hero-campaign figcaption{padding:14px;gap:8px}.hero-campaign figcaption #highlight-audience{font-size:13px}.hero-campaign figcaption strong{font-size:26px;margin-top:2px}.hero-campaign figcaption p{font-size:14px;margin-top:3px}.reward-covered{display:none}.hero-campaign .video-layer{object-position:var(--shot-mobile-position,50% center)}.campaign-note{padding:12px}.campaign-note strong{font-size:14px}.campaign-assurance{padding:16px;margin-top:16px}.campaign-assurance h3{font-size:24px}.campaign-assurance p{font-size:14px}.sidebar-label{font-size:14px;margin-bottom:12px}.category-band{padding:80px 0 40px}.category-band p{font-size:16px}.category-set{gap:42px;padding-right:42px}.category-set span{font-size:25px}.section-heading h2,h2{font-size:28px;line-height:1.25}.section-heading p{font-size:16px}.persona-grid{grid-template-columns:1fr;gap:20px}.persona-card{min-height:270px;gap:40px;padding:28px}.persona-card h3{font-size:20px}.section-heading{margin-bottom:40px}.footer-main{grid-template-columns:1fr 1fr;gap:40px 24px;padding-bottom:40px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{font-size:12px;gap:20px}.site-footer{padding-top:40px}}
@media(max-width:360px){.hero h1{font-size:32px}.hero h1>span{font-size:26px}.window-content{grid-template-columns:256px 272px}.highlight-frame{height:160px}.hero-window{height:380px}.hero-campaign figcaption p{font-size:14px}.hero-campaign figcaption strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js [data-reveal]{opacity:1;transform:none}}
/* Four feature panels: the reference's sticky/scale stack on desktop. */
.process-stack:not(.stack-active) .process-card{position:relative;top:auto}
.process-card:focus-within{z-index:2}
.split-heading{display:grid;grid-template-columns:476px 1fr;gap:120px;align-items:center;margin-bottom:56px}.split-heading p{font-size:18px}.process-stack{display:flex;flex-direction:column;gap:40px;position:relative;overflow:visible}.process-card{position:sticky;top:120px;transform-origin:center center;border-radius:24px;padding:56px;min-height:478px;box-shadow:inset 0 0 0 5px #201e1b13,0 4px 50px #1c191705;will-change:transform;background:#f1efec}.card-2{background:#f0eeec}.card-3{background:#f0eeec}.card-4{background:#f1efec}.process-card-inner{display:grid;grid-template-columns:minmax(0,362px) minmax(0,446px);gap:152px;min-height:366px}.process-copy{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:28px}.process-copy .eyebrow{background:#f9f7f470;border-color:#201e1b18;font-size:14px;margin-bottom:20px}.process-copy h3{font-size:32px;line-height:1.3;letter-spacing:-.035em}.process-copy p{font-size:18px;margin-top:16px;color:#1c1917}.process-art{display:flex;align-items:center;justify-content:center;min-width:0}.demo-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #201e1b10;border-radius:99px;background:#f9f7f4bf;padding:10px 13px;margin-bottom:14px;font-size:13px;line-height:1.3;color:var(--ink)}.demo-pill>.icon{width:18px;height:18px;color:var(--lime)}.demo-pill>img{filter:brightness(0) invert(1)}.art-footnote{font-size:12px;line-height:1.4;color:#1c1917;margin-top:12px}.brief-demo,.sales-demo,.offer-demo,.reward-demo{width:100%}.brief-row{display:flex;align-items:center;gap:14px;background:#201e1b0c;padding:20px;border:1px solid #201e1b13;border-radius:16px;margin-bottom:9px}.demo-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:#1c191724;color:var(--lime)}.brief-row>div{flex:1}.brief-row>div>span{display:block;font-size:13px;color:var(--muted)}.brief-row strong{display:block;font-size:16px;line-height:1.35;font-weight:400;margin-top:6px}.brief-row>.icon{width:17px;height:17px;color:var(--lime)}.brief-row:last-of-type{opacity:.65}
.promo-creative{border-radius:16px;overflow:hidden;display:grid;grid-template-columns:42% 58%;min-height:265px;background:var(--lime);color:var(--bg)}.promo-creative>img{width:100%;height:100%;min-height:265px;object-fit:cover;object-position:50% center}.promo-creative>div{padding:24px 20px}.promo-creative>div>span{font-size:12px}.promo-creative h4{font-size:36px;line-height:1.05;margin-top:18px}.promo-creative p{font-size:15px;line-height:1.4;color:#cdcbc8;margin-top:14px}.promo-creative small{display:block;font-size:12px;margin-top:18px;color:#bab8b6}
.sales-table{background:#f6f4f1;border:1px solid #201e1b17;border-radius:16px;overflow:hidden}.sales-table-head{display:flex;justify-content:space-between;padding:18px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.sale-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:20px 18px;border-bottom:1px solid var(--line);font-size:14px}.sale-row>span{display:flex;align-items:center;gap:8px}.sale-row .icon{width:18px;height:18px}.sale-row>span:last-child{font-size:12px;color:var(--lime)}.sales-table-foot{padding:16px 18px;font-size:12px;line-height:1.4;color:var(--muted)}
.funding-flow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 22px}.funding-flow>span{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;white-space:nowrap;color:var(--muted)}.funding-flow>span>img{filter:brightness(0) invert(1);height:28px;width:28px}.funding-flow>span>.icon{width:28px;height:28px;color:var(--lime)}.funding-flow>.icon{width:18px;height:18px;color:#1c1917}.credit-demo{background:var(--lime);color:var(--bg);border-radius:16px;padding:24px}.credit-demo>span{font-size:14px}.credit-demo>strong{display:block;font-size:60px;line-height:1.1;letter-spacing:-.05em;font-weight:400;margin-top:12px}.credit-demo p{font-size:16px;color:#bab8b5}.credit-demo>div{display:flex;align-items:center;gap:8px;border-top:1px solid #f9f7f424;padding-top:14px;margin-top:18px;font-size:12px}.credit-demo .icon{width:16px;height:16px}
.statement-inner{display:flex;align-items:center;justify-content:center;gap:54px;max-width:850px}.statement figure{position:relative;flex:none;width:147px;height:180px}.statement figure>img{width:100%;height:100%;object-fit:cover;object-position:22% center;border-radius:20px}.statement figure>span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;padding:9px 12px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:13px}.statement figure>span>img{filter:brightness(0)}.statement-copy{font-size:28px;line-height:1.45;color:var(--ink);letter-spacing:-.02em}.statement-inner>div>span{display:block;font-size:14px;color:var(--muted);margin-top:20px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}.benefit-grid .round-icon{width:48px;height:48px;margin-bottom:32px}.benefit-grid .round-icon .icon{width:22px;height:22px}.benefit-grid h3{font-size:22px;line-height:1.3;margin-bottom:12px}.benefit-grid p{font-size:16px;line-height:1.5}
.pieces-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.pieces-inner h2{max-width:500px}.pieces-inner p{margin-top:16px}.pieces-window{height:440px;position:relative;overflow:hidden;border:5px solid #201e1b13;border-radius:24px;background:#f4f2ee;box-shadow:0 4px 50px #1c191705;mask-image:linear-gradient(0deg,transparent,#fcfcfd 8%,#fcfcfd 92%,transparent)}.pieces-tilt{position:absolute;inset:-50px -60px;transform:rotate(-7deg);display:flex;flex-direction:column;gap:18px}.piece-track{display:flex;flex:none;width:max-content;animation:marquee 44s linear infinite}.piece-track:nth-child(2){animation-direction:reverse;animation-duration:52s}.piece-set{display:flex;gap:18px;padding-right:18px}.piece-tile{width:128px;height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#eeece9;border-radius:20px;border:1px solid var(--line)}.piece-tile>.icon{width:36px;height:36px;color:var(--lime)}.piece-tile span{font-size:13px}.pieces-window:hover .piece-track{animation-play-state:paused}
.case-study{background:var(--bg);padding:80px 0}.case-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.case-brand{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:28px;letter-spacing:-.025em}.case-brand>img{object-fit:contain}.case-copy>p{margin-top:16px}.case-copy>.button{margin-top:28px}.case-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.case-stats>div>strong{display:block;font-weight:400;font-size:56px;line-height:1.15;letter-spacing:-.045em;color:var(--lime)}.case-stats>div>span{display:block;font-size:14px;color:var(--muted);margin-top:8px}.case-copy .case-source{font-size:12px;line-height:1.5;margin-top:20px}.case-photo{position:relative;align-self:stretch;min-height:550px;border:4px solid #1c191770;border-radius:24px;overflow:hidden}.case-photo>img{width:100%;height:100%;object-fit:cover;object-position:64% center}.case-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 14px;background:linear-gradient(transparent,#1c19174f);font-size:12px;color:#1f1d1a}
.builder-section,.examples{background:#f5f3f0}.builder-section{padding-top:120px;padding-bottom:40px}.builder-path{display:flex;align-items:center;justify-content:center;gap:18px;width:max-content;max-width:100%;margin:56px auto;border:4px solid #201e1b0e;border-radius:99px;padding:10px 16px;background:#f2f0ed;font-size:14px}.builder-path .icon{width:16px;height:16px;color:var(--muted)}.builder-path>span:nth-of-type(2){color:var(--lime)}.builder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}.build-card{position:relative;background:#f2f0ed;border:4px solid #201e1b10;border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;min-width:0}.step-label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:16px;margin-bottom:26px}.step-label .icon{width:20px;height:20px;color:var(--lime)}.build-card h3{font-size:29px;line-height:1.2;margin-bottom:8px}.build-card p{font-size:16px;line-height:1.4;min-height:2.8em}.build-card.featured{padding:0;border-color:var(--lime);background:var(--lime)}.featured-label{position:absolute;left:-4px;right:-4px;bottom:100%;padding:10px 12px 13px;text-align:center;background:var(--lime);color:var(--bg);font-size:13px;border-radius:24px 24px 0 0}.featured-inner{height:100%;display:flex;flex-direction:column;background:#efedea;border-radius:20px;padding:28px 24px}.goal-choices{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.goal-choices button{width:100%;display:flex;align-items:center;gap:10px;min-height:59px;border:1px solid var(--line);border-radius:10px;background:#f9f7f438;text-align:left;padding:8px 10px;font-size:15px}.goal-choices img{width:36px;height:36px;object-fit:contain;border-radius:6px}.goal-choices .icon{width:16px;height:16px;margin-left:auto;opacity:0}.goal-choices button[aria-pressed=true]{border-color:#1c191785;background:#1c19170e}.goal-choices button[aria-pressed=true] .icon{opacity:1;color:var(--lime)}.build-foot{display:block;font-size:12px;color:var(--muted);padding-top:24px;margin-top:auto;line-height:1.5}.moment-choices{display:flex;flex-direction:column;gap:12px;border:0;border-top:1px solid var(--line);margin:24px 0 0;padding:24px 0 0}.moment-choices label{display:flex;gap:11px;align-items:flex-start;padding:15px 12px;border:1px solid var(--line);border-radius:10px;font-size:16px;line-height:1.4;cursor:pointer}.moment-choices label:has(input:checked){background:#1c19170b;border-color:#1c191785}.moment-choices input{accent-color:var(--lime);width:16px;height:16px;flex:none;margin-top:3px}.reward-editor{margin-top:22px}.reward-dial{width:180px;max-width:100%;aspect-ratio:1;position:relative;margin:0 auto;touch-action:none;cursor:grab;user-select:none;border-radius:50%}.reward-dial.is-dragging{cursor:grabbing}.reward-dial>svg{display:block;width:100%;height:100%;overflow:visible}.reward-track,.reward-fill{fill:none;stroke-width:4}.reward-track{stroke:#201e1b1a}.reward-fill{stroke:var(--lime);stroke-linecap:round}.reward-knob circle{fill:var(--ink);stroke:#f4f2ee;stroke-width:3}.reward-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.reward-readout>strong{font-size:43px;line-height:1.1;font-weight:400;letter-spacing:-.05em}.reward-readout>strong>span{font-size:24px;vertical-align:top;line-height:1.6}.reward-readout>span{font-size:12px;color:var(--muted);margin-top:4px}.reward-adjust{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}.reward-adjust>button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#201e1b0a;border:1px solid var(--line);font-size:24px}.reward-adjust>span{font-size:13px;text-align:center;min-width:95px}.reward-adjust>button:hover:not(:disabled){border-color:var(--lime)}.build-result{display:flex;align-items:center;gap:20px;border-block:1px solid var(--line);padding:30px 0;margin-top:40px}.result-art{width:76px;flex:none}.result-art img{width:76px;height:76px;object-fit:contain}.result-art img[data-photo=true]{border-radius:10px}.result-offer{flex:1}.result-offer>span{font-size:13px;color:var(--muted)}.result-offer h3{font-size:22px;line-height:1.3;margin:6px 0 10px}.result-offer h3>span:first-child{color:var(--lime)}.result-offer h3>span:last-child{color:var(--ink)}.result-offer p{font-size:13px}.result-offer p strong{font-weight:400;color:var(--ink);display:block}.result-offer p>span{display:block}.build-result .button{flex:none}.disclaimer{font-size:12px;line-height:1.5;color:var(--muted);margin-top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.examples{padding-top:80px}.examples-controls{display:flex;justify-content:flex-end;margin-top:-20px;margin-bottom:12px}.examples-controls button{background:transparent;padding:0;color:var(--muted);font-size:13px}.examples-controls span{width:16px}.examples-window{height:680px;overflow:hidden;mask-image:linear-gradient(transparent,#fcfcfd 10%,#fcfcfd 85%,transparent)}.example-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;height:100%}.example-column{min-width:0}.example-ticker{animation:vertical-marquee 55s linear infinite}.example-column:nth-child(2) .example-ticker{animation-direction:reverse;animation-duration:65s}.example-column:nth-child(3) .example-ticker{animation-duration:60s}.example-set{display:flex;flex-direction:column;gap:20px;padding-bottom:20px}.example-card{background:#f1efec;border:3px solid #201e1b0e;border-radius:24px;padding:28px}.example-kicker{font-size:12px;color:var(--muted)}.example-card h3{font-size:24px;margin-top:16px;margin-bottom:12px;line-height:1.25}.example-card p{font-size:16px;line-height:1.45}.example-card>div{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:13px;color:var(--muted)}.example-card img{width:42px;height:42px;border-radius:50%;object-fit:contain;background:#201e1b0b}.examples.is-paused .example-ticker,.examples-window:hover .example-ticker{animation-play-state:paused}@keyframes vertical-marquee{to{transform:translateY(-50%)}}
.faq-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.faq-inner>div>p{margin-top:16px}.faq-list{border:4px solid #201e1b0e;border-radius:24px;padding:8px 24px;background:#f4f2ee}.faq-list details+details{border-top:1px solid var(--line)}.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding-block:18px;font-size:17px;line-height:1.35}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{display:grid;place-items:center;width:24px;height:24px;flex:none;font-size:24px;line-height:1;transition:transform .3s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-answer p{font-size:16px;line-height:1.5;padding-bottom:24px}.faq-list details[open] .faq-answer{animation:answer-in .3s var(--ease)}@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.learn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.learn-picture{height:240px;border-radius:24px;border:4px solid #201e1b0e;overflow:hidden;background:#f2f0ec;margin-bottom:22px}.learn-picture img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.learn-card:nth-child(2) .learn-picture img{object-fit:contain;padding:32px}.learn-card:nth-child(3) .learn-picture img{object-fit:contain;background:#201e1b}.learn-card:hover .learn-picture img{transform:scale(1.05)}.learn-card h3{font-size:22px;line-height:1.3;margin-bottom:14px}.learn-card>span{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}.learn-card .icon{width:18px;height:18px}.learn-action{text-align:center;margin-top:40px}
.closing{padding:80px 0 0;background:var(--bg);height:540px;overflow:hidden}.closing-inner{position:relative}.closing-copy{max-width:650px;text-align:center;margin:auto;position:relative;z-index:2}.closing h2{font-size:60px;line-height:1.05}.closing p{margin-top:16px;max-width:470px;margin-inline:auto}.closing .button{margin-top:28px}.closing-preview{width:800px;border:5px solid #201e1b1f;border-radius:24px;background:#f4f2ee;overflow:hidden;position:relative;transform:rotate(-6deg);margin:60px auto 0}.closing-preview-body{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding:24px}.closing-preview-body>img{width:100%;height:260px;object-fit:cover;border-radius:14px}.closing-preview-body>div{background:var(--lime);border-radius:14px;padding:28px;color:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:10px}.closing-preview-body>div>span{font-size:16px}.closing-preview-body>div>strong{font-weight:400;font-size:44px;letter-spacing:-.04em}.motion-pause{position:fixed;z-index:31;bottom:16px;right:16px;background:var(--bg);border:1px solid var(--line);border-radius:99px;min-height:44px;padding:10px 14px;font-size:12px}.motion-paused .category-track,.motion-paused .piece-track,.motion-paused .example-ticker{animation-play-state:paused}
@media(max-width:1199px){.split-heading{grid-template-columns:1fr 1fr;gap:64px;margin-bottom:40px}.process-card{position:relative;top:auto;padding:40px;min-height:0}.process-card-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;min-height:366px}.process-copy h3{font-size:30px}.process-copy p{font-size:16px}.brief-row{padding:15px;gap:10px}.brief-row strong{font-size:14px}.demo-icon{width:40px;height:40px}.promo-creative{grid-template-columns:36% 64%;min-height:260px}.promo-creative>div{padding:20px 16px}.promo-creative h4{font-size:29px}.promo-creative p{font-size:14px}.sales-table-head,.sale-row{padding-inline:12px}.sale-row{font-size:13px}.sale-row>span{gap:5px}.sale-row .icon{width:14px;height:14px}.pieces-inner,.case-inner,.faq-inner{gap:40px}.case-photo{min-height:500px}.build-card,.featured-inner{padding:24px 18px}.build-card.featured{padding:0}.build-card h3{font-size:25px}.goal-choices button{font-size:14px;gap:7px}.builder-grid{gap:16px}.builder-section{padding-top:80px}.reward-dial{width:160px}.reward-adjust{gap:4px}.reward-adjust>span{min-width:84px;font-size:12px}.build-result .button{font-size:13px}.result-offer h3{font-size:20px}.example-card{padding:22px}.example-columns{gap:16px}.learn-picture{height:200px}.closing h2{font-size:52px}}
@media(min-width:810px) and (max-width:1199px){.process-card-inner{grid-template-columns:1fr;gap:32px}.process-copy{gap:24px}.process-art{max-width:446px;margin:auto;width:100%}.process-copy .button{align-self:flex-start}.process-copy h3{max-width:450px}.process-copy p{max-width:520px}.build-card,.featured-inner{padding-inline:15px}.build-card h3{font-size:24px}.goal-choices img{width:28px;height:28px}.goal-choices button{font-size:13px}.moment-choices label{font-size:14px;padding:14px 9px}.reward-dial{width:148px}}
@media(max-width:809px){.split-heading{grid-template-columns:1fr;gap:16px;margin-bottom:40px}.split-heading p{font-size:16px}.process-stack{gap:24px}.process-card{padding:28px;border-radius:24px;box-shadow:inset 0 0 0 4px #201e1b13,0 4px 50px #1c191705;will-change:auto}.process-card-inner{display:flex;flex-direction:column;gap:32px;min-height:0}.process-copy{gap:32px;align-items:stretch}.process-copy h3{font-size:24px;line-height:1.5}.process-copy p{font-size:16px;line-height:1.5;margin-top:16px}.process-copy .button{width:100%}.process-copy .eyebrow{margin-bottom:20px;font-size:13px}.process-art{max-width:446px;width:100%;margin:auto}.brief-row{padding:14px;gap:10px}.brief-row strong{font-size:14px}.brief-row>div>span{font-size:12px}.brief-row>.icon{width:14px;height:14px}.demo-pill{font-size:12px}.art-footnote{font-size:12px}.promo-creative{grid-template-columns:1fr;position:relative;min-height:310px}.promo-creative>img{height:110px;min-height:0;width:100%;object-position:50% 55%}.promo-creative>div{padding:20px}.promo-creative h4{font-size:32px;margin-top:12px}.promo-creative h4 br{display:none}.promo-creative p{font-size:15px}.promo-creative small{margin-top:12px}.funding-flow{gap:8px}.funding-flow>span{font-size:12px}.funding-flow>.icon{width:14px;height:14px}.credit-demo{padding:20px}.credit-demo>strong{font-size:48px}.sale-row{font-size:12px;gap:8px;min-height:60px}.sale-row>span:first-child{gap:6px}.sale-row>span:first-child .icon{display:none}.sales-table-head{font-size:12px;gap:8px}.sales-table-foot{padding:15px 12px}.statement-inner{flex-direction:column-reverse;text-align:center;gap:40px;max-width:600px}.statement-copy{font-size:24px;line-height:1.5}.statement-copy br{display:none}.statement figure{width:147px;height:129px}.statement-inner>div>span{margin-top:20px}.benefit-grid{grid-template-columns:1fr;gap:40px}.benefit-grid .round-icon{margin-bottom:24px}.benefit-grid h3{font-size:20px}.benefit-grid p{font-size:16px}.pieces-inner,.case-inner,.faq-inner{grid-template-columns:1fr;gap:32px}.pieces-inner p,.case-copy>p,.faq-inner>div>p{font-size:16px}.pieces-window{height:320px}.pieces-tilt{inset:-45px -60px}.piece-tile{width:114px;height:114px;gap:14px}.piece-tile>.icon{width:32px;height:32px}.case-study{padding:40px 0}.case-brand{font-size:20px;margin-bottom:24px}.case-brand>img{width:36px;height:36px}.case-copy>.button{width:100%;margin-top:28px}.case-stats{margin-top:32px;gap:20px}.case-stats>div>strong{font-size:44px}.case-stats>div>span{font-size:13px}.case-photo{min-height:0;height:350px;border-radius:24px}.case-photo>img{object-position:60% center}.builder-section{padding-top:80px}.builder-path{margin:40px auto 32px;gap:12px;font-size:13px;padding:8px 12px}.builder-grid{grid-template-columns:1fr;gap:40px}.build-card,.featured-inner{padding:28px}.build-card{min-height:0}.build-card h3{font-size:28px}.build-card p{min-height:0}.build-card.featured{margin-top:20px}.step-label{margin-bottom:20px}.goal-choices{margin-top:24px;padding-top:24px}.goal-choices button{min-height:62px;font-size:16px;padding:10px 12px}.goal-choices img{width:40px;height:40px}.moment-choices label{font-size:16px;min-height:60px}.reward-dial{width:190px}.reward-adjust{gap:16px}.reward-adjust>span{font-size:14px;min-width:110px}.reward-readout>strong{font-size:46px}.build-result{flex-wrap:wrap;gap:16px;padding:28px 0}.result-art{width:56px}.result-art img{width:56px;height:56px}.result-offer{flex-basis:calc(100% - 72px)}.result-offer h3{font-size:20px;line-height:1.4}.result-offer h3>span:last-child{display:block}.build-result .button{width:100%;font-size:15px;margin-top:8px}.examples{padding-top:40px}.example-columns{grid-template-columns:1fr;gap:0}.example-column:nth-child(n+2){display:none}.examples-window{height:620px}.example-card{padding:26px}.example-card h3{font-size:24px}.examples-controls{margin-top:-12px}.faq-list{padding:0 20px}.faq-list summary{font-size:16px;min-height:78px}.faq-answer p{font-size:16px}.learn-grid{grid-template-columns:1fr;gap:32px}.learn-picture{height:240px;margin-bottom:20px}.learn-card h3{font-size:22px}.learn-action .button{width:100%}.closing{height:500px;padding-top:40px}.closing h2{font-size:36px;line-height:1.25}.closing p{font-size:16px}.closing .button{width:100%;margin-top:28px}.closing-preview{width:680px;margin-top:56px;left:0;border-width:4px}.closing-preview-body{grid-template-columns:310px 280px;padding:16px;gap:16px}.closing-preview-body>img{height:240px}.closing-preview-body>div{padding:20px}.closing-preview-body>div>strong{font-size:36px}.motion-pause{bottom:12px;right:12px;font-size:12px}}
@media(max-width:360px){.process-card{padding:24px}.process-copy h3{font-size:23px}.demo-icon{width:32px;height:32px}.demo-icon .icon{width:20px;height:20px}.brief-row{padding:12px;gap:9px}.brief-row>.icon{display:none}.sale-row{padding:16px 10px}.sale-row>span:last-child .icon{display:none}.funding-flow{gap:6px}.funding-flow>span{font-size:11px}.build-card,.featured-inner{padding:24px}.case-photo{height:280px}.builder-path{gap:8px}.learn-picture{height:210px}}
@media(prefers-reduced-motion:reduce){.process-card{position:relative;top:auto;transform:none!important;will-change:auto}.example-ticker{transform:none!important}.example-set[aria-hidden=true]{display:none}.pieces-window .piece-track{transform:none}.motion-pause{display:none}}

/* Explicit credit language and compact navigation at intermediate widths. */
#highlight-credit{display:block;color:var(--muted);font-size:14px;margin-top:3px}
@media(min-width:1200px){.window-content{grid-template-columns:min(540px,calc(50vw - 147px)) 1fr}}
@media(min-width:810px) and (max-width:1199px){.hero-window{height:624px}}
@media(min-width:810px) and (max-width:1000px){.site-header nav{gap:14px}.site-header nav a{font-size:13px}.nav-inner{gap:14px}.nav-cta{padding-inline:16px;font-size:13px}}
@media(max-width:809px){#highlight-credit{font-size:12px}.hero-campaign figcaption p{line-height:1.4}.hero-campaign figcaption{padding-bottom:16px}}
@media(max-width:809px){.hero-window{height:auto}.campaign-sidebar{height:0}}
@media(prefers-reduced-motion:reduce){.examples-window{height:auto;overflow:visible;mask-image:none}.examples-controls{display:none}}


/* =====================================================================================================
   Prototype 21 (appended to prototype 20's styles by scripts/build-p21.py)
   ===================================================================================================== */

/* ---------- One partner, all the way through: a different graphic on each card ---------- */
.process-copy{justify-content:space-between}
.process-steps{display:flex;align-items:center;gap:6px}
.process-steps i{width:20px;height:4px;border-radius:9px;background:#201e1b26}
.process-steps i.is-on{width:36px;background:var(--lime)}
.process-steps span{margin-left:8px;font-size:13px;color:var(--muted)}
@media(min-width:1200px){.process-card-inner{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:64px}
}
@media(min-width:810px) and (max-width:1199px){.process-art{max-width:580px}
}
.process-art>[data-reveal]{--delay:.1s}

/* 01: the goal, on a seat map */
.seat-demo{width:100%;padding:20px 20px 18px;border-radius:20px;background:#f4f2f0;border:1px solid #201e1b12}
.seat-goal{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--lime)}
.seat-goal .icon{width:15px;height:15px}
.seat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.seat-head strong{display:block;margin-top:6px;font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.035em}
.seat-head small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.seat-map{display:block;width:100%;max-width:440px;height:auto;margin:10px auto 0}
.sec{fill:#c8c6c4}
@keyframes seat-pulse{50%{fill:#1c1917}}
.court rect{fill:#4a4845;stroke:#eeecea33}
.court path,.court circle{fill:none;stroke:#eeecea55;stroke-width:1.2}
.seat-legend{display:flex;flex-direction:column;gap:6px;flex:none;padding-top:2px;font-size:12px;color:var(--muted)}
.seat-legend i{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:3px;background:#c8c6c4;vertical-align:-1px}
.seat-legend i.is-open{background:var(--lime)}
.seat-brief{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.seat-brief>span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#201e1b0a;border:1px solid #201e1b10;font-size:13.5px;line-height:1.3}
.seat-brief .icon{grid-row:span 2;width:18px;height:18px;color:var(--lime)}
.seat-brief em{font-style:normal;font-size:11.5px;color:var(--muted)}
.motion-paused .sec.is-open{animation-play-state:paused}

/* 02: the offer, as an email blast and an Instagram post */
.blast-demo{position:relative;width:100%;height:440px}
.mail{position:absolute;left:0;top:0;width:58%;border-radius:14px;overflow:hidden;background:#fff;color:#1d1b18;box-shadow:0 30px 60px -30px #000c}
.mail-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#f0eeeb;border-bottom:1px solid #e0dedb;font-size:11.5px;color:#686662}
.mail-bar .icon{width:14px;height:14px}
.mail-meta{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid #eceae8}
.mail-meta img{width:30px;height:30px;border-radius:50%}
.mail-meta b{display:block;font-weight:700;font-size:12px;line-height:1.3}
.mail-meta div span{display:block;font-size:11.5px;line-height:1.35;color:#3c3a37;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-meta small{align-self:start;font-size:10.5px;color:#868482}
.mail-body{padding:12px 12px 14px;text-align:center}
.mail-hero{position:relative;height:108px;border-radius:8px;overflow:hidden;background:#0c2340}
.mail-hero img{width:100%;height:100%;object-fit:cover;object-position:62% 26%}
.mail-hero span{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:99px;background:#0c2340e6;color:#fff;font-size:10px;letter-spacing:.02em}
.mail-body h4{margin-top:12px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:29px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:#0c2340}
.mail-body p{margin-top:8px;font-size:12px;line-height:1.45;color:#3c3a37}
.mail-cta{display:inline-flex;align-items:center;height:32px;margin-top:10px;padding:0 18px;border-radius:99px;background:#236192;color:#fff;font-size:12px}
.mail-body small{display:block;margin-top:8px;font-size:10px;line-height:1.3;color:#868482}
.gram{position:absolute;right:0;top:40px;width:43.5%;border-radius:14px;overflow:hidden;background:#fff;color:#13110e;box-shadow:0 30px 60px -24px #000d}
.gram-head{display:flex;align-items:center;gap:8px;padding:8px 10px}
.gram-head img{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #1c1917}
.gram-head b{font-size:12px;font-weight:700}
.gram-head span{margin-left:auto;font-size:9px;letter-spacing:.1em;color:#575552}
.gram-img{position:relative;aspect-ratio:1;overflow:hidden;background:#0c2340}
.gram-img>img{width:100%;height:100%;object-fit:cover;object-position:46% 40%}
.gram-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c234000 28%,#0c2340eb 92%)}
.gram-text{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;color:#fff}
.gram-text span{display:inline-block;padding:3px 8px;border-radius:99px;background:var(--lime);color:#12100c;font-size:10px}
.gram-text strong{display:block;margin-top:7px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;line-height:.98;text-transform:uppercase}
.gram-text em{display:block;margin-top:6px;font-style:normal;font-size:11px;line-height:1.3;color:#e6e4e0}
.gram-actions{display:flex;align-items:center;gap:12px;padding:9px 10px 4px}
.gram-actions .icon{width:20px;height:20px;color:#13110e}
.gram-actions .icon:first-child{color:#ed4956;fill:#ed4956}
.gram-actions i{flex:1}
.gram-likes{padding:0 10px;font-size:11.5px;font-weight:700;color:#13110e}
.gram-cap{padding:3px 10px 11px;font-size:11.5px;line-height:1.4;color:#24221f}
.gram-cap b{font-weight:700}
.js .blast-demo .gram{opacity:0;transform:translate(24px,16px) rotate(2deg);transition:opacity .7s var(--ease) .35s,transform .9s var(--ease) .35s}
.js .blast-demo.visible .gram{opacity:1;transform:none}

/* 03: coverage alongside sales, as a chart */
.cover-demo{width:100%;padding:22px;border-radius:20px;background:#f5f3f0;border:1px solid #201e1b12}
.cover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cover-head small{display:block;font-size:12.5px;color:var(--muted)}
.cover-head strong{display:block;margin-top:4px;font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.045em}
.cover-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;background:#1c19171f;color:var(--lime);font-size:12px;white-space:nowrap}
.cover-pill .icon{width:15px;height:15px}
.cover-chart{position:relative;height:160px;margin-top:18px}
.cover-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.cover-grid i{height:1px;background:#201e1b12}
.cover-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:7px;padding:0 2px}
.cover-bars i{position:relative;flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:#bfbdba;transform-origin:bottom}
.cover-bars i::before{content:"";position:absolute;left:0;right:0;top:0;height:max(5px,16%);border-radius:5px 5px 0 0;background:var(--lime)}
.js .cover-demo .cover-bars i{transform:scaleY(.04);transition:transform .9s var(--ease) calc(var(--d) + .2s)}
.js .cover-demo.visible .cover-bars i{transform:none}
.cover-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--muted)}
.cover-legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--muted)}
.cover-legend i{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:3px;background:#bfbdba;vertical-align:-1px}
.cover-legend i.is-lime{background:var(--lime)}
.cover-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cover-foot span{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#201e1b0a;border:1px solid #201e1b10;font-size:13px;line-height:1.3}
.cover-foot .icon{width:17px;height:17px;color:var(--lime)}

/* 04: the reward, as the fan's team credit */
.payout-demo{width:100%}
.score{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:16px;background:#110f0c;border:1px solid #eeecea14;font-size:13px}
.score-final{padding:3px 7px;border-radius:6px;background:#eeecea14;color:var(--muted);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.score-team{display:flex;align-items:center;gap:8px;color:var(--ink)}
.score-team img{width:24px;height:24px;border-radius:50%}
.score-team b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;line-height:1;letter-spacing:.02em}
.score-team.is-away{color:var(--muted)}
.score-hit{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:5px 10px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:12px;white-space:nowrap}
.score-hit .icon{width:14px;height:14px}
.pass-wrap{position:relative;margin-top:16px;padding-top:52px}
.pass{position:relative;width:80%;margin-left:3%;padding:18px;border-radius:18px;background:linear-gradient(140deg,#1c1917,#0c2340 64%);color:#fff;box-shadow:0 30px 60px -28px #000d,inset 0 0 0 1px #ffffff1f;transform:rotate(-3deg)}
.pass-top{display:flex;align-items:center;gap:10px}
.pass-top img{width:30px;height:30px;border-radius:50%}
.pass-top span{font-size:14px}
.pass-top small{margin-left:auto;font-size:11px;color:#dad8d4}
.pass>strong{display:block;margin-top:16px;font-weight:400;font-size:52px;line-height:1.05;letter-spacing:-.045em}
.pass>small{display:block;font-size:12.5px;color:#dad8d4}
.pass-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid #ffffff26;font-size:12px;color:#eae8e6}
.pass-code{flex:none;width:72px;height:24px;background:repeating-linear-gradient(90deg,#fff 0 2px,#0000 2px 4px,#fff 4px 5px,#0000 5px 8px);opacity:.85}
.notif{position:absolute;right:0;top:0;z-index:2;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;width:68%;padding:11px 12px;border-radius:16px;background:#f3f1eef5;color:#12100c;box-shadow:0 20px 40px -18px #000c}
.notif img{width:28px;height:28px;border-radius:7px}
.notif b{display:block;font-size:12px;font-weight:700;line-height:1.3}
.notif span{display:block;margin-top:1px;font-size:12px;line-height:1.35;color:#373532}
.notif small{font-size:10.5px;color:#767470}
.js .payout-demo .notif{opacity:0;transform:translateY(-16px) scale(.97);transition:opacity .6s var(--ease) .45s,transform .8s var(--ease) .45s}
.js .payout-demo.visible .notif{opacity:1;transform:none}
.payout-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:22px;font-size:12.5px;color:var(--muted)}
.payout-flow span{display:inline-flex;align-items:center;gap:7px}
.payout-flow img{filter:brightness(0) invert(1)}
.payout-flow>.icon{width:15px;height:15px}
.payout-flow span .icon{width:17px;height:17px;color:var(--lime)}

@media(max-width:809px){.process-steps span{font-size:12px}
.seat-demo,.cover-demo{padding:16px}
.seat-head strong{font-size:22px}
.seat-brief,.cover-foot{grid-template-columns:1fr}
.blast-demo{height:auto;display:flex;flex-direction:column}
.mail,.gram{position:relative;left:auto;right:auto;top:auto}
.mail{width:100%}
.mail-bar{display:none}
.gram{width:88%;margin:14px 0 0 auto}
.js .blast-demo .gram{transform:translateY(20px)}
.cover-head{flex-direction:column;gap:8px}
.cover-head strong{font-size:38px}
.cover-bars{gap:4px}
.score{flex-wrap:wrap;gap:8px 14px;padding:10px 12px}
.score-final,.score-team img{display:none}
.score-team b{font-size:21px}
.score-hit{margin-left:0;padding:4px 9px;font-size:11.5px}
.pass{width:88%;margin-left:1%}
.pass>strong{font-size:44px}
.notif{width:86%}
}

/* ---------- Integrations, after drospecta.framer.website ---------- */
.integrations-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}
.integrations-copy h2{max-width:500px}
.integrations-copy>p:not(.sr-only){max-width:440px;margin-top:16px}
.int-window{position:relative;height:420px;border-radius:24px;overflow:hidden;background:#e9e7e4;box-shadow:inset 0 0 0 5px #f7f5f2,0 4px 50px #0000000d}
.int-fade{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(0deg,#0000,#000 30%,#000 70%,#0000);mask-image:linear-gradient(0deg,#0000,#000 30%,#000 70%,#0000)}
.int-tilt{--g:16px;position:absolute;left:-40px;right:-40px;top:50%;display:flex;flex-direction:column;gap:var(--g);transform:translateY(-50%) rotate(-7deg)}
.int-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#1c191700,#fcfcfd 12.5%,#fcfcfd 87.5%,#1c191700);mask-image:linear-gradient(90deg,#1c191700,#fcfcfd 12.5%,#fcfcfd 87.5%,#1c191700)}
.int-track{display:flex;gap:var(--g);width:max-content;margin:0;padding:0;list-style:none;animation:int-slide 40s linear infinite}
.int-row:nth-child(2) .int-track{animation-direction:reverse;animation-duration:46s}
.int-row:nth-child(3) .int-track{animation-duration:52s}
@keyframes int-slide{to{transform:translateX(calc(-50% - var(--g) / 2))}}
.int-tile{display:grid;place-items:center;flex:none;width:140px;height:140px;border-radius:20px;background:#fff;box-shadow:0 1px 2px #12100c0d}
.int-tile img{width:86px;height:86px;border-radius:50%}
.int-window:hover .int-track,.motion-paused .int-track{animation-play-state:paused}
@media(max-width:1199px){.integrations-inner{gap:40px}
}
@media(max-width:809px){.integrations-inner{grid-template-columns:1fr;gap:32px}
.integrations-copy>p:not(.sr-only){font-size:16px}
.int-window{height:330px}
.int-tilt{--g:12px}
.int-tile{width:112px;height:112px;border-radius:16px}
.int-tile img{width:68px;height:68px}
}
@media(prefers-reduced-motion:reduce){.int-track{animation:none}
}


/* =====================================================================================================
   Prototype 22 (appended to prototype 21's styles, minus its hero, by scripts/build-p22.py)
   ===================================================================================================== */

/* ---------- The headline: one paragraph at one size ---------- */
.hero h1{font-size:50px;line-height:1.1;letter-spacing:-.04em;text-wrap:balance}
.hero h1>span{display:inline;max-width:none;margin:0;font-size:inherit;line-height:inherit;color:var(--lime)}
@media(max-width:1199px){.hero h1{font-size:46px}
}
@media(max-width:809px){.hero h1{font-size:34px;line-height:1.18}
}
@media(max-width:360px){.hero h1{font-size:30px}
}

/* ---------- Calls to action: book a demo, join the waitlist ---------- */
.nav-ctas{display:flex;align-items:center;gap:18px}
.nav-waitlist{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.4;position:relative}
.nav-waitlist::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-waitlist:hover::after{transform:scaleX(1)}
.closing-actions{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:28px}
.closing .closing-actions .button{margin-top:0}
@media(max-width:1099px){.nav-waitlist{display:none}
}
@media(max-width:809px){.nav-ctas{display:none}
.closing-actions{flex-direction:column;align-items:stretch;gap:12px}
.closing .closing-actions .button{width:100%;margin-top:0}
.closing-actions .text-link{justify-content:center}
}

/* ---------- The sample booking and waitlist dialogs (demo.js), in the page's dark look ---------- */
.demo-dialog{border:0;border-radius:22px;color:var(--ink);background:#f6f4f1;color-scheme:light;box-shadow:inset 0 0 0 1px #201e1b1f,0 50px 140px -30px #fcfcfd}
.demo-dialog::backdrop{background:#f9fafc99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.demo-dialog button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.demo-close{border:0;background:#201e1b14;color:var(--ink)}
.demo-close:hover{border:0;background:#201e1b26;color:var(--ink)}
.demo-intro{background:radial-gradient(120% 80% at 0% 0%,#1c19171f,#1c191700 55%),#f8f6f3;border-right:1px solid #201e1b14}
.demo-brand{gap:9px;font:28px/1 Anton,Impact,sans-serif;color:var(--ink)}
.demo-brand svg{width:26px;height:26px;color:var(--ink)}
.demo-brand img{width:26px;height:26px;filter:brightness(0) invert(1)}
.demo-eyebrow,.demo-calendar-kicker,.demo-sample-badge{font:12px/1.2 Diatype,Arial,sans-serif;letter-spacing:.02em;text-transform:none}
.demo-eyebrow{color:var(--lime)}
.demo-intro h2{color:var(--ink);letter-spacing:-.035em}
.demo-intro>p{color:var(--muted)}
.demo-meeting-meta{color:var(--muted);border-bottom:1px solid #201e1b14}
.demo-agenda{color:var(--muted)}
.demo-agenda strong{color:var(--ink)}
.demo-sample-badge{color:#1c1917}
.demo-calendar-kicker{color:var(--lime)}
.demo-calendar h3{color:var(--ink)}
.calendar-month-row strong{color:var(--ink)}
.calendar-month-row button{border:0;background:#201e1b14;color:var(--ink)}
.calendar-weekdays{font:11px Diatype,Arial,sans-serif;color:#1c1917}
.calendar-dates button{color:var(--ink)}
.calendar-dates button:not(:disabled):hover{background:#1c191724;color:var(--lime)}
.calendar-dates button[aria-pressed=true],.calendar-dates button[aria-pressed=true]:hover{background:var(--lime);color:#f9f7f4}
.calendar-dates button:disabled{color:#bbb9b6}
.sample-time-label{color:var(--muted)}
.sample-time-label>span:last-child{color:#1c1917}
.calendar-times button{border:0;border-radius:999px;background:#f2f0ed;box-shadow:inset 0 0 0 1px #201e1b1f;color:var(--ink)}
.calendar-times button:hover{box-shadow:inset 0 0 0 1px #1c191780}
.calendar-times button[aria-pressed=true]{background:#1c191724;box-shadow:inset 0 0 0 1.5px var(--lime);color:var(--lime)}
.demo-confirm{border:0;border-radius:999px;background:var(--lime);color:#f9f7f4;padding:15px 20px}
.demo-confirm:disabled{background:#201e1b14;color:#1c1917}
.demo-preview-note{color:#1c1917}
.waitlist-content h2{color:var(--ink)}
.waitlist-content>p:not(.demo-preview-note){color:var(--muted)}
.waitlist-content label{color:var(--muted)}
.waitlist-content input{border:0;border-radius:12px;background:#f9f7f4;box-shadow:inset 0 0 0 1px #201e1b24;color:var(--ink)}
.waitlist-content input::placeholder{color:#1c1917}
.waitlist-content input:focus{outline:2px solid var(--lime);outline-offset:2px}

/* ---------- Hero: a campaign built on screen ---------- */
.hero-window.cb{background:#f4f2f0}
.cb-ui{position:relative}
.cb .window-top{height:60px}
.window-brand b{font-weight:400;color:var(--ink)}
.window-brand>.cb-crumb{padding:0;color:inherit}
.cb-crumb>span{padding-inline:6px;color:#1c1917}
.cb-top{display:flex;align-items:center;gap:8px}
.cb-replay{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 11px 5px 9px;border-radius:99px;background:#201e1b0c;color:var(--muted);font-size:12px;transition:background .2s,color .2s}
.cb-replay .icon{width:14px;height:14px}
.cb-replay:hover{background:#201e1b1a;color:var(--ink)}
.cb-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:99px;background:#201e1b0c;color:var(--muted);font-size:12px;transition:background .3s,color .3s}
.cb-status i{width:7px;height:7px;border-radius:50%;background:#1c1917;transition:background .3s,box-shadow .3s}
.cb.is-live .cb-status{background:#1c191724;color:var(--lime)}
.cb.is-live .cb-status i{background:var(--lime);box-shadow:0 0 0 3px #1c191733}
.cb-body{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:18px;padding:20px}
.cb-steps{display:flex;flex-direction:column;gap:8px;min-width:0}
.cb-step{border-radius:14px;background:#f2f0ed;border:1px solid #201e1b12;transition:border-color .35s,background .35s}
.cb-step.is-open{border-color:#1c191766;background:#f0eeec}
.cb-head{display:flex;align-items:flex-start;gap:10px;padding:11px 13px}
.cb-n{position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#201e1b14;color:var(--muted);font-size:12px;line-height:1;transition:background .3s,color .3s}
.cb-step.is-open .cb-n{background:#1c191730;color:var(--lime)}
.cb-step.is-done .cb-n{background:var(--lime);color:transparent}
.cb-step.is-done .cb-n::after{content:"";position:absolute;left:7px;top:6.5px;width:8px;height:4.5px;border:solid var(--bg);border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}
.cb-title{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:22px;color:var(--ink)}
.cb-title small{max-height:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;font-size:12px;line-height:16px;color:var(--muted);transition:max-height .35s,opacity .35s}
.cb-step.is-done:not(.is-open) .cb-title small{max-height:16px;opacity:1}
.cb-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.cb-step.is-open .cb-panel{grid-template-rows:1fr}
.cb-inner{min-height:0;overflow:hidden;padding:0 13px}
.cb-inner>:last-child{margin-bottom:13px}
.cb-field{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:11px;border:1px solid #201e1b14;background:#f5f3f0;font-size:13.5px;white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.cb-field .icon{flex:none;width:16px;height:16px;color:var(--lime)}
.cb-field.is-focus{border-color:#1c191799;box-shadow:0 0 0 3px #1c19171a}
.cb-typed{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cb-caret{flex:none;width:1.5px;height:16px;margin-left:-7px;background:var(--lime);opacity:0}
.cb-field.is-focus .cb-caret{opacity:1;animation:cb-blink 1s steps(1) infinite}
@keyframes cb-blink{50%{opacity:0}}
.cb-ph{overflow:hidden;text-overflow:ellipsis;color:#1c1917}
.cb-field.has-text .cb-ph{display:none}
.cb-go{display:inline-flex;align-items:center;gap:6px;height:34px;margin-top:10px;padding:0 14px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:13px;transition:transform .15s}
.cb-go .icon{width:15px;height:15px}
.cb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:11px;background:#f5f3f0;border:1px solid #201e1b12}
.cb-tab{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:8px;font-size:12.5px;white-space:nowrap;color:var(--muted);transition:background .3s,color .3s,transform .15s}
.cb-tab .icon{flex:none;width:15px;height:15px}
.cb-tab.is-on{background:#201e1b14;color:var(--ink)}
.cb-tab.is-on .icon{color:var(--lime)}
.cb-lists{display:grid;margin-top:9px}
.cb-list{grid-area:1/1;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.cb-list.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.cb-aud{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:7px 10px 7px 30px;border-radius:10px;border:1px solid #201e1b12;background:#f5f3f0;font-size:12.5px;line-height:1.3;transition:border-color .3s,background .3s,transform .15s}
.cb-aud::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #201e1b40;transition:background-color .25s,box-shadow .25s}
.cb-aud.is-picked{border-color:var(--lime);background:#1c19171a}
.cb-aud.is-picked::before{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f6fa' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/8px no-repeat;box-shadow:none}
.cb-aud b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:var(--ink)}
.cb-aud small{grid-column:1;font-size:11.5px;color:var(--muted)}
.cb-aud em{grid-column:2;grid-row:1/span 2;padding:3px 7px;border-radius:99px;background:#1c191724;color:var(--lime);font-style:normal;font-size:10.5px;white-space:nowrap}
.cb-suggest{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--lime)}
.cb-suggest .icon{width:14px;height:14px}
.cb.is-generating .cb-suggest .icon{animation:cb-twinkle .9s ease-in-out infinite}
@keyframes cb-twinkle{50%{transform:scale(.6) rotate(45deg);opacity:.5}}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:70px;margin-top:10px;align-content:flex-start}
.cb-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:99px;border:1px solid #201e1b1f;background:#f5f3f0;font-size:12.5px;white-space:nowrap;color:var(--ink);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .35s calc(var(--i) * .12s),transform .45s var(--ease) calc(var(--i) * .12s),border-color .3s,background .3s,color .3s}
.cb.has-chips .cb-chip{opacity:1;transform:none}
.cb-chip.is-picked{border-color:var(--lime);background:#1c19171f;color:var(--lime)}
.cb-track{--pct:0;position:relative;height:6px;margin:14px 10px 4px;border-radius:99px;background:#201e1b17}
.cb-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pct) * 1%);border-radius:inherit;background:var(--lime)}
.cb-thumb{position:absolute;top:50%;left:calc(var(--pct) * 1%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#1c1a18;box-shadow:0 0 0 4px #1c191730,0 3px 10px #1c191740;transition:box-shadow .2s}
.cb.is-dragging .cb-thumb{box-shadow:0 0 0 7px #1c191740,0 3px 10px #1c191740}
.cb-readout{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.cb-readout strong{margin-right:3px;font-weight:400;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--lime)}
.cb-actions{margin-top:4px}
.cb-launch{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:14px;white-space:nowrap;opacity:.4;transition:transform .15s,background .3s,padding .3s,opacity .3s}
.cb.is-ready .cb-launch{opacity:1}
.cb-launch .icon{width:0;height:18px;margin-right:0;transition:width .3s,margin .3s}
.cb.is-live .cb-launch{padding-left:14px;background:#201e1b}
.cb.is-live .cb-launch .icon{width:18px;margin-right:7px}
.cb .is-pressed{transform:scale(.95)!important}
.cb-canvas{position:relative;display:grid;min-width:0;min-height:470px;border-radius:16px;background:#f6f4f2;border:1px solid #201e1b10;overflow:hidden}
.cb-map-view,.cb-deck{grid-area:1/1;min-width:0}
.cb-map-view{display:flex;flex-direction:column;padding:16px;transition:opacity .5s,transform .7s var(--ease)}
.cb[data-cb-view="deck"] .cb-map-view{opacity:0;transform:scale(.94);pointer-events:none}
.cb-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cb-map-head strong{display:block;font-weight:400;font-size:15px;line-height:1.3}
.cb-map-head small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.cb-badge{padding:4px 10px;border-radius:99px;background:#1c191724;color:var(--lime);font-size:12px;white-space:nowrap;opacity:0;transform:scale(.9);transition:opacity .3s,transform .35s}
.cb-badge:not(:empty){opacity:1;transform:none}
.cb-map{position:relative;display:grid;align-content:center;flex:1;margin:10px 0}
.cb-stadium{position:relative;display:block;width:100%;height:auto}
.hsec{fill:#edebe8;transition:fill .5s}
.cb[data-cb-view="scan"] .hsec{animation:hsec-scan 1.6s linear infinite;animation-delay:var(--sd)}
@keyframes hsec-scan{0%,24%,100%{fill:#edebe8}8%{fill:#1c1917}}
.cb.show-seats .hsec.is-best{fill:var(--lime)}
.cb-fans circle{fill:#1c1a18;opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .3s var(--fd),transform .5s cubic-bezier(.3,1.6,.5,1) var(--fd)}
.cb.show-fans .cb-fans circle{opacity:.95;transform:none}
.cb-sweep{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s}
.cb-sweep i{width:94%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,#1c191700 0 285deg,#1c191766 355deg,#1c191700 360deg);transform:scaleY(.54);animation:cb-sweep 1.6s linear infinite paused}
.cb[data-cb-view="scan"] .cb-sweep{opacity:1}
.cb[data-cb-view="scan"] .cb-sweep i{animation-play-state:running}
@keyframes cb-sweep{from{transform:scaleY(.54) rotate(0)}to{transform:scaleY(.54) rotate(360deg)}}
.cb-legend{display:flex;flex-wrap:wrap;gap:6px 14px;min-height:16px;font-size:11.5px;color:var(--muted)}
.cb-legend span{display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .4s}
.cb-legend i{width:9px;height:9px;border-radius:3px;background:var(--lime)}
.cb-legend .is-fans i{border-radius:50%;background:#1c1a18}
.cb.show-seats .cb-legend .is-seats,.cb.show-fans .cb-legend .is-fans{opacity:1}
.cb-under{display:grid;min-height:96px;padding-top:12px}
.cb-hint,.cb-scan,.cb-offer{grid-area:1/1;align-self:end;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.cb[data-cb-view="idle"] .cb-hint,.cb[data-cb-view="scan"] .cb-scan,.cb.has-offer .cb-offer{opacity:1;transform:none}
.cb-hint{padding:12px 14px;border-radius:12px;border:1px dashed #201e1b24;font-size:12.5px;line-height:1.45;color:var(--muted)}
.cb-scan{padding:12px 14px;border-radius:12px;background:#f4f2ee;border:1px solid #201e1b12}
.cb-scan b{display:block;margin-bottom:8px;font-weight:400;font-size:13px}
.cb-scan ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.cb-scan li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.cb-scan li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid #201e1b30;border-top-color:var(--lime);animation:cb-spin .8s linear infinite}
.cb-scan li.is-done::before{border:0;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f6fa' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/8px no-repeat;animation:none}
.cb-scan li span{margin-left:auto;color:var(--ink)}
@keyframes cb-spin{to{transform:rotate(360deg)}}
.cb-offer{padding:12px 14px;border-radius:12px;background:#f9f7f4;border:1px solid #1c191740}
.cb-offer small{display:block;margin-bottom:4px;font-size:11px;color:var(--lime)}
.cb-offer p{font-size:13px;line-height:1.45;color:var(--ink)}
.cb-offer b{font-weight:400;color:var(--lime)}
.cb-deck{display:flex;flex-direction:column;padding:14px 0 12px;opacity:0;transform:scale(1.04);pointer-events:none;transition:opacity .5s .15s,transform .7s var(--ease) .15s}
.cb[data-cb-view="deck"] .cb-deck{opacity:1;transform:none;pointer-events:auto}
.cb-deck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px}
.cb-deck-head span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.cb-deck-head .icon{width:15px;height:15px;color:var(--lime)}
.cb-deck-head small{font-size:12px;color:var(--muted)}
.cb-stage{--sw:min(216px,66%);position:relative;flex:1;min-height:344px;margin:12px 0 8px;perspective:1000px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cb-slide{position:absolute;left:50%;top:0;width:var(--sw);height:340px;margin-left:calc(var(--sw) / -2);border-radius:16px;overflow:hidden;background:#fff;color:#161411;box-shadow:0 26px 50px -26px #000d;cursor:pointer;transition:transform .7s var(--ease),opacity .5s,filter .5s}
.cb-slide.is-active{z-index:3;transform:none;cursor:default}
.cb-slide.is-next{z-index:2;transform:translateX(70%) translateZ(-230px) rotateY(-44deg);opacity:.9;filter:brightness(.42)}
.cb-slide.is-prev{z-index:1;transform:translateX(-70%) translateZ(-230px) rotateY(44deg);opacity:.9;filter:brightness(.42)}
.cb-slide img{-webkit-user-drag:none}
.cb-deck-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.cb-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#201e1b12;color:var(--ink);transition:background .2s}
.cb-arrow:hover{background:#201e1b24}
.cb-arrow .icon{width:18px;height:18px}
.cb-dots{display:flex;gap:6px}
.cb-dot{position:relative;width:7px;height:7px;padding:0;border-radius:99px;background:#201e1b33;transition:width .3s,background .3s}
.cb-dot::after{content:"";position:absolute;inset:-10px -4px}
.cb-dot[aria-current="true"]{width:20px;background:var(--lime)}
.cm-meta{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;padding:10px 10px 8px;border-bottom:1px solid #eceae8}
.cm-meta img{width:26px;height:26px;border-radius:50%}
.cm-meta b{display:block;font-size:11px;font-weight:700;line-height:1.25}
.cm-meta span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10.5px;line-height:1.3;color:#3c3a37}
.cm-hero{position:relative;height:96px;margin:8px 8px 0;border-radius:8px;overflow:hidden;background:#0c2340}
.cm-hero img{width:100%;height:100%;object-fit:cover;object-position:62% 26%}
.cm-hero span{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:99px;background:#0c2340e6;color:#fff;font-size:9px}
.cm-body{padding:9px 12px 12px;text-align:center}
.cm-body h4{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:25px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:#0c2340}
.cm-body p{margin-top:7px;font-size:10.5px;line-height:1.45;color:#3c3a37}
.cm-cta{display:inline-flex;align-items:center;height:26px;margin-top:9px;padding:0 14px;border-radius:99px;background:#236192;color:#fff;font-size:10.5px}
.cg-head{display:flex;align-items:center;gap:7px;padding:8px 9px}
.cg-head img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #1c1917}
.cg-head b{font-size:11px;font-weight:700}
.cg-head span{margin-left:auto;font-size:8px;letter-spacing:.1em;color:#575552}
.cg-img{position:relative;aspect-ratio:1;overflow:hidden;background:#0c2340}
.cg-img>img{width:100%;height:100%;object-fit:cover;object-position:46% 40%}
.cg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c234000 30%,#0c2340eb 94%)}
.cg-text{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;color:#fff}
.cg-text span{display:inline-block;padding:2px 7px;border-radius:99px;background:var(--lime);color:#12100c;font-size:9px}
.cg-text strong{display:block;margin-top:6px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:25px;line-height:.98;text-transform:uppercase}
.cg-actions{display:flex;align-items:center;gap:10px;padding:8px 9px 3px}
.cg-actions .icon{width:17px;height:17px;color:#13110e}
.cg-actions .icon:first-child{color:#ed4956;fill:#ed4956}
.cg-actions i{flex:1}
.cg-cap{padding:2px 9px 9px;font-size:10.5px;line-height:1.4;color:#24221f}
.cg-cap b{font-weight:700}
.cb-sms{display:flex;flex-direction:column;background:#f6f4f0}
.cs-head{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 8px;background:#fbfbfc;border-bottom:1px solid #e8e6e3}
.cs-head img{width:28px;height:28px;border-radius:50%}
.cs-head b{margin-top:2px;font-size:11.5px;font-weight:700}
.cs-head small{font-size:9.5px;color:#8e8c89}
.cs-thread{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:11px 10px 8px}
.cs-bubble{max-width:90%;padding:8px 11px;border-radius:16px 16px 16px 5px;background:#e8e6e2;color:#161411;font-size:11px;line-height:1.4}
.cs-link{width:84%;border-radius:14px;overflow:hidden;background:#e8e6e2}
.cs-link img{display:block;width:100%;height:66px;object-fit:cover;object-position:62% 26%}
.cs-link div{padding:6px 10px 8px}
.cs-link b{display:block;font-size:10.5px;font-weight:700;color:#161411}
.cs-link span{display:block;font-size:9.5px;color:#72706e}
.cs-stop{padding-left:4px;font-size:9px;color:#8e8c89}
.cs-input{display:flex;align-items:center;justify-content:space-between;height:28px;margin:0 8px 9px;padding:0 4px 0 12px;border-radius:99px;border:1px solid #dedcd8;background:#fff;font-size:10px;color:#a6a4a0}
.cs-input i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1c1917;color:#fff}
.cs-input .icon{width:12px;height:12px}
.cb-cursor{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;margin:-2px 0 0 -3px;overflow:visible;pointer-events:none;opacity:0;transition:opacity .35s;filter:drop-shadow(0 2px 3px #1c191740)}
.cb-cursor path{fill:#12100c;stroke:#f9f7f4;stroke-width:1.4;stroke-linejoin:round;transform-origin:3px 2.5px;transition:transform .12s}
.cb-cursor.is-on{opacity:1}
.cb-cursor.is-down path{transform:scale(.85)}
.motion-paused .cb-sweep i,.motion-paused .hsec{animation-play-state:paused}

@media(min-width:1200px){.hero-copy{width:470px}
.hero-window.cb{left:520px;width:min(780px,calc(50vw - 16px));height:auto}
}
@media(min-width:1200px) and (max-height:820px){.hero{padding-top:128px}
}
@media(min-width:1200px) and (max-width:1339px){.cb-body{gap:14px;padding:16px}
.cb-head{padding:10px 11px}
.cb-inner{padding:0 11px}
.cb-tab{gap:4px;font-size:12px}
.cb-tab .icon{display:none}
}
@media(max-width:1199px){.hero{padding-bottom:64px}
.hero-window.cb{width:min(860px,100%);height:auto;margin-inline:auto}
}
@media(max-width:809px){.hero{padding-bottom:40px}
.hero-window.cb{width:100%;margin-top:40px;border-radius:20px;border-width:3px}
.cb .window-top{height:48px}
.cb-status,.cb-replay{padding:4px 9px 4px 7px;font-size:11px}
.cb-crumb,.cb-replay span{display:none}
.cb-replay{padding:4px 8px}
.cb-aud:not(.is-best){display:none}
.cb-steps{min-height:410px}
.cb-body{grid-template-columns:1fr;gap:12px;padding:12px}
.cb-canvas{order:-1;min-height:430px}
.cb-map-view{padding:14px}
.cb-stage{--sw:min(204px,64%);min-height:334px}
.cb-slide{height:330px}
}
@media(prefers-reduced-motion:reduce){.cb-cursor{display:none}
}


/* =====================================================================================================
   Prototype 23 (appended to prototype 22's styles by scripts/build-p23.py)
   ===================================================================================================== */

/* ---------- Section labels: liquid glass, in capitals ---------- */
.eyebrow{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;padding:9px 16px 9px 12px;border:0;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#1c1a16;background:linear-gradient(180deg,#12100c2b,#12100c0a 46%,#12100c04 54%,#12100c12),radial-gradient(90% 170% at 10% 50%,#1c19172e,#1c191700 64%),#201e1b08;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px 0 #12100c57,inset 0 -1px 0 #12100c12,inset 0 0 0 1px #12100c1c,inset 0 -12px 18px -14px #1c191747,0 14px 34px -16px #1c19175d}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #1c191726,0 0 12px 1px #1c1917b3;animation:eyebrow-glow 2.8s ease-in-out infinite}
.eyebrow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(100deg,#12100c00 32%,#12100c3d 47%,#12100c0f 53%,#12100c00 68%) no-repeat;background-size:260% 100%;background-position:140% 0;animation:eyebrow-sheen 6.5s ease-in-out infinite}
@keyframes eyebrow-sheen{0%,58%{background-position:140% 0}100%{background-position:-40% 0}}
@keyframes eyebrow-glow{50%{box-shadow:0 0 0 5px #1c191712,0 0 18px 2px #1c1917d9}}
.process-copy .eyebrow{margin-bottom:20px;font-size:11.5px;background:linear-gradient(180deg,#12100c24,#12100c08 46%,#12100c03 54%,#12100c10),radial-gradient(90% 170% at 10% 50%,#1c191729,#1c191700 64%),#f9f7f459}
.motion-paused .eyebrow::before,.motion-paused .eyebrow::after{animation-play-state:paused}
@media(max-width:809px){.eyebrow,.process-copy .eyebrow{padding:8px 14px 8px 11px;font-size:11px;letter-spacing:.14em}
}

/* ---------- One partner, card 1: the stadium reads each audience ---------- */
.seat-head{align-items:center}
.seat-scan{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 11px;border-radius:99px;background:#1c19171a;color:var(--lime);font-size:12px;white-space:nowrap}
.seat-scan i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:seat-ping 1.6s ease-out infinite}
@keyframes seat-ping{0%{box-shadow:0 0 0 0 #1c191799}100%{box-shadow:0 0 0 9px #1c191700}}
.seat-demo{padding:18px 20px 16px}
.seat-demo .seat-map{max-width:372px;margin-top:6px}
.seat-demo .sec{fill:#c8c6c4;transition:fill .55s}
.seat-demo[data-insight="0"] .sec[data-g="0"],.seat-demo[data-insight="1"] .sec[data-g="1"],.seat-demo[data-insight="2"] .sec[data-g="2"]{fill:var(--lime)}
.sec-tag{opacity:0;transition:opacity .45s}
.seat-demo[data-insight="0"] .sec-tag[data-g="0"],.seat-demo[data-insight="1"] .sec-tag[data-g="1"],.seat-demo[data-insight="2"] .sec-tag[data-g="2"]{opacity:1}
.sec-tag rect{fill:#f9f7f4;stroke:var(--lime);stroke-width:1}
.sec-tag text{fill:var(--lime);font:11px Diatype,Arial,sans-serif}
.seat-insight{display:flex;align-items:flex-start;gap:12px;min-height:68px;margin-top:8px;padding:12px 14px;border-radius:14px;background:#f9f7f48c;border:1px solid #1c191733}
.seat-insight-tag{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 9px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.seat-insight-tag .icon{width:12px;height:12px}
.seat-insight p{font-size:15px;line-height:1.45;color:var(--ink)}
.seat-insight p.is-new{animation:seat-in .55s var(--ease)}
@keyframes seat-in{from{opacity:0;transform:translateY(6px)}}
.seat-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.seat-tabs button{display:flex;flex-direction:column;gap:8px;min-height:36px;padding:4px 0;background:none;text-align:left;font-size:12px;line-height:1.3;color:var(--muted);transition:color .3s}
.seat-tabs button[aria-selected="true"]{color:var(--ink)}
.seat-tabs i{display:block;height:3px;border-radius:9px;background:#201e1b1f;overflow:hidden}
.seat-tabs b{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.seat-demo.is-cycling .seat-tabs [aria-selected="true"] b{animation:seat-bar 4.4s linear forwards}
@keyframes seat-bar{to{transform:scaleX(1)}}
.seat-demo.is-away .seat-tabs b,.seat-demo:hover .seat-tabs b,.motion-paused .seat-tabs b,.motion-paused .seat-scan i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.seat-tabs [aria-selected="true"] b{transform:none}
}
@media(max-width:809px){.seat-scan{display:none}
.seat-insight{flex-direction:column;gap:8px;min-height:104px}
.seat-insight p{font-size:14px}
}

/* ---------- Build your own offer: one step at a time ---------- */
.builder-path>span{transition:color .3s}
.builder-path>span:nth-of-type(2){color:inherit}
.builder-path>span.is-on{color:var(--lime)}
.builder-path>span.is-done{color:var(--ink)}
.builder-path>span.is-done::after{content:" ✓";color:var(--lime)}
.js .builder-grid .build-card.is-waiting{opacity:.3;filter:saturate(.35)}
.builder-grid .build-card.is-active{border-color:#1c191799;background:#efedea;box-shadow:0 0 0 1px #1c191733,0 34px 80px -44px #1c1917a6}
.builder-grid .build-card.is-done{border-color:#1c191733}
.build-card.is-active .step-label{color:var(--lime)}
.step-label .build-check{display:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--lime);color:var(--bg);stroke-width:2.4}
.build-card.is-done .step-label .build-check{display:block}
.build-card .goal-choices button,.build-card .moment-choices label{transition:border-color .25s,background .25s}
.build-go{width:100%;margin-top:22px}
.build-card.is-active .build-go{box-shadow:0 0 0 0 #1c191766;animation:build-nudge 2.2s ease-out infinite}
@keyframes build-nudge{0%{box-shadow:0 0 0 0 #1c191773}70%,100%{box-shadow:0 0 0 12px #1c191700}}
.build-card .reward-editor{margin-top:18px}
.builder-grid+.disclaimer{margin-top:28px;text-align:center}

/* ---------- The campaign pop-up ---------- */
.offer-dialog{width:min(1040px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;overflow:auto;border:0;border-radius:26px;color:var(--ink);background:radial-gradient(120% 60% at 50% 0%,#1c19171a,#1c191700 60%),#f6f4f2;color-scheme:light;box-shadow:inset 0 0 0 1px #201e1b1f,0 60px 160px -30px #fcfcfd}
.offer-dialog::backdrop{background:#f9fafc99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.offer-dialog[open]{animation:offer-in .55s var(--ease)}
@keyframes offer-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
.offer-dialog button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.offer-close{position:absolute;right:16px;top:16px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#201e1b14;color:var(--ink);font-size:24px;line-height:1}
.offer-close:hover{background:#201e1b26}
.offer-top{padding:38px 40px 6px;text-align:center}
.offer-top .eyebrow{margin-bottom:14px}
.offer-top h2{font-size:42px;line-height:1.1;letter-spacing:-.04em}
.offer-top p{max-width:640px;margin:12px auto 0;font-size:17px;color:var(--muted)}
.offer-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:center;align-items:start;gap:22px;padding:26px 40px 6px}
.offer-piece{margin:0;min-width:0}
.offer-piece figcaption{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;color:var(--muted)}
.offer-piece figcaption .icon{width:16px;height:16px;color:var(--lime)}
.od-card{border-radius:16px;overflow:hidden;background:#fff;color:#161411;box-shadow:0 30px 60px -30px #000d}
.od-card.cb-sms{min-height:330px}
.offer-actions{margin:24px 40px 0;padding:22px 24px;border-radius:20px;background:#f4f2ee;border:1px solid #201e1b12}
.offer-actions h3{margin-bottom:12px;font-size:18px;line-height:1.3}
.offer-actions ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.offer-actions li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 12px 12px 14px;border-radius:14px;background:#f6f4f2;border:1px solid #201e1b12;transition:border-color .3s}
.offer-actions li.is-done{border-color:#1c191759}
.offer-actions li img{width:40px;height:40px;border-radius:50%}
.offer-actions li b{display:block;font-weight:400;font-size:15px;line-height:1.35}
.offer-actions li span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.offer-actions li button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:112px;min-height:40px;padding:0 18px;border-radius:99px;background:var(--lime);color:var(--bg);font-size:14px;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}
.offer-actions li button:hover:not(:disabled){background:#1c1917}
.offer-actions li button.is-busy{opacity:.7}
.offer-actions li button.is-done{background:#1c191724;color:var(--lime);opacity:1;cursor:default}
.offer-actions li button .icon{width:16px;height:16px}
.offer-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px 40px 30px}
.offer-foot p{font-size:13px;color:#1c1917}
.offer-foot>div{display:flex;align-items:center;gap:18px}
.offer-foot .text-link{padding:0;background:none}
@media(max-width:900px){.offer-top{padding:30px 24px 4px}
.offer-top h2{font-size:30px}
.offer-pieces{grid-template-columns:repeat(3,230px);justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px 24px 10px}
.offer-piece{scroll-snap-align:center}
.offer-actions{margin:18px 24px 0;padding:18px}
.offer-foot{padding:16px 24px 24px}
}
@media(max-width:560px){.offer-actions li{grid-template-columns:36px minmax(0,1fr)}
.offer-actions li img{width:36px;height:36px}
.offer-actions li button{grid-column:1/-1}
.offer-foot>div{width:100%;justify-content:space-between}
}

/* ---------- A little more to play for: specific offers, with pictures ---------- */
.examples-window{height:780px}
.play-card{overflow:hidden;border-radius:22px;background:#f1efec;border:1px solid #201e1b12;box-shadow:0 22px 50px -32px #1c191756}
.play-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#f6f4f1}
.play-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.play-card:hover .play-media img{transform:scale(1.04)}
.play-card.is-cutout .play-media{background:var(--tint);background:radial-gradient(85% 85% at 50% 38%,color-mix(in srgb,var(--tint) 78%,#fff),color-mix(in srgb,var(--tint) 55%,#12100c) 78%)}
.play-card.is-cutout .play-media img{object-fit:contain;padding:12% 18%;filter:drop-shadow(0 18px 22px #0009)}
.play-tag{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:99px;background:#f9f7f4b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#1c1a16;font-size:10.5px;font-weight:700;letter-spacing:.12em;line-height:1;text-transform:uppercase}
.play-body{padding:18px 20px 20px}
.play-body h3{font-size:22px;line-height:1.2;letter-spacing:-.03em}
.play-body p{margin-top:8px;font-size:15px;line-height:1.45;color:#1c1917}
.play-body b{font-weight:400;color:var(--lime)}
@media(max-width:1199px){.play-body h3{font-size:19px}
.play-body p{font-size:14px}
}
@media(max-width:809px){.examples-window{height:660px}
.example-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.example-column:nth-child(2){display:block}
.example-set{gap:12px;padding-bottom:12px}
.play-card{border-radius:16px}
.play-tag{left:8px;top:8px;padding:5px 7px;font-size:9px;letter-spacing:.08em}
.play-body{padding:12px 12px 14px}
.play-body h3{font-size:15.5px}
.play-body p{margin-top:6px;font-size:13px;line-height:1.4}
}

/* ---------- The blog ---------- */
.learn-card .learn-picture img,.learn-card:nth-child(2) .learn-picture img,.learn-card:nth-child(3) .learn-picture img{object-fit:cover;padding:0;background:none}
.learn-card>.learn-meta{display:block;margin-bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.learn-card h3,.learn-card h2{margin-bottom:10px;font-size:22px;line-height:1.3;letter-spacing:-.03em}
.learn-dek{margin-bottom:16px;font-size:15px;line-height:1.5}
.learn-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-hero{padding:170px 0 56px;background:var(--bg);text-align:center}
.blog-hero h1{font-size:60px;line-height:1.05;letter-spacing:-.045em}
.blog-hero p{max-width:560px;margin:18px auto 0}
.blog-list{padding:64px 0 96px}
.post{padding-bottom:40px;background:var(--bg)}
.post-head{max-width:780px;margin:0 auto;padding:150px 20px 0;text-align:center}
.post-back{display:block;width:max-content;margin:0 auto 26px;font-size:14px;color:var(--muted)}
.post-back:hover{color:var(--ink)}
.post-head h1{font-size:52px;line-height:1.08;letter-spacing:-.045em}
.post-dek{margin-top:18px;font-size:20px;line-height:1.5}
.post-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:26px;font-size:14px;color:var(--muted)}
.post-meta img{filter:brightness(0) invert(1)}
.post-hero{max-width:1112px;margin:44px auto 0;padding:0 20px}
.post-hero img{width:100%;height:min(540px,52vw);object-fit:cover;border-radius:26px;border:4px solid #201e1b0e}
.post-body{max-width:700px;margin:56px auto 0;padding:0 20px}
.post-body>*+*{margin-top:20px}
.post-body p,.post-body li{font-size:18px;line-height:1.72;color:#383634}
.post-body .lede{font-size:23px;line-height:1.55;color:var(--ink)}
.post-body h2{margin-top:52px;font-size:30px;line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.post-body ul,.post-body ol{padding-left:22px}
.post-body li+li{margin-top:10px}
.post-body li::marker{color:var(--lime)}
.post-body strong{font-weight:700;color:var(--ink)}
.post-body blockquote{margin:36px 0;padding:26px 30px;border-radius:22px;background:radial-gradient(120% 120% at 0% 0%,#1c191724,#1c191700 60%),#f4f2ee;border:1px solid #1c191740;font-size:25px;line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.post-body a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.post-cta{max-width:700px;margin:64px auto 0;padding:34px 32px;border-radius:26px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#1c191726,#1c191700 60%),#f4f2ee;border:1px solid #201e1b14}
.post-cta h2{font-size:32px;line-height:1.2;letter-spacing:-.035em}
.post-cta>div{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.post-more{padding:88px 0 96px}
.post-more>h2{margin-bottom:28px;font-size:34px}
@media(max-width:809px){.blog-hero{padding:120px 0 40px}
.blog-hero h1{font-size:38px}
.blog-hero h1 br{display:none}
.blog-list{padding:40px 0 64px}
.post-head{padding-top:112px}
.post-head h1{font-size:34px;line-height:1.15}
.post-dek{font-size:17px}
.post-hero img{height:260px;border-radius:20px}
.post-body{margin-top:40px}
.post-body p,.post-body li{font-size:17px}
.post-body .lede{font-size:19px}
.post-body h2{font-size:25px}
.post-body blockquote{padding:20px;font-size:20px}
.post-cta{margin:48px 20px 0;padding:26px 20px}
.post-cta h2{font-size:25px}
.post-cta>div{flex-direction:column;align-items:stretch;gap:12px}
.post-cta .text-link{justify-content:center}
.post-more{padding:56px 0 64px}
.post-more>h2{font-size:26px}
.learn-grid.is-two{grid-template-columns:1fr}
}

/* ---------- Prototype 24: two or three sentences on each "One partner" card ---------- */
@media(min-width:1200px){.process-copy p{font-size:17px;line-height:1.55}
}


/* =====================================================================================================
   Prototype 25 (appended to prototype 24's styles by scripts/build-p25.py)
   ===================================================================================================== */

/* ---------- Card 2: the trigger event, marked in the email ---------- */
.mail-body .tx-mark{padding:1px 3px;border-radius:4px;background:#1c19177a;color:#12100c;box-shadow:0 0 0 1.5px #1c1917}
.tx-callout{position:absolute;left:0;bottom:0;z-index:3;display:inline-flex;align-items:center;gap:8px;max-width:58%;padding:8px 14px 8px 10px;border-radius:99px;background:#f9f7f4f2;border:1px solid #1c191759;box-shadow:0 14px 30px -14px #1c19175d;font-size:13px;line-height:1.2;color:var(--ink);white-space:nowrap}
.tx-callout::before{content:"";position:absolute;left:28px;bottom:100%;border:6px solid transparent;border-bottom-color:#1c191759}
.tx-callout .icon{flex:none;width:15px;height:15px;color:var(--lime)}
.tx-callout b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.tx-callout span{overflow:hidden;text-overflow:ellipsis}
.js .blast-demo .tx-callout{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease) .7s,transform .7s var(--ease) .7s}
.js .blast-demo.visible .tx-callout{opacity:1;transform:none}
@media(max-width:809px){.tx-callout{position:relative;align-self:flex-start;max-width:100%;margin-top:14px}
.tx-callout::before{left:22px}
}

/* ---------- "The COVR difference" label, with the COVR mark ---------- */
.eyebrow.is-brand{gap:9px;padding-left:9px}
.eyebrow.is-brand::before{display:none}
.eyebrow.is-brand img{flex:none;width:17px;height:17px;filter:brightness(0) invert(1) drop-shadow(0 0 6px #1c1917a6)}

/* ---------- Integrations: "COVR works with the tools you already use." ---------- */
@media(min-width:810px){.integrations-inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.integrations-copy h2{max-width:none}
}
@media(min-width:810px) and (max-width:1199px){.integrations-copy h2{font-size:36px}
}

/* ---------- Make it yours: one tighter module, the words on the left ---------- */
.builder-section{padding:96px 0}
.build-module{position:relative;isolation:isolate;overflow:hidden;display:grid;min-height:580px;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:48px;padding:48px;border:1.5px solid transparent;border-radius:32px;background:linear-gradient(#f6f4f0,#f6f4f0) padding-box,linear-gradient(135deg,#1c19178c,#201e1b1a 35%,#201e1b0d 65%,#1c191759) border-box;box-shadow:0 50px 120px -60px #fcfcfd,inset 0 1px 0 #12100c12}
.build-module::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 75% at 0% 0%,#1c191726,#1c191700 62%),radial-gradient(45% 60% at 100% 100%,#1c191712,#1c191700 60%)}
.build-module::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#201e1b21 1px,#1c191700 1.5px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,#fcfcfd,#1c191700 52%);mask-image:linear-gradient(100deg,#fcfcfd,#1c191700 52%)}
.build-intro{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.build-intro>.eyebrow{align-self:flex-start}
.build-intro h2{font-size:44px;line-height:1.12}
.build-intro>p:not(.disclaimer){max-width:380px;margin-top:16px;font-size:17px}
.build-intro .builder-path{align-self:flex-start;width:auto;margin:28px 0 0}
.build-intro .disclaimer{max-width:360px;margin-top:16px;text-align:left}
.build-rings{position:absolute;left:-190px;bottom:-250px;z-index:-1;width:440px;height:440px;opacity:.4;pointer-events:none}
.build-rings circle,.build-rings path{fill:none;stroke:#201e1b17;stroke-width:1.5}
.builder-grid.build-steps{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:10px;border-radius:24px;background:#f9f7f48c;border:1px solid #201e1b14;box-shadow:inset 0 1px 0 #12100c0d}
.build-steps .build-card{display:block;padding:0;border:1px solid #201e1b12;border-radius:18px;background:#f4f2ee}
.build-steps .build-card.is-active{background:#f0eeec;box-shadow:0 0 0 1px #1c191733,0 18px 40px -28px #1c191780}
.build-head{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 16px;border-radius:18px;background:none;color:var(--ink);text-align:left}
.build-head:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.build-n{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#201e1b14;color:var(--muted);font-size:13px;line-height:1;transition:background .3s,color .3s}
.build-card.is-active .build-n{background:#1c191730;color:var(--lime)}
.build-card.is-done .build-n{background:var(--lime);color:transparent}
.build-card.is-done .build-n::after{content:"";position:absolute;left:9px;top:8.5px;width:9px;height:5px;border:solid var(--bg);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.build-title{display:flex;flex:1;flex-direction:column;min-width:0}
.build-title b{font-weight:400;font-size:17px;line-height:1.3}
.build-title small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.35;color:var(--lime)}
.build-title small:empty{display:none}
.build-card.is-open .build-title small{display:none}
.build-head>.icon{width:18px;height:18px;color:var(--muted);transition:transform .35s var(--ease)}
.build-card.is-open .build-head>.icon{transform:rotate(90deg)}
.build-card.is-waiting .build-head>.icon{opacity:0}
.build-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.build-card.is-open .build-panel{grid-template-rows:1fr}
.build-inner{min-height:0;overflow:hidden;padding:0 16px}
.build-inner>:last-child{margin-bottom:16px}
.build-steps .build-card p{min-height:0;font-size:14px;line-height:1.45;color:var(--muted)}
.build-steps .goal-choices{flex-direction:row;gap:8px;margin-top:12px;padding-top:0;border-top:0}
.build-steps .goal-choices button{flex:1;width:auto;min-width:0;min-height:52px;gap:8px;padding:8px 10px;font-size:13.5px}
.build-steps .goal-choices img{width:30px;height:30px}
.build-steps .moment-choices{gap:8px;margin:12px 0 0;padding:0;border-top:0}
.build-steps .moment-choices label{padding:12px;font-size:15px}
.build-cover{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px}
.build-steps .reward-editor{margin-top:0}
.build-steps .reward-dial{width:146px}
.build-steps .reward-readout>strong{font-size:36px}
.build-steps .build-go{width:100%;margin-top:16px}
@media(max-width:1199px){.builder-section{padding:64px 0}
.build-module{gap:32px;padding:36px}
.build-intro h2{font-size:36px}
}
@media(max-width:959px){.build-module{grid-template-columns:1fr;min-height:0}
.build-rings{left:auto;right:-170px;bottom:auto;top:-190px}
}
@media(max-width:809px){.builder-section{padding:40px 0}
.build-module{gap:24px;padding:22px 16px 16px;border-radius:24px}
.build-intro h2{font-size:30px}
.build-intro>p:not(.disclaimer){font-size:16px}
.build-intro .builder-path{margin-top:20px;font-size:12px;gap:8px;padding:7px 11px}
.builder-grid.build-steps{padding:6px;gap:6px;border-radius:20px}
.build-head{min-height:56px;padding:11px 12px}
.build-inner{padding:0 12px}
.build-steps .goal-choices{flex-direction:column}
.build-steps .goal-choices button{width:100%}
.build-cover{grid-template-columns:1fr;justify-items:center;gap:8px}
.build-cover-side{width:100%;text-align:center}
}


/* =====================================================================================================
   Prototype 26 (appended to prototype 25's styles by scripts/build-p26.py)
   ===================================================================================================== */

/* ---------- Make it yours: the heading, and the campaign taking over the module ---------- */
.build-intro h2{font-size:40px;text-wrap:balance}
.build-module>.build-intro{grid-area:1/1}
.build-module>.build-steps{grid-area:1/2}
.build-module>.build-intro,.build-module>.build-steps{transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
.build-module>.build-result-view{grid-area:1/1/2/3}
.build-result-view{align-self:stretch;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.build-module.is-result>.build-intro,.build-module.is-result>.build-steps{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.build-module.is-result>.build-result-view{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .18s,transform .65s var(--ease) .18s,visibility 0s}
.br-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.br-top .eyebrow{margin:0}
.br-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:99px;background:#201e1b12;color:var(--ink);font-size:14px;transition:background .2s}
.br-back:hover{background:#201e1b24}
.br-back .icon{width:18px;height:18px}
.build-result-view h3{margin-top:18px;font-size:36px;line-height:1.1;letter-spacing:-.04em}
.build-result-view h3:focus{outline:none}
.br-line{max-width:680px;margin-top:8px;font-size:16px;line-height:1.5}
.br-body{display:grid;grid-template-columns:minmax(0,1fr) 312px;align-items:start;gap:26px;margin-top:22px}
.offer-pieces.br-pieces{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:14px;padding:0;overflow:visible}
.br-pieces .offer-piece figcaption{margin-bottom:8px;font-size:12.5px}
.br-pieces .od-card{box-shadow:0 22px 44px -26px #000d}
.br-pieces .od-card.cb-sms{min-height:0}
.offer-actions.br-actions{margin:0;padding:16px;border-radius:18px;background:#f9f7f48c}
.br-actions h4{margin-bottom:10px;font-weight:400;font-size:15px;line-height:1.3}
.br-actions ul{gap:8px}
.br-actions li{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:10px}
.br-actions li img{width:34px;height:34px}
.br-actions li b{font-size:13.5px;line-height:1.3}
.br-actions li span{display:none}
.br-actions li button{min-width:0;min-height:34px;padding:0 13px;font-size:13px}
.br-note{margin-top:12px;font-size:12px;line-height:1.4;color:#1c1917}
.br-actions .button{width:100%;margin-top:12px}
@media(max-width:1199px){.br-body{grid-template-columns:minmax(0,1fr) 264px;gap:20px}
.build-result-view h3{font-size:30px}
}
@media(max-width:959px){.build-module>.build-steps{grid-area:2/1}
.build-module>.build-result-view{grid-area:1/1/3/2}
.br-body{grid-template-columns:1fr}
}
@media(max-width:809px){.build-intro h2{font-size:30px}
.br-top{flex-wrap:wrap}
.build-result-view h3{font-size:28px}
.br-line{font-size:15px}
.offer-pieces.br-pieces{grid-template-columns:repeat(3,210px);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px}
.br-pieces .offer-piece{scroll-snap-align:center}
}


/* =====================================================================================================
   Prototype 27: the light alternate (after prototype 26's styles, color-transformed by scripts/build-p27.py)
   ===================================================================================================== */

:root{color-scheme:light;--bg:#ffffff;--surface:#faf8f4;--card:#ffffff;--ink:#1c1a17;--muted:#6a6865;--line:#1c1a171a;--lime:#1c1917;--blue-2:#1c1917;--glass-edge:#ffffffe6;--glass-shadow:0 26px 64px -34px #1c191759}
body.is-light{background:#faf8f4;color:var(--ink)}
::selection{background:#1c191733}

/* ---------- The textured, liquid background behind everything ---------- */
body.is-light::before{content:"";position:fixed;inset:-25vh -25vw;z-index:-2;pointer-events:none;background:radial-gradient(38% 32% at 14% 18%,#1c191729,#1c191700 70%),radial-gradient(34% 30% at 86% 26%,#1c191724,#1c191700 70%),radial-gradient(40% 38% at 72% 82%,#1c19171f,#1c191700 70%),radial-gradient(30% 30% at 24% 78%,#1c19171a,#1c191700 70%);animation:liquid-drift 36s ease-in-out infinite alternate}
@keyframes liquid-drift{to{transform:translate3d(4vw,-3vh,0) rotate(9deg) scale(1.1)}}
body.is-light::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .09 0 0 0 0 .16 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(#1c1a1714 1px,#1c1a1700 1.3px);background-size:240px 240px,26px 26px}
.is-light .hero,.is-light .case-study,.is-light .builder-section,.is-light .examples,.is-light .closing,.is-light .site-footer,.is-light .blog-hero,.is-light .post{background:transparent}
.is-light .site-footer{background:#ffffff8c;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid #1c1a1714}
.motion-paused.is-light::before{animation-play-state:paused}

/* ---------- Glass ---------- */
.is-light .persona-card,.is-light .faq-list,.is-light .closing-preview,.is-light .post-cta,.is-light .build-module,.is-light .process-card{background:linear-gradient(145deg,#ffffffcc,#ffffff73);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #1c1a170a,var(--glass-shadow)}
.is-light .process-card{box-shadow:inset 0 0 0 1px var(--glass-edge),inset 0 1px 0 #fff,var(--glass-shadow)}
.is-light .card-1{background:linear-gradient(145deg,#ffffffd9,#f6f4f2a6)}
.is-light .card-2{background:linear-gradient(145deg,#ffffffd9,#f7f5f2a6)}
.is-light .card-3{background:linear-gradient(145deg,#ffffffd9,#f4f2f0a6)}
.is-light .card-4{background:linear-gradient(145deg,#ffffffd9,#f6f4f0a6)}
.is-light .play-card,.is-light .learn-card .learn-picture,.is-light .seat-demo,.is-light .cover-demo{background:#ffffffb8;border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 #fff,0 18px 44px -30px #1c191766}
.is-light .play-card.is-cutout .play-media{background:var(--tint);background:radial-gradient(85% 85% at 50% 38%,color-mix(in srgb,var(--tint) 30%,#fff),color-mix(in srgb,var(--tint) 62%,#fff) 80%)}
.is-light .learn-picture{border:0}
.is-light .button-dark{background:#ffffffd9;color:var(--ink);box-shadow:inset 0 0 0 1px #1c1a171f,0 10px 24px -16px #1c191759}
.is-light .button-dark:hover{background:#fff}
.is-light .button{box-shadow:0 12px 26px -12px #1c1917a6}
.is-light .button:hover{background:#1c1917}
.is-light .text-link:hover .icon{color:var(--lime)}

/* ---------- Labels: clear glass, blue dot ---------- */
.is-light .eyebrow,.is-light .process-copy .eyebrow{color:#1c1a17;background:linear-gradient(180deg,#ffffffeb,#ffffff8c);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #1c19172e,0 12px 28px -16px #1c191766}
.is-light .eyebrow::before{background:var(--lime);box-shadow:0 0 0 3px #1c191726,0 0 12px 1px #1c191799}
.is-light .eyebrow::after{background:linear-gradient(100deg,#fff0 32%,#ffffffd9 47%,#ffffff40 53%,#fff0 68%) no-repeat;background-size:260% 100%;background-position:140% 0}
.is-light .eyebrow.is-brand img{filter:drop-shadow(0 0 6px #1c191766)}

/* ---------- The COVR mark in its own navy, not inverted ---------- */
.is-light .brand img,.is-light .window-brand img,.is-light .demo-brand img,.is-light .post-meta img,.is-light .payout-flow img,.is-light .hero-proof img{filter:none}

/* ---------- Header: glass once you scroll ---------- */
.is-light .site-header.scrolled,.is-light .site-header.menu-open{background:#ffffffa6;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:#1c1a1714}
.is-light .site-header nav a::after{background:var(--lime)}

/* ---------- Hero: fans cheering behind it ---------- */
.is-light .hero{position:relative;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.4s ease,transform 9s linear}
.hero-media video.is-on{opacity:1;transform:scale(1)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#faf8f4d9,#faf8f400 22%),linear-gradient(90deg,#faf8f4f7 0%,#faf8f4e6 30%,#faf8f48c 56%,#faf8f44d 100%),linear-gradient(180deg,#faf8f400 58%,#faf8f4 100%),radial-gradient(60% 70% at 80% 40%,#1c191726,#1c191700 70%)}
.is-light .hero h1{color:#1c1a17}
.is-light .hero-description{color:#504e4c}
.is-light .hero-window.cb{background:linear-gradient(150deg,#ffffffb3,#ffffff66);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 40px 90px -40px #1c191780}
.is-light .cb .window-top{border-bottom-color:#1c1a171a}
.is-light .cb-step{background:#ffffff8c;border-color:#ffffffd9;box-shadow:0 1px 0 #fff inset}
.is-light .cb-step.is-open{background:#ffffffd9;border-color:#1c191766;box-shadow:0 14px 30px -20px #1c191766}
.is-light .cb-canvas{background:#ffffff8c;border-color:#ffffffd9}
.is-light .cb-field,.is-light .cb-tabs,.is-light .cb-aud,.is-light .cb-chip{background:#ffffffcc}
.is-light .cb-thumb{background:#fff;box-shadow:0 0 0 4px #1c191733,0 3px 10px #1c191740}
.is-light .hsec{fill:#e8e6e2}
.is-light .cb.show-seats .hsec.is-best{fill:var(--lime)}
.is-light .cb-fans circle{fill:#1c1a17}
.is-light .cb-sweep i{background:conic-gradient(from 0deg,#1c191700 0 285deg,#1c191752 355deg,#1c191700 360deg)}
.is-light .cb-slide{box-shadow:0 26px 50px -26px #1c191773}
@media(max-width:1199px){.hero-media::after{background:linear-gradient(180deg,#faf8f4e6 0%,#faf8f4d9 45%,#faf8f499 70%,#faf8f4 100%)}
}

/* ---------- The rest, tuned for light ---------- */
.is-light .sec{fill:#e6e4e0}
.is-light .seat-demo .sec{fill:#e6e4e0}
.is-light .seat-demo[data-insight="0"] .sec[data-g="0"],.is-light .seat-demo[data-insight="1"] .sec[data-g="1"],.is-light .seat-demo[data-insight="2"] .sec[data-g="2"]{fill:var(--lime)}
.is-light .sec-tag rect{fill:#fff;stroke:var(--lime)}
.is-light .cover-bars i{background:#dad8d4}
.is-light .reward-knob circle{fill:#fff;stroke:var(--lime)}
.is-light .int-window{box-shadow:inset 0 0 0 5px #fff,0 30px 70px -40px #1c191766}
.is-light .case-photo{border-color:#1c191759}
.is-light .build-module{background:linear-gradient(#ffffffb8,#ffffff73) padding-box,linear-gradient(135deg,#1c191780,#ffffff 35%,#ffffffcc 65%,#1c19174d) border-box;border:1.5px solid transparent}
.is-light .build-module::after{background-image:radial-gradient(#1c1a171c 1px,#0000 1.5px)}
.is-light .builder-grid.build-steps{background:#ffffff8c;border-color:#ffffffd9}
.is-light .build-steps .build-card{background:#ffffffd9;border-color:#1c1a1712}
.is-light .build-steps .build-card.is-active{background:#fff;box-shadow:0 0 0 1px #1c19174d,0 18px 40px -28px #1c191799}
.is-light .offer-actions.br-actions{background:#ffffffb3}
.is-light .demo-dialog{background:#ffffffeb;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.is-light .mail-body .tx-mark{background:#1c191726;box-shadow:0 0 0 1.5px #1c1917;color:#0c2340}
.is-light .tx-callout{background:#fffffff2;border-color:#1c191759;color:var(--ink)}
.is-light .tx-callout::before{border-bottom-color:#1c191759}


/* =====================================================================================================
   Prototype 28 (appended to prototype 27's light styles by scripts/build-p28.py), after wisdom.ai
   ===================================================================================================== */

:root{--grad:linear-gradient(100deg,#1c1917 0%,#1c1917 46%,#1c1917 100%);--grad-soft:linear-gradient(160deg,#f6f8ff 0%,#f4f2ef 52%,#e8e6e3 100%)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-light .hero h1>span.grad-text{color:transparent}

/* ---------- Buttons: the gradient, and an outlined partner ---------- */
.is-light .button{background:linear-gradient(120deg,#1c1917,#1c1917);color:#fff;box-shadow:0 14px 30px -14px #1c1917b3,inset 0 1px 0 #ffffff40}
.is-light .button:hover{background:linear-gradient(120deg,#1c1917,#1c1917)}
.is-light .button-dark{background:#ffffffd9;color:var(--ink)}
.is-light .button-outline{background:#ffffff8c;color:var(--ink);box-shadow:inset 0 0 0 1.5px #1c1a1738;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.is-light .button-outline:hover{background:#fff;box-shadow:inset 0 0 0 1.5px #1c191780}
.button-outline .icon{width:18px;height:18px}
.is-light .eyebrow::before{background:var(--grad)}

/* ---------- Hero: wisdom.ai's layout ---------- */
.hero-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:9px 16px 9px 12px;border-radius:99px;background:#ffffffd9;box-shadow:inset 0 0 0 1px #1c19172e,0 12px 28px -16px #1c191766;font-size:14px;line-height:1.3;color:var(--ink)}
.hero-badge .icon{width:18px;height:18px;color:#1c1917}
.hero-badge:hover{box-shadow:inset 0 0 0 1px #1c191766,0 12px 28px -16px #1c191766}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;padding:26px;border-radius:34px;background:linear-gradient(160deg,#f6f8ffa6,#f1efeca6 55%,#e6e4e0b3);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px #ffffffd9,0 50px 110px -60px #1c1917b3}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,#ffffff00 0 26px,#ffffff6b 26px 28px,#1c191717 28px 54px);-webkit-mask-image:radial-gradient(120% 95% at 100% 100%,#000 25%,#0000 72%);mask-image:radial-gradient(120% 95% at 100% 100%,#000 25%,#0000 72%)}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 100% 100%,#1c191740,#1c191700 65%),radial-gradient(60% 50% at 0% 0%,#ffffffb3,#ffffff00 60%)}
.is-light .hero-stage .hero-window.cb{background:#ffffffd9;box-shadow:inset 0 1px 0 #fff,0 30px 70px -40px #1c191780}
@media(min-width:1200px){.is-light .hero .container{width:min(1320px,calc(100% - 80px))}
.is-light .hero-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:52px}
.is-light .hero-copy{width:auto}
.is-light .hero h1{font-size:58px;line-height:1.06}
.is-light .hero-description{max-width:520px;font-size:19px}
.is-light .hero-stage .hero-window.cb{position:relative;left:auto;top:auto;width:100%}
}
@media(min-width:1200px) and (max-width:1339px){.is-light .hero h1{font-size:50px}
.hero-stage{padding:18px;border-radius:28px}
}
@media(max-width:1199px){.hero-stage{max-width:880px;margin:48px auto 0;padding:18px;border-radius:28px}
.is-light .hero-stage .hero-window.cb{margin-top:0}
.hero-badge{margin-bottom:20px}
}
@media(max-width:809px){.hero-stage{margin-top:32px;padding:8px;border-radius:24px}
.hero-badge{font-size:12.5px;padding:8px 12px 8px 10px}
.is-light .hero-actions .button-outline{justify-content:center}
}

/* The hero demo's last step: send it through the tools */
.cb-next{display:none;flex-direction:column;gap:6px;margin-top:4px}
.cb.is-live .cb-next{display:flex;animation:cb-next-in .6s var(--ease)}
@keyframes cb-next-in{from{opacity:0;transform:translateY(8px)}}
.cb-next-title{font-weight:400;font-size:12.5px;color:var(--muted);margin:4px 2px 0}
.cb-act{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:12px;background:#ffffffd9;border:1px solid #1c1a1712;transition:border-color .3s}
.cb-act img{width:28px;height:28px;border-radius:50%}
.cb-act span{display:flex;flex-direction:column;min-width:0;font-size:12.5px;line-height:1.25;color:var(--ink)}
.cb-act small{font-size:11px;color:var(--muted)}
.cb-act em{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:28px;padding:0 12px;border-radius:99px;background:linear-gradient(120deg,#1c1917,#1c1917);color:#fff;font-style:normal;font-size:12px;white-space:nowrap;transition:transform .15s}
.cb-act.is-done{border-color:#1c191759}
.cb-act.is-done em{background:#1c19171f;color:#1c1917;font-size:0}
.cb-act.is-done em::after{content:"✓ Done";font-size:12px}
.cb.is-live .cb-step .cb-title small{display:none}
.cb.is-live .cb-step .cb-head{padding-block:8px}
@media(max-width:809px){.cb-steps{min-height:470px}
}

/* ---------- One partner: the words scroll, the picture stays ---------- */
.is-light .process .container{width:min(1200px,calc(100% - 80px))}
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.story-steps{padding:4vh 0 22vh}
.story-step{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:68vh;opacity:.3;transition:opacity .5s var(--ease)}
.story-step.is-active{opacity:1}
.story-step .eyebrow{margin-bottom:18px}
.story-step h3{font-size:36px;line-height:1.16;letter-spacing:-.04em}
.story-step p{max-width:450px;margin-top:14px;font-size:17px;line-height:1.6;color:var(--muted)}
.story-stage-wrap{position:relative}
.story-stage{position:sticky;top:max(92px,calc(50vh - 310px));height:min(620px,max(440px,calc(100vh - 116px)));overflow:hidden;isolation:isolate;border-radius:36px;background:radial-gradient(80% 65% at 100% 100%,#1c19174d,#1c191700 62%),radial-gradient(70% 60% at 0% 0%,#ffffffe6,#ffffff00 60%),var(--grad-soft);box-shadow:inset 0 0 0 1px #ffffffe6,0 50px 110px -60px #1c191799}
.story-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,#ffffff00 0 26px,#ffffff66 26px 28px,#1c191717 28px 54px);-webkit-mask-image:radial-gradient(120% 95% at 100% 100%,#000 25%,#0000 72%);mask-image:radial-gradient(120% 95% at 100% 100%,#000 25%,#0000 72%)}
.story-art{position:absolute;inset:0;display:grid;place-items:center;padding:44px 48px 58px;opacity:0;visibility:hidden;transform:translateY(26px) scale(.97);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .7s}
.story-art.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .12s,transform .8s var(--ease) .12s,visibility 0s}
.story-art>*{width:100%;max-width:560px;scale:var(--fit,1);transform-origin:50% 0}
@media(min-width:960px) and (max-height:760px){.story-art{padding:28px 40px 48px}.story-dots{bottom:18px}}
.story-dots{position:absolute;left:50%;bottom:22px;z-index:2;display:flex;gap:6px;transform:translateX(-50%)}
.story-dots i{width:18px;height:4px;border-radius:9px;background:#1c1a172e;transition:width .4s var(--ease),background .4s}
.story-dots i.is-on{width:38px;background:var(--grad)}
/* The pictures replay their own motion each time they come back. */
.story-art.is-live .blast-demo .gram,.story-art.is-live .blast-demo .tx-callout,.story-art.is-live .payout-demo .notif{opacity:1;transform:none}
.story-art .payout-demo,.story-art .seat-demo{margin:0 auto}
@media(max-width:959px){.story{grid-template-columns:1fr;gap:0}
.story-steps{padding:0}
.story-step{min-height:0;opacity:1;padding:26px 0 40px}
.story-stage-wrap{display:none}
.story-step .story-art{position:relative;inset:auto;width:100%;margin-top:22px;padding:22px;opacity:1;visibility:visible;transform:none;border-radius:28px;background:radial-gradient(80% 65% at 100% 100%,#1c191740,#1c191700 62%),var(--grad-soft);box-shadow:inset 0 0 0 1px #ffffffe6,0 30px 70px -50px #1c191780}
.story-step h3{font-size:28px}
}
@media(max-width:809px){.story-step .story-art{padding:14px;border-radius:22px}
}

/* 03: what a big win costs you, without COVR and with it */
.owe-demo{padding:24px 26px 20px;border-radius:24px;background:#ffffffe0;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.owe-head small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.owe-head strong{display:block;margin-top:6px;font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.owe-head span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.owe-head span b{font-weight:700;color:var(--ink)}
.owe-chart{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px;height:230px;margin:22px 0 0 44px;padding:0 14px}
.owe-grid{position:absolute;inset:0 0 0 -44px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.owe-grid i{position:relative;height:1px;background:#1c1a1714}
.owe-grid i::before{content:attr(data-y);position:absolute;left:0;top:-8px;font-size:11px;font-style:normal;color:var(--muted)}
.owe-grid i:last-child{background:#1c1a172e}
.owe-bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.owe-bar b{position:relative;display:grid;place-items:center;align-content:center;gap:6px;width:100%;max-width:150px;height:var(--h);border-radius:14px 14px 4px 4px;transform-origin:bottom;transform:scaleY(.02);transition:transform 1.1s var(--ease)}
.owe-bar.is-without b{background:linear-gradient(180deg,#5d5b58,#2c2a26)}
.owe-bar.is-with b{background:var(--grad);transition-delay:.45s;box-shadow:0 20px 40px -20px #1c1917b3}
.owe-bar.is-with b img{filter:brightness(0) invert(1)}
.owe-bar.is-with b em{font-style:normal;font-size:13px;line-height:1.3;text-align:center;color:#fff}
.owe-val{position:absolute;top:calc(100% - var(--h) - 30px);left:50%;transform:translateX(-50%);font-size:20px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .5s .8s}
.owe-val.is-zero{top:auto;bottom:10px;z-index:2;padding:3px 10px;border-radius:99px;background:#fff;color:#1c1917;font-size:15px;box-shadow:0 6px 16px -8px #1c191766;transition-delay:1.4s}
.story-art.is-live .owe-bar b{transform:none}
.story-art.is-live .owe-val{opacity:1}
.owe-names{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:10px 0 0 44px;padding:0 14px;text-align:center}
.owe-names span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.owe-names b{font-size:15px;font-weight:700;color:var(--ink)}
.owe-foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 12px;border-radius:12px;background:#1c191712;font-size:13px;line-height:1.35;color:var(--ink)}
.owe-foot .icon{flex:none;width:16px;height:16px;color:#1c1917}

/* 04: send it through the tools */
.launch-demo{padding:22px;border-radius:24px;background:#ffffffe0;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.ld-head{display:flex;align-items:center;gap:12px}
.ld-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad)}
.ld-mark img{filter:brightness(0) invert(1)}
.ld-head small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.ld-head strong{display:block;margin-top:3px;font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.ld-when{margin-left:auto;padding:5px 10px;border-radius:99px;background:#1c1a170d;font-size:12px;color:var(--muted);white-space:nowrap}
.ld-list{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.ld-list li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:16px;background:#f9f7f4;border:1px solid #1c1a170f;transition:border-color .4s,background .4s}
.ld-list li img{width:38px;height:38px;border-radius:50%}
.ld-list b{display:block;font-weight:400;font-size:15px;line-height:1.3;color:var(--ink)}
.ld-list li span:not(.ld-btn){display:block;font-size:12.5px;color:var(--muted)}
.ld-btn{position:relative;display:grid;min-width:112px;height:38px;border-radius:99px;overflow:hidden}
.ld-btn i{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;border-radius:99px;font-style:normal;font-size:13.5px;transition:opacity .35s,transform .45s var(--ease)}
.ld-btn i:first-child{background:linear-gradient(120deg,#1c1917,#1c1917);color:#fff}
.ld-btn i:last-child{background:#1c19171f;color:#1c1917;opacity:0;transform:translateY(8px)}
.ld-btn .icon{width:15px;height:15px}
.story-art.is-live .ld-btn i:first-child{animation:ld-out .01s linear forwards;animation-delay:calc(.9s + var(--i) * .75s)}
.story-art.is-live .ld-btn i:last-child{animation:ld-in .45s var(--ease) forwards;animation-delay:calc(.9s + var(--i) * .75s)}
.story-art.is-live .ld-list li{animation:ld-row .45s var(--ease) forwards;animation-delay:calc(.9s + var(--i) * .75s)}
@keyframes ld-out{to{opacity:0}}
@keyframes ld-in{to{opacity:1;transform:none}}
@keyframes ld-row{to{background:#fff;border-color:#1c191747}}
.ld-foot{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.ld-bar{display:block;height:5px;border-radius:9px;background:#1c1a1712;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad)}
.story-art.is-live .ld-bar i{animation:ld-fill 2.3s var(--ease) .9s forwards}
@keyframes ld-fill{to{width:100%}}
.ld-foot small{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.ld-foot .icon{width:15px;height:15px;color:#1c1917}
@media(max-width:809px){.ld-when{display:none}
.ld-list li{grid-template-columns:34px minmax(0,1fr)}
.ld-list li img{width:34px;height:34px}
.ld-btn{grid-column:2;justify-self:start}
.owe-demo,.launch-demo{padding:16px}
.owe-chart{height:200px;gap:18px;margin-left:40px;padding:0 4px}
.owe-names{gap:18px;margin-left:40px;padding:0 4px}
}
@media(prefers-reduced-motion:reduce){.ld-btn i:first-child{opacity:0}
.ld-btn i:last-child{opacity:1;transform:none}
.ld-bar i{width:100%}
.owe-bar b{transform:none}
.owe-val{opacity:1}
}

/* ---------- The gradient, carried through ---------- */
.is-light .build-module{background:linear-gradient(#ffffffc2,#ffffff80) padding-box,linear-gradient(135deg,#1c191799,#ffffff 32%,#ffffffcc 62%,#1c191780) border-box}
.is-light .builder-path>span.is-on{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.is-light .closing{background:radial-gradient(60% 80% at 50% 100%,#1c191726,#1c191700 70%),radial-gradient(50% 60% at 20% 90%,#1c19171f,#1c191700 70%)}
.is-light .round-icon{background:var(--grad);color:#fff}
.is-light .int-window{box-shadow:inset 0 0 0 5px #fff,0 0 0 1px #1c191726,0 34px 80px -44px #1c191799}
.is-light .play-body b,.is-light .learn-card>.learn-meta{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* The scoreboard reads on light: a clear glass strip */
.is-light .score{background:#ffffffe6;border-color:#1c1a1714;box-shadow:0 14px 30px -20px #1c191759}
.is-light .score-final{background:#1c1a170f;color:var(--muted)}
.is-light .score-team{color:var(--ink)}
.is-light .score-team.is-away{color:var(--muted)}

/* =====================================================================================================
   Prototype 29 (appended to prototype 28's styles by scripts/build-p29.py)
   ===================================================================================================== */
/* ---------- No pills: the section labels, hero badge and card tags are gone; what's left is plain ---------- */
.build-intro .builder-path{padding:0;border:0;background:none}
.play-body{padding-top:14px}
.motion-pause{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;background:#ffffffd9;border:1px solid #1c1a171a;box-shadow:0 10px 24px -14px #1c191780;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink)}
.motion-pause .icon{width:18px;height:18px}
.motion-pause .is-play,.motion-pause[aria-pressed="true"] .is-pause{display:none}
.motion-pause[aria-pressed="true"] .is-play{display:block}
@media(prefers-reduced-motion:reduce){.motion-pause{display:none}}

/* ---------- Hero: no Replay, no Live, no "Campaign live". Once it launches, the next steps take over ---------- */
.cb.is-live .cb-actions{display:none}

/* ---------- The arena, drawn like a real seat map ---------- */
.ar-map .ar-floor{fill:#f1efec}
.ar-map .ar-courtside{fill:none;stroke:#d4d2ce;stroke-width:3.4;stroke-dasharray:3.2 1.3}
.ar-map .ar-bench{fill:#aeacaa}
.ar-map .ar-table{fill:#0c2340}
.ar-map .ar-wood{fill:#e7c592}
.ar-map .ar-planks{fill:none;stroke:#b98c52;stroke-width:.35;opacity:.4}
.ar-map .ar-key{fill:#236192}
.ar-map .ar-lines{fill:none;stroke:#fff;stroke-width:1.1}
.ar-map .ar-rim{fill:none;stroke:#ff7a1a;stroke-width:1}
.ar-map .ar-wall{fill:none;stroke:#e0deda;stroke-width:1.2}
.ar-map .ar-suites{fill:none;stroke:#e0deda;stroke-width:9;stroke-dasharray:7 1.6}
.ar-map .ar-rows{fill:none;stroke:#fff;stroke-width:.7;opacity:.8;pointer-events:none}
.ar-map .ar-tunnel{fill:#fff}
.ar-map .ar-nums text{font:600 7.4px Diatype,Arial,sans-serif;fill:#9c9a96;text-anchor:middle;pointer-events:none;transition:fill .4s}
.ar-map .hsec,.ar-map .sec{stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
/* The hero's copy: scanned in turn, the upper corners picked, fans by behavior dotted in. */
.cb-map{margin:6px 0}
.cb-stadium.ar-map{width:min(100%,340px);height:auto;aspect-ratio:472/368;margin-inline:auto}
.is-light .cb.show-seats .ar-map .hsec.is-best{fill:#1c1917}
.cb.show-seats .ar-map .ar-nums text[data-best]{fill:#fff}
.cb-fans circle{r:2.4px}
.cb-sweep i{width:min(96%,360px);transform:scaleY(.78);animation-name:ar-sweep}
@keyframes ar-sweep{from{transform:scaleY(.78) rotate(0)}to{transform:scaleY(.78) rotate(360deg)}}

/* ---------- How it works: longer steps, no labels, and every picture moves with the scroll ---------- */
.story-step{min-height:80vh}
.story-step h3{font-size:40px}
.story-step p{margin-top:16px}
/* 1. Your goal: the stadium. A sweep reads the bowl as you scroll, then each audience lights up in turn. */
.story .seat-demo{padding:18px 20px 16px}
.story .seat-head{align-items:flex-start}
.seat-venue{flex:none;font-size:12.5px;color:var(--muted)}
.seat-stage{position:relative;margin-top:8px}
.story .seat-demo .seat-map{max-width:392px;margin:0 auto}
.seat-sweep{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:calc(min(var(--scan,1) * 12,1) * min((1 - var(--scan,1)) * 12,1))}
.seat-sweep i{width:min(96%,380px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,#1c191700 0 296deg,#1c191757 356deg,#1c191700 360deg);transform:scaleY(.787) rotate(calc(var(--scan,1) * 360deg))}
.story .seat-demo .ar-map .sec{--lit:calc(clamp(0,(var(--scan,1) - var(--a)) * 9,1) * (1 - var(--read,1)));fill:color-mix(in srgb,#1c1917 calc(var(--lit) * 26%),#e9e7e4);transition:fill .3s}
.story .seat-demo[data-insight="0"] .ar-map .sec[data-g="0"],.story .seat-demo[data-insight="1"] .ar-map .sec[data-g="1"],.story .seat-demo[data-insight="2"] .ar-map .sec[data-g="2"]{fill:#1c1917}
.story .seat-demo[data-insight="0"] .ar-nums text[data-g="0"],.story .seat-demo[data-insight="1"] .ar-nums text[data-g="1"],.story .seat-demo[data-insight="2"] .ar-nums text[data-g="2"]{fill:#fff}
/* The labels fade by their paint, not their opacity: an opacity fade gives the label its own layer, and Chrome
   then keeps drawing its text where it was before the stage scaled the picture to fit. */
.story .sec-tag,.story .seat-demo .sec-tag{opacity:1;transition:none}
.story .sec-tag rect{fill:#fff;stroke:#1c1917;stroke-width:1;fill-opacity:0;stroke-opacity:0;transition:fill-opacity .4s,stroke-opacity .4s}
.story .sec-tag text{fill:#1c1917;font:600 11px Diatype,Arial,sans-serif;fill-opacity:0;transition:fill-opacity .4s}
.sec-tag-line{fill:none;stroke:#1c1917;stroke-width:1;stroke-opacity:0;transition:stroke-opacity .4s}
.story .seat-demo[data-insight="0"] .sec-tag[data-g="0"] :is(rect,text,path),.story .seat-demo[data-insight="1"] .sec-tag[data-g="1"] :is(rect,text,path),.story .seat-demo[data-insight="2"] .sec-tag[data-g="2"] :is(rect,text,path){fill-opacity:1;stroke-opacity:1}
.story .seat-insight{min-height:0;margin-top:6px;padding:12px 14px;align-items:baseline}
.story .seat-insight-tag{padding:0;border-radius:0;background:none;color:#1c1917;letter-spacing:.06em}
.story .seat-insight p{font-size:14.5px}
.seat-tabs span{display:flex;flex-direction:column;gap:8px;padding:4px 0;font-size:12px;line-height:1.3;color:var(--muted);transition:color .3s}
.seat-tabs span.is-on{color:var(--ink)}
.story .seat-tabs b{background:var(--grad);transform:scaleX(var(--fill,1));animation:none}
/* 2. Your campaign: the email slides in, the trigger event is marked, then the post follows. */
.story .blast-demo .mail{--k:clamp(0,var(--p,1) / .24,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 26px));transition:none}
.story .blast-demo .tx-mark{--k:clamp(0,(var(--p,1) - .2) / .14,1);background:rgb(36 89 245 / calc(var(--k) * .15));box-shadow:0 0 0 calc(var(--k) * 1.5px) #1c1917}
.story .blast-demo .tx-callout{--k:clamp(0,(var(--p,1) - .3) / .14,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 10px));transition:none}
.story .blast-demo .gram{--k:clamp(0,(var(--p,1) - .42) / .26,1);opacity:var(--k);transform:translate(calc((1 - var(--k)) * 38px),calc((1 - var(--k)) * 18px)) rotate(calc((1 - var(--k)) * 3deg));transition:none}
/* 3. Your coverage: the bill without COVR rises and counts up, then COVR's bar takes it, then the $0. */
.story .owe-bar.is-without{--k:clamp(0,(var(--p,1) - .04) / .3,1)}
.story .owe-bar.is-with{--k:clamp(0,(var(--p,1) - .34) / .26,1)}
.story .owe-bar b{transform:scaleY(max(.02,var(--k)));transition:none}
.story .owe-bar.is-with b>*{opacity:clamp(0,(var(--p,1) - .5) / .12,1)}
.story .owe-val{top:calc(100% - var(--h) * var(--k) - 30px);opacity:clamp(0,var(--k) * 6,1);transition:none}
.story .owe-val.is-zero{top:auto;opacity:clamp(0,(var(--p,1) - .6) / .1,1)}
.story .owe-foot{--k:clamp(0,(var(--p,1) - .66) / .12,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 8px))}
/* 4. Your channels: each tool flips from Create to Created as you scroll, and the bar fills. */
.story .ld-list li{--k:clamp(0,(var(--p,1) - (.14 + var(--i) * .2)) / .08,1);animation:none;background:color-mix(in srgb,#fff calc(var(--k) * 100%),#f9f7f4);border-color:color-mix(in srgb,#1c191747 calc(var(--k) * 100%),#1c1a170f);transition:none}
.story .ld-btn i{animation:none;transition:none}
.story .ld-btn i:first-child{opacity:calc(1 - var(--k))}
.story .ld-btn i:last-child{opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 8px))}
.story .ld-bar i{width:100%;transform:scaleX(clamp(0,(var(--p,1) - .08) / .72,1));transform-origin:left;animation:none}
/* 5. Your payout: the trigger event, the fan's notification, then the credit counting up in the wallet. */
.story .payout-demo .score-hit{--k:clamp(0,(var(--p,1) - .04) / .12,1);opacity:var(--k);transform:scale(calc(.85 + var(--k) * .15))}
.story .payout-demo .notif{--k:clamp(0,(var(--p,1) - .2) / .15,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * -18px)) scale(calc(.97 + var(--k) * .03));transition:none}
.story .payout-demo .pass{--k:clamp(0,(var(--p,1) - .34) / .22,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 34px)) rotate(calc(-3deg + (1 - var(--k)) * 5deg))}
.story .payout-demo .payout-flow{--k:clamp(0,(var(--p,1) - .6) / .14,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 8px))}

/* ---------- The usual playbook is discounts: four reasons, in cards ---------- */
.personas .section-heading.centered{max-width:900px}
.personas .section-heading p{max-width:700px;margin-inline:auto}
.persona-grid.is-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.persona-grid.is-four .persona-card{min-height:280px;gap:32px;padding:24px}
.persona-grid.is-four .persona-card h3{font-size:20px;line-height:1.25}
.persona-grid.is-four .persona-card p{font-size:15px}
@media(max-width:1099px){.persona-grid.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}.persona-grid.is-four .persona-card{min-height:220px}}
@media(max-width:809px){.persona-grid.is-four{grid-template-columns:1fr}.persona-grid.is-four .persona-card{min-height:0;gap:24px}}

/* ---------- Coverage that scales with the campaign: the stack, how the risk moves, and the three numbers ---------- */
.diff-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.diff-head h2{font-size:52px;line-height:1.1}
.diff-intro p{font-size:18px}
.diff-intro .diff-line{margin-top:14px;font-weight:700;color:var(--ink)}
.diff-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:48px;padding:64px 56px 64px 40px;border-radius:32px;background:radial-gradient(60% 80% at 24% 50%,#efedea 0%,#efedea00 70%),linear-gradient(160deg,#f8f9ff,#f8f6f4 60%,#f5f3f0);box-shadow:inset 0 0 0 1px #ffffffe6,0 50px 110px -70px #1c191799}
.diff-panel::before{content:"";position:absolute;inset:0 42% 0 0;z-index:-1;background:repeating-linear-gradient(90deg,#ffffff00 0 26px,#ffffff8c 26px 28px,#1c191712 28px 54px);-webkit-mask-image:linear-gradient(90deg,#000 45%,#0000);mask-image:linear-gradient(90deg,#000 45%,#0000)}
.diff-stack{position:relative;display:grid;gap:14px;padding-right:64px}
.diff-layer{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:92px;width:calc(62% + var(--i) * 12%);margin-inline:auto;padding:0 20px;text-align:center;color:#fff}
.diff-layer::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;background:var(--slab);box-shadow:inset 0 1px 0 #ffffff4d,0 18px 30px -18px #1c19178c;transform:perspective(640px) rotateX(26deg)}
.diff-layer:nth-child(1){--slab:linear-gradient(180deg,#1c1917,#1c1917)}
.diff-layer:nth-child(2){--slab:linear-gradient(180deg,#1c1917,#1c1917)}
.diff-layer:nth-child(3){--slab:linear-gradient(180deg,#dbd9d6,#1c1917);color:var(--ink)}
.diff-layer:nth-child(4){--slab:linear-gradient(180deg,#f3f1ee,#e6e4e1);color:var(--ink)}
.diff-layer b{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.diff-layer b img{width:22px;height:22px}
.diff-layer span{font-size:13px;line-height:1.35;opacity:.88}
/* The bracket: from your campaign at the top down to COVR at the bottom. */
.diff-flow{position:absolute;top:46px;height:318px;left:calc(100% - 36px);width:0;border-right:1.5px solid #1c1917;pointer-events:none}
.diff-flow span{position:absolute;left:12px;top:50%;white-space:nowrap;font-size:12.5px;letter-spacing:.02em;color:#1c1917;writing-mode:vertical-rl;transform:translateY(-50%)}
.diff-arm{position:absolute;height:0;border-top:1.5px solid #1c1917;pointer-events:none}
.diff-arm.is-top{top:46px;left:calc((100% - 64px) * .81 + 6px);width:calc((100% - 64px) * .19 + 22px)}
.diff-arm.is-bottom{top:364px;left:calc((100% - 64px) * .99 + 6px);width:calc((100% - 64px) * .01 + 22px)}
.diff-arm.is-bottom::before{content:"";position:absolute;left:-2px;top:-5.5px;border:5px solid transparent;border-right:7px solid #1c1917;border-left:0}
.diff-stats{display:grid}
.diff-stat{display:grid;grid-template-columns:minmax(0,176px) minmax(0,1fr);gap:24px;align-items:start;padding:26px 0;border-top:1px solid #1c1a1714}
.diff-stat:first-child{padding-top:0;border-top:0}
.diff-stat:last-child{padding-bottom:0}
.diff-stat strong{font-weight:400;font-size:74px;line-height:.92;letter-spacing:-.05em;text-align:right;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.diff-stat h3{font-size:23px;line-height:1.2;letter-spacing:-.03em}
.diff-stat p{margin-top:8px;font-size:15px;line-height:1.55}
.js .diff-panel .diff-layer,.js .diff-panel .diff-stat{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * .12s)}
.js .diff-panel.visible .diff-layer,.js .diff-panel.visible .diff-stat{opacity:1;transform:none}
.diff-layer:nth-child(2),.diff-stat:nth-child(2){--d:1}
.diff-layer:nth-child(3),.diff-stat:nth-child(3){--d:2}
.diff-layer:nth-child(4){--d:3}
@media(max-width:1099px){.diff-head{grid-template-columns:1fr;gap:18px}.diff-panel{grid-template-columns:1fr;gap:44px;padding:48px 36px}.diff-stack{max-width:620px;width:100%;margin-inline:auto}}
@media(max-width:809px){.diff-head h2{font-size:34px}.diff-intro p{font-size:16px}
.diff-panel{margin-top:32px;padding:32px 18px;border-radius:24px}
.diff-stack{gap:12px;padding-right:44px}
.diff-layer{height:84px;padding:0 12px}
.diff-layer b{font-size:16px}
.diff-layer span{font-size:11.5px}
.diff-flow{top:42px;height:288px;left:calc(100% - 26px)}
.diff-flow span{left:9px;font-size:11px}
.diff-arm.is-top{top:42px;left:calc((100% - 44px) * .81 + 4px);width:calc((100% - 44px) * .19 + 14px)}
.diff-arm.is-bottom{top:330px;left:calc((100% - 44px) * .99 + 4px);width:calc((100% - 44px) * .01 + 14px)}
.diff-stat{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:22px 0}
.diff-stat strong{font-size:44px}
.diff-stat h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.js .diff-panel .diff-layer,.js .diff-panel .diff-stat{opacity:1;transform:none;transition:none}}

/* ---------- Built around your real revenue goals: three points under the words ---------- */
.int-points{display:grid;gap:16px;max-width:460px;margin:26px 0 0;padding:0;list-style:none}
.int-points li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.int-points .round-icon{width:40px;height:40px}
.int-points .round-icon .icon{width:19px;height:19px}
.int-points b{display:block;font-weight:400;font-size:17px;color:var(--ink)}
.int-points span:not(.round-icon){display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--muted)}

/* ---------- The offer gallery and the line for every business ---------- */
.examples .section-heading.centered{max-width:860px}
.bridge{max-width:720px;margin:56px auto 0;text-align:center}
.bridge h3{font-size:30px;line-height:1.2;letter-spacing:-.035em}
.bridge p{margin-top:12px;font-size:17px}
.bridge .bridge-list{margin-top:14px;font-size:14.5px;letter-spacing:.01em;color:var(--ink)}
@media(max-width:809px){.bridge{margin-top:40px}.bridge h3{font-size:24px}.bridge p{font-size:15.5px}}

/* ---------- Closing, and lines that end on a lone word ---------- */
.closing-copy{max-width:820px}
.closing-copy h2{text-wrap:balance}
.personas .section-heading p,.diff-intro p,.story-step p,.bridge p,.int-points span{text-wrap:pretty}
.personas h2,.examples h2,.diff-head h2{text-wrap:balance}
/* A heading's gradient phrase wraps as one balanced unit, so it never leaves a word alone on a line. */
h2 .grad-text{display:inline-block;text-wrap:balance}
@media(max-width:809px){.story-step h3{font-size:30px}}

/* =====================================================================================================
   Prototype 30 (appended to prototype 29's styles by scripts/build-p30.py)
   ===================================================================================================== */
/* ---------- How it works: action-first steps, with larger, clearer words ---------- */
.story-step h3{font-size:38px;line-height:1.14}
.story-step p{max-width:480px;margin-top:18px;font-size:20px;line-height:1.55;color:#42403c}
.covr-word{display:inline-flex;align-items:center;gap:.12em;font-family:Anton,sans-serif;font-size:.94em;letter-spacing:-.01em;vertical-align:-.03em;white-space:nowrap}
.covr-word img{width:.82em;height:.82em}
@media(max-width:809px){.story-step h3{font-size:28px}.story-step p{font-size:17.5px}}

/* ---------- Step 3: two bars, and a switch between the two situations ---------- */
.cov-demo,.pay-demo{position:relative;padding:22px 24px 18px;border-radius:24px;background:#ffffffe8;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.cov-head,.pay-head{display:flex;align-items:center;gap:12px}
.cov-head small,.pay-head small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.cov-head strong,.pay-head strong{display:block;margin-top:3px;font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.cov-sub{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.cov-sub b{font-weight:700;color:var(--ink)}
.cov-switch{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:9px 14px 9px 9px;border-radius:16px;background:#f9f7f4;border:1px solid #1c1a170f;font-size:15px;color:var(--ink);text-align:left;transition:background .4s,border-color .4s}
.cov-track{position:relative;flex:none;width:51px;height:31px;border-radius:99px;background:#dedcd8;box-shadow:inset 0 0 0 1px #1c1a170d;transition:background .35s}
.cov-track i{position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px #1c1a173d,0 1px 1px #1c1a171f;transition:transform .38s cubic-bezier(.3,1.35,.5,1)}
.cov-demo[data-on="1"] .cov-switch{background:#fff;border-color:#1c19175c}
.cov-demo[data-on="1"] .cov-track{background:#1c1917}
.cov-demo[data-on="1"] .cov-track i{transform:translateX(20px)}
.cov-chart{margin-top:16px}
.cov-axis{display:block;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.cov-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:6px;padding:0 8px}
.cov-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.cov-bar{position:relative;display:flex;align-items:flex-end;width:100%;max-width:150px;height:176px;margin-top:34px;border-bottom:1.5px solid #1c1a172e}
/* The bill rides on top of its bar; the fee is written on its own. */
.cov-val{position:absolute;left:50%;bottom:calc(1.2% + 6px);z-index:2;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;transform:translateX(-50%);transition:bottom .8s cubic-bezier(.2,.9,.2,1)}
.cov-demo[data-on="1"] .cov-val{bottom:calc(100% + 6px)}
.cov-fee{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;place-items:center;height:14%;font-size:11.5px;letter-spacing:.02em;color:#fff}
.cov-bar b{display:block;width:100%;height:100%;border-radius:12px 12px 4px 4px;transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.is-without .cov-bar b{background:linear-gradient(180deg,#5d5b58,#2c2a26);transform:scaleY(.012)}
.cov-demo[data-on="1"] .is-without .cov-bar b{transform:none}
.is-with .cov-bar b{position:relative;z-index:1;background:var(--grad);transform:scaleY(.14);box-shadow:0 12px 24px -14px #1c1917b3}
/* What COVR carries: the same $62,000, drawn as COVR's, not yours. */
.cov-covr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding-bottom:22%;border:1.5px dashed #1c191780;border-bottom:0;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#1c191712,#1c191724);font-size:12.5px;line-height:1.3;color:#1c1917;clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.2,.9,.2,1)}
.cov-demo[data-on="1"] .cov-covr{clip-path:inset(0)}
.cov-covr-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);box-shadow:0 8px 18px -8px #1c1917b3}
.cov-covr-mark img{filter:brightness(0) invert(1)}
.cov-col strong{margin-top:10px;font-weight:700;font-size:15px;color:var(--ink)}
.cov-note{display:grid;margin-top:2px;font-size:13px;color:var(--muted)}
.cov-note i{grid-area:1/1;font-style:normal;transition:opacity .35s}
.cov-note .is-on,.cov-demo[data-on="1"] .cov-note .is-off{opacity:0}
.cov-demo[data-on="1"] .cov-note .is-on{opacity:1}
.cov-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;background:#1c191712;font-size:13px;line-height:1.35;color:var(--ink)}
.cov-foot .icon{flex:none;width:16px;height:16px;color:#1c1917}
/* It builds in with the scroll before the switch flips. */
.story .cov-chart{--k:clamp(0,var(--p,1) / .16,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 14px))}
.story .cov-foot{--k:clamp(0,(var(--p,1) - .5) / .14,1);opacity:var(--k)}
@media(prefers-reduced-motion:reduce){.cov-bar b,.cov-covr,.cov-track,.cov-track i,.cov-note i,.cov-val{transition:none}}

/* ---------- Step 5: the payout, with the money's path through your ecosystem ---------- */
.pay-hit{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;color:#1c1917;white-space:nowrap}
.pay-hit .icon{width:15px;height:15px}
.pay-map{position:relative;margin-top:14px;aspect-ratio:520/250}
.pay-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pay-eco{fill:#1c1917;stroke:#1c1917;stroke-width:1.4;stroke-dasharray:5 5;--k:clamp(0,(var(--p,1) - .62) / .12,1);stroke-opacity:calc(.28 + var(--k) * .5);fill-opacity:calc(.03 + var(--k) * .05)}
.pay-lines .is-a{--k:clamp(0,(var(--p,1) - .06) / .18,1)}
.pay-lines .is-b{--k:clamp(0,(var(--p,1) - .3) / .16,1)}
.pay-lines .is-c{--k:clamp(0,(var(--p,1) - .5) / .18,1)}
.pay-arrow{fill:none;stroke:#1c1917;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k))}
.pay-head-a{fill:#1c1917;fill-opacity:clamp(0,(var(--k) - .85) * 7,1)}
.pay-node{position:absolute;left:calc(var(--x) / 520 * 100%);top:calc(var(--y) / 250 * 100%);display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-29px)}
.pay-dot{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 10px 24px -12px #1c191780,inset 0 0 0 1px #1c1a1712}
.pay-dot img{border-radius:50%}
.is-covr .pay-dot{background:var(--grad)}
.is-covr .pay-dot img{border-radius:0;filter:brightness(0) invert(1)}
.pay-faces{display:flex;justify-content:center}
.pay-faces svg{width:19px;height:19px;margin:0 -2px;fill:#1c19171f;stroke:#1c1917;stroke-width:1.7}
.pay-node b{font-weight:400;font-size:13px;color:var(--ink);white-space:nowrap}
.pay-node.is-team{--k:clamp(0,(var(--p,1) - .2) / .08,1);opacity:calc(.45 + var(--k) * .55)}
.pay-node.is-fans{--k:clamp(0,(var(--p,1) - .42) / .08,1);opacity:calc(.35 + var(--k) * .65)}
.pay-amt,.pay-eco-label{position:absolute;left:calc(var(--x) / 520 * 100%);top:calc(var(--y) / 250 * 100%);transform:translate(-50%,-50%);font-size:13px;line-height:1.2;color:#1c1917;white-space:nowrap}
.pay-amt{padding:2px 6px;border-radius:6px;background:#ffffffd9}
.pay-amt.is-a{--k:clamp(0,(var(--p,1) - .12) / .12,1);opacity:var(--k);font-size:15px}
.pay-amt.is-b{--k:clamp(0,(var(--p,1) - .34) / .12,1);opacity:var(--k)}
.pay-amt.is-c{--k:clamp(0,(var(--p,1) - .56) / .12,1);opacity:var(--k)}
.pay-eco-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;--k:clamp(0,(var(--p,1) - .62) / .12,1);opacity:calc(.3 + var(--k) * .7)}
.pay-eco-label .icon{width:15px;height:15px}
.pay-wallet{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 16px;border-radius:16px;background:linear-gradient(140deg,#1c1917,#0c2340 70%);color:#fff;box-shadow:0 18px 36px -22px #0c2340cc;--k:clamp(0,(var(--p,1) - .7) / .12,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 12px))}
.pay-wallet img{flex:none;border-radius:50%}
.pay-wallet small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#dad8d4}
.pay-wallet b{display:block;font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.03em}
.pay-wallet span{margin-left:auto;font-size:12.5px;line-height:1.35;text-align:right;color:#eae8e6}
@media(max-width:809px){.pay-dot{width:44px;height:44px}.pay-dot img{width:28px;height:28px}.is-covr .pay-dot img{width:20px;height:20px}.pay-node{transform:translate(-50%,-22px);gap:4px}.pay-node b,.pay-amt,.pay-eco-label{font-size:11px}.pay-amt.is-a{font-size:12.5px}.pay-head strong,.cov-head strong{font-size:18px}.cov-bar{height:140px;margin-top:30px}.cov-cols{gap:16px}}

/* ---------- Coverage that scales with the campaign: words and numbers left, the stack right, built by the scroll ---------- */
.diff-inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"copy panel" "stats panel";column-gap:64px;row-gap:30px;align-items:start}
.diff-copy{grid-area:copy;align-self:end}
.diff-copy h2{font-size:52px;line-height:1.1}
.diff-copy p{margin-top:18px;font-size:18px;text-wrap:pretty}
.diff-copy .diff-line{margin-top:12px;font-weight:700;color:var(--ink)}
.diff-inner .diff-stats{grid-area:stats}
.diff-inner .diff-stat{grid-template-columns:112px minmax(0,1fr);gap:18px;padding:18px 0}
.diff-inner .diff-stat:first-child{padding-top:4px}
.diff-inner .diff-stat strong{font-size:50px}
.diff-inner .diff-stat h3{font-size:20px}
.diff-inner .diff-stat p{margin-top:6px;font-size:14.5px}
.diff-inner .diff-panel{grid-area:panel;align-self:center;display:block;margin-top:0;padding:56px 36px 56px 30px}
.diff-inner .diff-panel::before{inset:0 30% 0 0}
.js .diff-inner .diff-layer{--k:clamp(0,(var(--p,1) - var(--i) * .13) / .18,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 22px));transition:none}
.js .diff-inner .diff-stat{--k:clamp(0,(var(--p,1) - (.08 + var(--d,0) * .12)) / .2,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 16px));transition:none}
.diff-inner .diff-flow{--k:clamp(0,(var(--p,1) - .2) / .5,1);clip-path:inset(0 -40px calc((1 - var(--k)) * 100%) -40px)}
.diff-inner .diff-arm.is-top{opacity:clamp(0,(var(--p,1) - .16) / .06,1)}
.diff-inner .diff-arm.is-bottom{opacity:clamp(0,(var(--p,1) - .68) / .06,1)}
.diff-inner .diff-layer:nth-child(4)::before{box-shadow:inset 0 1px 0 #ffffff4d,0 18px 30px -18px #1c19178c,0 0 0 calc(clamp(0,(var(--p,1) - .72) / .1,1) * 4px) #1c191740}
/* The risk, carried down the bracket from your campaign onto COVR. */
.diff-risk{--r:clamp(0,(var(--p,1) - .22) / .5,1);position:absolute;left:calc(100% - 36px);top:calc(46px + 318px * var(--r));display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:8px;background:#fff;box-shadow:0 8px 20px -10px #1c191799,inset 0 0 0 1px #1c191740;font-size:12px;font-weight:700;color:#1c1917;transform:translate(-50%,-50%);opacity:calc(clamp(0,(var(--p,1) - .2) / .05,1) * (1 - clamp(0,(var(--p,1) - .8) / .08,1)));pointer-events:none;white-space:nowrap}
.diff-risk .icon{width:14px;height:14px}
@media(max-width:1099px){.diff-inner{grid-template-columns:1fr;grid-template-areas:"copy" "panel" "stats";row-gap:28px}.diff-copy{align-self:start}.diff-inner .diff-panel{padding:44px 28px}.diff-inner .diff-stack{max-width:620px;margin-inline:auto}}
@media(max-width:809px){.diff-copy h2{font-size:34px}.diff-copy p{font-size:16px}.diff-inner .diff-panel{padding:32px 16px}.diff-risk{left:calc(100% - 26px);top:calc(42px + 288px * var(--r));font-size:11px;padding:4px 7px 4px 6px}.diff-inner .diff-stat{grid-template-columns:88px minmax(0,1fr);gap:14px}.diff-inner .diff-stat strong{font-size:40px}}

/* ---------- The Lynx case study: the photo on the left ---------- */
@media(min-width:810px){.case-photo{order:-1}}

/* ---------- The offer gallery, by industry ---------- */
.ind-tabs{display:flex;justify-content:center;gap:30px;width:max-content;max-width:100%;margin:-4px auto 30px;padding:0 4px;border-bottom:1px solid #1c1a171f;overflow-x:auto;scrollbar-width:none}
.ind-tabs::-webkit-scrollbar{display:none}
.ind-tabs button{position:relative;flex:none;padding:12px 2px 13px;background:none;font-size:16px;color:var(--muted);transition:color .25s}
.ind-tabs button:hover,.ind-tabs button[aria-selected="true"]{color:var(--ink)}
.ind-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transition:transform .35s var(--ease)}
.ind-tabs button[aria-selected="true"]::after{transform:none}
.ind-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:18px;max-width:calc(var(--n) * 290px);margin:0 auto}
.ind-grid:focus-visible{outline-offset:8px}
.ind-grid .play-card{animation:ind-in .55s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes ind-in{from{opacity:0;transform:translateY(14px)}}
@media(max-width:809px){.ind-tabs{justify-content:flex-start;gap:22px;width:auto;margin:-4px -16px 22px;padding:0 16px}.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(prefers-reduced-motion:reduce){.ind-grid .play-card{animation:none}}

/* =====================================================================================================
   Prototype 31 (appended to prototype 30's styles by scripts/build-p31.py)
   ===================================================================================================== */
/* ---------- Coverage that scales with the campaign: the campaign itself, played by the scroll ---------- */
.diff.section{padding-block:40px}
.diff-pin{padding-block:40px}
@media(min-width:960px) and (min-height:760px){
  .diff-track{height:240vh}
  .diff-pin{position:sticky;top:max(76px,calc(50vh - 350px))}
}
.diff-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy panel";align-items:center}
.diff-copy{align-self:center}
.diff-steps{display:grid;gap:4px;margin:26px 0 0;padding:0;list-style:none;counter-reset:step}
.diff-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:10px 0;border-top:1px solid #1c1a1712;opacity:.42;transition:opacity .45s}
.diff-steps li:first-child{border-top:0}
.diff-steps li::before{counter-increment:step;content:"0" counter(step);grid-row:span 2;padding-top:1px;font-family:Anton,sans-serif;font-size:18px;color:#a09e9a}
.diff-steps li.is-on{opacity:1}
.diff-steps li.is-on::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.diff-steps b{font-weight:400;font-size:17.5px;line-height:1.3;color:var(--ink)}
.diff-steps span{margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.scale-demo{position:relative;padding:22px 24px 20px;border-radius:26px;background:#ffffffeb;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 40px 90px -50px #1c191799}
.sc-head{display:flex;align-items:center;gap:12px}
.sc-head small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.sc-head strong{display:block;margin-top:3px;font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.sc-head span{margin-left:auto;font-size:12.5px;text-align:right;color:var(--muted)}
/* 1. You pick the trigger and the rate. */
.sc-picks{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px}
.sc-field{padding:10px 12px;border-radius:14px;background:#f9f7f4;border:1px solid #1c1a170f;transition:background .4s,border-color .4s,box-shadow .4s}
.sc-field small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-field>b{display:block;margin-top:4px;font-weight:400;font-size:16px;color:var(--ink)}
.scale-demo[data-phase="1"] .sc-field{background:#fff;border-color:#1c191766;box-shadow:0 0 0 4px #1c191717}
.sc-rates{display:flex;gap:3px;margin-top:5px;padding:3px;border-radius:10px;background:#1c1a170d}
.sc-rates button{min-width:48px;padding:5px 9px;border-radius:8px;background:none;font-size:13px;color:var(--muted);transition:background .25s,color .25s,box-shadow .25s}
.sc-rates button:hover{color:var(--ink)}
.sc-rates button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px #1c191759}
/* 2. Customers buy: sales rise, and what's covered rises with them. */
.sc-chart{position:relative;margin:18px 0 0;aspect-ratio:520/220}
.sc-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-grid line{stroke:#1c1a1712;stroke-width:1}
.sc-grid .is-base{stroke:#1c1a173d}
.sc-sales-area{fill:#5d5b58;fill-opacity:.1}
.sc-covered{fill:url(#sc-grad);transform-box:view-box;transform-origin:0 198px;transform:scaleY(var(--rate,.5));transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.sc-sales-line{fill:none;stroke:#2c2a26;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.sc-trigger{stroke:#1c1a1740;stroke-width:1.4;stroke-dasharray:4 4;transition:stroke .4s}
.scale-demo[data-phase="3"] .sc-trigger,.scale-demo[data-phase="4"] .sc-trigger{stroke:#1c1917}
.sc-dot{fill:#fff;stroke:#2c2a26;stroke-width:2.2}
.sc-y,.sc-x,.sc-key{position:absolute;font-size:11px;line-height:1;color:var(--muted);white-space:nowrap}
.sc-y{left:0;transform:translateY(-50%)}
.sc-x{top:calc(100% + 8px)}
.sc-x.is-end{right:0}
.sc-flag{position:absolute;right:0;top:-2px;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px #1c1a171f;font-size:11px;color:var(--muted);transform:translate(40%,-100%);transition:color .4s,box-shadow .4s}
.sc-flag .icon{width:13px;height:13px}
.scale-demo[data-phase="3"] .sc-flag,.scale-demo[data-phase="4"] .sc-flag{color:#1c1917;box-shadow:inset 0 0 0 1px #1c191766}
.sc-tip{position:absolute;left:clamp(90px,calc(var(--tx,1) * 100%),calc(100% - 120px));top:calc(var(--ty,.08) * 100%);padding:5px 9px;border-radius:8px;background:#1c1a17;color:#fff;font-size:12px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));pointer-events:none;transition:opacity .3s}
.scale-demo:not([data-phase="2"]) .sc-tip{opacity:0}
.sc-key{display:inline-flex;align-items:center;gap:6px}
.sc-key i{width:10px;height:10px;border-radius:3px;background:#5d5b5833;box-shadow:inset 0 0 0 1.5px #2c2a26}
.sc-key.is-covered i{background:var(--grad);box-shadow:none}
.sc-keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:26px}
.sc-keys .sc-key{position:static}
.sc-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.sc-counts div{padding:9px 11px;border-radius:12px;background:#f9f7f4}
.sc-counts small{display:block;font-size:11px;line-height:1.3;color:var(--muted)}
.sc-counts b{display:block;margin-top:2px;font-weight:400;font-size:18px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.sc-counts .is-covered b{color:#1c1917}
.sc-counts .is-upfront{background:#1c191714}
.sc-counts .is-upfront b{color:#1c1917}
/* 3 and 4. Game night: if the trigger hits, COVR funds the reward; if not, everyone keeps what they bought. */
.sc-outcome{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .5s var(--ease)}
.scale-demo[data-phase="3"] .sc-outcome,.scale-demo[data-phase="4"] .sc-outcome{opacity:1;transform:none}
.sc-outcome>div{padding:10px 12px;border-radius:12px;border:1px solid #1c1a1714;font-size:13px;line-height:1.4;color:var(--muted);transition:border-color .4s,background .4s,color .4s}
.sc-outcome small{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sc-outcome small .icon{width:13px;height:13px}
.sc-outcome b{font-weight:700;color:var(--ink)}
.scale-demo[data-phase="4"] .sc-hit{border-color:#1c191766;background:#1c19170d;color:var(--ink)}
.scale-demo[data-phase="4"] .sc-hit small{color:#1c1917}
.sc-foot{margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--muted)}
@media(max-width:1099px){.diff-inner{grid-template-columns:1fr;grid-template-areas:"copy" "panel"}.scale-demo{max-width:680px;width:100%;margin-inline:auto}}
@media(max-width:809px){.scale-demo{padding:16px 14px 16px}.sc-picks{grid-template-columns:1fr}.sc-head span{display:none}.sc-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-outcome{grid-template-columns:1fr}.sc-flag{transform:translate(20%,-100%)}.diff-steps b{font-size:16px}.diff-steps span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sc-covered,.sc-outcome,.sc-field,.diff-steps li{transition:none}}

.diff-inner .scale-demo{grid-area:panel}

/* =====================================================================================================
   Prototype 32 (appended to prototype 31's styles by scripts/build-p32.py)
   ===================================================================================================== */
/* ---------- Reward your fans: three plain rows, one line between them ---------- */
.pay-card{padding:26px 26px 20px;border-radius:24px;background:#ffffffeb;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.pc-head small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1c1917}
.pc-head small .icon{width:15px;height:15px}
.pc-head strong{display:block;margin-top:6px;font-weight:400;font-size:25px;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.pc-flow{margin:20px 0 0;padding:0;list-style:none}
.pc-flow li{--k:clamp(0,(var(--p,1) - (.06 + var(--i) * .22)) / .16,1);--next:clamp(0,(var(--p,1) - (.06 + (var(--i) + 1) * .22)) / .16,1);position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:start;gap:16px;padding:13px 0;opacity:calc(.12 + var(--k) * .88);transform:translateY(calc((1 - var(--k)) * 10px))}
.pc-flow li>div{padding-top:3px}
.pc-flow em{padding-top:7px}
/* The line runs from each icon down to the next one, whatever the rows' heights, and draws as the next row arrives. */
.pc-flow li:not(:last-child)::after{content:"";position:absolute;left:23px;top:65px;bottom:-9px;width:2px;border-radius:2px;background:#1c1917;transform-origin:top;transform:scaleY(var(--next))}
.pc-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 8px 20px -12px #1c191780,inset 0 0 0 1px #1c1a1712}
.pc-icon img{border-radius:50%}
.is-covr .pc-icon{background:var(--grad);box-shadow:0 10px 22px -12px #1c1917b3}
.is-covr .pc-icon img{border-radius:0;filter:brightness(0) invert(1)}
.is-eco .pc-icon{background:#f1efec;box-shadow:inset 0 0 0 1px #1c191733;color:#1c1917}
.pc-icon .icon{width:22px;height:22px}
.pc-flow b{display:block;font-weight:400;font-size:17.5px;line-height:1.3;color:var(--ink)}
.pc-flow li>div>span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.pc-flow em{font-style:normal;font-size:23px;letter-spacing:-.025em;color:#1c1917;white-space:nowrap}
.is-eco b{color:#1c1917}
@media(max-width:809px){.pay-card{padding:18px 16px 12px}.pc-head strong{font-size:20px}.pc-flow li{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}.pc-icon{width:40px;height:40px}.pc-icon img{width:28px;height:28px}.is-covr .pc-icon img{width:20px;height:20px}.pc-flow li:not(:last-child)::after{left:19px;top:57px}.pc-flow li>div{padding-top:1px}.pc-flow em{padding-top:5px}.pc-flow b{font-size:15.5px}.pc-flow li>div>span{font-size:12.5px}.pc-flow em{font-size:18px}}
/* On phones each picture sits in its step; it clips its own parts while they slide in, so the page never widens. */
@media(max-width:959px){.story-step .story-art{overflow:hidden}}

/* =====================================================================================================
   Prototype 33 (appended to prototype 32's styles by scripts/build-p33.py)
   ===================================================================================================== */
/* ---------- Coverage that scales with the campaign: one glass panel, to the point ---------- */
/* Soft brand light behind the glass, drifting a little as the section plays. */
.sg-orbs{grid-area:panel;position:relative;z-index:0;align-self:stretch;pointer-events:none}
.sg-orbs i{position:absolute;border-radius:50%;filter:blur(48px);opacity:.5}
.sg-orbs i:nth-child(1){width:50%;aspect-ratio:1;right:-6%;top:-8%;background:#1c1917;transform:translate(calc(var(--p,1) * -44px),calc(var(--p,1) * 34px))}
.sg-orbs i:nth-child(2){width:40%;aspect-ratio:1;left:2%;bottom:-10%;background:#1c1917;transform:translate(calc(var(--p,1) * 56px),calc(var(--p,1) * -24px))}
.sg-orbs i:nth-child(3){width:32%;aspect-ratio:1;right:22%;bottom:6%;background:#1c1917;opacity:.38;transform:translate(calc(var(--p,1) * -24px),calc(var(--p,1) * -36px))}
.scale-glass{grid-area:panel;position:relative;z-index:1;isolation:isolate;overflow:hidden;padding:24px 26px 22px;border-radius:30px;background:linear-gradient(150deg,#ffffffc2 0%,#ffffff5c 52%,#ffffff8f 100%);-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff99,0 40px 90px -50px #1c1917a6}
/* The glass: a bright sheen from the top left, a softer one at the bottom right, and a luminous edge. */
.scale-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(90% 55% at 10% 0%,#ffffffd9,#fff0 55%),radial-gradient(70% 45% at 100% 100%,#ffffff8c,#fff0 60%);pointer-events:none}
.scale-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(140deg,#fff,#ffffff2e 38%,#ffffff1f 62%,#ffffffe6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sg-glass-chip{border-radius:16px;background:#ffffff99;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffc7,0 10px 24px -18px #1c191766;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* 1. The offer. */
.sg-offer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;transition:box-shadow .4s}
.sg-offer span{display:inline-flex;align-items:center;gap:9px;font-size:16px;color:var(--ink)}
.sg-offer span .icon{width:18px;height:18px;color:#1c1917}
.sg-offer b{font-weight:400;font-size:16px;color:#1c1917;white-space:nowrap}
.scale-glass[data-phase="1"] .sg-offer{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #1c191773,0 0 0 5px #1c19171f,0 10px 24px -18px #1c191766}
/* 2. Sales, and what's covered, counting up together. */
.sg-nums{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.sg-nums div{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:10px;align-items:center}
.sg-nums i{grid-row:span 2;align-self:start;margin-top:12px;width:12px;height:12px;border-radius:4px;background:#2c2a2626;box-shadow:inset 0 0 0 2px #2c2a26}
.sg-nums .is-covered i{background:var(--grad);box-shadow:none}
.sg-nums b{font-weight:400;font-size:42px;line-height:1.05;letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.sg-nums .is-covered b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-nums small{margin-top:4px;font-size:13.5px;color:var(--muted)}
.sg-chart{position:relative;margin-top:18px;aspect-ratio:520/200}
.sg-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sg-base{stroke:#1c1a1738;stroke-width:1}
.sg-sales-area{fill:#2c2a26;fill-opacity:.07}
.sg-covered{fill:url(#sg-grad);transform-box:view-box;transform-origin:0 184px;transform:scaleY(.5)}
.sg-covered-edge{fill:none;stroke:#fff;stroke-width:2;stroke-opacity:.9;transform-box:view-box;transform-origin:0 184px;transform:scaleY(.5)}
.sg-sales-line{fill:none;stroke:#2c2a26;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.sg-trigger{stroke:#1c1a1740;stroke-width:1.4;stroke-dasharray:4 4;transition:stroke .4s}
.scale-glass[data-phase="3"] .sg-trigger,.scale-glass[data-phase="4"] .sg-trigger{stroke:#1c1917}
.sg-dot{fill:#fff;stroke:#2c2a26;stroke-width:2.4}
.sg-upfront{position:absolute;left:0;top:2%;padding:6px 10px;border-radius:10px;font-size:13px;color:#1c1917}
.sg-upfront b{font-weight:700}
.sg-x{position:absolute;top:calc(100% + 10px);font-size:12px;color:var(--muted);white-space:nowrap}
.sg-x.is-start{left:0}
.sg-x.is-end{right:0}
/* 3 and 4. Game night. */
.sg-end{display:flex;align-items:center;gap:10px;margin-top:40px;padding:13px 16px;font-size:14.5px;line-height:1.4;color:var(--muted);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .5s var(--ease),box-shadow .4s}
.sg-end .icon{flex:none;width:19px;height:19px;color:#1c1917}
.sg-end b{font-weight:700;color:var(--ink)}
.scale-glass[data-phase="3"] .sg-end,.scale-glass[data-phase="4"] .sg-end{opacity:1;transform:none}
.scale-glass[data-phase="4"] .sg-end{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #1c191766,0 0 0 4px #1c191714,0 10px 24px -18px #1c191766}
@media(max-width:1099px){.scale-glass{max-width:640px;width:100%;margin-inline:auto}}
@media(max-width:809px){.scale-glass{padding:18px 16px;border-radius:24px}.sg-offer span,.sg-offer b{font-size:14px}.sg-nums{gap:12px;margin-top:18px}.sg-nums b{font-size:28px}.sg-nums small{font-size:12px}.sg-nums i{margin-top:8px}.sg-end{margin-top:34px;font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.sg-end,.sg-offer,.sg-trigger{transition:none}}
/* The light behind the glass may reach past the screen's edge; the section clips it sideways (clip, not hidden, so
   the pinned panel still sticks). */
.diff.section{overflow-x:clip}

/* =====================================================================================================
   Prototype 34 (appended to prototype 33's styles by scripts/build-p34.py)
   ===================================================================================================== */
/* ---------- Coverage that scales with the campaign: a dial for how much COVR covers ---------- */
.sg-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:20px}
.sg-row .sg-nums{margin-top:0}
.sg-dial-wrap{display:grid;justify-items:center;gap:8px}
.sg-dial{position:relative;width:116px;height:116px;border-radius:50%;cursor:grab;touch-action:none;background:radial-gradient(circle at 50% 32%,#ffffffeb,#ffffff8c 62%,#ffffff59);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffd9,0 14px 30px -18px #1c19178c;transition:box-shadow .3s}
.sg-dial:focus-visible{outline:2px solid #1c1917;outline-offset:4px}
.sg-dial.is-dragging{cursor:grabbing}
.scale-glass[data-phase="1"] .sg-dial{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #1c191766,0 0 0 6px #1c19171a,0 14px 30px -18px #1c19178c}
.sg-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sg-dial-track,.sg-dial-fill{fill:none;stroke-width:9;transform-box:view-box;transform-origin:60px 60px;transform:rotate(-90deg)}
.sg-dial-track{stroke:#1c1a1714}
.sg-dial-fill{stroke:url(#sg-dial-grad);stroke-linecap:round;transition:stroke-dasharray .2s ease-out}
.sg-dial-knob{transform-box:view-box;transform-origin:60px 60px;transition:transform .2s ease-out}
.sg-dial-knob circle{fill:#fff;stroke:#1c1917;stroke-width:3;filter:drop-shadow(0 3px 5px #1c191759)}
.sg-dial-read{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;pointer-events:none}
.sg-dial-read b{font-weight:400;font-size:27px;line-height:1;letter-spacing:-.035em;color:var(--ink)}
.sg-dial-read small{margin-top:3px;font-size:11.5px;color:var(--muted)}
.sg-dial-hint{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.sg-dial-hint .icon{width:13px;height:13px}
.sg-covered,.sg-covered-edge{transform:scaleY(var(--rate,.5));transition:transform .25s ease-out}
@media(max-width:809px){.sg-row{gap:14px}.sg-dial{width:92px;height:92px}.sg-dial-read b{font-size:21px}.sg-row .sg-nums{grid-template-columns:1fr;gap:10px}.sg-dial-hint{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.sg-dial-fill,.sg-dial-knob,.sg-covered,.sg-covered-edge{transition:none}}

/* ---------- How it works, step 3: build the campaign, then share it everywhere ---------- */
.bs-demo{padding:20px 22px 18px;border-radius:24px;background:#ffffffe8;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.bs-creative{display:grid;grid-template-columns:44% minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:18px;background:#fff;box-shadow:0 16px 34px -24px #1c19178c,inset 0 0 0 1px #1c1a1712}
.bs-hero{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0c2340}
.bs-hero img{width:100%;height:100%;object-fit:cover}
.bs-hero span{position:absolute;left:7px;bottom:7px;padding:3px 7px;border-radius:6px;background:#0c2340e6;color:#fff;font-size:10px}
.bs-copy small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.bs-copy h4{margin-top:6px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:27px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#0c2340}
.bs-copy p{margin-top:8px;font-size:12.5px;line-height:1.45;color:#3c3a37}
.bs-copy mark{padding:0 2px;border-radius:3px;background:#1c191726;box-shadow:0 0 0 1.5px #1c1917;color:#0c2340}
.bs-share{margin-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bs-demo .ld-list{margin-top:8px}
.bs-demo .ld-list li{padding:9px 10px 9px 12px}
.bs-demo .ld-list li img{width:34px;height:34px}
.bs-demo .ld-list b{font-size:14.5px}
.bs-demo .ld-btn{min-width:104px;height:34px}
.bs-demo .ld-foot{margin-top:12px}
/* With the scroll: the draft appears and marks its trigger event, then each tool takes it. */
.story .bs-creative{--k:clamp(0,var(--p,1) / .2,1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 16px))}
.story .bs-copy mark{--k:clamp(0,(var(--p,1) - .16) / .12,1);background:rgb(36 89 245 / calc(var(--k) * .15));box-shadow:0 0 0 calc(var(--k) * 1.5px) #1c1917}
.story .bs-demo .ld-list li{--k:clamp(0,(var(--p,1) - (.32 + var(--i) * .17)) / .08,1)}
.story .bs-demo .ld-bar i{transform:scaleX(clamp(0,(var(--p,1) - .3) / .56,1))}
@media(max-width:809px){.bs-demo{padding:14px 12px 12px}.bs-creative{grid-template-columns:1fr;gap:10px}.bs-copy h4{font-size:23px}}

/* ---------- Connect your existing vendors: the COVR engine ---------- */
.integrations .section-heading.centered{max-width:860px}
.integrations .section-heading p{max-width:700px;margin-inline:auto}
.engine{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 88px 240px 88px minmax(0,1fr);grid-template-areas:"la . lb . lc" "src win core wout out";column-gap:0;row-gap:14px;align-items:center;margin-top:44px;padding:30px 30px 34px;border-radius:32px;background:linear-gradient(150deg,#ffffffb8,#ffffff59 55%,#ffffff85);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff99,0 40px 90px -60px #1c1917a6}
.engine::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(40% 70% at 50% 50%,#1c191726,#1c191700 70%),radial-gradient(30% 50% at 12% 20%,#1c19171f,#1c191700 70%),radial-gradient(30% 50% at 88% 80%,#1c19171f,#1c191700 70%)}
.eng-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1c1917}
.eng-label.is-a{grid-area:la}
.eng-label.is-b{grid-area:lb;justify-self:center}
.eng-label.is-c{grid-area:lc}
.eng-sources{grid-area:src;display:grid;gap:10px}
.eng-group{display:flex;align-items:center;justify-content:space-between;gap:10px;height:76px;padding:0 14px;border-radius:18px;background:#ffffffb3;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffd9,0 10px 24px -20px #1c191773}
.eng-group span{font-size:13.5px;color:var(--ink)}
.eng-group div{display:flex;gap:6px}
.eng-group img{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 4px 10px -6px #1c191766,inset 0 0 0 1px #1c1a170f}
.eng-wires{align-self:stretch;width:100%;height:100%;overflow:visible}
.eng-wires.is-in{grid-area:win}
.eng-wires.is-out{grid-area:wout}
.eng-base{fill:none;stroke:#1c1917;stroke-opacity:.18;stroke-width:1.5;vector-effect:non-scaling-stroke}
.eng-flow{fill:none;stroke:#1c1917;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 12;vector-effect:non-scaling-stroke;animation:eng-flow 1.6s linear infinite;animation-delay:var(--d,0s)}
@keyframes eng-flow{to{stroke-dashoffset:-28}}
.eng-core{grid-area:core;position:relative;display:grid;place-items:center;height:100%}
.eng-orb{position:relative;display:grid;place-items:center;width:164px;height:164px;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff,#ffffffb3 42%,#f1efec8c 75%,#e5e3e066);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffe6,inset 0 -14px 30px -10px #1c191733,0 30px 60px -28px #1c1917b3}
.eng-orb img{width:54px;height:54px}
.eng-ring{position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,#1c191700 0deg,#1c1917 70deg,#1c191700 150deg,#1c1917 250deg,#1c191700 330deg);-webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));animation:eng-spin 5s linear infinite}
@keyframes eng-spin{to{transform:rotate(360deg)}}
.eng-signals{position:absolute;left:50%;top:calc(50% + 100px);width:max-content;font-size:12.5px;line-height:1.5;text-align:center;color:var(--muted);transform:translateX(-50%)}
.eng-output{grid-area:out;display:grid;gap:10px}
.eng-row{display:flex;flex-direction:column;justify-content:center;gap:3px;height:76px;padding:0 16px;border-radius:18px;background:#ffffffc7;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffd9,0 10px 24px -20px #1c191773}
.eng-row span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1c1917}
.eng-row b{font-weight:400;font-size:14.5px;line-height:1.3;color:var(--ink)}
.js .engine .eng-group,.js .engine .eng-row{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.js .engine .eng-group{transition-delay:calc(var(--i) * 90ms)}
.js .engine .eng-row{transition-delay:calc(.7s + var(--i) * 140ms)}
.js .engine.visible .eng-group,.js .engine.visible .eng-row{opacity:1;transform:none}
.motion-paused .eng-flow,.motion-paused .eng-ring{animation-play-state:paused}
@media(max-width:1099px){
  .engine{grid-template-columns:1fr;grid-template-areas:"la" "src" "lb" "core" "lc" "out";row-gap:12px;padding:24px 18px 26px;max-width:640px;margin-inline:auto}
  .eng-wires{display:none}
  .eng-sources{grid-template-columns:1fr 1fr}
  .eng-group{flex-direction:column;justify-content:center;align-items:flex-start;height:auto;padding:12px}
  .eng-label{margin-top:10px}
  .eng-label.is-b{justify-self:start}
  .eng-core{height:auto;padding:10px 0 64px}
  .eng-core::before,.eng-core::after{content:"";position:absolute;left:50%;width:2px;height:22px;background:linear-gradient(#1c191700,#1c1917);transform:translateX(-50%)}
  .eng-core::before{top:-26px}
  .eng-core::after{bottom:0}
  .eng-orb{width:128px;height:128px}
  .eng-orb img{width:44px;height:44px}
  .eng-signals{top:auto;bottom:28px}
  .eng-row{height:auto;padding:12px 14px}
}
@media(max-width:809px){.eng-group img{width:34px;height:34px}.eng-group span{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.eng-flow,.eng-ring{animation:none}.js .engine .eng-group,.js .engine .eng-row{opacity:1;transform:none;transition:none}}
/* On phones the pictures sit inside their steps, so the step's paragraph style would reach the pictures' own lines;
   these keep their sizes. */
.story .cov-sub{max-width:none;margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.story .cov-foot{max-width:none;margin-top:14px;font-size:13px;line-height:1.35;color:var(--ink)}
.story .bs-copy p{max-width:none;margin-top:8px;font-size:12.5px;line-height:1.45;color:#3c3a37}
.story .bs-demo .bs-share{max-width:none;margin-top:16px;font-size:11.5px;line-height:1.3;color:var(--muted)}
.story .seat-insight p{max-width:none;margin-top:0;line-height:1.45;color:var(--ink)}

/* =====================================================================================================
   Prototype 35 (appended to prototype 34's styles by scripts/build-p35.py)
   ===================================================================================================== */
/* ---------- Coverage that scales with the campaign: the dial on the card's corner, two tickers, one line ---------- */
.diff-copy{align-self:center}
.scale-glass{overflow:visible;padding-top:26px}
/* The dial sits on the card's top right corner and reaches past it, glass on glass, with a slow pulse until it's turned. */
.scale-glass .sg-dial-wrap{position:absolute;top:-36px;right:-36px;z-index:3;display:grid;justify-items:center;gap:8px}
.scale-glass .sg-dial{width:144px;height:144px;background:radial-gradient(circle at 50% 30%,#fffffff2,#ffffffb8 60%,#ffffff8c);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffe6,0 0 0 8px #ffffff59,0 26px 50px -22px #1c1917b3}
.scale-glass .sg-dial::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid #1c191766;pointer-events:none;animation:sg-pulse 2.4s ease-out infinite}
.scale-glass .sg-dial.is-touched::after{animation:none;opacity:0}
@keyframes sg-pulse{0%{transform:scale(.9);opacity:.95}100%{transform:scale(1.2);opacity:0}}
.scale-glass .sg-dial-read b{font-size:32px}
.scale-glass .sg-dial-read small{font-size:12px}
.scale-glass .sg-dial-hint{padding:4px 9px;border-radius:8px;background:#ffffffb3;box-shadow:inset 0 0 0 1px #ffffffd9}
.motion-paused .scale-glass .sg-dial::after{animation-play-state:paused}
/* Two tickers, told apart at a glance: sales in navy, what COVR covers in the gradient. */
.sg-tickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-right:124px}
.tk{padding:13px 15px 15px;border-radius:18px;color:#fff}
.tk.is-sales{background:linear-gradient(160deg,#403e3c,#211f1c);box-shadow:inset 0 1px 0 #ffffff21,0 18px 32px -22px #1c1a17cc}
.tk.is-covered{background:var(--grad);box-shadow:inset 0 1px 0 #ffffff4d,0 18px 32px -20px #1c1917cc}
.tk small{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.2;color:#ffffffd1;white-space:nowrap}
.tk small .icon{width:14px;height:14px;color:#1c1917}
.tk small img{width:15px;height:15px;filter:brightness(0) invert(1)}
.tk-num{display:flex;align-items:flex-start;height:1em;margin-top:8px;overflow:hidden;font-weight:400;font-size:36px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tk-d{display:block;height:1em;overflow:hidden}
.tk-d i{display:flex;flex-direction:column;font-style:normal;transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.tk-d em{display:block;height:1em;font-style:normal}
.tk-s{display:block;font-variant-numeric:normal;padding:0 .02em}
/* The covered part of the chart matches its ticker. */
.sg-chart{margin-top:22px}
/* One line at the bottom: what COVR pays if the Wolves win, as of this point in the campaign. */
.sg-pill{display:flex;align-items:center;gap:12px;max-width:none;margin-top:42px;padding:9px 20px 9px 9px;border-radius:99px;background:#ffffffb8;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffd9,0 14px 30px -20px #1c19178c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:15.5px;line-height:1.35;color:var(--ink);transition:box-shadow .4s}
.sg-pill-mark{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--grad)}
.sg-pill-mark img{width:18px;height:18px;filter:brightness(0) invert(1)}
.sg-pill b{font-weight:700;color:#1c1917}
.scale-glass[data-phase="4"] .sg-pill{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #1c191766,0 0 0 4px #1c191717,0 14px 30px -20px #1c19178c}
@media(max-width:1099px){.scale-glass{margin-top:34px}}
@media(max-width:809px){
  .scale-glass .sg-dial-wrap{top:-26px;right:-10px}
  .scale-glass .sg-dial{width:104px;height:104px}
  .scale-glass .sg-dial-read b{font-size:24px}
  .scale-glass .sg-dial-hint{font-size:10px;padding:3px 7px}
  .sg-tickers{grid-template-columns:1fr;margin-right:104px;gap:8px}
  .tk{padding:10px 12px 12px}
  .tk-num{font-size:27px}
  .sg-pill{margin-top:36px;border-radius:22px;padding:9px 14px 9px 9px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.tk-d i{transition:none}.scale-glass .sg-dial::after{animation:none;opacity:0}}

/* ---------- The COVR engine: each part of the campaign with its icon ---------- */
.eng-output .eng-row{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:0 14px}
.eng-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.eng-row>div>span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1c1917}
.eng-row .eng-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#1c191714;color:#1c1917;letter-spacing:0}
.eng-row .eng-ic .icon{width:19px;height:19px}
.eng-row .eng-ic.is-covr{background:var(--grad)}
.eng-row .eng-ic.is-covr img{width:19px;height:19px;filter:brightness(0) invert(1)}
.eng-row>div>span{display:flex;align-items:center;gap:8px}
.eng-row .eng-apps{display:inline-flex;padding-left:4px}
.eng-row .eng-apps img{width:20px;height:20px;margin-left:-4px;border-radius:6px;background:#fff;box-shadow:0 0 0 1.5px #fff,0 3px 8px -5px #1c191780}

/* ---------- How it works: the words hold still while each picture plays, then move on ---------- */
/* Each step is taller than its words. The words sit in a box that sticks in the middle of the screen (20% to 80% of
   its height) for the part of the step's scroll where its picture plays, then scroll away as the next step's words
   arrive behind them. The longest hold is the stadium, which has the most to watch. */
@media(min-width:960px){
  .story-steps{padding:0 0 12vh}
  .story-step{display:block;min-height:0;height:var(--h,115vh)}
  .story-step[data-step="0"]{--h:140vh}
  .story-step[data-step="1"]{--h:115vh}
  .story-step[data-step="2"]{--h:115vh}
  .story-step[data-step="3"]{--h:105vh}
  .story-copy{position:sticky;top:20vh;height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
}

/* ---------- Skip the discount: one large statement, left aligned, reading itself in word by word ---------- */
.statement{max-width:1060px;font-size:48px;line-height:1.22;letter-spacing:-.03em;color:var(--ink);text-wrap:pretty}
.statement .sw{display:inline-block;--k:clamp(0,(var(--p,1) * (var(--n) + 1.6) - var(--w)) / 1.6,1);opacity:calc(.14 + var(--k) * .86);transform:translateY(calc((1 - var(--k)) * .16em))}
.statement .sw.is-key{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement-section .persona-grid{margin-top:64px}
@media(max-width:1099px){.statement{font-size:38px}}
@media(max-width:809px){.statement{font-size:28px;line-height:1.28}.statement-section .persona-grid{margin-top:40px}}

/* ---------- Build and share: each tool's card holds what it sends ---------- */
.bs-demo .bs-list{margin-top:10px}
.bs-demo .bs-list li{grid-template-columns:36px minmax(0,1fr) 142px;grid-template-rows:auto 1fr;align-items:start;column-gap:12px;row-gap:8px;padding:10px 10px 10px 12px}
.bs-demo .bs-list li>img{grid-row:1;width:36px;height:36px}
.bs-demo .bs-list li>div{grid-column:2;grid-row:1;padding-top:2px}
.bs-demo .bs-list .ld-btn{grid-column:2;grid-row:2;justify-self:start;align-self:end;min-width:100px;height:32px}
.bs-demo .bs-list .bs-pv{grid-column:3;grid-row:1 / span 2;position:relative;display:block;height:94px;overflow:hidden;border-radius:12px;box-shadow:0 8px 18px -12px #1c191780,inset 0 0 0 1px #1c1a171a;font-size:8.5px;color:#13110e}
/* The list's own rules would shrink these pictures to round icons and enlarge their words; these keep them. */
.bs-demo .bs-list .bs-pv img{width:100%;border-radius:0;box-shadow:none}
.bs-demo .bs-list .pv-email{background:#fff}
.bs-demo .bs-list .pv-email img{display:block;height:39px;object-fit:cover;object-position:50% 30%}
.bs-demo .bs-list .pv-email b{display:block;padding:6px 8px 0;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:12.5px;line-height:1;text-transform:uppercase;color:#0c2340}
.bs-demo .bs-list .pv-email i{position:absolute;left:8px;bottom:7px;padding:2px 7px;border-radius:99px;background:#236192;color:#fff;font-size:7.5px;font-style:normal}
.bs-demo .bs-list .pv-sms{padding:7px 8px;background:#f6f4f2}
.bs-demo .bs-list .pv-sms small{display:block;font-size:7.5px;color:#92908e;text-align:center}
.bs-demo .bs-list .pv-sms span{display:block;margin-top:5px;padding:6px 8px;border-radius:12px 12px 12px 4px;background:#eae8e4;font-size:8.5px;line-height:1.3;color:#13110e}
.bs-demo .bs-list .pv-ig{background:#0c2340}
.bs-demo .bs-list .pv-ig img{height:100%;object-fit:cover;object-position:46% 35%}
.bs-demo .bs-list .pv-ig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c234000 30%,#0c2340e6 92%)}
.bs-demo .bs-list .pv-ig b{position:absolute;left:8px;bottom:17px;z-index:1;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:13px;line-height:1;text-transform:uppercase;color:#fff}
.bs-demo .bs-list .pv-ig small{position:absolute;left:8px;bottom:6px;z-index:1;font-size:7.5px;color:#ffffffd9}
/* Each preview comes up as its tool takes it. */
.story .bs-pv{opacity:calc(.3 + var(--k) * .7);transform:scale(calc(.94 + var(--k) * .06))}
@media(max-width:809px){.bs-demo .bs-list li{grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto}.bs-demo .bs-list .ld-btn{grid-row:2}.bs-demo .bs-list .bs-pv{grid-column:1 / -1;grid-row:3;height:110px}.bs-demo .bs-list .pv-email img{height:56px}.bs-demo .bs-list .pv-sms{height:auto}}

/* =====================================================================================================
   Prototype 35, second update
   ===================================================================================================== */
/* ---------- Skip the discount: the key words in bold, and the four cards come in once the words are done ---------- */
.statement .sw.is-key{font-weight:700}
.statement-section .persona-card{opacity:var(--c,1);translate:0 calc((1 - var(--c,1)) * 56px);scale:calc(.965 + var(--c,1) * .035)}

/* ---------- Set your goal: the goal in one pill, with a target ---------- */
.story .seat-head{align-items:center;flex-wrap:wrap;row-gap:8px}
.seat-pill{display:inline-flex;align-items:center;gap:10px;min-width:0;padding:5px 16px 5px 5px;border-radius:99px;background:#fff;box-shadow:0 12px 26px -18px #1c19178c,inset 0 0 0 1px #1c1a1712}
.seat-pill-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 6px 14px -8px #1c1917b3}
.seat-pill-ic .icon{width:20px;height:20px}
.seat-pill-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.seat-pill-label::after{content:"";width:1px;height:16px;background:#1c1a1724}
.seat-pill b{font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
@media(max-width:809px){
  .seat-pill{gap:7px;padding-right:12px}
  .seat-pill-ic{width:28px;height:28px}
  .seat-pill-ic .icon{width:17px;height:17px}
  .seat-pill-label{gap:7px;font-size:11.5px}
  .seat-pill b{font-size:14px}
}

/* ---------- Reward your fans: the loop ---------- */
/* Four steps sit on a ring: the trigger event, COVR paying the team, fans redeeming the reward, and fans spending it
   with the team. The team sits in the middle, because the money never leaves it. The scroll draws the ring from each
   step to the next, and each step lights up as the ring reaches it. The sizes follow the card's own width. */
.loop-demo{container-type:inline-size;width:100%;padding:26px 22px 24px;border-radius:24px;background:#ffffffeb;border:1px solid #ffffffe6;box-shadow:inset 0 1px 0 #fff,0 26px 56px -32px #1c191773}
.loop-map{--off:104px;--ir:32px;--r:calc(var(--off) * 1.4142);display:grid;grid-template-columns:repeat(2,calc(var(--off) * 2));grid-template-rows:auto calc(var(--off) * 2 - var(--ir) * 2) auto;justify-content:center}
.loop-node{--k:clamp(0,(var(--p,1) - (.03 + var(--i) * .24)) / .1,1);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 8px;text-align:center}
.loop-node.at-tl{grid-area:1 / 1;align-self:end}
.loop-node.at-tr{grid-area:1 / 2;align-self:end}
.loop-node.at-br{grid-area:3 / 2;align-self:start}
.loop-node.at-bl{grid-area:3 / 1;align-self:start}
.loop-node.at-tl .loop-txt,.loop-node.at-tr .loop-txt{order:-1}
.loop-txt{opacity:calc(.22 + var(--k) * .78);transform:translateY(calc((1 - var(--k)) * 6px))}
.loop-txt b{display:block;font-weight:700;font-size:16px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.loop-txt span{display:block;margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.loop-txt span b{display:inline;font-size:inherit;letter-spacing:0;color:#1c1917}
.loop-ic{position:relative;display:grid;place-items:center;width:calc(var(--ir) * 2);height:calc(var(--ir) * 2);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 12px 26px -14px #1c19178c,inset 0 0 0 1px #1c1a1714;scale:calc(.84 + var(--k) * .16);filter:grayscale(calc(1 - var(--k)));opacity:calc(.45 + var(--k) * .55)}
.loop-ic .icon{width:calc(var(--ir) * .9);height:calc(var(--ir) * .9)}
.loop-ic img{width:calc(var(--ir) * .8);height:calc(var(--ir) * .8);filter:brightness(0) invert(1)}
.loop-ic i{position:absolute;top:-3px;right:-5px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:11.5px;font-style:normal;font-weight:700;box-shadow:0 0 0 2.5px #fff}
.loop-node.is-win .loop-ic{background:#f1efec;color:#1c1917;box-shadow:0 12px 26px -14px #1c191799,inset 0 0 0 1px #1c191733}
.loop-node.is-covr .loop-ic{background:var(--grad);box-shadow:0 14px 28px -12px #1c1917b3}
.loop-node.is-redeem .loop-ic{color:#1c1917}
.loop-node.is-spend .loop-ic{color:#1c1917}
/* The ring and its arrows, centred between the two rows of steps. */
.loop-hub{grid-area:2 / 1 / 3 / 3;position:relative;display:grid;place-items:center}
.loop-arcs{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2 * 200 / 180);height:calc(var(--r) * 2 * 200 / 180);translate:-50% -50%;overflow:visible;pointer-events:none}
.loop-ring{fill:none;stroke:#ebe9e6;stroke-width:1.3}
.loop-arc{--d:clamp(0,(var(--p,1) - (.12 + var(--i) * .24)) / .15,1);fill:none;stroke:url(#loop-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--d))}
.loop-head{--d:clamp(0,(var(--p,1) - (.12 + var(--i) * .24)) / .15,1);fill:#1c1917;fill-opacity:clamp(0,(var(--d) - .82) * 6,1)}
/* The middle: the team, and where the money stays. */
.loop-core{--c:clamp(0,(var(--p,1) - .84) / .14,1);position:relative;z-index:1;display:grid;justify-items:center;gap:6px;max-width:calc(var(--r) * 1.3);text-align:center}
.loop-core img{width:52px;height:52px;border-radius:50%;box-shadow:0 10px 24px -12px #0c234099;opacity:calc(.55 + var(--c) * .45)}
.loop-core b{display:block;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em;color:#1c1917;opacity:calc(.35 + var(--c) * .65)}
.loop-core span{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);opacity:calc(.35 + var(--c) * .65)}
@container (max-width:470px){
  .loop-map{--off:84px;--ir:26px}
  .loop-node{gap:9px}
  .loop-txt b{font-size:14.5px}
  .loop-txt span{font-size:12.5px}
  .loop-core img{width:44px;height:44px}
  .loop-core b{font-size:15px}
  .loop-core span{font-size:11.5px}
}
@container (max-width:330px){
  .loop-map{--off:61px;--ir:20px}
  .loop-node{gap:7px;padding:0 5px}
  .loop-txt b{font-size:12.5px}
  .loop-txt span{font-size:11px}
  .loop-ic i{width:18px;height:18px;font-size:10px;top:-4px;right:-6px}
  .loop-core{gap:3px}
  .loop-core img{width:30px;height:30px}
  .loop-core b{font-size:12.5px}
  .loop-core span{display:none}
}
@media(max-width:809px){.loop-demo{padding:18px 12px 16px}}
@media(min-width:960px){.story-step[data-step="3"]{--h:125vh}}

/* =====================================================================================================
   Prototype 35, third update
   ===================================================================================================== */
/* ---------- The statement: a line space before "With COVR" ---------- */
.statement .sw-gap{display:block;height:.6em}

/* ---------- Set a goal & pick your audience ---------- */
/* The scroll plays it: the goal types into a box in the middle of the card (0 to .24), the box rises to the top as the
   goal (.27 to .37), the arena comes up (.33 to .46), a scan sweeps it (.44 to .66), and the upper corners light up
   (.68) with what COVR found pinned over them (.71 to .79). Without the scroll (reduced motion) it shows the end. */
.story .seat-demo{position:relative;--rise:clamp(0,(var(--p,1) - .27) / .1,1);--show:clamp(0,(var(--p,1) - .33) / .13,1);--call:clamp(0,(var(--p,1) - .71) / .08,1)}
.story .seat-head{opacity:clamp(0,(var(--p,1) - .31) / .07,1)}
.story .seat-stage{opacity:var(--show);scale:calc(.94 + var(--show) * .06);transform-origin:50% 35%}
.story .seat-demo .sec-tag{display:none}
/* The scan stays inside the arena's outline. */
.story .seat-sweep{clip-path:inset(3.6% 2.9% round 26% / 33%)}
.goal-entry{position:absolute;z-index:3;left:20px;right:20px;top:calc(18px + (1 - var(--rise,1)) * (50% - 18px));translate:0 calc((1 - var(--rise,1)) * -50%);scale:calc(1 - var(--rise,1) * .3);transform-origin:0 0;opacity:calc(1 - var(--rise,1));display:grid;gap:12px;padding:20px 20px 22px;border-radius:22px;background:#fff;box-shadow:0 28px 60px -32px #1c191799,inset 0 0 0 1px #1c1a1712;pointer-events:none}
.goal-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1c1917}
.goal-label .icon{width:18px;height:18px}
.goal-field{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 8px 8px 18px;border-radius:16px;background:#faf8f6;box-shadow:inset 0 0 0 1.5px #1c191766,0 0 0 4px #1c191717}
.goal-text{flex:1;min-width:0;overflow:hidden;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.goal-ph{display:none;color:#9c9a98}
.seat-demo.is-empty .goal-ph{display:inline}
.goal-caret{display:inline-block;width:2px;height:1.05em;margin:0 2px;vertical-align:-.16em;background:#1c1917;animation:goal-blink 1.05s steps(1) infinite}
@keyframes goal-blink{50%{opacity:0}}
.goal-go{display:inline-flex;align-items:center;gap:6px;flex:none;height:44px;padding:0 16px;border-radius:12px;background:#eceae8;color:#9c9a98;font-size:14.5px;font-weight:700;transition:background .3s,color .3s,box-shadow .3s}
.goal-go .icon{width:16px;height:16px}
.seat-demo.is-typed .goal-go{background:var(--grad);color:#fff;box-shadow:0 10px 22px -12px #1c1917cc}
/* While COVR reads the data, a chip sits over the court; it gives way to what COVR found. */
.seat-scan-chip{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:86%;padding:8px 13px;border-radius:99px;background:#ffffffe6;box-shadow:0 12px 26px -16px #1c191799,inset 0 0 0 1px #1c191733;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;line-height:1.3;color:var(--ink);white-space:nowrap;translate:-50% -50%;opacity:calc(clamp(0,var(--scan,1) * 12,1) * (1 - var(--read,1)));pointer-events:none}
.seat-scan-chip i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #1c191733;border-top-color:#1c1917;animation:seat-spin .8s linear infinite}
@keyframes seat-spin{to{rotate:360deg}}
/* What COVR found, pinned to the top right corner of the upper level (section 208). */
.seat-pin{position:absolute;left:85.4%;top:18.5%;z-index:2;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px #fff,0 6px 14px -4px #1c1917cc;opacity:var(--call,1);scale:calc(.4 + var(--call,1) * .6)}
.seat-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #1c191780;animation:seat-ping 1.8s ease-out infinite}
@keyframes seat-ping{0%{scale:.6;opacity:1}100%{scale:1.9;opacity:0}}
.seat-lead{position:absolute;left:85.4%;top:18.5%;z-index:1;height:20%;border-left:1.5px dashed #1c1917;transform-origin:top;scale:1 var(--call,1);opacity:var(--call,1)}
.seat-callout{position:absolute;right:8%;top:38.5%;z-index:2;display:grid;gap:4px;width:52%;padding:11px 14px 12px;border-radius:16px;background:#ffffffeb;box-shadow:0 20px 40px -22px #1c1917cc,inset 0 0 0 1px #1c191738;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:var(--call,1);translate:0 calc((1 - var(--call,1)) * 10px);scale:calc(.94 + var(--call,1) * .06);transform-origin:85% 0}
.seat-callout-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1c1917}
.seat-callout-tag .icon{width:13px;height:13px}
.seat-callout-stat{display:flex;align-items:center;gap:9px}
.seat-callout-stat b{flex:none;font-weight:700;font-size:30px;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.seat-callout-stat span{font-size:14px;line-height:1.25;color:var(--ink)}
.seat-callout small{font-size:12px;color:var(--muted)}
.motion-paused .goal-caret,.motion-paused .seat-scan-chip i,.motion-paused .seat-pin::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.goal-caret,.seat-scan-chip i,.seat-pin::after{animation:none}}
@media(max-width:809px){
  .goal-entry{left:12px;right:12px;padding:14px 14px 16px;gap:10px}
  .goal-label{font-size:11px}
  .goal-field{min-height:50px;padding:6px 6px 6px 12px}
  .goal-text{font-size:15px}
  .goal-go{width:40px;height:38px;padding:0;justify-content:center}
  .goal-go>span{display:none}
  .goal-go .icon{width:18px;height:18px}
  .seat-scan-chip{font-size:11px;padding:6px 10px}
  .seat-callout{left:50%;right:auto;top:34%;width:70%;padding:8px 10px 9px;border-radius:12px;translate:-50% calc((1 - var(--call,1)) * 8px);transform-origin:50% 0}
  .seat-lead{display:none}
  .seat-callout-tag{font-size:9.5px}
  .seat-callout-stat b{font-size:23px}
  .seat-callout-stat span{font-size:12px}
  .seat-callout small{font-size:11px}
}

/* ---------- Choose how you want to COVR the reward: the coverage card, played by the step ---------- */
.story-art>.scale-glass{grid-area:auto}
/* On phones the pictures sit inside the steps, where the steps' paragraph rule would restyle the card's own lines. */
.story .scale-glass .sg-pill{max-width:none;margin-top:42px;font-size:15.5px;line-height:1.35;color:var(--ink)}
@media(max-width:809px){.story .scale-glass .sg-pill{margin-top:36px;font-size:14px}}
@media(min-width:960px){.story-step[data-step="1"]{--h:130vh}.story-art[data-art="1"]{padding-top:52px}}
@media(max-width:959px){.story .scale-glass{margin-top:14px}.story .scale-glass .sg-dial-wrap{top:-14px;right:-8px}}

/* ---------- The COVR engine: the logo's two arrows, large, on the glass circle ---------- */
.eng-orb{width:188px;height:188px}
.eng-mark{width:100%;height:100%;fill:#143b63;filter:drop-shadow(0 6px 10px #143b6333)}
.eng-signals{top:calc(50% + 112px)}
@media(max-width:1099px){.eng-orb{width:150px;height:150px}}

/* ---------- One type scale ---------- */
/* Section titles, the paragraph under each, step titles and card titles each have one size at each screen width, and
   titles sit tighter. The hero and the statement keep their own sizes. */
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:52px;line-height:1.08;letter-spacing:-.035em}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{margin-top:16px;font-size:18px;line-height:1.55;color:var(--muted)}
.story .story-copy h3,.bridge h3{font-size:36px;line-height:1.1;letter-spacing:-.035em}
.is-light .hero-description{color:#504e4c}
.play-card h3{font-size:20px;line-height:1.25}
.persona-card h3,.persona-grid.is-four .persona-card h3{font-size:20px;line-height:1.25}
.persona-card p,.persona-grid.is-four .persona-card p{font-size:15px;line-height:1.45}
@media(max-width:1199px){
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:44px}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{font-size:17px}
  .story .story-copy h3,.bridge h3{font-size:32px}
}
@media(max-width:809px){
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:32px;line-height:1.1}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{font-size:16px;line-height:1.55}
  .story .story-copy h3,.bridge h3{font-size:26px;line-height:1.15}
  .play-card h3{font-size:15.5px}
  .persona-card h3,.persona-grid.is-four .persona-card h3{font-size:19px}
}

/* =====================================================================================================
   Prototype 36: the rox.com system (appended to prototype 35's styles, after scripts/build-p36.py turned their
   colours to warm stone, with black for every accent)
   ===================================================================================================== */
/* ---------- Tokens: warm stone neutrals, black as the one accent ---------- */
:root,.is-light{--bg:#f7f6f4;--surface:#fff;--line:#e7e5e4;--line-strong:#d6d3d1;--ink:#1c1917;--black:#0c0a09;--muted:#57534d;--faint:#87827d;--faint-2:#a6a09b;--lime:#0c0a09;--grad:linear-gradient(#0c0a09,#0c0a09);--grad-soft:#f5f5f4;--glass-edge:#e7e5e4;--glass-shadow:0 2.8px 9.6px #0000000a;--card-shadow:0 2.8px 9.6px #0000000a;--sans:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;--display:Diatype,Geist,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
body.is-light{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.is-light::before,body.is-light::after{content:none}
::selection{background:#1c19171f}

/* ---------- Type: Diatype for headings (regular, tight, two-tone), Geist for everything else ---------- */
h1,h2,h3,h4,.statement,.case-stats strong,.tk-num,.sg-dial-read b,.seat-callout-stat b{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
.grad-text,.is-light .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--faint);-webkit-text-fill-color:var(--faint)}
.is-light .hero h1{font-size:56px;line-height:1.14;letter-spacing:-.02em}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:36px;line-height:1.16;letter-spacing:-.02em}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{margin-top:14px;font-size:17px;line-height:1.5;color:var(--muted)}
.is-light .hero-description{color:var(--muted)}
.story .story-copy h3,.bridge h3{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.play-card h3,.persona-card h3,.persona-grid.is-four .persona-card h3{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.persona-card p,.persona-grid.is-four .persona-card p,.play-card p{font-size:14.5px;line-height:1.45;color:var(--muted)}
.statement{font-size:40px;line-height:1.25;letter-spacing:-.02em}
.statement .sw.is-key{font-weight:700;color:var(--black)}
@media(min-width:1200px) and (max-width:1339px){.is-light .hero h1{font-size:50px}}
@media(max-width:1199px){
  .is-light .hero h1{font-size:44px}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:32px}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{font-size:16px}
  .story .story-copy h3,.bridge h3{font-size:26px}
  .statement{font-size:34px}
}
@media(max-width:809px){
  .is-light .hero h1{font-size:34px;line-height:1.16}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2{font-size:28px;line-height:1.18}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{font-size:16px}
  .story .story-copy h3,.bridge h3{font-size:22px;line-height:1.22}
  .statement{font-size:26px;line-height:1.3}
  .play-card h3{font-size:15px}
}
/* Small labels in mono, as rox sets its tags and dates. */
.is-light .eyebrow,.is-light .process-copy .eyebrow{gap:0;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.is-light .eyebrow::before,.is-light .eyebrow::after{content:none}
.goal-label,.seat-callout-tag,.bs-share,.story .bs-demo .bs-share,.eng-label,.eng-row>div>span,.tk small,.sg-x,.sg-dial-hint,.case-source,.bridge-list,.disclaimer{font-family:var(--mono);letter-spacing:.02em}

/* ---------- Buttons: black, square-cornered; the second one outlined ---------- */
.button,.is-light .button{border-radius:2px;background:var(--black);color:#fafafa;box-shadow:none;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0}
.is-light .button:hover{background:#292524}
.is-light .button-outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);-webkit-backdrop-filter:none;backdrop-filter:none}
.is-light .button-outline:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.ld-btn{border-radius:2px}

/* ---------- The header ---------- */
.site-header nav a,.nav-waitlist{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted)}
.site-header nav a:hover,.nav-waitlist:hover{color:var(--ink)}
.site-header nav a::after,.is-light .site-header nav a::after{background:var(--ink)}
.site-header .nav-cta{min-height:36px;padding:8px 14px;font-size:14px}
.site-header.scrolled,.is-light .site-header.scrolled,.is-light .site-header.menu-open{background:#f7f6f4f5;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}

/* ---------- Surfaces: flat white with a hairline; no glass, no glow ---------- */
.is-light .persona-card,.is-light .faq-list,.is-light .closing-preview,.is-light .post-cta,.is-light .build-module,.is-light .process-card,.is-light .hero-window.cb,.engine,.story .seat-demo,.story .bs-demo,.loop-demo,.story .scale-glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);box-shadow:var(--card-shadow)}
.is-light .persona-card,.persona-grid.is-four .persona-card{border-radius:10px}
.story .seat-demo,.story .bs-demo,.loop-demo,.story .scale-glass,.is-light .hero-window.cb{border-radius:10px}
.engine{border-radius:12px}
.engine::before,.hero-stage::before,.hero-stage::after,.story-stage::before,.scale-glass::before,.scale-glass::after,.is-light .build-module::after{content:none}
.is-light .closing{background:none}
/* The frames that hold the pictures: stone, with rox's fine dot grid. */
.hero-stage,.story-stage{background:radial-gradient(circle at 1px 1px,#d6d3d1 1px,#0000 1.3px) 0 0/16px 16px,#f5f5f4;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:959px){.story-step .story-art{background:radial-gradient(circle at 1px 1px,#d6d3d1 1px,#0000 1.3px) 0 0/16px 16px,#f5f5f4;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}}
.story-art .story-dots i.is-on,.story-dots i.is-on{background:var(--ink)}

/* ---------- Set a goal & pick your audience ---------- */
.goal-entry{border-radius:10px;box-shadow:0 16px 40px -24px #0c0a0933,inset 0 0 0 1px var(--line)}
.goal-field{border-radius:6px;background:#fafaf9;box-shadow:inset 0 0 0 1px var(--ink)}
.goal-go{border-radius:2px}
.seat-pill{border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.seat-pill-ic{border-radius:4px;box-shadow:none}
.seat-scan-chip{border-radius:4px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line),var(--card-shadow)}
.seat-callout{border-radius:8px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -18px #0c0a0959}
.seat-pin{box-shadow:0 0 0 3px #fff}
/* The arena in stone: a pale court, grey seats, and the audience in black. */
.ar-map .ar-floor{fill:#f0efed}
.ar-map .ar-wood{fill:#e7e2da}
.ar-map .ar-planks{stroke:#cfc7bb;opacity:.35}
.ar-map .ar-key{fill:#78716c}
.ar-map .ar-rim{stroke:#1c1917}
.ar-map .ar-table,.ar-map .ar-bench{fill:#a6a09b}

/* ---------- Choose how you want to COVR the reward ---------- */
.tk{border-radius:8px}
.tk.is-sales{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tk.is-sales small{color:var(--muted)}
.tk.is-sales small .icon{color:var(--ink)}
.tk.is-covered{background:var(--black);box-shadow:none}
.sg-covered{fill:var(--ink);fill-opacity:.9}
.scale-glass .sg-dial{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--line),0 14px 30px -18px #0c0a0959}
.scale-glass .sg-dial-hint{border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sg-pill{border-radius:8px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line)}
.sg-pill-mark{border-radius:4px}
.sg-pill b{color:var(--black)}
.scale-glass[data-phase="4"] .sg-pill{box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Build and share, and reward your fans ---------- */
.bs-demo .bs-list li,.ld-list li{border-radius:8px}
.loop-ic{box-shadow:inset 0 0 0 1px var(--line)}
.loop-node.is-win .loop-ic{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.loop-node.is-covr .loop-ic{background:var(--black);box-shadow:none}
.loop-node.is-redeem .loop-ic,.loop-node.is-spend .loop-ic{color:var(--ink)}
.loop-core b{color:var(--ink)}

/* ---------- The COVR engine ---------- */
.eng-orb{background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 20px 44px -28px #0c0a0959}
.eng-mark{filter:none}
.eng-row .eng-ic{background:#f5f5f4;color:var(--ink)}
.eng-row .eng-ic.is-covr{background:var(--black)}
.eng-row>div>span{color:var(--faint)}

/* ---------- The rest ---------- */
.persona-card .icon-badge,.persona-card>span:first-child,.play-card .play-media{border-radius:8px}
.case-photo,.is-light .case-photo{border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.case-photo img{border-radius:10px}
.case-stats strong{color:var(--ink)}
/* Geist and the mono labels run wider than Diatype: the story's single column stays inside its container on phones,
   and the ticker labels may wrap. */
@media(max-width:959px){.story{grid-template-columns:minmax(0,1fr)}}
@media(max-width:809px){.tk small{white-space:normal}}

/* =====================================================================================================
   Prototype 36, second pass: one highlight colour, rounded buttons, subtle glass, the teams, the blog, and phones
   ===================================================================================================== */
/* ---------- One highlight colour (rox's blue) for what COVR finds, covers and pays; the interface stays black ---------- */
:root,.is-light{--hl:#0b63e8;--hl-soft:#0b63e814;--glass-fill:linear-gradient(155deg,#ffffffeb 0%,#ffffffb3 52%,#ffffffd4 100%);--glass-blur:blur(18px) saturate(150%);--glass-rim:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffffa6;--glass-drop:0 1px 2px #0c0a090d,0 22px 46px -28px #0c0a094d}
.statement .sw.is-key{color:var(--hl)}
.story .seat-demo[data-insight="2"] .ar-map .sec[data-g="2"]{fill:var(--hl)}
.seat-pin{background:var(--hl)}
.seat-pin::after{border-color:#0b63e866}
.seat-lead{border-left-color:var(--hl)}
.seat-callout-stat b{background:none;color:var(--hl);-webkit-text-fill-color:var(--hl)}
.tk.is-covered{background:var(--hl)}
.sg-covered{fill:var(--hl);fill-opacity:.88}
.sg-pill b,.loop-txt span b{color:var(--hl)}
.loop-node.is-covr .loop-ic{background:var(--hl)}
.eng-flow{stroke:var(--hl)}
.eng-ring{background:conic-gradient(from 0deg,#0b63e800 0deg,#0b63e8 70deg,#0b63e800 150deg,#0b63e8b3 250deg,#0b63e800 330deg)}

/* ---------- Buttons: rounded again ---------- */
.button,.is-light .button,.ld-btn,.goal-go,.site-header .nav-cta{border-radius:99px}

/* ---------- Subtle liquid glass: frosted white panels over a softly lit, dotted stone ---------- */
.is-light .persona-card,.is-light .faq-list,.engine,.story .seat-demo,.story .bs-demo,.loop-demo,.story .scale-glass,.is-light .hero-window.cb,.teams-grid,.is-light .learn-card{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop)}
.hero-stage,.story-stage{background:radial-gradient(46% 42% at 74% 26%,#0b63e81c,#0b63e800 70%),radial-gradient(42% 40% at 18% 86%,#d6d3d1b3,#d6d3d100 70%),radial-gradient(circle at 1px 1px,#d6d3d1 1px,#0000 1.3px) 0 0/16px 16px,#f5f5f4}
@media(max-width:959px){.story-step .story-art{background:radial-gradient(56% 44% at 80% 20%,#0b63e81a,#0b63e800 70%),radial-gradient(circle at 1px 1px,#d6d3d1 1px,#0000 1.3px) 0 0/16px 16px,#f5f5f4}}
/* A light catching the edge of the larger panels. */
.story .scale-glass::after,.loop-demo::after,.teams-grid::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#fff,#ffffff00 38%,#ffffff00 62%,#ffffffd9);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.loop-demo,.teams-grid{position:relative}
.site-header.scrolled,.is-light .site-header.scrolled,.is-light .site-header.menu-open{background:#f7f6f4b8;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.is-light .button-outline{background:#ffffffb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------- The hero: tighter lines ---------- */
.is-light .hero h1{line-height:1.03}

/* ---------- Built for sales, marketing and finance: three cells in one glass panel, split by hairlines ---------- */
.teams h2,.learn h2{font-size:36px;line-height:1.16;letter-spacing:-.02em}
.teams .section-heading p{max-width:620px;margin:14px auto 0;font-size:17px;line-height:1.5;color:var(--muted)}
.teams-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;overflow:hidden;border-radius:14px}
.team-card{display:flex;flex-direction:column;gap:12px;padding:28px 26px 24px}
.team-card+.team-card{border-left:1px solid var(--line)}
.team-tag{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.team-card h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.team-card p{font-size:15px;line-height:1.5;color:var(--muted)}
.team-card .team-proof{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.team-proof b{font-weight:600;color:var(--hl)}

/* ---------- The blog: a heading with a link, and three glass cards ---------- */
.learn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.learn-all{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:14px;font-weight:500;color:var(--ink)}
.learn-all .icon,.learn-read .icon{width:16px;height:16px}
.learn .learn-grid,.blog-list .learn-grid{gap:18px;margin-top:36px}
.is-light .learn-card{display:flex;flex-direction:column;overflow:hidden;padding:0 0 22px;border-radius:12px}
.is-light .learn-card .learn-picture{height:auto;aspect-ratio:16/10;margin:0;border:0;border-radius:0;box-shadow:none;background:none}
.learn-card .learn-picture img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.is-light .learn-card>.learn-meta{display:flex;align-items:center;gap:8px;margin:18px 20px 0;background:none;color:var(--faint);-webkit-text-fill-color:var(--faint);font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.04em}
.learn-new{padding:3px 6px;border-radius:4px;background:var(--hl-soft);color:var(--hl);-webkit-text-fill-color:var(--hl);font-style:normal}
.learn-card h3,.learn-card h2{margin:10px 20px 0;font-family:var(--display);font-size:20px;line-height:1.25;letter-spacing:-.02em}
.learn-card .learn-dek{margin:8px 20px 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.learn-read{display:inline-flex;align-items:center;gap:4px;margin:16px 20px 0;font-size:14px;font-weight:500;color:var(--ink)}
.blog-hero h1{font-family:var(--display);font-weight:400;font-size:56px;line-height:1.03;letter-spacing:-.02em}
.blog-hero p{color:var(--muted)}
@media(max-width:959px){.teams-grid{grid-template-columns:1fr}.team-card+.team-card{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:1199px){.teams h2,.learn h2{font-size:32px}.learn .learn-grid,.blog-list .learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learn .learn-card:nth-child(3){display:none}}

/* ---------- Phones: rox's mobile layout ---------- */
@media(max-width:809px){
  /* Headlines tight and centred; the two hero buttons side by side. */
  .is-light .hero h1{font-size:36px;line-height:1.06}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions .button,.is-light .hero-actions .button-outline{width:auto;min-height:46px;padding:10px 12px;font-size:14.5px}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2,.teams h2,.learn h2{font-size:26px;line-height:1.18}
  .process-copy,.faq-inner>div:first-child,.learn-head{text-align:center}
  .learn-head{flex-direction:column;align-items:center;gap:10px}
  .section{padding-block:56px}
  .teams-grid{margin-top:28px}
  .team-card{padding:22px 20px 20px}
  .team-card h3{font-size:20px}
  .learn .learn-grid,.blog-list .learn-grid{grid-template-columns:1fr;gap:14px;margin-top:24px}
  .learn .learn-card:nth-child(3){display:flex}
  .blog-hero h1{font-size:36px;line-height:1.06}
  /* The industry tabs scroll sideways: a fade says there is more. */
  .ind-tabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,#0000);mask-image:linear-gradient(90deg,#000 82%,#0000)}
  .statement-section .persona-grid{gap:12px}
}
/* Phones: the hero builder keeps its steps and drops the map (the full arena comes up in How it works), so the
   hero fits in about a screen; the chart's dates fit side by side. */
@media(max-width:809px){
  .cb-canvas{display:none}
  .cb-steps{min-height:430px}
  .sg-x{font-size:10px;letter-spacing:0}
}
.learn-card .learn-read{justify-content:flex-start;width:auto;align-self:flex-start}

/* =====================================================================================================
   Prototype 36, third pass: Edwards' dunk in the hero, and livelier team cards
   ===================================================================================================== */
/* ---------- The hero: the dunk fills the frame; the builder's steps float over it in glass ---------- */
.is-light .hero-stage.has-reel{position:relative;isolation:isolate;overflow:hidden;padding:22px;border-radius:16px;background:#0c0a09;box-shadow:0 34px 80px -44px #0c0a09b3}
.hero-reel{position:absolute;inset:0;z-index:-1}
.hero-reel video{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0a0973 0%,#0c0a091a 46%,#0c0a0900 70%),linear-gradient(0deg,#0c0a0966 0%,#0c0a0900 32%);pointer-events:none}
.has-reel .cb-canvas{display:none}
.has-reel .cb-body{grid-template-columns:1fr;min-height:470px}
.is-light .hero-stage.has-reel .hero-window.cb{width:min(360px,54%);background:var(--glass-fill);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #fff,0 26px 60px -30px #000000b3}
/* The chip: the trigger event, then "It happened" when the ball goes through. */
.reel-chip{position:absolute;right:18px;bottom:18px;z-index:2;display:grid}
.reel-chip>span{grid-area:1 / 1;justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:99px;background:#ffffffd6;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 #fff,0 14px 32px -16px #000000b3;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;transition:opacity .35s,translate .45s var(--ease)}
.reel-live i{width:8px;height:8px;border-radius:50%;background:var(--hl);box-shadow:0 0 0 3px #0b63e833;animation:reel-live 1.6s ease-in-out infinite}
@keyframes reel-live{50%{box-shadow:0 0 0 6px #0b63e800}}
.reel-chip>.reel-hit{background:var(--hl);color:#fff;opacity:0;translate:0 8px;box-shadow:inset 0 1px 0 #ffffff4d,0 14px 32px -14px #0b63e8e6}
.reel-hit .icon{width:16px;height:16px}
.hero-reel.is-hit .reel-live{opacity:0;translate:0 -8px}
.hero-reel.is-hit .reel-hit{opacity:1;translate:0 0}
.motion-paused .reel-live i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.reel-live i{animation:none}.reel-chip>span{transition:none}}
@media(max-width:809px){
  /* Phones: the dunk across the top of the frame, the steps below it, still over the clip. */
  .is-light .hero-stage.has-reel{padding:0 10px 10px;border-radius:14px}
  .hero-reel video{object-position:55% 18%}
  .hero-reel::after{background:linear-gradient(180deg,#0c0a0900 30%,#0c0a0966 100%)}
  .is-light .hero-stage.has-reel .hero-window.cb{width:100%;margin-top:196px}
  .has-reel .cb-body{min-height:0}
  .reel-chip{left:12px;right:auto;top:12px;bottom:auto}
  .reel-chip>span{justify-self:start;padding:7px 12px 7px 10px;font-size:12px}
}

/* ---------- Built for sales, marketing and finance: an icon, a line, and a small picture each ---------- */
.teams{position:relative;isolation:isolate}
.teams::before{content:"";position:absolute;left:50%;top:60%;z-index:-1;width:min(1000px,96%);height:70%;translate:-50% -50%;background:radial-gradient(50% 50% at 50% 50%,#0b63e824,#0b63e800 72%);pointer-events:none}
.team-card{gap:14px;transition:background .3s}
.team-card:hover{background:#ffffff73}
.team-top{display:flex;align-items:center;gap:12px}
.team-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,#5a95ff 0%,#0b63e8 55%,#0a50c2 100%);color:#fff;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #00000026,0 10px 20px -10px #0b63e8d9}
.team-ic .icon{width:22px;height:22px}
.team-card h3{font-size:22px}
.team-viz{display:grid;gap:10px;margin-top:auto;padding:16px;border-radius:10px;background:#fafaf9cc;box-shadow:inset 0 0 0 1px var(--line)}
.tv-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px}
.tv-row span{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.tv-row i{display:block;height:8px;border-radius:99px;background:#d6d3d1;transform-origin:left;scale:var(--w) 1;transition:scale 1.1s var(--ease) .3s}
.tv-row+.tv-row i{transition-delay:.55s}
.tv-row.is-hl i{background:linear-gradient(90deg,#5a95ff,#0b63e8)}
.tv-row b{font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.tv-row.is-hl b{color:var(--hl)}
.team-viz small{font-size:12px;line-height:1.35;color:var(--faint)}
.js .teams-grid:not(.visible) .tv-row i{scale:0 1}
/* Marketing: the offer as fans see it, under the team's name. */
.tv-offer{gap:8px}
.tv-brand{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.tv-brand img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.tv-offer b{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.tv-row i{transition:none}.js .teams-grid:not(.visible) .tv-row i{scale:var(--w) 1}}
@media(max-width:809px){.team-card h3{font-size:20px}.tv-row{grid-template-columns:70px minmax(0,1fr) auto}}

/* =====================================================================================================
   Prototype 36, fourth pass: rox's type, more closely. Season Mix (rox's heading face, from Displaay) leads the
   heading stack and takes over as soon as licensed files are added; until then Diatype stands in for it.
   ===================================================================================================== */
:root,.is-light{--display:"Season Mix",Diatype,Geist,system-ui,sans-serif;--text:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* Reading text in the system face, as rox sets its paragraphs; Geist stays for the interface. */
.is-light .hero-description,.section-heading p,:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.story .story-copy p,.case-copy .case-story,.team-card p,.persona-card p,.play-card p,.learn-card .learn-dek,.bridge>p:not(.bridge-list),.faq-list p,.post-body p,.post-body li,.blog-hero p{font-family:var(--text)}
/* Headings: rox's sizes on 1.2 leading, with the grey part on its own line. */
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2,.teams h2,.learn h2{font-size:30px;line-height:1.2;letter-spacing:-.02em}
:is(h1,h2) .grad-text,.hero h1>.grad-text{display:block}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.teams .section-heading p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{margin-top:12px;font-size:16px;line-height:1.45}
.story .story-copy h3,.bridge h3{font-size:22px;line-height:1.3;letter-spacing:-.02em}
.team-card h3,.learn-card h3,.learn-card h2{font-size:20px;line-height:1.3;letter-spacing:-.02em}
.play-card h3,.persona-card h3,.persona-grid.is-four .persona-card h3{font-size:18px;line-height:1.3}
.team-card p,.persona-card p,.persona-grid.is-four .persona-card p,.play-card p,.learn-card .learn-dek{font-size:14px;line-height:1.45}
/* Labels: small, grey and in sentence case, as rox does, instead of mono capitals. */
.is-light .eyebrow,.is-light .process-copy .eyebrow,.goal-label,.seat-callout-tag,.bs-share,.story .bs-demo .bs-share,.eng-label,.eng-row>div>span,.tk small,.sg-x,.sg-dial-hint,.case-source,.bridge-list,.disclaimer,.team-tag,.is-light .learn-card>.learn-meta,.tv-row span{font-family:var(--sans);text-transform:none;letter-spacing:0}
.is-light .eyebrow,.team-tag,.eng-label,.bs-share,.story .bs-demo .bs-share{font-size:13px;font-weight:500;color:var(--faint)}
.goal-label,.eng-row>div>span{font-size:12.5px;font-weight:500}
.seat-callout-tag{font-size:12px;font-weight:500}
.tv-row span{font-size:12px}
.is-light .learn-card>.learn-meta{font-size:12.5px}
.learn-new{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
/* Links in Geist medium, a warm dark grey; the hero's buttons a size up, like rox's. */
.hero-actions .button,.is-light .hero-actions .button-outline{font-size:16px}
.learn-all,.learn-card .learn-read{font-size:15px;font-weight:500;color:#403f3e}
@media(max-width:1199px){:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2,.teams h2,.learn h2{font-size:28px}}
@media(max-width:809px){
  .is-light .hero h1{font-size:38px;line-height:1.08}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2,.teams h2,.learn h2{font-size:24px;line-height:1.2}
  :is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.teams .section-heading p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p{font-size:15px}
  .story .story-copy h3,.bridge h3{font-size:20px}
  .team-card h3,.learn-card h3,.learn-card h2{font-size:18px}
  .blog-hero h1{font-size:38px;line-height:1.08}
}

/* =====================================================================================================
   Prototype 36, fifth pass: Season Mix, the hero moment, the builder as How it works' UI, and the teams by industry
   ===================================================================================================== */
/* ---------- Season Mix (Displaay), in rox's weights: 420 for headings, 580 for links, 670 for bold ---------- */
@font-face{font-family:"Season Mix";src:url('/assets/fonts/season-mix/season-mix-420.woff2') format('woff2');font-weight:420;font-display:swap}
@font-face{font-family:"Season Mix";src:url('/assets/fonts/season-mix/season-mix-580.woff2') format('woff2');font-weight:580;font-display:swap}
@font-face{font-family:"Season Mix";src:url('/assets/fonts/season-mix/season-mix-670.woff2') format('woff2');font-weight:670;font-display:swap}
h1,h2,h3,h4,.statement,.case-stats strong,.tk-num,.sg-dial-read b,.seat-callout-stat b,.team-card h3,.learn-card h3,.learn-card h2,.tv-offer b{font-weight:420}
.is-light .hero h1{line-height:1.08}
.learn-all,.learn-card .learn-read{font-family:var(--display);font-weight:580}

/* =====================================================================================================
   Prototype 36, sixth pass: the hero moment with its fill and confetti, a dashboard for How it works, the teams as a
   2x2, and bigger type throughout
   ===================================================================================================== */
/* ---------- Bigger type across the page ---------- */
:root,.is-light{--h1:60px;--h2:44px;--h3:30px;--lead:19px;--card-h:23px;--card-p:16px;--label:14px}
@media(max-width:1199px){:root,.is-light{--h1:50px;--h2:36px;--h3:26px;--lead:18px;--card-h:22px;--card-p:15.5px}}
@media(max-width:809px){:root,.is-light{--h1:40px;--h2:30px;--h3:23px;--lead:17px;--card-h:20px;--card-p:15px;--label:13.5px}}
.is-light .hero h1{font-size:var(--h1);line-height:1.06}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2,.teams h2,.learn h2,.uses h2{font-size:var(--h2);line-height:1.12;letter-spacing:-.02em}
:is(.process,.integrations,.case-study,.examples,.faq,.closing) h2+p,.case-copy .case-story,.is-light .hero-description,.bridge>p:not(.bridge-list),.story .story-copy p,.use-intro p{font-size:var(--lead);line-height:1.5}
.story .story-copy h3,.bridge h3{font-size:var(--h3);line-height:1.2}
.learn-card h3,.learn-card h2,.team-card h3,.use-card h3{font-size:var(--card-h);line-height:1.25}
.persona-card h3,.persona-grid.is-four .persona-card h3{font-size:21px;line-height:1.28}
.persona-card p,.persona-grid.is-four .persona-card p,.learn-card .learn-dek,.use-card>p{font-size:var(--card-p);line-height:1.5}
.is-light .eyebrow,.team-tag,.eng-label,.bs-share,.story .bs-demo .bs-share{font-size:var(--label)}
.tv-row span,.team-viz small,.is-light .learn-card>.learn-meta,.case-source,.disclaimer{font-size:13.5px}
.statement{font-size:46px}
.site-header nav a,.nav-waitlist{font-size:15px}
.button,.is-light .button{font-size:16px}
@media(max-width:1199px){.statement{font-size:38px}}
@media(max-width:809px){.statement{font-size:30px}}
.nw{white-space:nowrap}

/* ---------- The hero: one moment, If then Then ---------- */
/* On wider screens the moment is laid out at 740 by 470 and scaled to fit its column (--k, from the script). */
.hero-moment{position:relative;width:100%;max-width:740px;height:calc(470px * var(--k,1))}
.hm-stage{position:relative;width:740px;height:470px;scale:var(--k,1);transform-origin:0 0}
.hm-if,.hm-then{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop)}
.hm-if{position:absolute;left:0;top:0;width:440px;height:76px;border-radius:26px;transition:height .65s var(--ease),border-radius .65s var(--ease),box-shadow .5s}
.hero-moment.is-open .hm-if{height:338px;border-radius:22px}
/* The fill: a ring round the card, filling clockwise from the top as the clip plays; it glows when it completes. */
.hm-ring{position:absolute;inset:-1px;z-index:3;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,var(--hl) calc(var(--fill,0) * 360deg),#0000 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-moment.is-hit .hm-if{box-shadow:var(--glass-rim),0 0 0 5px #0b63e81f,0 26px 56px -26px #0b63e899}
/* The clip: a thumbnail in the left corner while the card is closed, the full frame when it opens. */
.hm-clip{position:absolute;z-index:1;left:12px;top:12px;width:52px;height:52px;overflow:hidden;border-radius:14px;background:#0c0a09;box-shadow:0 6px 14px -8px #0c0a0999;transition:top .65s var(--ease),width .65s var(--ease),height .65s var(--ease),border-radius .65s var(--ease)}
.hero-moment.is-open .hm-clip{top:76px;width:416px;height:250px;border-radius:15px}
.hm-clip video{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 38%}
.hm-row{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:76px;padding:0 14px 0 76px;transition:padding .65s var(--ease)}
.hero-moment.is-open .hm-row{padding-left:14px}
.hm-tag{flex:none;display:grid;place-items:center;height:28px;padding:0 12px;border-radius:99px;background:var(--black);color:#fafafa;font-family:var(--sans);font-size:13px;font-weight:500}
.hm-tag.is-then{background:var(--hl)}
.hm-say{flex:1;min-width:0;margin:0;font-family:var(--display);font-weight:420;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.hm-say b{font-weight:580}
.hm-face,.hm-logo{display:inline-grid;place-items:center;width:28px;height:28px;margin:0 6px 0 1px;vertical-align:-8px;border-radius:50%;overflow:hidden;background:#e9e7e4;box-shadow:0 0 0 2px #fff,0 4px 10px -4px #0c0a0966}
.hm-face img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;scale:1.35;transform-origin:50% 25%}
.hm-logo{background:#fff}
.hm-logo img{width:20px;height:20px}
.hm-check{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hl);color:#fff;opacity:0;scale:.5;transition:opacity .3s,scale .45s var(--ease)}
.hm-check .icon{width:16px;height:16px}
.hero-moment.is-hit .hm-check{opacity:1;scale:1}
/* Confetti, a small burst from the check as the moment completes. */
.hm-confetti{position:absolute;left:412px;top:38px;z-index:4;width:0;height:0;pointer-events:none}
.hm-confetti i{position:absolute;left:-3px;top:-5px;width:6px;height:10px;border-radius:2px;opacity:0}
.hm-confetti .c0,.hm-confetti .c3{background:var(--hl)}
.hm-confetti .c1{background:#5a95ff}
.hm-confetti .c2{background:var(--black)}
.hm-confetti .c4{background:#d6d3d1}
.hero-moment.is-hit .hm-confetti i{animation:hm-pop 1.2s cubic-bezier(.16,.8,.3,1) var(--d) both}
@keyframes hm-pop{0%{opacity:0;translate:0 0;rotate:0deg}8%{opacity:1}72%{opacity:1}100%{opacity:0;translate:var(--x) var(--y);rotate:var(--r)}}
/* The link: right, round the corner and down to the reward, with a node running along it. */
.hm-link{position:absolute;left:440px;top:37px;z-index:0;width:184px;height:116px}
.hm-link svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hm-drop{display:none}
.hm-path{fill:none;stroke:#d6d3d1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-path.is-lit{stroke:var(--hl);stroke-dasharray:1 1;stroke-dashoffset:1}
.hero-moment.is-hit .hm-path.is-lit{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease)}
.hm-node{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--hl);box-shadow:0 0 0 4px #0b63e833;opacity:0;offset-path:path('M0 1H156Q170 1 170 15V115');offset-rotate:0deg;offset-distance:0%}
.hero-moment.is-hit .hm-node{animation:hm-run .9s var(--ease) forwards}
@keyframes hm-run{0%{offset-distance:0%;opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* Then: lower and to the right, lit when the node arrives. */
.hm-then{position:absolute;left:480px;top:153px;width:260px;display:grid;gap:10px;padding:14px;border-radius:22px;opacity:.72;scale:.97;transform-origin:50% 0;transition:opacity .5s,scale .6s var(--ease),box-shadow .5s}
.hero-moment.is-then .hm-then{opacity:1;scale:1;box-shadow:var(--glass-rim),inset 0 0 0 1.5px var(--hl),0 24px 50px -26px #0b63e880}
.hm-then .hm-tag{justify-self:start}
.hm-jersey{width:100%;height:auto;aspect-ratio:1.35;object-fit:contain;border-radius:14px;background:#fff}
.hm-then p{margin:0;font-family:var(--display);font-weight:420;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.hm-then p b{font-weight:580;color:var(--hl)}
@media(prefers-reduced-motion:reduce){.hm-if,.hm-clip,.hm-row,.hm-then,.hm-check{transition:none}.hm-confetti{display:none}.hero-moment.is-hit .hm-node{animation:none}.hero-moment.is-hit .hm-path.is-lit{transition:none}}
@media(max-width:1199px){.hero-moment{margin:48px auto 0}}
/* Phones: the card, then the node straight down into the reward, which sits in from the right. */
@media(max-width:809px){
  .hero-moment{height:auto;margin-top:32px}
  .hm-stage{width:auto;height:auto;scale:1}
  .hm-if{position:relative;width:auto;height:88px}
  .hero-moment.is-open .hm-if{height:300px}
  .hm-row{height:88px;padding-right:12px}
  .hero-moment.is-open .hm-clip{top:88px;width:calc(100% - 24px);height:200px}
  .hm-say{font-size:15.5px}
  .hm-confetti{left:auto;right:26px;top:44px}
  .hm-link{position:relative;left:auto;top:auto;width:4px;height:44px;margin-left:calc(18% + 36px)}
  .hm-elbow{display:none}
  .hm-drop{display:block}
  .hm-node{offset-path:path('M2 0V44')}
  .hm-then{position:relative;left:auto;top:auto;width:auto;margin-left:18%;grid-template-columns:88px minmax(0,1fr);align-items:center;column-gap:12px}
  .hm-then .hm-tag{grid-column:1 / -1}
  .hm-jersey{aspect-ratio:1}
  .hm-then p{font-size:15.5px}
}

/* ---------- How it works: a SaaS dashboard, with each picture inside it ---------- */
@media(min-width:960px){
  .story-stage.has-ui{background:#f4f3f1;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line),0 34px 80px -48px #0c0a0980}
  .dash{position:absolute;inset:0;z-index:3;pointer-events:none}
  .dash-rail{position:absolute;left:0;top:0;bottom:0;width:78px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;background:#fff;border-right:1px solid var(--line)}
  .dash-logo{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px}
  .dash-logo img{width:32px;height:32px}
  .dash-nav{position:relative;display:grid;justify-items:center;gap:5px;width:62px;padding:10px 0 9px;border-radius:12px;color:var(--faint);transition:background .35s,color .35s}
  .dash-nav .icon{width:22px;height:22px}
  .dash-nav b{font-family:var(--sans);font-size:11.5px;font-weight:500}
  .dash-nav.is-on{background:#f4f3f1;color:var(--ink)}
  .dash-nav::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--hl);transform-origin:left;scale:var(--p,0) 1;opacity:0;transition:opacity .3s}
  .dash-nav.is-on::after{opacity:1}
  .dash-head{position:absolute;left:78px;right:0;top:0;height:66px;display:flex;align-items:center;gap:14px;padding:0 16px 0 26px;background:#fff;border-bottom:1px solid var(--line)}
  .dash-titles{position:relative;flex:1;min-width:0;height:30px}
  .dash-titles b{position:absolute;inset:0;font-family:var(--display);font-weight:420;font-size:22px;line-height:30px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .4s,translate .45s var(--ease)}
  .dash-titles b.is-on{opacity:1;translate:0 0}
  .dash-meta{font-size:13.5px;color:var(--faint);white-space:nowrap}
  .dash-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px 0 12px;border-radius:99px;background:var(--black);color:#fafafa;font-size:14px;font-weight:500;white-space:nowrap}
  .dash-btn .icon{width:17px;height:17px}
  .story-stage.has-ui .story-art{inset:0 0 0 78px;padding:90px 26px 26px}
  .story-stage.has-ui .story-art[data-art="1"]{padding-top:116px}
  .story-stage.has-ui .story-dots{display:none}
  .sui-mini{display:none}
}
@media(min-width:960px) and (max-width:1199px){.dash-meta{display:none}}
@media(max-width:959px){
  .dash{display:none}
  .story-step .story-art{padding-top:64px}
  .sui-mini{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;gap:8px;height:50px;padding:0 10px 0 14px;border-radius:12px 12px 0 0;background:#fff;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink)}
  .sui-mini img{width:20px;height:20px}
  .sui-mini span{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:32px;padding:0 13px 0 10px;border-radius:99px;background:#f4f3f1;font-weight:500;white-space:nowrap}
  .sui-mini .icon{width:16px;height:16px}
}

/* ---------- Built for sales, marketing and finance: a 2x2, each team with a plus ---------- */
.uses{position:relative;isolation:isolate}
@media(min-width:1200px){.uses .container{width:min(1320px,calc(100% - 80px))}}
.uses::before{content:"";position:absolute;left:50%;top:55%;z-index:-1;width:min(1100px,96%);height:75%;translate:-50% -50%;background:radial-gradient(50% 50% at 50% 50%,#0b63e81f,#0b63e800 72%);pointer-events:none}
.uses-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.use-intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:16px 40px 16px 6px}
.use-intro p{max-width:520px;font-family:var(--text);color:var(--muted)}
.uses-tabs{display:flex;gap:2px;width:max-content;max-width:100%;padding:4px;overflow-x:auto;scrollbar-width:none;border-radius:99px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),0 12px 28px -20px #0c0a0966}
.uses-tabs::-webkit-scrollbar{display:none}
.uses-tabs button{flex:none;height:40px;padding:0 17px;border-radius:99px;background:none;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted);transition:background .3s,color .3s,box-shadow .3s}
.uses-tabs button:hover{color:var(--ink)}
.uses-tabs button[aria-selected="true"]{background:var(--black);color:#fafafa;box-shadow:0 6px 16px -8px #0c0a09b3}
.uses-tabs.is-small button{height:36px;padding:0 14px;font-size:14px}
.use-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:350px;padding:28px 28px 26px;border-radius:22px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop);cursor:pointer;transition:background .3s,translate .35s var(--ease)}
.use-card:hover{background:#ffffffeb;translate:0 -2px}
.use-top{display:flex;align-items:center;gap:12px}
.use-plus{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;border-radius:50%;background:var(--black);color:#fff;box-shadow:0 8px 18px -10px #0c0a09b3;transition:scale .3s var(--ease)}
.use-plus .icon{width:20px;height:20px}
.use-card:hover .use-plus{scale:1.07}
.use-card h3{max-width:24ch;letter-spacing:-.02em;color:var(--ink)}
.use-card>p{max-width:44ch;font-family:var(--text);color:var(--muted)}
.use-card .team-viz{margin-top:auto}
/* A team's panel grows out of its card over the whole grid. */
.use-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;overflow:auto;padding:26px 28px 28px;border-radius:24px;background:linear-gradient(155deg,#fffffff7,#ffffffe8);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--line);box-shadow:var(--glass-rim),0 40px 80px -40px #0c0a0999;animation:up-in .5s var(--ease) both}
.use-panel[hidden]{display:none}
.use-panel.is-sales{transform-origin:100% 0}
.use-panel.is-marketing{transform-origin:0 100%}
.use-panel.is-finance{transform-origin:100% 100%}
@keyframes up-in{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
.up-head{display:flex;align-items:center;gap:12px}
.up-head .uses-tabs{margin-left:auto}
.use-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#f4f3f1;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s}
.use-close:hover{background:#ebe9e6}
.use-close .icon{width:20px;height:20px}
.up-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;flex:1;margin-top:24px}
.up-text{display:flex;flex-direction:column;gap:14px}
.up-text h3{font-size:calc(var(--card-h) + 6px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.up-text p{font-family:var(--text);font-size:var(--lead);line-height:1.5;color:var(--muted)}
.up-text .team-viz{margin-top:auto}
.use-set{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.uses[data-ind="0"] .use-set[data-ind="0"],.uses[data-ind="1"] .use-set[data-ind="1"],.uses[data-ind="2"] .use-set[data-ind="2"],.uses[data-ind="3"] .use-set[data-ind="3"],.uses[data-ind="4"] .use-set[data-ind="4"]{display:grid;animation:use-in .45s var(--ease) both}
@keyframes use-in{from{opacity:0;translate:10px 0}to{opacity:1;translate:0 0}}
.use-offer{display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -22px #0c0a0966}
.uo-media{aspect-ratio:16/11;overflow:hidden;background:#f0efed}
.uo-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.uo-media.is-cutout{display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,#fafaf9,#e7e5e4)}
.uo-media.is-cutout img{width:70%;height:70%;object-fit:contain;filter:none}
.uo-body{display:grid;gap:7px;padding:16px 18px 18px}
.uo-body b{font-family:var(--display);font-weight:420;font-size:20px;line-height:1.22;letter-spacing:-.015em;color:var(--ink)}
.uo-body span{font-family:var(--text);font-size:15px;line-height:1.5;color:var(--muted)}
.uo-body em{font-style:normal;font-weight:600;color:var(--hl)}
.js .uses-grid:not(.visible) .tv-row i{scale:0 1}
@media(prefers-reduced-motion:reduce){.use-panel,.use-set{animation:none!important}.js .uses-grid:not(.visible) .tv-row i{scale:var(--w) 1}}
@media(max-width:1199px){.use-intro{padding-right:16px}.up-body{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px}}
/* Phones: one column; a team's panel opens under its card. */
@media(max-width:809px){
  .uses-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .use-intro{padding:0 0 12px}
  .use-card{min-height:0;padding:22px 20px 20px}
  .use-panel{position:relative;inset:auto;padding:18px 16px 18px;border-radius:20px;transform-origin:50% 0;animation-name:up-drop}
  @keyframes up-drop{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
  .up-head{flex-wrap:wrap}
  .up-head .uses-tabs{order:3;margin:12px 0 0;max-width:100%}
  .use-close{margin-left:auto}
  .up-body{grid-template-columns:1fr;margin-top:14px}
  .up-text{display:none}
  .use-set{gap:10px}
  .uo-body{padding:12px 12px 14px}
  .uo-body b{font-size:16.5px}
  .uo-body span{font-size:13.5px}
}
@media(min-width:1200px){.is-light .hero{min-height:0;padding-bottom:110px}}
/* On tablets the dashboard leaves the coverage card narrow: its two tickers stack. */
@media(min-width:960px) and (max-width:1199px){.story .sg-tickers{grid-template-columns:1fr;gap:8px}.story .tk{padding:10px 14px 12px}.story .tk-num{font-size:30px}}
/* Inside the dashboard each picture starts at the top of the content area, as a dashboard's content does. */
@media(min-width:960px){.story-stage.has-ui .story-art{align-items:start}.story-stage.has-ui .scale-glass{margin-top:0}}

/* =====================================================================================================
   Prototype 36, seventh pass: a gradient system, the hero moment on it, simpler pictures, the gift card, and the
   teams as big symbols that open in place
   ===================================================================================================== */
/* ---------- The gradient system: a soft mesh of COVR's blues under a fine grain, for the panels product UI sits on ---------- */
/* The grain tile carries its own size, so it repeats by itself; it lies over the mesh in soft light. */
:root,.is-light{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--mesh:radial-gradient(42% 50% at 14% 16%,#ffffffe6 0%,#ffffff00 70%),radial-gradient(46% 56% at 88% 12%,#94c4ff 0%,#94c4ff00 72%),radial-gradient(60% 64% at 76% 92%,#0b63e8 0%,#0b63e800 70%),radial-gradient(50% 54% at 16% 88%,#5a95ff 0%,#5a95ff00 72%),radial-gradient(40% 44% at 50% 50%,#dbe9ff 0%,#dbe9ff00 76%),#a9c9ff}
.grad-panel{position:relative;isolation:isolate;overflow:hidden;background:var(--mesh)}
.grad-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain);mix-blend-mode:soft-light;opacity:.7;pointer-events:none}

/* ---------- The hero: the moment on the gradient, the reward under the clip card and a little to the right ---------- */
.hero-visual{display:grid;place-items:center;min-height:620px;padding:40px;border-radius:30px;box-shadow:0 40px 90px -60px #0b63e8b3}
.hero-moment{width:calc(460px * var(--k,1));max-width:none;height:calc(540px * var(--k,1));margin:0}
/* The pair stays centred on the panel: the stage sits lower while the card is closed and rises as it opens. */
.hm-stage{width:460px;height:540px;translate:0 calc(141px * var(--k,1));transition:translate .65s var(--ease)}
.hero-moment.is-open .hm-stage{translate:0 calc(10px * var(--k,1))}
.hm-if,.hm-then{background:linear-gradient(155deg,#fffffff0,#ffffffc7);border-color:#ffffffb3;box-shadow:inset 0 1px 0 #fff,0 22px 50px -26px #0b3a8a8c}
.hero-moment.is-hit .hm-if{box-shadow:inset 0 1px 0 #fff,0 0 0 5px #ffffff59,0 26px 56px -26px #0b3a8acc}
/* The link drops from the bottom of the clip card straight onto the jersey. */
.hm-link{left:158px;top:76px;width:4px;height:52px;transition:top .65s var(--ease)}
.hero-moment.is-open .hm-link{top:338px}
.hm-drop{display:block}
.hm-path{stroke:#ffffffb3}
.hm-node{offset-path:path('M2 0V52');box-shadow:0 0 0 4px #ffffff99}
.hm-then{left:96px;top:128px;width:364px;grid-template-columns:104px minmax(0,1fr);align-items:center;column-gap:16px;padding:12px 16px 12px 12px;transition:top .65s var(--ease),opacity .5s,scale .6s var(--ease),box-shadow .5s}
.hero-moment.is-open .hm-then{top:390px}
.hero-moment.is-then .hm-then{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px var(--hl),0 24px 50px -24px #0b3a8acc}
.hm-jersey{width:104px;aspect-ratio:1;border-radius:14px}
.hm-then-text{display:grid;gap:8px;justify-items:start}
/* The words in Geist, the interface face. */
.hm-say,.hm-then p{font-family:var(--sans);font-weight:400;letter-spacing:-.005em}
.hm-say{font-size:17px;line-height:1.4;text-wrap:balance}
.hm-say b,.hm-then p b{font-weight:600}
.hm-say b{white-space:nowrap}
.hm-then p{font-size:15.5px;line-height:1.38}
@media(prefers-reduced-motion:reduce){.hm-stage,.hm-link,.hm-then{transition:none}}
@media(max-width:1199px){.hero-visual{min-height:600px;margin-top:48px}.hero-moment{margin:0}}
/* How it works follows straight on: a shorter run from the hero into its heading. */
@media(min-width:1200px){.is-light .hero{padding-bottom:56px}}
@media(max-width:809px){
  .hero-visual{min-height:0;margin-top:32px;padding:18px 16px 22px;border-radius:24px}
  .hero-moment{width:100%;height:auto}
  .hm-stage,.hero-moment.is-open .hm-stage{width:auto;height:auto;translate:none}
  .hm-say{font-size:15.5px}
  .hm-link,.hero-moment.is-open .hm-link{left:auto;top:auto;height:44px;margin-left:94px}
  .hm-node{offset-path:path('M2 0V44')}
  .hm-then,.hero-moment.is-open .hm-then{left:auto;top:auto;width:auto;margin-left:44px;grid-template-columns:84px minmax(0,1fr);column-gap:12px;padding:10px 12px 10px 10px}
  .hm-jersey{width:84px}
  .hm-then p{font-size:14.5px}
}

/* ---------- How it works: the dashboard sits on the gradient, and each picture keeps only what matters ---------- */
@media(min-width:960px){
  .story-stage.has-ui{background:var(--mesh);border-radius:26px;box-shadow:0 40px 90px -60px #0b63e8b3}
  .story-stage.has-ui::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain);mix-blend-mode:soft-light;opacity:.7;pointer-events:none}
  .story-stage.has-ui::before{content:"";inset:26px;z-index:0;border-radius:18px;background:#f4f3f1;-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px #ffffffb3,0 30px 60px -34px #0b3a8a99}
  .dash{inset:26px;overflow:hidden;border-radius:18px}
  .story-stage.has-ui .story-art{inset:0;padding:112px 50px 48px 128px}
  .story-stage.has-ui .story-art:not([data-art="1"]){align-items:center}
}
/* Small laptops: a thinner gradient frame, so the pictures keep their room. */
@media(min-width:960px) and (max-width:1199px){
  .story-stage.has-ui::before,.dash{inset:16px}
  .story-stage.has-ui .story-art{padding:102px 34px 34px 112px}
}
@media(max-width:959px){
  .story-step .story-art{padding:78px 26px 26px;background:var(--mesh);border-radius:22px;box-shadow:none}
  .story-step .story-art::before{content:"";position:absolute;inset:12px;border-radius:14px;background:#f4f3f1}
  .story-step .story-art>:not(.sui-mini){position:relative}
  .sui-mini{inset:12px 12px auto;border-radius:14px 14px 0 0}
}
@media(max-width:809px){.story-step .story-art{padding:74px 22px 24px}}
/* No frames round the pictures, and nothing extra in them: the goal is typed straight into its field. */
.story .seat-demo,.story .scale-glass,.story .bs-demo{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.story .goal-entry{left:0;right:0;padding:0;border-radius:0;background:none;box-shadow:none}
.story .goal-field{background:#fff}
.story .scale-glass::after{content:none}
.story .sg-dial-hint,.story .sg-x{display:none}
.goal-go{width:44px;padding:0;justify-content:center}
.goal-go .icon{width:18px;height:18px}
/* Coverage: the two numbers with the dial beside them, the chart, and what COVR pays. */
.story .scale-glass{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tk dial" "chart chart" "pill pill";align-items:center;column-gap:24px;row-gap:16px;width:100%;overflow:visible}
.story .scale-glass .sg-dial-wrap{position:static;grid-area:dial}
.story .scale-glass .sg-dial{width:124px;height:124px}
.story .scale-glass .sg-dial-read b{font-size:28px}
.story .sg-tickers{grid-area:tk;margin:0;grid-template-columns:1fr;gap:8px}
.story .tk{padding:10px 14px 12px}
.story .tk-num{font-size:30px}
.story .sg-chart{grid-area:chart;margin-top:4px}
.story .scale-glass .sg-pill{grid-area:pill;margin-top:4px}
@media(max-width:809px){.story .scale-glass{column-gap:14px;row-gap:14px}.story .scale-glass .sg-dial{width:96px;height:96px}.story .scale-glass .sg-dial-read b{font-size:22px}.story .tk-num{font-size:24px}}
/* Campaign: the three sends, each with its button on the right. */
.bs-demo .bs-list li{grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;padding:12px 14px}
.bs-demo .bs-list li>img{grid-row:1;width:40px;height:40px}
.bs-demo .bs-list li>div{grid-column:2;padding-top:0}
.bs-demo .bs-list .ld-btn{grid-column:3;grid-row:1;align-self:center}
@media(max-width:1199px){.bs-demo .bs-list li{grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto}.bs-demo .bs-list .ld-btn{grid-column:2;grid-row:2;justify-self:start;margin-top:8px}}

/* ---------- Reward your fans: a gift card of team credit, paid for by COVR and spent with the team ---------- */
.gift-demo{--a:clamp(0,var(--p,1) / .18,1);--b:clamp(0,(var(--p,1) - .18) / .12,1);--c:clamp(0,(var(--p,1) - .28) / .2,1);--e:clamp(0,(var(--p,1) - .86) / .12,1);display:grid;justify-items:center;width:100%;max-width:470px;margin:0 auto}
.gd-pay{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--card-shadow);font-size:15.5px;color:var(--ink);opacity:var(--a);translate:0 calc((1 - var(--a)) * 8px)}
.gd-covr{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--black)}
.gd-covr img{width:17px;height:17px;filter:brightness(0) invert(1)}
.gd-pay b{font-weight:600;color:var(--hl)}
.gd-line{position:relative;width:2px;height:34px;background:#d6d3d1}
.gd-line i{position:absolute;inset:0;background:var(--hl);transform-origin:top;scale:1 var(--b)}
.gd-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;width:min(320px,100%);aspect-ratio:1.586;padding:18px 20px 16px;border-radius:18px;color:#fff;background:radial-gradient(120% 95% at 0% 0%,#1d4f9e 0%,#0c2340 58%,#081a30 100%);box-shadow:0 34px 60px -30px #0c2340e6,inset 0 1px 0 #ffffff38;opacity:calc(.25 + var(--c) * .75);translate:0 calc((1 - var(--c)) * 18px);rotate:calc((1 - var(--c)) * -3deg)}
.gd-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#ffffff00 30%,#ffffff26 46%,#ffffff00 60%);pointer-events:none}
.gd-card::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.55;pointer-events:none}
.gd-top{position:relative;z-index:1;display:flex;align-items:center;gap:10px}
.gd-top img{width:34px;height:34px;border-radius:50%;background:#fff}
.gd-top span{font-weight:600;font-size:15px}
.gd-top em{margin-left:auto;font-style:normal;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.gd-value{position:relative;z-index:1;font-family:var(--display);font-weight:420;font-size:46px;line-height:1;letter-spacing:-.02em}
.gd-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;font-size:13px;opacity:.85}
.gd-foot i{width:36px;height:26px;border-radius:6px;background:linear-gradient(135deg,#f5f5f4,#a6a09b);opacity:.9}
.gd-spend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.gd-spot{--k:clamp(0,(var(--p,1) - (.56 + var(--i) * .1)) / .1,1);display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 11px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--card-shadow);font-size:14.5px;opacity:calc(.3 + var(--k) * .7);translate:0 calc((1 - var(--k)) * 6px)}
.gd-spot .icon{width:18px;height:18px;color:var(--hl)}
.gd-spot b{font-weight:500;color:var(--ink)}
.gd-loop{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;color:var(--muted);opacity:var(--e)}
.gd-loop .icon{width:18px;height:18px;color:var(--hl)}
@media(max-width:809px){.gd-value{font-size:38px}.gd-pay{font-size:14px}.gd-spot{font-size:13.5px;padding:8px 12px 8px 9px}}

/* ---------- Built for sales, marketing and finance: a big symbol, the name and one line; a team opens in the grid's place ---------- */
.use-card{justify-content:space-between;min-height:268px;padding:30px}
.use-plus{position:absolute;right:24px;top:24px;margin:0}
.use-sym{display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:linear-gradient(160deg,#5a95ff 0%,#0b63e8 55%,#0a50c2 100%);color:#fff;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #00000026,0 16px 30px -14px #0b63e8d9}
.use-sym .icon{width:40px;height:40px;stroke-width:1.5}
.use-sym.is-small{width:58px;height:58px;border-radius:18px}
.use-sym.is-small .icon{width:30px;height:30px}
.use-say{display:grid;gap:10px}
.use-card .use-name,.up-title .use-name{max-width:none;font-family:var(--display);font-weight:420;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.use-card .use-name{font-size:56px}
.up-title .use-name{font-size:44px}
.use-say p{max-width:32ch;font-family:var(--text);font-size:var(--lead);line-height:1.4;color:var(--muted)}
/* The four cells hold their places, so an open team can take all four without moving anything. */
@media(min-width:810px){
  .uses-grid>.use-intro{grid-area:1 / 1}
  .uses-grid>.use-card.is-sales{grid-area:1 / 2}
  .uses-grid>.use-card.is-marketing{grid-area:2 / 1}
  .uses-grid>.use-card.is-finance{grid-area:2 / 2}
  .use-panel{position:relative;inset:auto;z-index:1;grid-area:1 / 1 / 3 / 3}
  .uses[data-open] .uses-grid>.use-intro,.uses[data-open] .uses-grid>.use-card{visibility:hidden}
}
.use-panel{display:flex;flex-direction:column;padding:28px 30px 30px;border-radius:22px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop);animation:up-take .45s var(--ease) both}
.use-panel[hidden]{display:none}
@keyframes up-take{from{opacity:0}to{opacity:1}}
.up-head{align-items:center;gap:16px}
.up-title{display:grid;gap:6px;min-width:0}
.up-title p{font-family:var(--text);font-size:var(--lead);line-height:1.4;color:var(--muted)}
.up-body{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:30px;margin-top:24px}
.use-panel .uo-media{aspect-ratio:16/9}
.up-proof{display:flex;flex-direction:column;gap:14px}
.up-proof>p{font-family:var(--text);font-size:var(--card-p);line-height:1.5;color:var(--muted)}
.up-proof .team-viz{margin-top:auto}
@media(prefers-reduced-motion:reduce){.use-panel{animation:none}}
@media(max-width:1199px){.use-card .use-name{font-size:48px}.up-body{grid-template-columns:1fr}.up-proof{display:none}}
@media(max-width:809px){
  .use-card{min-height:0;gap:22px;padding:24px 22px}
  .use-plus{right:18px;top:18px}
  .use-sym{width:64px;height:64px;border-radius:20px}
  .use-sym .icon{width:32px;height:32px}
  .use-card .use-name{font-size:40px}
  .use-panel{padding:20px 18px}
  .up-head{position:relative;padding-right:52px}
  .up-head .use-close{position:absolute;right:0;top:0}
  /* On a phone each offer is a row: its picture beside its words. */
  .use-panel .use-set{grid-template-columns:1fr;gap:10px}
  .use-panel .use-offer{display:grid;grid-template-columns:108px minmax(0,1fr)}
  .use-panel .uo-media{aspect-ratio:auto;height:100%;min-height:118px}
  .use-panel .uo-body{align-content:center;padding:12px 14px}
  .uses[data-open="0"] .use-card.is-sales,.uses[data-open="1"] .use-card.is-marketing,.uses[data-open="2"] .use-card.is-finance{display:none}
  .up-title .use-name{font-size:34px}
  .use-sym.is-small{width:48px;height:48px;border-radius:15px}
  .use-sym.is-small .icon{width:24px;height:24px}
}

/* =====================================================================================================
   Prototype 36, eighth pass: the black wordmark and a floating header, a smaller headline, the reward that opens
   like the clip, benefits under the hero, the teams in a row, the dial in the payout card, the vendors round COVR,
   and the gradient behind the pictures through the page
   ===================================================================================================== */
/* ---------- Brand icons: a fine black line and one blue triangle from the COVR mark ---------- */
.bi{display:block;overflow:visible}
.bi-tri{fill:var(--hl);stroke:none}

/* ---------- The header: the black wordmark; scrolled, it floats as a rounded, frosted bar ---------- */
.brand .brand-word{display:block;width:auto;height:26px}
.site-footer .brand .brand-word{height:30px}
.site-header{width:100%;margin-inline:auto;border:1px solid transparent;transition:top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),border-radius .45s var(--ease),background .35s,box-shadow .45s,border-color .35s}
.site-header .nav-inner{transition:padding .45s var(--ease)}
.site-header.scrolled,.is-light .site-header.scrolled{top:12px;width:min(1120px,calc(100% - 32px));height:60px;border-color:#ffffffb3;border-radius:99px;background:#ffffff94;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 #ffffffe6,0 16px 40px -22px #0c0a0973}
.site-header.scrolled .nav-inner{width:100%;padding:0 10px 0 24px}
@media(max-width:809px){
  .brand .brand-word,.site-footer .brand .brand-word{width:auto;height:22px}
  .site-header.scrolled,.is-light .site-header.scrolled{top:10px;width:calc(100% - 20px);height:52px}
  .site-header.scrolled .nav-inner{padding:0 4px 0 16px}
  .site-header.scrolled nav{top:calc(100% + 8px);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 40px -24px #0c0a0980}
}

/* ---------- The hero: the headline a fifth smaller, the line under it a little larger ---------- */
.is-light .hero h1{font-size:48px;line-height:1.08}
.is-light .hero-description{font-size:21px;line-height:1.5}
@media(min-width:1200px) and (max-width:1339px){.is-light .hero h1{font-size:42px}}
@media(max-width:1199px){.is-light .hero h1{font-size:40px}.is-light .hero-description{font-size:20px}}
@media(max-width:809px){.is-light .hero h1{font-size:32px;line-height:1.1}.is-light .hero-description{font-size:18px}}

/* ---------- The hero moment: wider, the clip card to the left, the reward to the right, opening like the clip ---------- */
.hero-visual{padding:28px}
.hero-moment{width:calc(640px * var(--k,1));height:calc(540px * var(--k,1))}
.hm-stage{width:640px;height:540px;translate:0 calc(162px * var(--k,1))}
.hero-moment.is-open .hm-stage{translate:0 calc(31px * var(--k,1))}
.hero-moment.is-then:not(.is-open) .hm-stage{translate:0 calc(16px * var(--k,1))}
.hm-link{left:282px}
.hm-then{left:240px;top:128px;width:400px;height:88px;display:block;padding:0;overflow:hidden;border-radius:22px;transition:top .65s var(--ease),height .65s var(--ease),opacity .5s,scale .6s var(--ease),box-shadow .5s}
.hero-moment.is-open .hm-then{top:390px}
.hero-moment.is-then:not(.is-open) .hm-then{height:380px}
/* The jersey, cut out, sits straight on the card: small in its corner, then large under the words. */
.hm-jersey{position:absolute;z-index:1;left:12px;top:12px;width:64px;height:64px;aspect-ratio:auto;object-fit:contain;border-radius:0;background:none;filter:drop-shadow(0 6px 10px #0c234040);transition:top .65s var(--ease),width .65s var(--ease),height .65s var(--ease),filter .65s}
.hero-moment.is-then:not(.is-open) .hm-jersey{top:88px;width:376px;height:280px;filter:drop-shadow(0 20px 26px #0c234059)}
.hm-then-row{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:88px;padding:0 16px 0 88px;transition:padding .65s var(--ease)}
.hero-moment.is-then:not(.is-open) .hm-then-row{padding-left:16px}
.hm-then-row p{margin:0;min-width:0;font-family:var(--sans);font-weight:400;font-size:15.5px;line-height:1.38;letter-spacing:-.005em;color:var(--ink)}
.hm-then-row p b{font-weight:600;color:var(--hl);white-space:nowrap}
.hm-say .hm-who{white-space:nowrap}
/* The wordmark set into a heading, at the height of its capitals. */
.covr-word{font-size:1em;vertical-align:baseline}
.covr-word img{width:auto;height:.7em}
@media(prefers-reduced-motion:reduce){.hm-jersey,.hm-then-row{transition:none}}
@media(max-width:809px){
  .hero-visual{padding:18px 14px 20px}
  .hero-moment{width:100%;height:auto}
  .hm-stage,.hero-moment.is-open .hm-stage,.hero-moment.is-then:not(.is-open) .hm-stage{display:flex;flex-direction:column;justify-content:center;width:auto;height:auto;min-height:486px;translate:none}
  /* Room for three lines in each card. */
  .hm-if,.hm-row{height:100px}
  .hero-moment.is-open .hm-if{height:312px}
  .hero-moment.is-open .hm-clip{top:100px}
  .hm-clip{top:24px}
  .hm-link,.hero-moment.is-open .hm-link{left:auto;top:auto;height:44px;margin-left:74px}
  .hm-then,.hero-moment.is-open .hm-then{position:relative;left:auto;top:auto;width:auto;height:124px;margin-left:30px}
  .hero-moment.is-then:not(.is-open) .hm-then{height:342px}
  .hm-jersey{left:10px;top:30px;width:64px;height:64px}
  .hero-moment.is-then:not(.is-open) .hm-jersey{left:10px;top:124px;width:calc(100% - 20px);height:206px}
  .hm-then-row{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;height:124px;padding:0 12px 0 84px}
  .hero-moment.is-then:not(.is-open) .hm-then-row{padding-left:14px}
  .hm-then-row p{font-size:14.5px}
  .hm-say{font-size:15px}
}

/* ---------- Soft gradient cards: a pale wash of the highlight blue with a fine grain ---------- */
.benefit-card,.use-card,.use-panel{position:relative;isolation:isolate;overflow:hidden;border:0;background:radial-gradient(80% 70% at var(--gx,100%) var(--gy,0%),#cfe0ff 0%,#cfe0ff00 70%),radial-gradient(70% 60% at calc(100% - var(--gx,100%)) calc(100% - var(--gy,0%)),#e6efff 0%,#e6efff00 72%),linear-gradient(165deg,#fff 0%,#f7f9fd 55%,#eef3fc 100%);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px #ffffffc7,0 26px 56px -38px #0b3a8a73}
.benefit-card::after,.use-card::after,.use-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain);mix-blend-mode:multiply;opacity:.09;pointer-events:none}
.benefit-card:nth-child(2),.use-card.is-marketing{--gx:0%;--gy:0%}
.benefit-card:nth-child(3),.use-card.is-finance{--gx:100%;--gy:100%}
.benefit-card:nth-child(4){--gx:0%;--gy:100%}

/* ---------- Benefits: straight under the hero, four cards ---------- */
.benefits{padding:24px 0 48px}
.benefit-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.benefit-card{--delay:calc(var(--i) * .08s);display:flex;flex-direction:column;min-height:310px;padding:26px 24px 28px;border-radius:24px}
.benefit-card .bi{width:48px;height:48px;color:var(--ink)}
.benefit-card h3{margin-top:60px;font-size:var(--card-h);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.benefit-card p{margin-top:12px;font-family:var(--text);font-size:var(--card-p);line-height:1.5;color:var(--muted)}
@media(max-width:1199px){.benefit-row{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit-card{min-height:0}.benefit-card h3{margin-top:40px}}
@media(max-width:809px){.benefits{padding:16px 0 32px}.benefit-row{grid-template-columns:minmax(0,1fr);gap:12px}.benefit-card{min-height:0;padding:22px 20px 24px}.benefit-card h3{margin-top:28px}}

/* ---------- The teams: the heading above, three cards in a row, a brand icon on each ---------- */
.uses-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:48px;margin-bottom:36px}
.uses-head p{max-width:520px;font-family:var(--text);font-size:var(--lead);line-height:1.5;color:var(--muted)}
@media(min-width:810px){
  .uses-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uses-grid>.use-card.is-sales{grid-area:1 / 1}
  .uses-grid>.use-card.is-marketing{grid-area:1 / 2}
  .uses-grid>.use-card.is-finance{grid-area:1 / 3}
  .use-panel{grid-area:1 / 1 / 2 / 4}
}
.use-card{min-height:300px;padding:30px;border-radius:26px}
.use-card:hover{translate:0 -3px}
.use-ic{display:block;width:60px;height:60px;color:var(--ink)}
.use-ic .bi{width:100%;height:100%}
.use-ic.is-small{flex:none;width:46px;height:46px}
.use-card .use-name{font-size:52px}
.use-panel{padding:26px 28px 28px;border-radius:26px}
.up-title .use-name{font-size:40px}
.up-body{grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:24px;margin-top:22px}
.use-set{gap:14px}
.use-panel .use-offer{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.use-panel .uo-media{aspect-ratio:auto;height:100%;min-height:200px}
.use-panel .uo-body{align-content:center;padding:18px 20px}
@media(max-width:1199px){.use-card{min-height:280px}.use-card .use-name{font-size:44px}.up-body{grid-template-columns:minmax(0,1fr)}}
@media(max-width:959px){.uses-head{gap:32px}.use-card{padding:24px}.use-card .use-name{font-size:38px}.use-ic{width:52px;height:52px}}
@media(max-width:809px){
  .uses-head{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:24px}
  .use-card{min-height:0;padding:24px 22px}
  .use-card .use-name{font-size:40px}
  .up-title .use-name{font-size:34px}
  .use-ic.is-small{width:40px;height:40px}
  .use-panel{padding:20px 18px}
  .use-panel .use-offer{grid-template-columns:108px minmax(0,1fr)}
  .use-panel .uo-media{min-height:118px}
  .use-panel .uo-body{padding:12px 14px}
}

/* ---------- Coverage: the numbers side by side, the chart, and the payout card with the dial in it ---------- */
.story .scale-glass{grid-template-columns:minmax(0,1fr);grid-template-areas:"tk" "chart" "pill"}
.story .sg-tickers{grid-template-columns:repeat(2,minmax(0,1fr))}
.story .scale-glass .sg-pill{display:flex;align-items:center;gap:16px;max-width:none;padding:12px 20px 12px 12px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--card-shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
.story .scale-glass .sg-pill .sg-dial{flex:none;width:92px;height:92px}
.story .scale-glass .sg-pill .sg-dial::after{inset:-5px}
.story .scale-glass .sg-pill .sg-dial-read b{font-size:21px}
.story .scale-glass .sg-pill .sg-dial-read small{font-size:10.5px}
.sg-pill-text{display:grid;gap:4px;min-width:0}
.sg-pill-text>span{font-size:16px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.sg-pill-text>small{font-size:13px;line-height:1.35;color:var(--muted)}
@media(max-width:809px){.story .scale-glass .sg-pill{gap:12px;padding:10px 14px 10px 10px}.story .scale-glass .sg-pill .sg-dial{width:76px;height:76px}.story .scale-glass .sg-pill .sg-dial-read b{font-size:18px}.sg-pill-text>span{font-size:14.5px}.sg-pill-text>small{font-size:12px}}

/* ---------- Vendors: one line, and the tools in two rings round COVR on the gradient ---------- */
.hub{height:460px;margin-top:44px;border-radius:32px;box-shadow:0 40px 90px -60px #0b63e8b3}
.hub-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-rings ellipse{fill:none;stroke:#ffffff8c;stroke-width:1.2;vector-effect:non-scaling-stroke}
.hub-core{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:linear-gradient(155deg,#fffffff2,#ffffffcc);box-shadow:inset 0 1px 0 #fff,0 0 0 10px #ffffff33,0 24px 50px -24px #0b3a8acc}
.hub-core img{width:62px;height:62px}
.hub-core::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffffffb3;animation:hub-pulse 3.2s ease-out infinite}
@keyframes hub-pulse{from{scale:1;opacity:.9}to{scale:2.1;opacity:0}}
.hub-logo{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff59,0 14px 28px -16px #0b3a8acc;animation:hub-float 6s ease-in-out calc(var(--i) * -.55s) infinite}
.hub-logo img{width:100%;height:100%;border-radius:50%}
@keyframes hub-float{50%{translate:0 -6px}}
.motion-paused .hub-core::before,.motion-paused .hub-logo{animation-play-state:paused}
@media(max-width:809px){.hub{height:360px;margin-top:28px;border-radius:24px}.hub-core{width:92px;height:92px;margin:-46px 0 0 -46px}.hub-core img{width:46px;height:46px}.hub-logo{width:44px;height:44px;margin:-22px 0 0 -22px;box-shadow:0 0 0 3px #ffffff59,0 10px 20px -12px #0b3a8acc}}

/* ---------- The case photo in a gradient frame ---------- */
.case-photo,.is-light .case-photo{border:0;padding:18px;border-radius:30px;box-shadow:0 40px 90px -60px #0b63e8b3}
.case-photo>img{position:relative;border-radius:18px}
.case-photo figcaption{left:18px;right:18px;bottom:18px;padding:30px 16px 12px;border-radius:0 0 18px 18px;background:linear-gradient(#0c0a0900,#0c0a098c);color:#fff}
@media(max-width:809px){.case-photo,.is-light .case-photo{padding:12px;border-radius:24px}.case-photo>img{border-radius:14px}.case-photo figcaption{left:12px;right:12px;bottom:12px;border-radius:0 0 14px 14px}}

/* ---------- The closing on the gradient ---------- */
.closing,.is-light .closing{height:auto;padding:32px 0 96px;overflow:visible;background:none}
.closing-inner{height:560px;padding:72px 40px 0;border-radius:32px;box-shadow:0 40px 90px -60px #0b63e8b3}
.closing .grad-text{color:#44403c;-webkit-text-fill-color:#44403c}
.closing-copy p{color:#44403c}
.closing-preview{border-color:#ffffffa6;box-shadow:0 40px 80px -30px #0b3a8acc}
.window-brand img{display:inline-block;width:auto;height:16px;vertical-align:-2px}
@media(max-width:809px){.closing,.is-light .closing{padding:16px 0 64px}.closing-inner{height:520px;padding:44px 18px 0;border-radius:24px}}

/* =====================================================================================================
   Prototype 36, ninth pass: "Launch your campaign" in place of "Join waitlist", and the flow on its own page
   ===================================================================================================== */
/* ---------- The header's button: a quiet outline beside Book a demo; on phones it is in the menu ---------- */
.nav-launch{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:99px;background:#ffffff8c;box-shadow:inset 0 0 0 1px var(--line-strong);font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .25s,box-shadow .25s}
.nav-launch:hover,.nav-launch[aria-current="page"]{background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.nav-ctas{gap:10px}
.site-header nav .nav-launch-m{display:none}
@media(max-width:1239px){.nav-launch{display:none}}
@media(max-width:809px){.site-header nav .nav-launch-m{display:block;margin-top:6px;padding:14px 18px;border-radius:99px;background:var(--black);color:#fafafa;text-align:center;font-weight:500}.site-header nav .nav-launch-m::after{content:none}}

/* ---------- The flow: the ask on the left, one group of questions at a time on the right, on the gradient ---------- */
:root,.is-light{--error:#b42318}
.launch-page main{padding:136px 0 104px}
.launch-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.launch-intro{position:sticky;top:120px;display:grid;gap:22px}
.launch-intro h1{font-size:48px;line-height:1.08;letter-spacing:-.02em}
.launch-lead{max-width:34ch;font-family:var(--text);font-size:19px;line-height:1.5;color:var(--muted)}
.launch-steps{display:grid;gap:2px;margin:8px 0 0;padding:0;list-style:none}
.launch-steps button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 12px 6px 6px;border-radius:14px;background:none;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--faint);text-align:left;transition:background .25s,color .25s}
.launch-steps button span{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:13px;transition:background .25s,color .25s,box-shadow .25s}
.launch-steps .is-done button{color:var(--ink);cursor:pointer}
.launch-steps .is-done button span{background:var(--ink);color:#fafafa;box-shadow:none}
.launch-steps .is-on button{color:var(--ink);background:#ffffffb3;box-shadow:inset 0 0 0 1px var(--line)}
.launch-steps .is-on button span{background:var(--hl);color:#fff;box-shadow:none}
.launch-steps .is-done button:hover{background:#ffffff80}
.launch-steps button:disabled{cursor:default}
.launch-note{max-width:40ch;font-family:var(--text);font-size:14.5px;line-height:1.55;color:var(--muted)}
.launch-panel{padding:28px;border-radius:32px;box-shadow:0 40px 90px -60px #0b63e8b3}
.lf-form,.lf-done{position:relative;padding:30px 34px 32px;border-radius:24px;background:linear-gradient(155deg,#fffffff7,#ffffffe6);box-shadow:inset 0 1px 0 #fff,0 22px 50px -26px #0b3a8a8c}
.lf-progress{height:4px;overflow:hidden;border-radius:99px;background:#1c19170f}
.lf-progress i{display:block;height:100%;border-radius:inherit;background:var(--hl);transform-origin:0 50%;scale:var(--at,.2) 1;transition:scale .5s var(--ease)}
.lf-count{margin-top:14px;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted)}
.lf-step{min-width:0;margin:0;padding:0;border:0}
.lf-step:not([hidden]){animation:lf-in .4s var(--ease) both}
@keyframes lf-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.lf-step h2{margin-top:6px;font-size:32px;line-height:1.15;letter-spacing:-.02em;outline:none}
.lf-fields{display:grid;gap:22px;margin-top:26px}
.lf-field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.lf-field>label,.lf-field>legend{display:flex;align-items:baseline;gap:8px;padding:0;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.lf-opt{font-size:12.5px;font-weight:400;color:var(--faint)}
.lf-field input,.lf-field select,.lf-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lf-field select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px 18px no-repeat}
.lf-field textarea{min-height:124px;resize:vertical}
.lf-field input::placeholder,.lf-field textarea::placeholder{color:var(--faint-2)}
.lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:none;border-color:var(--hl);box-shadow:0 0 0 4px #0b63e824}
.lf-field [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px #b4231814}
.lf-hint{font-family:var(--text);font-size:13.5px;line-height:1.5;color:var(--muted)}
.lf-err{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--error)}
.lf-money{position:relative;display:block}
.lf-money>span{position:absolute;left:15px;top:50%;translate:0 -50%;font-family:var(--sans);font-size:16px;color:var(--muted);pointer-events:none}
.lf-money input{padding-left:30px}
.lf-chips{display:flex;flex-wrap:wrap;gap:8px}
.lf-chip{position:relative;display:inline-flex}
.lf-chip input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.lf-chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong);font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);transition:background .2s,color .2s,box-shadow .2s}
.lf-chip input:checked+span{background:var(--black);color:#fafafa;box-shadow:none}
.lf-chip input:focus-visible+span{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hl)}
.lf-nav{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.lf-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border-radius:99px;background:none;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.lf-back:hover{background:#1c19170a;color:var(--ink)}
.lf-back .icon{width:18px;height:18px}
.lf-next{margin-left:auto}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-review{display:grid;gap:10px}
.lf-review section{padding:16px 18px;border-radius:16px;background:#f7f6f4;box-shadow:inset 0 0 0 1px var(--line)}
.lf-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lf-review h3{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink)}
.lf-edit{min-height:32px;padding:0 10px;border-radius:99px;background:none;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--hl)}
.lf-edit:hover{background:#0b63e814}
.lf-review dl{display:grid;gap:8px;margin:10px 0 0}
.lf-review dl div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:14px}
.lf-review dt{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--muted)}
.lf-review dd{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.lf-none{margin-top:6px;font-family:var(--sans);font-size:13.5px;color:var(--faint)}
.lf-note{font-family:var(--sans);font-size:13px;color:var(--muted)}
.lf-done{display:grid;justify-items:start;gap:14px;padding:44px 40px 40px}
.lf-done-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--hl);color:#fff;box-shadow:0 12px 26px -12px #0b63e8cc}
.lf-done-ic .icon{width:26px;height:26px}
.lf-done h2{margin-top:6px;font-size:40px;line-height:1.1;letter-spacing:-.02em;outline:none}
.lf-done p{max-width:44ch;font-family:var(--text);font-size:17px;line-height:1.5;color:var(--muted)}
.lf-done .lf-preview{font-size:13.5px;color:var(--faint)}
.lf-done .button{margin-top:10px}
@media(prefers-reduced-motion:reduce){.lf-step:not([hidden]){animation:none}.lf-progress i{transition:none}}
@media(max-width:1099px){
  .launch-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .launch-intro{position:static}
  .launch-steps{display:flex;flex-wrap:wrap;gap:6px}
  .launch-steps button{width:auto;min-height:40px;padding:4px 14px 4px 5px;font-size:14px}
  .launch-steps button span{width:28px;height:28px}
}
@media(max-width:809px){
  .launch-page main{padding:96px 0 64px}
  .launch-intro{gap:16px}
  .launch-intro h1{font-size:34px}
  .launch-lead{font-size:17px}
  .launch-steps li:not(.is-on) button{font-size:0;gap:0;padding:4px}
  .launch-steps li:not(.is-on) button span{font-size:13px}
  .launch-panel{margin-inline:-6px;padding:12px;border-radius:24px}
  .lf-form,.lf-done{padding:22px 18px 22px;border-radius:18px}
  .lf-step h2{font-size:26px}
  .lf-fields{gap:20px;margin-top:20px}
  .lf-review dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .lf-done{padding:30px 22px}
  .lf-done h2{font-size:32px}
}

/* =====================================================================================================
   Prototype 36, tenth pass: one content width, a smaller hero, the switcher above the teams, and panels that explain
   ===================================================================================================== */
/* ---------- One content width: the hero, How it works and the teams line up with the rest of the page ---------- */
.is-light .hero .container,.is-light .process .container,.uses .container{width:min(1072px,calc(100% - 80px))}
@media(max-width:809px){.is-light .hero .container,.is-light .process .container,.uses .container{width:calc(100% - 40px)}}
/* ---------- The hero, smaller, in that width ---------- */
.is-light .hero h1{font-size:42px}
.is-light .hero-description{font-size:20px}
.hero-visual{min-height:0}
@media(min-width:1200px) and (max-width:1339px){.is-light .hero h1{font-size:40px}}
@media(max-width:1199px){.is-light .hero h1{font-size:38px}.is-light .hero-description{font-size:19px}}
@media(max-width:809px){.is-light .hero h1{font-size:30px}.is-light .hero-description{font-size:17px}}

/* ---------- The teams: the industry switcher above the cards ---------- */
.uses-head{margin-bottom:26px}
.uses-bar{display:flex;margin-bottom:22px}
.uses-bar .uses-tabs{max-width:100%}

/* ---------- A team's panel: what it does for the team first, then the examples, smaller ---------- */
.up-head .use-close{margin-left:auto}
.up-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:26px}
.up-why{display:grid;align-content:start;gap:22px}
.up-lead{font-family:var(--text);font-size:19px;line-height:1.55;color:var(--ink)}
.up-points{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.up-points li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
.up-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0b63e81a;color:var(--hl)}
.up-tick .icon{width:16px;height:16px}
.up-points b{display:block;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.up-points li span:not(.up-tick){display:block;margin-top:3px;font-family:var(--text);font-size:15px;line-height:1.5;color:var(--muted)}
.up-examples{display:grid;align-content:start;gap:12px}
.up-kicker{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted)}
.up-examples .use-set{grid-template-columns:minmax(0,1fr);gap:10px}
.up-examples .use-offer{grid-template-columns:132px minmax(0,1fr);box-shadow:inset 0 0 0 1px var(--line)}
.up-examples .uo-media{min-height:128px}
.up-examples .uo-body{padding:14px 18px}
.up-examples .uo-body b{font-size:17px}
.up-examples .uo-body span{font-size:14px}
@media(max-width:1199px){.up-body{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:809px){
  .uses-bar{margin-bottom:16px}
  .up-lead{font-size:17px}
  .up-examples .use-offer{grid-template-columns:104px minmax(0,1fr)}
  .up-examples .uo-media{min-height:112px}
  .up-examples .uo-body{padding:12px 14px}
}
/* On phones the hero's two buttons stack, so "Launch your campaign" keeps to one line. */
@media(max-width:809px){.hero-actions{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================================================
   Prototype 36, eleventh pass: six moments in the hero, one for each major sport; bigger If and Then badges; and a
   fill that runs round the If card, down the link and round the Then card before the reward opens
   ===================================================================================================== */
/* ---------- Where each card's fill starts: the If fill ends where the link leaves it, the Then fill starts where it lands ---------- */
.hero-moment{--if-from:159deg;--then-from:288deg}
/* ---------- The panel: the moment, then the chips ---------- */
.hero-visual{grid-template-rows:auto auto;row-gap:18px;padding:28px 28px 22px}
/* ---------- The stage: the Then card is wider and taller, for three lines beside its bigger badge ---------- */
.hm-stage{translate:0 calc(158px * var(--k,1))}
.hero-moment.is-open .hm-stage{translate:0 calc(27px * var(--k,1))}
/* ---------- The If and Then badges: bigger, bold and upper case. Then waits in stone until its card is filled. ---------- */
.hm-tag{position:relative;height:48px;min-width:48px;padding:0 15px;border-radius:14px;font-family:var(--sans);font-size:18px;font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 22px -12px #0c0a09cc;transition:background-color .4s,color .4s,box-shadow .4s}
.hm-tag.is-then{background:#e7e5e4;color:#87827d;box-shadow:inset 0 0 0 1px #d6d3d1}
.hero-moment.is-then .hm-tag.is-then{background:var(--hl);color:#fff;box-shadow:0 10px 22px -10px #0b63e8cc}
.hm-tag::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none}
.hero-moment.is-hit .hm-if .hm-tag,.hero-moment.is-then .hm-tag.is-then{animation:hm-beat .55s var(--ease)}
.hero-moment.is-hit .hm-if .hm-tag::after,.hero-moment.is-then .hm-tag.is-then::after{animation:hm-halo 1s cubic-bezier(.2,.7,.3,1)}
@keyframes hm-beat{0%{scale:1}40%{scale:1.14}100%{scale:1}}
@keyframes hm-halo{0%{opacity:1;box-shadow:0 0 0 0 #0b63e899}100%{opacity:0;box-shadow:0 0 0 18px #0b63e800}}
/* ---------- The fills: a thicker ring round each card, fading out when the pair closes ---------- */
.hm-ring{padding:3px;opacity:0;transition:opacity .4s}
.hm-if .hm-ring{background:conic-gradient(from var(--if-from),var(--hl) calc(var(--fill,0) * 360deg),#0000 0)}
.hm-then .hm-ring{inset:0;background:conic-gradient(from var(--then-from),var(--hl) calc(var(--tfill,0) * 360deg),#0000 0)}
.hero-moment.is-open .hm-if .hm-ring,.hero-moment.is-hit .hm-if .hm-ring,.hero-moment.is-link .hm-then .hm-ring{opacity:1}
/* ---------- The link lights and the node runs only once the If card is full; both let go when the pair closes ---------- */
.hm-path.is-lit,.hero-moment.is-hit .hm-path.is-lit{stroke-dashoffset:1;opacity:0;transition:opacity .35s,stroke-dashoffset 0s .35s}
.hero-moment.is-link .hm-path.is-lit{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .6s var(--ease),opacity 0s}
.hero-moment.is-hit .hm-node{animation:none}
.hero-moment.is-link .hm-node{animation:hm-run .6s var(--ease) forwards}
/* ---------- The If card: its clips and words, stacked, one showing at a time ---------- */
.hm-clip video{position:absolute;inset:0;object-position:50% 50%;opacity:0;transition:opacity .5s}
.hm-clip video.is-on{opacity:1}
.hm-row{gap:12px;padding:0 16px 0 76px}
.hero-moment.is-open .hm-row{padding-left:16px}
.hm-says{display:grid;flex:1;min-width:0}
.hm-says>p{grid-area:1 / 1;align-self:center;margin:0;opacity:0;translate:0 10px;transition:opacity .3s,translate .5s var(--ease)}
.hm-says>p.is-on{opacity:1;translate:0 0;transition-delay:.15s}
.hm-says>p.was-on{translate:0 -10px;transition-delay:0s}
.hm-logo.is-ball{color:var(--ink)}
.hm-logo.is-ball svg{width:22px;height:22px}
/* ---------- The Then card: wider, the same look before and after it lights (the ring draws the blue edge) ---------- */
.hm-then{left:220px;width:420px;height:96px;opacity:1;scale:1}
.hero-moment.is-then .hm-then{box-shadow:inset 0 1px 0 #fff,0 24px 50px -24px #0b3a8acc}
.hm-then-row{height:96px;gap:12px;padding:0 16px 0 90px}
.hm-prize{position:absolute;z-index:1;left:14px;top:16px;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 10px #0c234040);opacity:0;transition:top .65s var(--ease),width .65s var(--ease),height .65s var(--ease),filter .65s,opacity .45s}
.hm-prize.is-on{opacity:1}
.hero-moment.is-then:not(.is-open) .hm-prize{top:96px;width:392px;height:272px;filter:drop-shadow(0 20px 26px #0c234059)}
/* ---------- The chips: one per moment, the one playing in white with a blue line for how far it has run ---------- */
.hm-reel{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.hm-chip{position:relative;display:inline-grid;place-items:center;height:32px;padding:0 13px;border:0;border-radius:99px;overflow:hidden;background:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px #ffffffb3;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s}
.hm-chip:hover{background:#ffffffc7;color:var(--ink)}
.hm-chip.is-on{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #fff,0 8px 18px -12px #0b3a8a99}
.hm-chip:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
.hm-chip i{position:absolute;left:12px;bottom:4px;width:calc(100% - 24px);height:2px;border-radius:2px;background:var(--hl);transform:scaleX(0);transform-origin:0 50%}
@media(prefers-reduced-motion:reduce){
  .hm-tag,.hm-ring,.hm-says>p,.hm-clip video,.hm-prize,.hm-path.is-lit,.hero-moment.is-link .hm-path.is-lit{transition:none}
  .hero-moment.is-hit .hm-if .hm-tag,.hero-moment.is-then .hm-tag.is-then,.hero-moment.is-hit .hm-if .hm-tag::after,.hero-moment.is-then .hm-tag.is-then::after,.hero-moment.is-link .hm-node{animation:none}
}
@media(max-width:809px){
  .hero-moment{--if-from:208deg;--then-from:305deg}
  .hero-visual{row-gap:14px;padding:18px 14px 16px}
  .hm-stage,.hero-moment.is-open .hm-stage,.hero-moment.is-then:not(.is-open) .hm-stage{min-height:516px;translate:none}
  /* On phones each badge sits above its words, with the tick beside the badge, so the words get the card's width. */
  .hm-if,.hm-row{height:108px}
  .hero-moment.is-open .hm-if{height:320px}
  .hm-clip{top:28px}
  .hero-moment.is-open .hm-clip{top:108px}
  .hm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;column-gap:10px;row-gap:6px;padding:0 12px 0 76px}
  .hero-moment.is-open .hm-row{padding-left:12px}
  .hm-row .hm-tag{grid-column:1;grid-row:1}
  .hm-row .hm-check{grid-column:3;grid-row:1}
  .hm-row .hm-says{grid-column:1 / -1;grid-row:2}
  .hm-confetti{top:28px}
  .hm-tag{height:34px;min-width:34px;padding:0 11px;border-radius:11px;font-size:15px}
  .hm-then,.hero-moment.is-open .hm-then{left:auto;width:auto;height:140px;padding:0}
  .hero-moment.is-then:not(.is-open) .hm-then{height:358px}
  .hm-then-row{height:140px;gap:6px;padding:0 12px 0 84px}
  .hm-then-row .hm-says{flex:none;width:100%}
  .hm-prize{left:10px;top:38px;width:64px;height:64px}
  .hero-moment.is-then:not(.is-open) .hm-prize{left:10px;top:140px;width:calc(100% - 20px);height:206px}
  .hm-reel{gap:4px}
  .hm-chip{height:28px;padding:0 8px;font-size:12px}
  .hm-chip i{left:8px;width:calc(100% - 16px);bottom:3px}
}
/* The narrowest phones: the six chips still keep to one row. */
@media(max-width:379px){.hm-reel{gap:3px}.hm-chip{padding:0 6px}.hm-chip i{left:6px;width:calc(100% - 12px)}}

/* =====================================================================================================
   Prototype 36, twelfth pass: Reward your fans, as the fan's team app on an iPhone
   ===================================================================================================== */
/* The step's scroll (--p) plays it: the phone rises, the notification drops, the card fills as $50.00 counts up, the
   reward lands in the list, the notification goes, and the view zooms out to the team store, whose items come in turn. */
.wallet-demo{--in:clamp(0,var(--p,1) / .1,1);--t1:clamp(0,(var(--p,1) - .05) / .08,1);--f:clamp(0,(var(--p,1) - .14) / .26,1);--r:clamp(0,(var(--p,1) - .38) / .08,1);--t2:clamp(0,(var(--p,1) - .44) / .07,1);--z:clamp(0,(var(--p,1) - .46) / .26,1);--zz:calc(var(--z) * var(--z) * (3 - 2 * var(--z)));--e:clamp(0,(var(--p,1) - .88) / .1,1);position:relative;width:100%;max-width:440px;margin:0 auto}
.wd-view{position:relative;height:var(--wd-h,480px);overflow:clip;-webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}
.wd-phone{position:absolute;left:50%;top:0;width:320px;height:660px;margin-left:-160px;padding:10px;border-radius:52px;background:#0c0a09;box-shadow:inset 0 0 0 1.5px #57534d,inset 0 0 0 4px #1c1917,0 40px 70px -36px #0c0a09a6;transform-origin:50% 0;translate:0 calc(22px + (1 - var(--in)) * 70px);scale:calc(var(--s1,1.2) + (var(--s2,.8) - var(--s1,1.2)) * var(--zz));opacity:calc(.2 + var(--in) * .8)}
.wd-screen{position:relative;height:100%;overflow:hidden;border-radius:42px;background:#fff;font-family:var(--sans);color:var(--ink);line-height:1.3}
.wd-status{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:46px;padding:3px 24px 0 32px;font-size:14.5px;font-weight:600}
.wd-island{position:absolute;left:50%;top:10px;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#0c0a09}
.wd-sys{display:flex;align-items:center;gap:5px}
.wd-sys svg{width:auto;height:11px;fill:currentColor}
.wd-sys svg:last-child{height:12px}
/* The notification drops in from under the island, then goes as the view zooms out. */
.wd-toast{position:absolute;z-index:4;left:9px;right:9px;top:50px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:22px;background:#f5f5f4f0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 30px -16px #0c0a0999;transform-origin:50% -30px;translate:0 calc(-26px * (1 - var(--t1) + var(--t2)));scale:calc(.3 + (var(--t1) - var(--t2)) * .7) calc(.2 + (var(--t1) - var(--t2)) * .8);opacity:calc((var(--t1) - var(--t2)) * 1.4 - .2)}
.wd-app{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#0c2340}
.wd-app img{width:28px;height:28px}
.wd-tt{display:flex;justify-content:space-between;margin:0 0 1px;font-size:13px}
.wd-tt b{font-weight:600}
.wd-toast small{font-size:11.5px;color:var(--faint)}
.wd-toast span{display:block;font-size:12.5px;line-height:1.3;color:var(--ink)}
.wd-head{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px 18px}
.wd-title{font-size:28px;font-weight:700;letter-spacing:-.02em}
.wd-me{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f5f5f4}
.wd-me img{width:26px;height:26px}
/* The wallet's card: team credit, filling from the bottom as the balance counts up. */
.wd-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:150px;margin:0 14px;padding:14px 17px 12px;border-radius:20px;color:#fff;background:radial-gradient(120% 95% at 0% 0%,#1d4f9e 0%,#0c2340 58%,#081a30 100%);box-shadow:0 22px 40px -24px #0c2340e6,inset 0 1px 0 #ffffff38}
.wd-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,#ffffff00 30%,#ffffff26 46%,#ffffff00 60%);pointer-events:none}
.wd-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--f) * 100%);background:linear-gradient(#0b63e8f2,#0b63e8b3)}
.wd-fill::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 6c10 0 10-5 20-5s10 5 20 5 10-5 20-5v9H0z' fill='%230b63e8' fill-opacity='.95'/%3E%3C/svg%3E") 0 0/60px 10px repeat-x;opacity:calc(1 - var(--f) * var(--f));animation:wd-wave 2.4s linear infinite}
@keyframes wd-wave{to{background-position:60px 0}}
.wd-top,.wd-value,.wd-foot{position:relative;z-index:2}
.wd-top{display:flex;align-items:center;gap:9px}
.wd-top img{width:28px;height:28px;border-radius:50%;background:#fff}
.wd-top span{font-size:14px;font-weight:600}
.wd-top em{margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.wd-value{font-family:var(--display);font-weight:420;font-size:40px;line-height:1;letter-spacing:-.02em}
.wd-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;opacity:.9}
.wd-foot i{width:32px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f5f5f4,#a6a09b);opacity:.9}
/* The reward, in the wallet's list, once the card is full. */
.wd-row{display:flex;align-items:center;gap:10px;margin:10px 14px 0;padding:9px 12px;border-radius:16px;background:#f5f5f4;opacity:var(--r);translate:0 calc((1 - var(--r)) * 10px)}
.wd-plus{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hl);color:#fff}
.wd-plus .icon{width:16px;height:16px}
.wd-row b{display:block;font-size:13px;font-weight:600}
.wd-row small{display:block;font-size:11.5px;color:var(--muted)}
.wd-row em{margin-left:auto;font-style:normal;font-size:14px;font-weight:600;color:var(--hl)}
/* The team store under the wallet: what the credit buys. */
.wd-store{margin:14px 14px 0;opacity:calc(.35 + var(--z) * .65)}
.wd-shead{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px;font-size:14.5px}
.wd-shead b{font-weight:600}
.wd-shead span{font-size:12.5px;color:var(--hl)}
.wd-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wd-item{--k:clamp(0,(var(--p,1) - (.6 + var(--i) * .07)) / .1,1);display:grid;gap:1px;padding:8px 8px 10px;border-radius:14px;background:#f5f5f4;opacity:calc(.1 + var(--k) * .9);translate:0 calc((1 - var(--k)) * 16px)}
.wd-pic{display:grid;place-items:center;height:62px;margin-bottom:4px}
.wd-pic img{width:auto;max-width:100%;height:58px;object-fit:contain;filter:drop-shadow(0 6px 8px #0c0a0933)}
.wd-item b{font-size:12.5px;font-weight:600;line-height:1.2}
.wd-item small{font-size:12px;color:var(--muted)}
/* And the point of it, over the foot of the view. */
.wd-loop{position:absolute;left:50%;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);margin:0;padding:9px 16px 9px 12px;border-radius:99px;background:#ffffffe6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px #fff,0 16px 34px -18px #0b3a8a99;font-size:14.5px;line-height:1.3;color:var(--ink);opacity:var(--e);translate:-50% calc((1 - var(--e)) * 10px)}
.wd-loop .icon{flex:none;width:18px;height:18px;color:var(--hl)}
.motion-paused .wd-fill::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wd-fill::before{animation:none}}
@media(max-width:959px){.wallet-demo{max-width:none}.wd-loop{font-size:13px}}

/* =====================================================================================================
   Prototype 36, thirteenth pass: the hero reel, one moment per league (league logos on the chips), each team's logo
   and merch in the Then, the pictures to the right of the words, and a different fill for each card
   ===================================================================================================== */
/* ---------- If fills in ink, like its badge, and ticks in ink; Then fills in blue, like its badge ---------- */
.hm-if .hm-ring{background:conic-gradient(from var(--if-from),var(--black) calc(var(--fill,0) * 360deg),#0000 0)}
.hm-if .hm-check{background:var(--black)}
.hero-moment.is-hit .hm-if .hm-tag::after{animation-name:hm-halo-ink}
@keyframes hm-halo-ink{0%{opacity:1;box-shadow:0 0 0 0 #0c0a0973}100%{opacity:0;box-shadow:0 0 0 18px #0c0a0900}}
/* ---------- The clip and the reward sit to the right of the words, and open out below them ---------- */
.hm-clip{left:auto;right:12px}
.hm-row{padding:0 76px 0 16px}
.hero-moment.is-open .hm-row{padding:0 16px}
.hm-prize{left:auto;right:14px}
.hm-then-row{padding:0 90px 0 16px}
.hero-moment.is-then:not(.is-open) .hm-then-row{padding:0 16px}
/* ---------- The chips: each league's logo, in colour when its moment is on ---------- */
.hm-chip{min-width:52px;padding:0 12px}
.hm-chip img{display:block;width:auto;height:20px;max-width:34px;object-fit:contain;transition:filter .3s,opacity .3s}
.hm-chip:not(.is-on) img{filter:grayscale(1);opacity:.8}
/* In a Then, the team's name reads in ink, so only what fans get back is blue. */
.hm-give .hm-who{color:var(--ink)}
.hm-chip:hover img{filter:none;opacity:1}
@media(max-width:809px){
  .hm-row{padding:0 76px 0 12px}
  .hero-moment.is-open .hm-row{padding:0 12px}
  .hm-then-row{padding:0 84px 0 12px}
  .hero-moment.is-then:not(.is-open) .hm-then-row{padding:0 12px}
  .hm-prize,.hero-moment.is-then:not(.is-open) .hm-prize{left:auto;right:10px}
  .hm-chip{min-width:44px;padding:0 9px}
  .hm-chip img{height:18px;max-width:30px}
}

/* =====================================================================================================
   Prototype 36, copy pass: one-line offers under the hero, a pitch for each team, "You own / COVR handles",
   the Lynx numbers and who's behind COVR
   ===================================================================================================== */
/* ---------- One-line offers, in COVR's words, rolling under the hero ---------- */
.offer-ticker{padding:4px 0 20px}
.ot-window{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000)}
.ot-track{display:flex;width:max-content;animation:ot-roll 52s linear infinite}
.ot-set{display:flex;align-items:center;gap:44px;margin:0;padding:0 44px 0 0;list-style:none}
.ot-set li{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:420;font-size:24px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.ot-set li::before{content:"";flex:none;width:11px;height:11px;background:var(--hl);clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes ot-roll{to{translate:-50% 0}}
.motion-paused .ot-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .ot-window{-webkit-mask-image:none;mask-image:none}
  .ot-track{width:auto;animation:none}
  .ot-set{flex-wrap:wrap;justify-content:center;gap:10px 32px;padding:0}
  .ot-set li{white-space:normal}
  .ot-set[aria-hidden]{display:none}
}
@media(max-width:809px){.offer-ticker{padding:0 0 12px}.ot-set{gap:28px;padding-right:28px}.ot-set li{font-size:19px;gap:10px}.ot-set li::before{width:9px;height:9px}}
/* Still, on a phone: one offer per line, left-aligned. */
@media(max-width:809px) and (prefers-reduced-motion:reduce){.ot-set{flex-direction:column;align-items:flex-start;gap:10px}.ot-set li{align-items:baseline;font-size:17px}.ot-set li::before{translate:0 -1px}}

/* ---------- A team's panel opens on its one-line pitch ---------- */
.up-why .up-kicker{margin-bottom:-12px}
.up-pitch{font-family:var(--display);font-weight:420;font-size:26px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
@media(max-width:809px){.up-pitch{font-size:21px}}

/* ---------- The vendors: what you own, and what COVR handles ---------- */
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.role-col{padding:26px 28px 28px;border-radius:24px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop)}
.role-col h3{font-size:var(--card-h);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.role-col ul{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.role-col li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-family:var(--text);font-size:var(--card-p);line-height:1.45;color:var(--muted)}
.role-col .up-tick{width:26px;height:26px}
.role-col.is-covr .up-tick{background:var(--hl);color:#fff}
@media(max-width:809px){.roles{grid-template-columns:minmax(0,1fr);gap:12px}.role-col{padding:22px 20px}}

/* ---------- The Lynx: four numbers ---------- */
.case-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
.case-stats>div>strong{font-size:48px}
@media(max-width:809px){.case-stats>div>strong{font-size:38px}}

/* ---------- Who's behind COVR ---------- */
.behind{padding:0 0 64px}
.behind-card{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px;border-radius:26px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop)}
.behind-copy{display:grid;gap:8px;max-width:660px}
.behind .behind-copy h2{font-size:var(--h3);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.behind .behind-copy p{font-family:var(--text);font-size:var(--card-p);line-height:1.55;color:var(--muted)}
.behind-card .button{flex:none}
@media(max-width:809px){.behind{padding-bottom:40px}.behind-card{flex-direction:column;align-items:stretch;gap:18px;padding:22px 20px}}

/* =====================================================================================================
   Prototype 36, team pass: each hero card's glass border is what fills in; one line joins Buy, If and Then; a cart,
   a bolt and a coin in the badges; and the team page
   ===================================================================================================== */
/* ---------- The badges: a bolt and a coin beside the words ---------- */
.hm-tag{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.hm-tag .icon{flex:none;width:19px;height:19px;stroke-width:2}
@media(max-width:809px){
  .hm-tag .icon{width:15px;height:15px}
  .hm-tag{gap:5px}
}

/* ---------- The team page ---------- */
.team-main{padding:136px 0 24px}
.team-hero h1{font-size:48px;line-height:1.08;letter-spacing:-.02em}
.team-lead{max-width:620px;margin-top:18px;font-family:var(--text);font-size:19px;line-height:1.5;color:var(--muted)}
.team-group{padding:44px 0 8px}
.team-kicker{margin-bottom:16px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.person,.partner-card{overflow:hidden;border-radius:24px;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid #e7e5e4b3;box-shadow:var(--glass-rim),var(--glass-drop)}
.person-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#e7e5e4}
.person-copy{display:grid;gap:10px;padding:20px 22px 22px}
.person-copy h3,.partner-card h3{font-size:var(--card-h);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.person-role{margin-top:-4px;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--hl)}
.person-copy p:not(.person-role),.partner-card p:not(.person-role){font-family:var(--text);font-size:15px;line-height:1.55;color:var(--muted)}
.person-more summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer;list-style:none;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink)}
.person-more summary::-webkit-details-marker{display:none}
.person-more summary::after{content:"+";font-size:17px;line-height:1}
.person-more[open] summary::after{content:"−"}
.person-more[open] summary{margin-bottom:8px}
.person-more p+p{margin-top:10px}
.partner-card{display:grid;gap:10px;max-width:560px;padding:24px 26px}
.team-next{padding:56px 0 72px}
.team-next-card{padding:48px 40px;border-radius:32px;text-align:center;box-shadow:0 40px 90px -60px #0b63e8b3}
.team-next-card h2{font-size:var(--h2);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.team-next-card p{max-width:560px;margin:14px auto 0;font-family:var(--text);font-size:18px;line-height:1.5;color:#44403c}
.team-next-card .closing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@media(max-width:1099px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:809px){.team-main{padding-top:96px}.team-hero h1{font-size:34px}.team-lead{font-size:17px}.team-group{padding-top:32px}.team-grid{grid-template-columns:minmax(0,1fr)}.team-next-card{padding:32px 20px}.team-next-card .button{width:100%}}
@media(max-width:809px){.hero-moment{min-width:0}}

/* =====================================================================================================
   Prototype 36, fourteenth pass: If and Then only; each card's edge is a glass tube that fills with liquid; the Then
   says what gets sent, where, to whom and with what; and the league chips sit under the panel
   ===================================================================================================== */
/* ---------- The cards have no border of their own: the tube is their edge. No white halo on the hit. ---------- */
.hm-if,.hm-then{border:0}
.hm-then{overflow:visible}
.hero-moment.is-hit .hm-if{box-shadow:inset 0 1px 0 #fff,0 26px 56px -26px #0b3a8acc}
.hero-moment.is-then .hm-then{box-shadow:inset 0 1px 0 #fff,0 24px 50px -24px #0b3a8acc}
/* ---------- (The glass tubes round each card and down the link became one clean line in the fifteenth pass.) ---------- */
.hm-link .s0{stop-color:#1c1917}
.hm-link .s1{stop-color:#0b63e8}
/* ---------- The Then: the platform (its icon and name), the audience (a people symbol, underlined as it's targeted:
   dotted until the Then fills, then drawn in blue with the fill), and the offer in blue ---------- */
.hm-then{height:118px}
.hm-then-row{height:118px}
.hero-moment.is-then:not(.is-open) .hm-then{height:402px}
.hm-prize{top:27px}
.hero-moment.is-then:not(.is-open) .hm-prize{top:118px}
.hm-stage{translate:0 calc(147px * var(--k,1))}
.hero-moment.is-open .hm-stage{translate:0 calc(16px * var(--k,1))}
.hero-moment.is-then:not(.is-open) .hm-stage{translate:0 calc(5px * var(--k,1))}
.hm-give{line-height:1.5}
.hm-give .hm-app{color:var(--ink);white-space:nowrap}
.hm-logo.is-app{border-radius:8px;background:none;box-shadow:0 0 0 1.5px #fff,0 4px 10px -4px #0c0a0973}
.hm-logo.is-app img{width:28px;height:28px}
.hm-aud .icon{width:17px;height:17px;margin:0 3px 0 1px;vertical-align:-3px;color:var(--hl);stroke-width:2}
.hm-aud u{text-decoration:none;font-weight:600;color:var(--ink);padding-bottom:2px;background:linear-gradient(var(--hl),var(--hl)) 0 100%/calc(var(--aud,1) * 100%) 2px no-repeat,repeating-linear-gradient(90deg,#a6a09b 0 3px,#0000 3px 6px) 0 100%/100% 1.5px no-repeat}
/* ---------- The league chips, under the panel ---------- */
.hero-side{display:grid;row-gap:16px;min-width:0}
.hero-visual{grid-template-rows:auto;padding:28px}
.hm-reel{justify-self:center}
.hm-chip{background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 6px 16px -12px #0c0a0959}
.hm-chip:hover{background:#fff}
.hm-chip.is-on{box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 22px -14px #0c0a0980}
.hm-if{width:460px}
.hero-moment.is-open .hm-clip{width:436px}
.hm-confetti{left:432px}
.hm-then{left:170px;width:470px}
.hero-moment.is-then:not(.is-open) .hm-prize{width:442px}
@media(max-width:809px){
  .hm-stage,.hero-moment.is-open .hm-stage,.hero-moment.is-then:not(.is-open) .hm-stage{min-height:528px;translate:none}
  .hm-if{width:auto}
  .hero-moment.is-open .hm-clip{width:calc(100% - 24px)}
  .hm-confetti{left:auto}
  .hm-then,.hero-moment.is-open .hm-then{left:auto;width:auto}
  .hero-moment.is-then:not(.is-open) .hm-prize{width:calc(100% - 20px)}
  .hm-then,.hero-moment.is-open .hm-then{height:150px}
  .hm-then-row{height:150px}
  .hero-moment.is-then:not(.is-open) .hm-then{height:370px}
  .hm-prize{top:43px}
  .hero-moment.is-then:not(.is-open) .hm-prize{top:150px}
  .hero-visual{padding:18px 14px 20px}
  .hm-give{line-height:1.45}
}

/* =====================================================================================================
   Prototype 36, fifteenth pass: one clean line round the hero cards; "Reward backed by COVR" at the end of the
   wallet; and the seat map's audience insight
   ===================================================================================================== */
/* ---------- The hero edges: a thin glass rim with a light gliding slowly round it, and one line, led by a bead of
   light, that draws round the If card as the clip plays, down the link and on round the Then card (p36-moment.js) ---------- */
.hm-edge{position:absolute;inset:0;z-index:4;width:100%;height:100%;overflow:visible;pointer-events:none}
.hm-edge path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hm-edge .e-rim{stroke:#fff;stroke-width:1.25}
.hm-edge .e-shine{stroke:#fff;stroke-width:2.5;stroke-dasharray:.06 .94;filter:blur(.7px);animation:hm-edge-shine 10s linear infinite}
@keyframes hm-edge-shine{to{stroke-dashoffset:-1}}
.hm-edge .e-line{stroke-width:2.5;transition:opacity .45s}
.hm-edge.is-if .e-line{stroke:var(--ink)}
.hm-edge.is-then .e-line{stroke:var(--hl);filter:drop-shadow(0 0 3px #0b63e859)}
.hm-edge.is-empty .e-line{visibility:hidden}
.hm-edge .e-head{fill:#fff;stroke-width:2;opacity:0;transition:opacity .3s}
.hm-edge.is-if .e-head{stroke:var(--ink);filter:drop-shadow(0 0 4px #0c0a0966)}
.hm-edge.is-then .e-head{stroke:var(--hl);filter:drop-shadow(0 0 5px #0b63e8b3)}
.hm-edge.is-drawing .e-head{opacity:1;transition:none}
/* The link: the same rim, and the line running down it from ink into blue, its bead with it. */
.hm-link .hm-path{stroke:#fff;stroke-width:1.25}
.hm-link .hm-path.is-lit,.hero-moment.is-hit .hm-link .hm-path.is-lit,.hero-moment.is-link .hm-link .hm-path.is-lit{stroke:url(#hm-liquid-link);stroke-width:2.5;stroke-dashoffset:0;opacity:1;transition:opacity .45s}
.hm-link.is-empty .hm-path.is-lit{visibility:hidden}
.hm-lhead{position:absolute;left:50%;top:calc(var(--lt,0) * 100%);z-index:1;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--hl) calc(var(--lt,0) * 100%),var(--ink)),0 0 8px 1px #0b63e866;opacity:0}
.hm-link.is-drawing .hm-lhead{opacity:1}
/* The pair closes and its lines fade out together. */
.hero-moment.is-clearing .hm-edge .e-line,.hero-moment.is-clearing .hm-link .hm-path.is-lit{opacity:0}
.motion-paused .hm-edge .e-shine{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hm-edge .e-shine{animation:none;opacity:0}.hm-edge .e-line,.hm-link .hm-path.is-lit,.hero-moment.is-link .hm-link .hm-path.is-lit{transition:none}}

/* ---------- The wallet's last beat: "Reward backed by COVR", a seal with a green tick that pops in just under the
   reward. It sits outside the phone (placed by the phone's zoomed-out scale, --s2) so it reads at any size. ---------- */
/* The green for things that are done or backed: the wallet's seal, and the hero's If once its moment happens. */
.wallet-demo,.hx{--ok:#16a34a;--ok-deep:#15803d}
.wd-backed{position:absolute;left:50%;top:calc(22px + 344px * var(--s2,.8));z-index:3;display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 24px);padding:5px 16px 5px 5px;border-radius:99px;background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 28%,#0000),0 18px 36px -16px color-mix(in srgb,var(--ok-deep) 55%,#0000),0 2px 6px -2px #0c0a0926;translate:-50% -50%;opacity:0;scale:.72;transition:opacity .2s,scale .2s;pointer-events:none}
.wd-backed b{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.wd-seal{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ok);box-shadow:inset 0 1px 0 #ffffff59,0 6px 14px -6px color-mix(in srgb,var(--ok-deep) 80%,#0000);scale:.5;transition:scale .2s}
.wd-seal svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.wd-seal path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .15s}
.wd-seal::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none}
.wd-backed.is-on{opacity:1;scale:1;transition:opacity .25s,scale .55s cubic-bezier(.34,1.56,.64,1)}
.wd-backed.is-on .wd-seal{scale:1;transition:scale .5s cubic-bezier(.34,1.7,.64,1) .08s}
.wd-backed.is-on .wd-seal path{stroke-dashoffset:0;transition:stroke-dashoffset .42s cubic-bezier(.65,0,.35,1) .22s}
.wd-backed.is-on .wd-seal::after{animation:wd-assure 1.1s cubic-bezier(.2,.7,.3,1) .3s}
@keyframes wd-assure{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,#0000)}100%{opacity:0;box-shadow:0 0 0 14px #0000}}
@media(prefers-reduced-motion:reduce){.wd-backed,.wd-backed.is-on,.wd-seal,.wd-backed.is-on .wd-seal,.wd-seal path,.wd-backed.is-on .wd-seal path{transition:none}.wd-backed.is-on .wd-seal::after{animation:none}}
@media(max-width:809px){.wd-backed{gap:8px;padding:5px 14px 5px 5px}.wd-backed b{font-size:13.5px}.wd-seal{width:24px;height:24px}.wd-seal svg{width:15px;height:15px}}

/* ---------- The seat map's audience insight: only 207 to 209 light up, a line runs out of the card to them, and a
   light runs round the card's border. The line is sized in the map's own width (cqw), so it lands on the pin. ---------- */
.story .seat-demo[data-insight="2"] .ar-map .sec[data-g="2"]:not([data-pick]){fill:color-mix(in srgb,#1c1917 calc(var(--lit) * 26%),#e9e7e4)}
.story .seat-demo[data-insight="2"] .ar-nums text[data-g="2"]:not([data-pick]){fill:#9c9a96}
/* The stage is as wide as the map, so the pin and the card (placed in % of the stage) land on the sections at any width. */
.story .seat-stage{container-type:inline-size;max-width:392px;margin-left:auto;margin-right:auto}
.story .seat-demo{--lead:clamp(0,(var(--p,1) - .79) / .05,1);--pin:clamp(0,(var(--p,1) - .83) / .03,1)}
@property --ai-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.seat-callout{right:5%;width:58%;gap:6px;padding:12px 16px 13px;border-radius:14px;background:#fff;box-shadow:0 18px 40px -24px #0b3a8a8c,0 2px 6px -3px #0c0a091f;transform-origin:78% 0}
.seat-callout::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ai-spin),#0b63e8 0deg,#9cc2ff 70deg,#0b63e833 140deg,#0b63e833 220deg,#9cc2ff 290deg,#0b63e8 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ai-spin 5s linear infinite;pointer-events:none}
@keyframes ai-spin{to{--ai-spin:360deg}}
.seat-callout-tag{gap:6px;font-size:12.5px;font-weight:600;color:var(--hl)}
.seat-callout-tag .icon{width:16px;height:16px;stroke-width:2}
.seat-callout-stat span{text-wrap:balance}
/* The pin sits on the inner edge of 208, the middle of the three (82.32%, 22.47% of the map); the line runs up to it. */
.ai-lead{position:absolute;left:45.32cqw;bottom:100%;width:2px;height:12.61cqw;margin-left:-1px;border-radius:2px;background:var(--hl);transform-origin:50% 100%;scale:1 var(--lead,1);opacity:min(var(--lead,1) * 8,1)}
.seat-pin{left:82.32%;top:22.47%;z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;box-shadow:inset 0 0 0 3.5px var(--hl),0 0 0 2px #fff,0 6px 14px -4px #0b63e8b3;opacity:var(--pin,1);scale:calc(.4 + var(--pin,1) * .6)}
.seat-pin::after{border-color:#0b63e880}
.motion-paused .seat-callout::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.seat-callout::before{animation:none}}
@media(max-width:809px){
  /* Between the section numbers at the map's edges (8% and 92%), so none is cut. */
  .seat-callout{left:12%;right:auto;width:76.5%;padding:9px 12px 10px;border-radius:12px;translate:0 calc((1 - var(--call,1)) * 8px);transform-origin:92% 0}
  .ai-lead{left:70.32cqw;height:9.07cqw}
  .seat-callout-tag{font-size:11.5px}
  .seat-callout-tag .icon{width:14px;height:14px}
}

/* =====================================================================================================
   Prototype 36, sixteenth pass (Oct 1): Book a demo in COVR's blue; the wallet ends with the phone easing down and
   "Reward backed by COVR" above it; on phones and tablets each How it works step pins under the header while its
   picture plays; nothing spills out of its card; and the teams section is shorter on phones
   ===================================================================================================== */
/* ---------- Book a demo: COVR's blue, a glass highlight, a light that sweeps across now and then, and an arrow ---------- */
.button[data-demo]{position:relative;isolation:isolate;overflow:hidden;gap:8px;border:0;background:linear-gradient(135deg,#0b63e8 0%,#3b86ff 52%,#0b63e8 100%);background-size:180% 100%;background-position:0 0;color:#fff;box-shadow:inset 0 1px 0 #ffffff59,inset 0 0 0 1px #0a56cc,0 10px 24px -12px #0b63e8e6;transition:background-position .6s var(--ease),box-shadow .3s,translate .25s var(--ease)}
.button[data-demo]::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,#fff0 30%,#ffffff47 50%,#fff0 70%);translate:-130% 0;animation:demo-sheen 5s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes demo-sheen{0%,70%{translate:-130% 0}100%{translate:130% 0}}
.button[data-demo] .icon{flex:none;width:16px;height:16px;stroke-width:2;transition:translate .25s var(--ease)}
.button[data-demo]:hover,.is-light .button[data-demo]:hover{background:linear-gradient(135deg,#0b63e8 0%,#3b86ff 52%,#0b63e8 100%);background-size:180% 100%;background-position:100% 0;color:#fff;box-shadow:inset 0 1px 0 #ffffff73,inset 0 0 0 1px #0a56cc,0 14px 30px -12px #0b63e8;translate:0 -1px}
.button[data-demo]:hover .icon{translate:3px 0}
.motion-paused .button[data-demo]::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.button[data-demo]::after{animation:none;opacity:0}.button[data-demo],.button[data-demo] .icon{transition:none}}
/* On phones Book a demo sits in the header, beside the menu. */
@media(max-width:809px){
  .nav-ctas{display:flex;margin-left:auto;margin-right:6px;gap:0}
  .nav-ctas .nav-launch{display:none}
  .site-header .nav-cta{display:inline-flex;min-height:34px;padding:6px 12px 6px 14px;font-size:13.5px}
  .site-header .nav-cta .icon{width:14px;height:14px}
}

/* ---------- The wallet's end: the phone eases down, and "Reward backed by COVR" sits above it ---------- */
.wallet-demo{--dn:clamp(0,(var(--p,1) - .84) / .08,1)}
.wd-phone{translate:0 calc(22px + (1 - var(--in)) * 70px + var(--dn) * 36px)}
.wd-backed{top:8px;translate:-50% 0}

/* ---------- How it works on phones and tablets: each step's words and picture pin under the header while the step
   scrolls by, and the picture plays with that scroll (main.js). A picture too tall for what's left under its words is
   scaled down (--fit), and gives back the room it no longer uses (--kid-h). ---------- */
.story-pin{display:contents}
@media(max-width:959px){
  /* The room the pin travels in is a spacer inside the step (a sticky box moves only within its parent's content). */
  .story-step{display:block;height:auto;min-height:0;padding:0}
  .story-step::after{content:"";display:block;height:78vh}
  .story-step:last-child::after{height:56vh}
  .story-pin{display:block;position:sticky;top:68px;padding-top:8px}
  .story-step .story-art{margin-top:16px}
  .story-step .story-art>*{margin-bottom:calc((var(--fit,1) - 1) * var(--kid-h,0px))}
}
@supports(height:1svh){@media(max-width:959px){.story-step::after{height:78svh}.story-step:last-child::after{height:56svh}}}
@media(max-width:809px){
  .story-step h3{font-size:25px}
  .story-step p{margin-top:10px;font-size:15.5px;line-height:1.5}
}

/* ---------- Nothing spills out of its card on phones ---------- */
/* The card's small COVR bar keeps its insets (the rule that sizes a card's picture was making it full width, and
   scaling it with the picture). */
@media(max-width:959px){.story-step .story-art>.sui-mini{width:auto;max-width:none;scale:none;margin:0}}
@media(max-width:809px){
  .seat-scan-chip{width:max-content;max-width:84%;white-space:normal;text-align:left;line-height:1.3}
  .seat-scan-chip i{flex:none}
}

/* ---------- Built for sales, marketing and finance, shorter on phones: no intro line, short industry names that fit
   in one row, each team as one row, and an open team keeps its one line and its examples ---------- */
.tab-short{display:none}
@media(max-width:809px){
  .uses-head p{display:none}
  .tab-full{display:none}
  .tab-short{display:inline}
  .uses-tabs button{padding:0 15px}
  .uses-grid{gap:10px}
  .use-card{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:14px;min-height:0;padding:14px 14px 14px 16px;border-radius:20px}
  .use-card .use-ic{grid-area:1 / 1;width:52px;height:52px}
  .use-card .use-say{grid-area:1 / 2;gap:3px}
  .use-card .use-plus{position:static;grid-area:1 / 3;width:40px;height:40px}
  .use-card .use-name{font-size:26px}
  .use-card .use-say p{font-size:15px;line-height:1.35}
  .use-panel .up-lead,.use-panel .up-points{display:none}
}

/* ---------- The offer ticker under the hero runs the full width of the page, its ends fading at the screen's edges.
   Still (reduced motion), the offers sit as a list inside the page's margins. ---------- */
@media(prefers-reduced-motion:no-preference){
  .offer-ticker>.container{width:100%;max-width:none}
  .ot-window{-webkit-mask-image:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000)}
}

/* ---------- Launch your campaign sends to COVR's Attio (/api/launch): a line for when it doesn't go through ---------- */
.lf-status{margin-top:22px;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--error)}
.lf-next:disabled{opacity:.7;cursor:progress}

/* =====================================================================================================
   Seventeenth pass (Oct 6): three partners side by side on the team page, each with a link to its site where it has
   one; and the wallet's row is two things the credit buys (tickets, and food and drink), not three.
   ===================================================================================================== */
.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.partner-grid .partner-card{max-width:none;align-content:start}
.partner-link{justify-self:start;margin-top:2px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.partner-link:hover{text-decoration-color:var(--ink)}
@media(max-width:1099px){.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:809px){.partner-grid{grid-template-columns:minmax(0,1fr)}}
.wd-items{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Generated artwork: a consistent scale for the benefit and team symbols. */
.generated-icon{display:block;object-fit:contain;flex:none}
.benefit-card .generated-icon{width:64px;height:64px}
.use-ic{width:80px;height:80px;flex:none}
.use-ic .generated-icon{width:100%;height:100%}
.use-ic.is-small{width:48px;height:48px}
.learn-card .learn-picture img{filter:none;object-position:center}
.post-hero img{object-position:center}
@media(max-width:959px){.use-ic{width:64px;height:64px}.use-ic.is-small{width:44px;height:44px}}

/* =====================================================================================================
   Prototype 36, the hero (Oct 1, option B made the main hero): the If card and the Then card side by side, with an
   arrow between (one above the other on phones), under the words on every screen. p36-hero2.js plays each moment:
   a line draws round the If card with the clip; on the play, confetti, and the If turns green; once the play is
   over the If card folds down to its sentence (side by side only: Barr, Oct 6); the arrow fills; a blue line draws
   round the Then card; the Then lights, and its reward arrives.
   ===================================================================================================== */
/* The cards take their sizes from the width they have (cqw): --hx-f is the sentences' size, as large as still sets
   each on two lines beside its badge; --hx-pic is the pictures' height, half their width. */
.hx{--hx-ease:cubic-bezier(.22,.61,.36,1);--hx-f:clamp(16.5px,calc((50cqw - 152px) / 18.4),19.5px);--hx-pic:calc((50cqw - 56px) / 2);container-type:inline-size;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;width:100%;font-family:var(--sans);color:var(--ink);text-align:left}
.hx-card{position:relative;min-width:0;padding:14px;border-radius:22px;background:#fffffff2;box-shadow:inset 0 0 0 1px #fff,0 30px 60px -34px #0b3a8a99;transition:box-shadow .45s var(--hx-ease)}
/* ---------- The badges: small and quiet. If turns green on the play; Then waits in stone and turns blue when lit. ---------- */
.hx-tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:32px;padding:0 12px 0 10px;border-radius:10px;background:var(--black);color:#fff;font-size:14px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;transition:background-color .35s var(--hx-ease),color .35s var(--hx-ease)}
.hx-tag .icon{width:16px;height:16px;stroke-width:2}
.hx.is-hit .hx-if .hx-tag{background:var(--ok)}
.hx-tag.is-then{background:#ecebe9;color:#87827d}
.hx.is-lit .hx-tag.is-then{background:var(--hl);color:#fff}
/* ---------- The words: the If says what happens, the Then what gets sent, both in the same style: the names in bold,
   a face or a logo beside a player, a team or a sponsor. The chips are sized in em, so they grow with the words, and
   sit on the words' midline with a little taken off their own height (the margins), so a line with a chip in it is
   no taller than one without and every sentence is exactly two lines high ---------- */
.hx-head{display:flex;align-items:flex-start;gap:12px;min-height:34px}
.hx-says{display:grid;flex:1;min-width:0;padding-top:3px}
.hx-says,.hx-gives{min-height:calc(2.8 * var(--hx-f) + 3px)}
.hx-say,.hx-give{grid-area:1 / 1;margin:0;font-size:var(--hx-f);line-height:1.4;color:var(--ink);text-wrap:balance;opacity:0}
.hx-say b,.hx-give b{font-weight:600}
.hx-say b{white-space:nowrap}
.hx .hm-face,.hx .hm-logo{width:1.46em;height:1.46em;margin:-.13em .3em -.13em 0;vertical-align:middle}
.hx .hm-logo img{width:1.06em;height:1.06em}
/* A sponsor in the Then: its logo with its name, kept together. Chipotle's disc fills the chip; a wordmark
   (Chick-fil-A's) gets a pill with a hairline round it. */
.hx-give .hm-brand{white-space:nowrap}
.hx-give .hm-logo.is-brand img{width:100%;height:100%}
.hx-give .hm-logo.is-word{width:auto;padding:0 .5em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line),0 4px 10px -4px #0c0a0933}
.hx-give .hm-logo.is-word img{width:auto;height:.92em}
/* Between moments the words hand over cleanly: the old ones fade out first, then the new ones come in. The Then's
   words wait dimmed until it lights. */
.hx-say,.hx-give{transition:opacity .2s var(--hx-ease)}
.hx-say.is-on{opacity:1;transition:opacity .4s var(--hx-ease) .2s}
.hx-give.is-on{opacity:.45;transition:opacity .4s var(--hx-ease) .2s}
.hx.is-lit .hx-give.is-on{opacity:1;transition:opacity .45s var(--hx-ease)}
.hx-tick{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-top:2px;border-radius:50%;background:var(--ok);color:#fff;opacity:0;scale:.6;transition:opacity .25s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.hx-tick .icon{width:16px;height:16px;stroke-width:2.4}
.hx.is-hit .hx-tick{opacity:1;scale:1}
/* The two cards are built alike: the badge and its sentence at the top, and under them a picture of the same width
   and height, twice as wide as tall (the If's clip, the Then's reward). */
.hx-if,.hx-then{display:flex;flex-direction:column}
.hx-head,.hx-then-copy{flex:none}
.hx-clip,.hx-prizes{position:relative;overflow:hidden;flex:none;margin-top:12px;aspect-ratio:2 / 1;border-radius:14px}
.hx-clip{background:#0c0a09}
.hx-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--hx-ease)}
.hx-cut.is-on{opacity:1}
.hx-cut[src*="edwards"]{object-position:50% 18%}
/* Side by side, the pictures' height is spelled out, so the If's clip can fold away once its play is over (is-done):
   the card shrinks to its sentence, and the Then card, where the reward is arriving, holds the row's height, so
   nothing under the cards moves. One above the other (tablets, phones) the clip stays: folding it would move the page. */
@media(min-width:1024px){
  .hx{align-items:start}
  .hx-clip,.hx-prizes{height:var(--hx-pic);aspect-ratio:auto}
  .hx-clip{transition:height .6s var(--hx-ease),margin-top .6s var(--hx-ease),opacity .3s var(--hx-ease)}
  .hx.is-done .hx-clip{height:0;margin-top:0;opacity:0}
}
/* ---------- Each card's border: a line drawing round it (ink for If, green once the play happens; blue for Then) ---------- */
.hx-ring{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.hx-ring path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--hx-ease),opacity .4s var(--hx-ease)}
.hx-ring.is-empty path{visibility:hidden}
.hx-if .hx-ring path{stroke:var(--ink)}
.hx.is-hit .hx-if .hx-ring path{stroke:var(--ok)}
.hx-then .hx-ring path{stroke:var(--hl)}
.hx.is-swap .hx-ring path{opacity:0}
.hx.is-hit .hx-if{box-shadow:inset 0 0 0 1px #fff,0 0 0 5px color-mix(in srgb,var(--ok) 16%,#0000),0 30px 60px -34px color-mix(in srgb,var(--ok-deep) 55%,#0000)}
.hx.is-lit .hx-then{box-shadow:inset 0 0 0 1px #fff,0 0 0 5px #0b63e81f,0 30px 60px -30px #0b63e8b3}
/* ---------- The confetti, from the tick, on the play ---------- */
.hx-confetti{position:absolute;right:28px;top:30px;z-index:5;width:0;height:0;pointer-events:none}
.hx-confetti i{position:absolute;left:-3px;top:-5px;width:6px;height:10px;border-radius:2px;opacity:0}
.hx-confetti .c0,.hx-confetti .c3{background:var(--ok)}
.hx-confetti .c1{background:var(--hl)}
.hx-confetti .c2{background:var(--black)}
.hx-confetti .c4{background:#9cc2ff}
.hx.is-hit .hx-confetti i{animation:hm-pop 1.2s cubic-bezier(.16,.8,.3,1) var(--d) both}
/* ---------- The arrow: level with the two sentences, it fills from the If to the Then once the play has happened ---------- */
.hx-arrow{position:relative;align-self:start;height:4px;margin:calc(15px + 1.4 * var(--hx-f)) 14px 0 10px;border-radius:4px;background:#ffffff4d}
.hx-arrow i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--ok),var(--hl));transform-origin:0 50%;transform:scaleX(var(--go,0))}
.hx-arrow::after{content:"";position:absolute;right:-3px;top:50%;width:12px;height:12px;border-top:4px solid #ffffff8c;border-right:4px solid #ffffff8c;border-radius:1px;translate:0 -50%;rotate:45deg;transition:border-color .3s}
.hx.is-go .hx-arrow::after{border-color:var(--hl)}
.hx.is-swap .hx-arrow i{transition:transform .45s var(--hx-ease)}
/* ---------- The Then: its badge, the sentence, and the reward arriving ---------- */
.hx-then-copy{display:flex;align-items:flex-start;gap:12px;min-width:0}
.hx-gives{display:grid;flex:1;min-width:0;padding-top:3px}
/* ---------- The reward stage (Oct 6, fourth and fifth rounds): exactly the size of the If's clip, with the top of the
   fan's iPhone in it. Everything is sized from the stage's width (cqw; the type in em from that), so it scales with
   the clip. Five pictures, one per moment, each a different format: an iMessage, a gift card, a Wallet pass, a Wallet
   ticket, an email. The screen sleeps, dim and grey, until the Then lights; then it wakes, and the reward arrives
   (is-in): the message pops into its thread, the gift card flies into the phone, the pass rises into the Wallet, the
   ticket unfolds, the email opens out of its row. The colours are the teams' and the sponsors' own. ---------- */
.hx-prizes{--pw:58cqw;--pt:4cqw;--pb:1.45cqw;--fs:calc(var(--pw) * .04375);container-type:inline-size;background:radial-gradient(95% 130% at 50% 0%,#fff 0%,#eaf2ff 52%,#d3e4ff 100%);font-family:var(--sans);line-height:1.25;color:#0c0a09;text-align:left}
.hx-prize{position:absolute;inset:0;opacity:0;transition:opacity .2s var(--hx-ease)}
.hx-prize.is-on{opacity:1;transition:opacity .4s var(--hx-ease) .2s}
/* The iPhone: its top, standing in the stage. The screen sleeps until the Then lights. */
.hx-phone{position:absolute;left:50%;top:var(--pt);width:var(--pw);height:130cqw;padding:var(--pb) var(--pb) 0;border-radius:calc(var(--pw) * .14) calc(var(--pw) * .14) 0 0;background:#0c0a09;box-shadow:0 0 0 .4cqw #57534d,0 5cqw 9cqw -3cqw #0c234066;translate:-50% 0}
.hx-screen{position:relative;overflow:hidden;height:100%;border-radius:calc(var(--pw) * .116) calc(var(--pw) * .116) 0 0;background:#0c0a09;font-size:var(--fs)}
.hx-island{position:absolute;left:50%;top:calc(var(--pw) * .03);z-index:3;width:calc(var(--pw) * .28);height:calc(var(--pw) * .078);border-radius:99px;background:#0c0a09;translate:-50% 0}
.hp-view{position:absolute;inset:0;background:#fff;opacity:.3;filter:grayscale(1);transition:opacity .45s var(--hx-ease),filter .45s var(--hx-ease)}
.hx.is-lit .hx-prize.is-on .hp-view{opacity:1;filter:none}
/* What the screens share: the status bar, the bar under it, a logo in a disc, an amount. */
.hp-status{display:flex;align-items:center;justify-content:space-between;height:3.1em;padding:.5em 1.9em 0 2.3em;font-weight:600}
.hp-sys{display:flex;align-items:center;gap:.35em}
.hp-sys svg{width:auto;height:.8em;fill:currentColor}
.hp-sys svg:last-child{height:.88em}
.hp-nav{display:flex;align-items:center;justify-content:space-between;height:2.3em;padding:0 1.1em}
.hp-title{font-size:1.75em;font-weight:700;letter-spacing:-.02em}
.hp-nav.is-mid b{font-size:1.1em;font-weight:600}
.hp-round{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#f0efed;color:#1c1917}
.hx-prize .icon{width:1.15em;height:1.15em;stroke-width:2.2}
.hp-link{display:inline-flex;align-items:center;gap:.05em;font-size:1.1em;color:var(--hl)}
.hp-arrows{display:flex;gap:.7em;color:var(--hl)}
.hp-top{display:flex;align-items:center;gap:.6em}
.hp-top b{font-size:1.05em;font-weight:600}
.hp-top em,.hp-kind{font-style:normal;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.82}
.hp-top em{margin-left:auto}
.hp-logo{display:grid;place-items:center;flex:none;width:2em;height:2em;border-radius:50%;overflow:hidden;background:#fff}
.hp-logo img{width:1.55em;height:1.55em;object-fit:contain}
.hp-amt{display:block;font-family:var(--display);font-weight:420;font-size:2.9em;line-height:1;letter-spacing:-.02em}
.hp-sub{font-size:.85em;opacity:.9}
.hp-brand{display:block}
/* An Apple Wallet pass: the team's own card in its colour, a band of its second colour along the foot. It waits
   under the foot of the stage, with the pass the fan already has in its place; lit, it rises into the list and that
   pass moves down under it. */
.hp-pass{--c:#0c2340;--c2:#78be20;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:8.3em;margin:.2em .9em 0;padding:.9em 1.1em .95em;border-radius:1em;color:#fff;background:radial-gradient(120% 95% at 0% 0%,#ffffff38 0%,#ffffff00 58%),linear-gradient(#0000 50%,#00000047),var(--c);box-shadow:0 .7em 1.3em -.8em #0c0a0999}
.hp-pass.is-new{z-index:2;translate:0 24em}
.b-eagles .hp-pass.is-new{--c:#004c54;--c2:#a5acaf}
.hp-pass.is-new::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.32em;background:var(--c2)}
.hp-pass.is-peek{--c:#44403c;justify-content:flex-start;height:6em;margin-top:.5em;translate:0 -8.8em}
.hx-prize.is-in .hp-pass.is-new{translate:0 0;transition:translate .85s cubic-bezier(.2,.85,.25,1.03)}
.hx-prize.is-in .hp-pass.is-peek{translate:0 0;transition:translate .7s var(--hx-ease) .1s}
/* A sponsor's gift card: its red, squarer corners, its logo on a white disc, a card number. It is not on the screen
   but over the phone, placed exactly on the empty slot the screen keeps for it: it waits out to the upper right,
   larger and tilted, and lit it flies in and lands; then the line under it reports the credit. */
.hp-slot{height:8.5em;margin:.3em .9em 0;border-radius:.75em;background:#f0efed}
.hp-gift{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:8.5em;margin:.3em .9em 0;padding:.85em 1.1em .8em;border-radius:.75em;color:#fff;background:radial-gradient(90% 120% at 100% 0%,#ffffff2e 0%,#ffffff00 60%),linear-gradient(135deg,#a81612,#7a100d);box-shadow:0 .7em 1.3em -.8em #0c0a0999}
.hp-gift.is-fly{position:absolute;z-index:4;left:calc(50% - var(--pw) / 2 + var(--pb) + .9 * var(--fs));top:calc(var(--pt) + var(--pb) + 5.7 * var(--fs));width:calc(var(--pw) - 2 * var(--pb) - 1.8 * var(--fs));margin:0;font-size:var(--fs);opacity:0;translate:21cqw -7cqw;rotate:11deg;scale:1.2}
.hx-prize.is-in .hp-gift.is-fly{opacity:1;translate:0 0;rotate:0deg;scale:1;transition:translate .9s cubic-bezier(.2,.8,.2,1),rotate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1),opacity .25s linear}
.hp-gift img.hp-brand{width:2.5em;height:2.5em;padding:.18em;border-radius:50%;background:#fff}
.hp-foot{display:flex;align-items:center;justify-content:space-between;font-size:.85em;opacity:.92}
.hp-no{font-family:var(--mono);letter-spacing:.06em}
.hp-line{display:flex;align-items:center;justify-content:space-between;margin:.65em .9em 0;padding:.65em .95em;border-radius:.75em;background:#f5f5f4;font-size:.9em;color:#57534d;opacity:0;translate:0 .6em}
.hp-line b{font-weight:600;color:var(--hl)}
.hx-prize.is-in .hp-line{opacity:1;translate:0 0;transition:opacity .35s linear .75s,translate .45s var(--hx-ease) .75s}
/* An Apple Wallet event ticket, opened: the notch at its head, the team's colours, the ticketing platform's mark,
   and a barcode on white. It waits folded up under the bar; lit, it unfolds. */
.hp-pass.is-event{--c:#041e42;--c2:#ff4c00;height:auto;margin-top:.3em;padding:1.2em 1.1em 0;border-radius:1em 1em 0 0;justify-content:flex-start;-webkit-mask:radial-gradient(circle .8em at 50% 0,#0000 97%,#000);mask:radial-gradient(circle .8em at 50% 0,#0000 97%,#000);transform-origin:50% 0;transform:perspective(46em) rotateX(-86deg);opacity:0}
.hx-prize.is-in .hp-pass.is-event{transform:perspective(46em) rotateX(0deg);opacity:1;transition:transform .9s cubic-bezier(.2,.85,.25,1.03),opacity .2s linear}
.hp-pass.is-event::before{content:"";position:absolute;left:0;right:0;top:0;height:.38em;background:var(--c2)}
.hp-tm{width:1.75em;height:1.75em;margin-left:auto;border-radius:.4em}
.hp-kind{display:block;margin-top:.55em}
.hp-pass.is-event .hp-amt{margin-top:.05em;font-size:2.7em}
.hp-pass.is-event .hp-sub{margin-top:.2em}
.hp-code{display:grid;place-items:center;margin-top:.6em;padding:.75em 0 2em;border-radius:.7em .7em 0 0;background:#fff}
.hp-bars{width:12em;height:3.4em;background:repeating-linear-gradient(90deg,#1c1917 0 .18em,#0000 .18em .36em,#1c1917 .36em .45em,#0000 .45em .72em,#1c1917 .72em 1em,#0000 1em 1.18em)}
/* An email, in Mail: the inbox, the team's message at its head (unread), two more under it as grey bars. Lit, the
   message opens out of its row to fill the screen, and the sponsor's eGift card comes up in it: its logo, the
   amount, a button in its red. */
.hp-inbox,.hp-open{position:absolute;inset:3.1em 0 0}
.hp-row{position:relative;display:flex;align-items:flex-start;gap:.65em;margin:0 1.1em;padding:.6em 0;border-top:1px solid #e7e5e4}
.hp-row>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.5em;row-gap:.05em;flex:1;min-width:0}
.hp-row b{font-weight:600}
.hp-row time,.hp-from small,.hp-from time{font-size:.8em;color:#87827d}
.hp-row-sub,.hp-row-snip{grid-column:1 / -1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hp-row-sub{font-size:.95em;font-weight:500}
.hp-row-snip{font-size:.85em;color:#87827d}
.hp-dot{position:absolute;left:-.78em;top:1.45em;width:.48em;height:.48em;border-radius:50%;background:var(--hl)}
.hp-row .hp-logo,.hp-from .hp-logo{width:2.3em;height:2.3em;box-shadow:inset 0 0 0 1px #e7e5e4}
.hp-row .hp-logo img,.hp-from .hp-logo img{width:1.75em;height:1.75em}
.hp-row.is-ghost{align-items:center;padding:.75em 0}
.hp-row.is-ghost i{flex:none;width:2.3em;height:2.3em;border-radius:50%;background:#f0efed}
.hp-row.is-ghost div{display:grid;grid-template-columns:none;row-gap:.5em}
.hp-row.is-ghost u{height:.6em;border-radius:.4em;background:#f0efed}
.hp-row.is-ghost u:first-child{width:38%;background:#e7e5e4}
.hp-row.is-ghost u:last-child{width:74%}
.hp-open{background:#fff;opacity:0;clip-path:inset(2.3em .6em calc(100% - 7.3em) .6em round .7em)}
.hx-prize.is-in .hp-open{opacity:1;clip-path:inset(0 0 0 0 round 0em);transition:clip-path .65s var(--hx-ease) .12s,opacity .18s linear .12s}
.hx-prize.is-in .hp-inbox .hp-nav{opacity:0;transition:opacity .12s linear .1s}
.hp-from{display:flex;align-items:center;gap:.65em;margin:.15em 1.1em 0;padding-bottom:.6em;border-bottom:1px solid #e7e5e4}
.hp-from b{display:block;font-weight:600}
.hp-from small{display:block}
.hp-from time{margin-left:auto;align-self:flex-start}
.hp-subject{display:block;margin:.5em 1.1em 0;font-size:1.2em;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.hp-card{margin:.55em 1.1em 0;padding:.7em 1em .8em;border-radius:.8em;color:#1c1917;background:#fff;box-shadow:inset 0 0 0 1px #e7e5e4,0 .6em 1.2em -.9em #0c0a0980;opacity:0;translate:0 .9em}
.hx-prize.is-in .hp-card{opacity:1;translate:0 0;transition:opacity .35s linear .5s,translate .5s var(--hx-ease) .5s}
.hp-card img.hp-brand{width:auto;height:2.1em}
.hp-card .hp-top em{color:#57534d;opacity:1}
.hp-buy{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-top:.35em}
.hp-card .hp-amt{font-size:2.1em}
.hp-btn{display:inline-flex;align-items:center;height:2.3em;padding:0 1.1em;border-radius:99px;background:#e51636;color:#fff;font-style:normal;font-size:.85em;font-weight:600;white-space:nowrap}
/* An iMessage from the team: who it is from under the status bar, then the message, which pops into the thread in a
   grey bubble with its tail, the way one arrives. */
.hp-thread{position:relative;display:flex;justify-content:center;height:4em;border-bottom:1px solid #e7e5e4;background:#f7f7f6}
.hp-thread .hp-link{position:absolute;left:.8em;top:.55em}
.hp-who{display:grid;justify-items:center;align-content:start;gap:.15em}
.hp-who .hp-logo{width:2.1em;height:2.1em;box-shadow:inset 0 0 0 1px #e7e5e4}
.hp-who .hp-logo img{width:1.6em;height:1.6em}
.hp-who b{display:flex;align-items:center;gap:.1em;font-size:.82em;font-weight:500}
.hp-who .icon{width:.85em;height:.85em;color:#a8a29e}
.hp-stamp{display:block;margin:.6em 0 .5em;text-align:center;font-size:.72em;line-height:1.35;color:#87827d}
.hp-stamp b{margin-right:.45em;font-weight:600}
.hp-bubble{position:relative;width:fit-content;max-width:86%;margin:0 0 0 .9em;padding:.55em .85em .6em;border-radius:1.15em;background:#e9e9eb;font-size:1.16em;line-height:1.3;transform-origin:0 100%;opacity:0;scale:.5;translate:0 1em}
.hp-bubble::before{content:"";position:absolute;left:-.45em;bottom:0;width:1.25em;height:1.25em;border-bottom-right-radius:1em .9em;background:#e9e9eb}
.hp-bubble::after{content:"";position:absolute;left:-.65em;bottom:0;width:.65em;height:1.25em;border-bottom-right-radius:.65em;background:#fff}
.hp-bubble u{color:var(--hl);text-underline-offset:.12em}
.hx-prize.is-in .hp-bubble{opacity:1;scale:1;translate:0 0;transition:scale .5s cubic-bezier(.3,1.35,.5,1) .35s,translate .5s cubic-bezier(.3,1.35,.5,1) .35s,opacity .18s linear .35s}
/* ---------- The league chips: the playing one's border fills over the moment (no line inside) ---------- */
.hm-chip i{display:none}
.hm-chip-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hm-chip-ring path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hm-chip:not(.is-on) .hm-chip-ring{visibility:hidden}
.hm-chip.is-on{box-shadow:inset 0 0 0 1px var(--line),0 10px 22px -14px #0c0a0980}
/* ---------- On every screen the hero's words sit above, centred, and the cards get the full width under them ---------- */
@media(min-width:1200px){
  body.hero-wide .hero{padding-top:108px}
  body.hero-wide .hero-inner{display:block}
  body.hero-wide .hero-copy{width:800px;max-width:100%;margin:0 auto;text-align:center}
  body.hero-wide .hero-description{max-width:600px;margin-inline:auto}
  body.hero-wide .hero-actions,body.hero-wide .hero-proof{justify-content:center}
  body.hero-wide .hero-side{width:100%;margin:28px auto 0}
  body.hero-wide .hero-visual{padding:24px 24px 20px}
}
/* Oct 6 (Barr): the words a little larger, the picture a little smaller (about a tenth each way). */
body.hero-wide .hero h1#hero-title{font-size:48px}
body.hero-wide .hero-copy .hero-description{font-size:21px}
@media(min-width:1200px) and (max-width:1339px){body.hero-wide .hero h1#hero-title{font-size:46px}}
@media(max-width:1199px){body.hero-wide .hero h1#hero-title{font-size:42px}body.hero-wide .hero-copy .hero-description{font-size:20px}}
@media(min-width:1024px) and (max-width:1199px){body.hero-wide .hero-side{width:min(100%,980px);margin-inline:auto}}
.motion-paused .hx-confetti i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .hx :is(.hx-tag,.hx-say,.hx-give,.hx-tick,.hx-cut,.hx-clip,.hx-prize,.hx-card,.hx-arrow i,.hx-ring path){transition:none}
  .hx-confetti{display:none}
  .hx-prize *{transition:none!important}
}
/* Small laptops: a little more room for the Then's words beside its badge. */
@media(min-width:1024px) and (max-width:1199px){.hx{--hx-f:clamp(16.5px,calc((50cqw - 148px) / 18.4),19.5px);--hx-pic:calc((50cqw - 52px) / 2);grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}.hx-arrow{margin:calc(15px + 1.4 * var(--hx-f)) 10px 0 6px}}
@media(max-width:1023px){
  /* Tablets and phones: the If, the arrow pointing down, the Then, at a readable width. */
  .hx{--hx-f:18px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 46px auto;max-width:460px;margin:0 auto}
  .hx-arrow{justify-self:start;align-self:stretch;width:4px;height:auto;margin:6px 0 12px 40px}
  .hx-arrow i{background:linear-gradient(180deg,var(--ok),var(--hl));transform-origin:50% 0;transform:scaleY(var(--go,0))}
  .hx-arrow::after{right:auto;left:50%;top:auto;bottom:-3px;translate:-50% 0;rotate:135deg}
}
@media(max-width:809px){
  /* Phones: the headline leads (29px), then the line under it (16px), then the cards, whose words are smaller still
     (15px). Book a demo is in the header, so the hero has no buttons. The cards are compact and calm: small badges, a
     short strip of the clip, thin lines and soft glows, and no reward picture (the sentence says what it is). The
     hero is only as tall as it needs to be, and never taller than the screen: only the clip gives way. */
  body.hero-wide .hero{display:flex;flex-direction:column;box-sizing:border-box;height:auto;min-height:0;max-height:100vh;max-height:100svh;padding:76px 0 14px}
  body.hero-wide .hero-inner{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
  body.hero-wide .hero-copy{flex:none;width:auto;max-width:none;margin:0;text-align:left}
  body.hero-wide .hero h1#hero-title{font-size:31px;line-height:1.08}
  body.hero-wide .hero-copy .hero-description{max-width:none;margin:10px 0 0;font-size:17px;line-height:1.45}
  body.hero-wide .hero-actions{display:none}
  body.hero-wide .hero-side{display:flex;flex-direction:column;flex:1;min-height:0;row-gap:10px;margin-top:16px}
  body.hero-wide .hero-visual{display:flex;align-items:stretch;flex:1;min-height:0;margin:0;padding:10px;border-radius:22px}
  .hx{--hx-f:15px;flex:1;min-height:0;max-width:none;grid-template-rows:minmax(0,max-content) 22px auto;align-content:center}
  .hx-card{padding:10px;border-radius:16px}
  .hx-if{display:flex;flex-direction:column}
  .hx-head{flex:none;align-items:flex-start;gap:8px;min-height:0;margin-bottom:0}
  .hx-says,.hx-gives{min-height:0;padding-top:1px}
  .hx-then-copy{flex:none;gap:8px;margin-bottom:0}
  .hx-say,.hx-give{font-size:15px;line-height:1.42}
  .hx-tag{gap:4px;height:24px;padding:0 8px 0 7px;border-radius:8px;font-size:11px}
  .hx-tag .icon{width:12px;height:12px}
  .hx-tick{width:22px;height:22px}
  .hx-tick .icon{width:13px;height:13px}
  .hx-clip{flex:1 1 auto;height:calc((100vw - 80px) * .36);min-height:50px;margin-top:9px;aspect-ratio:auto;border-radius:11px}
  .hx-cut[src*="edwards"]{object-position:50% 20%}
  .hx-confetti{right:21px;top:22px}
  .hx-ring path{stroke-width:2}
  .hx.is-hit .hx-if{box-shadow:inset 0 0 0 1px #fff,0 0 0 3px color-mix(in srgb,var(--ok) 14%,#0000),0 18px 36px -24px color-mix(in srgb,var(--ok-deep) 50%,#0000)}
  .hx.is-lit .hx-then{box-shadow:inset 0 0 0 1px #fff,0 0 0 3px #0b63e81a,0 18px 36px -22px #0b63e899}
  .hx-arrow{margin:3px 0 6px 32px}
  .hx-prizes{display:none}
  .hm-reel{flex:none}
  .hm-chip{height:26px}
  .hm-chip img{height:16px}
}
/* The very shortest phones: the line under the headline gives way, then the league chips. */
@media(max-width:809px) and (max-height:600px){body.hero-wide .hero-copy .hero-description{display:none}}
@media(max-width:809px) and (max-height:540px){body.hero-wide .hero-side .hm-reel{display:none}}
/* ---------- [dictionary entry] The headline is a dictionary entry on a card of its own (Oct 7) ----------
   The hero's words are set as a dictionary sets an entry, in the site's own type. On top, the headword in Geist
   semibold, its part of speech in italics and its pronunciation between backslashes, all on one line. Under it, the
   sense: a bold colon, then the definition in the heading face and its two tones, in lower case with no full stop,
   the second line hung under the first. The definition is the page's h1.
   The entry sits on a white card with a hairline and a soft shadow. From tablets up the card is only as wide as
   its words and is centred, with the line of copy and the buttons centred under it; on phones it is the full
   width. The hero's top padding comes down a little from tablets up, so the cards below stay about where they
   were. The system face sets "noun" and the pronunciation: it has a true italic and the phonetic letters on every
   device, and Geist has neither. */
.hero-entry{box-sizing:border-box;width:fit-content;max-width:100%;margin:0 auto;padding:20px 30px 24px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px #1c19170a,0 20px 44px -30px #1c191747}
.he-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;margin:0 0 8px}
.he-word{font-family:var(--sans);font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.035em;color:var(--ink)}
.he-pos{font-family:var(--text);font-size:19px;font-style:italic;font-weight:400;color:var(--faint)}
.he-say{font-family:var(--text);font-size:17px;color:var(--faint)}
body.hero-wide .hero .hero-entry h1#hero-title{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:.3em;margin:0;font-size:40px;line-height:1.12}
.he-colon{font-family:var(--sans);font-size:.8em;font-weight:600;letter-spacing:0}
body.hero-wide .hero-copy .hero-entry+.hero-description{margin-top:16px}
@media(min-width:1200px){body.hero-wide .hero{padding-top:92px}}
@media(min-width:810px) and (max-width:1199px){body.hero-wide .hero{padding-top:112px}body.hero-wide .hero-copy{width:700px}body.hero-wide .hero .hero-entry h1#hero-title{font-size:36px}}
/* Phones: the definition is sized to the screen so that its first tone, "next-generation risk management", holds
   one line beside the colon at every width (it is 13.8 times the type size wide; 78px is the card's own margins and
   padding); the second tone takes two lines under it. The card is the full width on a phone, and no wider than it
   needs to be on the small tablets that share this layout. */
@media(max-width:809px){
  .hero-entry{min-width:min(100%,520px);margin:0;padding:13px 16px 15px;border-radius:16px}
  .he-head{gap:0 10px;margin-bottom:5px}
  .he-word{font-size:25px}
  .he-pos{font-size:16px}
  .he-say{font-size:15px}
  body.hero-wide .hero .hero-entry h1#hero-title{font-size:min(calc((100vw - 78px) / 14.7),30px);line-height:1.16}
  body.hero-wide .hero-copy .hero-entry+.hero-description{margin-top:12px}
}