/* ————————————————————————————————
   MITIPOT — Cooking Companion
   art-directed pass · mobile first
   ———————————————————————————————— */

@font-face{font-family:'Hurme';src:url('../fonts/hurme-100.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hurme';src:url('../fonts/hurme-900.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --clay:#FAF8F2;
  --beige:#EBEBE6;
  --terra:#EB5537;
  --char:#282828;
  --soil:#1E1813;
  --spiced:#FCE29A;
  --c-tikka:#E3531F; --c-saag:#00693D; --c-house:#A62142; --c-yellow:#AD7C11; --c-black:#78442A;
  --ease:cubic-bezier(.23,1,.32,1);
  --w:min(92vw,1100px);
  --pad:clamp(1rem,4vw,3rem);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{
  font-family:'Hurme',system-ui,sans-serif;
  background:var(--clay);color:var(--char);
  line-height:1.45;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,textarea{font:inherit;color:inherit}
.micro{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.shell-w{width:var(--w);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

/* ————— type actions (no pills except the brand button) ————— */
.btn-order{
  display:inline-block;background:var(--terra);color:var(--clay);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;
  padding:1.1em 2.6em;border-radius:999px;text-align:center;
  transition:transform .4s var(--ease),background .3s;
}
.btn-order:hover{background:#d64426;transform:translateY(-2px)}
.tlink{
  display:inline-block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;
  padding:.4em 0;transition:color .3s;
}
.tlink:hover{color:var(--terra)}
.tlink-light{color:var(--clay)}
.tlink-light:hover{color:var(--spiced)}
.tlink-spiced{color:var(--spiced)}
.tlink-spiced:hover{color:#fff}
.tquiet{
  display:inline-block;font-weight:400;font-size:.85rem;opacity:.55;
  padding:.4em 0;transition:opacity .3s,color .3s;
}
.tquiet:hover{opacity:.9}
.tq-light{color:var(--clay)}

/* ————— nav ————— */
.cnav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--pad);transition:color .5s;
}
.cnav-logo{width:40px;height:auto}
.cnav-logo-light{display:none}
.cnav-links{display:flex;gap:clamp(1rem,3vw,2rem);align-items:center}
.cnav-links a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8;transition:opacity .3s,color .3s}
.cnav-links a:hover{opacity:1}
.cnav-links a.active{color:var(--terra);opacity:1}
.cnav-site{opacity:.45!important;font-weight:400!important}
body.on-dark .cnav{color:var(--clay)}
body.on-dark .cnav-logo-dark{display:none}
body.on-dark .cnav-logo-light{display:block}
body.on-dark .cnav-links a.active{color:var(--spiced)}
body.cookmode .cnav-links{display:none}
.cnav-cook{display:flex;align-items:center;gap:1.1rem}
.cnav-meal{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.cnav-exit{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(40,40,40,.3);
  display:grid;place-items:center;font-size:.9rem;text-align:center;transition:border-color .3s;
}
.cnav-exit:hover{border-color:currentColor}
body.on-dark .cnav-exit{border-color:rgba(250,248,242,.35)}

/* ————— screens ————— */
.scr{display:none;min-height:100svh}
.scr.active{display:block}
html:not(.rm) .scr.active{animation:scrfade .7s var(--ease)}
@keyframes scrfade{from{opacity:0}}

/* staged reveals */
[data-in]{opacity:0;transform:translateY(26px)}
.scr.active [data-in]{animation:din 1s var(--ease) forwards}
.scr.active [data-in]:nth-of-type(2){animation-delay:.1s}
.scr.active [data-in]:nth-of-type(3){animation-delay:.2s}
.scr.active [data-in]:nth-of-type(4){animation-delay:.3s}
@keyframes din{to{opacity:1;transform:none}}
html.rm [data-in]{opacity:1;transform:none;animation:none}

/* ═════════ HOME — one cinematic screen ═════════ */
.scr-home{position:relative;overflow:clip;background:var(--soil);color:var(--clay)}
.home-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-veil{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(20,15,10,.42),rgba(20,15,10,.12) 34%,rgba(15,10,6,.38) 62%,rgba(15,10,6,.86))}
.home-in{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(2.4rem + 5svh) var(--pad) clamp(2rem,6svh,4rem);
}
.home-micro{color:var(--spiced);opacity:1}
.home-h{
  margin-top:.7rem;font-weight:300;letter-spacing:-.015em;line-height:1.18;
  font-size:clamp(1.7rem,5vw,3rem);max-width:16ch;
  opacity:0;transform:translateY(16px);animation:homein 1s var(--ease) .1s forwards;
}
@keyframes homein{to{opacity:1;transform:none}}
html.rm .home-h{opacity:1;transform:none;animation:none}
.home-resume{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap;color:var(--spiced);font-size:.95rem}
.home-resume .tquiet{color:var(--clay)}
.home-index{display:grid;gap:.55em}
.hix{display:flex;align-items:baseline;gap:clamp(.8rem,2.4vw,1.6rem);width:max-content;max-width:100%;transition:color .35s}
.hix-n{font-weight:300;font-size:clamp(.9rem,1.3vw,1.2rem);color:rgba(250,248,242,.5)}
.hix em{
  font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.06;
  font-size:clamp(1.7rem,5.4vw,2.6rem);
}
.hix-cook{color:var(--terra)}
.hix-cook:hover{color:#ff6a4d}
.hix-sub{color:var(--clay)}
.hix-sub em{font-weight:600}
.hix-sub:hover{color:var(--spiced)}

/* ═════════ COOK ENTRY — the fork ═════════ */
.scr-fork{background:var(--clay)}
.scr-fork.active{display:flex;flex-direction:column}
.fork-h{
  padding:calc(4.6rem + 2svh) var(--pad) clamp(1.4rem,4svh,2.6rem);
  font-weight:300;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(2rem,7.4vw,4.4rem);
}
.fork-h b{font-weight:700}
.fork{flex:1;display:grid;grid-template-rows:1fr 1fr;min-height:0}
.fork-half{
  position:relative;overflow:clip;display:flex;align-items:center;
  padding:0 var(--pad);min-height:max(240px,30svh);
}
.fork-base{background:var(--beige);color:var(--char)}
.fork-protein{background:var(--char);color:var(--clay)}
.fork-half img{
  position:absolute;right:calc(-1 * clamp(.5rem,3vw,2rem));bottom:-6%;
  height:112%;width:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.3));
  transition:transform 1.2s var(--ease);
}
.fork-half:hover img{transform:translateY(-2%) rotate(-1.2deg) scale(1.02)}
.fork-name{
  position:relative;z-index:2;font-weight:300;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(1.9rem,7vw,3.6rem);
}
.fork-name b{font-weight:700}
.fork-arrow{
  position:absolute;z-index:2;right:var(--pad);top:1.2rem;
  font-size:1.5rem;font-weight:300;opacity:.6;transition:transform .5s var(--ease),opacity .3s;
}
.fork-half:hover .fork-arrow{transform:translateX(6px);opacity:1}
.fork-alt{padding:1.3rem 0 1.6rem;font-size:.92rem;opacity:.8}
.fork-alt .tlink{font-size:.76rem}
.fork-alt-sub{opacity:.65}

/* ═════════ THEATRE (base + protein) ═════════ */
.scr-th{background:var(--soil)}
.th{
  --thbg:var(--c-tikka);--thfg:var(--clay);
  position:relative;min-height:100svh;background:var(--thbg);color:var(--thfg);
  transition:background 1s var(--ease);
  display:grid;grid-template-rows:auto 1fr auto;overflow:clip;
  padding:clamp(4.6rem,8svh,6.5rem) 0 clamp(1.6rem,4svh,3rem);
}
.th-micro{position:absolute;top:clamp(4.2rem,7svh,5.6rem);left:var(--pad);color:var(--thfg)}
.th-word{
  position:absolute;left:var(--pad);top:clamp(7.2rem,12.5svh,9rem);
  font-weight:700;white-space:nowrap;letter-spacing:-.01em;
  font-size:clamp(1.6rem,4.6vw,2.6rem);opacity:1;user-select:none;
  transition:opacity .4s;pointer-events:none;
}
.th-word.swap{opacity:0}
.th-row{
  grid-row:2;display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2.8rem);
  position:relative;z-index:2;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:7vh 26vw 2vh;
}
.th-row::-webkit-scrollbar{display:none}
.th-item{flex:0 0 auto;scroll-snap-align:center;transition:transform .8s var(--ease),opacity .6s;opacity:.55;transform:scale(.84) translateY(1.2vh)}
.th-item img{height:clamp(230px,34svh,380px);width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.th-item:hover{opacity:.8}
.th-item.is-active{opacity:1;transform:scale(1.06) translateY(-.6vh);z-index:3}
.th-byoart{
  height:clamp(230px,34svh,380px);display:grid;place-items:end center;
}
.th-byoart img{height:72%!important;align-self:end}
.th-rail{
  grid-row:3;padding:0 var(--pad);display:grid;gap:.25rem;justify-items:start;z-index:4;
}
.th-name{font-weight:700;font-size:clamp(1.5rem,5.6vw,2.2rem);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.th-desc{font-weight:400;font-size:clamp(.92rem,1.4vw,1.05rem);opacity:.85;min-height:1.4em}
.th-pair{margin-top:.35rem;font-weight:400;font-size:.86rem;opacity:.7;max-width:38ch;min-height:1.3em}
.th-flag{
  margin-top:.5rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:.9rem;
}
.th-flag::before{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.6}
.th-choose{margin-top:.9rem;font-size:.84rem}
.th-count{
  position:absolute;right:var(--pad);bottom:clamp(1.7rem,4svh,3rem);
  font-weight:300;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.1em;z-index:4;
}
.th-count span{font-weight:700}
.th-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:.55rem;
  font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.45;
}
.byo-kinds{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin-top:.7rem}
.byo-kinds button{
  font-weight:600;font-size:.95rem;opacity:.65;padding:.3em 0;
  border-bottom:2px solid transparent;transition:opacity .3s,border-color .3s;
}
.byo-kinds button:hover{opacity:1}
.byo-kinds button[aria-pressed="true"]{opacity:1;border-color:currentColor}

/* ═════════ CONFIRM — mise en place ═════════ */
.scr-confirm{padding:clamp(5rem,9svh,7rem) 0 clamp(3rem,7svh,5rem)}
.scr-confirm.active{display:flex;flex-direction:column;justify-content:center}
.confirm-h{margin-top:.9rem;font-weight:300;letter-spacing:-.02em;line-height:1;font-size:clamp(1.6rem,4.6vw,2.6rem)}
.confirm-name{
  margin-top:.15em;font-weight:700;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(2.5rem,9.4vw,5.4rem);color:var(--terra);max-width:14ch;
}
.mise{
  display:flex;align-items:flex-end;justify-content:center;
  margin:clamp(1.6rem,4svh,3rem) auto;width:var(--w);
  min-height:clamp(160px,24svh,260px);
}
.mise img{width:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.28))}
.mise .m-base{height:clamp(150px,23svh,240px);z-index:2}
.mise .m-prot{height:clamp(120px,18svh,190px);margin-left:-4%;z-index:1;transform:translateY(-4%) rotate(2deg)}
.mise .m-tadka{height:clamp(86px,13svh,130px);margin-left:clamp(.8rem,3vw,2rem);z-index:3}
.mise .m-bloom{height:clamp(64px,10svh,100px);margin-left:clamp(.5rem,2vw,1.2rem);transform:translateY(-14%)}
html:not(.rm) .scr-confirm.active .mise img{animation:misein 1.1s var(--ease) backwards}
.scr-confirm.active .mise img:nth-child(2){animation-delay:.12s}
.scr-confirm.active .mise img:nth-child(3){animation-delay:.24s}
.scr-confirm.active .mise img:nth-child(4){animation-delay:.34s}
@keyframes misein{from{opacity:0;transform:translateY(-18px)}}
.confirm-line{font-weight:300;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:.01em}
.confirm-nut{margin-top:.3rem;font-weight:400;font-size:.85rem;letter-spacing:.01em;opacity:.55}
.confirm-note{margin-top:.7rem;font-weight:600;font-size:.95rem;color:var(--terra);max-width:44ch}
.confirm-acts{margin-top:clamp(1.4rem,3.5svh,2.2rem);display:flex;align-items:center;gap:2rem;flex-wrap:wrap}

/* ═════════ GUIDED STEP ═════════ */
.scr-step{background:var(--clay);padding-bottom:clamp(3rem,7svh,5rem)}
.step-progress{
  position:relative;height:1px;background:rgba(40,40,40,.16);
  margin-top:calc(3.9rem + 1svh);
}
.step-progress i{
  position:absolute;left:0;top:-1px;height:3px;background:var(--terra);
  width:0;transition:width .9s var(--ease);
}
.step-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.1rem 0 .9rem;flex-wrap:wrap;
}
.step-label{
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  display:flex;align-items:center;gap:.8rem;
}
.step-label::before{content:"";width:1.6rem;height:2px;background:var(--bc,var(--terra))}
.smedia{
  position:relative;overflow:clip;
  background:radial-gradient(130% 130% at 50% 12%,#33291f 0%,var(--soil) 72%);
  height:clamp(200px,34svh,340px);
}
.smedia-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smedia-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,6vw,4rem)}
.smedia-art img{height:min(58%,210px);width:auto;filter:invert(1) opacity(.92)}
.smedia-cap{
  position:absolute;left:var(--pad);bottom:.85rem;
  font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--spiced);opacity:.85;
}
.smedia.has-video .smedia-art{display:none}
.smedia-sm{height:clamp(150px,20svh,200px)}
.smedia-sm .smedia-art img{height:min(52%,110px)}
.smedia-sm .smedia-cap{left:1rem}
.step-body{padding-top:clamp(1.6rem,4svh,2.6rem);max-width:min(92vw,760px);margin-inline:auto}
.step-main{
  font-weight:300;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(2rem,8vw,3.6rem);max-width:18ch;
}
.step-sub{
  margin-top:.9rem;font-weight:400;font-size:clamp(1.02rem,2.2vw,1.3rem);
  line-height:1.5;opacity:.82;max-width:38ch;
}
.step-practical{
  margin-top:1.1rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;opacity:.85;
}
.step-practical::before{content:"";width:1.6rem;height:1px;background:var(--char);opacity:.5}
.step-tip{margin-top:1rem;font-size:.92rem;opacity:.62;max-width:48ch}
.step-acts{margin-top:clamp(1.8rem,4svh,2.6rem);display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}
.step-acts .btn-order{flex:0 0 auto}

