/* Bite Baas website. Tokens and rules follow brand/brandbook.html (v2.1). */
:root{
  --pepper:#E02A1F; --pepper-deep:#C41E14; --ink:#1C1714; --cream:#F7EFE3; --oat:#EADBC4; --ash:#6B5E54;
  --mosterd:#EDB526; --roze:#F0A3C6; --basil:#1E5A45; --delft:#A9C6EA; --wine:#4A1218;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat Brush",cursive;
  --wrap:1240px; --gut:32px; --nav:68px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.d{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.95}
.s{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.cap{font:700 12px/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase}
.ic{width:32px;height:32px;flex:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-ink :focus-visible,.on-wine :focus-visible,.foot :focus-visible{outline-color:var(--mosterd)}
.skip{position:absolute;left:var(--gut);top:-80px;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:99px;z-index:60;font-weight:600}
.skip:focus{top:12px}

/* ---------- buttons: pills that take a bite on hover ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:99px;border:2px solid var(--ink);
  font:700 16px/1 var(--text);text-decoration:none;cursor:pointer;overflow:hidden;white-space:nowrap;
  transition:transform .25s var(--spring),background .2s,color .2s}
.btn--lg{min-height:58px;padding:0 30px;font-size:18px}
.btn::after{content:"";position:absolute;top:-13px;right:-9px;width:42px;height:38px;pointer-events:none;
  background:radial-gradient(circle at 9px 9px,var(--ground,var(--cream)) 9px,#0000 9.5px),radial-gradient(circle at 23px 15px,var(--ground,var(--cream)) 10px,#0000 10.5px),radial-gradient(circle at 32px 29px,var(--ground,var(--cream)) 9px,#0000 9.5px);
  transform:scale(0);transform-origin:100% 0;transition:transform .3s var(--spring)}
.btn:hover{transform:translateY(-2px) rotate(-1.2deg)}
.btn:hover::after{transform:scale(1)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn--pepper{background:var(--pepper);border-color:var(--pepper);color:var(--cream)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--cream{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--line{background:transparent;border-color:currentColor;color:inherit}
.btn--line::after{display:none}
.btn--line:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.pill{display:inline-flex;align-items:center;padding:8px 16px;border-radius:99px;font:600 14px/1.3 var(--text)}
.pill--line{border:2px solid currentColor}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font:700 12px/1.2 var(--text)}
.tag i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
.tag--basil{background:var(--basil);color:var(--cream)}
.tag--cream{background:var(--cream);color:var(--ink)}
@keyframes blink{50%{opacity:.25}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);background:var(--cream);border-bottom:2px solid var(--ink);transition:transform .35s var(--ease)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;gap:24px;height:100%;position:relative}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand svg{width:24px;height:31px;color:var(--pepper);transition:transform .4s var(--spring)}
.brand:hover svg{transform:rotate(-10deg) scale(1.1)}
.brand b{font:800 23px/1 var(--display);letter-spacing:-.04em}
.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{padding:9px 14px;border-radius:99px;font:600 15px/1.3 var(--text);text-decoration:none;transition:background .2s,color .2s}
.nav__links a:hover{background:var(--ink);color:var(--cream)}
.nav__toggle{display:none;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:none;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),top .25s var(--ease)}
.nav__toggle span:first-child{top:18px}.nav__toggle span:last-child{top:26px}
.nav__toggle[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.nav__toggle[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{background:var(--pepper);color:var(--cream);padding-top:var(--nav);position:relative;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:24px;min-height:min(calc(100svh - var(--nav) - 76px),860px);padding-top:40px;padding-bottom:48px}
.hero__eyebrow{margin-bottom:28px}
.hero__h1{font-size:clamp(60px,9.4vw,148px);line-height:.86;letter-spacing:-.045em}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero__h1 .line>span{display:block}
.hero__h1 em{color:var(--ink);letter-spacing:-.03em;padding-right:.04em}
.hero__sub{font:600 clamp(18px,1.5vw,21px)/1.5 var(--text);max-width:34em;margin:30px 0 30px}
.hero__fact{margin-top:20px;font:600 18px/1.4 var(--text)}
.hero__stage{position:relative;height:min(660px,76vh);min-height:520px}
.plate{position:absolute;left:50%;top:50%;width:min(480px,92%);aspect-ratio:1;margin:calc(min(480px,92%)/-2) 0 0 calc(min(480px,92%)/-2);border-radius:50%;background:var(--mosterd);box-shadow:inset 0 0 0 26px var(--mosterd),inset 0 0 0 29px rgba(28,23,20,.18)}
.float{position:absolute;will-change:transform}
.float--pizza{width:150px;right:-2%;top:3%;animation:bob 6s ease-in-out infinite}
.float--donut{width:112px;left:0;top:18%;animation:bob 7s ease-in-out -2s infinite}
.float--koffie{width:104px;right:4%;bottom:6%;animation:bob 5.5s ease-in-out -1s infinite}
@keyframes bob{50%{translate:0 -14px;rotate:8deg}}
.stamp{position:absolute;left:2%;bottom:4%;width:150px;animation:spin 26s linear infinite}
@keyframes spin{to{rotate:360deg}}
.note{position:absolute;left:-1%;top:51%;width:160px;rotate:-12deg;filter:brightness(0) invert(.95) sepia(.2)}

/* phone */
.phone{position:relative;width:286px;aspect-ratio:286/580;border-radius:44px;background:var(--ink);padding:11px;box-shadow:0 0 0 2px var(--ink),14px 18px 0 rgba(28,23,20,.22)}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:78px;height:20px;margin-left:-39px;border-radius:12px;background:var(--ink);z-index:5}
.phone__screen{position:absolute;inset:11px;border-radius:34px;overflow:hidden;background:var(--cream);color:var(--ink)}
.hero__phone{position:absolute;left:50%;top:50%;margin:-290px 0 0 -143px;rotate:5deg}
.after{display:flex;flex-direction:column}
.after__photo{width:100%;height:56%;object-fit:cover;object-position:50% 62%}
.after__body{flex:1;padding:14px 16px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
.after__name{font:800 23px/1 var(--display);letter-spacing:-.035em;margin-top:4px}
.after__meta{font:400 13px/1.3 var(--text);color:var(--ash);margin-bottom:5px}
.fakebtn{display:flex;align-items:center;justify-content:center;width:100%;height:38px;border-radius:99px;border:2px solid var(--ink);font:700 14px/1 var(--text)}
.fakebtn--pepper{background:var(--pepper);border-color:var(--pepper);color:var(--cream);animation:nudge 2.6s var(--ease) infinite}
@keyframes nudge{0%,70%,100%{scale:1}80%{scale:1.05}90%{scale:.98}}

/* marquee */
.marquee{background:var(--ink);color:var(--cream);border-top:2px solid var(--ink);overflow:hidden;height:76px;display:flex;align-items:center}
.marquee__track{display:flex;align-items:center;gap:34px;white-space:nowrap;animation:slide 26s linear infinite;padding-left:34px}
.marquee span{font:800 34px/1 var(--display);letter-spacing:-.035em}
.marquee span.s{font:italic 500 36px/1 var(--serif);color:var(--mosterd)}
.marquee i{width:18px;height:18px;flex:none;background:var(--pepper);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:128px 0;position:relative;border-top:2px solid var(--ink)}
.on-ink{background:var(--ink);color:var(--cream)}
.on-wine{background:var(--wine);color:var(--cream)}
.on-mosterd{background:var(--mosterd)}
.on-roze{background:var(--roze)}
.sh{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:start;margin-bottom:64px}
.sh .num{font:italic 500 clamp(52px,7vw,104px)/.86 var(--serif);color:var(--pepper)}
.on-ink .sh .num{color:var(--mosterd)} .on-wine .sh .num{color:var(--roze)} .on-mosterd .sh .num,.on-roze .sh .num{color:var(--wine)}
.sh h2{font:800 clamp(40px,6vw,88px)/.92 var(--display);letter-spacing:-.04em;max-width:13em}
.sh h2 em,.subh em,.prob h3 em{letter-spacing:-.02em}
.sh h2 em{color:var(--pepper)}
.on-ink .sh h2 em{color:var(--mosterd)} .on-wine .sh h2 em{color:var(--roze)} .on-mosterd .sh h2 em,.on-roze .sh h2 em{color:var(--wine)}
.sh .lede{grid-column:1/-1;max-width:40em;margin-top:26px;font-size:20px;line-height:1.5}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(34px) rotate(.6deg);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- problems ---------- */
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prob{background:#2A231F;border-radius:20px;padding:20px 20px 26px;transition:transform .35s var(--spring),background .3s}
.prob:hover{transform:translateY(-6px) rotate(-1deg);background:#332a25}
.prob__vis{height:210px;border-radius:14px;margin-bottom:22px;display:grid;place-items:center;position:relative;overflow:hidden}
.prob h3{font:800 25px/1.05 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.prob h3 em{color:var(--mosterd)}
.prob p{font-size:16px;line-height:1.5;color:#D9CCBC}
.vis-pdf{background:var(--delft)} .vis-google{background:var(--roze)} .vis-ssl{background:var(--mosterd)} .vis-insta{background:var(--basil)}

.mini{width:116px;height:170px;background:#fff;border-radius:10px;border:2px solid var(--ink);overflow:hidden;position:relative;color:var(--ink)}
.mini__bar{height:20px;background:var(--ink);color:var(--cream);font:600 9px/20px var(--text);padding:0 7px}
.mini__page{padding:8px 10px;display:grid;gap:4px;transform-origin:30% 30%;animation:pinch 4.5s var(--ease) infinite}
.mini__page i{height:2px;background:var(--ink);opacity:.55;border-radius:2px}
.mini__page i:nth-child(3n){width:60%}.mini__page i:nth-child(4n){width:82%}
@keyframes pinch{0%,15%,100%{transform:scale(1)}35%,55%{transform:scale(2.7) translate(-4%,4%)}75%{transform:scale(2.7) translate(-28%,-12%)}}
.fingers span{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--pepper);opacity:.85;left:50%;top:55%;margin:-9px}
.fingers span:first-child{animation:f1 4.5s var(--ease) infinite}.fingers span:last-child{animation:f2 4.5s var(--ease) infinite}
@keyframes f1{0%,15%,100%{translate:-8px 8px;opacity:0}20%{translate:-8px 8px;opacity:.85}35%,75%{translate:-34px 34px;opacity:.85}85%{opacity:0}}
@keyframes f2{0%,15%,100%{translate:8px -8px;opacity:0}20%{translate:8px -8px;opacity:.85}35%,75%{translate:34px -34px;opacity:.85}85%{opacity:0}}

.gcard{width:168px;background:#fff;border-radius:12px;border:2px solid var(--ink);padding:8px 10px 10px;color:var(--ink);font:400 12px/1.35 var(--text);rotate:-3deg}
.gcard__photo{height:62px;border-radius:7px;background:linear-gradient(135deg,#9a8f84,#6f665e);margin-bottom:7px;position:relative;filter:saturate(.3)}
.gcard__photo span{position:absolute;right:5px;bottom:4px;font:700 10px/1 var(--text);color:#fff;background:rgba(0,0,0,.5);padding:3px 5px;border-radius:4px}
.gcard__name{font-weight:700;font-size:14px}
.gcard__stars b{color:var(--mosterd);letter-spacing:1px}
.gcard__closed b{color:var(--pepper-deep);animation:blink 1.4s steps(2) infinite}

.browser{width:178px;border-radius:12px;border:2px solid var(--ink);background:#fff;overflow:hidden;color:var(--ink);rotate:3deg}
.browser__bar,.before__bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px;background:var(--oat);font:700 11px/1 var(--text);color:var(--pepper-deep)}
.warn{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--pepper);color:#fff;font:800 10px/1 var(--text);animation:shake 2.4s infinite}
@keyframes shake{0%,80%,100%{rotate:0deg}85%{rotate:-18deg}90%{rotate:18deg}95%{rotate:-10deg}}
.browser__body{padding:10px;display:grid;gap:5px}
.browser__body i{height:3px;background:var(--ink);opacity:.4;border-radius:2px}.browser__body i:nth-child(2){width:70%}
.browser__body div{height:44px;border-radius:5px;background:#cfc6bb;margin-top:4px}

.igrid{display:grid;grid-template-columns:repeat(3,44px);gap:5px;margin-bottom:38px}
.igrid i{aspect-ratio:1;border-radius:6px;background:var(--cream);opacity:.28}
.igrid i:nth-child(2){opacity:.18}.igrid i:nth-child(4){opacity:.4}.igrid i:nth-child(6){opacity:.14}
.vis-insta .tag{position:absolute;bottom:22px;rotate:-4deg}

/* ---------- journey ---------- */
.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:99px;padding:4px;margin-bottom:56px;background:var(--cream)}
.switch__opt{position:relative;z-index:1;min-height:48px;padding:0 26px;border:0;background:none;border-radius:99px;font:700 16px/1 var(--text);color:var(--ink);cursor:pointer;transition:color .3s}
.switch__opt.is-on{color:var(--cream)}
.switch__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--pepper);transition:transform .45s var(--spring),background .3s}
.switch[data-mode=after] .switch__thumb{transform:translateX(100%);background:var(--basil)}
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;counter-reset:s}
.journey::before{content:"";position:absolute;left:0;right:0;top:36px;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,#0000 10px 20px)}
.step{position:relative}
.step__ic{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);margin-bottom:22px;position:relative;z-index:1;transition:background .4s,color .4s,transform .5s var(--spring)}
.step:hover .step__ic{transform:scale(1.1) rotate(-8deg)}
.journey[data-mode=today] .step__ic{background:var(--pepper);color:var(--cream)}
.journey[data-mode=after] .step__ic{background:var(--basil);color:var(--cream)}
.step h3{font:800 23px/1.08 var(--display);letter-spacing:-.03em;margin-bottom:10px;min-height:2.16em}
.step__out{font-size:16px;line-height:1.45;padding:14px 16px;border-radius:16px;background:var(--oat);min-height:6.6em}
.t-today,.t-after{display:block;transition:opacity .35s,transform .45s var(--ease)}
[data-mode=today] .t-after,[data-mode=after] .t-today{display:none}
.journey.flip .t-today,.journey.flip .t-after{opacity:0;transform:translateY(8px)}
.step--end .step__verdict{font-size:30px;line-height:1.02}
.journey[data-mode=today] .step__verdict{color:var(--pepper-deep)}
.journey[data-mode=after] .step__verdict{color:var(--basil)}

/* ---------- fix ---------- */
.fix{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.fix .sh{margin-bottom:44px}
.easy{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.easy li{display:flex;gap:14px;align-items:flex-start}
.easy .ic{width:48px;height:48px;padding:9px;border-radius:50%;background:var(--ink);color:var(--mosterd)}
.easy h3{font:800 24px/1.1 var(--display);letter-spacing:-.03em;margin-bottom:6px}
.easy p{font-size:16px;line-height:1.5}
.ba{position:relative;justify-self:center;padding:36px 60px}
.ba__phone{width:300px}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__line{position:absolute;top:0;bottom:0;left:calc(11px + (100% - 22px)*var(--p,.5));width:4px;margin-left:-2px;background:var(--pepper);z-index:6}
.ba__line span{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--pepper);border:3px solid var(--cream);
  background-image:linear-gradient(var(--cream),var(--cream)),linear-gradient(var(--cream),var(--cream));background-size:3px 14px;background-repeat:no-repeat;background-position:15px 50%,25px 50%}
.ba__range{position:absolute;inset:36px 60px;width:auto;margin:0;opacity:0;cursor:ew-resize;z-index:8}
.ba__tag{position:absolute;width:120px;z-index:7;transition:transform .4s var(--spring)}
.ba__tag--before{left:-4px;top:70px;rotate:-10deg}
.ba__tag--after{right:-8px;bottom:86px;rotate:8deg}
.ba:hover .ba__tag--before{transform:translateX(-6px) rotate(-4deg)} .ba:hover .ba__tag--after{transform:translateX(6px) rotate(4deg)}
.before{background:#fff;display:flex;flex-direction:column}
.before__bar{padding-top:34px;height:62px;flex:none}
.before__site{padding:8px 9px;display:grid;gap:7px;align-content:start}
.before__nav{display:flex;gap:5px;padding-bottom:5px;border-bottom:1px solid #bbb}
.before__nav i{width:22px;height:3px;background:#3b55c9;border-radius:2px}
.before__hero{height:64px;background:linear-gradient(120deg,#a79d92,#7b7168);filter:saturate(.4)}
.before__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.before__cols div{display:grid;gap:3px}
.before__cols i{height:2px;background:#444;opacity:.55}
.before__cols i:nth-child(3n){width:70%}
.before__pdf{justify-self:start;font:400 8px/1 var(--text);color:#3b55c9;text-decoration:underline}

/* ---------- services ---------- */
.reset{display:grid;grid-template-columns:.9fr 1.1fr;border:2px solid var(--ink);border-radius:28px;overflow:hidden;background:var(--oat)}
.reset__head{background:var(--pepper);color:var(--cream);padding:44px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;--ground:var(--pepper)}
.reset__head h3{font-size:clamp(40px,4.6vw,64px)}
.reset__sub{font:600 19px/1.4 var(--text);max-width:22em}
.price{display:flex;flex-direction:column;margin:8px 0 10px}
.price b{font:800 clamp(72px,8vw,112px)/.9 var(--display);letter-spacing:-.05em}
.price span{font:600 18px/1.4 var(--text);margin-top:6px}
.price--sm b{font-size:64px}.price--sm span{font-size:15px}
.terms{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.terms li{padding:7px 13px;border-radius:99px;background:var(--ink);color:var(--cream);font:600 14px/1.3 var(--text)}
.reset__parts{display:grid;grid-template-columns:1fr 1fr}
.reset__parts li{padding:34px 32px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transition:background .3s}
.reset__parts li:nth-child(n+3){border-bottom:0}
.reset__parts li:hover{background:var(--cream)}
.reset__parts .ic{width:44px;height:44px;color:var(--pepper);margin-bottom:16px;transition:transform .4s var(--spring)}
.reset__parts li:hover .ic{transform:scale(1.18) rotate(-8deg)}
.reset__parts h4{font:800 24px/1.1 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.reset__parts p{font-size:16px;line-height:1.5}
.subh{font:800 clamp(30px,3.6vw,48px)/1 var(--display);letter-spacing:-.035em;margin:88px 0 32px}
.subh em{color:var(--pepper)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;border:2px solid var(--ink);border-radius:24px;padding:32px 30px;background:var(--cream);transition:transform .35s var(--spring)}
.plan:hover{transform:translateY(-6px) rotate(-.6deg)}
.plan h4{font-size:40px;margin:10px 0 6px}
.plan--hot{background:var(--ink);color:var(--cream)}
.plan--hot .price b{color:var(--mosterd)}
.plan__burst{position:absolute;width:132px;right:-14px;top:-22px;rotate:9deg}
.plan--terms{background:var(--oat)}
.plan--terms h4{font-size:26px;line-height:1.05;margin:0 0 14px}
.plan--terms .addh{margin-top:30px}
.ticks,.plain{display:grid;gap:10px;margin-top:20px;font-size:16px;line-height:1.45}
.plain{margin-top:0}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--pepper)}
.ticks li::after{content:"";position:absolute;left:5px;top:7px;width:8px;height:5px;border-left:2.5px solid var(--cream);border-bottom:2.5px solid var(--cream);rotate:-45deg}
.plain li{padding-left:18px;position:relative}
.plain li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.addons{display:grid;font-size:16px}
.addons div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:2px solid var(--ink)}
.addons dd{font-weight:700;white-space:nowrap}

/* ---------- look ---------- */
.sec--look{padding-bottom:110px;overflow:hidden}
.reel{overflow:hidden;padding:22px 0}
.reel__track{display:flex;gap:22px;width:max-content;animation:slide 48s linear infinite;padding-left:22px}
.reel:hover .reel__track{animation-play-state:paused}
.shot{height:440px;border-radius:22px;overflow:hidden;flex:none;aspect-ratio:4/5;border:2px solid var(--ink);transition:rotate .45s var(--spring),scale .45s var(--spring)}
.shot--wide{aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.shot--a{rotate:-2.2deg}.shot--b{rotate:1.6deg}.shot--c{rotate:-1.4deg}.shot--d{rotate:2.4deg}
.shot:hover{rotate:0deg;scale:1.03}.shot:hover img{scale:1.06}

/* ---------- who ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#2A231F;border-radius:20px;padding:28px 26px}
.stat b{display:flex;align-items:center;gap:10px;font:800 clamp(52px,5.4vw,80px)/.9 var(--display);letter-spacing:-.05em;color:var(--mosterd);white-space:nowrap}
.stat p{margin-top:14px;font-size:16px;line-height:1.45;color:#D9CCBC}
.stat--wide,.stat--two{grid-column:span 2}.stat--wide{background:var(--pepper)}
.stat--wide b{color:var(--cream)} .stat--wide p{color:var(--cream);font-weight:600;font-size:18px}
.arrow{width:54px;height:22px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bar{height:12px;border-radius:99px;background:rgba(28,23,20,.3);margin-top:18px;overflow:hidden}
.bar i{display:block;height:100%;width:55.5%;border-radius:99px;background:var(--cream);transition:width 1.8s var(--ease) .3s}
.in .bar i{width:100%}
.people{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.people article{border:2px solid #4a4039;border-radius:20px;padding:30px 28px}
.people h3{font-size:36px;margin-bottom:8px}
.people .cap{color:var(--mosterd);margin-bottom:14px}
.people p:last-child{color:#D9CCBC}

/* ---------- how ---------- */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how li{background:var(--cream);border:2px solid var(--ink);border-radius:24px;padding:30px 28px 34px;transition:transform .35s var(--spring)}
.how li:hover{transform:translateY(-6px) rotate(.8deg)}
.how__n{display:block;font-size:84px;line-height:.9;color:var(--pepper);margin-bottom:14px}
.how h3{font:800 28px/1.05 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.how__burst{position:absolute;width:150px;right:5%;top:64px;rotate:12deg;animation:bob 6s ease-in-out infinite}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.faq .sh{position:sticky;top:calc(var(--nav) + 32px);margin:0}
.faq__list{border-top:2px solid var(--ink)}
details{border-bottom:2px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:800 clamp(21px,2vw,26px)/1.15 var(--display);letter-spacing:-.025em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink) linear-gradient(var(--cream),var(--cream)) center/14px 2.5px no-repeat;background-image:linear-gradient(var(--cream),var(--cream)),linear-gradient(var(--cream),var(--cream));background-size:14px 2.5px,2.5px 14px;background-position:center;background-repeat:no-repeat;transition:rotate .35s var(--spring),background-color .2s}
details[open] summary::after{rotate:45deg;background-color:var(--pepper)}
summary:hover{color:var(--pepper-deep)}
details p{padding:0 54px 26px 0;max-width:38em;animation:drop .4s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}

/* ---------- close ---------- */
.close{background:var(--pepper);color:var(--cream)}
.close__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.close h2{font-size:clamp(52px,7.4vw,116px);line-height:.88;letter-spacing:-.045em}
.close h2 em{color:var(--ink)}
.close__copy p{font:600 20px/1.5 var(--text);max-width:26em;margin-top:26px}
.close__stamp{width:150px;margin-top:36px;animation:spin 26s linear infinite}
.form{background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:28px;padding:34px 32px;display:grid;gap:16px;box-shadow:12px 14px 0 var(--ink);--ground:var(--cream)}
.field label{display:block;font:700 14px/1.3 var(--text);margin-bottom:6px}
.field input{width:100%;height:52px;border-radius:14px;border:2px solid var(--ink);background:#fff;padding:0 16px;font:400 17px/1 var(--text);color:var(--ink);transition:box-shadow .2s,translate .2s}
.field input:focus{outline:none;box-shadow:4px 4px 0 var(--pepper);translate:-2px -2px}
.field input[aria-invalid=true]{border-color:var(--pepper-deep);background:#fdeceb}
.field__err{font:600 14px/1.3 var(--text);color:var(--pepper-deep);margin-top:5px}
.field__err:empty{display:none}
.form .btn{width:100%;margin-top:6px}
.form__note{font:400 15px/1.45 var(--text);color:var(--ash);text-align:center}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:64px 0 44px}
.foot__in{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:start}
.brand--foot svg{width:34px;height:44px}.brand--foot b{font-size:34px}
.foot__tag{font-size:26px;color:var(--mosterd);margin-top:12px}
.foot__nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.foot__nav a{font:600 16px/2.6 var(--text);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 78%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.foot__nav a:hover{background-size:100% 2px}
.foot__legal{grid-column:1/-1;font-size:14px;line-height:1.6;color:#BDAE9F;border-top:2px solid #3a312c;padding-top:22px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .probs{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr;gap:26px;padding-left:0}
  .journey::before{left:37px;right:auto;top:0;bottom:0;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--ink) 0 10px,#0000 10px 20px)}
  .step{display:grid;grid-template-columns:76px 1fr;column-gap:20px;align-items:start}
  .step__ic{grid-row:span 2;margin:0}
  .step h3{align-self:end;margin-top:6px;min-height:0}
  .step__out{min-height:0}
  .step--end .step__verdict{align-self:center;grid-row:span 2}
  .plans{grid-template-columns:1fr 1fr}.plan--terms{grid-column:1/-1}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav__links{position:fixed;inset:var(--nav) 0 0 0;background:var(--cream);flex-direction:column;gap:0;padding:20px var(--gut);margin:0;transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden}
  .nav__links.is-open{transform:none;visibility:visible}
  .nav__links a{font:800 40px/1.25 var(--display);letter-spacing:-.035em;padding:10px 0;border-bottom:2px solid var(--ink);border-radius:0}
  .nav__links a:hover{background:none;color:var(--pepper)}
  .nav__cta{margin-left:auto}
  .nav__toggle{display:block;flex:none}
  .hero__in{grid-template-columns:1fr;padding-top:36px;gap:8px}
  .hero__stage{height:600px}
  .fix,.close__in,.faq{grid-template-columns:1fr}
  .faq .sh{position:static;margin-bottom:36px}
  .reset{grid-template-columns:1fr}
  .reset__parts li{border-left:0}
  .reset__parts li:nth-child(odd){border-right:2px solid var(--ink)}
  .reset__parts{border-top:2px solid var(--ink)}
  .how{grid-template-columns:1fr}
  .how__burst{width:110px;top:20px;right:4%}
}
@media (max-width:640px){
  :root{--gut:18px;--nav:60px}
  body{font-size:16px}
  .sec{padding:84px 0}
  .sh{margin-bottom:40px;grid-template-columns:1fr}
  .sh .num{margin-bottom:10px}
  .sh .lede{font-size:18px;margin-top:18px}
  .nav__cta{display:none}
  .nav__toggle{margin-left:auto}
  .brand b{font-size:21px}
  .hero__h1{font-size:clamp(56px,18.5vw,96px)}
  .btn-row .btn{width:100%}
  .hero__stage{height:540px;min-height:0}
  .hero__phone{scale:.86}
  .float--pizza{width:104px}.float--donut{width:84px;left:-2%}.float--koffie{width:78px}
  .stamp{width:112px;left:-2%;bottom:2%}.note{width:120px;left:-2%;top:52%}
  .marquee{height:60px}.marquee span{font-size:26px}.marquee span.s{font-size:27px}
  .probs,.plans,.stats,.people,.easy,.reset__parts{grid-template-columns:1fr}
  .stat--wide,.stat--two,.plan--terms{grid-column:auto}
  .reset__head{padding:32px 24px}
  .reset__parts li{padding:26px 24px;border-right:0!important;border-bottom:2px solid var(--ink)!important}
  .reset__parts li:last-child{border-bottom:0!important}
  .subh{margin:64px 0 24px}
  .ba{padding:30px 28px;scale:.94}
  .ba__range{inset:30px 28px}
  .ba__tag{width:96px}.ba__tag--before{left:-14px}.ba__tag--after{right:-14px}
  .shot{height:320px}
  .switch{display:grid;width:100%}
  .switch__opt{padding:0 10px}
  .form{padding:26px 20px;box-shadow:7px 8px 0 var(--ink)}
  details p{padding-right:0}
  .foot__in{grid-template-columns:1fr}.foot__nav{justify-content:flex-start}
  .stat b{font-size:56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  .bar i{width:100%}
}