@font-face{font-family:"Fredoka";src:url("fonts/Fredoka.woff2") format("woff2"),url("fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Titan One";src:url("fonts/TitanOne-Jello.woff2") format("woff2"),url("fonts/TitanOne-Jello.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
 --jf-cream:#FFF8EE;--jf-red:#D2232A;--jf-red-dark:#A8161D;--jf-ink:#2B1B17;--jf-ink-soft:#5A4640;--jf-gold:#F2B33D;
 --jf-chocolate:#5A3220;--jf-vanilla:#F3E3C3;--jf-strawberry:#E8344E;--jf-strawberry-light:#FF8FA3;
 --jf-tapioca:#EFE4CF;--jf-pearl:#D9C7A3;--jf-protein:#3B2116;--jf-protein-accent:#C89B6D;
 --jf-jello-font:"Titan One","Lilita One",ui-rounded,system-ui,sans-serif;
 --jf-font:"Fredoka",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
 --jf-radius:18px;--jf-tap:48px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--jf-cream);color:var(--jf-ink);font-family:var(--jf-font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font-family:inherit}
.jf-btn{min-height:var(--jf-tap);min-width:var(--jf-tap);padding:10px 22px;border:0;border-radius:999px;background:var(--jf-red);color:#fff;font-weight:600;font-size:18px;cursor:pointer;box-shadow:0 4px 0 var(--jf-red-dark);transition:transform .08s}
.jf-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--jf-red-dark)}
.jf-btn.alt{background:#fff;color:var(--jf-ink);box-shadow:0 4px 0 #D9CBB8}
.jf-btn:focus-visible{outline:3px solid var(--jf-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}
/* Campaign small details (brand/CAMPAIGN_AESTHETIC.md): flat colour-pop fields, glossy chunky buttons, jiggle press */
:root{--jf-pop-pink:#FF7AA8;--jf-pop-sky:#3FC1FF;--jf-pop-yellow:#FFE45C;--jf-pop-lime:#7ED957;--jf-jiggle:cubic-bezier(.34,1.56,.64,1)}
.jf-pop{background:var(--jf-pop-sky)}
.jf-btn{background-image:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 45%);transition:transform .18s var(--jf-jiggle)}
.jf-btn:hover{transform:scale(1.04) rotate(-1deg)}

/* JELL-O Simply pack lockup — text approx of sleeve (Titan One + Fredoka SIMPLY) */
.jf-jello{font-family:var(--jf-jello-font);font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.jf-subbrand{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;vertical-align:middle;margin:0 6px 2px 0;padding:0;border:0;background:transparent;line-height:0.75;box-sizing:border-box;position:relative}
.jf-subbrand-simply{filter:drop-shadow(0 0 0 #B8C4C0)}
.jf-subbrand .jf-sub-j{display:block;position:relative;z-index:2;color:#D2232A;font-family:var(--jf-jello-font);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:0.9;
  text-shadow:-2px 0 #EAF3EC,2px 0 #EAF3EC,0 -2px #EAF3EC,0 2px #EAF3EC,-1.5px -1.5px #EAF3EC,1.5px 1.5px #EAF3EC,1.5px -1.5px #EAF3EC,-1.5px 1.5px #EAF3EC}
.jf-subbrand .jf-sub-s{display:block;position:relative;z-index:1;margin-top:-6px;color:#586F60;font-family:"Fredoka",ui-rounded,system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase;line-height:0.9;
  text-shadow:-3px 0 #EAF3EC,3px 0 #EAF3EC,0 -3px #EAF3EC,0 3px #EAF3EC,-2px -2px #EAF3EC,2px 2px #EAF3EC,2px -2px #EAF3EC,-2px 2px #EAF3EC}
.jf-subbrand-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.jf-subbrand-wrap>.jf-subbrand{margin:0}