/* amounts — word scale, no chips */
.amounts{margin-top:1.5rem;display:grid;gap:1.1rem}
.amt-row{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap}
.amt-name{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.6;min-width:9ch}
.amt-opts{display:flex;gap:1.5rem}
.aw{
  font-weight:600;font-size:.98rem;opacity:.45;padding:.2em 0;
  border-bottom:2px solid transparent;transition:opacity .3s,border-color .3s,color .3s;
}
.aw:hover{opacity:.8}
.aw[aria-pressed="true"]{opacity:1;color:var(--terra);border-color:var(--terra)}

/* timer — quiet utility, plain readable number, no ring */
.stimer{margin-top:clamp(1.6rem,4svh,2.4rem);display:grid;gap:.5rem;justify-items:start}
.stimer-row{display:flex;align-items:baseline;gap:1.6rem}
.stimer-time{
  font-weight:100;font-size:clamp(2rem,7vw,2.8rem);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--terra);
}

/* ═════════ LID MOMENT ═════════ */
.scr-lid{
  background:var(--soil);color:var(--beige);
  position:relative;overflow:clip;text-align:center;
  padding:clamp(4.8rem,9svh,7rem) var(--pad) 0;
}
.scr-lid.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.lid-in{position:relative;z-index:3;display:grid;justify-items:center;gap:clamp(1.1rem,2.6svh,1.7rem);padding-bottom:clamp(9rem,22svh,15rem)}
.lid-micro{color:var(--spiced);opacity:1}
.lid-time{
  font-weight:100;font-size:clamp(3rem,11vw,4.6rem);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--clay);
}
.lid-line{font-weight:300;letter-spacing:-.012em;font-size:clamp(1.7rem,6vw,2.8rem);color:var(--clay)}
.lid-tip{font-size:.92rem;opacity:.6;max-width:38ch;min-height:2.8em;transition:opacity .8s}
.lid-tip.fade{opacity:0}
.lid-acts{display:flex;gap:2rem;align-items:baseline;flex-wrap:wrap;justify-content:center}
.lid-pot{
  position:absolute;left:50%;bottom:-9%;transform:translateX(-50%);z-index:1;
  width:min(78vw,560px);height:auto;
  filter:brightness(.22) contrast(.9);opacity:.85;pointer-events:none;
}

