/* ===================================================================
   PROBABILITY GLITCH — Carnival design system
   1930s rubberhose / fairground: thick outlines, hard shadows,
   bold slab display, warm cream paper, red+gold+blue accents.
   =================================================================== */

:root{
  /* palette */
  --cream:#f4e8cc;
  --cream-deep:#ecd9b0;
  --paper:#fffaef;
  --ink:#2b1d10;
  --ink-2:#6a543b;
  --ink-soft:#8a7559;
  --red:#d63a28;
  --red-deep:#b22a1c;
  --gold:#f0b32b;
  --gold-deep:#d8961a;
  --blue:#2d6f9f;
  --blue-deep:#1f527a;
  --teal:#2f9e7e;
  --line:#d8c6a0;

  /* derived */
  --accent:var(--red);
  --shadow:5px 5px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --bw:3px;

  --display:'Alfa Slab One', serif;
  --fun:'Bangers', cursive;
  --body:'Fredoka', sans-serif;

  --anim:1; /* animation speed multiplier (tweakable) */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(circle at 50% -10%, rgba(255,255,255,.5), transparent 55%);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:.3px; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---- decorative sunburst + halftone helpers ---- */
.sunburst{
  position:absolute; inset:-40% -20%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 42%,
    rgba(240,179,43,.20) 0deg 7deg, transparent 7deg 14deg);
  animation:spin calc(120s / var(--anim)) linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.halftone{
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size:13px 13px;
}

/* ---- bunting (pennant) strip ---- */
.bunting{height:26px; display:flex; overflow:hidden; position:relative; z-index:2}
.bunting i{flex:1; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:24px solid var(--red)}
.bunting i:nth-child(3n+2){border-top-color:var(--gold)}
.bunting i:nth-child(3n+3){border-top-color:var(--blue)}

/* =========================== NAV =========================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:var(--bw) solid var(--ink);
}
.nav-in{max-width:1160px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:14px}
.logo{display:flex; align-items:center; gap:11px; cursor:pointer}
.logo img{width:48px; height:48px; object-fit:contain; filter:drop-shadow(2px 2px 0 rgba(43,29,16,.25))}
.logo .name{font-family:var(--display); font-size:21px; line-height:.95}
.logo .name b{color:var(--red)}
.logo .name small{display:block; font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:2px; color:var(--ink-soft); text-transform:uppercase; margin-top:3px}
.nav-links{margin-left:auto; display:flex; gap:6px; align-items:center}
.nav-links a{
  font-weight:600; font-size:15px; padding:8px 14px; border-radius:30px;
  border:2.5px solid transparent; cursor:pointer; transition:.14s; white-space:nowrap;
}
.nav-links a:hover{background:var(--cream-deep)}
.nav-links a.active{background:var(--ink); color:var(--paper)}
.nav-cta{background:var(--red)!important; color:#fff!important; border-color:var(--ink)!important;
  box-shadow:var(--shadow-sm)}
.nav-cta:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}
.burger{display:none; margin-left:auto; flex-direction:column; gap:5px; cursor:pointer; padding:6px}
.burger span{width:26px; height:3px; background:var(--ink); border-radius:3px}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:18px;
  padding:13px 26px; border-radius:40px; border:var(--bw) solid var(--ink);
  background:var(--paper); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
  text-align:center;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.btn-red{background:var(--red); color:#fff}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-blue{background:var(--blue); color:#fff}
.btn-lg{font-size:21px; padding:16px 34px}
.btn-sm{font-size:15px; padding:9px 18px; box-shadow:var(--shadow-sm)}
.btn-block{display:flex; width:100%}

/* =========================== CARDS =========================== */
.card{
  background:var(--paper); border:var(--bw) solid var(--ink);
  border-radius:20px; box-shadow:var(--shadow); padding:24px;
}
.card-flat{box-shadow:var(--shadow-sm); border-radius:16px}

/* =========================== LAYOUT =========================== */
.page{display:none; animation:fadeup .4s ease both}
.page.active{display:block}
@keyframes fadeup{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.wrap{max-width:1160px; margin:0 auto; padding:0 22px}
.section{padding:64px 0}
.eyebrow{font-family:var(--body); font-weight:600; letter-spacing:3px; text-transform:uppercase;
  font-size:13px; color:var(--red); display:inline-flex; align-items:center; gap:8px}
.eyebrow::before,.eyebrow::after{content:''; width:22px; height:3px; background:var(--gold); border-radius:3px}

/* pill tag */
.tag{display:inline-block; font-weight:600; font-size:13px; padding:4px 12px; border-radius:30px;
  border:2.5px solid var(--ink); background:var(--gold)}

/* =========================== HERO =========================== */
.hero{position:relative; overflow:hidden; padding:54px 0 30px}
.hero-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:30px; align-items:center; position:relative; z-index:2}
.hero h1{font-size:clamp(38px, 6vw, 74px)}
.hero h1 .pop{color:var(--red); display:inline-block}
.hero .lede{font-size:20px; max-width:30ch; margin:18px 0 26px; color:var(--ink-2); font-weight:500}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}

