/* FUNK LAYER: one diagonal after the hero, one before the footer, brand gradients everywhere else. Loaded after site.css. */
:root{--cut:3vw;--ink2:#3A2A1C}

/* SOFT BLOBS: a helper used by the stone sections */
.hero,.how,#toolbox,#when,#funnels{position:relative;isolation:isolate}
.hero::before,.how::before,#toolbox::before,#when::before,#funnels::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero::before{background:
 radial-gradient(38% 46% at 74% 42%,rgba(240,191,176,.6),transparent 72%),
 radial-gradient(26% 30% at 90% 86%,rgba(212,220,200,.8),transparent 72%),
 radial-gradient(22% 26% at 6% 92%,rgba(245,220,79,.42),transparent 72%)}
.how::before,#when::before{background:
 radial-gradient(34% 50% at 82% 50%,rgba(212,220,200,.75),transparent 72%),
 radial-gradient(20% 30% at 8% 20%,rgba(240,191,176,.35),transparent 72%)}
#toolbox::before,#funnels::before{background:
 radial-gradient(30% 40% at 12% 80%,rgba(245,220,79,.3),transparent 72%),
 radial-gradient(30% 40% at 90% 20%,rgba(240,191,176,.45),transparent 72%)}

/* DIAGONAL AFTER THE HERO: the paper band's top edge is cut, everything below stays level */
.hero{padding-bottom:calc(var(--cut) + 56px)}
.pin,.why,.when{position:relative;border-top:0;margin-top:calc(-1*var(--cut));padding-top:var(--cut);isolation:isolate}
.pin{background:transparent}
.pin::before,.why::before,.when::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--paper) 55%,var(--cream));clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.why,.when{background:transparent}
.pin::after,.why::after,.when::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--cut);pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--ink) calc(50% - 1.2px),var(--ink) calc(50% + 1.2px),transparent calc(50% + 1.2px))}
.pin .sticky{padding-top:calc(88px + var(--cut))}

/* PRICING: straight edges, ink-to-oak sweep */
.pricing{background:linear-gradient(120deg,var(--ink) 30%,var(--ink2))}
.pricing .tagbox{transform:rotate(-2.5deg);transition:transform .25s}
.pricing .tagbox:hover{transform:rotate(0)}

/* STICKER TILT on the funnel panel */
.funnelbox{transform:rotate(1.5deg);transition:transform .25s}
.funnelbox:hover{transform:rotate(0)}

/* BENTO + SURFACE TILES: soft light-to-dark sweeps */
.tile.dark{background:linear-gradient(135deg,var(--ink) 40%,var(--ink2))}
.tile.coral{background:linear-gradient(135deg,#F0BFB0,#F8DCD3)}
.tile.sage{background:linear-gradient(160deg,#D4DCC8,#E7ECDF)}
.tile.oak{background:linear-gradient(135deg,#F5DC4F,#FBEB92)}
.tile.cream{background:linear-gradient(135deg,#F4EEE2,#FBF7EF)}
.cmp .hi{background:linear-gradient(180deg,#D4DCC8,#E3E9D9)}
.js .band.on::before,html:not(.js) .band::before{background:linear-gradient(120deg,#F0BFB0,#F6D2C6)}

/* FOOTER: diagonal top edge, ink-to-oak sweep, yellow glow behind the wordmark */
footer{clip-path:polygon(0 0,100% calc(var(--cut) + 1vw),100% 100%,0 100%);margin-top:calc(-1*var(--cut));padding-top:calc(72px + var(--cut) + 1vw);
 background:radial-gradient(48% 55% at 50% 105%,rgba(245,220,79,.22),transparent 70%),linear-gradient(160deg,var(--ink),var(--ink2))}

@media(max-width:900px){:root{--cut:5vw}.funnelbox,.pricing .tagbox{transform:none}}
@media(prefers-reduced-motion:reduce){.funnelbox,.pricing .tagbox{transition:none}}