/* ═════════ DONE ═════════ */
.done-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:clip;color:var(--clay)}
.done-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.done-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,15,10,.28),rgba(20,15,10,.12) 40%,rgba(15,10,6,.82))}
.done-in{position:relative;z-index:2;padding:0 0 clamp(2.4rem,6svh,4rem)}
.done-micro{color:var(--spiced);opacity:1}
.done-h{
  margin-top:.5rem;font-weight:300;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(3.2rem,13vw,7.5rem);
}
.done-sum{margin-top:1.1rem;font-weight:600;font-size:clamp(1.15rem,2.6vw,1.6rem);max-width:30ch}
.done-line{margin-top:.4rem;font-weight:300;font-size:clamp(.95rem,1.8vw,1.15rem);opacity:.85}
.done-after{padding:clamp(2.4rem,6svh,4rem) 0 clamp(3.5rem,8svh,6rem)}
.done-serve{font-size:.98rem;opacity:.75;max-width:46ch}
.notes-label{display:block;margin-top:2rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.notes-label span{font-weight:400;letter-spacing:.05em;text-transform:none;opacity:.55;margin-left:.8em}
.notes{
  width:100%;max-width:56ch;margin-top:.5rem;padding:.7rem 0;resize:vertical;
  border:0;border-bottom:1px solid rgba(40,40,40,.35);background:transparent;
}
.notes:focus{outline:none;border-bottom-color:var(--terra)}
.done-index{margin-top:2.2rem;border-top:1px solid rgba(40,40,40,.25);max-width:56ch}
.dix{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1rem .1rem;border-bottom:1px solid rgba(40,40,40,.18);
  font-weight:600;font-size:1rem;transition:color .3s;
}
.dix:hover{color:var(--terra)}
.dix span:last-child{font-weight:300}

/* ═════════ COMPOSER ═════════ */
.scr-cz{padding:clamp(5rem,9svh,7rem) 0 clamp(3.5rem,8svh,6rem)}
.cz-h{margin-top:1rem;font-weight:300;letter-spacing:-.02em;line-height:1.04;font-size:clamp(2rem,7vw,4rem)}
.cz-h b{font-weight:700}
.cz{margin-top:clamp(1.8rem,4svh,2.6rem);display:grid;gap:0;max-width:760px}
.cz-row{border-top:1px solid rgba(40,40,40,.2);padding:1.3rem 0 1.6rem;display:grid;gap:.9rem}
.cz-label{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.cz-opts{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.cz-opt{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:600;font-size:clamp(1rem,2vw,1.15rem);opacity:.5;
  padding:.25em 0;border-bottom:2px solid transparent;
  transition:opacity .3s,border-color .3s;
}
.cz-opt .cz-dot{width:.72em;height:.72em;border-radius:50%;background:var(--bc,var(--char));flex:0 0 auto}
.cz-opt:hover{opacity:.85}
.cz-opt[aria-pressed="true"]{opacity:1;border-color:var(--bc,var(--char))}
.cz-finish{display:grid;gap:1rem}
.cz-sum{border-top:1px solid rgba(40,40,40,.2);padding-top:1.5rem;display:grid;gap:1.2rem;justify-items:start}
.cz-lines{font-weight:600;font-size:clamp(1.05rem,2vw,1.25rem);display:grid;gap:.15rem}
.cz-lines .plus{color:var(--terra);margin-right:.45em;font-weight:300}
.cz-nut{display:flex;gap:clamp(1.6rem,5vw,3rem);flex-wrap:wrap;align-items:baseline}
.cz-nut .n b{font-weight:100;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1}
.cz-nut .n b small{font-size:.45em;font-weight:400}
.cz-nut .n span{display:block;margin-top:.2rem;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.cz-macros{font-size:.85rem;opacity:.65;flex-basis:100%}
.cz-note{font-size:.88rem;opacity:.7;max-width:52ch}

/* ═════════ POT CARE ═════════ */
.scr-care{padding:clamp(5rem,9svh,7rem) 0 clamp(3.5rem,8svh,6rem)}

.care-h{
  margin-top:1rem;font-weight:300;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.9rem,5.2vw,3.2rem);max-width:19ch;
}
.care-lede{margin-top:1.1rem;max-width:56ch;font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;opacity:.7}

.care-photo{margin:clamp(2.4rem,6svh,3.6rem) 0 0;height:clamp(260px,52svh,560px);overflow:clip}
.care-photo img{width:100%;height:100%;object-fit:cover}

.care-why{margin-top:clamp(2.4rem,6svh,3.6rem);display:grid;gap:.9rem}
.care-why p{max-width:58ch;font-size:clamp(.98rem,1.6vw,1.12rem);line-height:1.65}
.care-kick b{font-weight:700;color:var(--terra)}

.care-rules{
  margin-top:clamp(3rem,7svh,4.5rem);border-top:1px solid rgba(40,40,40,.22);
  padding-top:clamp(1.6rem,4svh,2.4rem);
}
.care-rules-h{font-weight:300;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.01em}
.care-cols{display:grid;grid-template-columns:1fr;gap:2.4rem;margin-top:clamp(1.8rem,4.5svh,2.4rem)}
.care-col-h{
  display:block;font-weight:700;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:.7rem;
}
.care-col-do .care-col-h{opacity:.55}
.care-col-dont .care-col-h{color:var(--terra)}

.care-list{list-style:none}
.care-item-plain,.care-item{
  width:100%;display:flex;align-items:flex-start;gap:.85rem;text-align:left;
  padding:.85rem .1rem;border-bottom:1px solid rgba(40,40,40,.15);
  font-weight:600;font-size:.95rem;line-height:1.4;
}
.care-item{transition:color .3s}
.care-item:hover,.care-item.open{color:var(--terra)}
.care-t{flex:1}
.care-item .qi-x{flex:0 0 auto;margin-top:.4em}
.care-mark{
  flex:0 0 auto;margin-top:.5em;width:.4em;height:.4em;border-radius:50%;
  background:var(--terra);opacity:.5;
}
.care-mark-x{
  width:auto;height:auto;border-radius:0;background:none;opacity:1;
  color:var(--terra);font-weight:700;margin-top:0;line-height:1.4;
}
.care-item-a{padding:0 .1rem 1.1rem 1.85rem;margin-top:-.5rem;border-bottom:1px solid rgba(40,40,40,.15)}
.care-item-a p{font-size:.9rem;line-height:1.55;opacity:.7;max-width:50ch}
html:not(.rm) .care-item-a{animation:ain .4s var(--ease)}

@media (min-width:768px){
  .care-cols{grid-template-columns:1fr 1fr;gap:4.5rem}
}

/* ═════════ QUESTIONS ═════════ */
.scr-q{padding:clamp(5rem,9svh,7rem) 0 clamp(3.5rem,8svh,6rem)}
.q-h{margin-top:1rem;font-weight:300;letter-spacing:-.02em;line-height:1;font-size:clamp(2.4rem,9vw,5rem)}
.qsearch{margin-top:clamp(1.6rem,4svh,2.4rem);max-width:640px}
.qsearch input{
  width:100%;padding:.6rem 0;border:0;border-bottom:1px solid rgba(40,40,40,.4);
  background:transparent;font-size:clamp(1.2rem,3.6vw,1.7rem);font-weight:300;border-radius:0;
  -webkit-appearance:none;
}
.qsearch input::placeholder{opacity:.35}
.qsearch input:focus{outline:none;border-bottom-color:var(--terra)}
.q-suggest{margin-top:clamp(1.8rem,4svh,2.6rem)}
.q-suggest-h{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.qcats{
  display:flex;gap:1.6rem;margin-top:clamp(2rem,5svh,3rem);
  overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-bottom:.3rem;
}
.qcats::-webkit-scrollbar{display:none}
.qcats button{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.5;
  padding:.3em 0;border-bottom:2px solid transparent;transition:opacity .3s,color .3s,border-color .3s;
}
.qcats button:hover{opacity:.85}
.qcats button[aria-pressed="true"]{opacity:1;color:var(--terra);border-color:var(--terra)}
.qlist{margin-top:.6rem;border-top:1px solid rgba(40,40,40,.25);max-width:760px}
#q-suggest-list{border-top:1px solid rgba(40,40,40,.25);margin-top:.8rem;max-width:760px}
.qitem{
  width:100%;display:flex;align-items:baseline;gap:clamp(.9rem,2.6vw,1.8rem);
  padding:1.1rem .1rem;border-bottom:1px solid rgba(40,40,40,.16);
  font-weight:600;font-size:clamp(1.02rem,2.2vw,1.3rem);transition:color .3s;
}
.qitem:hover{color:var(--terra)}
.qitem.open{color:var(--terra)}
.qitem .qi-n{font-weight:300;font-size:.82em;opacity:.5;min-width:2.2ch}
.qitem .qi-x{margin-left:auto;position:relative;width:12px;height:12px;flex:0 0 auto;align-self:center}
.qitem .qi-x::before,.qitem .qi-x::after{content:"";position:absolute;inset:50% auto auto 0;width:100%;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.qitem .qi-x::after{transform:rotate(90deg)}
.qitem.open .qi-x::after{transform:rotate(0)}
.qanswer{
  padding:.3rem .1rem 1.6rem calc(2.2ch + clamp(.9rem,2.6vw,1.8rem));
  border-bottom:1px solid rgba(40,40,40,.16);
  max-width:56ch;display:grid;gap:.7rem;
}
.qanswer p{font-size:.98rem;line-height:1.55;opacity:.85}
html:not(.rm) .qanswer{animation:ain .5s var(--ease)}
@keyframes ain{from{opacity:0;transform:translateY(-6px)}}
.qempty{margin-top:1.6rem;opacity:.7}

/* ═════════ MODAL ═════════ */
.modal{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:rgba(30,24,19,.62);padding:1.5rem;
}
.modal-card{background:var(--clay);padding:2.2rem 2.4rem;width:min(92vw,400px);display:grid;gap:.5rem}
html:not(.rm) .modal-card{animation:din .4s var(--ease)}
.modal-h{font-weight:700;font-size:1.2rem}
.modal-p{opacity:.7;font-size:.92rem}
.modal-acts{display:flex;gap:2rem;margin-top:1rem;align-items:baseline}

/* ═════════ DESKTOP ═════════ */
@media (min-width:821px){
  .fork{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .fork-half{min-height:52svh}
  .th-row{padding-inline:6vw;justify-content:center;overflow-x:visible}
  .smedia{height:clamp(280px,44svh,460px)}
  .step-body{padding-top:2.6rem}
  .scr-step .step-progress{margin-top:4.6rem}
}
@media (max-width:480px){
  .cnav-site{display:none}
  .cnav{padding:.8rem 1rem}
  .th-item img{height:min(56vw,300px)}
  .th-byoart{height:min(56vw,300px)}
  .mise .m-prot{margin-left:-6%}
  .step-acts .btn-order{width:100%}
  .confirm-acts .btn-order{width:100%}
}

/* motion safety */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}