/* the celebrating Louie */
.louie-stage{position:relative; display:flex; justify-content:center; z-index:2}
.louie{width:min(360px, 80%); filter:drop-shadow(6px 8px 0 rgba(43,29,16,.18)); transform-origin:55% 90%}
.louie-idle{animation:bob calc(3.4s / var(--anim)) ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.louie-wave{animation:wave calc(.9s / var(--anim)) ease-in-out 2}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}}
.louie-jump{animation:jump calc(.6s / var(--anim)) cubic-bezier(.3,1.6,.5,1) 1}
@keyframes jump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-46px) scale(1.06)}70%{transform:translateY(0) scale(.97,1.03)}100%{transform:translateY(0) scale(1)}}

/* speech bubble */
.bubble{
  position:absolute; top:6%; left:-6%; max-width:200px; background:#fff;
  border:var(--bw) solid var(--ink); border-radius:18px; padding:12px 15px;
  font-weight:600; font-size:15px; box-shadow:var(--shadow-sm); z-index:3;
  transition:opacity .25s, transform .25s;
}
.bubble::after{content:''; position:absolute; bottom:-16px; left:34px; width:0; height:0;
  border:9px solid transparent; border-top-color:var(--ink)}
.bubble::before{content:''; position:absolute; bottom:-10px; left:37px; width:0; height:0;
  border:6px solid transparent; border-top-color:#fff; z-index:1}
.bubble.flip{left:auto; right:-6%}
.bubble.flip::after{left:auto; right:34px}
.bubble.flip::before{left:auto; right:37px}

/* floating doodads */
.floater{position:absolute; z-index:1; opacity:.9; pointer-events:none}
.star{color:var(--gold)}
.float-a{animation:floaty calc(5s / var(--anim)) ease-in-out infinite}
.float-b{animation:floaty calc(6.5s / var(--anim)) ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(8deg)}}
.coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ffe07a,var(--gold) 60%,var(--gold-deep));
  border:2.5px solid var(--ink); display:grid; place-items:center; font-family:var(--display); color:var(--ink); font-size:15px}

/* =========================== CALCULATOR =========================== */
.calc{display:grid; grid-template-columns:0.95fr 1.05fr; gap:0; border:var(--bw) solid var(--ink);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow); background:var(--paper)}
.calc-in{padding:26px; border-right:var(--bw) solid var(--ink)}
.calc-out{padding:26px; background:linear-gradient(180deg,#fff8e6,#fff3d6); position:relative}
.calc h3{font-size:22px; margin-bottom:4px}
.field{margin:16px 0}
.field>label{display:block; font-weight:600; font-size:14px; color:var(--ink-2); margin-bottom:7px; letter-spacing:.3px}
.money{position:relative}
.money::before{content:'$'; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--display); font-size:18px; color:var(--ink-soft)}
.input{
  width:100%; font-family:var(--body); font-weight:600; font-size:18px;
  padding:13px 14px 13px 30px; border:2.5px solid var(--ink); border-radius:12px;
  background:#fff; color:var(--ink);
}
.input.plain{padding-left:14px}
.input:focus{outline:none; box-shadow:0 0 0 3px var(--gold)}
.input::placeholder{color:var(--ink-soft); font-weight:500}

/* chips / segmented */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-weight:600; font-size:14px; padding:8px 15px; border-radius:30px; border:2.5px solid var(--ink);
  background:#fff; cursor:pointer; transition:.12s; white-space:nowrap}
.chip:hover{background:var(--cream-deep)}
.chip.on{background:var(--gold); box-shadow:inset 0 0 0 2px var(--paper)}
.seg{display:inline-flex; border:2.5px solid var(--ink); border-radius:30px; overflow:hidden; background:#fff}
.seg button{font-family:var(--body); font-weight:600; font-size:14px; padding:9px 18px; border:none;
  background:transparent; cursor:pointer; color:var(--ink-2)}
.seg button.on{background:var(--blue); color:#fff}

/* range slider (shared) */
.range{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:10px;
  border:2.5px solid var(--ink); background:#fff; cursor:pointer; margin:6px 0}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffe07a,var(--gold) 60%,var(--gold-deep));
  border:3px solid var(--ink); margin-top:0; cursor:grab; box-shadow:var(--shadow-sm)}
.range::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--gold);
  border:3px solid var(--ink); cursor:grab}
.range.red::-webkit-slider-thumb{background:radial-gradient(circle at 38% 32%,#ff8a72,var(--red) 65%,var(--red-deep))}

.people{display:flex; align-items:center; gap:10px; margin-top:6px}
.people .count{font-family:var(--display); font-size:26px; min-width:30px; text-align:center}
.people .faces{display:flex; gap:-6px}

/* result */
.payout-label{font-weight:600; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft)}
.payout{font-family:var(--display); font-size:clamp(38px,5.5vw,60px); color:var(--red); line-height:1; margin:4px 0 2px;
  text-shadow:3px 3px 0 rgba(43,29,16,.12)}
.payout-sub{font-weight:600; color:var(--ink-2)}
.compare{margin:20px 0 8px}
.cmp-row{margin:11px 0}
.cmp-row .cmp-top{display:flex; justify-content:space-between; gap:8px; font-weight:600; font-size:14px; margin-bottom:5px}
.cmp-row .cmp-top span{white-space:nowrap}
.track{height:22px; border:2.5px solid var(--ink); border-radius:14px; background:#fff; overflow:hidden}
.fill{height:100%; width:0; border-radius:0; transition:width calc(.9s / var(--anim)) cubic-bezier(.3,1.1,.4,1)}
.fill.gold{background:repeating-linear-gradient(45deg,var(--gold) 0 12px,var(--gold-deep) 12px 24px)}
.fill.blue{background:repeating-linear-gradient(45deg,var(--blue) 0 12px,var(--blue-deep) 12px 24px)}
.breakdown{margin-top:14px; border-top:2.5px dashed var(--line); padding-top:14px}
.bd-row{display:flex; justify-content:space-between; padding:5px 0; font-weight:500}
.bd-row.keep{font-family:var(--display); color:var(--teal); font-size:19px; border-top:2.5px solid var(--line); margin-top:6px; padding-top:10px}
.bd-row .neg{color:var(--red); font-weight:600}

/* Louie's contextual tip in the calculator */
.louie-tip{display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:13px 15px;
  background:#fff7df; border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow-sm)}
.louie-tip .lt-face{flex:none; width:46px; height:46px; object-fit:contain; margin-top:2px}
.louie-tip .lt-body{min-width:0}
.louie-tip .lt-kicker{font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold-deep)}
.louie-tip .lt-text{font-weight:600; font-size:14.5px; line-height:1.4; margin-top:1px}
.louie-tip .lt-link{display:inline-block; margin-top:6px; font-weight:700; color:var(--red); cursor:pointer; font-size:14px}
.louie-tip .lt-link:hover{text-decoration:underline}
.louie-tip.empty .lt-link{display:none}

/* =========================== DREAM PLANNER =========================== */
.planner-grid{display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start}
.purse{background:var(--paper); border:var(--bw) solid var(--ink); border-radius:20px; padding:22px;
  box-shadow:var(--shadow); position:sticky; top:90px; text-align:center}
.purse .amt{font-family:var(--display); font-size:40px; color:var(--teal); line-height:1; margin:4px 0; transition:color .3s}
.purse.broke .amt{color:var(--red)}
.purse .meter{height:26px; border:2.5px solid var(--ink); border-radius:16px; background:#fff; overflow:hidden; margin:14px 0 6px}
.purse .meter .m-fill{height:100%; background:repeating-linear-gradient(45deg,var(--teal) 0 12px,#27876b 12px 24px);
  width:100%; transition:width calc(.6s / var(--anim)) ease, background .3s}
.purse.broke .meter .m-fill{background:repeating-linear-gradient(45deg,var(--red) 0 12px,var(--red-deep) 12px 24px)}

.spend-list{display:flex; flex-direction:column; gap:14px}
.spend{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:16px; padding:14px 16px;
  box-shadow:var(--shadow-sm)}
.spend .ic{width:46px; height:46px; border-radius:12px; border:2.5px solid var(--ink); display:grid; place-items:center;
  font-size:24px; background:var(--cream-deep)}
.spend .mid{min-width:0}
.spend .nm{font-weight:600; font-size:16px}
.spend .val{font-family:var(--display); font-size:20px; text-align:right; min-width:120px}
.spend .x{border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:20px; padding:4px}
.spend .x:hover{color:var(--red)}
.spend-right{display:flex; align-items:center; gap:8px}
.amt-input{width:132px; font-family:var(--display); font-size:17px; text-align:right;
  border:2.5px solid var(--ink); border-radius:10px; padding:7px 11px; background:#fff; color:var(--ink)}
.amt-input:focus{outline:none; box-shadow:0 0 0 3px var(--gold)}

/* =========================== GUIDES =========================== */
.guide-hero{display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; position:relative}
.book{position:relative; display:flex; justify-content:center}
.book img{width:min(330px,80%); filter:drop-shadow(8px 10px 0 rgba(43,29,16,.18))}
.benefit{display:flex; gap:12px; align-items:flex-start; margin:13px 0; font-weight:500; font-size:17px}
.benefit .ck{flex:none; width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff;
  border:2.5px solid var(--ink); display:grid; place-items:center; font-weight:700}
.price-tag{display:inline-flex; align-items:baseline; gap:8px; margin:6px 0}
.price-tag .now{font-family:var(--display); font-size:52px; color:var(--red)}
.price-tag .was{font-size:22px; color:var(--ink-soft); text-decoration:line-through}
.stars{color:var(--gold); font-size:20px; letter-spacing:2px}

/* tips */
.tip-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px}
.tip{overflow:hidden; padding:0; cursor:pointer}
.tip .thumb{height:140px; border-bottom:var(--bw) solid var(--ink); display:grid; place-items:center;
  font-family:var(--display); color:#fff; font-size:30px}
.tip .body{padding:18px}
.tip .body h3{font-size:19px; margin-bottom:6px}

/* winner-tips checklist */
.tip-section{margin-bottom:42px}
.tip-sec-head{display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:12px;
  border-bottom:3px dashed var(--line)}
.tip-sec-head .ic{flex:none; width:54px; height:54px; border-radius:14px; border:var(--bw) solid var(--ink);
  display:grid; place-items:center; font-size:26px; box-shadow:var(--shadow-sm)}
.tip-sec-head h3{font-size:clamp(22px,3.2vw,32px)}
.tip-sec-head .step-no{font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ink-soft)}
.tip-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(390px,1fr)); gap:18px}
.tip-item{display:flex; gap:16px; align-items:flex-start; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:transform .12s, box-shadow .12s}
.tip-item:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow)}
.tip-item .num{flex:none; width:46px; height:46px; border-radius:50%; border:var(--bw) solid var(--ink);
  display:grid; place-items:center; font-family:var(--display); font-size:20px; color:var(--ink);
  background:radial-gradient(circle at 38% 32%,#ffe07a,var(--gold) 60%,var(--gold-deep))}
.tip-item h4{font-family:var(--body); font-weight:700; font-size:18px; line-height:1.25; margin-bottom:5px}
.tip-item p{color:var(--ink-2); font-weight:500; font-size:15px; line-height:1.5}
.tip-cta{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--ink); color:var(--cream); border-radius:20px; padding:26px 30px; margin-top:10px}
.tip-cta h3{color:#fff; font-size:26px}

/* about */
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:36px; align-items:center}
.prose p{font-weight:500; color:var(--ink-2); font-size:18px; line-height:1.6; margin-top:15px}
.prose p:first-child{margin-top:0}
.do-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.do-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.do-card .emoji{width:62px; height:62px; border-radius:16px; border:var(--bw) solid var(--ink);
  display:grid; place-items:center; font-size:30px; background:var(--cream-deep); box-shadow:var(--shadow-sm); margin-bottom:4px}
.callout{background:#fff; border:var(--bw) solid var(--red); border-radius:20px; padding:26px 28px}
.callout .hot{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.callout .hot a{font-weight:700; background:var(--red); color:#fff; border:2.5px solid var(--ink);
  border-radius:30px; padding:9px 16px; box-shadow:var(--shadow-sm)}
.not-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}

/* =========================== FOOTER =========================== */
.foot{background:var(--ink); color:var(--cream); margin-top:40px}
.foot-in{max-width:1160px; margin:0 auto; padding:40px 22px; display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between}
.foot a{color:var(--cream); opacity:.85; font-weight:500; margin-right:16px; cursor:pointer}
.foot a:hover{opacity:1; color:var(--gold)}
.foot .disc{font-size:12px; opacity:.6; max-width:520px; line-height:1.5}
.foot-copy{background:rgba(0,0,0,.25); text-align:center; padding:12px 22px; font-size:12px; color:var(--cream); opacity:.7}

/* confetti */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:80}

/* tweaks mount */
#tweaks-root{position:fixed; inset:0; pointer-events:none; z-index:100}

/* =========================== RESPONSIVE =========================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero .lede{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .louie-stage{order:-1}
  .louie{width:min(260px,62%)}
  .calc{grid-template-columns:1fr}
  .calc-in{border-right:none; border-bottom:var(--bw) solid var(--ink)}
  .planner-grid{grid-template-columns:1fr}
  .purse{position:static}
  .guide-hero,.about-grid{grid-template-columns:1fr; text-align:center}
  .benefit{text-align:left}
  .book .floater{display:none}
  .guide-price{margin-left:0!important; justify-content:center}
  .guide-btns{justify-content:center}
}
@media(max-width:680px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--paper); border-bottom:var(--bw) solid var(--ink); padding:14px; gap:8px}
  .nav-links.open a{width:100%}
  .section{padding:44px 0}
  .morbid-card{grid-template-columns:1fr!important; text-align:center}
  .morbid-card>img{width:min(220px,70%)!important; margin:0 auto}
  .about-bottom-grid{grid-template-columns:1fr!important}
}